*{
	box-sizing: border-box;
}

body{
	background-color: #00274C;
	margin: 0;
	font-family: 'Noto sans', sans-serif;
}
a{
	color: inherit;
	text-decoration-line: none;
}
img{
	max-width: 100%;
	vertical-align: middle;
}

.container{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 100vw;
	height: 100vh;
}
.logo{
	width: 30vw;
	margin-bottom: 3em;
}
.logo svg{
	fill: #fff;
}
.logo_img{
	width: 100%;
	animation: logo-anim 5s infinite;
}
@keyframes logo-anim {
  0%   { opacity: 1; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}

.socials{
	display: flex;
	justify-content: center;
	width: 30vw;
}
.social-item{
	display: block;
	width: 2em;
	margin-right: 30px;

	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}
.social-item:last-child{
	margin-right: 0;
}
.si1{
	animation-delay: 1s;
	animation: shake 1s cubic-bezier(.36,.07,.19,.97) infinite;
}
.warn-msg{
	margin-top: 3em;
	color: #ffcb05;
	font-size: 1.5em;
	text-transform: uppercase;
}

@keyframes shake {
  10%, 90% {transform: translate3d(-1px, 0, 0);}
  20%, 80% {transform: translate3d(2px, 0, 0);}
  30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}
  40%, 60% {transform: translate3d(4px, 0, 0);}
}

@media only screen and (max-width: 768px){
	.logo{
		width: 70vw;
	}
	.socials{
		width: 70vw;
	margin-right: 20px;

	}

}