/* __________________ */
/* __________________ */
/* P A G E   H T M L  */
/* __________________ */
/* __________________ */
html,
body {position:relative; margin: 0; height: 100%; width: 100%; overflow: hidden; font-family: 'Lato', 'Helvetica', 'Arial', sans-serif; font-size: 15px;}

section {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh;}

#homeanim {position: relative; width: 100%; overflow: hidden; height: 420px;}

/* __________________ */
/* éléments extérieurs aux trucs */
.casque {position: absolute; top: 50%; left: 50%; width: 120px; margin: -360px 0 0 -60px;}

.toptext {text-transform: uppercase; font-size: 17px; letter-spacing: 2px; text-align: center; display: block; width: 96%; position: absolute; top: 0; left: 2%;}
.toptext span.txtleft{float: left;}
.toptext span.txtright{float: right;}
.mindes {text-transform: uppercase; font-size: 18px; letter-spacing: 3px; text-align: center; display: block; width: 3000px; height: 44px; overflow: hidden; }

/* __________________ */
/* tagline ++ */
.tagline {width: 650px; margin: 0 auto; position: relative; margin-top: -30px;}
.tagline:before{content:""; height: 2px; width: 100vw; left: 50%; margin-left: -50vw; background-color: black; opacity: 0.2; position: absolute; top: 35px; z-index: -2;}
.tagline:after {content:"";  height: 2px;margin: 0 auto; width: 350px;  opacity: 1; position: absolute; top: 35px; z-index: -1;
        background: rgb(0,0,0); /* Old browsers */
		background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(255,255,255,1) 50%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(255,255,255,1) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */}
.tagline img {z-index: 1; position: relative; padding: 0 5%; background-color:  white; width: 90%;}

/* __________________ */
/* Logo central */
.flip_logo {width: 300px; height: 300px; position: absolute; z-index: 20; left:50%; margin-left: -150px; top: 50%; margin-top: -150px; opacity: 1; border-radius: 100%;}

.logo_light {width: 94%; height: 94%; margin: 3%; position: absolute; top: 0; left: 0; z-index: 25; opacity: 1; border-radius: 100%;
		background: -moz-linear-gradient(left, rgba(255,255,255,0) -50%, rgba(255,255,255,1) 250%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, rgba(255,255,255,0) -50%,rgba(255,255,255,1) 250%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, rgba(255,255,255,0) -50%,rgba(255,255,255,1) 250%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
	}

.logo_round {width: 300px; height: 300px; background-color: black; position: absolute; z-index: 10; left:50%; margin-left: -150px; top: 50%; margin-top: -150px; opacity: 1;
        border-radius: 100%;
        background: rgb(0,0,0); /* Old browsers */
		background: -moz-linear-gradient(left,  rgba(190,190,190,1) 25%, rgba(235,235,235,1) 51%, rgba(190,190,190,1) 75%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(190,190,190,1) 25%,rgba(235,235,235,1) 51%,rgba(190,190,190,1) 75%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(190,190,190,1) 25%,rgba(235,235,235,1) 51%,rgba(190,190,190,1) 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */}

.white_round {width: 296px; height: 296px; background-color: white; position: relative; z-index: 3; margin: 2px; border-radius:100%;}

/* __________________ */
/* les lignes */
/* communs aux lignes */
.line {background-color: lightgray; height: 2px; position: absolute; top:50%; z-index:0; opacity: 1; overflow: hidden;}

/* LEFT LINES */
.line_l,
.line_l_ext,
.line_l_int{height: 2px; width: 40%; z-index:1; position: absolute; left: 0%; opacity: 1;
		background: rgb(0,0,0); /* Old browsers */
		background: -moz-linear-gradient(left,  rgba(0,0,0,0) 12%, rgba(255,255,255,1) 51%, rgba(0,0,0,0) 91%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 12%,rgba(255,255,255,1) 51%,rgba(0,0,0,0) 91%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(0,0,0,0) 12%,rgba(255,255,255,1) 51%,rgba(0,0,0,0) 91%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */}

.line_l_back {width: 30%;}

.line_l_back2 {margin-top: -100px; width: 45%; left:5%}

.line_l_back3 {margin-top: 100px; width: 45%; left: 5%}

.line_l_back4 {margin-top: -200px; width: 50%; margin-left: -108px;}
.line_l_back5 {margin-top: -147px; width: 150px; left: 50%; margin-left: -130px;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);}

.line_l_back6 {margin-top: 200px; width: 50%; margin-left: -108px;}
.line_l_back7 {margin-top: 147px; width: 150px; left: 50%; margin-left: -130px;
        -ms-transform: rotate(-45deg); /* IE 9 */
        -webkit-transform: rotate(--45deg); /* Chrome, Safari, Opera */
        transform: rotate(-45deg);}

/* RIGHT LINES */
.line_r,
.line_r_ext,
.line_r_int {height: 2px; width: 40%; z-index:1; position: absolute; right: 0%; opacity: 1;
		background: rgb(0,0,0); /* Old browsers */
		background: -moz-linear-gradient(left,  rgba(0,0,0,0) 12%, rgba(255,255,255,1) 51%, rgba(0,0,0,0) 91%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 12%,rgba(255,255,255,1) 51%,rgba(0,0,0,0) 91%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(0,0,0,0) 12%,rgba(255,255,255,1) 51%,rgba(0,0,0,0) 91%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */}

.line_r_back {right: 0;width: 30%;}

.line_r_back2 {margin-top: -100px; margin-left: 50%; width: 45%;}

.line_r_back3 {margin-top: 100px; margin-left: 50%; width: 45%;}

.line_r_back4 {margin-top: -200px; width: 50%; margin-left: 50%; left: 111px}
.line_r_back5 {margin-top: -147px; width: 150px; left: 50%; margin-left: -17px;
        -ms-transform: rotate(-45deg); /* IE 9 */
        -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
        transform: rotate(-45deg);}

/* Ronds sur lignes */
.line_round {position: absolute; background-color: white; border: 2px solid lightgrey; width: 40px; height: 40px; border-radius: 100%; top:50%; }
.lr_left {margin-top: -20px; margin-left: 30%}
.lr_right {margin-top: -20px; right: 30%}
.lr_top_right {margin-top: -120px; left: 5%;}
.lr_top_left {margin-top: -120px; right: 5%}
.lr_bottom_right {margin-top: 80px; left: 5%}
.lr_bottom_left {margin-top: 80px; right: 5%}

.fleche {left: 50%; margin-left: -20px; z-index: 30; bottom: 70px; top: auto;
        background-image: url(facebook.svg);
        background-repeat:no-repeat;
        background-position:center center;
        background-size: 50%;}
.fleche:after {content:""; height: 70px; width: 2px;  background-color: lightgray; position: absolute; z-index: -2; left: 50%; top: 40px;}

/* __________________ */
/* __________________ */
/* A N I M A T I O N S */
/* __________________ */
/* __________________ */

/* flash de lumière gauche */
.line_l{animation-delay: 0s; animation-duration: 2s; animation-name: grad-left; animation-iteration-count: infinite; animation-timing-function: linear;}
@keyframes grad-left {
    0% {left: -100%;}
    100% {left: 100%;}
}

/* flash de lumière droite */
.line_r{animation-delay: 0s; animation-duration: 2s; animation-name: grad-right; animation-iteration-count: infinite; animation-timing-function: linear;}
@keyframes grad-right {
    0% {right: -100%;}
    100% {right: 100%;}
}

/* flash de lumière gauche/normal */
.line_l_ext{animation-delay: 0s; animation-duration: 3s; animation-name: grad-left-ext; animation-iteration-count: infinite; animation-timing-function: linear;}
@keyframes grad-left-ext {
    0% {left: -100%;}
    66% {left: 100%;}
    100% {left: 100%;}
}

/* flash de lumière gauche/penchée */
.line_l_int{animation-delay: 0s; animation-duration: 3s; animation-name: grad-left-int; animation-iteration-count: infinite; animation-timing-function: ease-out;}
@keyframes grad-left-int {
    0% {left: -100%;}
    50% {left: -100%;}
    100% {left: 100%;}
}

/* flash de lumière droite/normal */
.line_r_ext{animation-delay: 0s; animation-duration: 3s; animation-name: grad-right-ext; animation-iteration-count: infinite; animation-timing-function: linear;}
@keyframes grad-right-ext {
    0% {right: -100%;}
    66% {right: 100%;}
    100% {right: 100%;}
}

/* flash de lumière droite/penché */
.line_r_int{animation-delay: 0s; animation-duration: 3s; animation-name: grad-right-int; animation-iteration-count: infinite; animation-timing-function: ease-out;}
@keyframes grad-right-int {
    0% {right: -100%;}
    50% {right: -100%;}
    100% {right: 100%;}
}

/* tagline */
.tagline:after{animation-delay: 0s; animation-duration: 3.5s; animation-name: tagline; animation-iteration-count: infinite; animation-timing-function: linear;}
@keyframes tagline {
    0% {left: -100vw;}
    100% {left: 100vw;}
}

/* flash ligne autour logo */
.logo_round {animation: spin 4s linear infinite;}
@keyframes spin {
	100% {transform: rotate(360deg); }
}

/* rotation logo */
.flip_logo {animation-delay: 2s; animation-duration: 2.5s; animation-name: flip; animation-iteration-count: 1; animation-fill-mode: forwards; animation-timing-function: ease;}
@keyframes flip {
	0% { transform: rotateY(0deg);}
	100% { transform: rotateY(360deg);}
}

/* flash sur le logo */
.logo_light {animation-delay: 0; animation-duration: 2s; animation-name: light; animation-iteration-count: 1; animation-fill-mode: forwards; animation-timing-function: linear;}
@keyframes light {
	0% { transform: rotate(180deg); opacity: 0;}
	50% {opacity: 0.7;}
	100% { transform: rotate(-580deg); opacity: 0;}
}

/* animation de fade */
.fade {animation-delay: 0s; animation-duration: 0.5s; animation-name: fade; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; opacity: 0; }
@keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/* animation de fade qui monte */
.fadebottom {animation-delay: 0s; animation-duration: 0.5s; animation-name: fadebottom; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; opacity: 0; top: 30px;}
@keyframes fadebottom {
    0% {opacity: 0; top: 30px;}
    100% {opacity: 1; top: 0px;}
}

/* animation du sous titre */
.fadedes {animation-delay: 0s; animation-duration: 1.5s; animation-name: fadedes; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; opacity: 0; letter-spacing: 15px;}
@keyframes fadedes {
    0% {opacity: 0; letter-spacing: 15px;}
    100% {opacity: 1; letter-spacing: 3px;}
}

 /*  animation de fade qui descend (picto VR) */
.fadetop {animation-delay: 0s; animation-duration: 2s; animation-name: fadetop; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; opacity: 0; margin-top: -400px;}
@keyframes fadetop {
    0% {opacity: 0; margin-top; -400px;}
    32% {opacity: 1; margin-top: -360px;}
    80% {opacity: 1; margin-top: -360px; transform: scale(1);}
    87% {opacity: 1; margin-top: -360px; transform: scale(1.07);}
    95% {opacity: 1; margin-top: -360px; transform: scale(1);}
    100% {opacity: 1; margin-top: -360px;}
}

/* Paramètrage des delais d'attentes */
.delay0-5s {animation-delay: 0.5s;}
.delay1s {animation-delay: 1s;}
.delay1-5s {animation-delay: 1.5s;}
.delay2s {animation-delay: 2s;}
.delay2-5s {animation-delay: 2.5s;}
.delay3s {animation-delay: 3s;}
.delay3-5s {animation-delay: 3.5s;}
.delay4s {animation-delay: 4s;}
.delay5s {animation-delay: 5s;}

/* __________________________ */
/* __________________________ */
/* M E D I A    Q U E R I E S */
/* __________________________ */
/* __________________________ */

/* LARGEUR */
/* média queries pour écran plus petit que 1100px */
@media screen and (max-width: 1100px) {
    /* paramétrage des delais d'attentes */
    .delay3-5s {animation-delay: 1.8s;}
    .delay4s {animation-delay: 2.3s;}

    /* block non visible */
    .casque,
    .line,
    .line_round {display: none;}
}

/* média queries pour écran plus petit que 800px */
@media screen and (max-width: 800px) {
    .flip_logo {width: 260px; height: 260px; margin-left: -130px; margin-top: -130px; }
    .logo_round {width: 260px; height: 260px; margin-left: -130px; margin-top: -130px; }
    .white_round {width: 256px; height: 256px; margin: 2px}
    .tagline {width: 450px;}
    .mindes {font-size: 15px; letter-spacing: 2px; height: 80px;}
    .mindesmedia {display:block}
    .toptext {font-size: 15px;}
    .toptext span.txtleft{float: none; display: block;}
    .toptext span.txtright{float:none; display: block}
}

/* média queries pour écran plus petit que 500px */
/* pour mobile */
@media screen and (max-width: 500px) {
    #homeanim{width: 100%; height: auto;}
    .flip_logo {position:relative; width: 80%; max-width: 230px; margin: 15px auto; left: 0; height: auto;}
    .tagline {position:relative; width: 90%; margin: 0 auto;}
    .mindes {position:relative; font-size: 10px; letter-spacing: 0px; margin: 0 auto;}
    .toptext {position:relative; font-size: 13px; letter-spacing: 0px; margin: 0 auto; padding: 0 3%; width: 94%; left:0;}
    
    .delay3-5s {animation-delay: 1.8s;}
    .delay4s {animation-delay: 2.3s;}

    /* block non visible */
    .logo_light,
    .logo_round,
    .white_round,
    .tagline:after,
    .tagline:before{display: none;}
    }

/* HAUTEUR */
/* média queries pour écran plus petit que 800px */
@media screen and (max-height: 800px) {
    .toptext {z-index: 30;}
    
    /* block non visible */
    .casque, 
    .fleche {display: none;}
}

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

    #homeanim{height: auto;}
    .flip_logo {max-width: 230px; width:50%; max-height: 230px; position: relative; margin: 15px auto; left: auto;}
    .tagline {max-width: 500px; position: relative; margin: 0 auto;}

    .line,
    .line_round,
    .logo_light,
    .logo_round,
    .mindes{display: none;}
}

@media screen and (max-height: 380px) {

    .flip_logo {max-width: 120px; max-height: 120px;}
}