/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: rgba(255,118,60,0.4);
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

/* Old Browser Ranting*/
.lt-ie9 body{
	font-size: 24px;
}
.lt-ie9 #curtain .claim{
	margin-bottom: 1em;
}
.lt-ie9 #curtain .logo:before{
	font-size: 3em;
}
.lt-ie9 #curtain .button{
	border: 1px solid #d7d7d7;
	color: #b5b5b5;
}
.lt-ie9 .alternative-logo{
	width: 280px;
	margin: 0 auto;
}
.lt-ie9 .alternative-logo img{
	width: 100%;
	height: auto;
}
.browsehappy {
    margin: 0 auto;
    margin-top: 4em;
    width: 50%;
    color: #000;
    padding: 0.2em 0;
}
a{
	outline: none;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html{
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
body{
	font-size: 1em;
	line-height: 1.364em;
	font-family: 'TheinhardtLight', Helvetica, Arial, sans-serif;
	 -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1{
	font-size: 1.909em;
	line-height: 1.2em;
	text-transform: uppercase;
	font-weight: normal;
}
h2{
	font-size: 1.273em;
	text-transform: uppercase;
	font-weight: normal;
	font-family: 'TheinhardtBold', Helvetica, Arial, sans-serif;
}
.button{
	display: inline-block;
	font-size: 0.8em;
	text-transform: uppercase;
	text-align: center;
	padding: 0.9em 1.8em 0.9em 1.8em;
	text-decoration: none;
	font-weight: normal;
	border: 1px solid rgba(0,0,0,0.15);
	color: rgba(0,0,0,0.3);
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
.button:hover{
	border: 1px solid rgba(0,0,0,1);
	color: rgba(0,0,0,1);	
}
strong{
	font-weight: normal;
	font-family: 'TheinhardtBold', Helvetica, Arial, sans-serif;
}
.underline{
	border-bottom: 1px solid rgba(0,0,0,0.15);
}
/* _____________________________________________ CURTAIN */
#curtain{
	position: fixed;
	text-align: center;
	background: #fff;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 100001;
}
.no-js #curtain{
	display: none;
}
#preloader{
	position: absolute;
	text-align: center;
	z-index: 110;
	margin-top: 12%;
	width: 100%;
	-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#preloader img,
#preloader object{
	width: 50%;
	max-width: 300px;
}
.hide #preloader{
	opacity: 0;
}
#preloader img,
#preloader object{
	height: auto;
}
html.smil #gif-loader{
	display: none;
}
html.no-smil #gif-loader{
	display: inline-block;
}
html.no-smil .svg-loader{
	display: none;
}

/* _____________________________________________ HOME */
#home{
	position: relative;
	z-index: 10;
}
#home figure{
	overflow: hidden;
}
#home img.titanflex-hero-image{
	width: 165%;
	height: auto;
	margin-left: -29%;
}
#page-head{
	text-align: center;
	height: 220px;
	color: #FFF;
	position: absolute;
	width: 100%;
	z-index: 20;
	/*background-image: url(../img/header_gradient.png);
	background-repeat: repeat-x;*/
}
.claim{
	font-size: 0.8em;
	text-transform: uppercase;
	margin: 3em 0 0 0;
}
.section-header .claim{
	margin: 0;
}
.logo{
	margin: -0.4em 0 0 0; 
}
.logo:before{
	font-size: 2em;
	content: "\e600";
	font-family: 'titanflex';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
}
.logo span{
	display: none;
}
#language-menu{
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 2.3em;
	right: 2.4em;
	font-size: 0.75em;
}
#language-menu li{
	display: inline-block;
}
#language-menu li a{
	text-decoration: none;
	font-weight: normal;
	color: rgba(0,0,0,0.3);
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#language-menu li.active a,
#language-menu li a:hover{
	color: rgba(0,0,0,0.9);
}
#language-menu li a:after{
	content: '/';
	padding-left: 0.3em; 
	color: rgba(0,0,0,0.3);
}
#language-menu li:last-child a:after{
	content: '';
}
#abt-brand{
	position: absolute;
	bottom: 1.2em;
	left: 1.8em;
	overflow: hidden;
	font-size: 0.7em;
}
#abt-brand p{
	display: inline-block;
	margin: 0;
	max-width: 11em;
	line-height: 1.5em;
}
#abt-brand img{
	padding-top: 0.15em;
	max-width: 14em;
	vertical-align: top;
	display: inline-block;
}

/* _____________________________________________ TIMELINE */
#original{
	overflow: hidden;
}
header.section-header{
	text-align: center;
	overflow: hidden;
	margin: 4em 0 2em 0;
}
.section-header h2{
	margin: 0;
}
.section-header h1{
	margin: 0;
}
#timeline{
	margin: 2em 10% 0 10%;
	padding: 0 0;
	position: relative;
}
#timeline:before{
	content: ' ';
	left: 50%;
	right: 50%;
	width: 1px;
	top: -2em;
	bottom: -3em;
	position: absolute;
	z-index: -1;
	
	background: #e5e5e5;	
	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 3%, #e5e5e5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(3%,#e5e5e5), color-stop(100%,#e5e5e5));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 3%,#e5e5e5 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 3%,#e5e5e5 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 3%,#e5e5e5 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 3%,#e5e5e5 100%);
}
.timeline-element{
	width: 100%;
	z-index: 2;
	margin: 1.5em 0 2.5em 0;
	text-align: center;
}
.timeline-element p{
	background: rgba(255,255,255,1);
 	-webkit-box-shadow: 0px 0px 50px 20px rgba(255,255,255,0.8);
	-moz-box-shadow: 0px 0px 50px 20px rgba(255,255,255,0.8);
		 box-shadow: 0px 0px 50px 20px rgba(255,255,255,0.8);
	border-radius: 1px;
}
.timeline-element.typographic{
	font-size: 1.6em;
	line-height: 1.2em;
}
.timeline-element img{
	width: 100%;
	height: auto;
}
.timeline-section > header{
	position: relative;
	height: 3em;
}
.no-touch .timeline-section h3{
-webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
     -o-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
}
.timeline-element.making-of{}
#timeline h3{
	position: absolute;
	text-align: left;
	font-size: 0.8em;
	width: 50%;
	right: 6px;
	color: #cacaca;
	font-weight: normal;
}
#timeline h3 span:before,
#timeline .right-orient h3 span:before,
#timeline .left-orient h3 span:before{
	content: ' ';
	position: relative;
	display: inline-block;
	border-radius: 50%;
	width: 13px;
	height: 13px;
	box-sizing: border-box;
	background: #FFF;
	border: 1px solid #b8b8b8;
	margin-right: 0.5em;
	
-webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
     -o-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
}
.timeline-end{
	text-transform: uppercase;
	margin: 4em 0;
	text-align: center;
	font-family: 'TheinhardtBold', Helvetica, Arial, sans-serif;
	position: relative;
	text-align: center;
	color: #cacaca;
}
.timeline-end:before{
	content: ' ';
	position: absolute;
	display: block;
	top: -25px;
	margin-left: -6px;
	border-radius: 50%;
	left: 50%;
	width: 13px;
	height: 13px;
	box-sizing: border-box;
	background: #FFF;
	border: 1px solid #b8b8b8;
	
-webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
     -o-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
}
p.timeline-link{
	margin: 0;
	text-align: center;
}
.question{
	display: block;
	font-family: 'TheinhardtBold', Helvetica, Arial, sans-serif;
}
.answer{
	display: block;
	font-weight: normal;
}
.interview-image{
	text-align: center;
	margin-bottom: 2em;
}
.interview-image img{
	width: 70%;
	height: auto;
	max-width: 23em;
}
#making-of-video {
	position: relative;
	padding-bottom: 47.65%;
	padding-top: 25px;
	width: 88%;
	margin: 0 auto;
	height: 0;
}
#making-of-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* _____________________________________________ TECHNOLOGY */
#technology{
	overflow: hidden;
}
#technology > .section-header{
	padding: 4em 0 2em 0;
	margin: 0;
	background: #e9eeec;
}
#technology-features{
	overflow: hidden;
}
#technology-content,
#video,
#technology-features{
	position: relative; 
	width: 100%;
	background: #e9eeec;
}
#video,
html.no-video #video,
html.touch #video{
	display: none;
}
#video-loader{
	position: absolute;
	display: block;
	width: 100%;
	text-align: center;
	top: 1em;
}
/* Video */
/*html.touch #video{
	display: none;
}*/
#technology-video{
	width: 100%;
	height: auto;
}
.tech-feature{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	-webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
     -o-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
}
.tech-feature .tech-feature-inner{
	position: absolute;
	padding: 1em 1em 1em 1em;
	z-index: 1;
	width: 40%;
	background: rgba(236,240,240,0.7);
-webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
     -o-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
}
.tech-feature.active{
	opacity: 1;
}
.tech-feature:before{
	z-index: 10;
	content: ' ';
	position: absolute;
	left: 1em;
	top: 1.5em;
	display: block;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border: 1px solid rgba(0,0,0,0.7);
	-webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
-webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
     -o-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
}

/*Feature Positioning*/
#feature-1 .tech-feature-inner{
	bottom: 10%;
	left: 3%;
	max-width: 20em;
}
#feature-1:before{
	left: 27%;
	top: 56%;
}
#feature-2 .tech-feature-inner{
	left: 50%;
	bottom: 10%;
	max-width: 23em;
	margin-left: -11em;
}
#feature-2:before{
	left: 49%;
	top: 42%;
}
#feature-3 .tech-feature-inner{
	top: 15%;
	left: 51%;
	max-width: 22em;
}
#feature-3:before{
	top: 52%;
	left: 47%;
}
#feature-4 .tech-feature-inner{
	bottom: 19%;
	left: 7%;
	max-width: 23em;
}
#feature-4:before{
	left: 41%;
	top: 50%;
}
#feature-5 .tech-feature-inner{
	top: 9%;
	left: 49%;
	max-width: 25em;
}
#feature-5:before{
	top: 47%;
	left: 58%;
}

/* Slider */
#tech-slider{
	height: auto;
	width: 100%;
	overflow: hidden;
}
.tech-slider-panel{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding-bottom: 13.5em;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}
.tech-slider-panel img{
	width: 100%;
	height: auto;
	display: block;
}
#tech-slider > article:first-child{
}
.tech-slider-panel-content{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.slider-content-inner{
	bottom: 4em;
	left: 2em;
	right: 2em;
	position: absolute;
}
.tech-slider-panel-content:before{
		content: ' ';
		position: absolute;
		left: 1em;
		top: 1.5em;
		display: block;
		border-radius: 50%;
		width: 14px;
		height: 14px;
		box-sizing: border-box;
		border: 1px solid rgba(0,0,0,0.7);
		-webkit-transform: translateY(-50%);
	       -moz-transform: translateY(-50%);
	        -ms-transform: translateY(-50%);
	         -o-transform: translateY(-50%);
	            transform: translateY(-50%);
	-webkit-transition: all 0.4s ease 0s;
	   -moz-transition: all 0.4s ease 0s;
	     -o-transition: all 0.4s ease 0s;
	    -ms-transition: all 0.4s ease 0s;
	        transition: all 0.4s ease 0s;
	       display: block;
	}
/* Slider Features Positioning */
	#feat-1:before{
		left: 27%;
		top: 34%;
	}
	#feat-2:before{
		left: 48%;
		top: 24%;
	}
	#feat-3:before{
		top: 23%;
		left: 47%;
	}
	#feat-4:before{
		left: 41%;
		top: 30%;
	}
	#feat-5:before{
		top: 20%;
		left: 58%;
	}
.feature-browser{
	opacity: 1;
	width: 100%;
	list-style: none;
	position: absolute;
	z-index: 10;
	bottom: 1em;
	margin: 0;
	padding: 0;
	text-align: center;
	-webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
     -o-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
}
.feature-browser.playing{
	/*opacity: 0;
	bottom: 0.8em;*/
}
.feature-browser li{
	display: inline-block;
	padding: 0.3em 0.6em;
	cursor: pointer;
-webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
     -o-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
}
.feature-browser li:hover,
.feature-browser li.active{
	background: rgba(0,0,0,0.1);
}
.flex-viewport{
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.flex-control-nav{
	list-style: none;
	position: absolute;
	bottom: 1em;
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
}
.flex-control-nav li{
	display: inline-block;
}
.flex-control-nav li a{
	cursor: pointer;
	display: inline-block;
	padding: 0.3em 0.6em;
}
.flex-control-nav li a.flex-active{
	background: rgba(0,0,0,0.1);
}

/* _____________________________________________ Features*/
.feature-wrapper{
	border-top: 1px solid rgba(0,0,0,0.1);
	margin: 0 5%;
	position: relative;
	padding-bottom: 5em;
}
.feature-teaser ul{
	list-style: none;
	/*margin: 0 6em;*/
	margin: 0;
	padding: 0;
	text-align: center;
}
.feature-teaser ul li{
	cursor: pointer;
	display: inline-block;
	 vertical-align: top;
	width: 32%;
	opacity: 0.6;
	padding: 1em 0;
	font-size: 0.9em;
} 
.feature-icon{
	display: block;
  	width: 3.5em;
}
.feature-teaser{
	padding: 1em 0;
	opacity: 1;
-webkit-transition: opacity 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: opacity 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: opacity 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: opacity 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: opacity 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
.feature-teaser.inactive{
	opacity: 0;
}
.feature-teaser .feature-icon{
  	margin: 0.3em auto;
}
.feature-content{
	display: none;
	padding: 2em 0 2em;
}
.feature-content h2{
	/*width: 70%;*/
	font-family: 'TheinhardtLight', Helvetica, Arial, sans-serif;
	font-weight: normal;
	text-transform: none;
	font-size: 1.5em;
	line-height: 1.2em;
	/*margin: 1em 0.5em 1em;*/
}
.two-col{
	overflow: hidden;
}
.two-col > div{
	/*width: 50%;*/
	/*float: left;*/
}
.feature-item{
	overflow: hidden;
	padding: 1em;
	text-align: center;
}
.feature-item .feature-icon{
	opacity: 0.6;
	margin-bottom: 0.5em;
	display: inline-block;
}
.feature-item figure{
	text-align: center;
/*	float: left;*/
}
.feature-item-text{
	/*margin-left: 5em;*/
}
.feature-item-text p{
	margin: 0 0 0.5em 0;
}
.feature-item-header{
	display: inline-block;
	padding: 0;
	border-bottom: 1px solid rgba(0,0,0,0.9);
} 
.tf-icon{
	font-family: 'titanflex';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-size: 1.1em;
	display: inline-block;
	vertical-align: top;
	
	/* Enable Ligatures ================ */
	letter-spacing: 0;
	-webkit-font-feature-settings: "liga";
	-moz-font-feature-settings: "liga=1";
	-moz-font-feature-settings: "liga";
	-ms-font-feature-settings: "liga" 1;
	-o-font-feature-settings: "liga";
	font-feature-settings: "liga";

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.feature-trigger{
	opacity: 0.3;
	position: absolute;
	color: rgba(0,0,0,1);
	/*left: 0;
	top: 2em;*/
	margin: 0;
	padding: 0;
	left: 50%;
	bottom: 1em;
	background: transparent;
	border: none;
	font-size: 0.92em;
	font-family: 'TheinhardtLight', Helvetica, Arial, sans-serif;
	outline: none;
	-webkit-transition: all 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: all 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        -webkit-transform: translateX(-50%);
	       -moz-transform: translateX(-50%);
	        -ms-transform: translateX(-50%);
	         -o-transform: translateX(-50%);
	            transform: translateX(-50%);
}
.feature-trigger:before{
	display: block;
	color: rgba(0,0,0,1);
	content: "\e605";
	font-family: 'titanflex';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: 4em;
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	-webkit-transition: all 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: all 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.2s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
.feature-trigger:hover{
	opacity: 0.8;
}
.feature-trigger.active{
	color: rgba(0,0,0,0); 
}
.feature-trigger.active:before{
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}

/* _____________________________________________ Sunglasses */
#sunglasses{
	position: relative;
	  background: #f2f7f6;
	  overflow: hidden;
}
#sunglasses > .section-header{
	padding: 4em 0 2em;
	margin: 0;
}
.sunglasses-visual {
  margin: 4em auto 8em;
  max-width: 960px;
  position: relative;
}
.sunglasses-visual img{
	width: 100%;
	height: auto;
}
.sunglasses-visual figcaption ul{
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.85em;
}
.sunglasses-visual figcaption ul li{
	position: absolute;
}
.hc-brown{
	top: -8%;
	left: 11%;	
}
.hc-grey{
	top: -1%;
  left: 40%;
}
.hc-greygreen{
	top: 6%;
  left: 65%;
}
.xp-green{
	top: 90%;
	left: 12%;
}
.xp-grey{ 
	top: 95%;
	left: 60%;
}
.sunglasses-visual .feature-item-header{
	display: block;
	margin: 0;
}
#rh-brand{
	position: absolute;
	bottom: 2.3em;
	left: 5%;
	overflow: hidden;
	font-size: 0.8em;
	text-align: center;
	opacity: 0.3;
}
#rh-brand p{
	margin: 0;
}
#rh-brand img{
	max-width: 6em;
}
#sunglasses-features{
	background: #f2f7f6;
}

/* _____________________________________________ EYEWEAR */
#eyewear{
	overflow: hidden;
}
#eyewear > header.section-header{
	margin: 0;
	padding: 4em 0 2em 0;
}
#eyewear > header.section-header,
#eyewear > #eyewear-tabs,
#eyewear > #eyewear-select{
	/*background: #f2f7f6;*/
}
.eyewear-section{
	position: absolute;
}
.eyewear-section.active{
	position: relative;
}
.eyewear-section header{
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	overflow: hidden;
	position: relative;
}
.eyewear-section header img{
	width: 100%;
	height: auto;
} 
.eyewear-claim{
	overflow: hidden;
	margin: 0;
	padding: 2em 0 1.5em 0;
	color: #000;
	/*background: #f2f7f6;*/
}
.eyewear-claim p{
	margin: 0;
	text-transform: uppercase;
}
.eyewear-claim figure{
	padding: 1em 0;
}
.eyewear-claim figure img{
	width: 12em;
	display: inline-block;
}

.eyewear-products{
	list-style: none;
	margin: 0em auto 2em ;
	padding: 0;
}
.eyewear-products li{
	display: inline-block;
	width: 39%;
	padding: 5%;
}
.eyewear-products li a{
	display: block;
	overflow: hidden;
}
.eyewear-products li a img{
	width: 100%;
	height: auto;
}
.no-touch .eyewear-products li a{
	-webkit-transform: scale(1);
	transform: scale(1);
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
.no-touch .eyewear-products li a:hover{
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
} 
.eyewear-section{
	display: none;
}
.eyewear-section.active{
	display: block;
}

/* Tab Navigation */
#eyewear-tabs{
	padding: 2em 0;
}
#eyewear-tabs{
	display: none;
}
#eyewear-tabs ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;	
}
#eyewear-tabs ul li{
	display: inline-block;
}
#eyewear-tabs ul li a{
	display: inline-block;
	text-decoration: none;
	color: rgba(0,0,0,0.4);
	text-transform: uppercase;
	padding: 0.7em 1.2em;
	border: 1px solid rgba(0,0,0,0);
	/*background: rgba(255,255,255,0.9);*/
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
	outline: none;
}
#eyewear-tabs ul li a.active,
#eyewear-tabs ul li a:hover{
	border: 1px solid rgba(0,0,0,0.1);
	color: #000;
}

/* Select Navigation */
#eyewear-select{
	text-align: center;
	padding-bottom: 2em;
}
#eyewear-select select{
	/*font-size: 2em;*/
}

/* Viewer */
#viewer-slider{
	list-style: none;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 100%;
}
#viewer-slider.plain li{
	padding: 5em 0;
	text-align: center;
}
#viewer-slider.plain img{
	width: 65%;
	
}
#viewer-slider img{
	width: 100%;
	height: auto;
-webkit-transition: opacity 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: opacity 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: opacity 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: opacity 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: opacity 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
.viewer-item{
	position: relative;
}
div.threesixty{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}


/* _____________________________________________ ABOUT */
#about{
	padding: 3em 0;
	/*background-color: #e9eeed;*/
	overflow: hidden;
}
.no-touch #about{
	min-height: 65vh;	
}
#about > article{
	margin: 0 auto;
	width: 80%;
}
#about header.section-header{
	margin: 0 0 2em 0; 
}
#about h2{
	font-weight: normal;
	font-family: 'TheinhardtLight', Helvetica, Arial, sans-serif;
}

/* _____________________________________________ FOOTER */
#page-footer{
	padding: 2em 0;
	background: #141414;
	color: #5b5b5b;
	font-size: 0.75em;
	position: relative;
	z-index: 100000;
}
#page-footer ul a{
	text-decoration: none;
	color: #5b5b5b;
	text-transform: uppercase;
	-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95); 
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#page-footer ul a:hover{
	color: #FFF;
}
#footer-menu,
#footer-language-menu{
	list-style: none;
	margin: 0;
	padding: 0;
}
#footer-menu{
	text-align: center;
}
#footer-menu li,
#footer-language-menu li{
	display: inline-block;
}
#footer-menu li a{
	display: block;
	color: #FFF;
	padding: 0.6em 1em;
}
#footer-menu li a:hover{
	color: #5b5b5b;
}
#footer-language-menu{
	display: none;
	position: absolute;
	top: 2.4em;
	right: 2em;
}
#footer-language-menu li a:after{
	content: '/';
	padding-left: 0.3em; 
	color: rgba(255,255,255,0.3);
}
#footer-language-menu li:last-child a:after{
	content: '';
}
#footer-language-menu li a{
	color: rgba(255,255,255,0.3);
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95); 
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#footer-language-menu li.active a,
#footer-language-menu li a:hover{
	color: rgba(255,255,255,1)
}
ul#brands{
	list-style: none;
	margin: 0 auto;
	padding: 0.6em 0 0 0;
	text-align: center;
}
ul#brands li{
	display: inline-block;
	width: 32%;
}
ul#brands li.jos-logo{
	width: 22%;
}
ul#brands li a{
	display: block;
	color: transparent;
}
ul#brands li a img{
	opacity: 0.3;
	width: 100%;
	height: auto;
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95); 
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
ul#brands li a:hover img{
	opacity: 1;
}
.copyright{
	text-align: center;
	text-transform: uppercase;
}
/* _____________________________________________ OVERLAYS */
.noscroll{
	overflow: hidden;
}
.noscroll #page{
	opacity: 0;
}
.overlay-content{
	display: none;
}
.overlay-inner{
	position: static;
	margin: 1.8em;
}
.overlay-close-button{
	text-align: center;
}
#close-overlay{
	position: relative;
	width: 4.5em;
	height: 3em;
	z-index: 10;
	outline: none;
	font-weight: normal;
	background: transparent;
	border: none;
	color: transparent;
	font-family: 'TheinhardtLight', Helvetica, Arial, sans-serif;
	 -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	text-transform: uppercase; 
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95); 
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95); 
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#close-overlay:before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	color: rgba(0,0,0,0.5);
	content: "\e605";
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
	font-size: 4em;
	font-family: 'titanflex';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 0.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95); 
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95); 
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#close-overlay:hover:before{
	color: #000;
}
.flex-direction-nav{
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(60%);
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 100;
}
.flex-prev,
.flex-next{
	outline: none !important;
	padding: 0.3em;
	position: absolute;
	width: 1em;
	overflow: visible;
	font-size: 2.8em;
	text-decoration: none;
	color: rgba(0,0,0,0.5);
	font-family: 'titanflex';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95); 
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
.flex-prev:hover,
.flex-next:hover{
	color: #000;
}
.flex-prev{
	left: 0em;
	left: -0.2em;
}
.no-touch .flex-prev:hover{
	left: 0.3em;
}
.flex-next{
	right: 0em;
}
.no-touch .flex-next:hover{
	right: 0.3em;
}
/* Effects */

#overlay{
	position: fixed;
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	top: 0;
	left: 0;
	bottom: 0;
	background: rgba(255,255,255,1);
}
#overlay{
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
#overlay.open {
	position: fixed;
	visibility: visible;
	opacity: 1;
	height: 100%;
	z-index: 100;
	-webkit-transform: scale(1);
	transform: scale(1);	
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
	transition: transform 0.4s, opacity 0.4s;
}



/* _____________________________________________ 360 VIEWER */
.threesixty{
	cursor:ew-resize;	
}
.threesixty > div > div > div > div {
	display: none;
}
#message{
	position: absolute;
	top: 4em;
	width: 100%;
	text-align: center;
}
#viewer-slider-wrapper{
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
	-webkit-transition: opacity 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: opacity 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: opacity 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: opacity 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: opacity 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
.csstransforms #viewer-slider-wrapper{
	top: 50%;
	-webkit-transform: translateY(-80%);
	-ms-transform: translateY(-80%);
  	transform: translateY(-80%);
}
.flex-viewport {
	overflow: visible !important;
}
.viewer-item{
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
.viewer-item img{
	-webkit-filter: blur(5px); 
	-moz-filter: blur(5px); 
	-o-filter: blur(5px); 
	-ms-filter: blur(5px); 
	filter: blur(5px);
}
.viewer-item.flex-active-slide img{
	-webkit-filter: blur(0px); 
	-moz-filter: blur(0px); 
	-o-filter: blur(0px); 
	-ms-filter: blur(0px); 
	filter: blur(0px);
}
.viewer-item.flex-active-slide{
	-webkit-transform: scale(1);
	transform: scale(1);
}
#viewer-description{
	color: rgba(0,0,0,0.3);
	font-size: 0.8em;
	position: absolute;
	bottom: 5em;
	width: 100%;
	text-align: center;
	opacity: 1;
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95) 0.1s;
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95) 0.1s;
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95) 0.1s;
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95) 0.1s;
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95) 0.1s;
}
#viewer-description.transit{
	opacity: 0;
-webkit-transition: all 0.1s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.1s cubic-bezier(0.33, 0.43, 0.19, 0.95); 
    -ms-transition: all 0.1s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.1s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.1s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#viewer-description span:first-child{
	padding-right: 1em;
}
.viewer-ready{
	font-size: 0.8em;
	line-height: 1.4em;
}
.viewer-ready:after{
	width: 43px;
	height: 43px;
	display: block;
	font-size: 30px;
	margin: 0 auto;
	font-family: 'titanflex';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1.4em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e601";
	overflow: hidden;
	padding: 0;
-webkit-transition: all 0.1s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.1s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: all 0.1s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.1s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.1s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#message.loading .viewer-ready:after{
	color: rgba(0,0,0,0.5);
	-webkit-animation: loader 1s infinite;
   -moz-animation: loader 1s infinite;
     -o-animation: loader 1s infinite;
        animation: loader 1s infinite;
}

@-webkit-keyframes loader {
  0% {
   -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes loader {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes loader {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}
@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* _____________________________________________ JUMPNAV */
/* Transitions */
#jumpnav li a,
#jumpnav li a span,
#jumpnav li a:after,
#jumpnav.collapsed li.active a span{
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#jumpnav{
	display: none;
	position: fixed;
	text-align: right;
	top: 50%;
	right: 1em;
	font-size: 0.8em;
	z-index: 60;
	text-transform: uppercase;
-webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
        transform: translateY(-50%);
-webkit-transition: right 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95), opacity 0.8s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: right 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95), opacity 0.8s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: right 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95), opacity 0.8s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: right 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95), opacity 0.8s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: right 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95), opacity 0.8s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#jumpnav ul{
	list-style: none;
	margin: 0;
}
#jumpnav li{
	position: relative;
	overflow: hidden;
}
#jumpnav li a{
	text-decoration: none;
	display: inline-block;
	padding: 0.5em 0.5em;
	text-align: center;
	outline: none;
}
#jumpnav li span:after{
	content: ' ';
	position: absolute;
	right: 1em;
	top: 50%;
	display: block;
	border-radius: 50%;
	width: 13px;
	height: 13px;
	box-sizing: border-box;
	border: 1px solid rgba(0,0,0,0.3);
	-webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
-webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
     -o-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
}
#jumpnav li:hover span:after,
#jumpnav li.active span:after{
	border: 1px solid rgba(0,0,0,0.9);
}
#jumpnav li a:after{
	content: ' ';
	opacity: 0;
	cursor: pointer;
	position: absolute;
	right: 18px;
	top: 50%;
	display: inline-block;
	width: 5px;
	height: 5px;
	background: rgba(0,0,0,0.3);
	border-radius: 50%;
-webkit-transition: all 0.4s ease 0s;
   -moz-transition: all 0.4s ease 0s;
     -o-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
html.touch #jumpnav li a:after{
	right: 17.5px;
	width: 5px;
	height: 5px;
}
#jumpnav li.active a:after{
	opacity: 1;
}
#jumpnav.collapsed li a:after{
	background: rgba(0,0,0,0.3);
}
#jumpnav.collapsed li a span:after{
	border: 1px solid rgba(0,0,0,0.3);
}
#jumpnav.collapsed li:hover span:after,
#jumpnav.collapsed li.active span:after{
	border: 1px solid rgba(0,0,0,0.9);
}
#jumpnav li a span{
	color: rgba(0,0,0,0.3);
	font-size: 0.9em;
	overflow: hidden;
	padding-right: 2em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
       -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
         -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
            transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#jumpnav li.active a span,
#jumpnav li a:hover span{
	color: rgba(0,0,0,0.9);
}
#jumpnav.collapsed li.active a span,
#jumpnav.collapsed li:hover a span{
	color: rgba(0,0,0,0.9);
}
#jumpnav.collapsed li a span{
    text-decoration: none;
    color: rgba(0,0,0,0);
}
#jumpnav.collapsed li a span:after{
}
#jumpnav.collapsed li.active a span {
   color: rgba(0,0,0,1);
}
#jumpnav.collapsed li a:hover span{
	opacity: 1;
}
#jumpnav.collapsed li a:hover:after,
#jumpnav.collapsed li.active a:after{
}
#jumpnav li.active a:after,
#jumpnav li a:hover:after{
	background: rgba(0,0,0,1);
}
#jumpnav.collapsed li.active a:after,
#jumpnav.collapsed li a:hover:after{
	background: rgba(0,0,0,1);
}
#jumpnav.collapsed li a:after{
	margin-left: 0;
	margin-right: 0em;
}


/* _____________________________________________ Mobile Nav */
#mobile-nav-toggle,
#mobile-nav-close{
	position: fixed;
	top: 0.8em;
	right: 0em;
	z-index: 10;
	margin: 0;
	padding: 0;
	outline: none;
	font-weight: normal;
	background: transparent;
	border: none;
	color: transparent;
	font-family: 'TheinhardtLight', Helvetica, Arial, sans-serif;
	 -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
	text-transform: uppercase;
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95); 
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#mobile-nav-close:after,
#mobile-nav-toggle:after{ 
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
	font-size: 3em;  
	font-family: 'titanflex';
	color: #FFF;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 0.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

}
#mobile-nav-toggle.invert{
	color: transparent;
}
#mobile-nav-toggle.invert:after{
	color: #000;
}
#mobile-nav-toggle:after{
	content: "\e612";
}
#mobile-nav-close:after{  
	content: "\e605";
}
#mobile-nav {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(153,204,51,0.9);
}

/* Menu style */
#mobile-nav nav {
	text-align: center;
	position: relative;
	top: 50%;
	height: 70%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#mobile-nav ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: block;
	position: relative;
}
#mobile-nav ul#mobile-nav-menu{
	border-bottom: 1px solid #FFF;
	width: 80%;
	height: 80%;
}
#mobile-nav ul#mobile-nav-menu li{
	display: block;
	height: 20%;	
	height: calc(100% / 6);
	min-height: 40px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#mobile-nav ul#mobile-language li{
	display: inline-block;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#mobile-nav ul li a {
	padding: 0.2em 0.5em;
	font-size: 1.455em;
	display: block;
	color: #fff;
	text-decoration: none;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
	text-transform: uppercase;
-webkit-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
   -moz-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
    -ms-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
     -o-transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
        transition: all 0.4s cubic-bezier(0.33, 0.43, 0.19, 0.95);
}
#mobile-nav ul li a:hover,
#mobile-nav ul li a:focus {
	color: #f0f0f0;
}
#mobile-nav #mobile-language li a{
	padding: 1em;
	color: rgba(255,255,255,0.3);
}
#mobile-nav #mobile-language li a:hover,
#mobile-nav #mobile-language li a.active{
	color: rgba(255,255,255,1);
}

/* Effects */
html, body {
	overflow-x: hidden;
}

#page {
	overflow-x: hidden;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;	
}
#page{
	-webkit-transition: opacity 0s cubic-bezier(0.33, 0.43, 0.19, 0.95), transform 0.5s;
   -moz-transition: opacity 0s cubic-bezier(0.33, 0.43, 0.19, 0.95), transform 0.5s; 
    -ms-transition: opacity 0s cubic-bezier(0.33, 0.43, 0.19, 0.95), transform 0.5s;
     -o-transition: opacity 0s cubic-bezier(0.33, 0.43, 0.19, 0.95), transform 0.5s;
        transition: opacity 0s cubic-bezier(0.33, 0.43, 0.19, 0.95), transform 0.5s;
}
#page.overlay-open {
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#page::after {
	content: '';
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}
#page.overlay-open::after {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}
#mobile-nav{
	background: rgba(0,0,0,1);
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
	transition: transform 0.5s, visibility 0s 0.5s;
}
#mobile-nav.open {
	visibility: visible;
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

@media screen and (max-height: 30.5em) {
	#mobile-nav nav {
		height: 70%;
		font-size: 1em;
	}
	#mobile-nav ul li {
		min-height: 34px;
	}
}


/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 400px) {
	.claim{
		font-size: 1em;
	}
	.logo{
		margin: 0 0 0 0;
	}
}
@media only screen and (min-width: 560px) {
	#feat-1:before{
		left: 27%;
		top: 38%;
	}
	#feat-2:before{
		left: 48%;
		top: 28%;
	}
	#feat-3:before{
		top: 31%;
		left: 47%;
	}
	#feat-4:before{
		left: 41%;
		top: 33%;
	}
	#feat-5:before{
		top: 25%;
		left: 58%;
	}
	.csstransforms #viewer-slider-wrapper{
		top: 50%;
		-webkit-transform: translateY(-70%);
		-ms-transform: translateY(-70%);
	  	transform: translateY(-70%);
	}
	.timeline-element p{
		text-align: center;
	}
}
@media only screen and (min-width: 700px) {
	ul#brands{
		width: 80%;
	}
	ul#brands li{
		width: 24%;
	}
	ul#brands li.jos-logo{
		width: 14%;
	}
}
@media only screen and (min-width: 768px) {
	body{
		font-size: 1.2em;
	}
	.button{
		padding: 0.8em 1.8em 0.9em 1.8em;
	}
	#home figure{
		overflow: visible;
	}
	#home img.titanflex-hero-image{
		width: 100%;
		height: auto;
		margin-left: 0;
	}
	#page-head .claim,
	#curtain .claim{
		margin: 1.8em 0 0 0;
	}
	#mobile-nav-toggle{
		display: none;
	}
	#jumpnav{
		display: block;
	}
	#language-menu{
		display: block;
	} 
	
	/*_____________________________ TIMELINE */
	#timeline{
		max-width: 1000px;
		width: 70%;
		margin: 6em auto 0 auto;
	}
	.timeline-element{
		vertical-align: top;
		width: 40%;
		margin: 2.5em 0;
	}
	.timeline-element.full{
		width: 90%;
		margin: 0 auto !important;
	}
	.timeline-element.full p{
		width: 40%;
		text-align: right;
		float: right;
	}
	.timeline-element p{
		text-align: left;
	}
	.timeline-element p.timeline-link{
		text-align: center;
	}
	.timeline-section{
		position: relative;
	}
	#timeline > section:last-child{
		margin-bottom: 0;
	}
	.timeline-section > div article:first-child{
		margin-top: -3.2em;
	}
	.timeline-section > div article.interview{
		margin-top: -14em;	
	}
	.timeline-section > div article.making-of{
		margin-top: 4em;
	}
	.timeline-section > div article.integration{
		margin-top: -5em;	
	}
	/* 2015 */
	.timeline-section > div article.abt-interview{
		float: left;
		margin-top: 0;
	}
	.timeline-section > div article.audi-formula{
		margin-top: -3.25em;
	}
	.timeline-section > div article.benno-ultem{
		float: left;
	}
	.timeline-section > div article.abt-making-of{
		margin-top: 4em;
	}
	.timeline-section > div article.first-tf-collection{
		margin-top: -4em;
	}
	.design-awards{
		margin-top: -9em;
	}
	.timeline-element.odd{
		margin-left: 60%;
	}
	#timeline:before{
		top: -5em;
	}
	#timeline h3,
	#timeline .right-orient h3{
		position: absolute;
		text-align: left;
		font-size: 0.8em;
		width: 50%;
		right: 6px;
		color: #cacaca;
		font-weight: normal;
	}
	#timeline .left-orient h3{
		position: absolute;
		text-align: right;
		font-size: 0.8em;
		width: 50%;
		left: 6px;
		color: #cacaca;
		font-weight: normal;
	}
	#timeline h3 span:before,
	#timeline .right-orient h3 span:before{
		content: ' ';
		position: relative;
		display: inline-block;
		border-radius: 50%;
		width: 13px;
		height: 13px;
		box-sizing: border-box;
		background: #FFF;
		border: 1px solid #b8b8b8;
		margin-right: 0.5em;
		
	-webkit-transition: all 0.4s ease 0s;
	   -moz-transition: all 0.4s ease 0s;
	     -o-transition: all 0.4s ease 0s;
	    -ms-transition: all 0.4s ease 0s;
	        transition: all 0.4s ease 0s;
	}
	#timeline .left-orient h3 span:before{
		display: none;
	}
	#timeline .left-orient h3 span:after{
		content: ' ';
		position: relative;
		display: inline-block;
		border-radius: 50%;
		width: 13px;
		height: 13px;
		box-sizing: border-box;
		background: #FFF;
		border: 1px solid #b8b8b8;
		margin-left: 0.5em;
		
	-webkit-transition: all 0.4s ease 0s;
	   -moz-transition: all 0.4s ease 0s;
	     -o-transition: all 0.4s ease 0s;
	    -ms-transition: all 0.4s ease 0s;
	        transition: all 0.4s ease 0s;
	}
	#timeline .first-milestone span:before{
		border: 1px solid #000;
	}
	#timeline .first-milestone span{
		color: #000;
	}
	.milestone:before{
		  content: ' ';
		  position: absolute;
		  display: block;
		  left: 50%;
		margin-left: -6px;
		  border-radius: 50%;
		  width: 13px;
		  height: 13px;
		  box-sizing: border-box;
		  background: #FFF;
		  border: 1px solid #b8b8b8;
		  margin-right: 0.5em;
		  -webkit-transition: all 0.4s ease 0s;
		  -moz-transition: all 0.4s ease 0s;
		  -o-transition: all 0.4s ease 0s;
		  -ms-transition: all 0.4s ease 0s;
		  transition: all 0.4s ease 0s;
	}
	#eyewear-tabs{
		position: relative;
		z-index: 55;
		display: block;
	}
	#eyewear-select{
		display: none;
	}
	.eyewear-products{
		width: 75%;	
	}
	.eyewear-claim{
		padding: 3em 0 2em;
	}
	.eyewear-claim p{
		margin: 0 0 0.2em 0;
	}
	.eyewear-claim figure img{
		width: 16em;
		width: 294px;
	}
	#about > article{
		overflow: hidden;
	}
	#about > article p{
		width: 42%;
		padding: 0 4%;
		float: left;
	}
	#footer-language-menu{
		display: block;
	}
	/* ________________________________________ Features */
	.feature-content{
		padding: 5em 0 2em;
	}
	.feature-content h2{
		width: 70%;
		margin: 1em 0.5em 1em;
	}
	.two-col > div{
		width: 50%;
		float: left;
	}
	.feature-item{
		text-align: left;
	}
	.feature-item figure{
		text-align: left;
		float: left;
	}
	.feature-item-text{
		margin-left: 5em;
	}
	.feature-teaser ul li {
	  display: inline-block;
	  width: 6em;
	  opacity: 0.6;
	  padding: 1em 0;
	  line-height: 1.2em;
	}
	.feature-icon {
	  display: block;
	  width: 3.5em;
	}
	.feature-teaser .feature-icon {
	  margin: 0.3em auto 0.6em;
	}
	.feature-trigger{
		left: 0;
		top: 2em;
		bottom: auto;
-webkit-transform: translateX(0);
   -moz-transform: translateX(0);
    -ms-transform: translateX(0);
     -o-transform: translateX(0);
        transform: translateX(0);
	}
	.feature-wrapper{
		font-size: 0.8em;
		padding-bottom: 0em;
	}
	/* ________________________________________ Sunglasses */
	.sunglasses-visual{
		margin: 4em auto 0;
		max-width: 960px;
		position: relative;
	}
	.sunglasses-visual figcaption ul{
		font-size: 1em;
	}
	.hc-brown{
		top: -1%;
		left: 18%;	
	}
	.hc-grey{
		top: 5%;
		left: 42%;
	}
	.hc-greygreen{
		top: 12%;
		left: 67%;
	}
	.xp-green{
		top: 55%;
		left: 8%;
	}
	.xp-grey{ 
		top: 68%;
		left: 75%;
	}
	
}
@media only screen and (min-width: 930px) {
	.interview-image{
		float: left;
		width: 50%;
	}
	.interview-content{
		margin-left: 50%;
		width: 40%;
	}
	.interview-image img{
		width: 70%;
		height: auto;
		max-width: 30em;
	}
	.feature-teaser ul li{
		width: 8em;
	}
}
@media only screen and (min-width: 1000px) {
	.flex-prev{
		left: 1em;
	}
	.flex-next{
		right: 1em;
	}
	.no-touch .flex-prev:hover{
		left: 0.8em;
	}
	.no-touch .flex-next:hover{
		right: 0.8em;
	}
	.no-touch #video{
		display: block;
	}
	.no-touch #technology-content{
		display: none;
	}
	.tech-slider-panel{
		padding-bottom: 0;
	}
	.tech-slider-panel-content{
		font-size: inherit;
		line-height: inherit;
	}
	.tech-slider-panel-content{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: 0;
		padding: 0;
	}
	.tech-slider-panel-content .slider-content-inner{
		position: absolute;
		z-index: 8;
		padding: 1em 1em 1em 1em;
		width: 35%;
		height: auto;
		bottom: auto;
		right: auto;
		background: rgba(236,240,240,0.7);
	-webkit-transition: all 0.4s ease 0s;
	   -moz-transition: all 0.4s ease 0s;
	     -o-transition: all 0.4s ease 0s;
	    -ms-transition: all 0.4s ease 0s;
	        transition: all 0.4s ease 0s;
	}
	.tech-slider-panel-content:before{
		content: ' ';
		position: absolute;
		left: 1em;
		top: 1.5em;
		display: block;
		border-radius: 50%;
		width: 14px;
		height: 14px;
		z-index: 10;
		box-sizing: border-box;
		border: 1px solid rgba(0,0,0,0.7);
		-webkit-transform: translateY(-50%);
	       -moz-transform: translateY(-50%);
	        -ms-transform: translateY(-50%);
	         -o-transform: translateY(-50%);
	            transform: translateY(-50%);
	-webkit-transition: all 0.4s ease 0s;
	   -moz-transition: all 0.4s ease 0s;
	     -o-transition: all 0.4s ease 0s;
	    -ms-transition: all 0.4s ease 0s;
	        transition: all 0.4s ease 0s;
	       display: block;
	}
	/*Feature Positioning*/
	#feat-1 .slider-content-inner{
		bottom: 10%;
		left: 3%;
		max-width: 20em;
	}
	#feat-1:before{
		left: 27%;
		top: 60%;
	}
	#feat-2 .slider-content-inner{
		left: 50%;
		bottom: 10%;
		max-width: 23em;
		margin-left: -11em;
	}
	#feat-2:before{
		left: 49%;
		top: 44%;
	}
	#feat-3 .slider-content-inner{
		top: 15%;
		left: 51%;
		max-width: 22em;
	}
	#feat-3:before{
		top: 45%;
		left: 47%;
	}
	#feat-4 .slider-content-inner{
		bottom: 19%;
		left: 7%;
		max-width: 23em;
	}
	#feat-4:before{
		left: 41%;
		top: 53%;
	}
	#feat-5 .slider-content-inner{
		top: 9%;
		left: 49%;
		max-width: 25em;
	}
	#feat-5:before{
		top: 42%;
		left: 58%;
	}
	.feature-wrapper{
		font-size: 0.8em;	
	}
}
@media only screen and (max-width: 1050px) {
	#viewer-slider-wrapper{
		/*margin: 6em auto;*/
		top: 5
	}	
}

@media only screen and (min-width: 1200px) {
	ul#brands{
		width: 90%;
	}
	ul#brands li{
		width: 12%;
	}
	ul#brands li.jos-logo{
		width: 6%;
	}
	#abt-brand{
		top: 2.7em;
		left: 2.7em;
	}
	#abt-brand p{
		max-width: 100%;
		display: block;
		/*float: none;*/
		margin: 0 0 1em 0em;
	}
	#abt-brand img{
		display: inline-block;
		max-width: 14em;
	}
	.feature-teaser ul li {
	  display: inline-block;
	  width: 8em;
	  opacity: 0.6;
	  padding: 1em 0;
	  font-size: 0.9em;
	}
	.feature-icon {
	  display: block;
	  width: 3.5em;
	}
	.feature-wrapper{
		font-size: 1em;	
	}
	.feature-trigger {
	  line-height: 1.6em;
	}
}
@media only screen and (orientation : landscape) and (max-width : 1024px) {
	/*#viewer-slider-wrapper{
		margin-top: 0;
	}*/
}
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}
.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}