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

.masthead {
width: 100%;
height: auto;
padding-bottom: 0.25rem;
}

.mast-container {
max-width: 1500px;
height: 12.5rem;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
}
 
.logo-container {
max-width: 360px;
position: absolute;
z-index: +999;
display: inline-flex;
height: 12.5rem;
align-items: center;
justify-content: center;
padding-left: 1rem;
width: 25vw;
}

.logo{
padding-bottom: 0.25rem;
position: relative;	
height: auto;
padding-top: 0.25rem;
}
 
.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-right: 1rem;
} 

/*nav headline*/
     
.slogan-wrap{
width: auto;
}     
     
.slogan-container {
width: auto;
float: right;
text-align: left;
padding-right: 1rem;
padding-top: 3rem;
}

.slogan-container h1 {
color: #ed1b2e;
text-transform: uppercase;
font-size: 4rem;
font-weight: 800;
letter-spacing: 8px;
text-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}

.slogan-container h1 span {
font-weight: 100;
font-size: 1.25rem;
vertical-align: top;
position: absolute;
margin-left: -1rem;
}
     
.nav-wrapper ul {
padding-top: 1.5rem;
display: inline-flex;
float: right;
}
 
nav ul li {
display: inline-block;
margin-right: 0;
padding-left: 1.75rem;
padding-right: 1.75rem;
}

nav ul li.first{
padding-left: 0;
}

nav ul li.last{}

nav ul li a {
letter-spacing: normal;
padding-bottom: 0.25rem;
font-size: 1.75rem;
font-weight: 600;
color: white;
}

nav ul li a:hover {
color: #ed1b2e;
}

.menu ul li {
border: none;
background: none;
text-decoration: none;
color: white;
font-size: 1.65rem;
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: #ed1b2e;
/*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 {
width: auto;  
position: absolute;  
margin-top: 7rem;
}
 
/*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.5rem;
font-weight: normal;
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: 2.5rem;
}

/*this hides the mobile version of the social media icons*/

.mobile-social {
display: none;
}
  
.desktop-social {
float: right;
padding-right: 0.5rem;
margin-top: -0.5rem;
}

.desktop-social img {
width: 40px;
}  
  

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


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

@media only screen and (min-device-width : 900px) and (max-width: 1475px) { 

.slogan-container h1 {
font-size: 3.5rem;
}

nav ul li a, .sub-menu a {
font-size: 1.5rem;
}

nav ul li {
padding-left: 1.3rem;
padding-right: 1.3rem;
}

/*don't touch*/	
}
/*don't touch*/


@media only screen and (min-device-width : 900px) and (max-width: 1350px) { 

.slogan-container h1 {
font-size: 3.25rem;
}
 
nav ul li a,  .sub-menu a {
font-size: 1.35rem;
}

nav ul li {
padding-left: 1.25rem;
padding-right: 1.25rem;
}


/*don't touch*/	
}
/*don't touch*/


@media only screen and (min-device-width : 900px) and (max-width: 1250px) { 

.slogan-container h1 {
font-size: 2.75rem;
}

nav ul li a, .sub-menu a {
font-size: 1.25rem;
}

nav ul li {
padding-left: 1.6rem;
padding-right: 1.6rem;
}


/*don't touch*/	
}
/*don't touch*/

 

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

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

.slogan-container h1 {
font-size: 3rem!important;
}

 /*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: 1112px) {

/*turn desktop navigation off*/
.desktop-navigation {
display: none;
}

.desktop-social {
display: none;
}

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

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

/*logo extends past masthead*/
.logo-container {
height: 7rem;
}

.logo{
display: inline-block;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
position: relative;
z-index: +3;
}

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

.slogan-wrap{}

.slogan-container {
background-color: white;
text-align: center;
padding-top: 1rem;
padding-bottom: 0.5rem; 
}

.slogan-container h1 {
font-family: "Nunito", sans-serif;
font-weight: 800;
font-size: 1.75rem;
color: #00457c;
}
  
.slogan-container h1 span {
font-weight: 100;
font-size: 0.75rem;
vertical-align: top;
}
  
nav {}

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

nav ul li {
text-align: center;
}

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%;
margin-top: 1rem;
}

#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*/
