/*



Theme Name: Tezzermail 2022



Theme URI: http://thetrafficexchangescript.com/



Description: The new responsive design for Tezzermail



Version: 1.0



Author: Josh Abbott, Jamison Raymond



*/





@charset "utf-8";

/* Heading font settings */

@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200;400;700&display=swap');


/* Main font settings */



body {

	font-size: 16px;

	font-weight: 400;

	color: #212529;

	background-color: #f5f8fa;

}





/* Main styles for the top level of the main menu */



.lfm_menu_bar {

	background-color: #f5f8fa;

	padding: 0 0 45px;

	margin-bottom: 20px; /* If your menu bar is overlapping the page content, increase the margin here */

}



@media (max-width: 991.98px) {

	/* Mobile view settings for the top level navigation */

	.lfm_menu_bar {

		padding-bottom: 0;

		margin-bottom: 20px;

	}

}





/* Site logo styles */



.lfm_menu_logo {

	max-height: 35px;

}

@media (min-width: 992px) {

	.lfm_menu_logo {

		margin-right: 20px;

	}

}





.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {

	/* Sets the navigation tabs for the top level */

	font-size: 15px;

	color: #1e3e7f;

}



.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link {

	/* Changes the colors when a tab is opened */

	color: navy;

	background-color: #FFFFFF;

}



.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {

	/* Hover style when a tab is not opened */

	background-color: #9b0000;

	color:#FFFFFF;

}



.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:hover {

	/* Hover style when a tab is opened */
	
	color: navy;
	
	background-color: #FFFFFF;

}



@media (min-width: 992px) {

	/* Desktop view settings for the top level navigation tabs */

	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {

		margin: 0px 3px;

		padding: 6px 15px;

		border: 1px solid rgba(255,255,255,0);

		border-radius: 5px;

		position: relative;

	}

	

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link,

	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {

		border: 1px solid #DDDDDD;

	}

	

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after {

		/* Fills in the gap between an opened tab and the bottom of the bar */

		content: "";

		background-color: #FFFFFF;

		width: calc(100% + 2px);

		height: 14px;

		position: absolute;

		bottom: -10px;

		left: -1px;

		border: 1px solid #DDDDDD;

		border-top: none;

	}

}



@media (max-width: 991.98px) {

	/* Mobile view settings for the top level navigation tabs */

	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {

		padding: 8px 15px;

		text-align: left;

	}

	

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link {

		/* Returns to the original colors when a tab is closed in mobile */

		color: #1e3e7f;

		background-color: #f5f8fa;

	}

	

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:hover {

		/* Returns to the original hover effect when closed in mobile  */

		color: #FFFFFF;

		background-color: #9b0000;

	}

	

	/* Adds an arrow in mobile view */

	.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:after {

		content: "";

		border-top: 0.3em solid;

		border-right: 0.3em solid transparent;

		border-bottom: 0;

		border-left: 0.3em solid transparent;

		color: #FFFFFF;

		transform: rotate(-90deg);

		position: absolute;

		right: 1.25rem;

		transition: all 0.1s ease-out;

	}

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after {

		color: navy;

		transform: rotate(0deg);

	}

	.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:after {

		color: #FFFFFF;

		transform: rotate(-90deg);

	}

}





/* Main styles for the second level of the main menu */



.lfm_menu_tab {

	background-color: #FFFFFF;

	border: 1px solid #DDDDDD;

	position: absolute;

	display: none;

	left: 0;

	top: 100%;

	z-index: 999;

	width: 100%;

}



li.lfm_tab_opened .lfm_menu_tab {

	display: flex;

}



@media (max-width: 991.98px) {

	/* Mobile view settings for the second level navigation */

	.lfm_menu_tab {

		background-color: #EEEEEE;

		position: relative;

		flex-direction: column;

		top: 0;

		padding: 5px 0;

	}

	li.lfm_tab_closed .lfm_menu_tab {

		display: none;

	}

}





.lfm_menu_tab > li > a {

	/* Sets the navigation links for the second level */

	font-size: 15px;

	padding: 0 20px;

	line-height: 45px;

	color: #444444;

	text-decoration: none;

	display: block;

}

.lfm_menu_tab > li > a:hover {

	color: navy;

}



.lfm_menu_tab .dropdown-menu a {

	/* Sets the navigation links for the third level */

	font-size: 15px;

	padding: 0 20px;

	line-height: 32px;

	color: #444444;

	text-decoration: none;

	white-space: nowrap;

	display: block;

}

.lfm_menu_tab .dropdown-menu li:hover {

	background-color: #9b0000;
	color:#f6f6f6;

}
.lfm_menu_tab .dropdown-menu li > a:hover {

	background-color: #9b0000;
	color:#f6f6f6;

}


@media (max-width: 991.98px) {

	/* Mobile view settings for the second level navigation links */

	.lfm_menu_tab > li > a {

		padding-left: 40px;

		line-height: 36px;

		width: 100%;

	}

	

	/* Mobile view settings for the third level navigation links */

	.lfm_menu_tab .dropdown-menu a {

		padding-left: 50px;

	}

}





/* Styles for the footer */



.lfm_footer {

	background-color: #001330;

}





/* Icon settings */



.far, .fas {

	margin-right:3px;

}



.feedicon {

	color:#1e3e7f;

	font-size:20px;

	margin-right:5px;

}





/* Profile picture sizes */



.profilepic_small {

	width:40px;

	height:40px;

}



.profilepic_med {

	width:75px;

	height:75px;

}



.profilepic_large {

	width:200px;

	height:200px;

}





/* Various styles */



.buttonlink {

	/* This class defines <a> tag links that look like buttons */

	cursor: pointer;

	background-color:#1468e5;

	border-radius:2px;

	border:1px solid #002175;

	display:inline-block;

	cursor:pointer;

	color:#FFFFFF;

	font-family:arial;

	font-size:18px;

	font-weight:500;

	padding:4px 7px;

	margin:2px 1px 2px 1px;

	text-decoration:none;

}

.buttonlink:hover {

	/* This controls the button links when you hover over them */

	color:#FFFFFF;

	background-color:#3385FF;

	text-decoration:none;

}





.infobar {

	/* This class defines sections that span the entire page width */

	width:100%;

	padding-top: 15px;

	padding-bottom: 15px;

	color:#FFFFFF;

	background-color:#555555;

}

.infobar h2 {

	color:#FFFFFF;

}





.vcenter {

	/* This is a class that can be used in Bootstrap rows to vertically center the content */

	display: flex;

	align-items: center;

}





/* The next 3 sections control various text styles used throughout the LFM Members Area */

.lfm_title {

	font-family: 'Oxanium','Arial'; color:#1e3e7f; font-size:32px;
	

}



.lfm_descr {

	font-family: "Arial"; color:#111111; font-size:16px;

}



.lfm_descr_bold {

	font-family: "Arial"; color:#000000; font-size:16px;

	font-weight:700;

}
h1, h2, {

	font-family: 'Oxanium','Arial'; color:#1e3e7f; font-size:32px;
	font-weight:700;

}
h3, h4 {

	font-family: 'Oxanium','Arial'; color:#1e3e7f; font-size:32px;
	font-weight:400;

}