/* 
	VERSION: V2.1
*/

/* Experience Utilities
--------------------------------------------------------------------------------*/

.exp-wrapper .vert-align{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.exp-wrapper .horz-align{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

.exp-wrapper .vert-horz-align{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%); 
	-webkit-transform: translate(-50%, -50%); 
}

.exp-wrapper img.responsive {width: 100% !important; max-width: 100%; display: block; }
.exp-wrapper .clearfix:before, .clearfix:after { content:""; display:table; }
.exp-wrapper .clearfix:after { clear:both; }
.exp-wrapper .clearfix { zoom:1; }
.exp-wrapper .text-center { text-align: center; }

/* Experience Typography
--------------------------------------------------------------------------------*/
.exp-wrapper p, 
.exp-wrapper ul li, 
.exp-wrapper a { font-family: Helvetica, Arial, sans-serif; line-height: 1.2; }

.exp-wrapper .b-bold { font-family: "brandon_bold", Arial, Helvetica, sans-serif !important; }
.exp-wrapper .b-reg { font-family:'brandon_regular', Arial, Helvetica, sans-serif !important; }
.exp-wrapper .b-med { font-family:"brandon_medium", Arial, Helvetica, sans-serif !important; }
.exp-wrapper .b-light { font-family:"brandon_light", Arial, Helvetica, sans-serif !important; }

.exp-wrapper sup, .exp-row sub {vertical-align: baseline;position: relative;top: -0.4em;}
.exp-wrapper sub { top: 0.4em; }




/* Experience buttons base
--------------------------------------------------------------------------------*/
.exp-wrapper .btn-outline { 
	display: inline-block; 
	padding: 13px 16px; 
	letter-spacing: .07em; 
	transition: background .25s ease-in-out;
	-moz-transition: background .25s ease-in-out;
	-webkit-transition: background .25s ease-in-out;	
	text-transform: uppercase;
	border-width: 3px;
	border-style: solid;
	font-family: "brandon_bold",Helvetica,Arial,sans-serif;
}
.exp-wrapper .btn-outline.white{ color: #ffffff; border-color: #fff; }
.exp-wrapper p + .btn-outline{margin-top: 20px;}




/* Experience Grid
--------------------------------------------------------------------------------*/

.exp-row {width: 100%;zoom: 1;position: relative;}
.exp-row:before,.exp-row:after { display: table; content: ""; line-height: 0; }
.exp-row:after { clear: both; }

.exp-col {float: left; display: block; width: 100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -moz-background-clip:padding-box !important; -webkit-background-clip:padding-box !important;background-clip:padding-box !important;}

.exp-col-1 { width:8.33333333333%; }
.exp-col-2 { width:16.6666666667%; }
.exp-col-3 { width:25.0%; }
.exp-col-4 { width:33.3333333333%; }
.exp-col-5 { width:41.6666666667%; }
.exp-col-6 { width:50.0%; }
.exp-col-7 { width:58.3333333333%; }
.exp-col-8 { width:66.6666666667%; }
.exp-col-9 { width:75.0%; }
.exp-col-10 { width:83.3333333333%; }
.exp-col-11 { width:91.6666666667%; }
.exp-col-12 { margin-left:0; width:100%; }

.exp-offset-1 { margin-left: 8.33333333333%; }
.exp-offset-2 { margin-left: 16.6666666667%; }
.exp-offset-3 { margin-left: 25.0%; }
.exp-offset-4 { margin-left: 33.3333333333%; }
.exp-offset-5 { margin-left: 41.6666666667%; }
.exp-offset-6 { margin-left: 50.0%; }
.exp-offset-7 { margin-left: 58.3333333333%; }
.exp-offset-8 { margin-left: 66.6666666667%; }
.exp-offset-9 { margin-left: 75.0%; }
.exp-offset-10 { margin-left: 83.3333333333%; }
.exp-offset-11 { margin-left: 91.6666666667%; }



/* Video embed container - responsive video 
-------------------------------------------------------------------*/
.exp-wrapper .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } 
.exp-wrapper .embed-container iframe, 
.exp-wrapper .embed-container object, 
.exp-wrapper .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



/* SGH Overrides
--------------------------------------------------------------------------------*/
.exp-wrapper {text-transform: none;}
strong {font-size: inherit; font-style: inherit; }

#page-wrapper #page .banner-img img {width: auto;}
.espot-3 { height: 1px; }
#content { text-transform: none; line-height: 1.1;  }

#page-wrapper #page .banner-img{margin: 0;}
#trends .espot-3{margin: 0 auto;}




/* Experience specific typography
--------------------------------------------------------------------------------*/
.exp-wrapper h1.large{font-size: 50px; line-height: 52px; }
.exp-wrapper h1{font-family:"brandon_bold", Arial, Helvetica, sans-serif;font-size: 40px; color: #000; text-transform: uppercase; font-weight: normal;}
.exp-wrapper h1 span{font-family:"brandon_regular", Arial, Helvetica, sans-serif; font-weight: normal;}
.exp-wrapper h2{font-family:"brandon_bold", Arial, Helvetica, sans-serif;font-size: 25px; line-height: 28px; font-weight: normal; text-transform: uppercase; letter-spacing: 1px;}
.exp-wrapper h3{font-family:"brandon_regular", Arial, Helvetica, sans-serif; font-size: 30px; font-size: 19px; line-height: 20px; margin: 0 0 10px; color: #000; font-weight: normal; }
.exp-wrapper h4{font-family:"brandon_bold", Arial, Helvetica, sans-serif; font-size: 19px; line-height: 25px; font-weight: normal;}
.exp-wrapper p{font-family:"brandon_regular", Arial, Helvetica, sans-serif;font-size: 19px; line-height: 23px;  color: #000;}
.exp-wrapper sup{font-size: 14px;}
.exp-wrapper p a, .exp-row a.btn-arrow{color: #fff;}
.exp-wrapper a:hover{color: #000;}
.exp-wrapper sup{top: -0.3em !important;}

/* Experience specific typography spacing
--------------------------------------------------------------------------------*/
.exp-wrapper h1.large{letter-spacing: 7px;}
.exp-wrapper h1{padding: 0px; margin: 0px 0px 10px; letter-spacing: 5px;}
.exp-wrapper h2{padding: 0px; margin: 0px 0px 15px; letter-spacing: 0.2em;}
.exp-wrapper p{padding: 0px; margin: 10px 0px 20px; }




/* Experience specific buttons - Colors, font-size, border
--------------------------------------------------------------------------------*/
.exp-wrapper .btn-outline{font-size: 14px; color: #000; border-color: #000; padding: 13px 22px; }
.exp-wrapper .btn-outline:hover {background: #000; color: #fff;}
.exp-wrapper .btn-outline.white:hover{background: #fff; color: #000;}


/* Experience specific
--------------------------------------------------------------------------------*/
.exp-wrapper .intro-tout{padding: 70px 0; }
.exp-wrapper .text-center{text-align: center;}
.exp-wrapper .img-center{margin-left: auto; margin-right: auto;}

.exp-wrapper .top-bar {  }
.exp-wrapper .top-bar-logo{margin: 0 auto; display: block; width: 24.4% !important; height: auto;}

.exp-wrapper .exp-hero {position: relative;}
.exp-wrapper .exp-hero img { max-width: 100%; }
/*.exp-wrapper .exp-hero-image { position: absolute; top: 0; } */
.exp-wrapper .exp-hero-text { width: 50%; margin-top: 50px; position: absolute; top: 0; left: 0; text-align: center;}
.exp-wrapper .exp-hero-text img { margin: 0 auto; }
.exp-wrapper .exp-hero-text h1,
.exp-wrapper .exp-hero-text span { color: #fff; display: block; }
.exp-wrapper .exp-hero-text h1 {font-size: 150px;line-height: 1;margin: 55px 0 0;}
.exp-wrapper .hero-text-large { font-size: 65px; line-height: 1; }
.exp-wrapper .hero-text-small { font-size: 28px; font-family: Arial; padding: 25px 0 100px;}

.exp-wrapper .exp-hero-glasses img {margin: 75px auto 0;max-width: 86%;}
.exp-wrapper .exp-hero-glasses span { text-align: center; display: block; text-transform: uppercase; font-size: 18px; font-family: 'brandon_medium'; }
.exp-wrapper .exp-hero-glasses .shop-by-env { color: #3c98cc; font-size: 25px; font-family: 'brandon_bold'; margin: 50px auto; }

.exp-wrapper .exp-tabs-holder{background: #000;}
.exp-wrapper .exp-tabs {text-align: center;}
.exp-wrapper .exp-tabs div{display: inline-block;padding: 20px 0 14px 0;width: 25%;background: #000;color: #fff;cursor: pointer;text-transform: uppercase;font-size:14px;letter-spacing: 0.2em;font-family: "brandon_bold",Helvetica,Arial,sans-serif;line-height: 1;}
.exp-wrapper .exp-tabs div:hover span{border-bottom: 2px solid #f5f5f5; line-height: 1.3; display: inline-block;}
.exp-wrapper .exp-tabs div.cycle-pager-active,
.exp-wrapper .exp-tabs div:hover{background: #f5f5f5; color: #000; }
.exp-wrapper .exp-tabs div.cycle-pager-active span{border-bottom: 2px solid #3c98cc;  line-height: 1.3; display: inline-block;}

.exp-wrapper .exp-tabs div.first.cycle-pager-active,
.exp-wrapper .exp-tabs div.first:hover{background: #3c98cc; color: #fff; }
.exp-wrapper .exp-tabs div.first.cycle-pager-active span{border-bottom: 2px solid #fff;  line-height: 1.3; display: inline-block;}


.exp-wrapper .exp-master-slideshow section{display: none; width: 100%; pointer-events: none;}
.exp-wrapper .exp-master-slideshow section.first{display: block;}
.exp-wrapper .exp-master-slideshow section.cycle-slide-active{pointer-events: auto;display: block;}


.exp-wrapper .exp-master-slideshow-holder{overflow: hidden;}
.exp-wrapper .exp-master-slideshow .exp-video-tout-holder{background: #f5f5f5;/* border-bottom: 1px solid #e0e0e0; */}
.exp-wrapper .exp-master-slideshow .first .exp-video-tout-holder {background: url('../images/abyss-tabs-bg-desktop.jpg') center center no-repeat; background-size: cover;}
.exp-wrapper .exp-master-slideshow .first .exp-video-tout-holder * {color: #fff;}
.exp-wrapper .exp-master-slideshow .exp-video-tout-holder *{text-align: center;}
.exp-wrapper .exp-master-slideshow .exp-video-tout-holder .exp-video-tout{margin: 90px auto; width: 940px; overflow: hidden;}
.exp-wrapper .exp-master-slideshow .exp-video-tout-holder .exp-video-tout .txt-content{float: left;width: 480px;}
.exp-wrapper .exp-master-slideshow .exp-video-tout-holder .exp-video-tout .txt-content a.shop_all { border-bottom: 1px solid #000; font-size: 14px; font-family: "brandon_bold",Helvetica,Arial,sans-serif; text-transform: uppercase; line-height: 1; display: inline-block; }
.exp-wrapper .exp-master-slideshow .exp-video-tout-holder .exp-video-tout .txt-content p{font-size: 15px; line-height: 19px; margin-bottom: 30px;}

.exp-wrapper .exp-master-slideshow.shallow-water .exp-video-tout .txt-content{ float: none; margin-left: auto; margin-right: auto; width: 600px;}

.exp-wrapper .exp-master-slideshow .exp-video-tout-holder .exp-video-tout .exp-video-holder{float: right;width: 48%;margin-right: 2%;}

.exp-wrapper .exp-master-slideshow .exp-multi-slideshow-section{width: 100%; }
.exp-wrapper .exp-master-slideshow .exp-multi-left{float: left; width: 50%;}
.exp-wrapper .exp-master-slideshow .exp-multi-left .upc-out-slide{display: none;}
.exp-wrapper .exp-master-slideshow .exp-multi-left .upc-out-slide.first{display: block;}

.exp-wrapper .exp-master-slideshow .exp-multi-left .side-left,
.exp-wrapper .exp-master-slideshow .exp-multi-left .side-right{float: none !important; width: 100% !important;}
.exp-wrapper .exp-master-slideshow .side-right .exp-prod-price{font-size: 16px; margin-bottom: 30px;}

.exp-wrapper .exp-master-slideshow .exp-multi-left .side-left .upc-inner-slide img{margin-left: -4%;}
.exp-wrapper .exp-master-slideshow .exp-multi-left .exp-upc-slideshow .upc-slide .side-right{margin-top: 0;}
.exp-wrapper .exp-master-slideshow .exp-multi-left .upc-slide-nav{width: 100% !important; margin-top: 20px;}



.exp-wrapper .exp-master-slideshow .exp-multi-right{float: right; width: 50%;}
.exp-wrapper .exp-master-slideshow .exp-multi-right .upc-multi-tabs{float: left;position: relative;width: 50%;cursor: pointer;padding: 61px 0;}
.exp-wrapper .exp-master-slideshow .exp-multi-right .upc-multi-tabs.upc-multi-tabs-fake{padding: 0;}
.exp-wrapper .exp-master-slideshow .exp-multi-right .upc-multi-tabs.upc-multi-tabs-fake img {width: 100% !important;}

.exp-wrapper .exp-master-slideshow .exp-multi-right .upc-multi-tabs .icon-active-indicator {position: absolute; top: 7%; right: 10%; z-index: 2;}
.exp-wrapper .exp-master-slideshow .exp-multi-right .upc-multi-tabs .icon-active-indicator .icon-active{display: none !important;}
.exp-wrapper .exp-master-slideshow .exp-multi-right .upc-multi-tabs.active .icon-active-indicator .icon-active{display: block !important;}
.exp-wrapper .exp-master-slideshow .exp-multi-right .upc-multi-tabs.active .icon-active-indicator .icon-inactive{display: none !important;}
.exp-wrapper .exp-master-slideshow .exp-multi-right .upc-multi-tabs .icon-upc{margin-top: 15px;}


/* .exp-wrapper .exp-master-slideshow section .exp-multi-right .exp-row.top-row{margin-top: 30px;} */
.exp-wrapper .exp-master-slideshow .exp-multi-right .exp-row.top-row .upc-multi-tabs {}
.exp-wrapper .exp-master-slideshow .exp-multi-right .upc-multi-tabs.left-side{}

.exp-wrapper .exp-master-slideshow .exp-multi-right .upc-multi-tabs .icon-upc{display: block; margin: 0 auto; opacity: 0.6; width: 100% !important; height: auto;}
.exp-wrapper .exp-master-slideshow .exp-multi-right .upc-multi-tabs.active .icon-upc{opacity: 1;}

.exp-wrapper .exp-master-slideshow .exp-upc-slideshow {width: 100%; }
.exp-wrapper .exp-master-slideshow .exp-upc-slideshow .upc-slide{width: 100%; }
.exp-wrapper .exp-master-slideshow .exp-upc-slideshow .upc-slide.first{display: block;}
.exp-wrapper .exp-master-slideshow .exp-upc-slideshow .upc-slide .upc-slide-clearfloat{overflow: hidden;}


.exp-wrapper .exp-master-slideshow .exp-upc-slideshow .upc-slide .side-left{float: left; width: 50%;}
.exp-wrapper .exp-master-slideshow .exp-upc-slideshow .upc-slide .side-left .upc-inner-slide{display: block;margin-top: 7%;}
.exp-wrapper .exp-master-slideshow .side-left.vert-align .upc-inner-slide { margin-top: 0 !important; }
.exp-wrapper .exp-master-slideshow .exp-upc-slideshow .upc-slide .side-left .upc-inner-slide img{width: 100% !important; height: auto;}
.exp-wrapper .exp-master-slideshow .exp-upc-slideshow .upc-slide .side-left .upc-inner-slide:hover img{opacity: 0.75;}

.exp-wrapper .exp-master-slideshow .exp-upc-slideshow .upc-slide .side-right{float: right;width: 50%;margin: 100px auto;}
.exp-wrapper .exp-master-slideshow .exp-upc-slideshow .upc-slide .side-right p{font-size: 15px;line-height: 19px;padding: 0 8%;}

.exp-wrapper .exp-master-slideshow .upc-slide-nav{width: 50%; text-align: center;}
.exp-wrapper .exp-master-slideshow .upc-slide-nav div{display: inline-block; cursor: pointer;}
.exp-wrapper .exp-master-slideshow .upc-slide-nav div img{opacity: 0.5;}
.exp-wrapper .exp-master-slideshow .upc-slide-nav div.cycle-pager-active img{opacity: 1;}

/* .exp-wrapper .exp-master-slideshow section .exp-fake-slider{margin-top: 90px;} */

.exp-wrapper .exp-footer{background: #fff url(../images/abyss-footer-bg-desktop.jpg) center top repeat-x;padding: 60px 0 80px;display: block;background-size: cover;}
.exp-wrapper .exp-footer img{display: block; margin: 0 auto 50px;}
.exp-wrapper .exp-footer a{ text-transform: uppercase; font-size: 16px; display: inline-block; color: #fff; letter-spacing: 0.1em; line-height: 1;}
.exp-wrapper .exp-footer a span{font-family: "brandon_medium";border-bottom: 1px solid #fff;}
.exp-wrapper .exp-footer a:hover{ text-decoration: none; }

.exp-wrapper .exp-prod figcaption .exp-prod-add-cart {display: block;position: relative;margin-top: 20px;margin-bottom: 2;}

.exp-wrapper .exp-prod figcaption .exp-prod-add-cart a{width: 132px; cursor: pointer;}
.exp-wrapper .exp-prod figcaption .exp-prod-add-cart a span.icon{position: relative !important; float: left !important; display: block; top: auto !important; left: auto !important;}



/* Experience layout utilities
--------------------------------------------------------------------------------*/
.exp-wrapper .tout-content-centered,
.exp-wrapper .tout-content-centered *{text-align: center;}


/* Experience specific Slider - UPC Information
--------------------------------------------------------------------------------*/
.exp-wrapper figcaption { text-align: center }
.exp-wrapper figcaption span{text-align: center; text-transform: uppercase;}

.exp-wrapper .exp-prod .exp-prod-brand,
.exp-wrapper .exp-prod .exp-prod-style,
.exp-wrapper .exp-prod .exp-prod-price{display: block; margin-bottom: 7px;}

.exp-wrapper .exp-prod .exp-prod-brand,
.exp-wrapper .exp-prod .exp-prod-price,
.exp-wrapper .exp-prod .exp-prod-polar,
.exp-wrapper .exp-prod .exp-prod-style {font-family: "brandon_bold",Helvetica,Arial,sans-serif;}
.exp-wrapper .exp-prod .exp-prod-add-cart { display: block; position: relative;}
.exp-wrapper .exp-prod .exp-prod-style-desc{display: block; font-family: "brandon_regular",Helvetica,Arial,sans-serif; text-transform: uppercase; font-size: 16px; margin-bottom: 10px;}
.exp-wrapper a.btn-shop-now { background: #e84c3d; color: #fff; padding: 18px 25px; text-transform: uppercase; font-family: 'brandon_medium'; font-size: 16px; letter-spacing: 1.5px; text-align: center; display: inline-block;}
.exp-wrapper .exp-shop-all-row { text-align: center; padding: 20px 0 50px;}
.exp-wrapper .exp-prod .exp-prod-price div{display: inline; text-decoration: line-through; color: #000; margin-right: 5px;}

.exp-wrapper .exp-prod .exp-prod-brand,
.exp-wrapper .exp-prod .exp-prod-style,
.exp-wrapper .exp-prod .exp-prod-price{font-size: 12px;color: #333333;}
.exp-wrapper .exp-prod .btn-outline { margin-top: 10px; }


/* POLARIZED ICON */
.exp-wrapper .exp-prod-polar {margin-top: 0px; margin-bottom: 0px !important; font-size: 14px;}
.exp-wrapper .exp-prod-polar img{width: 36px !important;}
.exp-wrapper .exp-prod-polar span {background: url('../images/icon_polarized.png') center left no-repeat;display: inline-block !important;background-size: 22%;padding: 11px 0px 9px 21px;margin: 0px 0px;text-transform: uppercase;font-family: "brandon_bold",Helvetica,Arial,sans-serif;font-size: 11px;}
.exp-wrapper figcaption .exp-prod-polar { margin-top: 20px; }
.exp-wrapper .exp-prod-polar.not-active{opacity: 0;}

/* UPC IMAGE  */
.exp-wrapper .exp-prod-img { margin: 0 auto 5px auto; width: 100% !important; }
.exp-wrapper a:hover .exp-prod-img{ opacity: .7; }


/*----------------------------------------------*/
.exp-wrapper .exp-missing-row {background: #000;position: relative;}
.exp-wrapper .exp-missing-row img { max-width: 100%; }
.exp-wrapper .exp-missing-row:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #000000;
	border-width: 20px;
	margin-left: -20px;
	z-index: 22;
}

.exp-wrapper .exp-slider {position: relative;overflow: hidden;display: block;}

.exp-wrapper .exp-slider img {width: 100%; display:block;}
.exp-wrapper .exp-slider > img {max-width: 100%;width: 100%;}
.exp-wrapper .exp-slider .exp-slider-logo { position: absolute; bottom: 20px; right: 20px; max-width: 250px;}
.exp-wrapper .exp-slider .exp-slider-standard { position: absolute; bottom: 20px; left: 20px; }

.exp-wrapper .exp-slider .resize {position: absolute;top:0;left: 0;
height: 100%;
width: 50%;
overflow: hidden;}

.exp-wrapper .handle {
  position:absolute; 
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  margin-left:-2px;
  background: rgba(255,255,255,.1);
  cursor: ew-resize;
}

.exp-wrapper .handle:after {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    content: '';
    color:white;
    background: #fff;
    border-radius: 50%;
	-webkit-box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.4);
	-moz-box-shadow:    0px 0px 0px 10px rgba(255, 255, 255, 0.4);
	box-shadow:         0px 0px 0px 10px rgba(255, 255, 255, 0.4);
}
.exp-wrapper .handle.pulse:after {
	animation: pulse 1s infinite alternate;
}



/* Experience specific Video embed container - responsive video
-------------------------------------------------------------------*/

.exp-wrapper .video .image a .background img{
	 transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -webkit-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    opacity: 1;
}
.exp-wrapper .video .image a:hover .background img { opacity: .7;}
.exp-wrapper .video .background {background-color: #000; transform: translateZ(0);}
.exp-wrapper .video .vert-horz-align{z-index: 2;}

/* Medium Devices, Desktops */
@media only screen and (max-width : 1200px) {
	.exp-wrapper .exp-tabs .first span {letter-spacing: 1px;}
}

@keyframes pulse {
	from {
		-webkit-box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.4);
	-moz-box-shadow:    0px 0px 0px 10px rgba(255, 255, 255, 0.4);
	box-shadow:         0px 0px 0px 10px rgba(255, 255, 255, 0.4);
  	}
  	to {
  		-webkit-box-shadow: 0px 0px 0px 15px rgba(255, 255, 255, 0.4);
	-moz-box-shadow:    0px 0px 0px 15px rgba(255, 255, 255, 0.4);
	box-shadow:         0px 0px 0px 15px rgba(255, 255, 255, 0.4);
  	}
}