html {font-size:100%;height:100%}
body {margin:0; font-size:1em;height:100%}
#loader {width:50px; height:50px; position:fixed; top:50%; left:50%;
margin-left:-25px; margin-top:-25px; display:block}
/* PAGE D'ACCUEIL */
.animationlogo {width:600px;position:fixed;top:50%;left:50%;margin-top:-169px;margin-left:-300px;z-index:9999}
.fondblanc {width:100%;height:100%;background-color:white;position:fixed;top:0;left:0;z-index:9998}
.animationScroll {visibility:hidden}
#nonvisible {visibility:hidden;height:100%}
.animationvideo {width:1300px;margin-left: auto;margin-right:auto;margin-top:100px;position:relative;z-index:700}
#pagetype {display:none}
#page {width:1300px; margin-bottom:200px;z-index: 1; position:relative;
margin-left:auto; margin-right:auto}
#bandeau{background-color: white; width :100%;position:fixed;top:0px; left:0px;z-index:10}
#logo{width:250px;margin-left:auto; margin-right: auto;display:block;position:relative;z-index:500}
#logo img{width:100%}
#menuburger {width:50px;left:50%;margin-left:600px; margin-top:50px;top:10px;display:block;cursor:pointer;z-index:650;position:fixed}
#menu {width:100%;display:block}
#slide{width:1300px;margin-left: auto;margin-right:auto;margin-top:20px;position:relative; overflow:hidden;z-index:600;background-color:white}
#slide2{width:1300px;margin-left: auto;margin-right:auto;margin-top:12%;position:relative; overflow:hidden;z-index:700}
#slidevideo{width:1300px;margin-left: auto;margin-right:auto;margin-top: 10px;position:relative; overflow:hidden;z-index:700;background-color:none;margin-bottom:6%}
.mesimages {width:100%; z-index:10; visibility:hidden;
display:block; position:absolute;
top:0%; left:0%}
.mesimages2 {width:100%; z-index:10; visibility:hidden;
display:block; position:absolute;
top:0%; left:0%}
.mespropositions {position:absolute; z-index:11; bottom:100px; left:100px; background-color:#FFFFFF; color:#000000; padding:20px; font-size:1.5em; visibility:hidden;color: black; font-family: 'preconnect', sans-serif; font-weight:500}
#imageintro{width:100%;z-index: 10;visibility:hidden}
#imageintro2{width:100%;z-index: 10;visibility:hidden}
#cadreprecedent{position:absolute; background-color: gainsboro;width:100px;left:30px;top:50%;z-index:11;visibility: visible;cursor:pointer;opacity:0.7;margin-top:-50px}
#precedent{width:100%;display:block}
#cadresuivant{position:absolute; z-index:11;width:100px;right:30px; cursor:pointer;background-color: gainsboro;top:50%;display:block;opacity:0.7;margin-top:-50px}
#suivant{width:100%;display:block}
#cadreprecedent2{position:absolute; background-color: gainsboro;width:100px;left:30px;top:50%;z-index:11;visibility: visible;cursor:pointer;opacity:0.7;margin-top:-50px}
#precedent2{width:100%;display:block}
#cadresuivant2{position:absolute; z-index:11;width:100px;right:30px; cursor:pointer;background-color: gainsboro;top:50%;display:block;opacity:0.7;margin-top:-50px}
#suivant2{width:100%;display:block}
#navigation{width:100%; background-color:white;margin-top:180px;position:relative;z-index:1}
#navigation a{font-size:1.5em; color: black; font-family: 'preconnect', sans-serif; font-weight:400;float:left;text-transform:uppercase;text-decoration:none}
#boutonapropo {width:33%;display:block; text-align: left}
#boutonportfolio {width:34%;display:block;text-align:center}
#boutoncontact {width:33%;display:block;text-align:right}
#boutonsupport {width:33%;display:block; text-align: center}
#boutondiagramme {width:34%;display:block;text-align:left}
#boutonbrand {width:33%;display:block; text-align: left}
#boutonartiste {width:34%;display:block;text-align:center}
#boutoncontactprojet {width:33%;display:block;text-align:right}
#boutonbd {width:33%;display:block; text-align: left}
#boutongrimoire {width:34%;display:block;text-align:center}
.retourligne {clear:both}
.mestitres {width:100%;margin-top:70px;margin-left:auto; margin-right:auto;display:block;text-align:center;font-size:1.5em; color: black; font-family: 'preconnect', sans-serif; font-weight:400;padding-top:200px}
/* PAGE A PROPOS */
#apropos {width:100%;margin-top:70px;margin-left:auto; margin-right:auto}
#maphoto {width:40%;float:left;margin-left:10%;margin-top:100px}
.monidentite {width:40%; text-align:center;font-size:1.5em;color: black; font-family: 'preconnect', sans-serif; font-weight:400; margin-bottom:0px;float:left;margin-left:10%;margin-top:100px}
/*#monom{font-weight:600}*/
#maprofession{margin-top: 10px}
#madate {margin-top:10px}
.montexte {width:40%; text-align:center;font-size:1.5em;color: black; font-family: 'preconnect', sans-serif; font-weight:400; margin-bottom:auto;float:left;margin-left:10%;margin-top:160px}
.retourligne {clear:both}
/* PAGE DE PORTFOLIO */
#portfolio {margin-top:70px;margin-left:auto; margin-right:auto;width:34%}
.retourligne {clear:both}
.monlien {width:410px;display:block;float:left;margin-bottom: 35px;border-color:black}
.monimage {width:410px;display:block; visibility:visible;margin-top: 20px}
.avecmarge {margin-right:35px; margin-left:35px}
.retourligne {clear:both}
/* PAGE DE CONTACT */
#contact {width:100%;margin-top:70px;margin-left:auto; margin-right:auto;width:34%}
.mescoordonnees {margin-top:100px;width:30%;font-size:1.5em; color: black; font-family: 'preconnect', sans-serif; font-weight:400;margin-bottom: 100px;text-decoration:none}
#mail{text-align: left;margin-left:13%;float:left}
#telephone{background-color:white;text-align: right;float:left;right:50%;margin-left:13%}
#barrenoire {width:100%;height:600px;background-color: black;z-index:9;display:block}
#reseauxinterieur {width:1550px;margin-right:auto;margin-left:auto}
.reseaux{width:85px;margin-top:120px;margin-bottom: 60px; display:block;float:left;margin-left:172px;margin-right:172px;z-index:11}
.monreseau {width:100%; display:block}
.retourligne {clear:both}
.survol {position:relative;width:410px;display:block}
.survol img{position : relative;width:100%;z-index:9}
.survol div{position:absolute;bottom:10px;z-index:10;background-color:white; padding-bottom:20px;padding-top:20px;padding-left:20px;width:390px;display:block;font-size:1.5em; color: black; font-family: 'preconnect', sans-serif; font-weight:400;float:left;text-transform:uppercase;text-decoration:none;visibility:hidden;background-color:white}
/* PAGE DE LATE AM */
.mestitresnavigation {width:90%;display:block;text-align:left;font-size:1.5em; color: black; font-family: 'preconnect', sans-serif; font-weight:400;margin-top:4%;padding-bottom:3%}
.mestitresnavigationlateam {width:90%;display:block;text-align:left;font-size:1.5em; color: black; font-family: 'preconnect', sans-serif; font-weight:400}
#navigationportfolio {width:100%;margin-left:auto; margin-right:auto}
.montextelabel {width:425px; display:block;text-align:left;font-size:1.2em;color: black; font-family: 'preconnect', sans-serif; font-weight:400; margin-bottom:auto;float:left;margin-left:auto}
.monimagecarre {width:325px;float:left;margin-bottom: 35px;border-color:black;margin-top:1%;margin-left:8.5%; margin-right:auto}
.retourligne {clear:both}
.monimagelabel {width:45%;float:left;margin-bottom: 35px;border-color:black;margin-top:70px}
.avecmarge2 {margin-right:10%}
#albertimage {width:45%;float:left;display:block; margin-right:10%;margin-top:70px;margin-bottom:160px}
.monimagealbert{width:100%;margin-bottom:17px}
.retourligne {clear:both}
#pagebis {width:1300px; margin-bottom:200px; position:relative;
margin-left:auto; margin-right:auto;visibility: visible}
#barrenoire3 {width:100%;height:600px;background-color: black;z-index:9;display:block;margin-top:30%}
/* PAGE DE L'ECCLESIASTE */
.montexteecclesiaste {width:100%;display:block;text-align:left;font-size:1.2em;color: black; font-family: 'preconnect', sans-serif; font-weight:400; margin-bottom:auto;float:left;margin-left:auto;margin-top:1%}
#imageecclesiaste {width:100%;z-index: 10;visibility:visible;margin-top:3%;margin-bottom:8%}
#imageecclesiaste2 {width:100%;z-index: 10;visibility:visible;margin-top:14%}
#navigationportfolioecclesiaste{width:100%;bottom:0px;margin-left:auto; margin-right:auto;margin-top:20%}
.montexteecclesiaste2 {width:50%; display:block;text-align:left;font-size:1.2em;color: black; font-family: 'preconnect', sans-serif; font-weight:400; margin-bottom:12%;float:left;margin-left:auto;margin-top:1%;margin-right:65px}
.monimageecclesiaste {width:45%;float:left;margin-bottom: 35px;border-color:black;margin-top:-1%}
.projetsuivant{width:60%;margin-top:70px;margin-left:auto; margin-right:auto;display:block;text-align:center;font-size:1.5em; color: white; font-family: 'preconnect', sans-serif; font-weight:400;padding-top:200px;text-decoration:none;z-index:10;margin-right:5%}
#barrenoire2 {width:100%;height:600px;background-color: black;z-index:9;display:block;margin-top:10%}
.avecmarge3 {margin-left:75px}
/* PAGE DE SALOPETTE */
#imagesalopette {width:100%;z-index: 10;visibility:visible;margin-top:0%;margin-bottom:8%}
.mestitresnavigationsalopette {width:90%;display:block;text-align:left;font-size:1.5em; color: black; font-family: 'preconnect', sans-serif; font-weight:400;padding-top:20%;margin-bottom:10%}
#logosalopette {width:55%;display:block; float:right;margin-right:auto;margin-left:10%}
.monlogosalopette{width:100%;margin-left:10%;padding-bottom:14%}
.montextesalopette {width:425px; display:block;text-align:left;font-size:1.2em;color: black; font-family: 'preconnect', sans-serif; font-weight:400; margin-bottom:4%;float:left;margin-left:auto;margin-top:1%}
.retourligne {clear:both}
/* PAGE DE BIOSENT */
.montextebiosent {width:425px; display:block;text-align:left;font-size:1.2em;color: black; font-family: 'preconnect', sans-serif; font-weight:400; margin-bottom:auto;float:right;margin-left:auto}
.monimagecarrebiosent {width:325px;float:left;margin-bottom: 35px;border-color:black;margin-top:1.5%;margin-left:auto; margin-right:8.5%}
/*PAGE DE POP KOMBUCHA*/
.montextepop {width:425px; display:block;text-align:left;font-size:1.2em;color: black; font-family: 'preconnect', sans-serif; font-weight:400; margin-bottom:auto;float:right;margin-left:auto;margin-top:6%}
/* mon code pour ecrans */
@media screen and (max-width: 1350px) { /*DEUXIEME VERSION - INTERMEDIAIRE*/
/* PAGE D'ACCUEIL */
#page {width:960px; margin-bottom:150px}
#logo{width:200px}
#menuburger {width:50px;left:88%;margin-left:0%; margin-top:50px;top:10px}
#slide{width:960px}
#slide2{width:960px}
#slidevideo{width:960px}
.animationvideo{width:960px}
.mespropositions {bottom:100px; left:100px; padding:20px; font-size:1.5em}
#cadreprecedent{width:70px;left:30px;margin-top:-35px}
#cadresuivant{width:70px;right:30px;margin-top:-35px}
#cadreprecedent2{width:70px;left:30px;margin-top:-35px}
#cadresuivant2{width:70px;right:30px;margin-top:-35px}
#navigation{margin-top:180px}
#navigation a{font-size:1.5em}
.mestitres {margin-top:70px;font-size:1.5em;padding-top:200px}
/* PAGE A PROPOS */
#apropos {margin-top:70px}
#maphoto {width:40%;float:left;margin-left:10%;margin-top:70px}
.monidentite {margin-top:72px;margin-left:5%}
/*#monom{font-weight:600}*/
#maprofession{margin-top: 10px}
#madate {margin-top:10px}
.montexte {font-size:1.3em;color: black; font-family: 'preconnect', sans-serif; font-weight:400; margin-bottom:auto;float:left;margin-left:5%;margin-top:100px}
.retourligne {clear:both}
/* PAGE DE PORTFOLIO */
#portfolio {margin-top:190px;margin-bottom:20px;width:34%}
.retourligne {clear:both}
.monlien {width:320px;display:block;float:left;margin-bottom: 10px;border-color:black;margin-right:7%;margin-left:7%}
.monimage {width:100%;display:block; visibility:visible}
.retourligne {clear:both}
/* PAGE DE CONTACT */
#contact {width:100%;margin-top:70px;margin-left:auto; margin-right:auto;width:34%}
.mescoordonnees {margin-top:100px;width:30%;font-size:1.5em; color: black; font-family: 'preconnect', sans-serif; font-weight:400;margin-bottom: 100px}
#mail{text-align: left;margin-left:13%;float:left}
#telephone{background-color:white;text-align: right;float:left;right:50%;margin-left:13%}
#barrenoire {width:100%;height:600px;background-color: black;z-index:9;display:block}
#reseauxinterieur {width:980px}
.reseaux{width:85px;margin-top:100px;margin-bottom: 60px; display:block;float:left;margin-left:125px;margin-right:100px}
.monreseau {width:100%; display:block}
.retourligne {clear:both}
/* PAGE DE LATE AM */
.mestitresnavigation {width:100%;display:block;text-align:left;font-size:1.2em; color: black; font-family: 'preconnect', sans-serif; font-weight:400;margin-top:7%;margin-bottom:auto}
.montextelabel {width:100%; display:block;text-align:center;font-size:1.2em;color: black; font-family: 'preconnect', sans-serif; font-weight:400; margin-bottom:auto;float:left;margin-left:auto;margin-top:10%}
.monimagecarre {width:40%;margin-bottom: 35px;border-color:black;margin-top:10%;margin-left:8.5%; margin-right:auto}
.monimagelabel {width:45%;float:left;margin-bottom: 35px;border-color:black;margin-top:70px}
.avecmarge2 {margin-right:10%}
#albertimage {width:45%;float:left;display:block; margin-right:10%;margin-top:70px;margin-bottom:160px}
.monimagealbert{width:100%;margin-bottom:17px}
.retourligne {clear:both}
.projetsuivant{padding-top:15%;margin-right:-7%}
#barrenoire3 {width:100%;height:600px;background-color: black;z-index:9;display:block;margin-top:50%}
/*PAGE DE L'ECCLESIASTE */
.montexteecclesiaste {width:100%;margin-bottom:10%}
#imageecclesiaste {width:100%;float:none;margin-bottom: 35px;border-color:black;margin-top:10%}
#imageecclesiaste2 {width:100%;float:none;margin-bottom: 35px;border-color:black;margin-top:10%}
#navigationportfolioecclesiaste{width:100%;bottom:0px;margin-left:auto; margin-right:auto;margin-top:20%}
.montexteecclesiaste2 {width:100%;margin-bottom:10%}
.monimageecclesiaste {width:100%;float:none;margin-bottom: 35px;border-color:black;margin-top:10%}
.avecmarge3 {margin-left:auto}
/* SALOPETTE */
.montextesalopette {width:100%}
#logosalopette{width:100%;display:block; margin-right:auto;margin-top:auto;margin-bottom:auto;margin:0%}
.monlogosalopette{width:100%;margin:0;margin-bottom:17px}
.mestitresnavigationsalopette {width:90%;display:block;text-align:left;font-size:1.5em; color: black; font-family: 'preconnect', sans-serif; font-weight:400;padding-top:20%;margin-bottom:10%}
.montextebiosent {width:100%; display:block;text-align:center;font-size:1.2em;color: black; font-family: 'preconnect', sans-serif; font-weight:400; margin-bottom:auto;float:left;margin-left:auto;margin-top:10%}
.monimagecarrebiosent {width:40%;margin-bottom: 35px;border-color:black;margin-top:10%;margin-left:8.5%; margin-right:auto}
.retourligne {clear:both}
@media screen and (max-width: 980px) { /*VERSION MOBILE*/
/* mon code pour mobile */
/* PAGE D'ACCUEIL*/
#page {width:90%; margin-bottom:200px}
#pagebis {width:100%; margin-bottom:200px}
#bandeau{background-color: white; width :100%;position:fixed;top:0px; left:0px;z-index:10}
#logo{width:185px;margin-left:auto; margin-right: auto;display:block}
#logo img{width:100%}
#menuburger {width:35px;left:88%;margin-left:0%; margin-top:20px;top:15px;display:block;cursor:pointer;z-index:600;position:fixed}
#menu {width:100%;display:block}
#slide{width:100%;margin-left: 0;margin-right:0;margin-top: 2px;position:relative; overflow:hidden}
#slide2{width:100%;margin-left: 0;margin-right:0;margin-top: 2px;position:relative; overflow:hidden}
#slidevideo{width:100%;margin-left: 0;margin-right:0;margin-top: 2px;position:relative; overflow:hidden}
.animationvideo{width:100%;margin-bottom:40%;margin-top:0%}
.mesimages {width:100%; z-index:10; visibility:visible;
display:block; position:absolute;
top:0%; left:0%}
.mespropositions {position:absolute; bottom:5%; left:2%; background-color:#FFFFFF; color:#000000; padding:3%; font-size:1.2em; visibility:hidden;color: black; font-family: 'preconnect', sans-serif; font-weight:500}
#imageintro{width:100%;z-index:10;visibility:hidden}
#cadreprecedent{position:absolute; background-color: gainsboro;width:25px;left:10px;top:60%;z-index:11;visibility: visible;cursor:pointer;opacity:0.7;margin-bottom:-320px}
#precedent{width:100%;display:block}
#cadreprecedent2{position:absolute; background-color: gainsboro;width:25px;left:10px;top:50%;z-index:11;visibility: visible;cursor:pointer;opacity:0.7;margin-top: -12px}
#precedent2{width:100%;display:block}
#cadresuivant{position:absolute; z-index:11;width:25px; cursor:pointer;background-color: gainsboro;top:60%;display:block;opacity:0.7;right:10px}
#suivant{width:100%;display:block}
#cadresuivant2{position:absolute; z-index:11;width:25px;right:10px; cursor:pointer;background-color: gainsboro;top:0%;display:block;opacity:0.7}
#suivant2{width:100%;display:block}
#navigation{width:100%; background-color:white;margin-top:150px}
#navigation a{font-size:1.1em; color: black; font-family: 'preconnect', sans-serif; font-weight:400;float:left;text-transform:uppercase;text-decoration:none}
#boutonapropo {width:33%;display:block; text-align: left}
#boutonportfolio {width:34%;display:block;text-align:center}
#boutoncontact {width:33%;display:block;text-align:right}
.retourligne {clear:both}
.mestitres {width:100%;margin-top:125px;font-size:1.1em; font-weight:400;padding-top:150px}
/* PAGE A PROPOS */
#apropos {width:100%}
#maphoto {width:40%;margin-left:30%;margin-right:30%;margin-top:20px}
.monidentite {width:40%;font-size:1.1em;font-weight:400; margin-bottom:0px;margin-left:30%;margin-top:45px;margin-right:30%}
/*#monom{font-weight:600}*/
#maprofession{margin-top: 10px;text-align: center}
#madate {margin-top:10px}
.montexte {width:100%; text-align:center;font-size:1.1em;color: black; font-family: 'preconnect', sans-serif; font-weight:300;margin-left:auto;margin-right:auto;margin-top:45px}
.retourligne {clear:both}
/* PAGE DE PORTFOLIO */
#portfolio {margin-bottom:20px;width:34%}
.retourligne {clear:both}
.monlien {width:90%;display:block;float:none;margin-bottom: 10px;border-color:black;margin-right:auto;margin-left:auto}
.monimage {width:100%;display:block; visibility:visible}
.survol {position:relative;width:100%;display:block}
.survol div{display:none}
.retourligne {clear:both}
/* PAGE DE CONTACT */
#contact {width:100%;margin-top:70px;margin-left:auto; margin-right:auto;width:34%;margin-bottom: 5%}
.retourligne {clear:both}
.mescoordonnees {width:30%;font-size:1.1em; margin-bottom: 40px;text-align:center}
#mail{float:none;width:100%;margin:0;display:inline-block;text-align: center;margin-top: 10%}
.retourligne {clear:both}
#telephone{width:100%;margin:0;display:inline-block;text-align: center;margin-top: 10%}
#barrenoire {width:100%;height:50%;background-color: black;z-index:9;display:block;margin:auto;margin-right:auto}
#reseauxinterieur {width:100%;margin-left: 0%;margin-right:10%;margin-top: 5%}
.reseaux{width:10%;margin-top:7%;margin-bottom:7%; display:block;float:left;margin-left:22%;margin-right:15%;margin-top:10%}
.monreseau {width:100%; display:block}
.retourligne {clear:both}
/*LATE AM */
#albertimage {width:100%; margin-right:10%;margin-top:30px;margin-bottom:5%;float:none}
.monimagealbert{width:100%;margin-bottom:1%}
.monimagelabel {width:100%;float:none;margin-bottom: 1%;border-color:black;margin-top:10%}
.avecmarge2 {margin-right:10%}
.sanstop {margin-top:0%}
.montextelabel {width:100%; display:block;text-align:left;font-size:1.2em;color: black; font-family: 'preconnect', sans-serif; font-weight:400; margin-bottom:auto;float:left;margin-left:auto;margin-top:10%}
.monimagecarre {width:100%;float:none;margin-bottom: 35px;border-color:black;margin-top:20px;margin-left:auto; margin-right:auto}
#slide{width:100%;margin-left: auto;margin-right:auto;margin-top: 10px;position:relative; overflow:hidden;z-index:800;background-color:white;margin-bottom:20%}
#slide2{width:100%;margin-left: auto;margin-right:auto;margin-top: 15%;position:relative; overflow:hidden;z-index:800;margin-bottom:12%}
#slidevideo{width:100%;margin-left: auto;margin-right:auto;margin-top: 0%;position:relative; overflow:hidden;z-index:800;margin-bottom:12%}
.retourligne {clear:both}
#cadresuivant2{top:59%}
.projetsuivant{padding-top:12%;margin-right:10%;width:40%}
#barrenoire3 {width:100%;height:50%;background-color: black;z-index:9;display:block;margin:auto;margin-right:auto}
/* PAGE DE L'ECCLESIASTE */
.montexteecclesiaste {width:100%;margin-bottom:10%}
#imageecclesiaste {width:100%;float:none;margin-bottom: 35px;border-color:black;margin-top:10%}
#imageecclesiaste2 {width:100%;float:none;margin-bottom: 35px;border-color:black;margin-top:10%}
#navigationportfolioecclesiaste{width:100%;bottom:0px;margin-left:auto; margin-right:auto;margin-top:20%}
.montexteecclesiaste2 {width:100%;margin-bottom:10%}
.monimageecclesiaste {width:100%;float:none;margin-bottom: 35px;border-color:black;margin-top:10%}
.avecmarge3 {margin-left:auto}
.monimagecarrebiosent {width:100%;float:none;margin-bottom: 35px;border-color:black;margin-top:20px;margin-left:auto; margin-right:auto}
#barrenoire2 {width:100%;height:250px;background-color: black;z-index:9;display:block;margin-top:50%}
.montextebiosent {margin-top:10%}
}