@charset "UTF-8";



/* 4 large affichage HD */


@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&family=Dosis:wght@200;300;400;500;600&family=Orbitron:wght@400;500;600&family=Oswald:wght@200;300;400;500&display=swap');

@import url('https://db.onlinewebfonts.com/c/fbe20f6c42a52efdca315763a8cee03b?family=BC+Alphapipe+L');


@font-face {
  font-family: "BC Alphapipe L Regular";
  src: url("../fonts/BC Alphapipe L Regular.eot"); /* IE9*/
  src: url("../fonts/BC Alphapipe L Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("../fonts/BC Alphapipe L Regular.woff2") format("woff2"), /* chrome、firefox */
  url("../fonts/BC Alphapipe L Regular.woff") format("woff"), /* chrome、firefox */
  url("../fonts/BC Alphapipe L Regular.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("../fonts/BC Alphapipe L Regular.svg#BC Alphapipe L Regular") format("svg"); /* iOS 4.1- */
}



.demo {
    font-family:"BC Alphapipe L Regular" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

@media screen and (min-width: 1900px) {

    
    
    .thin { /* on crée une class pour assigner facilement la police avec une class */
	font-family: 'lato', Arial, Helvetica, Sans-Serif; 
	font-weight: normal;
	font-style: normal;
	  }

/* .ombre	{	pour creer un alo autour du texte en blanc  
        font-size: 60px;
        color: white;
        text-shadow:-1px 0px 2px red, 0px -1px 2px red, 1px 0px 2px red, 0px 1px 2px red;
      }*/

.ombre1 {   /* pour creer une ombre texte  */
        font-size: 60px;
        text-shadow: 4px 4px 5px #777;
      }

/* lien hypertexte normal */
a:link, a:visited { color: #9ba6bc; text-decoration: none; }
a:hover, a:active { color: #505c74 ; text-decoration: none; }

/* --- STYLES POUR LES BALISES HTML --- */
html, body { 
    width: 100%; 
    height: 100%;
    margin: 0 auto; 	
	padding: 0 auto; }

body { 
	margin: 0 auto; 	
	padding: 0 auto;  	
	 background-color: #fff;
	font-family: 'Dosis', sans-serif; 
	color: #000; 
	line-height: 1.5;
	font-size: 100%;	
    overflow-x: hidden;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
  }


p, ul, ol, li, td { 
	font-size: 1em; 	/* taille des textes par défaut */
	}
p, li { 
	margin-bottom: 0.75em;	/* marge sous chaque paragraphe */
	}
h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0.5em;	/* marge sous chaque titre */
	font-family: 'BC Alphapipe L Regular', Sans-Serif; 
	/* font-weight: bold;	paramètre à recopier de la fonte importée pour ne pas surengraisser */
	font-style: normal;	/* paramètre à recopier de la fonte importée pour ne pas italiser une @font italiséé par exemple  */
	line-height: 1.35;	/* les titres sont souvent à moins interligner optiquement */
	}

h1 { 
	font-family: 'BC Alphapipe L Regular', sans-serif;
    margin-bottom: 50px;
    margin-top: 50px;
    width: 100%;

	}



.triangle-haut-electra {
    position: absolute; 
    display : block;
    height : 0;
    width : 0;
    margin-top: -5%;
    margin-left: 35%;
    border-width: 360px 509px 0 250px;
	border-color: #e2b604 transparent transparent transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}


.triangle-code-electra {
    position: static; 
    display : block;
    height : 0;
    width : 0;
    border-right : 160vh solid transparent;
    border-bottom : 910px solid #256470; /*  #689aad */
    border-color: transparent transparent #256470 transparent;
    border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}

.triangle-code-electra-bis {
    position: absolute; 
    display : block;
    height : 0;
    width : 0;
    margin-top: 5.5%;
    margin-left: 54%;
    border-width: 0 0 810px 1100px;
	border-color: transparent transparent #268396 transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}


.iframe-electra {
    position: absolute;
    width: 600px;
    height: 400px;
    margin-top: -35%;
    margin-left: 5%;
    z-index: 999999999;
    padding: 5px;
    cursor: pointer;
}



.h1-electra {
    position: absolute;
    width: 1200px;
    height: auto;
    padding-top: 15px;
    left: 5%;
    padding-left: -600px;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    color: #EEBF00;
    margin-top: -30%;
    font-size: 7em;
    line-height: 1;
    opacity: 1;
    z-index: 9999999;
   
   
}

.h1-electra .span-contenu-prix {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 0.3em;
}

.h1-cv {
    position: absolute;
    width: 1200px;
    height: auto;
    padding-top: 15px;
    left: 5%;
    padding-left: -600px;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    color: #EEBF00;
    margin-top: -34%;
    font-size: 7.2em;
    line-height: 1;
    opacity: 1;
    z-index: 99999999;
   text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
   }
  
  .h1-cv .span-contenu-prix {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 0.3em;
  }

  .h6proj-electra-cv {
    position: absolute;
    width: 400px;
    height: auto;
    padding: 0;
    padding-left: 5%;
    margin-top: -12%;
    font-size: 1.5em;
    float: left;
    font-family: 'dosis', sans-serif;
    font-weight: 100;
    color: #dcf0f4;
     z-index: 99999999;
    }

.h6deco-moi-cv { 
    font-size: 1.6em;
    color: #505c74; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
    margin-top: 2%;
   text-align: justify;
   
    
    
     }
.h6deco-cv { 
    font-size: 1.8em;
    color: #505c74; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
    margin-top: 5%;
    padding-left: 8%;
    padding-right: 10%;
    text-align: justify;
    
     }
.h6deco-cv-bis { 
    font-size: 1.8em;
    color: #505c74; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
    margin-top: 2%;
   text-align: justify;
    padding-left: 8%;
    padding-right: 8%;
    
     }

#anim-page-templet-cv {opacity: 0;}
#anim-cv-immo-1 {opacity: 0;}
#anim-page-templet-cv-1 {opacity: 0;}
#anim-page-templet-cv-1-bis {opacity: 0;}
#anim-page-templet-cv-2 {opacity: 0;}
#anim-page-templet-cv-2-bis {opacity: 0;}

#anim-texte-cv {opacity: 0;}
#anim-cv-1 {opacity: 0;}
#anim-cv-2 {opacity: 0;}
#anim-cv-3 {opacity: 0;}
#anim-cv-4 {opacity: 0;}

iframe {
    margin: 0 auto;
    padding: 0 auto;
}

.iframe-cv-video {
width: 700px;
height: 450px;
margin-left: 5%;
}

.slide-video-cv {
    margin-top: 1%;
}

.trait-texte-cv {
  padding-right: 20px; 	
  border-right: 1px solid rgb(74, 68, 68);	
  }

.trait-texte-gauche-cv {
    padding-left: 20px;
    border-left: 1px solid rgb(74, 68, 68);
    }


.titre-moi-cv-1 {
margin: 0;
color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
font-size: 5em;
font-family: 'BC Alphapipe L Regular', sans-serif;
padding-top: 5%;
margin-bottom: 3%;
text-align: center;
text-transform: uppercase;
}

.titre-moi-cv {
margin: 0;
margin-top: 0%;
color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
font-size: 5em;
font-family: 'BC Alphapipe L Regular', sans-serif;
margin-bottom: 5%;
text-align: center;
text-transform: uppercase;
}





.h6-cv {
margin-bottom: 5%;
padding-top: 5%;
color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
font-size: 5em;
font-family: 'BC Alphapipe L Regular', sans-serif;
text-align: center;
text-transform: uppercase; 

}

.p-qui2-moi-cv {
font-size: 2.3em;
color:#1d2d4e;
line-height: normal;
font-family: 'dosis', sans-serif;
font-weight: 200;
margin-bottom: 10%;
margin-top: 5%;
padding-left: 5%;
padding-right: 5%;
}

.slide-cv-1 {
margin-left: 10%;
padding-bottom: 5%;
margin-top: 15%;
}

.slide-cv-2 {
padding-top: 3%;
padding-bottom: 5%;
}
.slide-cv-3 {
margin-top: 5%;
margin-bottom: 5%;
}
.slide-wrap {
margin-top: 5%;
}

.h6proj-electra {
    position: absolute;
    width: 700px;
    height: auto;
    padding: 0;
    padding-left: 5%;
    margin-top: -12%;
    font-size: 1.8em;
    float: left;
    font-family: 'dosis', sans-serif;
    font-weight: 100;
    color: #dcf0f4;
     z-index: 99999999;
    }



    
.h1-electra-qui-suis-je {
    position: absolute;
    width: 1400px;
    left: 5%;
    padding-left: -600px;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    color: #EEBF00;
    margin-top: -32%;
    font-size: 6.5em;
    line-height: 1;
    opacity: 1;
    z-index: 999999999;
    /*text-shadow: 4px 4px 5px #666;*/
   
}
.h1-electra-qui-suis-je .span-contenu-prix {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 0.5em;
}

.h1-page-deco-titre-deco {
    position: absolute;
    width: 1200px;
    left: 5%;
    padding-left: -600px;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    color: #EEBF00;
    margin-top: -30%;
    font-size: 6em;
    line-height: 1;
    opacity: 1;
    z-index: 99999999;
   
   
}
.h1-page-deco-titre-deco .span-contenu-prix {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 0.5em;
}
    
#prenom-page-contact {
    position: absolute; 
    width: 100%; 
    text-align: center;
    margin: 0; 
    padding:0; 
    top: 35%;
    color: #bbc3d8; 
    font-size: 6em; 
    font-family: 'Orbitron', sans-serif;
    font-weight: 100;
    opacity: 1;
    z-index: 13;
    }
    

    
.h2-page-contact-bis {
     padding: 0;
    padding-left: 5%;
    margin-top: 5%;
    font-size: 2.2em;
    float: left;
    font-family: 'dosis', sans-serif;
    font-weight: 100;
     color: #fff;
     z-index: 99999999;
    
    }
    
.h2-page-contact-bis-1 {
    padding: 0;
    padding-top: 5%;
    padding-left: 0%;
    font-size: 2.6em;
    float: left;
    font-family: 'dosis', sans-serif;
    font-weight: 100;
    color: #fff;
     z-index: 99999999;
    
    }
    
.fond-contact-contact {
        background-color: #6d8383;
    }

.fond-flex-box-1 { 
    background-color: #91a09f; 
    margin: 0;
    padding: 80px 80px 80px 80px;
} 

.h6proj-electra-qui-suis-je {
    position: absolute;
    width: 700px;
    height: auto;
    padding: 0;
    padding-left: 5%;
    margin-top: -12%;
    font-size: 1.8em;
    float: left;
    font-family: 'dosis', sans-serif;
    font-weight: 100;
    color: #dcf0f4;
     z-index: 99999999;
    }


.h6proj-page-amenagemnt {
    position: absolute;
    width: 700px;
    height: auto;
    padding: 0;
    padding-left: 5%;
    margin-top: -12%;
    font-size: 1.8em;
    float: left;
    font-family: 'dosis', sans-serif;
    font-weight: 100;
    color: #dcf0f4;
     z-index: 99999999;
    }
.superpose-electra {
	position: absolute;
    width: 200px;
    height: auto;
	top: 5%;		
    left: 50%;
    margin-left: -100px;
    cursor: pointer;
    z-index:999999;		
	}

.logo {
    transition: all 0.5s ease;
    cursor: pointer;
    }

.logo:hover { 
    transform: scale(1.1);
    }
    

    
.parent-home-staging {
  width: 781px;
  height: 484px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 195%;
  margin-left: 30%;
  overflow: hidden;
  position: absolute;
  -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  z-index: 9999;
}

.parent-deco {
  width: 781px;
  height: 484px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 156%;
  margin-left: 30%;
  overflow: hidden;
  position: absolute;
  -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  z-index: 9999;
}


.parent-conception {
    width: 781px;
    height: 484px;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  margin-top: 155%;
  margin-left: -390px;
  overflow: hidden;
  position: absolute;
  -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  z-index: 9999;
}

.parent-shopping {
  width: 781px;
  height: 484px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 255%;
  margin-left: 30%;
  overflow: hidden;
  position: absolute;
  -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  z-index: 9999;
}
   
.parent-cv {
  position: absolute;
  overflow: hidden;
  width: 781px;
  height: 484px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 435%;
  margin-left: 30%;
   -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  z-index: 9999;
}

    
    
svg {
  position: absolute;
  z-index: 1;
  width: 781px;
  height: 484px;
}

button {
  position: absolute;
  z-index: 50;
  width: 40px;
  overflow: hidden;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
}
button:focus {
  outline-width: 0;
}

circle {
  stroke: #fff;
  fill: none;
  transition: 0.3s;
}

#svg1 circle {
  transition-timing-function: linear;
    
   
}

#svg2 circle {
  transition-timing-function: linear;
   
}

#Capa_1 {
  position: absolute;
  width: 16px;
  height: 16px;
  transform: translate(-7px, -8px);
}

#Capa_2 {
  position: absolute;
  width: 16px;
  height: 16px;
  transform: translate(-9px, -8px);
}

.right {
  margin-left: 720px;
  margin-top: 230px;
  border: 1px solid #E8D8DC;
  background-color: transparent;
  transition: 0.5s;
}
.right:hover {
  background-color: #fff;
}

.left {
  margin-left: 0.5%;
  margin-top: 230px;
  border: 1px solid #E8D8DC;
  background-color: transparent;
  transition: 0.5s;
}
.left:hover {
  background-color: #fff;
}

.circle1 {
  transition-delay: 0.05s;
}

.circle2 {
  transition-delay: 0.1s;
}

.circle3 {
  transition-delay: 0.15s;
}

.circle4 {
  transition-delay: 0.2s;
}

.circle5 {
  transition-delay: 0.25s;
}

.circle6 {
  transition-delay: 0.3s;
}

.circle7 {
  transition-delay: 0.35s;
}

.circle8 {
  transition-delay: 0.4s;
}

.circle9 {
  transition-delay: 0.45s;
}

.circle10 {
  transition-delay: 0.05s;
}

.circle11 {
  transition-delay: 0.1s;
}

.circle12 {
  transition-delay: 0.15s;
}

.circle13 {
  transition-delay: 0.2s;
}

.circle14 {
  transition-delay: 0.25s;
}

.circle15 {
  transition-delay: 0.3s;
}

.circle16 {
  transition-delay: 0.35s;
}

.circle17 {
  transition-delay: 0.4s;
}

.circle18 {
  transition-delay: 0.45s;
}

.slide1 {
  background-image: url('../images/img-realisation-dordogne-1.jpg');
}

.slide2 {
  background-image: url('../images/img-realisation-2.jpg');
}

.slide3 {
  background-image: url('../images/img-realisation-3.jpg');
}

.slide4 {
  background-image: url('../images/img-realisation-4.jpg');
}

.slide1 , .slide2 , .slide3 , .slide4  {
  position: absolute;
  background-position: center;
  background-size: cover;
  color: #fff;
  font-size: 60px;
  padding-top: 200px;
  font-weight: 200;
  font-family: 'bc alphapipe l regular', sans-serif;
  text-align: center;
  width: 25%;
  height: 100%;
  z-index: 10;
  transition: 1.4s;
}


.slide1-conception {
  background-image: url('../images/projet-img-3d-page-conception-1.jpg');
}

.slide2-conception {
  background-image: url('../images/projet-img-3d-page-conception-2.jpg');
}

.slide3-conception  {
  background-image: url('../images/projet-img-3d-page-conception-3.jpg');
}

.slide4-conception  {
  background-image: url('../images/projet-img-3d-page-conception-4.jpg');
}

.slide1-conception , .slide2-conception , .slide3-conception , .slide4-conception  {
  position: absolute;
  background-position: center;
  background-size: cover;
  color: #fff;
  font-size: 60px;
  padding-top: 200px;
  font-weight: 200;
  font-family: 'bc alphapipe l regular', sans-serif;
  text-align: center;
  width: 25%;
  height: 100%;
  z-index: 10;
  transition: 1.4s;
}

 .slide1-home-staging {
  background-image: url('../images/img-page-home-stage-1.jpg');
}

.slide2-home-staging {
  background-image: url('../images/img-realisation-4.jpg');
}

.slide3-home-staging {
  background-image: url('../images/img-page-home-stage-2.jpg');
}

.slide4-home-staging {
  background-image: url('../images/img-page-home-stage-3.jpg');
} 

.slide1-home-staging, .slide2-home-staging, .slide3-home-staging, .slide4-home-staging {
  position: absolute;
  background-position: center;
  background-size: cover;
  color: #fff;
  font-size: 40px;
  padding-top: 280px;
  font-weight: 200;
  font-family: 'bc alphapipe l regular', sans-serif;
  text-align: center;
  width: 25%;
  height: 100%;
  z-index: 10;
  transition: 1.4s;
}

 .slide1-shopping {
  background-image: url('../images/img-page-shopping-1.jpg');
}

.slide2-shopping {
  background-image: url('../images/img-page-shopping-2.jpg');
}

.slide3-shopping {
  background-image: url('../images/img-page-shopping-3.jpg');
}

.slide4-shopping {
  background-image: url('../images/img-page-shopping-5.jpg');
} 

.slide1-shopping, .slide2-shopping, .slide3-shopping, .slide4-shopping {
  position: absolute;
  background-position: center;
  background-size: cover;
  color: #fff;
  font-size: 40px;
  padding-top: 280px;
  font-weight: 200;
  font-family: 'bc alphapipe l regular', sans-serif;
  text-align: center;
  width: 25%;
  height: 100%;
  z-index: 10;
  transition: 1.4s;
}


.slider {
  position: absolute;
  width: 400%;
  height: 100%;
  background: #000;
  display: inline-flex;
  overflow: hidden;
}


.tran {
  transform: scale(1.3);
}

.up1 {
  z-index: 20;
}

.up2 {
  z-index: 40;
   
}

.steap {
  stroke-width: 0;
}

.streak {
  stroke-width: 82px;
}





.triangle-code-atria-bis {
    position: absolute; 
    display : block;
    height : 0;
    width : 0;
    margin-top: 5.5%;
    margin-left: 54%;
    border-width: 0 0 810px 1100px;
	border-color: transparent transparent #82B0A5 transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}
.triangle-code-atria {
    position: static; 
    display : block;
    height : 0;
    width : 0;
    border-right : 160vh solid transparent;
    border-bottom : 910px solid #49635D; /*  #689aad */
    border-color: transparent transparent #49635D transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}

.iframe-atria {
    position: absolute;
    width: 600px;
    height: 400px;
    margin-top: -35%;
    margin-left: 5%;
    z-index: 999999999;
    padding: 5px;
    cursor: pointer;
}




.triangle-code-andromede-bis {
    position: absolute; 
    display : block;
    height : 0;
    width : 0;
    margin-top: 5.5%;
    margin-left: 54%;
    border-width: 0 0 810px 1100px;
	border-color: transparent transparent #6a8482 transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}



.triangle-code-andromede {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 160vh solid transparent;
 border-bottom : 910px solid #46615f; /*  #689aad */
    border-color: transparent transparent #46615f transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}

.iframe-andromede {
    position: absolute;
    width: 600px;
    height: 400px;
    margin-top: -35%;
    margin-left: 5%;
    z-index: 999999999;
    padding: 5px;
    /*background-color: #78809e;*/
    cursor: pointer;
    opacity: 0;
    
    
}



.triangle-code-erakis-bis {
    position: absolute; 
    display : block;
    height : 0;
    width : 0;
    margin-top: 5.5%;
    margin-left: 54%;
    border-width: 0 0 810px 1100px;
	border-color: transparent transparent #689aad transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}

.triangle-code-erakis {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 160vh solid transparent;
 border-bottom : 910px solid #9bbcb1; /* #3a5560 #689aad */
border-color: transparent transparent #4f6469 transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}

.iframe-erakis {
    position: absolute;
    width: 600px;
    height: 400px;
    margin-top: -35%;
    margin-left: 5%;
    z-index: 999999999;
    padding: 5px;
    cursor: pointer;
        
}
    
.triangle-site-erakis {
    position: absolute; 
 display : block;
	width: 0;
	height: 0;
    margin-left: 47%;
	border-width: 0 880px 514px 0;
	border-color: transparent #467182 transparent transparent;
	border-style: solid;
	filter: drop-shadow(0px 5px 4px #A3A3A3);
}

h2 { font-size: 3.2em; font-family: 'dosis', sans-serif;
}


h3 { font-size: 2.0em; color: #EEBF00; font-family: 'BC Alphapipe L Regular', sans-serif;}
h4 { 
    color: #EEBF00;
    font-size: 2.8em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
}
.body-cv { 
	margin: 0 auto; 	
	padding: 0 auto;  	
	 background-color: #dae2e6;/* #ddeded*/
	font-family: 'Dosis', sans-serif; 
	color: #000; 
	line-height: 1.5;
	font-size: 100%;	
    overflow-x: hidden;
    min-width: 100%;
    min-height: 100%;

  }
.body-cv-1 { 
	   background: url('../images/papier-peint-cv.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-attachment: fixed;
        background-position: center center;
        margin: 0 auto;
     padding: 0 auto;
    
  }
  .body-cv-bis { 
	margin: 0 auto; 	
	padding: 0 auto;  	
	 background-color: #c9dbda;/* #ddeded*/
	font-family: 'Dosis', sans-serif; 
	color: #000; 
	line-height: 1.5;
	font-size: 100%;	
    overflow-x: hidden;
    min-width: 100%;
    min-height: 100%;
  }
    
  .trait-texte-cv {
    padding-right: 20px; 	
    border-right: 1px solid rgb(74, 68, 68);	
    }
    
.body-page-offre { 
	margin: 0 auto; 	
	padding: 0 auto;
    padding-bottom: 5%;
	 background-color: #fff;
	font-family: 'Dosis', sans-serif; 
	color: #000; 
	line-height: 1.5;	
    overflow-x: hidden;
    min-width: 100%;
    min-height: 100%;
  }

.body-page-home-staging { 
	margin: 0 auto; 	
	padding: 0 auto;
     padding-bottom: 2%;
	 background-color: #e8e1e2;
	font-family: 'Dosis', sans-serif; 
	color: #000; 
	line-height: 1.5;
	font-size: 100%;	
    overflow-x: hidden;
    min-width: 100%;
    min-height: 100%;
  }

.body-page-shopping { 
	margin: 0 auto; 	
	padding: 0 auto;
    padding-bottom: 2%;
	 background-color: #E8D8DC;
	padding-top: 5%;	
    overflow-x: hidden;
    min-width: 100%;
    min-height: 100%;
  }

.body-conception { 
	margin: 0 auto; 	
	padding: 0 auto;
    padding-bottom: 5%;
    padding-top: 5%;
	 background-color: #e7e2e2;
	font-family: 'Dosis', sans-serif; 
	color: #000; 
	line-height: 1.5;
	font-size: 100%;	
    overflow-x: hidden;
    min-width: 100%;
    min-height: 100%;
  }
.fond-conception-img {
    background-color: #e7e2e2;
    }

.body-page-deco-int { 
	margin: 0 auto; 	
	padding: 0 auto; 
    padding-bottom: 5%;
	 background-color: #F7E4E8;
	font-family: 'Dosis', sans-serif; 
	color: #000; 
	line-height: 1.5;
	font-size: 100%;	
    overflow-x: hidden;
    min-width: 100%;
    min-height: 100%;
  }

.fond-img-deco {
        background-color: #F7E4E8;
    }
.fond-page-shopping-broc {
    
    background-color: #DECED2;
}

.fond-deco-mur{
    background: url('../images/deco-mur-1.png');
      background-repeat: no-repeat;
      background-size: 100%;
      background-attachment: fixed;
      background-position: bottom center;
      margin: 0 auto;
      padding-top: 100px;
      padding-bottom: 100px;
}

.video-page-conception {
    position: absolute;
    width: 600px;
    height: 338px;
    margin-top: -35%;
    margin-left: 10%;
    z-index: 9999999;
    /*box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);*/
    padding: 0 auto;
    border: 0;
    border-radius: 0px;
    }

.triangle-deco-conception {
 position: absolute; 
 display : block;
 height : 0;
 width : 0;
 margin-top: -5%;
 margin-left: 35%;
 border-width: 360px 509px 0 250px;
	border-color: #EEBF00 transparent transparent transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}

.triangle-deco-conception-1 {
 position: absolute; 
 display : block;
 height : 0;
 width : 0;
margin-top: 5.5%;
margin-left: 54%;
border-width: 0 0 810px 1100px;
	border-color: transparent transparent #BA99A1 transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}


.triangle-deco-conception-2 {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 160vh solid transparent;
 border-bottom : 910px solid #947980; /*  #689aad  3a5560*/
border-color: transparent transparent #947980 transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}

.triangle-deco-conception-1-bis {
 position: absolute; 
 display : block;
 height : 0;
 width : 0;
margin-top: 5%;
margin-left: 56%;
border-width: 0 0 510px 1000px;
	border-color: transparent transparent #BA99A1 transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}


.triangle-deco-conception-2-bis {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 110vh solid transparent;
 border-bottom : 610px solid #947980; /*  #689aad  3a5560*/
border-color: transparent transparent #947980 transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}

.triangle-page-deco-int-1 {
 position: absolute; 
 display : block;
 height : 0;
 width : 0;
margin-top: 5%;
margin-left: 54%;
border-width: 0 0 810px 1100px;
	border-color: transparent transparent #AC9FA2 transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}


.triangle-page-deco-int-2 {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 160vh solid transparent;
 border-bottom : 910px solid #918688; /*  #689aad  3a5560*/
border-color: transparent transparent #918688 transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}



.triangle-page-deco-2022-1 {
 position: absolute; 
 display : block;
 height : 0;
 width : 0;
margin-top: 5.5%;
margin-left: 50%;
border-width: 0 0 810px 1100px;
	border-color: transparent transparent #a2afab transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
    z-index: -1;
}



.triangle-page-deco-2022-2 {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 160vh solid transparent;
 border-bottom : 910px solid #5c7373; /*  #689aad  3a5560*/
border-color: transparent transparent #5c7373 transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}

.triangle-cv {
    position: absolute; 
    display : block;
    height : 0;
    width : 0;
   margin-top: 5.5%;
   margin-left: 54%;
   border-width: 0 0 810px 1100px;
       border-color: transparent transparent #9caeae transparent;
       border-style: solid;
       filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
       z-index: 0;
   }



   .triangle-cv-realisation {
    position: absolute; 
    display : block;
    height : 0;
    width : 0;
   margin-top: 5.5%;
   margin-left: 54%;
   border-width: 0 0 810px 1100px;
       border-color: transparent transparent #9caeae transparent;
       border-style: solid;
       filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.70));
       z-index: 0;
   }

   .triangle-code-erakis-cv-bis {
    position: static; 
    display : block;
    height : 0;
    width : 0;
    border-right : 160vh solid transparent;
    border-bottom : 910px solid #4f6469; /*  #689aad  3a5560*/
   border-color: transparent transparent #4f6469 transparent;
       border-style: solid;
       filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.70));
       z-index: 0;
   }

.triangle-code-erakis-cv {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 160vh solid transparent;
 border-bottom : 910px solid #3a5560; /*  #689aad  3a5560*/
border-color: transparent transparent #3a5560 transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}
.triangle-cv-bis {
 position: absolute; 
 display : block;
 height : 0;
 width : 0;
margin-left: 35%;
border-width: 360px 509px 0 250px;
	border-color: #EEBF00 transparent transparent transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}

.fond-texte-home-stag-1 {
   background-color: #786B6E;
}


.triangle-page-home-staging {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 160vh solid transparent;
 border-bottom : 910px solid #786B6E; /*  #689aad  3a5560*/
border-color: transparent transparent #786B6E transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}

.triangle-page-home-staging-1-bis {
 position: absolute; 
 display : block;
 height : 0;
 width : 0;
margin-top: 5.5%;
margin-left: 52%;
border-width: 0 0 510px 1000px;
	border-color: transparent transparent #9E8D91 transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}



.triangle-page-home-staging-bis {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 110vh solid transparent;
 border-bottom : 610px solid #786B6E; /*  #689aad  3a5560*/
border-color: transparent transparent #786B6E transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}

.triangle-page-home-staging-1 {
 position: absolute; 
 display : block;
 height : 0;
 width : 0;
margin-top: 5.5%;
margin-left: 52%;
border-width: 0 0 810px 1100px;
	border-color: transparent transparent #9E8D91 transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}

.triangle-page-contact {
    position: absolute; 
    display : block;
	width: 0;
	height: 0;
     margin-top: 0;
    margin-left: 48%;
	border-width: 0 980px 514px 0;
	border-color: transparent #5c7373 transparent transparent;
	border-style: solid;
	filter: drop-shadow(0px 5px 4px #A3A3A3);
    z-index: 9999;
}
    
.img-contact { 
    width: 45%; 
    height: auto;
    margin-bottom: -1%;

    
    }
    
  
    
.img-contact-logo {
    float: right;
    width: 45%; 
    height: auto;
    margin-right: 15%;
    margin-top: 3%;
    }
    
.h1-page-contact {
    position: absolute;
    width: 1200px;
    left: 8%;
    margin-left: -590px;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    color: #43646B; /* #EEBF00 */
    margin-top: 45%;
    padding: 0;
    font-size: 6.5em;
    line-height: 1;
    opacity: 0;
    z-index: 99999999;
    border-left: 4px solid #EEBF00;
   }
    
.h1-page-contact .span-contenu-contact {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 0.3em;   
    }

.triangle-page-shopping {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 160vh solid transparent;
 border-bottom : 910px solid #9B8188; /*  #689aad  3a5560*/
border-color: transparent transparent #9B8188 transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}

.triangle-page-shopping-1 {
 position: absolute; 
 display : block;
 height : 0;
 width : 0;
margin-top: 5.5%;
margin-left: 52%;
border-width: 0 0 810px 1100px;
	border-color: transparent transparent #A88C93 transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}

.triangle-page-shopping-bis {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 110vh solid transparent;
 border-bottom : 610px solid #9B8188; /*  #689aad  3a5560*/
border-color: transparent transparent #9B8188 transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}

.triangle-page-shopping-1-bis {
 position: absolute; 
 display : block;
 height : 0;
 width : 0;
margin-top: 5.5%;
margin-left: 52%;
border-width: 0 0 510px 1000px;
	border-color: transparent transparent #A88C93 transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}

.fond-page-shopping-text {
    background-color: #9B8188;
}

h5 { 
    font-size: 2em;
    
    text-align: center;
    
    }

.h5-templet { 
    font-size: 2.5em;
    color: #505c74;
    border-top: dashed 3px #5c7373; /*#EEBF00*/
    text-align: center;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    
    }
h6 { font-size: 1.2em; }

sub, sup { font-size: 0.7em; }

hr { 				/* simple ligne de separation */
	color: #eeeeee; 
	background-color: #eeeeee; 
	height: 1px; 
	border: #eeeeee; 
	}


.h2proj-moi {
   
    color: #19291f;  /*   #1d2d4e #dbdbdb   #507279*/
    font-size: 3.8em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    margin-top: 0;
    margin-bottom: 0 auto;
    line-height: 1;
    margin-left: 0%;
    
   
    }

.h2proj {
   
    color: #19291f ;/* #1d2d4e #dbdbdb   #507279*/
    font-size: 4em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    padding: 20px 0px 20px 0px;
   
    margin-bottom: 0 auto;
    line-height: 1;
    margin-left: 2%;
    
   
    }

.h2proj .span-templet-1 {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    margin-left: 15%;
    font-size: 1.5em;
    text-transform: uppercase;
}

h1 span .span-templet-1 {margin-left: 20%;}

.h2proj1 {
    font-family: 'dosis', sans-serif;
    font-weight: 300;
    color: #867983;/*#dbdbdb #95a781  #1a1a1a*/
    font-size: 2em;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-left: 5%;
    margin-right: 2%;
    margin-top: 10%;

    }

.h2-proj1 .span-texte-2 {
     color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
    line-height: 1.5;
}

.h2proj2 {
    font-family: 'dosis', sans-serif;
    font-weight: 300;
    color: #507279; /*#dbdbdb #95a781  #1a1a1a  #EEBF00*/
    font-size: 2.6em;
   margin-top: 2%;
    margin-bottom: 2%;

    }

.h2proj2-index {
    font-family: 'dosis', sans-serif;
    font-weight: 300;
    color: #507279; /*#dbdbdb #95a781  #1a1a1a  #EEBF00*/
    font-size: 2.6em;
   padding-top: -25%;
    margin-bottom: 0;

    }
    
.fond-blanc-bis-2 { 
    background-color: #ffffff;
    margin-top:-25%;
    margin-bottom: -25%;
}

.h2proj2-moi {
    font-family: 'dosis', sans-serif;
    font-weight: 300;
    color: #EEBF00; /*#dbdbdb #95a781  #1a1a1a #507279 */
    font-size: 2.6em;
   margin-top: 2%;
    margin-bottom: 2%;

    }
.h2proj-titre-index-web {
    font-family: 'BC Alphapipe L Regular', sans-serif;
    font-weight: 300;
    color: #607b93;  /* #19291f #3b4061 #dbdbdb #95a781  #1a1a1a*/
    font-size: 3.5em;
    padding-top: 10px;
    padding-bottom: 0px;
    margin-top: 0%;

    }

.h2proj-titre-index-web .span-deco-1 {
    color: #a68184;
        }

.h2proj-titre-index-web .span-deco-2 {
    color: #EEBF00;
    font-size: 2.6em;
    }

.h2proj-titre {
    font-family: 'BC Alphapipe L Regular', sans-serif;
    font-weight: 300;
    color: #607b93;  /* #19291f #3b4061 #dbdbdb #95a781  #1a1a1a*/
    font-size: 4em;
    padding-top: 10px;
    padding-bottom: 0px;
    margin-top: 0%;
    padding-left: 2%;
    padding-right: 2%;

    }

.h2proj-titre .span-deco-1 {
    color: #a68184;
        }

.h2proj-titre .span-deco-2 {
    color: #EEBF00;
    font-size: 1.2em;
    
        }

.h2proj2-bis {
    font-family: 'dosis', sans-serif;
    font-weight: 300;
    color: #507279;/*#dbdbdb #95a781  #1a1a1a*/
    font-size: 2em;
    padding: 0;
    padding-bottom: 0px;
    margin-left: 5%;
    margin-right: 2%;
    margin-top: 10%;
    margin-bottom: 20%;

    }


.h4-affiche { 
    font-size: 2.8em;
    padding-top: 5%;
    color: #fff;
    font-family: 'BC Alphapipe L Regular', sans-serif;
}

.h4-affiche-bis { 
    font-size: 2.8em;
    padding-top: 2%;
    margin-left: 61%;
    color: #fff;
    font-family: 'BC Alphapipe L Regular', sans-serif;
}
    
.h2titre-index {
    font-weight: 900;
    color: #1a1a1a;/*#dbdbdb*/
    font-size: 4.5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    text-transform: uppercase;
   

    }

.h2titre {
    font-weight: 900;
    color: #1a1a1a;/*#dbdbdb*/
    font-size: 4.5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    text-transform: uppercase;
   

    }

.h4-templet {
    font-family: 'BC Alphapipe L Regular', sans-serif;
    font-size: 2em;
    color: #EEBF00;
    line-height: 1;
    /*text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.50);*/
}


.p1 {
     line-height: 1.2;
    font-family: 'dosis', sans-serif;
    color: #505c74; /* #857a80 */
    font-size: 1.6em;
    padding-left: 5%;
    padding-right: 10%;
    vertical-align: inherit;
    

}

.p1-deco {
     line-height: 1.2;
    font-family: 'dosis', sans-serif;
    color: #505c74; /* #857a80 */
    font-size: 1.6em;
    padding-left: 5%;
    padding-right: 10%;
    vertical-align: inherit;
    

}
.p1-bis {
    font-family: 'dosis', sans-serif;
   font-weight: 300;
    color:#fff;
    font-size: 1.5em;
   line-height: 1.5;
    margin-top: 5%;
    margin-bottom: 2%;
    padding-left: 5%;
  

}

.p1-bis .span-texte-1 {
     color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
    line-height: 1.5;
}

.p1-bis-1 {
    font-family: 'dosis', sans-serif;
   font-weight: 300;
    color:#19291f;
    font-size: 2.5em;
   line-height: 1.3;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-left: 5%;
  

}
.p1-bis-1 .span-texte-1 {
     color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
    line-height: 1.3;
}


.p2-bis {
    font-family: 'dosis', sans-serif;
   font-weight: 300;
    color: #d3d6e5;
    font-size: 1.5em;
   line-height: 1.5;
    margin-top: 1%;
    margin-bottom: 2%;
    padding-left: 5%;
    padding-right: 5%;
    text-align: justify;
  

}
.p2-bis .span-texte-1 {
     color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
    line-height: 1.5;
}


.p2-bis-index {
    font-family: 'dosis', sans-serif;
   font-weight: 300;
     color: #505c74;
    font-size: 1.4em;
   line-height: 1.5;
    margin-top: 1%;
    margin-bottom: 2%;
    padding-left: 15%;
    padding-right: 15%;
    text-align: justify;
  

}




.h6titre { 
    font-size: 1.5em;
    color:#1a1a1a;
    line-height: normal;
    font-family: 'sarpanch-medium', arial;
    padding-bottom: 5%;
    
            
    }



#triangle-code-haut-droite {
   
 display : inline-block;
 height : 0;
 width : 0;
 border-top : 276px solid red;
 border-left : 276px solid transparent;

}


#triangle-code {
   
 display : inline-block;
 height : 0;
 width : 0;
 border-right : 600px solid transparent;
 border-bottom : 300px solid #8ed2ed; /*  #689aad */
box-shadow: -9px 12px 13px -1px rgba(103,107,110,0.47);
-webkit-box-shadow: -9px 12px 13px -1px rgba(103,107,110,0.47);
-moz-box-shadow: -9px 12px 13px -1px rgba(103,107,110,0.47);
}



.triangle-code-1 {
    position: static; 
    display : block;
    height : 0;
    width : 0;
    border-right : 150vh solid transparent;
    border-bottom : 900px solid #3a5560; /*  #689aad */
    border-color: transparent transparent #3a5560 transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}

img {
   padding: 0;
    margin: 0;
	border: none; 	
   }



.img-electra {
    
    width: 900px;
    height: 720px;
    float: right;
    z-index: 9999999;
	position: absolute;	
	top: 10%;		
    left:50%;
    margin-left:-100px;
   
   
}

.span2-servannaise h1 {
    position: absolute;
    width: 800px;
    padding-left: 5%;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    color: #EEBF00;
    padding-top: 25%;
    font-size: 5em;
    line-height: 1;
    opacity: 1;
   
}

.h6proj-servannaise { 
    position: absolute;
    width: 600px;
     font-family: 'dosis', sans-serif;
    font-weight: 100;
    color: #dcf0f4;
    padding: 0;
    margin-top: 40%;
    padding-left: 5%;
    font-size: 1.8em;
    float: left;
            
    }


.triangle-galerie-realisation {
 position: absolute; 
 display : block;
 height : 0;
 width : 0;
margin-top: 5.5%;
margin-left: 52%;
border-width: 0 0 510px 800px;
	border-color: transparent transparent #AC9FA2 transparent;
	border-style: solid;
	filter: drop-shadow(-11px -6px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}

.triangle-galerie-realisation-1 {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 110vh solid transparent;
 border-bottom : 610px solid #918688; /*  #689aad  3a5560*/
border-color: transparent transparent #918688 transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.70));
    z-index: 0;
}

.triangle-code-2 {
 position: static; 
 display : block;
 height : 0;
 width : 0;
 border-right : 150vh solid transparent;
 border-bottom : 900px solid #5c7373; /*  #689aad */
border-color: transparent transparent #5c7373 transparent;
	border-style: solid;
	filter: drop-shadow(12px 2px 7px rgba(163, 163, 163, 0.57));
    z-index: 0;
}

.triangle-site-colombier {
    position: absolute; 
 display : block;
	width: 0;
	height: 0;
     margin-top: -2%;
    margin-left: 53%;
	border-width: 0 786px 514px 0;
	border-color: transparent #a09fa7 transparent transparent;
	border-style: solid;
	filter: drop-shadow(0px 5px 4px #A3A3A3);
}

.triangle-site-stmalo {
    position: absolute; 
 display : block;
	width: 0;
	height: 0;
    margin-top: -2%;
    margin-left: 53%;
	border-width: 0 786px 514px 0;
	border-color: transparent #a68184 transparent transparent;
	border-style: solid;
	filter: drop-shadow(0px 5px 4px #A3A3A3);
}

/*///////////////       flex box    //////////////////////*/

.hauteur100 {
    width: 100%;
    height: 100%;
    } 

.hauteur100-bis {
      margin-top: -25%;
        height: 100%;
    } 
    

.hauteur50 {
    width: 100%;
        margin: 0;
    padding: 0;
        height: 50%;
    } 
.case50 {
        width: 50%;
        max-height: 70%; /* vertical height vh "min-height" permet de ralonger le div et voir tout le texte voir max-height aussi */
        float: left;
        padding-bottom: 5%;
        padding-left: 5%;
        padding-right: 5%;
        
    }



.case50-page-offre {
        width: 100%;
        height: 70%; /* vertical height vh "min-height" permet de ralonger le div et voir tout le texte voir max-height aussi */
        float: left;
        padding-left: 8%;
        padding-top: 15%;
        
    }

.case50-bis {
        width: 50%;
        max-height: 70%; /* vertical height vh "min-height" permet de ralonger le div et voir tout le texte voir max-height aussi */
        float: right;
        padding-bottom: 5%;
        padding-left: 5%;
        padding-right: 5%;
        
    }
.case50-right {
        width: 50%;
        height: 50%; /* vertical height vh "min-height" permet de ralonger le div et voir tout le texte voir max-height aussi */
        float: left;
        
    }
.case70 {
        width: 70%;
        height: 40%; /* vertical height vh "min-height" permet de ralonger le div et voir tout le texte voir max-height aussi */
        float: left;
        padding: 20px 20px 20px 20px;
    
  }

.case30 {
        width: 30%;
        height: 40%;/* vertical height vh "min-height" permet de ralonger le div et voir tout le texte voir max-height aussi */
      
        float: left;
        
    }


.case70-bis {
        width: 70%;
        height: 40%; /* vertical height vh "min-height" permet de ralonger le div et voir tout le texte voir max-height aussi */
        float: left;
       padding: 20px 20px 20px 20px;
    
  }

.case30-bis {
        width: 30%;
        height: 40%; /* vertical height vh "min-height" permet de ralonger le div et voir tout le texte voir max-height aussi */
        float: left;
    padding-bottom: 4%;
        
    }

.case70-bis-moi {
        width: 70%;
        height: 40%; /* vertical height vh "min-height" permet de ralonger le div et voir tout le texte voir max-height aussi */
        float: left;
       padding: 20px 20px 0px 20px;
  }

.case30-bis-moi {
        width: 30%;
        height: 40%; /* vertical height vh "min-height" permet de ralonger le div et voir tout le texte voir max-height aussi */
        float: left;
        padding: 20px 20px 0px 20px;
    }

.case100 {
    width: 100%;
    height: 50%;

}


.img-moi {
    max-width: 60%; 
    max-height: auto;
    margin-left: 0px;
    margin-top: 7%;
}



/* ----------------  page decorateur --------------------  */

.container-villa {
    margin-left: 18%;
    
    
}

.container-le-clos {
    margin-left: 6%;
    
    
}

.ba-slider-renov {
  position: relative;
  overflow: hidden;
    box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);
}

.ba-slider-renov img {
  width: 100%;
  display: block;
}


.ba-slider {
  position: relative;
  overflow: hidden;
    box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);
}

.ba-slider img {
  width: 100%;
  display: block;
}

.resize {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
}

.handle {
  /* Thin line seperator */
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: rgba(0, 0, 0, 0.5);
  cursor: grabbing;
}

.handle:after {
  /* Big orange knob  */
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  content: "⇔";
  color: white;
  font-weight: bold;
  font-size: 26px;
  text-align: center;
  line-height: 44px;
  background: #5c7373;
  /* @orange */
  border: 1px solid #5c7373;
  /* darken(@orange, 5%) */
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 60px 50px -30px #EEC003;
  /* lighten(@orange, 20%)*/
}

.draggable:after {
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  line-height: 48px;
  font-size: 30px;
}
    

    

.titre-deco-reno {
    margin-top: 5%;
    color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    text-align: center;
    text-transform: uppercase;
    z-index: 999999999;
    }

.p1-reno {
     line-height: 1.2;
    font-family: 'dosis', sans-serif;
     font-weight: 200;
    color: #505c74; /* #857a80 */
    font-size: 1.6em;
    padding-left: 10%;
    padding-right: 10%;
    text-align: justify;
    

}
.slide-top-deco { 
    margin-top: 5%;
    }


#anim-texte-page-deco-1 {opacity: 0;}
#anim-texte-page-shopping {opacity: 0;}
#anim-texte-page-shopping-1 {opacity: 0;}
#anim-texte-page-conception {opacity: 0;}
#anim-texte-broc-1 {opacity: 0;}
#anim-prix-shopping-broc {opacity: 0;}

#anim-projet-deco-1 {opacity: 0;}
#anim-projet-deco-2 {opacity: 0;}
#anim-projet-deco-3 {opacity:0;}
#anim-projet-1-img-4 {opacity:0;}

#anim-texte-vignette-web {opacity: 0;}
#anim-texte-conception-1 {opacity: 0;}
#anim-page-deco-1 {opacity: 0;}
#anim-prix-deco {opacity: 0;}

#anim-page-conception-text-1 {opacity: 0;}
#anim-page-conception-text-2 {opacity: 0;}
#anim-text-home-staging-1 {opacity: 0;}
    
#anim-vignette-index-1 {opacity: 0;}
#anim-vignette-index-2 {opacity: 0;}

#anim-vignette-deco-1 {opacity: 0;}
#anim-vignette-deco-2 {opacity: 0;}
#anim-vignette-deco-3 {opacity: 0;}
#anim-vignette-deco-4 {opacity: 0;}
    
#anim-page-templet-cv-1-bis1 {opacity: 0;}




#bienvenue {opacity: 0;}

#anim-texte-electra {opacity: 0;}
#anim-texte-electra-1 {opacity: 0;}

#anim-texte-templet {opacity: 0;}
#anim-texte-templet-index {opacity: 0;}
#anim-texte-templet-index-bis {opacity: 0;}

#anim-texte-templet-index-deco-1 {opacity: 0;}
#anim-texte-templet-index-deco-2 {opacity: 0;}

#anim-texte-offre {opacity: 0;}
#anim-texte-offre-a {opacity: 0;}
#anim-texte-offre-b {opacity: 0;}
#anim-p2-bis {opacity: 0;}

#anim-texte-offre-atria {opacity: 0;}
#anim-texte-offre-a-atria {opacity: 0;}
#anim-texte-offre-b-atria {opacity: 0;}

#anim-texte-offre-electra {opacity: 0;}
#anim-texte-offre-a-electra {opacity: 0;}
#anim-texte-offre-b-electra {opacity: 0;}
#anim-page-templet-3-electra {opacity: 0;}
#anim-forfait-titre-electra {opacity: 0;}
#anim-forfait-1-electra {opacity: 0;}
#anim-forfait-2-electra {opacity: 0;}
#bgVid1-bis-electra {opacity: 0;}
#anim-prestation-titre-electra {opacity: 0;}
#anim-prestation-1-electra {opacity: 0;}
#anim-prestation-2-electra {opacity: 0;}

#anim-texte-page-home-staging-1 {opacity: 0;}
#anim-texte-page-home-staging {opacity: 0;}
#anim-prix-home-staging {opacity: 0;}
#anim-prix-shopping {opacity: 0;}
#anim-prix-shopping-1 {opacity: 0;}

#anim-forfait-titre {opacity: 0;}
#anim-forfait-titre-atria {opacity: 0;}
#anim-forfait-1 {opacity: 0;}
#anim-forfait-2 {opacity: 0;}
#anim-forfait-1-atria {opacity: 0;}
#anim-forfait-2-atria {opacity: 0;}

#anim-forfait-titre-index {opacity: 0;}
#anim-forfait-index-1 {opacity: 0;}
#anim-forfait-index-2 {opacity: 0;}
#anim-forfait-index-3 {opacity: 0;}
#anim-forfait-index-4 {opacity: 0;}
#anim-forfait-index-5 {opacity: 0;}
#anim-forfait-index-6 {opacity: 0;}
#anim-forfait-index-7 {opacity: 0;}
#anim-forfait-index-8 {opacity: 0;}
#anim-forfait-index-9 {opacity: 0;}

#anim-prestation-titre-alhena {opacity: 0;}
#anim-prestation-titre {opacity: 0;}
#anim-prestation-titre-atria {opacity: 0;}
#anim-prestation-1 {opacity: 0;}
#anim-prestation-2 {opacity: 0;}
#anim-prestation-1-atria {opacity: 0;}
#anim-prestation-2-atria {opacity: 0;}

#anim-presentation-moi-1 {opacity: 0;}
#anim-presentation-moi-2 {opacity: 0;}
#anim-presentation-moi-3 {opacity: 0;}
#anim-presentation-moi-4 {opacity: 0;}
#anim-presentation-moi-5 {opacity: 0;}


#anim-page-deco-img-renov-leclos-1 {opacity: 0;}
#anim-page-deco-img-renov-leclos-2 {opacity: 0;}
#anim-page-deco-img-renov-leclos-3 {opacity: 0;}
#anim-page-deco-img-renov-leclos-4 {opacity: 0;}
#anim-page-deco-img-renov-leclos-5 {opacity: 0;}
#anim-page-deco-img-renov-leclos-6 {opacity: 0;}


#anim-page-deco-img-renov-villa-1 { opacity: 0;}
#anim-page-deco-img-renov-villa-2 { opacity: 0;}
#anim-page-deco-img-renov-villa-3 { opacity: 0;}
#anim-page-deco-img-renov-villa-4 { opacity: 0;}
#anim-page-deco-img-renov-villa-5 { opacity: 0;}
#anim-page-deco-img-renov-villa-6 { opacity: 0;}

#section-1-galerie {opacity: 0;}
#section-2-galerie {opacity: 0;}
#section-3-galerie {opacity: 0;}
#section-4-galerie {opacity: 0;}
#section-5-galerie {opacity: 0;}
#section-6-galerie {opacity: 0;}
#section-7-galerie {opacity: 0;}
#section-8-galerie {opacity: 0;}

#section-9-galerie {opacity: 0;}
#section-10-galerie {opacity: 0;}
#section-11-galerie {opacity: 0;}
#section-12-galerie {opacity: 0;}
#section-13-galerie {opacity: 0;}
#section-14-galerie {opacity: 0;}
#section-15-galerie {opacity: 0;}
#section-16-galerie {opacity: 0;}

#anim-templet-1 {opacity:0;}
#anim-templet-2 {opacity:0;}
#anim-templet-3 {opacity:0;}
#anim-templet-4 {opacity:0;}

#anim-video-electra-1 {opacity:0;}
#anim-video-electra-2 {opacity:0;}
#anim-video-electra-3 {opacity:0;}
#anim-video-electra-4 {opacity:0;}
#anim-video-electra-5 {opacity:0;}
#anim-video-electra-6 {opacity:0;}


#anim-page-templet-1-video1{opacity:0;}
#anim-page-templet-1 {opacity: 0;}
#anim-page-templet-1-bis {opacity: 0;}
#anim-page-templet-2 {opacity: 0;}
#anim-page-templet-3 {opacity: 0;}
#anim-page-templet-3-atria {opacity: 0;}
#anim-page-colombier {opacity: 0;}
#anim-page-colombier-1 {opacity: 0;}
#anim-page-colombier-2 {opacity: 0;}
#anim-page-colombier-3 {opacity: 0;}
#anim-page-colombier-4 {opacity: 0;}

#anim-page-servannaise-1 {opacity: 0;}
#anim-page-servannaise-2 {opacity: 0;}

#anim-texte-1 {opacity:0;}
#anim-texte-2 {opacity:0;}
#anim-texte-3 {opacity:0;}
#anim-texte-4 {opacity:0;}
#anim-texte-5 {opacity:0;}
#anim-texte-5-bis {opacity:0;}


#bouton-anim-1 {opacity:0;}
#bouton-anim-2 {opacity:0;}
#bouton-anim-1-atria {opacity:0;}
#bouton-anim-2-atria {opacity:0;}
#bouton-anim-3 {opacity:0;}

#anim-texte-index-1 {opacity:0;}

#anim-projet-0 {opacity:0;}
#anim-projet-1 {opacity:0;}
#anim-projet-2 {opacity:0;}
#anim-projet-3 {opacity:0;}
#anim-projet-4 {opacity:0;}
#anim-projet-5 {opacity:0;}
#anim-projet-6 {opacity:0;}

#anim-projet-titre-2 {opacity:0;}

#bgVid1-bis {opacity: 0;}
#bgVid1-bis-index {opacity: 0;}
#bgVid1-index {opacity: 0;}
#bgVid2-index {opacity: 0;}

#anim-text-contact-1 {opacity:0;}
#anim-text-contact-2 {opacity:0;}
#anim-text-contact-3 {opacity:0;}
#anim-text-contact-4 {opacity:0;}
#anim-text-contact-5 {opacity:0;}
#anim-text-contact-6 {opacity:0;}
#anim-text-contact-7 {opacity:0;}
#anim-text-contact-8 {opacity:0;}
#anim-text-contact-9 {opacity:0;}
#anim-text-contact-10 {opacity:0;}
#anim-text-contact-11 {opacity:0;}
#anim-text-contact-12 {opacity:0;}
#anim-text-contact-13 {opacity:0;}
    
#anim-page-templet-cv {opacity: 0;}
#anim-cv-immo-1 {opacity: 0;}
#anim-page-templet-cv-1 {opacity: 0;}
#anim-page-templet-cv-1-bis {opacity: 0;}
#anim-page-templet-cv-2 {opacity: 0;}
#anim-page-templet-cv-2-bis {opacity: 0;}

#anim-texte-cv {opacity: 0;}
#anim-cv-1 {opacity: 0;}
#anim-cv-2 {opacity: 0;}
#anim-cv-3 {opacity: 0;}
#anim-cv-4 {opacity: 0;}

#anim-presentation-moi-5 {
    opacity: 0;
}

/*#anim-templet-1-video1 {opacity:1;}
#anim-templet-1-video2 {opacity:1;}
#anim-templet-1-video3 {opacity:0;}
#anim-templet-1 {opacity:0;}*/

/*////////////////////////// debut lightbox //////////////////////////////*/

.lightbox {
    display: none;
    z-index: 999;
    margin:0;
    padding: 0;
    
    
}

.featherlight-content { /* cible le premier niveau des div juste apres et pas les autres div */
    margin: 0 auto;
    margin: 0 auto;  /*20vh de marin en bas et en haut =40 + les 60vh du height = 100% de la hauteur */
    width: 85%;
    height: 85vh;  /*hauteur de la page viewport height */
    background-color: #849ba8; 
    border-radius: 0px;
    overflow-y: auto;
    margin-bottom: 2%;
    
}

.fond-papier-peint {
      background: url('../images/papier-peint.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom center;
        margin: 0 auto;
        background-attachment: fixed;
        padding-bottom: 200px;
   
    
    }



.fond-templet-1 {
            background: url('../images/bg-8-projet-fin-annee.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            margin: 0;
            padding-top: 300px;
            padding-bottom: 450px;
            width: 80%;
            height: auto;
            margin-left: 10%;
            margin-right: 10%;
    

            }

.fond-templet-2 {
            background: url('../images/bg-5-projet-web-jeux.png'); 
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            margin: 0;
            padding-top: 300px;
            padding-bottom: 450px;
            width: 80%;
            height: auto;
            margin-left: 10%;
            margin-right: 10%;
        }



.fond-templet-3 {
            background: url('../images/bg-4-projet-web-riva.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            margin: 0;
            padding-top: 300px;
            padding-bottom: 450px;
            width: 80%;
            height: auto;
            margin-left: 10%;
            margin-right: 10%;
           

            }
.fond-templet-4 {
            background: url('../images/bg-6-projet-film-anim.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            margin: 0;
            padding-top: 300px;
            padding-bottom: 450px;
            width: 80%;
            height: auto;
            margin-left: 10%;
            margin-right: 10%;
           
}



.caption-templet {
	position: absolute;
    height: 100%;
    width: 100%;
	left: 0; 
    bottom: 0;
	color: #a09fa7;
    opacity: 0;
	background: rgba(28,31,36,0.7);
    overflow: hidden;
	transition: all 0.5s ease;
   
}
.caption-templet span { 
    position: absolute;
    display: block;
    bottom: 40%;
    left: 0;
    right: 0;
    }
.caption-templet span .h3-bis-box {
     font-size: 4em;
    padding: 0;
    
}
.caption-templet:hover {
    opacity: 1;
    transition: all 0.5s ease;
   
}
span { 
    margin-left: 5%;
    margin-top: 0;
    }

span .h3-bis-box {
    font-family: 'BC Alphapipe L Regular', sans-serif;
    margin-bottom: -15%;
    line-height: 1;
    /*text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.50);*/
}


.fleche-box {
    position: absolute;
    width: 20px;
    position: fixed;
    bottom: 90px;
    z-index:200000000;
    left: 50%;
    margin-left: -10px;
    display: block;
    
}




/* --- MES STYLES DE BLOCS --- */

.page { 
	margin: 0 auto; 
	padding: 0 auto;
    min-width: 100%;
    }


.bloc-logo {
    margin: 0;
    padding: 0;
}
 

.scroll-bas {
    width: 20px;
    height: 16px;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    top: 90%;
    z-index: 9999;
    

}

.scroll-bas-video {
    width: 20px;
    height: 16px;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    top: 90%;
    z-index: 999;
    

}

.scroll-bas-projet {
    width: 40px;
    height: 28px;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    bottom: 10%;
    
}



/* -------------------------------- 

            Header 

-------------------------------- */

.nav1 {
    float: right;
    margin-top: 0;
    margin-bottom: 0;
     
    }



header {
    min-width: 100%;
    display: none;
    opacity: 1;
    position: fixed;
    z-index: 99999999999999999;
    background-color: #5e777c; /*#00547a*/
    border-bottom: 2px solid #76acc4;
}
header nav ul { 		
	list-style: none; 
	margin: 0;
	padding: 0;
	
	}
header nav ul li { 		
	list-style: none;	
	display: block;	
	margin: 0;
	padding: 0;
	float: left;
    z-index: 99999999999999999999;
	}


header nav ul li a { 
	display: inline-block;
    list-style: none;
	zoom: 1;		
	margin: 0;
	padding: 12px 30px;
	background-color: none;
	font-size: 1.5em;
    font-family: 'dosis', sans-serif;
    font-weight: 300;
	line-height: 2.3;	
	white-space: nowrap;	
	color: #a5c8cc;
	transition: all 0.5s ease;	
   
	}
header nav ul li a:link, header nav ul li a:visited {
	background-color: none;
	color: #a5c8cc; 
	text-decoration: none;
	}
header nav ul li a:hover, header nav ul li a:active {
    background-color: rgba(99,129,145,.8);
	color:#fff;

	}

.logo-menu {
    width: 5%;
    height: auto;
    float: left;
    margin-top: 10px;
    margin-left: 5%;
}
    
    


.trame::after {
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    right:0;
    z-index: 1;
    content: "";
    display: block;
     background: rgba(25, 28, 43, 0.6);
    /*background-image: url('../images/trame-video.png');
    background-repeat: repeat;*/
    border: 5px solid #95a781; /*#53737a*/
   /* pointer-events: none;  permet de passer au travers de la trame */

    
    }

.trame-deco::after {
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    right:0;
    z-index: 1;
    content: "";
    display: block;
     background: rgba(25, 28, 43, 0.6);
    /*background-image: url('../images/trame-video.png');
    background-repeat: repeat;*/
    border: 5px solid #95a781; /*#53737a*/
   /* pointer-events: none;  permet de passer au travers de la trame */

    
    }

.trame-slider::after {
 position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
    z-index: 1;
    content: "";
    display: block;
     background: rgba(25, 28, 43, 0.5);
    /*background-image: url('../images/trame-video.png');
    background-repeat: repeat;*/
    border: 5px solid #95a781; /*#53737a*/
   /* pointer-events: none;  permet de passer au travers de la trame */
    
   
    
}


/* ----- header {
  position: fixed;
  width: 100%;
  background: rgba(244, 142, 120, 1);
    background-color: #5e777c;
  font-weight: 200;
  height: 120px;
  z-index: 999999999999;
    display: none;
    top:0;
    
}

header #logo {
    width: 8%;
    max-width: 110px;
    height: auto;
    position: absolute;
    left: 5%;
    top: 10%;
}

header nav {
    width:auto;
    text-align: center;
    margin-top: 2%;
}

header nav li{
    display: inline-block;
    margin-left: 5%;
}

header nav .a-header {
	position: relative;
	display: inline-block;
    font-family: 'dosis', sans-serif;
	margin: 10px 5px;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.3em;
}

header nav .a-header:hover,
header nav .a-header:focus {
	outline: none;
}

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.button {
   
    font-family: 'dosis', sans-serif; 
    color: #fff;
    border: none;
    position: relative;
    height: 60px;
    font-size: 1em;
    padding : 0.1em;
    cursor: pointer;
    transition: 600ms ease all;
    outline: none;
    float: left;
}
.button:hover {
    background: none;
    color: #EEBF00;
}
.button:before,.button:after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    background: #EEBF00;
    transition: 400ms ease all;
}
.button:after{
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
}
.button:hover:before, .button:hover:after{
    width: 100%;
    transition: 600ms ease all;
}

.a-header:link, .a-header:visited { 
    color: #d3d6e5; 
    text-decoration: none; 
    font-family: 'dosis', sans-serif;
    text-transform: uppercase;
    
}
.a-header:hover, .a-header:active { 
    color: #eaebed; 
    text-decoration: none; 
    font-family: 'dosis', sans-serif; 
}----*/

/*    BURGER MENU     */

/*-- .nav-toggle{
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    position: fixed;
    z-index: 12000;
    top: 6%;
    right: 1.5%;
    cursor: pointer;
    z-index: 999999999999999;
}

.nav-toggle span { 
    right: 0%; 
}

.nav-toggle span, 
.nav-toggle span:before, 
.nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 40px;
  background: #EEBF00;
  display: block;
  content: '';
  z-index:10000;
  position: absolute;
}

.nav-toggle span:before {
  top: -10px;
}
.nav-toggle span:after {
  bottom: -10px; 
}

.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
.nav-toggle--is-active span {
  background-color: transparent;
}
.nav-toggle--is-active span:before, .nav-toggle--is-active span:after {
  top: 0;
}
.nav-toggle--is-active span:before {
  -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.nav-toggle--is-active span:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}  */



.curseur1 {
    cursor: pointer; 
}



p {
    font-family: 'dosis', sans-serif;
    font-weight: 400;
    color:#fff;
    font-size: 1em;
    /*font-style:italic;*/
}




#section {
    height: 100%;
    width: 100%;
}

section {
    margin: 0 auto;
padding: 0 auto; 
    }

.fleche { 
    position: fixed;
    bottom:10px;
    z-index:100;
    left: 45%;
    margin-left: 30px;
    display: none;
    
    }


.grow { transition: all 2s ease-in-out;}
.grow:hover { 
    -webkit-transform: scale(1.15); /* effet grossissant de 15% */
	-moz-transform: scale(1.15);
    transform: scale(1.15);
}

.grow1 { transition: all 2s ease-in-out;}
.grow1:hover { 
    -webkit-transform: scale(1.05); /* effet grossissant de 5% */
	-moz-transform: scale(1.05);
    transform: scale(1.05);
}






/*------------------- video fond d'écran page contact qui suisje et index -------------------------*/
video {
    padding: 0 auto;
    margin: 0 auto;
}

#bgVid {
    position: relative;
    right:0;
    bottom:0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -5;
    background: url(../images/bg-poster.jpg)no-repeat;
    background-size: cover;
    

}

.video-moi {
    position: absolute;
    width: 600px;
    height: 338px;
    margin-top: -35%;
    margin-left: 7%;
    z-index: 99999;
    /*box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);*/
    padding: 0 auto;
    border: 0;
    border-radius: 0px;
    }

.video-index-deco {
    position: absolute;
    width: 600px;
    height: 338px;
    margin-top: -50%;
    margin-left: 7%;
    z-index: 9999999;
    /*box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);*/
    padding: 0 auto;
    border: 0;
    border-radius: 0px;
    }

.homepage-hero-module {
    border-right: none;
    border-left: none;
    border-top: none;
    position: relative;
    z-index: 0;
    
}


.no-video .video-container video,
.touch .video-container video {
    display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
    
}
.video-container {
    position: relative;
    bottom: 0;
    left: 0;
    height: auto;
    min-width: 100%;
    overflow: hidden;
    background: none;
}
.video-container .poster img video {
    width: 100%;
    bottom: 0;
    position: absolute;
}
.video-container .filter {
    z-index: 100;
    position: absolute;
    /*background: rgba(0, 0, 0, 0.4);*/
    width: 100%;
}
.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
}
.video-container video.fillWidth {
    min-width: 100%;
    min-height: auto;
    margin-top: -2%;
    margin: 0;
    padding: 0;
    
}



strong { font-weight: 500;}


.a2:link, .a2:visited { color: #398024; text-decoration: none; }
.a2:hover, .a2:active { color: #ba0f1f; text-decoration: none; }





.superpose1 {
    width: 200px;
    height: auto;
	position: absolute;	
	top: 10%;		
    left: 50%;
    margin-left: -100px;
    cursor: pointer;
    z-index: 999999;		
	}

.superpose2 {
	position: absolute;	
	top: 70%;		
    margin: 0 auto;
    padding: 0 auto;
    width: 100%;
    background-color: #9dd3ce;
    z-index:50;		
	}

.superpose3 {
	position: absolute;
    width: 200px;
	top: 5%;		
    left: 50%;
    margin-left: -100px;
    cursor: pointer;
    z-index: 2;		
	}

.superpose-logo-menu {
    margin-right: 10px;
    margin-top: 5%;
    cursor: pointer;
    z-index: 2;
    float: left;
     
	}


/*-----------------page index--------------------------*/
#prenom {
    position: absolute; 
    width: 100%; 
    text-align: center;
    margin: 0; 
    padding:0; 
    top: 40%;
    color: #bbc3d8; 
    font-size: 4em; 
    font-family: 'Orbitron', sans-serif;
    font-weight: 100;
    opacity: 1;
    z-index: 13;
    }
    
#prenom-page-index {
    position: absolute; 
    width: 100%; 
    text-align: center;
    margin: 0; 
    padding:0; 
    top: 35%;
    color: #bbc3d8; 
    font-size: 4em; 
    font-family: 'Orbitron', sans-serif;
    font-weight: 100;
    opacity: 1;
    z-index: 13;
    }

#prenom-page-web {
    position: absolute; 
    width: 100%; 
    text-align: center;
    margin: 0; 
    padding:0; 
    top: 40%;
    color: #bbc3d8; 
    font-size: 4em; 
    font-family: 'Orbitron', sans-serif;
    font-weight: 100;
    opacity: 1;
    z-index: 13;
    }
    
#prenom-page-deco-2022 {
    position: absolute; 
    width: 100%; 
    text-align: center;
    margin: 0; 
    padding:0; 
    top: 38%;
    color: #bbc3d8; 
    font-size: 4em; 
    font-family: 'Orbitron', sans-serif;
    font-weight: 100;
    opacity: 1;
    z-index: 13;
    }
    
/*h1 .span-bis-web {
    font-size: 4.2em;
    color: #EEBF00;
    margin-left: 0%;
   
    
}*/

#webdesigner {
     position: absolute; 
    width: 100%; 
    text-align: center;
    margin: 0; 
    padding:0; 
    top: 45%;
    color: #95a781; 
    font-size: 3.5em; 
    font-family: 'BC Alphapipe L Regular', sans-serif; 
    font-weight: 100;
    text-transform: uppercase;
    text-align: center;
    opacity: 1;
    z-index: 14;
    line-height: normal;
    }
    
#webdesigner .span-bis-web {
    font-size: 1.8em;
    color: #EEBF00;
    margin-left: 0%;
   
    
}
    
#webdesigner-contact {
     position: absolute; 
    width: 100%; 
    text-align: center;
    margin: 0; 
    padding:0; 
    top: 50%;
    color: #95a781; 
    font-size: 3.5em; 
    font-family: 'BC Alphapipe L Regular', sans-serif; 
    font-weight: 100;
    text-transform: uppercase;
    text-align: center;
    opacity: 1;
    z-index: 14;
    }

#webdesigner-bis {
     position: absolute; 
    width: 100%; 
    text-align: center;
    margin: 0; 
    padding:0; 
    top: 50%;
    color: #95a781; 
    font-size: 3.5em; 
    font-family: 'BC Alphapipe L Regular', sans-serif; 
    font-weight: 100;
    text-transform: uppercase;
    text-align: center;
    opacity: 1;
    z-index: 14;
     line-height: normal;
    }
#webdesigner-bis .span-bis-web {
    font-size: 1.6em;
    color: #EEBF00;
    margin-left: 0%;
   
    
}    


#motiondesign {
     position: absolute; 
    width: 1900px;
    height: auto;
     left: -100%;
    /*left:50%;
    margin-left: -250px;*/
    text-align: center;
    margin: 0; 
    padding:0;  
    top:68%;
    color:#fff; 
    font-size:2.5vw; 
    font-family: 'BC Alphapipe L Regular', sans-serif; 
    margin-top: 2%;
    opacity: 0;
    z-index: 15;
    }

#motiondesign .span-contact-titre {
    padding: 0;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    color: #EEBF00;
    font-size: 2em;
    padding-left: -5%;
        
    } 
#motiondesign-contact {
        position: absolute; 
       width: 1900px;
       height: auto;
        left: -100%;
       /*left:50%;
       margin-left: -250px;*/
       text-align: center;
       margin: 0; 
       padding:0;  
       top:68%;
       color:#fff; 
       font-size:2.5vw; 
       font-family: 'BC Alphapipe L Regular', sans-serif; 
       margin-top: 2%;
       opacity: 0;
       z-index: 15;
       }
   #motiondesign-contact .span-contact-titre {
       padding: 0;
       font-family: 'BC Alphapipe L Regular', sans-serif;
       color: #EEBF00;
       font-size: 2em;
       
           
       } 

.fond-projet {
    position:relative;
    background-image: url(../images/bg-page1-projet.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    max-width: 100%;
    width: auto;
    max-height: 100%;
    height: auto;
    z-index: 5;
    /*margin-top: 20px;*/
}

.slide400bis {
    padding-top: 15%;
	padding-bottom: 15%;
    padding-right: 10%;
    padding-left: 5%;
}

.slide5 {
   padding-top: 5%;
}

.slide5-deco {
   padding-top: 5%;
}

.slide5-bouton {
   padding-top: 5%;
   padding-bottom: 5%;
}
    
.slide5-bouton-shopping {
   margin-top: 5%;
   margin-bottom: 5%;
}

.slide6 {padding-top: 2%;
padding-bottom: 10%;}



.titre1 {
     position: relative; 
    width: 100%; 
    text-align: center;
    margin: 0; 
    padding:0; 
    color: black; 
    font-size: 2vw; 
    font-family:"Lato","Lato1"; 
    font-weight: 100;
    text-transform: uppercase;
    opacity: 1;
    z-index: 14;
    }

.titre2 {
     position:relative; 
    width: 100%; 
    text-align: center;
    margin: 0;
    margin-bottom: 40px;
    padding: 0;
    color:black; 
    font-size:3vw; 
    font-family:"Lato","Lato1"; 
    font-weight:100;
    text-transform: uppercase;
    opacity: 1;
    z-index: 14;
    }


.h2deco-titre-electra {
    margin: 0;
    margin-top: 0%;
    color: #505c74;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    }
.h2deco-titre-electra .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}


.h2deco-titre-1-electra {
    margin: 0;
    margin-top: 0%;
    color: #505c74;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    }

.h2deco-titre-1-electra .span-forfait {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}


.h2deco-titre-atria {
    margin: 0;
    margin-top: 0%;
    color: #5b6178;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    }
.h2deco-titre-atria .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}
.h2deco-titre-1-atria {
    margin: 0;
    margin-top: 0%;
    color: #5b6178;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    }

.h2deco-titre-1-atria .span-forfait {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}





.h2deco-titre-andromede {
    margin: 0;
    margin-top: 0%;
    color: #5b6178;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    }
.h2deco-titre-andromede .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}
.h2deco-titre-1-andromede {
    margin: 0;
    margin-top: 0%;
    color: #5b6178;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    }

.h2deco-titre-1-andromede .span-forfait {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}




.h2deco-titre-erakis {
    margin: 0;
    margin-top: 0%;
    color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    }
.h2deco-titre-erakis .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}
.h2deco-titre-1-erakis {
    margin: 0;
    margin-top: 0%;
    color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    }

.h2deco-titre-1-erakis .span-forfait {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}

.p-page-home-staging {
    line-height: normal;
    font-family: 'Dosis', sans-serif;
     color: #505c74; 
    padding:0; 
    margin:0;
    font-size: 2.5em;
    text-align: left;
    margin-left: 10%;
    
}

.p-page-home-staging-bis {
    line-height: normal;
    font-family: 'Dosis', sans-serif;
     color: #505c74; 
    padding:0; 
    margin:0;
    font-size: 2.5em;
    text-align: left;
    margin-left: 10%;
    margin-top: -5%;
}

.titre-conception-1 {
    margin: 0;
    margin-top: 0%;
    color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    margin-left: 5%;
    text-align: center;
    text-transform: uppercase;
    }

.titre-galery-conception {
   
    margin: 0;
    margin-top: 0%;
   
    padding-bottom: 5%;
    color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    text-align: center;
    text-transform: uppercase;
    z-index: 99999;
    }
    


.titre-galery-home-staging {
   
    margin: 0;
    margin-top: 5%;
    padding-bottom: 5%;
    color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    text-align: center;
    text-transform: uppercase;
    z-index: 99999;
    }

.titre-galery-shopping {
    margin: 0;
    margin-top: -12%;
    padding-bottom: 0%;
    color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    text-align: center;
    text-transform: uppercase;
    z-index: 99999;
    }
.titre-moi {
    margin: 0;
    margin-top: 0%;
    color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    text-transform: uppercase;
    }
.span-prix-conception {
     color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 3em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    margin-left: 10%;
    
}
.titre-shopping-1 {
    margin: 0;
    padding-bottom: 2%;
    color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 3em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    text-transform: uppercase;
    margin-left: 10%;
    margin-right: 10%;
    }
.h6deco-moi-deco { 
    font-size: 1.8em;
    color: #505c74; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
    margin-top: 2%;
    padding-left: 10%;
    padding-right: 10%;
    text-align: justify;
    
     }

.h6deco-moi { 
    font-size: 1.8em;
    color: #505c74; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
    margin-top: 2%;
    padding-left: 10%;
    padding-right: 10%;
    text-align: justify;
    
     }

.h6deco-page-amenagement { 
    font-size: 1.8em;
    color: #505c74; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
    margin-top: 2%;
    padding-left: 10%;
    padding-right: 10%;
    text-align: justify;
    
     }

.h6deco-page-deco-1 { 
    font-size: 1.8em;
    color: #505c74; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
    margin-top: 2%;
    padding-left: 10%;
    padding-right: 10%;
    text-align: justify;
    
     }

.h2deco-video {
    margin: 0;
    margin-top: 2%;
    color: #fff;/*#dbdbdb  #1d2d4e*/
    font-size: 3.5em;
    font-weight: 200;
    font-family: 'dosis', sans-serif;
    text-align: center;
    }

.span-prix-origine {
    font-size: 0.3em;
    background-color: #dceff8;
    padding-bottom: -5%;
   
}
.h2deco .span-x {
    font-size: 0.4em;
    font-family: 'dosis', sans-serif;
    padding-top: -2%;
}




.h2deco-forfait {
    margin: 0;
    margin-top: 2%;
    color: #607a93;   /* #4b4764  #1d2d4e  #dbdbdb*/
    font-size: 3.5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   
    text-align: center;
    }
.h2deco-forfait .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}

.h2deco-forfait .span-prix {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.2em;
    
}
    
.h2deco-box-riva {
    margin: 0;
    margin-top: 0%;
    color: #43646B;   /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 3em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    font-weight: 200;
    }

.h2deco {
    margin: 0;
    margin-top: 0%;
    color: #43646B;   /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    font-weight: 200;
    }
.h2deco .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}

.h2deco .span-prix {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.6em;
    
}
    
.h2deco {
    margin: 0;
    margin-top: 0%;
    color: #43646B;   /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    font-weight: 200;
    }
.h2deco .span-forfait {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}

.h2-page-contact {
    margin: 0;
    margin-top: 0%;
    color: #fff ;   /* #43646B #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 3em;
    font-family: 'dosis', sans-serif;
   padding-top: 10%;
    text-align: center;
    padding-bottom: 2%;
    font-weight: 200;
    text-transform: uppercase;
    padding-left: 10%;
    padding-right: 10%;
    }
    
.h6deco-contact { 
    font-size: 1.5em;
     color: #fff; /* #505c74 #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
    margin-top: 2%;
     padding-left: 10%;
    padding-right: 10%;
    text-align: justify;
    
    
     }
    
.h6deco-contact-bis { 
    font-size: 1.5em;
    color: #fff; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
    margin-top: 2%;
     padding-left: 10%;
    padding-right: 10%;
    text-align: justify;
    }
.h2deco-servannaise {
    margin: 0;
    margin-top: 0%;
    color: #43646B;   /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.5em;
    font-family: 'dosis', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    font-weight: 200;
    text-transform: uppercase;
    }

.h2deco-shopping {
    margin: 0;
    margin-top: 0%;
    color: #FAE6EB;   /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.3em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    }
.h2deco-shopping .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.6em;
}
.h2deco-shopping .span-contenu-prix {
    color: #FAE6EB; 
    padding:0; 
    margin:0;
    font-size: 0.8em;
}

.h2deco-conception {
    margin: 0;
    margin-top: 0%;
    color: #FAE6EB;   /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.3em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    }
.h2deco-conception .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}
.h2deco-conception .span-contenu-conception {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1em;
}

.slide-img-conception {
    margin-top: 15%;
    margin-left: 20%;
}



.h2deco-home-staging-titre {
    margin: 0;
    margin-top: 0%;
    color: #d4e7e6;   /* #689aad #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.3em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    }
.h2deco-home-staging-titre .span-contenu-prix {
    margin: 0;
    margin-top: 0%;
    color: #d4e7e6;   /* #689aad #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 1em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    }
.h2deco-home-staging-titre .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.6em;
}



.h2deco-electra {
    margin: 0;
    margin-top: 0%;
    color: #d4e7e6;   /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    }
.h2deco-electra .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
}

.h2deco-electra .span-prix {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 0.4em;
    
}


.h2deco-atria {
    margin: 0;
    margin-top: 0%;
    color: #82B0A5;  /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    }
.h2deco-atria .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.8em;
} 
.h2deco-atria .span-prix {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 0.4em;
    
}    

    

.h2deco-andromede {
    margin: 0;
    margin-top: 0%;
    color: #d4e7e6;   /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.3em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    }
.h2deco-andromede .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.6em;
}

.h2deco-andromede .span-prix {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 0.4em;
    
}

.h2deco-erakis {
    margin: 0;
    margin-top: 0%;
    color: #d4e7e6;   /*#689aad  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.3em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    }
.h2deco-erakis .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.6em;
}

.h2deco-erakis .span-prix {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 0.4em;
    
}



.h2deco-servannaise {
    margin: 0;
    margin-top: 0%;
    color: #43646B;   /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4em;
    font-weight: 200;
    font-family: 'dosis', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    text-transform: uppercase;
    }





.h2deco-bis {
    margin: 0;
    padding-top: 5%;
    color: #fff;/*#dbdbdb  @1d2d4e*/
    font-size: 3.5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    text-transform: uppercase;
    text-align: center;
    }

.h2deco-banniere {
    margin: 0;
    margin-top: 0%;
    color: #43646B;   /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 5%;
    text-align: center;
    padding-bottom: 2%;
    text-transform: uppercase;
    }

.h2-titre {
    margin: 0;
   
   padding-top: 5%;
    margin-bottom: 0;
    color: #EEBF00;    /*# dbdbdb  #1d2d4e*/
    font-size: 4em;
    font-family: 'bc alphapipe l regular', sans-serif; /*'BC Alphapipe L', sans-serif;*/
    font-weight: 300;
    text-transform: uppercase;
   
    }

.h2-titre-page-deco-2022 {
    margin: 0;
   padding-top: 5%;
    margin-bottom: 0;
    color: #EEBF00;    /*# dbdbdb  #1d2d4e*/
    font-size: 4em;
    font-family: 'bc alphapipe l regular', sans-serif; /*'BC Alphapipe L', sans-serif;*/
    font-weight: 300;
    text-transform: uppercase;
   
    }

.h2-titre-bis {
    margin: 0;
    margin-top: 5%;
    margin-bottom: 2%;
     color: #607b93;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4em;
    font-family: 'bc alphapipe l regular', sans-serif; /*'BC Alphapipe L', sans-serif;*/
    font-weight: 300;
   
    }
    
.h2-titre-index {
    margin: 0;
    padding-top: 5%;
    margin-bottom: 0;
    color: #EEBF00;    
    font-size: 4em;
    font-family: 'bc alphapipe l regular', sans-serif; 
    font-weight: 300;
    text-transform: uppercase;
   
    }
    
.h2-titre-index .span-titre-index {
    margin: 0 auto;
    padding: 0 auto;
    font-family: 'dosis', sans-serif;
    color: #607b93; 
    font-size: 1em;
    text-transform: none;
    
    }

.h3-gite {
    margin: 0;
    margin-top: 0%;
    color: #43646B;   /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.5em;
    font-family: 'dosis', sans-serif;
    padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    text-transform: uppercase;
    font-weight: 200;
    }

.h3-gite .span-gite {
    font-size: 0.5em;
    line-height: 1;
    
}

.h3-cv {
    margin: 0;
    margin-top: 0%;
    color: #cae9e8;   /*  #607b93 #4b4764 #1d2d4e #dbdbdb*/
    font-size: 4.3em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    padding-left: 5%;
    padding-right: 5%;
    }
.h3-cv .span-templet {
    color: #EEBF00; 
    padding:0; 
    margin:0;
    font-size: 1.6em;
}

.h3-cv .span-contenu-cv {
    color: #cae9e8; 
    padding:0; 
    margin:0;
    font-size: 0.6em;
    
}
.espace-colonne {
    margin-top: 3%;
    
}

.h4-cv {
     font-family: 'BC Alphapipe L Regular', sans-serif;
    color: #EEBF00;
    margin-top: 4%;
    font-size: 2em;
    line-height: 1;
    text-transform: uppercase;
    
    
}

.h4-cv-bis {
     font-family: 'BC Alphapipe L Regular', sans-serif;
    color: #EEBF00;
    margin-top: 2%;
    font-size: 2em;
    line-height: 1;
    text-transform: uppercase;
    
}
.h6deco-texte { 
    font-size: 1.8em;
    color: #505c74; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
    margin-top: 2%;
    text-align: center;
    
     }
.h6-page-gite { 
    font-size: 1.8em;
    color: #505c74; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 100;
    padding-bottom: 5%;
    margin-top: 2%;
    text-align: justify;
    padding-left: 10%;
    padding-right: 10%;
    
     }

.h6-light-box { 
    font-size: 1.8em;
    color: #505c74; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
    margin-top: 2%;
     margin-right: 20%;
    margin-left: 20%;
    text-align: justify;
    
     }
.h4-contact {
    font-size: 2em;
    color: #505c74; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    font-weight: 200;
    text-transform: uppercase;
    text-align: center;
    
}

.h6deco-box { 
    font-size: 1.8em;
    color: #505c74; /*  #1d2d4e */
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    padding-bottom: 5%;
    font-weight: 200;
    padding-left: 20%;
    padding-right: 20%;
    margin-top: 0%;
    text-align: justify;
    
     }

.p1-siteweb {
    font-family: 'dosis', sans-serif;
   font-weight: 300;
    color: #574f55;
    font-size: 1.5em;
   line-height: 1.5;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-left: 0%;
  

}

.h6deco-bis { 
    font-size: 2em;
    color:#505c74;
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    padding-bottom: 0%;
    padding-top: 3%;
     }

.h6deco-contenue-offre { 
    font-size: 1.8em;
    color: #c6e5e4; /* #d3d6e5 #e1e7ea #19291f*/
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    padding-bottom: 0%;
    margin-top: 2%;
    text-align: justify;
    padding-left: 2%;
     }

.h6deco-contenue-offre-bis { 
    font-size: 1.4em;
    color:#fff;
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    padding-bottom: 5%;
    margin-top: -2%;
    text-align: justify;
    padding-left: 4.5%;
    font-weight: 100;
     }


.h6deco-contenue-offre-1 { 
    font-size: 1.5em;
    color:#fff; /*  #1d2d4e*/
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    padding-bottom: 0%;
    margin-top: 2%;
    text-align: justify;
    padding-left: 2%;
     }

.h6deco-contenue-offre-2 { 
    font-size: 1.5em;
    color: #c6e5e4; /* #dfe7e6 #19291f*/
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    padding-bottom: 0%;
    margin-top: 2%;
    text-align: justify;
    padding-left: 2%;
     }

.h6deco-prix { 
    font-size: 1.5em;
    color: #505c74;
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    padding-bottom: 2%;
    margin-top: 2%;
    }

.h6deco-forfait { 
    width: 650px;
    height: auto;
    position: relative;
    font-size: 1.5em;
    color: #505c74; /* #1d2d4e*/
    line-height: normal;
    font-family: 'Dosis', sans-serif;
    padding-bottom: 5%;
    margin-top: 2%;
    text-align: left;
    margin-left: 20%;
 }




.img-riva {
    margin-left: 8%;
    padding-bottom: 5%;
}

.h2deco3 {
    padding-top: 10%;
    padding-left: 5%;
    color: #fff;/*#dbdbdb*/
    font-size: 5em;
    font-family: 'bc alphapipe l regular', sans-serif;
    text-transform: uppercase;
    }


.fond-blanc1 { 
    background-color: #ffffff; 
    margin: 0 auto; 
    padding-top: 50%;}

.caption2 {
	position: absolute;
    height: 100%;
    width: 100%;
    top:0;
	left: 0; 
    bottom: 20%;
	color: #ffffff;
	background: rgba(28,31,36,0.6) ; /* rgba(208,207,212,0.5)*/
    overflow: hidden;
	transition: all 0.5s ease;
   
}
.caption2 .span2 { 
    display: block;
    /* position: absolute;
    top: 40%;
    left: 0;
    right: 0; */
    }
.caption2 .span2 h2 {
    font-family: 'dosis', sans-serif;
    font-weight: 300;
    color: #dcf0f4;
    padding: 0;
    
   
    
}
.caption2 .span2 h1:hover {
    opacity: 1;
    transition: all 0.5s ease;
   
}
.span2 { 
    margin-left: 5%;
    }

.caption2 .span2 h1 {
    font-family: 'BC Alphapipe L Regular', sans-serif;
    color: #EEBF00;
    padding-top: 60%;
    font-size: 5em;
    line-height: 1;
    opacity: 1;
   
}



.h2presdeco {
    font-weight: 900;
    padding-top: 10%;
    padding-left: 5%;
    color: #85b2ae;/*#dbdbdb*/
    font-size: 4.5em;
    font-family: 'kimberley', arial, helvetica, sans-serif;

    }



.deco-projet {
    position: fixed;
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 auto;
    background-color: #b4f2ec;
    background-size:contain;
    background-position: center center;
    z-index: -1;
   
    }

.bm-projet {
    position: fixed;
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 auto;
    background-color: #7ba1bf;
    background-size:contain;
    background-position: center center;
    z-index: -1;
   
    }


.slidedeco {
   
    padding-top:60% ;
    padding-bottom: 0;
    margin: 0;
    z-index: 9999;
}
    
.img-ombre {
      -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.55);
        
    }

/*-----------    video site web projet  riva    -----------------------*/


.video-iframe {
	position: relative;
    width: 560px;
    height: 360px;
	}


.video {padding: 0; margin: 0;}
 

.videowrapper1 {
	position: relative;
    min-width: 100%;
    margin: 0;
	padding-top: 0;
	padding-bottom: 56.25%; /* 16:9 */
    margin-bottom: 0;
	}
.videowrapper1 iframe {	/* Cible iframe contenu dans l'élément qui possède la class videowrapper */
	position: absolute;
    margin: 0;
	top: 0;
	left: 0;
    right: 0;
	width: 80%;
	height: 80%;
    margin-left: 2%;
    
   
	}

.videowrapper2 {
	position: relative;
    min-width: 100%;
    margin: 0;
	padding-top: 0;
	padding-bottom: 56.25%; /* 16:9 */
    margin-bottom: 0;
	}
.videowrapper2 iframe {	/* Cible iframe contenu dans l'élément qui possède la class videowrapper */
	position: absolute;
    margin: 0;
	top: 0;
	left: 0;
    right: 0;
	width: 90%;
	height: 90%;
    margin-left: 5%;
	}

.videowrapper3 {
	position: relative;
    min-width: 100%;
    margin: 0;
	padding-top: 0;
	padding-bottom: 56.25%; /* 16:9 */
    margin-bottom: 0;
    
    
	}
.videowrapper3 iframe {	/* Cible iframe contenu dans l'élément qui possède la class videowrapper */
	position: absolute;
    margin: 0;
	top: 0;
	left: 0;
    right: 0;
	width: 90%;
	height: 90%;
    margin-left: 5%;
   
	}

.videowrapper4 {
	position: relative;
    min-width: 100%;
    margin: 0;
	padding-top: 0;
	padding-bottom: 56.25%; /* 16:9 */
    margin-bottom: 0;
    cursor: pointer;
	}
.videowrapper4 iframe {	/* Cible iframe contenu dans l'élément qui possède la class videowrapper */
	position: absolute;
    margin: 0;
	top: 0;
	left: 0;
    right: 0;
	width: 80%;
	height: 80%;
    margin-left: 10%;
    margin-right: 10%;
    
	}



.vignette-realisation {
    width: 45%;
    height: 80%;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;  /* gestion du depassement cache le dépasement */
    cursor: pointer;
    left:0;
    margin: 10px;
    }
.vignette-realisation img { 
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    
    }

.vignette-realisation .vignette-caption {
    background: rgba(28,31,36,0.5);
    position: absolute;
    height: 100%;
    width: 100%;
	left: 0; 
    bottom: 0;
	color: #d1cfd4;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    }

.vignette-realisation:hover .vignette-caption {opacity: 1;}

.vignette-realisation:hover img {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
    -o-transform: scale(1.15);
    }








.vignette-conception {
    width: 45%;
    height: 80%;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;  /* gestion du depassement cache le dépasement */
    cursor: pointer;
    left:0;
    margin: 10px;
    }
.vignette-conception img { 
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    
    }

.vignette-conception .vignette-caption {
    background: rgba(28,31,36,0.5);
    position: absolute;
    height: 100%;
    width: 100%;
	left: 0; 
    bottom: 0;
	color: #d1cfd4;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    }

.vignette-conception:hover .vignette-caption {opacity: 1;}

.vignette-conception:hover img {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
    -o-transform: scale(1.15);
    }
/*-----------    images projet   -----------------------*/


.vignette {
    width: 45%;
    height: 80%;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;  /* gestion du depassement cache le dépasement */
    cursor: pointer;
    left:0;
    margin: 10px;
    
    }
.vignette img { 
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
   
    
    }

.vignette .vignette-caption {
    background: rgba(28,31,36,0.5);
    position: absolute;
    height: 100%;
    width: 100%;
	left: 0; 
    bottom: 0;
	color: #d1cfd4;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    }

.vignette:hover .vignette-caption {opacity: 1;}

.vignette:hover img {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
    -o-transform: scale(1.15);
    }


span { 
    margin-left: 5%;
    margin-top: 0;
    }

span .h4-templet {
    font-family: 'BC Alphapipe L Regular', sans-serif;
    font-size: 3em;
    line-height: 1;
    /*text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.50);*/
}





.vignette-box {
    width: 35%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;  /* gestion du depassement cache le dépasement */
    cursor: pointer;
    left:0;
    margin: 20px;
    }
.vignette-box img { 
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    
    }

.vignette-box .vignette-caption {
    background: rgba(28,31,36,0.5);
    position: absolute;
    height: 100%;
    width: 100%;
	left: 0; 
    bottom: 0;
	color: #d1cfd4;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    }

.vignette-box:hover .vignette-caption {opacity: 1;}

.vignette-box:hover img {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
    -o-transform: scale(1.15);
    }

.caption1 {
	position: absolute;
    height: 100%;
    width: 100%;
	left: 0; 
    bottom: 0;
	color: #a09fa7;
    opacity: 0;
	background: rgba(28,31,36,0.6);
    overflow: hidden;
	transition: all 0.5s ease;
    
   
}
.caption1 span { 
    position: absolute;
    display: block;
    bottom: 40%;
    left: 0;
    right: 0;
    }
.caption1 span .h4-templet {
    font-family: 'BC Alphapipe L Regular', sans-serif;
    font-size: 3em;
    line-height: 1;
    /*text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.50);*/
}
.caption1 span .h6proj {
    font-family: 'dosis', sans-serif;
    font-size: 2.2em;
    line-height: 1;
    color: #dee9ec;
    padding: 0;
    
}
.caption1:hover {
    opacity: 1;
    transition: all 0.5s ease;
   
}



.caption1 .span3 h4 {
    padding-top: 15%;
    font-size: 2.4em;
    line-height: 0.9;
    
}
    
.span3 h6 {
   
    font-size: 1.2em;
    line-height: 0.9;
    
}



figure {
    border: none;
    margin: 0 auto;
    padding: 0 auto;
    

}

img {
    border: none;
    padding: 0 auto;
    margin: 0 auto;
   
}

.img-affiche {
    margin-left: 15%;
    margin-bottom: 2%;
    margin-top: 2%;
}


.img-affiche-bis {
    width: 60%;
    margin-left: 22%;
    margin-bottom: 2%;
    margin-top: 2%;
}

.img-icone-lit {
    width: 50%; 
    margin-left: 25%;
    margin-top: 10%;
    padding-bottom: 11.8%;
}

.img-icone-lit-bis {
    width: 50%; 
    margin-left: 25%;
    margin-top: 10%;
    padding-bottom: 11.8%;
}


.block-add {width: 90%; height: 80%;}

.vignette-bis{
    width: 45%;
    height: 80%;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;  /* gestion du depassement cache le dépasement */
   
    cursor: pointer;
    left:0;
    margin: 10px;
    }
.vignette-bis img { 
    max-height: 100%;
    height: auto;
    background-size: cover;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    
    }

.vignette-bis .vignette-caption {
    background: rgba(28,31,36,0.5);
    position: absolute;
    height: 100%;
    width: 100%;
	left: 0; 
    bottom: 0;
	color: #ffffff;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    }

.vignette-bis:hover .vignette-caption {opacity: 1;}

.vignette-bis:hover img {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
    -o-transform: scale(1.15);
    }

.bouton6-templet {
    position: relative;
    margin-right: 0;
	display: inline-block;
	zoom: 1;
	margin: 0; 	/* pour repousser (ou pas) les boutons entre eux */ /* Block en ligne pour consolider les paddings limités par la hauteur du texte */
	padding: 10px 20px;	
    margin-bottom: 1%; 
    margin-top: 50%;
    margin-left: 5%;
	background-color: #EEBF00;
	font-family: 'Dosis', sans-serif; 
	/*font-weight: bold;*/
	font-size: 1.2em;
	color: #4b4764; /* #1c3148*/
   border-radius: 5px;
	vertical-align: middle;	/* permet l'alignement vertical sur la ligne de texte (images, icones, etc.) */
	/*border: 2px solid #000;*/
    cursor: pointer;
    
	}
.bouton6-templet:link, .bouton6-templet:visited { 
	background-color: none; 
	color: #1c3148;
	text-decoration: none; 
	transition: 0.2s ease-out; 
	}
.bouton6-templet:hover, .bouton6-templet:active { 
	background-color: rgba(40,48,61,.8);  
	color: #EEBF00;
	text-decoration: none; 
	transition: 0.2s ease-in;
    box-shadow: 0 10px 5px rgba(40,48,61,.2);
	}

.img-cadre-deco {
    margin-top: 12%;
    margin-bottom: 8%;
}


.caption-deco-templet {
	position: absolute;
    height: 100%;
    width: 100%;
	left: 0; 
    bottom: 0;
	color: #dbf1f4;
    opacity: 0;
	background: rgba(28,31,36,0.7);
    overflow: hidden;
	transition: all 0.5s ease;
   
}
.caption-deco-templet span { 
    position: absolute;
    display: block;
    bottom: 30%;
    left: 0;
    right: 0;
    }
.caption-deco-templet span h4 {
    padding: 0;
    font-size: 4em;
    color: #EEBF00;
    /*text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.50);*/
    
}
.caption-deco-templet:hover {
    opacity: 1;
    transition: all 0.5s ease;
   
}
span { 
    margin-left: 5%;
    margin-top: 0;
    }

span .h6proj-deco {
    font-family: 'dosis', sans-serif;
    font-size: 2.2em;
    line-height: 1;
    color: #dee9ec;
    
}


.bouton6-templet-deco {
    position: relative;
    margin-right: 0;
	display: inline-block;
	zoom: 1;
	margin: 0; 	/* pour repousser (ou pas) les boutons entre eux */ /* Block en ligne pour consolider les paddings limités par la hauteur du texte */
	padding: 10px 20px;	
    margin-bottom: 1%; 
    margin-top: 50%;
    margin-left: 5%;
	background-color: #EEBF00;
	font-family: 'Dosis', sans-serif; 
	/*font-weight: bold;*/
	font-size: 1.2em;
	color: #4b4764; /* #1c3148*/
    border-radius: 5px;
	vertical-align: middle;	/* permet l'alignement vertical sur la ligne de texte (images, icones, etc.) */
	/*border: 2px solid #000;*/
    cursor: pointer;
    
	}
.bouton6-templet-deco:link, .bouton6-templet-deco:visited { 
	background-color: none; 
	color: #1c3148;
	text-decoration: none; 
	transition: 0.2s ease-out; 
	}
.bouton6-templet-deco:hover, .bouton6-templet-deco:active { 
	background-color: rgba(40,48,61,.8);  
	color: #EEBF00;
	text-decoration: none; 
	transition: 0.2s ease-in;
    box-shadow: 0 10px 5px rgba(40,48,61,.2);
	}

.bouton6-page-index-deco {
    position: relative;
    margin-right: 0;
	display: inline-block;
	zoom: 1;
	margin: 0; 	/* pour repousser (ou pas) les boutons entre eux */ /* Block en ligne pour consolider les paddings limités par la hauteur du texte */
	padding: 10px 20px;	
    margin-bottom: 5%; 
    margin-top: -8%;
    margin-left: 8%;
	background-color: #EEBF00;
	font-family: 'Dosis', sans-serif; 
	/*font-weight: bold;*/
	font-size: 1.2em;
	color: #4b4764; /* #1c3148*/
    border-radius: 5px;
	vertical-align: middle;	/* permet l'alignement vertical sur la ligne de texte (images, icones, etc.) */
	/*border: 2px solid #000;*/
    cursor: pointer;
    
	}
.bouton6-page-index-deco:link, .bouton6-page-index-deco:visited { 
	background-color: none; 
	color: #1c3148;
	text-decoration: none; 
	transition: 0.2s ease-out; 
	}
.bouton6-page-index-deco:hover, .bouton6-page-index-deco:active { 
	background-color: rgba(40,48,61,.8);  
	color: #EEBF00;
	text-decoration: none; 
	transition: 0.2s ease-in;
    box-shadow: 0 10px 5px rgba(40,48,61,.2);
	}



.caption-bis-templet {
	position: absolute;
    height: 100%;
    width: 100%;
	left: 0; 
    bottom: 0;
	color: #dbf1f4;
    opacity: 0;
	background: rgba(28,31,36,0.6);
    overflow: hidden;
	transition: all 0.5s ease;
   
}
.caption-bis-templet span { 
    position: absolute;
    display: block;
    bottom: 40%;
    left: 0;
    right: 0;
    }
.caption-bis-templet span h4 {
    padding: 0;
    font-size: 4.5em;
    color: #EEBF00;
    /*text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.50);*/
    
}
.caption-bis-templet .span-tarif {
    position: absolute;
    font-family: 'dosis', sans-serif;
    font-size: 0.2em;
    color: aliceblue;
    margin-left: 35%;
    margin-bottom: 12%;
}
.caption-bis-templet .h6proj {
    font-family: 'dosis', sans-serif;
    font-size: 2.2em;
    line-height: 1;
    color: #dee9ec;
    
}
.caption-bis-templet:hover {
    opacity: 1;
    transition: all 0.5s ease;
   
}
span { 
    margin-left: 5%;
    margin-top: 0;
    }





.span-caption { 
font-size: 0.5em;
    }


.caption-bis-templet-1 {
	position: absolute;
    height: 100%;
    width: 100%;
	left: 0; 
    bottom: 0;
	color: #dbf1f4;
    opacity: 0;
	background: rgba(28,31,36,0.6);
    overflow: hidden;
	transition: all 0.5s ease;
   
}
.caption-bis-templet-1 span { 
    position: absolute;
    display: block;
    bottom: 40%;
    left: 0;
    right: 0;
    }
.caption-bis-templet-1 span h4 {
    padding: 0;
    font-size: 4.5em;
    color: #EEBF00;
    /*text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.50);*/
    
}
.caption-bis-templet-1 .span-tarif {
    position: absolute;
    font-family: 'dosis', sans-serif;
    font-size: 0.2em;
    color: aliceblue;
    margin-left: 35%;
    margin-bottom: 12%;
}
.caption-bis-templet-1 .h6proj {
    font-family: 'dosis', sans-serif;
    font-size: 2.2em;
    line-height: 1;
    color: #dee9ec;
    
}
.caption-bis-templet-1:hover {
    opacity: 1;
    transition: all 0.5s ease;
   
}



.caption-bis-templet-2 {
	position: absolute;
    height: 100%;
    width: 100%;
	left: 0; 
    bottom: 0;
	color: #dbf1f4;
    opacity: 0;
	background: rgba(28,31,36,0.6);
    overflow: hidden;
	transition: all 0.5s ease;
   
}
.caption-bis-templet-2 span { 
    position: absolute;
    display: block;
    bottom: 40%;
    left: 0;
    right: 0;
    }
.caption-bis-templet-2 span h4 {
    padding: 0;
    font-size: 4.5em;
    color: #EEBF00;
    /*text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.50);*/
    
}
.caption-bis-templet-2 .span-tarif {
    position: absolute;
    font-family: 'dosis', sans-serif;
    font-size: 0.2em;
    color: aliceblue;
    margin-left: 35%;
    margin-bottom: 12%;
}
.caption-bis-templet-2 .h6proj {
    font-family: 'dosis', sans-serif;
    font-size: 2.2em;
    line-height: 1;
    color: #dee9ec;
    
}
.caption-bis-templet-2:hover {
    opacity: 1;
    transition: all 0.5s ease;
   
}


.caption-bis-templet-3 {
	position: absolute;
    height: 100%;
    width: 100%;
	left: 0; 
    bottom: 0;
	color: #dbf1f4;
    opacity: 0;
	background: rgba(28,31,36,0.6);
    overflow: hidden;
	transition: all 0.5s ease;
   
}
.caption-bis-templet-3 span { 
    position: absolute;
    display: block;
    bottom: 40%;
    left: 0;
    right: 0;
    }
.caption-bis-templet-3 span h4 {
    padding: 0;
    font-size: 4.5em;
    color: #EEBF00;
    /*text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.50);*/
    
}
.caption-bis-templet-3 .span-tarif {
    position: absolute;
    font-family: 'dosis', sans-serif;
    font-size: 0.2em;
    color: aliceblue;
    margin-left: 35%;
    margin-bottom: 12%;
}
.caption-bis-templet-3 .h6proj {
    font-family: 'dosis', sans-serif;
    font-size: 2.2em;
    line-height: 1;
    color: #dee9ec;
    
}
.caption-bis-templet-3:hover {
    opacity: 1;
    transition: all 0.5s ease;
   
}

.slide-bottom {
    margin-bottom: 5%;
    margin-left: 3%;

}

.slide-bottom-section {padding-bottom: 5%; margin-top: 0;}

.slide-bottom-2 {
    margin-bottom: 5%; 
    margin-left: 0%;  
}


.slide-bottom-box {
    padding-bottom: 5%; 
     
}

.triactra {
    margin-top: -20%;
}

.slide-padding-bottom {
    padding-bottom: 5%;
}

.slide-bottom-bis {
    margin-bottom: 10%;
}
.slide-left {margin-left: 8%;}

.slide-left-bis {padding-left: 6%;}

.slide-left-video {margin-right: -8%;}
    
.slide-left-video-1 {
    margin-left: 10%;
        
    }

.slide-left-bg-page {margin-left: 25%;}

.slide-70 {margin-top: 20%;}

.fond-conception {
    background-color: #b4f2ec;
    width: 100%;
    height: 100%;
	z-index: 1;
    
	}

.slide-neg {
    margin-top: -5%;
}

.logo-conception {
   padding-top: 0px;
    padding-left: 20px;

    }
#prenom3 {
    position: absolute; 
    width: 100%; 
    text-align: center;
    margin: 0; 
    padding:0; 
    top:55%;
    color:#fff; 
    font-size:4vw; 
    font-family: "kimberley", "Lato1"; 
    font-weight:300;
    text-transform: uppercase;
    opacity: 1;
    z-index: 13;
    }

.h1-projet {
    position: absolute;
    color: white;
    font-size: 1.4em;
    font-family: 'lato';
    top: 60%;
}


/*-------------------- page art deco --------------------------*/

.art-deco-projet {
    position: fixed;
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 auto;
    background-color: #f48e78;
    background-size:contain;
    background-position: center right;
    z-index: -1;
   
    }

.h2pres-artdeco {
    font-weight: 900;
    padding-top: 10%;
    padding-left: 5%;
    color: #83999E;/*#dbdbdb*/
    font-size: 6em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    
    }

.h2-artdeco3 {
    padding-top: 5%;
    padding-left: 5%;
    color: #43646B;/* #83999E #dbdbdb*/
    font-size: 4.5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    text-transform: uppercase;


    }

.h2-artdeco {
    padding-top: 5%;
    padding-left: 5%;
    color: #43646B;/*#dbdbdb*/
    font-size: 3em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    


    }

.p1-artdeco {
    font-family: 'dosis', arial, helvetica, sans-serif ;
    margin-bottom: 5%;
    color:#fff;
    font-size: 2em;
    padding-left: 0;
    padding-right: 0;
    vertical-align: inherit;
    

}


.art-decobis {
    
    padding:3%;
    font-weight: 900;
    color: #1a1a1a;/*#dbdbdb*/
    font-size: 4.5em;
    font-family: 'kimberley', arial, helvetica, sans-serif;

    }




.slideriva {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 130%;
}

.h1riva {
    padding-top: 2%;
    color: #43646B; 
    font-family: 'bc alphapipe l regular', sans-serif;
    font-size: 4.5em;
    text-transform: uppercase;
    }

.h2riva {
    padding-top: 5%;
    padding-bottom: 5%;
    font-weight: 200;
    color: #e0e5ef;/*#dbdbdb*/
    font-size: 2em;
    font-family: 'dosis', sans-serif;
    

    }

.h2riva span {
    font-size: 2.6em;
    text-transform: uppercase;
}



.h1riva-mention {
    padding-top: 2%;
    color: #43646B; 
    font-family: 'bc alphapipe l regular', sans-serif;
    font-size: 4.5em;
    padding-left: 5%;
    text-transform: uppercase;
    }


.h2deco-mention {
    margin: 0;
    margin-top: 0%;
    color: #95a781;   /* #83999E */
    font-size: 2.6em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    padding-left: 5%;
    padding-bottom: 2%;
    }

.p1-mention {
     line-height: 1.2;
    font-family: 'dosis', sans-serif;
    color: #505c74; /* #857a80 */
    font-size: 1.6em;
    padding-left: 5%;
    padding-right: 10%;
    vertical-align: inherit;
    

}

#diapo1 { 
    width: 42%;
	margin: 10px;
	padding: 10px;
	background-color: #eaebed; /*  #e6dbe5   222,218,111, 0.05 / rgba(52,76,81, 0.8) rgba(255,255,255,0.6) */
	border: 1px solid #a68184;
    margin-bottom: 2%;
    margin-left: 5%;
    margin-right: 2%;
   float: left;
    
	}
#diapo1 ul { margin-left: -30px; 
	}
#diapo1 li { 
	margin: 20px;
	width: 250px;
	list-style: none; 	/* pour enlever les puces sur IE7 */
	zoom: 1; 		/* hack pour IE<8 qui ne comprend pas les inline-block */
	display: inline;	/* hack pour IE<8 qui ne comprend pas les inline-block */
	display: inline-block; 
	
	}

#diapo1 li a {	
	text-decoration: none;
	} 
#diapo1 li a img {
	border: none; 
	max-width: 100%; /* force la taille image à la dimension du li */
    max-height: 100%;
	box-shadow: 2px 3px 6px rgba(0,0,0, 0.75);
    
	}
#diapo1 img {
    width: 250px;
	border: none; 
	float: left;
    z-index: 900;
   
	}


#diapo2 { 
   width: 42%;
	margin: 10px;
	padding: 10px;
	background-color: #d3d6e5; /* 222,218,111, 0.05 / rgba(52,76,81, 0.8) rgba(255,255,255,0.6) */
	border: 1px solid #a68184;
    margin-bottom: 2%;
     margin-left: 2%;
    margin-right: 5%;
    float: right;
    
	}
#diapo2 ul { margin-left: -30px; 
	}
#diapo2 li { 
	margin: 20px;
	width: 250px;
	list-style: none; 	/* pour enlever les puces sur IE7 */
	zoom: 1; 		/* hack pour IE<8 qui ne comprend pas les inline-block */
	display: inline;	/* hack pour IE<8 qui ne comprend pas les inline-block */
	display: inline-block; 
	
	}

#diapo2 li a {	
	text-decoration: none;
	} 
#diapo2 li a img {
	border: none; 
	max-width: 100%; /* force la taille image à la dimension du li */
    max-height: 100%;
	box-shadow: 2px 3px 6px rgba(0,0,0, 0.75);
    
	}
#diapo2 img {
    width: 250px;
	border: none; 
	float: left;
     z-index: 900;
	}





#diapo3 { 
    width: 42%;
	margin: 10px;
	padding: 10px;
	background-color: #bbc3d8; /*  #e6dbe5   222,218,111, 0.05 / rgba(52,76,81, 0.8) rgba(255,255,255,0.6) */
	border: 1px solid #a68184;
    margin-bottom: 5%;
    margin-left: 5%;
    margin-right: 2%;
    float: left;
   
    
	}
#diapo3 ul { margin-left: -30px; 
	}
#diapo3 li { 
	margin: 20px;
	width: 250px;
	list-style: none; 	/* pour enlever les puces sur IE7 */
	zoom: 1; 		/* hack pour IE<8 qui ne comprend pas les inline-block */
	display: inline;	/* hack pour IE<8 qui ne comprend pas les inline-block */
	display: inline-block; 
	
	}

#diapo3 li a {	
	text-decoration: none;
	} 
#diapo3 li a img {
	border: none; 
	max-width: 100%; /* force la taille image à la dimension du li */
    max-height: 100%;
	box-shadow: 2px 3px 6px rgba(0,0,0, 0.75);
    
	}
#diapo3 img {
    width: 250px;
	border: none; 
	float: left;
    z-index: 900;
   
	}


#diapo4 { 
   width: 42%;
	margin: 10px;
	padding: 10px;
	background-color: #9ba6bc; /* 222,218,111, 0.05 / rgba(52,76,81, 0.8) rgba(255,255,255,0.6) */
	border: 1px solid #a68184;
    margin-bottom: 5%;
     margin-left: 2%;
    margin-right: 5%;
   float: right;
    
	}
#diapo4 ul { margin-left: -30px; 
	}
#diapo4 li { 
	margin: 20px;
	width: 250px;
	list-style: none; 	/* pour enlever les puces sur IE7 */
	zoom: 1; 		/* hack pour IE<8 qui ne comprend pas les inline-block */
	display: inline;	/* hack pour IE<8 qui ne comprend pas les inline-block */
	display: inline-block; 
	
	}

#diapo4 li a {	
	text-decoration: none;
	} 
#diapo4 li a img {
	border: none; 
	max-width: 100%; /* force la taille image à la dimension du li */
    max-height: 100%;
	box-shadow: 2px 3px 6px rgba(0,0,0, 0.75);
    
	}
#diapo4 img {
    width: 250px;
	border: none; 
	float: left;
     z-index: 900;
	}


/*////////////////////////// debut lightbox //////////////////////////////*/

.video-iframe-box {
    width: 960px;
    height: 660px;
    vertical-align: middle;
    border: 3px solid #574f55;
    padding: 0px;
    
}


.video-iframe-gite {
	position: relative;
    width: 1280px;
    height: 720px;
     vertical-align: middle;
	}


.h2deco-box {
    margin: 0;
    margin-top: 2%;
    color: #43646B;   /* #83999E */
    font-size: 4em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
   padding-top: 2%;
    text-align: center;
    padding-bottom: 2%;
    }



/*-----------    video mp4 video du moment    -----------------------*/


div#slider {
 display: none;
    
}


.video-wrapper-gite > .video-iframe {
    width: 660px;
    height: 450px;
    vertical-align: middle;
    padding: 20px;
    margin-top: -20%;
    background-color: #dcf0f4;
    margin-left: -5%;
}


/*------------------*/

.video-wrapper2 > .video2 {
    width: 80%;
    vertical-align: middle;
    border: 3px solid #336472 ;
    padding: 10px;
}




/*------------------*/

.video-wrapper3 > .video3 {
    width: 80%;
    vertical-align: middle;
    margin-top: 2%;
    border: 3px solid #336472 ;
   padding: 10px;
}






/*------------------*/

.video-wrapper4 > .video4 {
    width: 80%;
    vertical-align: middle;
    margin-top: 2%;
    border: 3px solid #336472 ;
    padding: 10px;
   
}





.fond-bleu-projet {
    margin: 0 auto;
    background-color: #7ba1bf; 
    z-index: 3;
    padding-top: 5%;
    padding-bottom: 5%;
}


.laptop-bm {
    padding-top: 10%;
    padding-bottom: 10%;
    padding-right: 10%;
}

.h2pres {
    font-weight: 900;
    padding-top: 10%;
    padding-left: 5%;
    color: #7ba1bf;/*#dbdbdb*/
    font-size: 4.5em;
    font-family: 'kimberley', arial, helvetica, sans-serif;

    }


/*---- NUMBER OF SLIDE CONFIGURATION ----*/
.wrapper {
  max-width: 60em;
  margin: 1em auto;
  position: relative;

}

input {
  display: none;
}

.inner {
  width: 500%;
  line-height: 0;
}

article {
  width: 20%;
  float: left;
  position: relative;
}
article img {
  width: 100%;
}

/*---------------- SET UP CONTROL image slider bonne maman et ---------------------*/



.slider-prev-next-control {
  height: 50px;
  position: absolute;
  top: 50%;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.slider-prev-next-control label {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #6cf4e7;
  opacity: 0.7;
}
.slider-prev-next-control label:hover {
  opacity: 1;
}

.slider-dot-control {
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
}
.slider-dot-control label {
  cursor: pointer;
  border-radius: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #6cf4e7; /* #bbb couleur orignine*/
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.slider-dot-control label:hover {
  background:#7da7a3; /**/
  border-color: #777;
}

/* Info Box */
.info {
  position: absolute;
  font-style: italic;
  line-height: 20px;
  opacity: 0;
  color: #000; /*#000*/
  text-align: left;
  -webkit-transition: all 1000ms ease-out 600ms;
  -moz-transition: all 1000ms ease-out 600ms;
  transition: all 1000ms ease-out 600ms;
}
.info h3 {
  color: #1a1a1a;
  margin: 0 0 5px;
  font-weight: normal;
  font-size: 1.2em;
  font-style: normal;
    background-color: #bf7d7b;
    padding-right: 20px;
    padding-left: 20px;
}
.info.top-left {
  top: 30px;
  left: 30px;
}
.info.top-right {
  top: 30px;
  right: 30px;
}
.info.bottom-left {
  bottom: 30px;
  left: 30px;
}
.info.bottom-right {
  bottom: 30px;
  right: 30px;
}

/* Slider Styling */
.slider-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 1px 1px 4px #666;
    background-color: aqua;
  background: #fff;
  background: #fcfff4;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
    z-index: 5;
}
.slider-wrapper .inner {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}

/*---- SET POSITION FOR SLIDE ----*/
#slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  margin: 0;
  line-height: 38px;
  font-size: 3em;
  display: block;
  color: #777;
}

#slide1:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide2:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(5)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(1)::after {
  content: "\f105";
  padding-left: 15px;
}

#slide1:checked ~ .slider-prev-next-control label:nth-child(2), #slide2:checked ~ .slider-prev-next-control label:nth-child(3), #slide3:checked ~ .slider-prev-next-control label:nth-child(4), #slide4:checked ~ .slider-prev-next-control label:nth-child(5), #slide5:checked ~ .slider-prev-next-control label:nth-child(1) {
  display: block;
  float: right;
  margin-right: 5px;
}

#slide2:checked ~ .slider-prev-next-control label:nth-child(1), #slide3:checked ~ .slider-prev-next-control label:nth-child(2), #slide4:checked ~ .slider-prev-next-control label:nth-child(3), #slide5:checked ~ .slider-prev-next-control label:nth-child(4), #slide1:checked ~ .slider-prev-next-control label:nth-child(5) {
  display: block;
  float: left;
  margin-left: 5px;
}

#slide2:checked ~ .slider-prev-next-control label:nth-child(1)::after, #slide3:checked ~ .slider-prev-next-control label:nth-child(2)::after, #slide4:checked ~ .slider-prev-next-control label:nth-child(3)::after, #slide5:checked ~ .slider-prev-next-control label:nth-child(4)::after, #slide1:checked ~ .slider-prev-next-control label:nth-child(5)::after {
  content: "\f104";
  padding-left: 8px;
}

#slide1:checked ~ .slider-dot-control label:nth-child(1), #slide2:checked ~ .slider-dot-control label:nth-child(2), #slide3:checked ~ .slider-dot-control label:nth-child(3), #slide4:checked ~ .slider-dot-control label:nth-child(4), #slide5:checked ~ .slider-dot-control label:nth-child(5) {
  background: #333;
}

#slide1:checked ~ .slider-wrapper article:nth-child(1) .info, #slide2:checked ~ .slider-wrapper article:nth-child(2) .info, #slide3:checked ~ .slider-wrapper article:nth-child(3) .info, #slide4:checked ~ .slider-wrapper article:nth-child(4) .info, #slide5:checked ~ .slider-wrapper article:nth-child(5) .info {
  opacity: 1;
}

#slide1:checked ~ .slider-wrapper .inner {
  margin-left: 0%;
}

#slide2:checked ~ .slider-wrapper .inner {
  margin-left: -100%;
}

#slide3:checked ~ .slider-wrapper .inner {
  margin-left: -200%;
}

#slide4:checked ~ .slider-wrapper .inner {
  margin-left: -300%;
}

#slide5:checked ~ .slider-wrapper .inner {
  margin-left: -400%;
}
    

    
@import url(https://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}
    
* {
  box-sizing: border-box;
}

figure {
  margin: 0;
  font-family: Istok Web, sans-serif;
  font-weight: 100;
}
div#captioned-gallery {
  width: 30%;
  overflow: hidden;
}
figure.slider {
  position: relative;
  width: 500%;
  font-size: 0;
    
  animation: 20s slidy infinite;
}
figure.slider figure {
  width: 20%;
  height: auto;
  display: inline-block;
  position: inherit;
   
}
figure.slider img {
  width: 100%;
  height: auto;
}
figure.slider figure figcaption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  width: 100%;
  font-size: 2rem;
  padding: 0.6rem;
}
    
.titre-galery-home-staging-bis {
   
    margin: 0;
    margin-top: 5%;
    padding-bottom: 5%;
    color: #3a5560;   /*  #4b4764 #1d2d4e #dbdbdb*/
    font-size: 5em;
    font-family: 'BC Alphapipe L Regular', sans-serif;
    text-align: center;
    text-transform: uppercase;
    z-index: 99999;
    }
    
.slide-home-staging {
    margin-top: 0;
    margin-left: 35%;
    }
    
    
/*---- TABLET ----*/
@media only screen and (max-width: 1024px) and (min-width: 768px) {
  
    .slider-wrapper {
    border-radius: 0;
  }
    
    .wrapper { max-width: 40em;
  margin: 0.5em auto;
    }
    
    
    .info h3 {opacity: 0;
        }
    
     .slider-wrapper .info {
    opacity: 0;
      }
}
/*---- MOBILE----*/
@media only screen and (max-width: 767px) {
  .slider-wrapper {
    border-radius: 0;
      max-width: 40em;
  }

  .slider-wrapper .info {
    opacity: 0;
  }
    
    .info h3 {opacity: 0;}
}
@media only screen and (min-width: 850px) {
  body {
    padding: 0;
  }
}

.wrap {
    margin: 80px auto 0 auto;
     width: 100%;
     padding-bottom: 5%;
     align-items: space-around;
     max-width: 1400px;
     margin-top: 5%;
 }
 .tile {
   width: 650px;
   height: 750px;
   margin: 20px;
   background-color: #4f6469; /*#367e7f*/
   display: inline-block;
   background-size: cover;
   position: relative;
   cursor: pointer;
   transition: all 0.4s ease-out;
   box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);
   overflow: hidden;
   color: #dcf0f4;
   font-family: 'dosis', sans-serif;
 }
 .tile img {
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
   transition: all 0.4s ease-out;
 }
 .tile .text {
   /*   z-index:99; */
   position: absolute;
   padding: 30px;
   height: calc(100% - 60px);
 }
 .tile h1 {
   font-weight: 300;
 font-size: 3.5em;
     font-family: "bc alphapipe l regular", sans-serif;
     text-transform: uppercase;
   margin: 0;
   text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
     color: #EEBF00; /*9bd1e7*/
 }
 .tile h2 {
     font-size: 1.8em;
   font-weight: 400;
   margin: 20px 0 0 0;
   font-style: italic;
   transform: translateX(200px);
 }
 .tile p {
     font-size: 1.2em;
   font-weight: 300;
   margin: 10px 0 0 0;
   line-height: 25px;
   /*   opacity:0; */
   transform: translateX(-200px);
   transition-delay: 0.2s;
 }
 .animate-text {
   opacity: 0;
   transition: all 0.6s ease-in-out;
 }
 .tile:hover {
   /*   background-color:#99aeff; */
   box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.64);
   transform: scale(1.05);
 }
 .tile:hover img {
   opacity: 0.1;
 }
 .tile:hover .animate-text {
   transform: translateX(0);
   opacity: 1;
 }
 
 
 .tile:hover span {
   opacity: 1;
   transform: translateY(0px);
 }
 
 
 .slide-img-cv {
     margin-top: -55%;
 }
 .img-cv {
     width: 100%;
     height: auto;
     margin-top: 15%;
  
     
    
     }
 
 p {
   color:#d3e7ef;
   font-size: 12px;
 }
 
 .skillbar {
     position:relative;
     display:block;
     margin-bottom:15px;
     width:100%;
     background:#eee;
     height:35px;
     border-radius:3px;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
     -webkit-transition:0.6s linear;
     -moz-transition:0.6s linear;
     -ms-transition:0.6s linear;
     -o-transition:0.6s linear;
     transition:0.6s linear;
     -webkit-transition-property:width, background-color;
     -moz-transition-property:width, background-color;
     -ms-transition-property:width, background-color;
     -o-transition-property:width, background-color;
     transition-property:width, background-color;
 }
 
 .skillbar-title {
     position:absolute;
     top:0;
     left:0;
     width:110px;
     font-weight:bold;
     font-size:13px;
     color:#ffffff;
     background:#6adcfa;
     -webkit-border-top-left-radius:3px;
     -webkit-border-bottom-left-radius:4px;
     -moz-border-radius-topleft:3px;
     -moz-border-radius-bottomleft:3px;
     border-top-left-radius:3px;
     border-bottom-left-radius:3px;
 }
 
 .skillbar-title span {
     display:block;
     background:rgba(0, 0, 0, 0.1);
     padding:0 20px;
     height:35px;
     line-height:35px;
     -webkit-border-top-left-radius:3px;
     -webkit-border-bottom-left-radius:3px;
     -moz-border-radius-topleft:3px;
     -moz-border-radius-bottomleft:3px;
     border-top-left-radius:3px;
     border-bottom-left-radius:3px;
 }
 
 .skillbar-bar {
     height:35px;
     width:0px;
     background:#6adcfa;
     border-radius:3px;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
 }
 
 .skill-bar-percent {
     position:absolute;
     right:10px;
     top:0;
     font-size:11px;
     height:35px;
     line-height:35px;
     color:#ffffff;
     color:rgba(0, 0, 0, 0.4);
 }

/*------------------------page jeux   ---------------------------------------*/


.jeux-projet {
    position: fixed;
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 auto;
    background-color: #30648c;
    background-size:contain;
    background-position: center center;
    z-index: -1;
   
    }


.h2jeux {
    margin-top: 2%;
    padding-bottom: 0%;
    padding-left: 5%;
    font-weight: 200;
    color: #607b93;/*#dbdbdb*/
    font-size: 4.5em;
    font-family: 'bc alphapipe l regular', sans-serif;
    text-transform: uppercase;

    }


.h2jeux-box {
    padding-top: 2%;
    padding-bottom: 0%;
    padding-right: 5%;
    font-weight: 200;
    color: #b6bfbe;/*#dbdbdb*/
    font-size: 4.5em;
    font-family: 'bc alphapipe l regular', sans-serif;
    text-transform: uppercase;

    }

.h2jeux1 {
    padding-top: 1%;
    padding-left: 2%;
    color: #607b93;/*#dbdbdb*/
    font-size: 3.5em;
    font-family: 'bc alphapipe l regular', sans-serif;
    text-transform: uppercase;

    }
.h2jeux1-bis {
    padding-top: 5%;
    padding-left: 5%;
    padding-bottom: 2%;
    color: #607b93;/*#dbdbdb*/
    font-size: 3.5em;
    font-family: 'bc alphapipe l regular', sans-serif;
    text-transform: uppercase;

    }


.h2jeux1-box {
    padding-top: 1%;
    padding-left: 12%;
    color: #b6bfbe;/*#dbdbdb*/
    font-size: 3.5em;
    font-family: 'bc alphapipe l regular', sans-serif;
    text-transform: uppercase;

    }

.h2jeuxbis {
    padding-top: 5%;
    font-weight: 900;
    color: #30648c;/*#dbdbdb*/
    font-size: 4.5em;
    font-family: 'kimberley', arial, helvetica, sans-serif;
    text-transform: uppercase;

    }

.h6jeux { 
    font-size: 1.5em;
    color: #42616e;
    line-height: normal;
    font-family: 'dosis', sans-serif;
    padding-bottom: 5%;
    margin-top: -4%;
     padding-left: 5%;      
    }


.h6jeux-box { 
    font-size: 1.5em;
    color: #e1e7ea;
    line-height: normal;
    font-family: 'dosis', sans-serif;
    padding-bottom: 5%;
    margin-top: -4%;
     padding-right: 5%;      
    }

.h6jeuxbis { 
    font-size: 1.5em;
    color:#30648c;
    line-height: normal;
    font-family: 'lato', arial;
    padding-bottom: 5%;
           
    }









/*--------------- debut page contact ------------------------*/



.h1-contact {
    position: absolute;
	font-family: 'BC Alphapipe L Regular', sans-serif;
	font-size: 6em;
    color: #95a781;
    text-transform: uppercase;
    text-align: center;
    top: 50%;
    width: 100%;

	}

#prenom2 {
    position: absolute; 
    width: 100%; 
    text-align: center;
    margin: 0; 
    padding:0; 
    top:45%;
    color:#fff; 
    font-size:2.3vw; 
    font-family: 'sarpanch-regular', sans serif; 
    font-weight:300;
    text-transform: uppercase;
    opacity: 1;
    z-index: 13;
    }

.h6contact { 
    padding-top: 15%;
    font-size: 2.5em;
    color:#fff;
    line-height: normal;
    font-family: lato, arial, sans-serif;
    padding-bottom: 5%;
    
            
    }

.bouton-menu {
    position: relative;
    margin-right: 0;
	display: inline-block;
	zoom: 1;
	margin: 0; 	/* pour repousser (ou pas) les boutons entre eux */ /* Block en ligne pour consolider les paddings limités par la hauteur du texte */
	padding: 5px 5px;
    margin-top: 15px;
    margin-right: 50px;
	background-color: #EEBF00;
	font-family: 'dosis', sans-serif; 
	font-weight: 200;
	font-size: 1.2em;
	color: #2b3f47;
	vertical-align: middle;	/* permet l'alignement vertical sur la ligne de texte (images, icones, etc.) */
	/*border: 2px solid #000;*/
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    
	}
.bouton-menu:link, .bouton-menu:visited { 
	background-color: none; 
	color: #2b3f47;
	text-decoration: none; 
	transition: 0.2s ease-out; 
	}
.bouton-menu:hover, .bouton-menu:active { 
	background-color: rgba(40,48,61,.8);  
	color: #8ed2ed;
	text-decoration: none; 
	transition: 0.2s ease-in;
    box-shadow: 0 10px 5px rgba(40,48,61,.2);
	}

.bouton5 {
    position: relative;
    margin-right: 0;
	display: inline-block;
	zoom: 1;
	margin: 0; 	/* pour repousser (ou pas) les boutons entre eux */ /* Block en ligne pour consolider les paddings limités par la hauteur du texte */
	padding: 15px 20px;	
    margin-top: 5%;
    margin-bottom: 4%;
	background-color: #EEBF00;
	font-family: 'dosis', sans-serif; 
	font-weight: 200;
	font-size: 2em;
    border-radius: 5px;
	color: #2b3f47;
	vertical-align: middle;	/* permet l'alignement vertical sur la ligne de texte (images, icones, etc.) */
	/*border: 2px solid #000;*/
    cursor: pointer;
    text-align: center;
    
	}
.bouton5:link, .bouton5:visited { 
	background-color: none; 
	color: #2b3f47;
	text-decoration: none; 
	transition: 0.2s ease-out; 
	}
.bouton5:hover, .bouton5:active { 
	background-color: rgba(40,48,61,.8);  
	color: #8ed2ed;
	text-decoration: none; 
	transition: 0.2s ease-in;
    box-shadow: 0 10px 5px rgba(40,48,61,.2);
	}
    
.responsive-bouton5 {
        display: none;
    }

.bouton6 {
    position: relative;
    margin-right: 0;
	display: inline-block;
	zoom: 1;
	margin: 0; 	/* pour repousser (ou pas) les boutons entre eux */ /* Block en ligne pour consolider les paddings limités par la hauteur du texte */
	padding: 20px 40px;	
    margin-bottom: 5%;
	background-color: #EEBF00;
	font-family: 'Dosis', sans-serif; 
	/*font-weight: bold;*/
	font-size: 1.6em;
	color: #19291f;
    border-radius: 5px;
	vertical-align: middle;	/* permet l'alignement vertical sur la ligne de texte (images, icones, etc.) */
	/*border: 2px solid #000;*/
    cursor: pointer;
    z-index: 999;
    
	}
.bouton6:link, .bouton6:visited { 
	background-color: none; 
	color: #1a1a1a;
	text-decoration: none; 
	transition: 0.2s ease-out; 
	}
.bouton6:hover, .bouton6:active { 
	background-color: rgba(40,48,61,.8);  
	color: #dfe8ec;
	text-decoration: none; 
	transition: 0.2s ease-in;
    box-shadow: 0 10px 5px rgba(40,48,61,.2);
	}

.fond-folio-2-index {
    background-color: #b4c0bc;
    padding-top: 2%;
    padding-bottom: 2%;
    }
    
.slide-bouton5 {
    padding-top: 2%;
        padding-bottom: 0;
    }
    
.slide-bouton6-index {
       margin-left: 8%; 
    }
    
.slide-bouton6-index-bis {
    margin-top: -7%;
       margin-right: 5%; 
    } 
.bouton6-index {
    position: relative;
    margin-right: 0;
	display: inline-block;
    zoom: 1;
	margin: 18px; 	/* pour repousser (ou pas) les boutons entre eux */ /* Block en ligne pour consolider les paddings limités par la hauteur du texte */
	padding: 20px 20px;	
    margin-bottom: 10%; 
	background-color: #EEBF00;
	font-family: 'Dosis', sans-serif; 
	/*font-weight: bold;*/
	font-size: 1.1em;
	color: #19291f;
    border-radius: 5px;
	vertical-align: middle;	/* permet l'alignement vertical sur la ligne de texte (images, icones, etc.) */
	/*border: 2px solid #000;*/
    cursor: pointer;
    z-index: 999;
    
	}
.bouton6-index:link, .bouton6-index:visited { 
	background-color: none; 
	color: #1a1a1a;
	text-decoration: none; 
	transition: 0.2s ease-out; 
	}
.bouton6-index:hover, .bouton6-index:active { 
	background-color: rgba(40,48,61,.8);  
	color: #dfe8ec;
	text-decoration: none; 
	transition: 0.2s ease-in;
    box-shadow: 0 10px 5px rgba(40,48,61,.2);
	}

.bouton5-cv {
    position: absolute;
    margin-right: 0;
	display: inline-block;
	zoom: 1;
	margin: 0; 	/* pour repousser (ou pas) les boutons entre eux */ /* Block en ligne pour consolider les paddings limités par la hauteur du texte */
	padding: 15px 20px;	
	background-color: #EEBF00;
	font-family: 'dosis', sans-serif; 
	font-weight: 200;
	font-size: 1.2em;
    border-radius: 5px;
	color: #2b3f47;
	vertical-align: middle;	/* permet l'alignement vertical sur la ligne de texte (images, icones, etc.) */
	/*border: 2px solid #000;*/
    cursor: pointer;
    text-align: center;
    
	}
.bouton5-cv:link, .bouton5-cv:visited { 
	background-color: none; 
	color: #2b3f47;
	text-decoration: none; 
	transition: 0.2s ease-out; 
	}
.bouton5-cv:hover, .bouton5-cv:active { 
	background-color: rgba(40,48,61,.8);  
	color: #8ed2ed;
	text-decoration: none; 
	transition: 0.2s ease-in;
    box-shadow: 0 10px 5px rgba(40,48,61,.2);
	}


/*////////////////////// page qui suis je /////////////////////////////////*/




.h1-qui {
    position: absolute; 
    width: 100%; 
    text-align: center;
    margin: 0; 
    padding:0; 
    top:55%;
    color:#fff; 
    font-size: 6em; 
    font-family: "kimberley", arial; 
    text-transform: uppercase;
    opacity: 1;
    z-index: 14;
}


.motiondesign5 {
    position: absolute; 
    width: 1000px;
    height: auto;
    left: 50%;
    margin-left: -500px; 
    padding: 0; 
    top: 70%;
    color:#fff; 
    font-size: 2em; 
    font-family: 'dosis', arial, sans-serif; 
    font-weight: 100;
    opacity: 1;
    z-index: 15;
    }

.p-qui {
    font-size: 3em;
    color: #fff; /* #dceff8 #4b4764*/
    line-height: 1.5;
    font-family: 'dosis', sans-serif;
    font-weight: 100;
    padding-bottom: 0%;
    padding-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
}

.p-moi-1 {
    font-size: 2em;
    color: #1d2d4e; /* #dceff8 #4b4764*/
    line-height: 1.5;
    font-family: 'dosis', sans-serif;
    font-weight: 100;
   padding: 0 0 40px 0;
    padding-top: 2%;
    padding-left: 5%;
    padding-right: 5%;
}

.p-qui-presentation {
    font-size: 2.3em;
    color: #fff; /* #dceff8 #4b4764*/
    line-height: 1.5;
    font-family: 'dosis', sans-serif;
    font-weight: 100;
    padding-bottom: 0%;
    padding-top: 1%;
    padding-left: 5%;
    padding-right: 5%;
}


.p-qui1 {
    font-size: 2em;
    color:#fff;
    line-height: normal;
    font-family: 'lato', arial;
    padding-bottom: 10%;
    padding-top: 5%;
}

.p-qui2 {
    font-size: 2em;
    color:#1a1A1A;
    line-height: normal;
    font-family: 'dosis', sans-serif;
    padding-bottom: 5%;
    padding-top: -10%;
}


.p-qui2-moi {
    font-size: 2.3em;
    color:#1d2d4e;
    line-height: normal;
    font-family: 'dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
   margin-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
}


.p-qui2-moi-bis {
    font-size: 2.3em;
    color:#1d2d4e;
    line-height: normal;
    font-family: 'dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 5%;
    padding-top: 5%;
   margin-top: 0%;
    padding-left: 5%;
    padding-right: 5%;
    text-align: center;
}

.p-qui2-diapo {
    font-size: 1.6em;
    color:#1d2d4e;
    line-height: normal;
    font-family: 'dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 2%;
    padding-top: 2%;
    padding-left: 5%;
    padding-right: 5%;
    
}

.p-qui3 {
    font-size: 1.5em;
    color:#fff;
    line-height: normal;
    font-family: 'lato', arial;
   vertical-align: middle;
     padding-bottom: 27%;
    padding-top: 20%;
    padding-right: 10px;
    padding-left: 10px;
}


/*/////////////////////////// page volver ////////////////////////////// */



.volver-projet {
    position: fixed;
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 auto;
    background-color: #bf7d7b;
    background-size:contain;
    background-position: center center;
    z-index: -1;
   
   
    }
    
.p-contact-img {
    font-size: 1em;
    color:#1d2d4e;
    line-height: normal;
    font-family: 'dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 2%;
    padding-top: 0%;
    margin-left: 30%;
    padding-right: 0%;  
        
    }

/*/////////////////////////// page canard enchainé ////////////////////////////// */



.canard-projet {
    position: fixed;
    display: block;
    min-width: 100%;
    min-height: 100%;
    margin: 0 auto;
    padding: 0 auto;
    background-color: #a09fa7;
    background-size: contain;
    background-position: bottom;
    z-index: -1;
   
    }

.atria-projet {
    position: fixed;
    display: block;
    min-width: 100%;
    min-height: 100%;
    margin: 0 auto;
    padding: 0 auto;
    background-color: #a39fa9; /* #a09fa7*/
    background-size: contain;
    background-position: bottom;
    z-index: -1;
   
    }



.electra-projet {
    position: fixed;
    display: block;
    min-width: 100%;
    min-height: 100%;
    margin: 0 auto;
    padding: 0 auto;
    background-color: #a17780; /* #a09fa7*/
    background-size: contain;
    background-position: bottom;
    z-index: -1;
   
    }

.erakis-projet {
    position: fixed;
    display: block;
    min-width: 100%;
    min-height: 100%;
    margin: 0 auto;
    padding: 0 auto;
    background-color: #9eb2c9; /* #a09fa7*/
    background-size: contain;
    background-position: bottom;
    z-index: -1;
   
    }


.bouton2 { 
	display: inline-block;	
	zoom: 1;		
	margin: 0;
	padding: 12px 25px;
	background-color: #398024; /* vert */
	font-size: 1.25em;
	white-space: nowrap;	
	color: #ffffff;
	transition: all 0.3s linear;
	vertical-align: middle;	
	}
.bouton2:link, .bouton2:visited { 
	background-color: #398024; /* vert */
	color: #ffffff;
	text-decoration: none;
	}
.bouton2:hover, .bouton2:active { 
	background-color: #ba0f1f; /* rouge */
	color: #ffffff;				
	text-decoration: none;
	}

.bouton4 {
	display: inline-block;
	zoom: 1;
	margin: 0; 	/* pour repousser (ou pas) les boutons entre eux */ /* Block en ligne pour consolider les paddings limités par la hauteur du texte */
	padding: 12px 20px;	
	background-color:  #ffffff;  /* blanc */
	font-family: Arial, Helvetica, Verdana, Sans-Serif; 
	font-weight: bold;
	font-size: 0.85em;
	color: #ffffff;
	text-transform: uppercase;  /* uppercase = majuscule */
	vertical-align: middle;	/* permet l'alignement vertical sur la ligne de texte (images, icones, etc.) */
	border: 2px solid #D3D0D0;
	}
.bouton4:link, .bouton4:visited { 
	background-color: #ffffff; 
	color: #006d5c;/* vert kaspersky */
	text-decoration: none; 
	transition: 0.2s ease-out; 
	}
.bouton4:hover, .bouton4:active { 
	background-color: #cccccc;  /* gris kaspersky */
	color: #ffffff;
	text-decoration: none; 
	transition: 0.2s ease-in; 
	}




.anim_tourne:hover { /* effet au survol */
    transform: scale(1.3) rotate(-30deg);	/* Agrandissement et rotation */
    }







/* lien avec effet de transparence tom raider image dans <a href="" class="a4" > */

.a4:visited { color: #ffffff; text-decoration: none; opacity: 1; }
.a4:link { color: #ffffff; text-decoration: none; opacity: 1; 
	}
.a4:hover { color: #ffffff; text-decoration: none; opacity: 0.65;
	transition: 0.25s ease-in;
	}
.a4:active { color: #ffffff; text-decoration: none; opacity: 1; }


/* EFFETS ANIMES  tom raider jeu dans imge apres border="0" class="effet1"*/

.effet1:hover, .effet1:active { 
	-webkit-transform: scale(1.15); /* effet grossissant de 15% */
	-moz-transform: scale(1.15); /* effet grossissant de 15% */
	transform: scale(1.15); /* effet grossissant de 15% */
	transition: 0.25s ease-in;
	}




/*--- lien opaque i love paris #667f74 ---*/

.a5:link, .a5:visited { color: #EEBF00; text-decoration: none; 
    opacity: 0.9;
    
    }  /* #4b4764*/
.a5:hover, .a5:active { color: #BAC8D4 ; text-decoration: none;
    opacity: 1;
    transition: 0.25s ease-in;
    }

.a5-cv:link, .a5-cv:visited { color: #EEBF00; text-decoration: none; 
    opacity: 0.9;
    
    }
.a5-cv:hover, .a5-cv:active { color: #4b4764; text-decoration: none;
    opacity: 1;
    transition: 0.25s ease-in;
    }
/* superposition page intro */

.relatif { position: relative; }

/*------------------- les slides -----------------------------------*/

.slide-contenu-1 {
   padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 0;
}

.slide-contenu-2 {
    padding-right: 2%;
}

.slide-texte-gauche {
   padding-left: 2%;
}

.slide-texte-gauche-1 {
    padding-right: 2%;
}


.slideicone {
    padding-top: 5%;
    }
    

.slide20-bis {
	padding-top: 20px;
	padding-bottom: 20px;
	
	}

.slide-bouton {margin-top: 10px;}

.slide-img {padding-bottom: -5%;}

.slide40 { 
	padding-top: 40px;
    padding-bottom: 40px;
	
	}

.slide-moi {
    padding-top: 8%;
    padding-bottom: 5%;
}

.slide70 {
	padding-top: 70px;
	
	}

.slide10 {
	padding-top: 8%;
	
	}
.slide20 {
    margin-top: 20%;
}
.slide-lien {
    margin-top: 8%;
}
.slide10-bis {
	margin-top: 8%;
	
	}
.slide-top-2 {
    margin-top: 2%;
}

.slide-top-3 {
    margin-top: 6%;
   margin-left: 5%;
}


.slide-top-3-bis {
    margin-top: 6%;
    margin-right: 5%;
}
.slide-top-offre {
    margin-top: -35%;
}
.slide70-bis {margin-top: 5%;} 

.slide-top {
    margin-top: 1%;
    }
.slide100 { 
	padding-top: 5%;
	padding-bottom: 5%;
    margin-top: -40%;

	}

.slide140 { 
	padding-top: 140px;
	padding-bottom: 140px;
	}
.slide400 {
    padding-top:200px ;
    padding-bottom: 54.3%;
}

.slide400m {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 100%;
}

.trait-texte {
	padding-right: 20px; 	
	border-right: 1px solid white;	
	}
.trait-texte-gauche {
	padding-left: 20px;
	border-left: 1px solid white;
	}



.form1 {
    margin-top: 10px;
    float: left;
    width:100px;
  }

.curseur { /* a pplique sur des liens */
	/* --- des exemples de curseurs classiques ---
	cursor: default;
	cursor: pointer;
	cursor: move;
	cursor: text;
	*/
	/* --- curseur personnlisé en image, 
	avec une solution de repli (move) 
	ici on modifie le point initial haut gauche (0,0) du curseur 
	pour le placer au milieu de l'image de 42px: 21 21
	*/
	cursor: url('../images/smiley-nb.png') 21 21, move; 
	}


.interligne-moins { 
	line-height: 1.1; 
	}
    
    



/*----------------------- footer -----------------------------------*/

.fond-footer {
    background-color: #69848A; /*#607b93 */
    width: 100%; 
    height: 75%; 
}

footer {
	margin: 0; 
	padding: 0;
    padding-top: 0;
	font-size: 0.8em;
    font-family: 'dosis', Sans-Serif;
    height: auto;

	}

.footer-iframe {
    padding: 0 auto;
    width: 400px;
    height: 300px;
    border: 0px;
}

.slidefooter { 
	padding-bottom: 2%;
    margin-top: -50%;

	}



.a-header:link, .a-header:visited { 
    color: #d3d6e5; 
    text-decoration: none; 
    font-family: 'dosis', sans-serif;
    text-transform: uppercase;
    
}
.a-header:hover, .a-header:active { 
    color: #eaebed; 
    text-decoration: none; 
    font-family: 'dosis', sans-serif; 
}
#bgVid1 {
    padding-top: 0;
    padding-bottom: 0;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 50%;
    height: auto;
    z-index: -1;
    opacity: 0;
    }

#bgVid1-electra {
    padding-top: 0;
    padding-bottom: 0;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 50%;
    height: auto;
    z-index: -1;
    opacity: 0;
    }

#bgVid1-bis {
    padding-top: 0;
    padding-bottom: 0;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 50%;
    height: auto;
    z-index: -1;
    opacity: 0;
    }


#bgVid1-index {
    padding-top: 0;
    padding-bottom: 0;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 50%;
    height: auto;
    z-index: -1;
    opacity: 0;
    }

#bgVid1-bis-index {
    padding-top: 0;
    padding-bottom: 0;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 50%;
    height: auto;
    z-index: -1;
    opacity: 0;
    }




#bgVid2 {
    padding-top: 0;
    position:inherit;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 50%;
    height: auto;
    z-index: -1;
    opacity: 0;
    }


#bgVid2-electra {
    padding-top: 0;
    position:inherit;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 50%;
    height: auto;
    z-index: -1;
    opacity: 0;
    }

#bgVid2-index {
    padding-top: 0;
    position:inherit;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 50%;
    height: auto;
    z-index: -1;
    opacity: 0;
    }
    
    
.nav-footer { 
    width: 100%;
    
}

ul.liste-sans-puce {		/* On cible la liste à puce qui possède la class liste-sans-puce */
	list-style: none;
	margin: 0;
	padding:0;
	}
ul.liste-sans-puce li {
	list-style: none; 	/* on repète pour certains vieux navigateurs comme IE... */
	margin: 0.3em 0em;
	}

ul.liste-sans-puce-horizontale {
    margin: 0;
    padding: 0;
    list-style: none;
    }
ul.liste-sans-puce-horizontale li {
    display: inline-block;
    margin: 10px 10px 10px 10px;
    padding: 0;
    list-style: none;
    }

footer nav ul { 
	list-style: none; 
	margin-top: 0;
	padding: 0;
    display: block;
	}

.h6-footer {
    font-family: 'dosis', sans-serif;
    font-size: 2em;
    color: aliceblue;
}
.p-footer {    
    font-size: 2em;
    color: #fff; /* #dceff8 #4b4764*/
    line-height: normal;
    font-family: 'dosis', sans-serif;
    font-weight: 200;
    padding-bottom: 0%;
    padding-top: 5%;
    padding-left: 10px;
}

.fa-instagram { 
    padding-left: 10%;
    margin-top: 3%;

    }


.fa-envelope-0 {
    padding-right: 10%;
    margin-top: 3%;
    } 

.copy-r { 
    font-family: 'dosis', sans-serif;
    color: #30384c;
    font-size: 1em;
   
}
.a3:link, .a3:visited { color: #EEBF00; text-decoration: none; padding: 5%;}
.a3:hover, .a3:active { color: #fff; text-decoration: none;}


.a-dossier:link, .a-dossier:visited { color: #EEBF00; text-decoration: none;padding: 20px;}
.a-dossier:hover, .a-dossier:active { color: #607b93; text-decoration: none;}


footer nav ul li { 
	list-style: none;	/* on repète pour certains vieux navigateurs comme IE... */
	display: block;	/* inline-block non compris par navigateurs IE<8...  */
	zoom: 1;		
	margin: 2%; 	/* marge à droite pour espacer les boutons */
  
    
	}

.button-footer {
     background-color: #69848A; /* #6a8e9a */
    /*background: rgba(244,142,120,0.5);*/
    font-family: 'dosis', sans-serif; 
    color: #fff;
    border: none;
    position: relative;
    height: 30px;
    font-size: 1.5em;
    cursor: pointer;
    transition: 600ms ease all;
    outline: none;
    float: left;
}
.button-footer:hover {
    background: none;
    color: #EEBF00;
}
.button-footer:before,.button-footer:after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    background: #EEBF00;
    transition: 400ms ease all;
}
.button-footer:after{
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
}
.button-footer:hover:before, .button-footer:hover:after{
    width: 100%;
    transition: 600ms ease all;
}
    


.slide-copy {
    margin-top: 20%;
    padding-bottom: 5%;
}

.slide-footer {
    margin-top: 4%;
    padding-left: 2%;
    padding-bottom: 2%;
}
    
   



        .visible-phone { display: none;}
        .visible-tablet { display: none;}
        .visible-desktop { display: block;}
        .visible-large { display: block;}
        .hidden-phone { display: block;}
        .hidden-tablet { display: block;}
        .hidden-desktop { display: none;}
        .hidden-large { display: none;}

        .visible-touch { display: none;}
        .hidden-touch { display: block;}
   
    
}