/*  SECTIONS  */

.levelup { background-color: #000; color: #fff; padding: 40px 0px 60px 0px;}
.levelup .bucket { width: 33.333%; padding: 0 2%; float: left; }
.levelup a { color: #fff; }
.levelup .wrappity { background-color: #000;  width: 80%; margin: 0 auto; }
.levelup h3 { font-size: 56px; line-height: 56px; padding: 4px 0 0; margin-bottom: 40px; }

/* Portrait and Landscape - Mobile */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 666px)
  and (-webkit-min-device-pixel-ratio: 1){
	.levelup .bucket { width: 100%; }
	.levelup h3 { font-size: 39px; line-height: 39px; }
}



html{
	overflow-x: auto !important;
	overflow-y:auto !important;
}
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	/*margin: 1% 0 1% 1.6%;*/
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRIDS */
.span_6_of_6 {width: 100%;}
.span_5_of_6 {width: 83.06%;}
.span_4_of_6 {width: 66.13%;}
.span_3_of_6 {width: 49.2%;}
.span_2_of_6 {width: 32.26%;}
.span_1_of_6 {width: 15.33%;}

.span_5_of_5 {width: 100%;}
.span_4_of_5 {width: 79.68%;}
.span_3_of_5 {width: 59.36%;}
.span_2_of_5 {width: 39.04%;}
.span_1_of_5 {width: 18.72%;}

.span_4_of_4 {width: 100%;}
.span_3_of_4 {width: 74.6%;}
.span_2_of_4 {width: 49.2%;}
.span_1_of_4 {width: 23.8%;}

.span_3_of_3 {width: 100%;}
.span_2_of_3 {width: 66.13%;}
.span_1_of_3 {width: 32.26%;}

.span_2_of_2 {width: 100%;}
.span_1_of_2 {width: 49.5%;}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 768px) {
	
	.topbanner img { max-width: 100%; }
	
	
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
	.span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5 { width: 100%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
	.span_2_of_2, .span_1_of_2 { width: 100%; }
	
	
	
.fancybox-container{
	width: 375px !important;
	height: 257px !important;
	margin-top: 75px;
	}
.fancybox-bg{
	height: 1000px !important;
	margin-top: -75px
	}
	
	.slick-track{
		transform: none !important;
	}

	.slick-dots{
		display: none !important;
	}
}

	body {
		font-size: 16px !important;
	}
	img[usemap] {
		border: none;
		height: auto;
		max-width: 100%;
		width: 100%;
	}
	
	.max-16 {
		width: 100%;
		max-width: 1600px;
		margin: 0 auto;
	}
	.max-1190 {
		width: 100%;
		max-width: 1190px;
		margin: 0 auto;
	}
	.max-1215 {
		width: 100%;
		max-width: 1250px;
		margin: 0 auto;
	}
	
	.section {
		position: relative;
	}
	.container-abs {
		position: absolute;
	}
	.play-btn {
		margin-left: 45.5%;
		margin-top: 17%;
		width: 7%;
		max-width: 110px;
	}
	.nav {
		width: 100%;
		max-width: 1600px;
		margin: 0 auto;
	}
	.copyblock {
		width: 100%;
		max-width: 885px;
		margin-left: auto;
		margin-right: auto;
	}	
	.headline {
		font-family: lg smart light;
		font-size: calc(16px + 2.38vw);
	}
	.copy {
		font-family: lg smart regular;
		font-size: calc(16px + .5vw)
	}
	.quote {
		font-family: lg smart light;
		font-size: calc(16px + 2.75vw)
	}

	.margin25 {margin: 25px auto;}
		.margin25top {margin-top: 25px; margin-left: auto; margin-right: auto;}
		.margin25bot {margin-bottom: 25px; margin-left: auto; margin-right: auto;}
	.margin50 {margin: 50px auto;}
	.margin50top {margin-top: 50px; margin-left: auto; margin-right: auto;}
		.margin50bot {margin-bottom: 50px; margin-left: auto; margin-right: auto;}
	.margin75 {margin: 75px auto;}
		.margin75top {margin-top: 75px; margin-left: auto; margin-right: auto;}
		.margin75bot {margin-bottom: 75px; margin-left: auto; margin-right: auto;}
	.margin100 {margin: 100px auto;}
		.margin100top {margin-top: 100px; margin-left: auto; margin-right: auto;}
		.margin100bot {margin-bottom: 100px; margin-left: auto; margin-right: auto;}
	.margin200 {margin: 200px auto;}
		.margin200top {margin-top: 200px; margin-left: auto; margin-right: auto;}
		.margin200bot {margin-bottom: 200px; margin-left: auto; margin-right: auto;}

	.shortline {width: 12%;}
	.shortline-vert {width: .269%;}
	.white {color: #fff;}

	.smooth {
		position: absolute;
		z-index: 1;
		width: 100%;
		margin-top: 24%;
	}
	.immersion {
		position: absolute;
		z-index: 1;
		width: 100%;
		margin-top: 4%;
	}
	.comparison {
		position: absolute;
		z-index: 1;
		width: 100%;
		margin-top: 3%;
	}
	.clarity {
		position: absolute;
		z-index: 1;
		width: 100%;
		margin-top: 20%;
	}
	.clarity-disc {
		position: absolute;
		z-index: 10;
		width: 100%;
		margin-top: -5%;
	}
	.disclaimer {
		font-family: lg smart regular;
		text-align: left;
		padding: 0 18%;
		font-size: 1vw;
	}
	.detail {
		position: absolute;
		z-index: 1;
		width: 100%;
		margin-top: 2.5%;
	}
	.performance {
		position: absolute;
		z-index: 1;
		width: 100%;
		margin-top: 4%;
	}
	.eyebrow {
		font-family: lg smart regular;
		font-size: calc(16px + 1.05vw);
	}
	.savings {
		padding: 2.5% 0 !important;
		background: #a40635;
	}
	.seeall {
		/*position: absolute;*/
      padding: 40px 0px;
		z-index: 1;
		width: 100%;
		margin-top: 2.5%;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b0afad+0,e7e7e7+50,b0afad+100 */
        background: #b0afad; /* Old browsers */
        background: -moz-linear-gradient(left,  #b0afad 0%, #e7e7e7 50%, #b0afad 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left,  #b0afad 0%,#e7e7e7 50%,#b0afad 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right,  #b0afad 0%,#e7e7e7 50%,#b0afad 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0afad', endColorstr='#b0afad',GradientType=1 ); /* IE6-9 */
	}
            
            
	.seeall-copy-container {
		max-width: 1055px;
	}
	.seeall-cta {
		font-family: lg smart regular;
		font-size: calc(11px + 1.03vw);
		color: black !important;
		text-decoration: none !important;
	}
	.cta-arrow {
		width: 2.5%;
	}

@media screen and (min-width: 1600px) {
	.headline {
		font-size: 54px !important;
	}
	.copy {
		font-size: 24px !important;
	}
	.quote {
		font-size: 60px !important;
	}
	.disclaimer {
		font-size: 16px !important;
	}
	.eyebrow {
		font-size: 33px !important;
	}
	.seeall-cta {
		font-size: 32.5px !important;
	}
}
@media screen and (max-width: 1015px) {
	.clarity {
		margin-top: 15%;
	}
	.detail {
		margin-top: -3%;
	}
	.performance {
		margin-top: -1%;
	}
}

/* nav */
/* mobile hamburger nav css*/
.navtitle {
	margin-top: -21.5%;
	font-family: lg smart;
	border-bottom: 2px solid white !important;
	z-index: 0;
	background: rgba(0, 0, 0, 0.7);
}


#sidebarMenu {
    height: 276px;
    position: absolute;
    left: 100%;
    width: 100%;
    margin-top: 20.5%;
    transform: translate(0);
    transition: transform 250ms ease-in-out;
    z-index: 5;
}




.sidebarMenuInner {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  text-align: left;
  font-family: lg smart light;
}

.sidebarMenuInner li {
  list-style: none;
  color: #fff;
  font-weight: bold;
  padding: 7% 0;
  cursor: pointer;
  /*border-bottom: 1px solid rgba(255, 255, 255, 0.10);*/
  background: rgba(0, 0, 0, 0.9);
  text-align: center;
}

.sidebarMenuInner li span {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.50);
}

.sidebarMenuInner li a {
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

.sidebarMenuInner li a img { max-width: 100%; }


input[type="checkbox"]:checked ~ #sidebarMenu { transform: translate(-100%, 0); }

input[type=checkbox] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    margin-top: 9%;
    left: 89.8%;
    height: 22px;
    width: 22px;
}

.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #fff;
}

.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}

.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}