*{
    margin: 0;
	padding:0;
	border: 0;
	outline:0;	
	vertical-align:baseline;
	background:transparent;	
	
	font-size:   100%;
    font-family: 'Circe', sans-serif;
    font-size:   14px;
	
	box-sizing: border-box;
	z-index: 1;
}

html, body {
    height:   100%;
    position: relative;
}

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    border-radius:      0;
}


#container {
	display:         flex;
	justify-content: center;
	align-items:     center;
	flex-flow:       column wrap;

	width:  100vw;
	height: 100vh;

	background: linear-gradient(to bottom left, #ff0000, #990000);
}


.text {
	color: 	  	 #fff;
	margin-top:    30px;	
	font-weight:    300;
	letter-spacing: 1px;
}

.start {
	animation: showFirst 2s ease-in-out;
}


.blured {		
	animation: blurUp 4s ease-in-out;	
}
  
@keyframes blurUp {
	0% {
		filter: blur(0px);		
	}
	50% {
		filter:  blur(15px);		
		opacity: 0;
	}	
	100% {
		filter: blur(0px);		
	}
}

@keyframes showFirst {
	0% {
		filter: blur(15px);		
		opacity: 0;
	}
	100% {
		filter:  blur(0px);		
		opacity: 1;
	}		
}

.icon {
	animation: iconAnim 10s ease-in-out;
}

@keyframes iconAnim {
	0% {
		transform:  scale(0.0, 0.0);		
		filter: blur(50px);
		opacity: 0;		
	}
	10% {
		transform: scale(1.10, 1.10);
		filter: blur(0px);
		opacity: 1;
	}		
	20% {
		transform: scale(1.0, 1.0);
	}
	30% {
		transform: scale(1.08, 1.08);
	}
	40% {
		transform: scale(1.0, 1.0);
	}
	50% {
		transform: scale(1.06, 1.06);
	}
	60% {
		transform: scale(1, 1);
	}
	70% {
		transform: scale(1.04, 1.04);
	}
	80% {
		transform: scale(1.0, 1.0);
	}
	90% {
		transform: scale(1.02, 1.02);
	}
	100% {
		transform: scale(1.0, 1.0);
	}
}