@charset "utf-8";
/* CSS Document */
html {
	margin: 0px auto;
	padding: 0;
}

body {
	background: linear-gradient(rgba(112,112,112,1),rgba(48,48,48,1));
	height: 100vh;
	margin: 0px auto;
	padding: 0;
	/*position: absolute;*/
	width: 100vw;
}
.container{
	display: grid;
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 1px;
	grid-template-columns: 2% 16% auto 16% 2%;
	grid-template-rows: 2% 281px auto 2%;
	grid-template-areas:
		". . . . ."
		"header header header header header"
		". . timer . ."
		". . . . .";
}
.logo {
	grid-area: header;
	max-height: 281px;
	text-align: center;
	background-color: rgba(0,0,0,0.63);
	overflow: hidden;
	position: relative;
	left:-120%;
	transform: skewX(-20deg);
	animation: slide 2s ease-in 1s 1 normal forwards;
	
}
@keyframes slide {
    99% {
		left: 0%; 	   
	}
	100%{
		left:0%;
		transform: skewX(0deg);
	}
}
#logoIMG {
	opacity: 0;
	animation: fadeIN 2s ease-in 3s 1 normal forwards;
}
#svgTimer {
	opacity: 0;
	animation: fadeIN 2s ease-in 5s 1 normal forwards;
}
@keyframes fadeIN {
	100% {
		opacity: 1;
	}
}
.timer {
	grid-area:timer;
    display: flex;
    justify-content: center;
    align-items: center;
	font-size: 5em;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	background-color: rgba(0,0,0,0.27);
	border-radius: 2%;
	height:0%;
	animation: roll 2s ease-in 3s 1 normal forwards;
	/*text-shadow:  -2px -2px 0 #ffffff, 2px -2px 0 #ffffff, -2px 2px 0 #ffffff, 2px 2px 0 #ffffff;*/
}
@keyframes roll {
	100% {
		height:100%;
	}
}