
/* ## Site Header ## */
.site-header {position:relative; z-index:1000; margin:0; background:#fff;}
/* 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;}

.header-links {text-align: right;}
.header-links a {  margin: 0 3px; text-decoration: none; display:none;}
.header-links .sep {display:none;}
.header-links a:hover, .header-links a:focus, .header-links a:active {}

.site-search {margin:0 -10px;}
.site-search .search-trigger {position:absolute; top:2px; left:54px; font-size:1.6em; padding:0; border:0px; width:50px; height:46px; background:#333; color:#fff; z-index:2; text-align:center; cursor:pointer;}
.site-search .search-trigger:hover, .site-search .search-trigger:focus, .search-active .site-search .search-trigger {background:#111;}
.site-search .search-trigger > * {padding-top:9px; display:inline-block; width:36px; height:36px;}
.site-search .inner {display:none; position:absolute; bottom:-80px; left:0px; width:100%; 
		background:#ededed;
		padding:10px 10px;
}
.search-active .site-search .inner {display:block;}
.site-search .formee input[type="text"] {margin:0px; font-size:16px; padding:20px 70px 20px 10px; height:60px; background-color:rgba(255,255,255,.9);}
.site-search .btn {position:absolute; right:10px; top:10px; height:60px; width:60px;
	background-color:#4C5D4E;
	background-image: url(/cms/images/svg/search.svg);
	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.site-search .btn:hover,
.site-search .btn:focus {background-color:#333;}

.site-logo .desktop {display:none;}
.site-logo .mobile {display:inline-block; margin-top:13px;}

.header-top {color:#fff; background-color: #484846; }
.sunset {font-size:14px; display:table; }
.sunset div {display:table-cell; vertical-align:middle; height:60px;}
.sunset div span {display:inline-block; line-height:1.2;}
.sunset .icon-sunset {font-size:34px; margin-right:10px;}
.sunset .sunset-time {text-transform:lowercase;}

.secondary-nav {list-style:none; margin:0 -10px; padding:0; display:table; width:calc( 100% + 20px); table-layout:fixed;}
.secondary-nav li {position:relative; display:table-cell; vertical-align:middle; text-align:center; height:60px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc;}
.secondary-nav li:last-child {border-right:0;}
.secondary-nav li a {color:#484846;}
.secondary-nav li svg {font-size:24px; width:25px; height:25px; vertical-align:top; }	
.secondary-nav li.extra-link {display:none;}
.secondary-nav #spanCartTotal {
	position:absolute;
	right:5px;
	top:14px;
	font-size:14px;
	border:1px solid #ccc;
	border-radius:50%;
	background:#4C5D4E;
	color:#fff;
	padding: 0 5px;
}
 
.secondary-nav .search-trigger {background:none; border:0; color:#484846; cursor:pointer; padding: 0;}

.header-bottom {height:75px;}

.buttons-list {display:none;}

/* .buttons-list .foundation {display:none;}
.buttons-list .non-foundation {display:inline-block;}
.preservation .buttons-list .foundation {display:inline-block;}
.preservation .buttons-list .non-foundation {display:none;} */
/* =================================================================
                        Media Queries
===================================================================*/


@media only screen and (min-width:48em){
	.site-header {position:absolute; width:100%; height:165px; background:transparent;}

	.site-header .container {position:relative;}
	.site-header > .inner {padding:10px 0;}
	.site-header a.site-logo {display:inline-block; text-align:left;}
	
	.header-links {margin:0 0 10px;}
	.header-links a {display:inline-block;}
	.header-links .sep {display:inline-block;}
	
	.site-search {margin:0px;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		z-index: 1010;
	}
	.site-search .inner { background:none; position:relative; bottom:auto; padding:0px;
		background:#ededed;
		padding:20px 10px;	
	}

	.site-search .formee input[type="text"] {font-size:25px; padding:20px 90px 20px 40px; height:80px; letter-spacing: .5px;}
	.site-search .btn {top:20px; height:80px; width:80px;
		background-size: 25px 25px;
	}
	.site-header .site-search:before {
		position:absolute;
		content:"";
		top:0;
		left:-5000em;
		width:10000em;
		height:100%;
		background:#ededed;
	}
	.search-active .site-header .site-search:after {
		position:absolute;
		content:"";
		top:-10px;
		right:12px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 10px 10px 10px;
		border-color: transparent transparent #ededed transparent;
	}	
	

	.site-logo .desktop {display:inline-block; margin-top:31px;}
	.site-logo .mobile {display:none;}
	
	.sunset {font-size:16px;}
	.sunset div {height:65px;}
	
	.secondary-nav {float:right; table-layout:auto; width:auto; margin:0;}
	.secondary-nav li {height:65px; padding:0 13px; border:0;}
	.secondary-nav li:last-child {padding-right:0;}
	.secondary-nav li.reserved {display:none;}
	.secondary-nav li.extra-link {display:table-cell;} 
	
	.secondary-nav li a {color:#fff; text-transform:uppercase; text-decoration:none;}
	.secondary-nav li a:hover,
	.secondary-nav li a:focus {text-decoration:underline;}

	.secondary-nav li a {font-size:15px;  display:inline-block;}
	.secondary-nav .search-trigger  {color:#fff;}
	
	.header-bottom {height:100px;}

}

@media only screen and (min-width:48em){
	.buttons-list {display:block; list-style:none; margin:0; padding:0; text-align:right; position:absolute; top:33px; right:10px; width:260px;}
	.buttons-list li {display:inline-block; margin-bottom:10px;}
	.buttons-list li:last-child {margin-left:10px;}
	.buttons-list .btn {text-transform:uppercase;  width:120px; padding:10px 15px;}
}

@media only screen and (min-width:64em){
	.sunset {font-size:18px;}
	
	.secondary-nav li {padding:0 18px;}
	.secondary-nav li a {font-size:16px;}
}


@media only screen and (min-width:80em){
	.buttons-list {width:320px; top:30px;}
	.buttons-list li:last-child {margin-left:15px;}	
	.buttons-list .btn {width:150px; padding:14px 20px;}	
}	


@media only screen and (max-width:47.938em){
	.site-header {padding-bottom:60px;}
	.secondary-nav {
		position:absolute;
		left:0;
		bottom:0;
	}
}	

@media only screen and (min-width:48em) and (max-width:74.99em){
	.site-logo {margin-left:45px;}
}

/* FERN */
.fern .header-top {color:#fff; background-color: #8093C9; opacity:.9;}
.fern .secondary-nav.left-block {float:none;}

.fern .site-search .btn {background-color:#8093C9;}
.fern .site-search .btn:hover,
.fern .site-search .btn:focus {background-color:#333;}

.fern .secondary-nav .li-alert,
.fern .secondary-nav .li-cart {display:none;}

/* PRESERVATION */
.preservation .explore {display:none; margin-top:13px;}
.preservation .explore a {color:#fff;}
.preservation .explore svg,
.preservation .explore img {width:40px; height:40px; margin-right:15px;  }
.preservation .explore a.arrow:after {bottom:40%;}

.preservation .secondary-nav .li-alert,
.preservation .secondary-nav .li-cart, 
.preservation .secondary-nav .li-account {display:none;}

@media only screen and (min-width:48em){
	.preservation .explore {display:block;}	
}
@media only screen and (max-width:47.938em){
	.preservation .site-header {padding-bottom:0;}
	.preservation .site-header a.site-logo {width:210px; margin:0 auto;}
	
	
	.preservation .secondary-nav li {height:0; border-top:none; font-size:0;}
	
	.preservation .secondary-nav .search-trigger {position:absolute; right:30px; top:-47px;}
	
}	