﻿ /*-------DESKTOP NAV---------*/ 
 
@media only screen and (min-width: 1001px) { 
 
/*turn mobile navigation off*/
#mobileMenu {
display: none;
}

.masthead {
width: 100%;
height: auto;
}

.mast-container {
max-width: 1500px;
height: 9.5rem;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
display: flex;
}
 
.logo-container {
display: flex;
height: 9.5rem;
align-items: center;
z-index: +999;
}

.logo{
width: 100%;
max-width: 600px;
height: auto;
display: block;
padding-top: 1.5rem;
padding-left: 1rem;
}
 
.logo img {
display: block;
margin: 0 auto;
width: 100%;
}

.nav-wrapper {
float: right;
margin-right: 0; 
width: 100%;
display: inline-flex;
justify-content: flex-end;
padding-top: 1rem;
padding-right: 1rem;
} 

.nav-wrapper ul {
padding-top: 1rem;
padding-bottom: 1.5rem;
}
 
nav ul li {
display: inline-block;
margin-right: 0;
padding-right: clamp(1rem, 4vw, 4.25rem); 
}
 
nav ul li a {
letter-spacing: 0.0035em;
padding-bottom: 0.25rem;
font-size: clamp(1rem, 1.2vw + 0.5rem, 1.5rem);
font-weight: 500;
letter-spacing: 0.05rem;
}

nav ul li a:hover {
color: #1c5cb4;
}

.menu ul li {
border: none;
background: none;
text-decoration: none;
color: white;
font-weight: 400;
font-size: 1.25rem;
padding: 0;
}

/*makes sub links full width*/
nav .menu ul li {
display: block;
}

/*hides submenu until hovered*/
.nav-wrapper ul.sub-menu {
display: none;
position: absolute;
z-index: 1000;
text-transform: none;
padding: 0;

/*can chage the submenu width here if necessary:*/
/*min-width: 175px;*/
}

.nav-wrapper ul.sub-menu {
/*prevents submenu from covering the main nav*/
box-shadow: 6px 8px 6px rgba(0,0,0,0.55);
}

/*submenu bg on desktop, regular menu bg on mobile*/
.nav-wrapper ul.sub-menu {
background-color: #1c5cb4;
/*remove padding from submenu*/
padding-bottom: 0;
}
			
.nav-wrapper ul.sub-menu {
text-align: center;
}

ul.sub-menu {
position: absolute;
}

.nav-wrapper ul {
z-index: +3;
}

.desktop-navigation {}

/*show submenu on hover*/
.menu-item-has-children:hover .sub-menu  {
display: block;
}	

.sub-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
line-height: 125%;
font-size: 1.25rem;
text-align: left;
text-shadow: none;
}	 

nav ul li {
margin-top: 0;
}

/*other links may have padding right for spacing*/
nav ul li.last {
padding-right: 0;
}

/*24/7 phone box - desktop*/
 
.contact-mobile-wrap {
display: none;
} 

.contact-desk-wrap {
display: block;
} 

.contact-desk-wrap {
width: 100%;
}

.contact-section{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
max-width: 450px;
float: right;
}

.contact-section a, .contact-section p {
height: 100%;  
text-align: center;
font-weight: 700;
margin-bottom: 0;
}

.support-wrap, .phone-wrap {
width: 50%;  
}
 
.support-wrap p, .phone-wrap p {
font-size: 1.75rem; 
color: white;
text-transform: uppercase;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}  
 
.support-wrap p {
background-color: #1c5cb4;
}

.phone-wrap p, .phone-wrap a  {
background-color: #26af36;
} 

a:link.phone-top, a:active.phone-top, a:visited.phone-top, a:hover.phone-top  {
color: #ffffff;
text-decoration:none;
} 
 
.desktop-navigation {
margin-top: 4.5rem;
position: absolute;
}

/*don't touch*/	
}
/*don't touch*/


/*-------ADDITIONAL DESKTOP NAV STYLES---------*/ 

 /*---*/

/*-------TABLET NAV---------*/ 

@media only screen and (min-device-width : 768px) 
	and (max-device-width : 1024px) { 
 
/*---*/

 /*don't touch*/
}
/*don't touch*/


/*-------------------------------------*/

/*Tablet landscape only*/

@media only screen and (min-device-width : 768px) 
	and (max-device-width : 1024px)
	and (orientation: landscape) { 

 /*---*/
 
/*don't touch*/
}
/*don't touch*/
 

/*===========================================*/


 /*-------MOBILE NAV---------*/ 

/*Covers all phones and tablets up to iPad Pro 12.9" portrait.
iPad Pro 12.9" landscape shows desktop styles instead.
*/

@media only screen and (min-device-width : 320px) and (max-width: 1000px) {

/*turn desktop navigation off*/
.desktop-navigation {
display: none;
}

/*turn mobile navigation on*/
#mobileMenu {
display: block;
}

.masthead {
box-sizing: border-box;
padding: 0;
width: 100%;
background-repeat: no-repeat;
background-size: auto 9.5rem;
}

/*==============================*/

/*24/7 phone box*/

.contact-desk-wrap {
display: none;
} 

.contact-mobile-wrap {
display: block;
} 
 
.contact-section{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
}

.contact-section a, .contact-section p {
height: 100%;  
text-align: center;
font-weight: 700;
margin-bottom: 0;
}

.support-wrap, .phone-wrap {
width: 50%;  
}
 
.support-wrap p, .phone-wrap p {
font-size: clamp(1.35rem, 3.5vw + 0.5rem, 2rem);
color: white;
text-transform: uppercase;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}  
 
.support-wrap p {
background-color: #1c5cb4;
}

.phone-wrap p {
background-color: #26af36;
}


#mobileMenu button {
margin-top: clamp(2.75rem, 6.5vw + 0.5rem, 3.75rem) !important;
}

/*logo extends past masthead*/
.logo-container {
height: 4.75rem;
margin-top: 0.5rem;
margin-bottom: 0;
}

.logo{
display: inline-block;
margin-top: 0.5rem;
position: relative;
z-index: +3;
}

.logo img {
display: block;
max-width: 250px;
margin-left: 0.5rem;/
margin-top: 0.5rem;
}

nav {}

nav ul {
padding: 1rem;
padding: 0;
}

nav ul li {
text-align: center;
}

/*mobile link color*/
nav ul li a {
color: white;
}

nav ul li  {
text-decoration: none;
display: block;
width: 100%;
padding: 0;
padding-top: 1rem;
padding-bottom: 1rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}	

/*1-this hides the submenu initially*/
#menu-menu-1 li.menu-item-has-children ul {
position: absolute;
z-index: -1;
opacity: 0;
} 
 
/*2-this shows the submenu on hover*/ 
#menu-menu-1 li.menu-item-has-children ul.show {
position: relative;
z-index: +1;
opacity: 1;
}	
 
/*toggle styles*/

/*burger menu*/
#mobileMenu button {
-webkit-tap-highlight-color: white;
width: 5rem;
height: 5rem;
background: none;
position: absolute;
top: 0;
right: 0;
margin-top: 0;
margin-right: 1rem;
border: 1px solid transparent;
}

#mobileMenu button img {
width: 100%;
}

#mobileMenu {
z-index: +999;
}

#mobileMenu button {
z-index: +999;
}

#toggleNav nav {
padding: 0;
}

#toggleNav nav ul {
width: 100%;
margin-top: 0;
padding-top: 0;
position: relative;
z-index: +1;
}

#toggleNav nav ul.sub-menu {
margin-top: 0.5rem;
border-top: 0!important;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
}	

/*tightens submenu link spacing*/
#toggleNav nav ul.sub-menu li {
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
line-height: 150%;
}
 
/*this hides the desktop version of the social media icons*/
.social-links {
display: none;
}

/*this makes the mobile version of the social media icons visible*/
.mobile-social {
display: block;
}

.mobile-social img {
width: 2.5rem;
} 

li.mobile-social {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}

 
/*don't touch*/
}
/*don't touch*/
