﻿.clear{clear:both;}

/***** Start of primary nav ******/
#menu-button{display: none;}
nav.mobile {display:none;}

nav.primary {
	padding:0;
	display:flex; justify-content: flex-start; align-items: stretch; 
	margin:0;
	width:100%;
	position:relative;
}
nav.primary ul {
	margin:0; 
	padding:0;position:relative;
	display:flex; justify-content: flex-start; align-items: stretch; 
}
nav.primary ul li {
	display:flex; justify-content: center; align-items: stretch; 
	margin:0; position: relative; 
	list-style-type:none; 
	width:auto;
}
nav.primary ul li a {
	color:#fff;position: relative; 
	font-size:18px; letter-spacing: 2px; 
	text-decoration:none;
	display:flex; justify-content: center; align-items: center; 
	margin:0;
	text-align:center;
	text-transform:uppercase;
	-webkit-transition:.3s ease-in;  
	-moz-transition:.3s ease-in;  
	-o-transition:.3s ease-in;  
	transition:.3s ease-in;	
	font-weight:500;
	padding:0 20px;
	cursor: pointer; 
}	
nav.primary ul li a:hover {
	background: #ac2733;
	color:#fff;
}
/* Appearance of the sub-level links */
nav.primary ul li li a { 
	display:flex; justify-content: flex-start; align-items: center; 
	font-size:18px; letter-spacing: 1.5px;
	padding:13px 20px;
	color:#000;
	background: #e7e7e7;
	text-align:left;
	border-right:none;
	border-left:none;
	border-bottom: #303030 solid 1px;
}
/* Appearance of the sub-level links on hover */
nav.primary ul li li a:hover { 
}
nav.primary ul li li:last-child a { border-bottom: none; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }

/* This controls the Primary nav dropdowns for sublinks. Should not have to edit this too muuch */
nav.primary ul ul {
    display: none;
    position: absolute; top: 100%; left: 0; 
	width: unset;
}
nav.primary ul ul ul {
    position: absolute; 
    left: 100%;
    top:0; 
}
nav.primary ul li:hover > ul {  
    display: block;
    line-height:18px; 
    z-index: 100;
}
nav.primary > ul > li > a:before {  
    position: absolute; z-index: 2; content: ""; bottom: 0; left: 0; width: 100%; height: 4px; 
	-webkit-transition:.2s ease-in; opacity: 0; 
	-moz-transition:.2s ease-in;  
	-o-transition:.2s ease-in;  
	transition:.2s ease-in;	
}
nav.primary > ul > li:hover > a:before {  opacity: 1;background: #ac2733; 
	-webkit-transition:.45s ease-in;  
	-moz-transition:.45s ease-in;  
	-o-transition:.45s ease-in;  
	transition:.45s ease-in;	
}
nav.primary ul ul li {
    float: none; 
    position: relative;
    margin:0;
	display: block;
}

.homepage nav.primary ul li a.homepage, 
.invpage nav.primary ul li a.invpage, 
.rentalpage nav.primary ul li a.rentalpage, 
.auctionpage nav.primary ul li a.auctionpage, 
.financingpage nav.primary ul li a.financingpage, 
.locationpage nav.primary ul li a.locationpage, 
.contactpage nav.primary ul li a.contactpage { 
	background: #050d41!important; color: #cbccd3!important; 
}
.homepage nav.primary ul li a.homepage:hover, 
.invpage nav.primary ul li a.invpage:hover, 
.rentalpage nav.primary ul li a.rentalpage:hover, 
.auctionpage nav.primary ul li a.auctionpage, 
.financingpage nav.primary ul li a.financingpage:hover, 
.locationpage nav.primary ul li a.locationpage:hover, 
.contactpage nav.primary ul li a.contactpage:hover { 
	background: #050d41!important; color: #cbccd3!important; 
}

/******** End of primary Nav ***************/

@media screen and (min-width: 951px)  {
		
	.menu-toggle.exit-click{
		display: none !important;
	}
}

@media screen and (max-width: 950px)  {
	
	.mobile + .menu-toggle.exit-click{
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: 499;
		pointer-events: none;
		background: rgba(36,32,33,0.33);
		opacity: 0;	
		transition: ease opacity 0.3s;
	}
	.mobile.open + .menu-toggle.exit-click{
		pointer-events: auto;
		opacity: 1;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}
/*==============================
	Mobile Nav Styles			
================================*/	
	nav.primary{display:none;} 
	
	#menu-button { 
		display: flex; justify-content: flex-start; align-items: stretch; 
		position: relative;
		z-index: 400; /* needs to be lower than nav.mobile, adjust as needed */
	}
	#menu-button a {
		color:#fff; display: flex; justify-content: flex-start; align-items: center; column-gap: 16px; padding: 20px; 
		font-size: 24px; font-family: 'apotek', sans-serif; 
		text-decoration: none;
		cursor: pointer; 
		-webkit-transition:.3s ease-in;  
		-moz-transition:.3s ease-in;  
		-o-transition:.3s ease-in;  
		transition:.3s ease-in;	
	}
	#menu-button a span {
		color:#fff;position: relative; 
		font-size:18px; letter-spacing: 2px; 
		text-decoration:none;
		margin:0;
		text-align:left;
		text-transform:uppercase;
		font-weight:500;
	}
	#menu-button a:hover {
		color:#fff; background: #ac2733; 
		font-size: 24px;
		text-decoration: none;
		cursor: pointer; 
	}
	nav.mobile {
		display: block;
		position: fixed;
		top: 0;
		left: -320px;
		width: min(100%, 320px);
		height: 100%;
		background: #00135e;
		z-index: 500; /* needs to be higher than #menu-button, adjust as needed */
		overflow:auto;
	}

	/* MENU HEADER STYLES */
	nav.mobile .mobile_top {
		position: relative;
		display:flex; height: 12px;
		padding: 0;
		margin:50px 0 10px 0;
		color: #999;
		font-size: 18px;
		font-weight: 400;
	}

	/* MENU CLOSE 'X' BUTTON */
	nav.mobile .menu-toggle:not(.exit-click) {
		position: absolute;
		padding: 3px 8px 3px; transition: .2s ease all; 
		font-family: Arial, sans-serif;
		font-size: 32px;
		line-height: 1;
		background: #000;
		color: #fff;
		text-decoration: none;
		top: -38px; width: 46px; height: 46px; display: flex; justify-content: center; align-items: center;
		right: 13px;
		cursor: pointer; 
	}
	nav.mobile .menu-toggle:not(.exit-click):hover { /* Menu close button on hoveer */
		color:#fff; background: #ac2733; 
	}

	/* MENU LIST STYLE */
	nav.mobile ul {
		list-style: none;
		margin:0;
		padding:0;
	}
	nav.mobile > ul > li {
		border-bottom: 1px solid #000;
		position:relative;
	}
	nav.mobile > ul > li:first-child {
		border-top: 1px solid #000;
	}
	nav.mobile ul ul li {
		border-top: 1px solid #000;
		position:relative;
	}
	/* FIRST LEVEL */
	nav.mobile ul li a {
		position: relative;
		cursor: pointer; 
		display: flex; justify-content: flex-start; align-items: center; min-height: 54px; column-gap: 16px; 
		font-size: 19px; text-transform: uppercase; 
		padding: 10px;
		color: #fff; transition: .2s ease all; 
		text-decoration: none;
		text-align: left;
	}
	nav.mobile ul li a:hover {
		color:#fff; background: #ac2733; 
	}

	/* SECOND LEVEL */
	nav.mobile ul li li a {
		position: relative;
		display: flex; justify-content: flex-start; align-items: center; min-height: 54px; column-gap: 16px; 
		padding: 10px 10px 10px 20px;
		color: #fff;
		text-decoration: none;
	}
	nav.mobile ul li li a:hover {}

	/* THIRD LEVEL */
	nav.mobile ul ul, nav.mobile ul ul ul, nav.mobile ul ul ul ul {background: rgba(0, 0, 0, .25);}
	nav.mobile ul li li li a {
		position: relative;
		display: flex; justify-content: flex-start; align-items: center; min-height: 54px; column-gap: 16px; 
		padding: 10px 10px 10px 30px;
		color: #fff;
		text-decoration: none;
	}
	nav.mobile ul li li li a:hover {}
	
	nav.mobile ul li a i { font-size: 14px!important; }

	nav.mobile ul li .click.open i:before{
		content: "\f068";
	}

	.nav-footer {
		color:#fff; font-family: 'apotek', sans-serif; letter-spacing: 2px; 
		position:relative; opacity: .75;
		text-align:center; font-weight: 200; 
		font-size:16px; 
		padding:32px 16px;
	}
}

@media only screen and (max-width: 200px) {
	#menu-button a span { display: none!important; }
}

@media only screen and (max-width: 150px) {
	#menu-button, #menu-button a { width: 100%; justify-content: center; }
}