article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{margin:0px; padding:0px; font-family: 'tt_norms_regular'; font-weight:400; font-size:0.938vw; line-height:1.458vw; background:#003542; overflow-x: hidden;}
textarea{outline:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}
a,
a:hover,
a:focus{text-decoration:none; outline:none;}
h1,h2,h3,h4,h5,h6,ul,p,form,input{margin:0px; padding:0px; outline:none}
.clear:before,.clear:after{content:" "; display:table;}
.clear:after{clear:both;}
.clear{*zoom:1;}
input[type="submit"]{-webkit-appearance:none; -webkit-border-radius:3px;}
a, .submit{-webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; -o-transition: all 200ms ease-in;transition: all 200ms ease-in;}
a.join_now_btn{-webkit-transition:none; -moz-transition:none; -ms-transition:none; -o-transition:none; transition:none;}
/*Add Placeholder opcity 1*/
::-moz-placeholder{opacity:1}
::-webkit-placeholder{opacity:1}
*{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

.a-center{ text-align:center;}

*::before, *::after {
    box-sizing: border-box;
}

p{ margin-bottom: 24px;}
img{ max-width: 100%; height: auto; }

.container{ max-width:85%; margin:0 auto;}


@font-face {
    font-family: 'albra_medium';
    src: url('../fonts/albra_text_medium-webfont.eot');
    src: url('../fonts/albra_text_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/albra_text_medium-webfont.woff') format('woff'),
         url('../fonts/albra_text_medium-webfont.ttf') format('truetype'),
         url('../fonts/albra_text_medium-webfont.svg#albra_textmedium') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'albra_regular';
    src: url('../fonts/albra_text_regular-webfont.eot');
    src: url('../fonts/albra_text_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/albra_text_regular-webfont.woff') format('woff'),
         url('../fonts/albra_text_regular-webfont.ttf') format('truetype'),
         url('../fonts/albra_text_regular-webfont.svg#albra_textregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'tt_norms_regular';
    src: url('../fonts/ttnormspro-regular-webfont.eot');
    src: url('../fonts/ttnormspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ttnormspro-regular-webfont.woff') format('woff'),
         url('../fonts/ttnormspro-regular-webfont.ttf') format('truetype'),
         url('../fonts/ttnormspro-regular-webfont.svg#tt_norms_proregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'tt_norms_bold';
    src: url('../fonts/ttnormspro-bold-webfont.eot');
    src: url('../fonts/ttnormspro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ttnormspro-bold-webfont.woff') format('woff'),
         url('../fonts/ttnormspro-bold-webfont.ttf') format('truetype'),
         url('../fonts/ttnormspro-bold-webfont.svg#tt_norms_probold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'tt_norms_light';
    src: url('../fonts/ttnormspro-light-webfont.eot');
    src: url('../fonts/ttnormspro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ttnormspro-light-webfont.woff') format('woff'),
         url('../fonts/ttnormspro-light-webfont.ttf') format('truetype'),
         url('../fonts/ttnormspro-light-webfont.svg#tt_norms_prolight') format('svg');
    font-weight: normal;
    font-style: normal;

}



/*========================Header Container========================*/

.header-top{ position:fixed; top:5vh; width:100%; z-index: 999;}
.header-top .header-wrapper{ display:flex; display:-webkit-flex; justify-content:space-between; align-items: center;}

.header-top .logo{ width:12.656vw;}
.header-top .logo a:after{ display:none;}
.header-top .country-names {margin-left: -18vw;}
.header-top .country-names ul{ display: flex; display: -webkit-flex; }
.header-top .country-names ul li{ padding:0 0.781vw; list-style:none;}
.header-top .country-names ul li a {font-size: 0.938vw; letter-spacing:1px; text-transform: uppercase; color: #fff; font-family: 'tt_norms_bold'; position:relative;}
.header-top .country-names ul li a:before{background: url(../images/menu-icon.svg) center center no-repeat; width: 0.469vw; height: 0.469vw; content: " "; position: absolute; top: 50%; left: -1vw;   transform: translateY(-50%); -webkit-transform: translateY(-50%);   background-size: 100% auto;}
.header-top .country-names ul li:first-child a:before{display:none;}



.header-top .login-btn{}
.header-top .login-btn a{ width:9.896vw; height:3.125vw; background:#a47b36 !important; color:#fff; display: block; padding:0 5px; text-align:center; line-height:3.125vw; font-family: 'tt_norms_bold';}
.header-top .login-btn a:after{ display:none;}

.header-top .login-popup{ width:18vw; position:absolute; right:0; top: 0; background: #a47b36; padding:2.344vw; visibility: hidden; opacity:0; transition: all .35s; -webkit-transition: all .35s;}
.header-top .login-popup h3{ color:#fff; font-size:0.938vw; margin-bottom:3vh;}
.header-top .login-popup ul{ list-style:none;}
.header-top .login-popup ul li input[type="text"],
.header-top .login-popup ul li input[type="password"]{ background:#fff; width:100%; height:4vh; line-height:4vh; border:none; margin-bottom:1.5vh; padding:0 10px; font-family: 'tt_norms_regular';}
.header-top .login-popup ul li input[type="submit"]{ height:4vh; width:100%; line-height:4vh; background:#003542; border:none; color:#fff; text-transform: uppercase; font-family: 'tt_norms_regular'; cursor: pointer;}

.header-top .login-popup.active{ visibility: visible; opacity:1; transition: all .35s; -webkit-transition: all .35s;}

.slides-nav{ position:absolute; bottom:10vh; left:26.563vw; z-index: 999;}

.slides__caption-link{ position:absolute; left:7.5vw; bottom:11.5vh}




/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #003542;
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;

}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	position: relative;
}

a::after {
	content: '';
	position: absolute;
	width: 50%;
	height: 1px;
	background: currentColor;
	left: 0;
	bottom: -25%;
	transform: scale3d(0,1,1);
	opacity: 0;
	transform-origin: 0% 50%;
	transition: transform 0.3s, opacity 0s 0.3s;
}

a:hover::after {
	opacity: 1;
	transition: transform 0.3s;
	transform: scale3d(1,1,1);
}

a:hover {
	color: var(--color-link-hover);
	outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid red;
	background: transparent;
}

.frame {
	padding: 3rem 5vw;
	text-align: center;
	position: relative;
	z-index: 1000;
	color: var(--color-frame);
}

.frame a {
	color: var(--color-frame);
}

.frame__title {
	font-size: 1.25rem;
	margin: 0 0 1rem;
}

.frame__title span {
	position: absolute;
	pointer-events: none;
	opacity: 0;
}

.frame__links {
	display: inline;
}

.frame__links a:not(:last-child),
.frame__demos a:not(:last-child) {
	margin-right: 1rem;
}

.frame__demos {
	margin: 1rem 0;
}

a.frame__demo--current,
a.frame__demo--current:hover {
	color: var(--color-text);
}

.slideshow {
	width: 100vw;
	height: calc(100vh - 13rem);
	position: relative;
	overflow: hidden;
}

.slide {
	margin: 0;
}

.slide,
.slide__img-wrap,
.slide__img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.js .slide {
	opacity: 0;
	pointer-events: none;
}

.js .slide--current {
	opacity: 1;
	pointer-events: auto;
}

.slide__img-wrap {
	will-change: transform;
	overflow: hidden;
    
}

 .slide--current .slide__img-wrap:before{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); content:" "; z-index: 1;}

.slide__img-wrap video{ width:100%; height:100%; object-fit: cover;}

.slide__img {
	background-size: cover;
	will-change: transform;
	-webkit-backspace-visibility: hidden;
}

.slide__caption {
	
	padding: 0 7.5vw;
	cursor: default;
	width: 100%;
}

.slides__caption-headline {
    font-family:"tt_norms_light";
	font-size: 3.646vw;
	line-height: 0.9;
	margin: 0;
	text-transform: uppercase;
	font-weight: normal;
    color:#fff;
    letter-spacing:0.104vw;
}
.slides__caption-headline ul{ padding-top:.75vw;}
.slides__caption-headline ul li{ font-size:1.250vw; font-family: 'albra_regular'; font-style: italic; letter-spacing: 0.026vw; font-weight: normal; line-height:1.667vw; margin-bottom:3vh; position:relative; padding-left:2.865vw;}
.slides__caption-headline ul li:before{ width:1.458vw; height:1.458vw; background:#a47b36; content:" "; position:absolute; left:0.365vw; top:.1vw; transform: rotate(45deg); -webkit-transform: rotate(45deg);}

.text-row {
	position: relative;
	overflow: hidden;
	display: block;
	white-space: nowrap;
}

.text-row > span {
	display: block;
	position: relative;
	padding: 0.5rem 0;
}
.text-row .c-name{ display:inline-block; font-size:1.250vw; vertical-align: top; padding-top:.5vw; padding-right:1.042vw; font-family: 'tt_norms_bold'; color:#a47b36;}

.slides__caption-headline {
	font-weight: 300;
    
}

.slides__caption-headline em,
.slides__caption-headline strong {
	font-family: 'albra_medium';
	font-size: 3.646vw;
}

.slides__caption-headline em {
	font-weight: 400;
	font-style: italic;
}

.slides__caption-headline strong {
	font-weight: 400;
}

.slides__caption-link {
	display: inline-block;
	margin-top: 1rem;
	text-indent: 0.2vw;
	font-size: 1.563vw;
	font-weight: 300;
    color:#fff;
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: 0.052vw;
}

.slides__caption-link:hover{ color:#fff;}
.slides__caption-link:after{ width:15.104vw; height:0.313vw; background:#a47b36; bottom:-1.042vw;}

.slides-nav {
	display: flex;
	align-items: center;
	justify-content: center;
}

.slides-nav__button {
	display: block;
	cursor: pointer;
	background: none;
	border: 0;
	width: 3.80vw;
	padding: 0;
	margin: 0 0.75rem;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.slides-nav__button:focus {
	outline: none;
}

.slides-nav svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: #fff;
}

.slides-nav__index {
	margin-left: 2rem;
	white-space: nowrap;
	color: var(--color-text);
	border: 1px solid var(--color-text);
	border-radius: 50%;
	padding: 1rem 1.5rem;
	text-align: center;
	display: flex;
	align-items: center;
}

.slides-nav__index > span {
	width: 2rem;
}

.slides-nav__index-current {
	position: relative;
	overflow: hidden;
}

.slides-nav__index-current span {
	display: inline-block;
}

.site-footer{ position:absolute; left:0; bottom:0; width:100%; background:#00252e;}
.site-footer p{ margin:0; color:rgba(255,255,255,.3);}
.site-footer a{color:rgba(255,255,255,.3);}
.site-footer a:after{ width:100%;}
.site-footer .footer-wrapper{ display:flex; display:-webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items:center; -webkit-align-items:center; min-height:5vh; padding:1vh 0;}
.site-footer .footer-wrapper .left a{font-weight: 600;}

/*.slide__img-wrap{clip-path: polygon(50% 10%, 60% 50%, 50% 90%, 40% 50%) !important; transform: translate(-100%, 100%) rotate(0.001deg) !important;}
.slide--current .slide__img-wrap{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important; transform: translate(0%, 0%) rotate(0.001deg) !important;}*/

@media screen and (min-width: 53em) {
	.frame {
		position: fixed;
		text-align: left;
		z-index: 100;
		top: 0;
		left: 0;
		display: grid;
		align-content: space-between;
		width: 100%;
		max-width: none;
		height: 100vh;
		padding: 2rem 3.5rem;
		pointer-events: none;
		grid-template-columns: 25% 50% 25%;
		grid-template-rows: auto auto auto;
		grid-template-areas: 'title links info'
							'... ... ...'
							'demos demos nav';
	}
	.frame__title {
		margin: 0;
		grid-area: title;
	}
	.frame__demos {
		margin: 0;
		grid-area: demos;
		justify-self: start;
		align-self: end;
	}
	.frame__links {
		grid-area: links;
		padding: 0;
		justify-self: center;
	}
	.frame__info {
		grid-area: info;
		justify-self: end;
   		align-self: start;
	}
	.slides-nav {
		grid-area: nav;
		justify-self: end;
		align-self: end;
	}
	.frame a,
	.frame button {
		pointer-events: auto;
	}
	.slideshow {
		height: 100vh;
	}
	.slides-nav {
		
	}
	.slides-nav__index {
		margin-right: -2rem;
	}
	.slideshow {
		background: var(--color-bg);
	}

}


@media screen and (max-width: 1199px){
    
    .slide__img-wrap video{ height:100%;}
    
    .header-top .login-popup{ width:250px;}
    .header-top .login-popup h3{ font-size:14px; margin-bottom:15px;}
    .header-top .login-popup ul li input[type="text"], .header-top .login-popup ul li input[type="password"]{ height:32px; line-height:32px; font-size:12px;}
    .header-top .login-popup ul li input[type="submit"]{ height:32px; line-height:32px; font-size:12px;}

}

@media screen and (max-width: 992px){
    
    body{ font-size:12px; line-height:20px;}
    .slideshow{ height:100vh;}
    .header-top .logo{ width:180px;}
    
    .header-top .header-wrapper{ flex-wrap:wrap; -webkit-flex-wrap:wrap;}
    .header-top .country-names{ order:3; width:100%; padding-top:15px; margin-left: 0;}
    .header-top .country-names ul{ flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: center; -webkit-justify-content: center;}
    .header-top .country-names ul li{ padding:0 10px 5px;}
    .header-top .country-names ul li a{ font-size:12px;}
    .header-top .country-names ul li a:before{ width:8px; height:8px; left:-15px;}
    
    .header-top .login-btn a{ width:120px; height:32px; line-height:32px; font-size:14px;}
    
    .slides__caption-headline{ font-size:36px;}
    .slides__caption-headline em, .slides__caption-headline strong{ font-size:36px;}
    
    .slides__caption-link{ font-size:16px;}
    
    .slides-nav{bottom:11vh;}
    
    .slides__caption-headline ul li{ font-size:16px; margin-bottom:20px;}
    
    .text-row .c-name{ font-size:16px;}
    
}

@media screen and (max-width: 767px){
    
    .slides__caption-headline ul li{ padding-left:24px; line-height:20px;}
    .slides__caption-headline ul li:before{ height:12px; width:12px; top:5px;}
    
    .header-top .login-popup{ width:100%; top:99%; padding:25px;}
    .header-top .login-popup ul li input[type="text"], .header-top .login-popup ul li input[type="password"]{ margin-bottom:15px;}
    .slides__caption-link{ font-size:14px;}
}

@media screen and (max-width: 575px){
	 
	body{overflow:hidden !important; height:100% !important;}
	
	.site-footer {position: fixed;}
    
    .header-top .logo{ width:120px;}
    .site-footer .footer-wrapper{ flex-wrap:wrap;}
    .slides-nav__button{ width:30px;} 
    
    .slides-nav{ left:auto; right:7.5vw; bottom:120px;}
    .slides__caption-link{ bottom:105px;}
	
	.slideshow{height: calc(100vh - 73px);}
	.slide__caption{ padding: 0 7.4vw;}
	
	
}


@media screen and (max-width: 479px){
    
    .slides__caption-headline{ font-size:18px;}
    .slides__caption-headline em, .slides__caption-headline strong{ font-size:20px;}
    
    .slides__caption-headline ul li{ font-size:14px; margin-bottom:10px;}
    .text-row .c-name{ font-size:14px; padding-right:10px;}
}

