﻿.header{
    z-index: 400;
	display: flex; 
	align-items: center;
    justify-content: space-between;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
    -webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,.3);
    box-shadow: 0 0 5px 5px rgba(0,0,0,.3);
}
.logo-header{
	padding: 5px 0 2px 23px;
}

.toggle-icon {
  width: 33px;
  height: 21px;
  position: absolute;
  top: 50%;
  right: 50%;
  z-index: 100;
  -webkit-transform: translate(65%, -50%);
  transform: translate(65%, -50%);
  cursor: pointer;
  outline: 0;
  -webkit-transition-duration: .3s;
  transition-duration: .3s
	box-sizing: border-box;
}
.nav-toggle .toggle-icon i, .nav-toggle .toggle-icon i:after, .nav-toggle .toggle-icon i:before {
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  position: absolute;
  height: 3px;
  top: 9px;
  left: 0;
  border-radius: 40px;
  background-color: #ce0e2d
}
.nav-toggle .toggle-icon i:before {
  content: "";
  top: -9px;
  width: 15px
}
.nav-toggle .toggle-icon i {
  width: 21px
}
.nav-toggle .toggle-icon i:after {
  content: "";
  width: 26px
}
.nav-on .nav-toggle .toggle-icon i {
  background: 0 0
}
.nav-on .nav-toggle .toggle-icon i:before {
  -webkit-transform: rotateZ(45deg) translate(6.5px, 6.5px);
  transform: rotateZ(45deg) translate(6.5px, 6.5px)
}
.nav-on .nav-toggle .toggle-icon i:after {
  -webkit-transform: rotateZ(-45deg) translate(6.5px, -6.5px);
  transform: rotateZ(-45deg) translate(6.5px, -6.5px)
}
.nav-toggle{
    display: flex;
	width: 70px;
    height: 69px;
    position: relative;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
}
.nav-toggle.desktop-nav-active{background-color:#ce0e2d !important}.nav-toggle.desktop-nav-active i,.nav-toggle.desktop-nav-active i:after,.nav-toggle.desktop-nav-active i:before{background-color:#fff}



.header .search-form{width: 0; overflow: hidden; transition: 0.3s all ease; position: absolute; right: 100%; opacity: 0;}
.search-form.open{width: 400px; opacity: 1;}

.mobile .search-form{
	position: relative;
	margin-top: 20px;
}

.search-form button{
	background: unset !important;
	position: absolute;
	right: 1px;
	top: 1px;
	bottom: 1px;
	color: #ce0e2d;
	width: 68px;
	height: 68px;
	font-size: 24px !important;
	appearance: none !important;
	outline: none !important;
	border: none !important;
	cursor: pointer;
}


.search-controls{
	
    position: relative;
    width: 70px;
}
.search-form input{
	height: 70px !important;
    box-sizing: border-box !important;
    padding: 14px 12px !important;
    background-color: #ebf1f4 !important;
    border: 1px solid #ce0e2d !important;
    width: 100% !important;
	text-transform: uppercase !important;
	font-size: 16px !important;
	font-family: "elza", sans-serif !important;
    z-index: 500 !important;
}
.search-form ::placeholder{
	color: #999 !important;
}
.search-toggle {
    width: 70px;
    display: block;
    height: 70px;
}
.search-toggle .toggle-icon {
	color: #003a5d !important;
	box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: unset !important;
	height: 69px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 25px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: 0;
    left: 30px;
}
.search-toggle.open .toggle-icon i:before {
    content: "\f00d";
}
.search-toggle:hover i:before {
    color: #ce0e2d !important;
}

.two-column{
	column-count: 2;
}
.clear{clear:both;}

/***** Start of primary nav ******/
#menu-button{display: none;}
nav.mobile { display:none;}

nav.primary {
	padding:0;
	display:inline-block;
	margin:0;
	position:relative;
	}
	nav.primary ul {
		margin:0; 
		padding:0;
		}
	nav.primary > ul {
		display: flex;
		justify-content: flex-end;
    	font-family: "elza", sans-serif;
		}
		nav.primary ul li {
			display:inline-block;
			margin:0;
			list-style-type:none; 
			width:auto;
		position: relative;
			}
			nav.primary ul li a {
				color: #003a5d;
				font-size:16px;
				line-height:69px;
				text-decoration:none;
				display:block;
				margin:0;
				text-align:center;
				text-transform:uppercase;
				-webkit-transition:.4s ease-in;  
				-moz-transition:.2s ease-in;  
				-o-transition:.2s ease-in;  
				transition:.2s ease-in;	

				padding:0 30px;


				text-decoration: none;
				font-weight: 500;
				letter-spacing: .03em;

				}	
			nav.primary ul li a:hover {
				background-color: #ebf1f4;
				}
			nav.primary ul li a:hover i{
				color: #ce0e2d;
				}
			nav.primary ul li a i {
				font-size: 18px;
				margin-left: 8px;
				line-height: 1;
			}

			/* Appearance of the sub-level links */
			nav.primary ul li li { 
				display: block;
			}
			/* Appearance of the sub-level links */
			nav.primary ul li li a { 
				display: block;
				padding: 20px 65px 20px 15px;
				position: relative;
				border-bottom: 1px solid #c9c9c9;
				white-space: nowrap;

				text-align: left;
				text-decoration: none;
				font-weight: 500;
				line-height: 1;
				letter-spacing: .03em;
    			font-size: 16px;
				text-transform: none;

			}
			/* Appearance of the sub-level links on hover */
			nav.primary ul li li a:hover { 
				background: unset;
				color: #ce0e2d;
			}


nav.primary ul li li a i {
    padding: 10px;

    position: absolute;
    right: -10px;
    top: 0;
    bottom: 0;
    line-height: 1.44;
	
    margin-left: auto;
    display: block;
    color: #ce0e2d;
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}
nav.primary ul li li a:hover i {
	opacity: 1;
}


/* This controls the Primary nav dropdowns for sublinks. Should not have to edit this too muuch */
nav.primary ul ul {
    opacity: 0;
    visibility: hidden;
    padding: 20px;
    position: absolute;
    top: 100%!important;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #fff;
    border-top: 8px solid #ce0e2d;
    border-bottom: 8px solid #ce0e2d;
    text-transform: none;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 45px;
    -moz-column-gap: 45px;
    column-gap: 45px;
    -webkit-transition: opacity .3s,visibility .3s,max-height .3s;
    transition: opacity .3s,visibility .3s,max-height .3s;
}
nav.primary ul li:hover > ul {  
opacity: 1;
    pointer-events: initial;
    visibility: visible;
    z-index: 500;
    -webkit-transition: opacity .5s,visibility .5s,max-height .5s;
    transition: opacity .5s,visibility .5s,max-height .5s;
}


@media screen and (max-width: 1430px)  {
	nav.primary ul li a{ font-size: 14px; padding: 0 20px;}	
}


/******** End of primary Nav ***************/

/*==============================
	Mobile Nav Styles			
================================*/	
@media screen and (min-width: 1200px)  {
	.mobile-nav-ul{
		display: none !important;
	}
}

@media screen and (max-width: 1459px) and (min-width: 1200px)  {

	nav.primary ul li li a { 
    padding-right: 30px;
    font-size: 16px;
	}
}
@media screen and (max-width: 1349px) and (min-width: 1200px)  {

	nav.primary ul li li a { 
		padding: 15px 20px 15px 15px;
		font-size: 14px;
	}
}
@media screen and (max-width: 1199px)  {
	.sub-menu-flyout, .flyout-footer{display: none !important;}
	nav.mobile{
		background: #fff !important;
	}
	.header{justify-content: space-between;}
nav.primary, .search-controls{display:none;}
	}

nav.mobile {
	display:block;
	position: fixed;
	top: 70px;
	right: -350px;
	width: 350px;
    height: calc(100% - 70px);
	font-family: "elza", sans-serif;
    background: #fcfcfc;
	z-index: 500; /* needs to be higher than #menu-button, adjust as needed */
	transition: box-shadow ease 0.3s;
}
nav.mobile.open {
    -webkit-box-shadow: 0 1px 5px -2px rgba(0,0,0,.5);
    box-shadow: 0 1px 5px -2px rgba(0,0,0,.5);
}

 .flyout-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #fff;
    border-top: 1px solid #ebf1f4;
    padding: 32px 30px;
}
 .flyout-footer .logo-header-flyout {
    width: 100%;
    max-width: 115px;
}
 .flyout-footer .logo-header-flyout img{
    max-width: 100%;
}
 .flyout-footer .flyout-social-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
 .flyout-footer .flyout-social-icons .flyout-social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 31px;
    height: 31px;
    margin-right: 14px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #ce0e2d;
    border: 1px solid #9e9e9e;
    border-radius: 100%;
    font-size: 13px;
}
.flyout-footer .flyout-social-icons .flyout-social:last-child {
    margin-right: 0;
}

.flyout-footer .flyout-social-icons .flyout-social:focus, .flyout-footer .flyout-social-icons .flyout-social:hover {
    background-color: #ce0e2d;
    color: #fff;
    border-color: #ce0e2d;
}

/* MENU HEADER SOCIAL MEDIA */
	nav.mobile .social-media {
		position: relative;
		text-decoration: none;
		display: inline-block;
		font-size:16px;
		word-spacing:13px;
		padding:0 0 0 15px;
		color: #ccc !important;
	}
	
	nav.mobile .social-media a:link, nav.mobile .social-media a:visited {color:#ccc; text-decoration:none;}
	nav.mobile .social-media a:hover, nav.mobile .social-media a:active {color:#fff; text-decoration:underline;}

/* MENU HEADER STYLES */
nav.mobile .mobile_top {
	position: relative;
	display:block;
	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;
	font-family: Arial, sans-serif;
	font-size:24px;
	font-weight: bold;
	line-height: 1;
	background: #222;
	color: #999;
	text-decoration: none;
	top:-38px;
	right:13px;
}
nav.mobile .menu-toggle:not(.exit-click):hover { /* Menu close button on hoveer */
	color: #fff;
}


.sub-menu-flyout>.menu-item>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 25px 30px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #ebf1f4;
    background-color: #fff;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
	
	
    font-weight: 500;
    line-height: 1;
    letter-spacing: .03em;
	color: #003a5d;
}
.sub-menu-flyout>.menu-item>a:hover {
    background-color: #ebf1f4;
    color: #003a5d;
}
.sub-menu-flyout>.menu-item>a .icon-wrapper {
    display: block;
    width: 45px;
    height: 32px;
    margin-right: 15px;
}
.sub-menu-flyout>.menu-item>a .icon-wrapper img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
.sub-menu-flyout>.menu-item>a i {
    padding: 10px;
    margin-left: auto;
    display: block;
    color: #ce0e2d;
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    position: absolute;
    right: 20px;
}
.sub-menu-flyout>.menu-item>a:hover i {
	opacity: 1;
}

nav.mobile ul li .click i{/* dropdown menu idicator arrow be sure to include this image with your image files */ 
	position:absolute;
	display:block;
	cursor:pointer;
	z-index: 12399994;
	top:0;
	right:0;
	width:auto;
	height:auto;
	padding: 13px 20px;
	color:#fff;

}
nav.mobile ul li .click.open i:before{
    content: "\f068";
}
	
/* MOBILE LINKS */

.mobile-nav-ul {
}
.mobile-nav-ul > li {
}
.mobile-nav-ul > li > a{
    padding: 25px 80px 25px 40px;
    border-bottom: 1px solid #ebf1f4;
    font-size: 16px;
    display: block;
	color: #003a5d;
	font-weight: 500;
	text-transform: uppercase;
    overflow: hidden;
}
.mobile-nav-ul > li > i{
    position: absolute;
    right: 0;
	transform: translateY(-67px);
    width: 67px;
    height: 67px;
    text-align: center;

    line-height: 67px;
}
.mobile-nav-ul > li > i + ul{
    position: absolute;
    right: 0;
	top: 0;
	left: 0;
	transform: translateX(100%);
	bottom: 0;
	transition: ease all 0.3s;
    background-color: #ebf1f4;
	display: block;
	z-index: 510;
    padding: 40px 40px 20px;
	
}
.mobile-nav-ul > li > i.open + ul{
	transform: translateX(0);
}
.mobile-nav-ul > li > i + ul li a{
    font-size: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #c9c9c9;
    text-transform: none;
    display: block;
	color: #003a5d;
    font-weight: 500;
}
.mobile-nav-ul > li > i + ul li a:hover{
    color: #ce0e2d;
}
.click{
	
    cursor: pointer;
}
.mobile-nav-ul > li .unclick{

    display: block;
    padding: 10px;
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 20px;
    cursor: pointer;
	
}

/* FONT AWESOME ICONS */
nav.mobile ul li a .fa{
	width:25px;
	font-weight:100;
	padding:8px 3px;
	margin:0 6px 0 0;
	text-align:center;
	background:#292929;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}


nav.mobile ul li .fa-chevron-down {color:#999;}
