/*reset*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,form,h1,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,summary,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}h2,header span.bullet{vertical-align:baseline}h2,sub,sup{padding:0}sub,sup{margin:0;font-size:75%;line-height:0;position:relative;vertical-align:baseline}footer,h2,sub,sup{border:0;font:inherit}article,aside,details,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}sup{top:-.25em;text-transform:lowercase;text-decoration:underline}sub{bottom:-.25em}

html{
 	box-sizing:border-box;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
  	min-width: 320px;
  	-webkit-touch-callout: none;
  	-ms-text-size-adjust: 100%;
  	-webkit-text-size-adjust: 100%;
  	overflow-x: hidden;
  	-ms-overflow-style: -ms-autohiding-scrollbar;
}
@media (max-width: 399px) {
  html.mac * {text-rendering: optimizeLegibility; }
}
/*end reset*/


body{
	overflow:hidden;color:#292e33;background:#fff;font-family:"din-2014", Helvetica, Arial, "sans-serif";font-size:100%;
}
video.fullscreen{
	position:fixed;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;z-index:-100;opacity:1;
	-ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
	animation: slidevideoleft 0.5s ease-in-out forwards 4s;
}
.flex{
	display:flex;align-content:center;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#292e33;
	background:rgba(41,46,51,0.96);
	animation: slidelogoleft 0.5s ease-in-out forwards 4s;
}
img.logo{
	width:55%;max-width:600px;min-width:200px;height:auto;opacity:0;margin-top:15vh;
	animation: appear 2s normal forwards 1s;
}
#right-pane{
	background:#fff;width:60%;position:absolute;left:100%;
	animation: slidepanelleft 0.5s ease-in-out forwards 4s;
}

@keyframes appear{
  0%{
    opacity:0;margin-top:15vh;
  }
  100%{
    opacity:1;margin-top:0;
  }
}

@keyframes slidevideoleft{
	0%{
		left:50%;
	}
	100%{
		left:-10%;
	}
}

@keyframes slidelogoleft{
	0%{
		right:0;
	}
	100%{
		right:60%;
	}
}

@keyframes slidepanelleft{
	0%{
		left:100%;
	}
	100%{
		left:40%;
	}
}

/*smaller screens*/
@media(max-width:959px){
	video.fullscreen{
		animation: slidevideoleftall 0.5s ease-in-out forwards 4s;
	}
	.flex{
		animation: slidelogoleftall 0.5s ease-in-out forwards 4s;
	}
	#right-pane{
		width:100%;background:rgba(255,255,255,0.97);animation: slidepanelleftall 0.5s ease-in-out forwards 4s;
	}
}

/*keyframes for smaller screens*/
@keyframes appear{
  0%{
    opacity:0;margin-top:15vh;
  }
  100%{
    opacity:1;margin-top:0;
  }
}
@keyframes slidevideoleftall{
	0%{
		left:50%;
	}
	100%{
		left:0;
	}
}

@keyframes slidelogoleftall{
	0%{
		right:0;opacity:1;
	}
	100%{
		right:100%;opacity:0;
	}
}

@keyframes slidepanelleftall{
	0%{
		left:100%;
	}
	100%{
		left:0;
	}
}

nav{
	display:block;padding:20px 3%;text-align:right;
}
nav a{
	text-decoration:none;text-transform:uppercase;color:#66737f;display:inline-block;font-size:180%;font-weight:700;
	transition:color 0.3s ease;
}
nav a:hover,nav a:focus,nav a:active{
	color:#292e33;
}
nav a.active{
	color:#292e33;
}
nav .gap{
	width:10px;display:inline-block;
}
#slide-line{
	position:absolute;height:2px;margin-top:36px;background-color:#be2034;
	-webkit-transition:all .3s ease;
	transition:all .3s ease;
}
header{
	text-align:center;padding:100px 3% 0 3%;display:block;
}
img.map{
	width:90%;height:auto;margin:80px auto 20px auto;display:block;
}
h1{
	font-weight:700;margin-bottom:35px;font-size:300%;font-family:"din-2014-narrow";text-transform:uppercase;
}
h2{
	font-weight:700;font-size:170%;font-family:"din-2014-narrow";line-height:100%;margin-bottom:10px;
}
h3{
	font-size:108%;margin-bottom:10px;color:#66737f;
}
header p{
	font-size:150%;color:#66737f;line-height:170%;max-width:600px;margin:0 auto;display:block;
}
.wrap{
	display:block;max-width:90%;margin:0 auto;
}
.wrap.center{
	text-align:center;
}
.wrap p{
	font-size:150%;color:#66737f;line-height:170%;max-width:800px;margin:0 auto;display:block;text-align:left;
}
.wrap p img.profile{
	width:40%;height:auto;max-width:200px;display:inline-block;float:right;margin:0 0 10px 20px;
}
.stations{
	display:flex;flex-flow:row wrap;max-width:96%;margin:0 auto;align-items:stretch;justify-content:center;
}
.station{
	flex:1 auto;width:20%;padding:2.5%;text-decoration:none;text-align:center;align-self:flex-end;max-width:260px;
	transition:all 0.3s ease-in-out;
}
.station:hover{
	background:#eeeef3;
}
div.station:hover{
	background:#fff;
}
.station img,.station h2,.station h3{
	margin-left:auto;margin-right:auto;display:block;
}
.station img{
	width:80%;height:auto;min-width:80px;max-width:160px;
}
.station h2{
	color:#292e33;text-decoration:none;
}
.station h3{
	color:#66737f;text-decoration:none;white-space:nowrap;
}
@media(max-width:666px){
	nav a{
		font-size:130%;
	}
	h1{
		font-size:210%;
	}
	header p,.wrap p{
		font-size:125%;
	}
	.station{
		width:40%;padding:5%;
	}
}
footer{
	margin-top:80px;background:#eeeef3;display:block;text-align:center;padding:80px 0 60px 0;border-bottom:3px solid #be2034;
}
footer img{
	display:block;width:60%;max-width:220px;min-width:150px;margin:0 auto 40px auto;
}
footer a, footer span{
	display:inline-block;margin:0 3%;text-transform:uppercase;color:#292e33;text-decoration:none;letter-spacing:1px;padding-bottom:8px;position:relative;margin-top:10px;white-space:nowrap;
}
footer a:before, a:after{
 	content:'';position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:#be2034;
}
footer a:before{
 	opacity:0;
	transform:translateY(-8px);
 	transition:transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
}
footer a:after{
	opacity:0;
	transform:translateY(4px);
	transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}
footer a:hover:before, footer a:hover:after, footer a:focus:before, footer a:focus:after{
	opacity:1;
	transform:translateY(0);
}
footer a:hover:before, footer a:focus:before{
	transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}
footer a:hover:after, footer a:focus:after{
	transition:transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
}