@CHARSET "UTF-8";

body, html {margin:0; padding:0; background:#fff;}
body {font-family: "poppins", sans-serif; font-weight:400; font-style: normal; line-height:1.4; color:#00000; font-size:1.3rem; background:#fff; overflow:hidden;}

.container a {color:#83BD4C; text-decoration: none; background-image: linear-gradient(#83BD4C, #83BD4C); background-position: bottom left; background-repeat: no-repeat; white-space: nowrap; 
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:#83BD4C;}
:focus, :hover {-webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
ul {padding-left: 0;}
li {list-style: none;}

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

.logo {width:300px; padding:5vh 8vw; position:relative; display:flex; justify-content:center; opacity:0; transform:translateY(5rem);
transition:opacity 1s cubic-bezier(.215,.61,.355,1), transform 1s cubic-bezier(.215,.61,.355,1);}
.logo img {width:100%; height:auto;}
.ready .logo {opacity:1; transform:none;}
.logo svg {width:350px;}
.st0 {fill: #83BD4C;}
.st2 {fill: #EA5B1E;}

.small {font-size:.9rem; padding-top:4.5vw;}

.liste {display:flex; flex-direction:column; grid-gap:1vw;}
.container {width:40%; text-align:center; display:flex; flex-direction:column; grid-gap: 1vw;}
.container h1 {font-size:2rem; font-weight:500; line-height:1.3;}
.container h1, .liste, .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 .liste, .ready .marsrouge {opacity:1; transform:none;}
.ready .container h1 {transition-delay:.2s;}
.ready .liste {transition-delay:.3s;}
.ready .marsrouge {transition-delay:.4s;}

.marsrouge {position:absolute; bottom:2rem; right:2rem;}
.marsrouge svg {fill:#3c2c37; transition:.3s; width:35px;}
.marsrouge:hover svg {fill:#83BD4C;}



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

	.logo {width:400px;}

}



@media screen and (max-width:1290px) {
	
	body {overflow-y:auto!important;}
	.logo {padding: 5vh 8vw 0 8vw;}
	.logo svg {width:250px;}
	.content {position:relative; justify-content: space-between; height:auto;}
	.container {width:70%; padding:0 8vw; grid-gap:6.5vw;}
	.container h1 {font-size:1.5rem; margin-top:3rem;}
	.marsrouge {position: relative; bottom: auto; right: auto; padding-bottom: 5vh; padding-top:6.5vw;}
	
}



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

	body {font-size: 1.2rem;}
	
}



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

	.container {width:80%;}
	.container a {display:inline-block; white-space: nowrap;}
	.container h1 {font-size:5vw;}
	body {font-size: 1rem;}
	
}