*{ margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: white; }
a:link{ text-decoration: none; }
a:hover { text-decoration: none; }
@font-face { font-family: Frutigel;	src: url(../fonts/unicode.frutigel.ttf) }
html, body{ background: #2c1e48; font-family: Frutigel; font-size: 20px; color: white; width: 100vw; height: 100vh; }
.header{ height: 70px; padding: 1em; }
.container{	width: 100%; display: grid; grid-template-columns: 100%; grid-template-rows: 80% 20%; text-align: center; justify-content: center; align-items: center; height: calc(100vh - 70px); }
.text{ padding: 1em; }
p{ padding-bottom: 0.5em; }
.languages img{ transition: all 0.3s; cursor: pointer; width: 1.2em; height: 1.2em;	margin: 0.2em; }
.languages img:hover{ -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); transform: scale(1.6); }
.selected{ -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); transform: scale(1.6); }
.logo{ display: grid; grid-template-columns: 50% 50%; justify-content: center; text-align: right; align-items: center; }
.logo_video{ text-align: right; }
.logo_text{ text-align: left; }

.logo_video video{ 
	max-width: 350px; 
	position: relative;
	bottom: 15px;
	-webkit-animation: video 3s ease-out forwards;
	-moz-animation: video 3s ease-out forwards;
	-o-animation: video 3s ease-out forwards;
	-ms-animation: video 3s ease-out forwards;
	animation: video 3s ease-out forwards;
}

.logo_name img{	
	max-width: 500px; 
	position: relative;
	-webkit-animation: name 2s linear forwards;
	-moz-animation: name 2s linear forwards;
	-ms-animation: name 2s linear forwards;
	-o-animation: name 2s linear forwards;
	animation: name 2s linear forwards;

}

.logo_slogan img{ 
	max-width: 380px; 
	position: relative;
	left: -100%;
	opacity: 0;
	-webkit-animation: slogan 1s 2s linear forwards;
	-moz-animation: slogan 1s 2s linear forwards;
	-ms-animation: slogan 1s 2s linear forwards;
	-o-animation: slogan 1s 2s linear forwards;
	animation: slogan 1s 2s linear forwards;
}

@keyframes video{
	0%{
		right: -100%;
	}
	100%{
		right: 70px;
	}
}

@keyframes name{
	0%{
		left: -100%;
	}
	100%{
		left: -165px;	
	}
}

@keyframes slogan{
	100%{ 
		opacity: 1;
		left: calc(-165px + ((500px - 380px))/2);
	}
}



@media (max-width: 480px) { 
	.logo_video video{ 
	max-width: 50px; 
}

.logo_name img{	
	max-width: 125px; 
}

.logo_slogan img{ 
	max-width: 65px; 
}

@keyframes video{
	0%{	right: -100%; }
	100%{ right: 5px; }
}

@keyframes name{
	0%{ left: -100%; }
	100%{ left: -30px;	}
}

@keyframes slogan{
	100%{ 
		opacity: 1;
		left: -25px;
	}
}


	.text{ font-size: 0.7em; }
	.languages img{	width: 1em;	height: 1em; }
}

@media (min-width: 481px) and (max-width: 767px) {

	.text{ font-size: 0.7em; }
	.languages img{ width: 1em;	height: 1em; }	
}

@media (min-width: 768px) and (max-width: 1024px) {

	.text{ font-size: 0.8em; }
	.languages img{	width: 1em;	height: 1em; }	    
}