
/* ## Site Header ## */
.site-header {position:relative; z-index:99; margin:0; background:#003F62; padding: 10px; border-bottom: 1px solid #005380;}

/* static containers to account for header buttons on mobile - allows absolute positioning to the header */
.site-header .container, .site-header [class*="grid-"] {position:static;}
.site-header  a.site-logo {display:block; text-align:center;}
.site-header .header-wrapper{display: flex; align-items: flex-start;}
.site-header .header-wrapper .header-logo{width: 100%; position: relative; z-index: 9;}
.header-links {text-align: right; z-index: 11}
.header-links a {  margin: 0 3px; text-decoration: none; display:none;  color: #fff;}
.header-links .sep {display:none;}
.login-nav .sep{color: #00B8CF; margin:0 10px;}	
.header-links a:hover, .header-links a:focus, .header-links a:active {}
.header-links .cart-link{color: #fff;}
.login-nav{background:#00314C; padding: 10px 20px;}
.login-nav.logged-out .member-login, .login-nav.logged-in .anonymous-login, .login-nav .member-login .logout + .sep,
.login-nav .anonymous-login .sep{display: none;}
.login-nav a, .login-nav span{color:#fff;}
.site-search .search-trigger {position:absolute; bottom:10px; right:10px; font-size:1em; padding:0; border:0px; color:#fff; z-index:2; text-align:center; cursor:pointer; background:none; }
.site-search .search-trigger:hover, .site-search .search-trigger:focus, .search-active .site-search .search-trigger {}
.site-search .search-trigger > span {flex-direction: column; align-items: center; justify-content: center;}
.site-search .search-trigger span > span{  order: 2; font-weight: 300; font-size: 0.825em; }
.site-search .inner {display:none; position:absolute; background:#aaa; top:135px; left:0px; width:100%; background:#00314C;}
.search-active .site-search .inner {display:block;}
.search-active .site-search .search-box {position: relative;}
.site-search .search-open, .search-active .site-search span.search-close{display: flex;}
.site-search .search-close, .search-active .site-search span.search-open{display: none;}

.site-search .inner input[type="text"] {margin:0px; width: 100%; padding:15px 10px; background:transparent; border:none; color: #fff;} 
.site-search .inner input[type="text"]::placeholder{color: #fff;}
.site-search .search-btn {position:absolute; right:0px; top:0px; height:100%; text-indent: -9999em; width: 50px; background:url(/cms/images/general/icon-search.svg) no-repeat; background-position: center; background-size: 20px; background-color: transparent; border:none; outline: none;}


/* =================================================================
                        Media Queries
===================================================================*/


@media only screen and (min-width:48.063em){

	.site-header .container, .site-header [class*="grid-"] {position:relative;}
	.site-header > .inner {padding:10px 0;}
	.site-header .header-wrapper .header-logo{width: 30%;}
	.site-header .header-wrapper .header-links{width: 70%;}
	.site-header .header-wrapper .header-links-inner{display: flex; justify-content: flex-end;}
	.site-header .header-wrapper .header-links-inner > span a{padding: 10px 15px; position: relative;}
	.site-header .header-wrapper .header-links-inner span.cart-link a{padding-right: 7px;}
 .site-header .header-wrapper .header-links-inner span.cart-link a:after{content: '|';height: 75%; color: #00B8CF;left: 10px; position: relative; opacity: 1; transition: all ease .5s}
 .search-active .site-header .header-wrapper .header-links-inner span.cart-link a:after{opacity: 0; transition: all ease .5s}
	.site-header a.site-logo {text-align:left;}

	.header-links a {display:inline-block; font-size: 1em; font-weight: 300; margin: 0;}
	.header-links .sep{display:inline-block; color: #09e4ff}	
	.site-search {position: relative;}
	.site-search .inner{width: 400px; top: 40px; right: 0; left: auto;}
	.site-search .search-trigger {position: relative; top: 0; right: 0; bottom: 0;  padding: 10px 15px; transition: all ease .5s; background:transparent; border:1px solid transparent;  width: 120px;}
	.site-search .search-trigger > span{ flex-direction: row;}
	.site-search .search-trigger span > span{ order: 1; font-size: 1em; }
	.site-search .search-trigger span img{width: 17px;  margin: 0 5px; order: 1;}
	.site-search .inner input[type="text"]{outline: none; border: 1px solid #8ED7FF;}

	.search-active .site-search .search-trigger{background: #00314C; border-top: 1px solid #8ED7FF; border-left: 1px solid #8ED7FF;border-bottom: 1px solid transparent; border-right: 1px solid #8ED7FF; padding: 10px 15px 7px; transition: all ease .5s;}
	.login-nav{display: none;}

}