/*==========================================================================
 Font
 ==========================================================================*/
@font-face{
	font-family: 'Din';
	src: url('/fonts/din-webfont.eot'), 
			 url('/fonts/din-webfont.woff2') format('woff2'),
			 url('/fonts/din-webfont.woff') format('woff'),
			 url('/fonts/din-webfont.ttf') format('truetype');
	font-weight: normal;
}

/*==========================================================================
 Styles
 ==========================================================================*/
html{
	background: #d2d3d5;
	background-position: center center;
	background-repeat: no-repeat;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body{ margin: 0; }

.page-callout{
	background: #121212;
	border-radius: 3px;
	box-shadow: 1px 1px 6px rgba(0,0,0,0.4), -1px -1px 6px rgba(0,0,0,0.4);
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	top: 50%;
	width: 300px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.page-logo{
	margin: 25px auto;
	text-align: center;
}

.translated{
	color: #656464;
}

.language-list{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.language-list li{
	background: #1d1d1d;
	font: 16px/1 'Din', sans-serif;
	margin-bottom: 1px;
}

.language-list li:last-of-type{
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	margin-bottom: 0;
}

.language-list li:last-of-type a{
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.language-list li a{
	color: #dcdcdc;
	display: block;
	padding: 17px 18px;
	position: relative;
	text-decoration: none;
	-webkit-transition: background 0.3s, color 0.3s;
	-moz-transition: background 0.3s, color 0.3s;
	-ms-transition: background 0.3s, color 0.3s;
	-o-transition: background 0.3s, color 0.3s;
	transition: background 0.3s, color 0.3s;
}

.language-list li a::after{
	content: '';
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid rgba(255,255,255,0.15);
	display: block;
	height: 0;
	margin-top: -6px;
	position: absolute;
	right: 25px;
	top: 50%;
	width: 0;
	-webkit-transition: border-left-color 0.3s, right 0.3s ease-out;
	-moz-transition: border-left-color 0.3s, right 0.3s ease-out;
	-ms-transition: border-left-color 0.3s, right 0.3s ease-out;
	-o-transition: border-left-color 0.3s, right 0.3s ease-out;
	transition: border-left-color 0.3s, right 0.3s ease-out;
}

.language-list li a:hover{ 
	background: #ddd; 
	color: #121212;
}

.language-list li a:hover::after{
	border-left-color: rgba(18,18,18,0.5);
	right: 18px;
}
.legal {
	color: #bbb;
	padding: 5px 15px 5px 18px;
	font: 12px/1 'Din', sans-serif;
}

/*==========================================================================
 Animation
 ==========================================================================*/
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in{
	opacity: 0;
	-webkit-animation:fadeIn ease-in 1;
	-moz-animation: fadeIn ease-in 1;
	animation: fadeIn ease-in 1;
	
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-duration: 0.75s;
	-moz-animation-duration: 0.75s;
	animation-duration: 0.75s;
}

/*==========================================================================
 IE9 Overrides
 ==========================================================================*/
.ie9 .fade-in{ opacity: 1; }

/*==========================================================================
 Responsive
 ==========================================================================*/
@media all and (max-width: 400px){
	.page-callout{
		width: 70%;
	}
	
	.language-list li{ font-size: 14px; }
}