/*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: #020202;
	z-index: -1000;
	animation-name: background;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}

@keyframes intro {
    7% {left:0vw;top:10vh;opacity: 0;}
    10% {left:0vw;top:5vh;opacity: 1;}
    100% {left:0vw;top:5vh;opacity: 1;}
}

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

@keyframes texte {
    12% {left:0vw;top:18vh;opacity: 0;transform: scale(2);}
    15% {left:0vw;top:18vh;opacity: 1;transform: scale(1);}
    100% {left:0vw;top:18vh;opacity: 1;transform: scale(1);}
}

.pastille {
	position: absolute;
	display: block;
	top: 18vh;
	left:0vw;
	opacity: 0;
	width:100vw;
	animation-name: texte;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}

@keyframes zoom {
    20% {transform: scale(3);opacity: 0;}
    22% {transform: scale(1);opacity: 1;}

    40% {transform: scale(1);opacity: 1;}
    41% {transform: scale(1.3);opacity: 0.7;}
    42% {transform: scale(1);opacity: 1;}
    43% {transform: scale(1.3);opacity: 0.7;}
    44% {transform: scale(1);opacity: 1;}

    60% {transform: scale(1);opacity: 1;}
    61% {transform: scale(1.3);opacity: 0.7;}
    62% {transform: scale(1);opacity: 1;}
    63% {transform: scale(1.3);opacity: 0.7;}
    64% {transform: scale(1);opacity: 1;}

    100% {transform: scale(1);opacity: 1;}
}

/*.offres {
	position: absolute;
	display: block;
	top: 22vh;
	transform: scale(3);
	opacity: 0;
	width:90vw;
	margin: 0 5vw 0 5vw;
    animation-name: zoom;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}*/

@keyframes bouton {
    0% {left:0vw;opacity: 0;}
    43% {left:0vw;opacity: 0;}
    48% {left:0vw;opacity: 1;}
    100% {left:0vw;opacity: 1;}
}

.btn {
	position: absolute;
	display: block;
	left: 0vw;
	bottom: 22vh;
	width:100vw;
	opacity: 0;
	animation-name: bouton;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
    animation-duration: 10s;
}



/* FOOTER */

.url {
	position: absolute;
	left: 7vw;
	bottom: 90px;
	height:6vh;
	max-width: 60vw;
}

.logo {
	position: absolute;
	right: 7vw;
	bottom: 90px;
	height:7vh;
	max-width: 20vw;
}



/* 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;
}