@import "skeleton.css";

body {		
	color: #757575;
	background:#1c1c1c;		
	-webkit-font-smoothing: antialiased; 
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	font-family: 'Raleway', sans-serif;
}
/*font size: html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So 1.5rem = 15px :) body font-size is set to 1.5em*/

h1 { font-size: 2.5em; color:#354b53; line-height: 1.2; font-weight: 400;}
h2 { font-size: 1.5em; color:#354b53; margin-top: 1em; line-height: 1.2; font-weight: 400;}
h3 { font-size: 1.25em; color: #fcaf17; margin-top: 1em; line-height: 1.2; text-transform:uppercase; font-weight: 400;}

.beigeCTA > div {
    width: 100% !important;
    padding: 2em 4em !important;
    max-width: 1200px !important;
    margin: auto !important;
}

.beigeCTA p {
    max-width: 530px  !important;   
}

.similarProduct img{
        height: 263px;
    object-fit: cover;
}

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

summary{
    position: relative;
}

summary::after {
    content: ' ';
    display: inline-block;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    height: 10px;
    width: 10px;
    transform: rotate(-135deg);
    position: absolute;
    right: 20px;
    top: 10px;
    transition: all 0.2 ease;
}

details[open] summary::after{
    top: 6px;
    transform: rotate(45deg);
}

p { margin: 0 0 1.5em 0; }
em { font-style: italic; }
strong { font-weight: bold;}
img, object, video {max-width: 100%; height: auto; display:block;}
img { max-width: 100%; width: auto; border: 0; -ms-interpolation-mode: bicubic;}
hr { border: solid #ff7a00; border-width: 1px 0 0; clear: both; margin: 30px auto; height: 0; width:80%;}

/* links */
a:link, a:visited { 
	color: #333; 	 
	outline: 0;
	text-decoration:none;
}
a:hover, a:active { color: #666; }

.downloadWrapper{
    min-height: 44px !important;
    height: auto !important;
}

.align-left{text-align: left;}
.align-center{text-align: center;}
.align-right{text-align: right;}
.imageLeft {float: left;	margin: 2%;}
.imageRight {float:right; margin: 2%;}
.imageCenter {margin:2% auto;}

header.main {
  margin:0 auto;  
	width: 90%;
	padding:0 5%;
	z-index: 4;
	position:fixed;
	top:0;	
}
header.slider {background: rgba(0,0,0,0.5);}
header.inner {background:#1c1c1c;}
#logo {margin:.5em 0;}

.toggle, [id^=drop] {
 display: none;
}


nav {	
	width: 100%;
	text-align:right;	
	font-size: 1em;	
	position: relative;	
	z-index: 10;	
	text-transform:uppercase;		
	margin-top:3em;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	list-style:none;
	position: relative;
}
nav ul li {
	display: inline-block;	
	padding:0;
	margin:0; 
}
nav a {	
	display: inline-block;
	padding: .5em;
	margin:0 .5em;
	text-decoration: none;	
}

nav a:link, nav a:visited {color:#fff;} 
nav li:hover {background: rgba(255,255,255,0.5);}

nav ul ul {
  display: none;
  position: absolute;
  top: 40px;  
  
}

nav ul li:hover > ul { display: inherit; }
nav ul ul li {
  width: 280px;
  float: none;
  display: list-item;
  position: relative;
  background: rgba(0,0,0,0.25);
  margin:0 0 0 -115px;
  text-align:left;  
  border-bottom:1px solid #000;
}
nav ul ul li:hover {background: rgba(0,0,0,0.55); }
nav ul ul li a {padding: 1em;}

li > a:after { content: ' +'; }

li > a:only-child:after { content: ''; }

.content {padding:3em 0;}
.icon {margin-top:4em;}

.wrapper h2 {color:#fff; margin:.5em 0 3em; }
.duck-banner {
    top: 70vh;
    width: 100%;    
    height: 50px;
    position: relative;    
    z-index: 50;
}
.arrow_btn {
    margin-left: 14%;
    width: 4%;
    height: 40px;
    padding-top:10px;
    cursor: pointer;    
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.no-hero {margin-top:91px;}
.inner-container h1 { margin:1em 0 0; text-align:center;}
.inner-container h2 { text-align:center;}
.inner-container h2.spec a, a.dl {padding-right:30px;background: url(../images/download.png) right bottom no-repeat;  }
.white {background:#fff;}
.help {color:#354b53; font-size:2.5em; margin-bottom:0;}

.text1 {padding:5em 0;}

.logos img { margin:1em; display:inline-block;}

.page-content .wrapper {background: rgba(255,255,255,0.75);}
.page-content h1 {margin-bottom:1em;}
.page-content .columns {padding:2em;}
.page-content .columns.pic {padding:0;}
.page-content ul {font-weight:bold;}
.spec {text-align:left; display:inline; margin-top:0;}
form {margin-left:8em; color:#000; }
.form-label {float: left; width: 150px; }
.video-container {position: relative; padding-bottom: 56.25%;  padding-top: 35px; height: 0; overflow: hidden; margin-bottom: 3rem; }
.video-container iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;}

.gallery {margin-bottom:10em;}
.thumb {max-width:250px; margin:0 auto;}
.gallery h2 {font-size:1.125em; text-align:center;}
.gallery p {font-size:.75em; text-align:center;}
.gallery a:hover {opacity:0.8;}

/* Filter controls */
.simplefilter, .multifilter, .sortandshuffle, .search-row {
  padding-left: 0;
}
.simplefilter li, .multifilter li, .sortandshuffle li {
    color: white;
    cursor: pointer;
    display: inline-block;
    text-transform: uppercase;
    padding: 1rem 2rem;
}
.simplefilter li {
    background-color: #585858;
}
.simplefilter li.active {
    background-color: #212121;
}
.simplefilter li.oval, .multifilter li.oval, .sortandshuffle li.oval {border-radius: 70px / 30px;}
.simplefilter li.egg, .multifilter li.egg, .sortandshuffle li.egg { border-radius: 25% 80% 80% 25% / 50% 50% 50% 50%;}

table {font-size:.75em;}

footer {width: 100%;	display: block;	}
#footer {padding:3em 0;  color:#fff;}
#footer h3 {color:#fff; text-transform:none;}
#footer img {display:inline-block;}
ul.footer-nav {list-style:none; padding:0;}
footer a:link, footer a:visited {color:#fff; }
footer a:hover, footer a:active {color: #efefef;}

#copyright {background:#141414; color: #fff; padding: 1.5em 0; font-size: .75em;  text-align:center;}
#copyright a {color: #fff; text-decoration:none; padding:0;}
#copyright a:hover, #copyright a:active{color: #efefef;}
#copyright img {margin:0 auto;}



/*media queries*/
@media screen and (max-width: 1200px) {
/* ipad portrait */
 	
	
	.content {-webkit-overflow-scrolling : touch;}	
	header {-webkit-overflow-scrolling : touch;}
	
	nav a {padding:.5em;	}	
	
	form {margin-left:0; padding:.5em;}
	.filtr-item {
    width:47%;
    padding: 1.5%;
    
    }
  .filtr-item img.thumb{
    max-width:250px;
    }
    
}


/* mobile devices */
@media only screen and (max-width: 840px) {

#logo img{margin:0 auto;}
.noshow {display:none;}

nav {position:absolute; top:0; right:10px;}
.toggle + a,
.menu {display: none;}
.home {display: none;}

.toggle {
  display: block;   
  text-decoration: none;
  border: none;
  margin:0;
  padding: 1em;  
  color:#fff;
  cursor:pointer;
}
.one {text-align:right;margin:0 auto;}
.toggle:hover { color:#999; }

[id^=drop]:checked + ul { display: block; clear:both;}
.menu {margin-top:2em;}
nav { margin-top:0;}
nav ul li {
  display: block;  
  margin:0 auto;  
  text-align:left;  
  background: rgba(0,0,0,0.75);
  border-bottom:1px solid #222;
}
nav ul li:hover {background: rgba(0,0,0,0.55);  }
nav a {padding:.5em 1em;}
nav a:link, nav a:visited { border:0;} 
nav a:hover, nav a:active { } 
nav ul ul .toggle,
nav ul ul li { margin:0; }
nav ul ul li:hover {  }

nav ul ul {
  float: none;
  position: static;
  color: #fff;
  text-align:left;
  margin:0;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

.header-container .bcg { background-image: url(../images/slide-glimpse.jpg); }
.header-container .wrapper  { top: 65%; background: rgba(0,0,0,0.55);}
.header-container .wrapper h2 { margin:2em 0 1em;}
.header-container p { margin:1em 0;}
.header-container a.button { margin-bottom:1em;}
.duck-banner { top: 40vh;}
#slide01 .bcg { background-image: url(../images/slide-1a.jpg); }
header.slider {background: rgba(0,0,0,1.0);}
.inner-container {padding-top:83px;}
.feature-button {float:none; width:95%; margin:0; position:relative; display:block;}	
.slide#slide01 .wrapper { top: 50%; }	
#slide02.fs { height: 100vh;}
#slide02 .bcg {background: url(../images/slide-3.png) no-repeat center center; }
.slide#slide02 .wrapper { top: 80%;}
.learn h2 { width:80%;}
.imageLeft {float: none;	margin: 2% auto; max-width:96%;}
.imageRight {float:none; margin: 2% auto; max-width:96%;}

#footer .columns {text-align:center;}
#footer .columns img {margin:0 auto;}

#copyright {text-align:center;}


}

#lhnHelpOutCenter div.lhnWindow-body form{
        margin: 0 !important;
        margin-left: 0 !important;
}

@media only screen and (max-width: 600px) {
h2.spec {text-align:left; display:block;}
.filtr-item {
    width:97%;
    padding: 1.5%;
    height:400px;
    }
  .filtr-item img.thumb{
    max-width:250px;
    }
}

.topSection{
  position: relative;
}

.topSection #topImg{
    max-height: 280px !important;
}

.topOverlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0008;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.topOverlay > div{
    width: 100%;
    max-width: 1180px;
    margin: 2em auto 0;
    display: flex;
}
.topOverlay h1{
    margin: 0;
    padding: 16px 36px;
    background: #F3F0E7;
    font-size: 42px;
    color: #252320;
    font-weight: 600;
    font-family: 'Raleway';
}


@media only screen and (max-width: 768px) {
 .topOverlay h1{
         width: 100%;
    text-align: left;
    font-size: 32px;
 }   
}