@CHARSET "ISO-8859-1";

body, html {margin:0; padding:0; background:#021e5f;}
body {font-family: "aktiv-grotesk", sans-serif; font-weight:400; font-style:normal; line-height:1.5; color:#ffffff; font-size:1.3rem; background:#021e5f; overflow:hidden;}

.container a {color:#0392c6; text-decoration: none; background-image: linear-gradient(#ffffff, #ffffff); background-position: bottom left; background-repeat: no-repeat; 
background-size: 0% 1px; webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; padding: .15rem 0; transition-timing-function: ease-in;}
a:hover {background-size: 100% 1px; color:#ffffff;}
:focus, :hover {-webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

.content {width:100vw; height:100vh; top:0; left:0; position:fixed; z-index:50; display:flex; flex-direction:column; align-items: center; justify-content: center;}

.logo {top:5vh; position:absolute; opacity:0; transform:translateY(5rem); transition:opacity 1s cubic-bezier(.215,.61,.355,1), transform 1s cubic-bezier(.215,.61,.355,1);}
.ready .logo {opacity:1; transform:none;}
.logo svg {width:250px;}
.st0{fill:#0392c6;}
.st1{fill:#ffffff;}

.container {width:40%; padding:5vh 8vw; text-align:center; display:flex; flex-direction:column; align-items: center; grid-gap:2rem;}
.container p {margin:.5rem 0; text-transform:uppercase;}
div.underline {width:70%;}
.container h1 {color:#ffffff; font-size:2.5rem; padding: 0; margin: 0;}
.container h1, .container p:nth-child(1), .container p:nth-child(2), .container p:nth-child(3), div.underline, .marsrouge {opacity:0; transform:translateY(5rem);
transition:opacity 1s cubic-bezier(.215,.61,.355,1), transform 1s cubic-bezier(.215,.61,.355,1);}
.ready .container h1, .ready .container p:nth-child(1), .ready .container p:nth-child(2), .ready .container p:nth-child(3), .ready div.underline, .ready .marsrouge {opacity:1; transform:none;}
.ready .container h1 {transition-delay:.1s;}
.ready .container p:nth-child(1) {transition-delay:.12s;}
.ready .container p:nth-child(2) {transition-delay:.14s;}
.ready .container p:nth-child(3) {transition-delay:.16s;}
.ready div.underline {transition-delay:.18s;}
.ready .marsrouge {transition-delay:.32s;}

ul, p {padding:0; margin:0;}
li {list-style: none; margin-bottom:0; font-size:80%; margin-bottom:.2rem;}

.marsrouge {position:absolute; bottom:2rem; right:2rem;}
.marsrouge svg {fill:#f9f7ee; transition:.3s; width: 30px;}
.marsrouge:hover svg {fill:#f68428;}


@media screen and (max-width:1290px) {
	
	.logo  {position:relative; top:auto;}
	.logo svg {width:200px;}
	body {overflow-y:auto; font-size: 1rem!important;}
	h1 {padding:0; margin:0;}
	.container h1 {font-size: 1.5rem;}
	.content {height:auto; position: relative; background:none; padding:8vw 0; grid-gap:7vw; justify-content: flex-start;}
	.container {width:70%; padding:0; grid-gap: 3vw;}
	.container p {margin:2vw 0;}
	.container p:first-child {margin:0 0 2vw 0;}
	.container p:last-child {margin:2vw 0 0 0;}
	.marsrouge {position: relative; bottom: auto; right: auto;}
	
}

@media screen and (max-width:890px) {

	.content {padding:3rem; grid-gap:3.5rem; width:calc(100% - 6rem);}
	.container {width:100%; grid-gap: 2.5rem;}
	.container p {margin: 1.5rem 0;}
	
}