/* FONT */
@font-face {
	font-family: 'Metropolis';
	src: url('../fonts/Metropolis-Bold.eot');
	src: url('../fonts/Metropolis-Bold.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Metropolis-Bold.woff') format('woff'),
		 url('../fonts/Metropolis-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@keyframes fade_in_up {
	0% { transform: translate3d(0, -20px, 0); }
	100% { opacity: 0; transform: none; }
}

@keyframes fade_in_down {
	0% { opacity: 0; transform: translate3d(0, -20px, 0); }
	100% { opacity: 1; transform: none; }
}

@keyframes fadeIn {
	0% { opacity:0; }
	100% { opacity: 1; }
}

@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes slide-down {
	0% { opacity: 0; -webkit-transform: translateY(-100%); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes slide-up {
	0% { opacity: 1; -webkit-transform: translateY(0); }
	100% {-webkit-transform: translateY(-100%);  }
}



html,
body {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    background-color: #000000;
    color: #ffffff;
    font-family: 'Metropolis';
    font-size: 16px;
}

header {
    display: flex;
    /* justify-content: center; */
    padding: 3rem;
}

h1, p {
    font-family: 'Metropolis';
}

h1.informations{
    text-transform: uppercase;
    font-size: 2.375rem;
    line-height: 2.5rem;
    font-weight: 700;
    opacity: 0;
    margin: 0;
    animation-name: fade_in_down;
	animation-duration: 0.35s;
    animation-delay: 0.35s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.7,.17,.18,.77);
}

p.description {
    font-size: 2.5rem;
    line-height: 3rem;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0;
    animation-name: fade_in_down;
	animation-duration: 0.35s;
    animation-delay: 0.70s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.7,.17,.18,.77);
}

.img-logo {
    position: relative;
    display: block;
    width: 160px;
    box-sizing: border-box;
	animation-name: fade_in_down;
	animation-duration: 0.35s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.7,.17,.18,.77);
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 350px;
    padding: 3rem;
}

.top-content {
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}