/*CSS FILE*/

* {padding:0 0 0 0;margin: 0 0 0 0; border: 0px;}

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

@keyframes background {
    0% {background-size: 120%;}
    100% {background-size: 100%;}
}

#bg {
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background: url('img/bg.jpg') no-repeat top center;
	background-size: 100%;
	background-color: #253237;
	z-index: -1000;
	animation-name: background;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}

@keyframes intro {
    7% {left:45vw;opacity: 0;}
    10% {left:4vw;opacity: 1;}
    100% {left:4vw;opacity: 1;}
}

.head1 {
	position: absolute;
	display: block;
	top: 5vh;
	left:20vw;
	opacity: 0;
	height:3.5vh;
	animation-name: intro;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}

@keyframes introdeux {
    7% {left:-20vw;opacity: 0;}
    10% {left:20vw;opacity: 1;}
    100% {left:20vw;opacity: 1;}
}

.head2 {
	position: absolute;
	display: block;
	top: 10vh;
	left:4vw;
	opacity: 0;
	height:3.5vh;
	animation-name: introdeux;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}

@keyframes past {
    22% {left:60vw;opacity: 0;}
    25% {left:5vw;opacity: 1;}
    100% {left:5vw;opacity: 1;}
}

.head3 {
	position: absolute;
	display: block;
	top: 14vh;
	left:20vw;
	opacity: 0;
	height:4vh;
	animation-name: introtrois;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}

@keyframes introtrois {
    7% {left:-20vw;opacity: 0;}
    10% {left:10vw;opacity: 1;}
    100% {left:10vw;opacity: 1;}
}


.pastille {
	position: absolute;
	display: block;
	top: 21vh;
	left:5vw;
	opacity: 0;
	height:9vh;
	animation-name: past;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}

@keyframes pastdeux {
    26% {left:50vw;opacity: 0;}
    30% {left:15vw;opacity: 1;}
    100% {left:15vw;opacity: 1;}
}

.pastille2 {
	position: absolute;
	display: block;
	top: 33vh;
	left:15vw;
	opacity: 0;
	height:9vh;
	animation-name: pastdeux;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}

@keyframes textun {
    50% {left:-25vw;opacity: 0;}
    53% {left:5vw;opacity: 1;}
    100% {left:5vw;opacity: 1;}
}

.texte1 {
	position: absolute;
	display: block;
	top: 75vh;
	left:5vw;
	opacity: 0;
	height:2vh;
	animation-name: textun;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}

@keyframes textdeux {
    52% {left:45vw;opacity: 0;}
    55% {left:15vw;opacity: 1;}
    100% {left:15vw;opacity: 1;}
}

.texte2 {
	position: absolute;
	display: block;
	top: 78vh;
	left:15vw;
	opacity: 0;
	height:2vh;
	animation-name: textdeux;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}

@keyframes texttrois {
    54% {left:-22vw;opacity: 0;}
    57% {left:8vw;opacity: 1;}
    100% {left:8vw;opacity: 1;}
}

.texte3 {
	position: absolute;
	display: block;
	top: 81vh;
	left:8vw;
	opacity: 0;
	height:2vh;
	animation-name: texttrois;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}

@keyframes flag {
    15% {opacity: 0;}
    30% {opacity: 1;}
    100% {opacity: 1;}
}

.logo {
	position: absolute;
	right: 0;
	top: 0;
	width:33vw;
	opacity: 0;
	animation-name: flag;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}

@keyframes trans {
	0% {opacity: 0;}
    5% {opacity: 0;}
    25% {opacity: 0.7;}
    100% {opacity: 0.7;}
}

.transparence {
	position: absolute;
	left: 0;
	top: 0;
	width:102vw;
	opacity: 0;
	animation-name: trans;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}



/* FOOTER */

.url {
	position: absolute;
	right: 7vw;
	bottom: 90px;
	height:2vh;
}



/* BOUCLE */

@keyframes transit {
    0% {opacity:1;}
    5% {opacity:0;}
    95% {opacity:0;}
    100% {opacity:1;}
}

.white {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	z-index: 10010;
	animation-name: transit;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}