@charset "UTF-8";

@media screen and (min-width: 1381px) and (max-width: 1899px) {


  @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;
  }

@import url("https://fonts.googleapis.com/css?family=Heebo:800");


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body html {
    margin: 0 auto;
    padding: 0 auto;
    overflow-x: hidden;
    background-color: #fff;
}

body {
     margin: 0 auto;
    padding: 0 auto;
    overflow-x: hidden;
}

#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.png)no-repeat;
    background-size: cover;
    

}

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

.scroll-bas {
    position: absolute;
    left: 50%;
    margin-left: -10px;
    z-index: 9999;
    margin-top: -100px;
    

}

/* -------------------------------- 
 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: #e3e8e9; /*#00547a*/
    border-bottom: 2px solid #76acc4;
}


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



.logo-menu {
    width: 5%;
    height: auto;
    float: left;
    margin-top: 10px;
    margin-left: 5%;
    margin-bottom: 20px;
}
/* ====================== [ Start Overlay ] ====================== */
[data-overlay-dark],
[data-overlay-light] {
  position: relative; }

[data-overlay-dark] #bg-vid,
[data-overlay-light] #bg-vid {
  position: relative;
  z-index: 2; }

[data-overlay-dark]:before,
[data-overlay-light]:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1; }

[data-overlay-dark]:before {
  background: #02050b; }

[data-overlay-light]:before {
  background: #fff; }

[data-overlay-dark] h1,
[data-overlay-dark] h2,
[data-overlay-dark] h3,
[data-overlay-dark] h4,
[data-overlay-dark] h5,
[data-overlay-dark] h6,
[data-overlay-dark] span,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark span,
.bg-color h1,
.bg-color h2,
.bg-color h3,
.bg-color h4,
.bg-color h5,
.bg-color h6,
.bg-color span {
  color: #fff; }

[data-overlay-dark] p,
.bg-dark p,
.bg-color p {
  color: #dad6d6; }

[data-overlay-dark="0"]:before,
[data-overlay-light="0"]:before {
  opacity: 0; }

[data-overlay-dark="1"]:before,
[data-overlay-light="1"]:before {
  opacity: .1; }

[data-overlay-dark="2"]:before,
[data-overlay-light="2"]:before {
  opacity: .2; }

[data-overlay-dark="3"]:before,
[data-overlay-light="3"]:before {
  opacity: .3; }

[data-overlay-dark="4"]:before,
[data-overlay-light="4"]:before {
  opacity: .4; }

[data-overlay-dark="5"]:before,
[data-overlay-light="5"]:before {
  opacity: .5; }

[data-overlay-dark="6"]:before,
[data-overlay-light="6"]:before {
  opacity: .6; }

[data-overlay-dark="7"]:before,
[data-overlay-light="7"]:before {
  opacity: .7; }

[data-overlay-dark="8"]:before,
[data-overlay-light="8"]:before {
  opacity: .8; }

[data-overlay-dark="9"]:before,
[data-overlay-light="9"]:before,
[data-overlay-color="9"]:before {
  opacity: .9; }

[data-overlay-dark="10"]:before,
[data-overlay-light="10"]:before {
  opacity: 1; }

/* ====================== [ End Overlay ] ====================== */

.h1-index-0-bis { 
    font-family: 'Darker Grotesque', serif;
    font-size: 3em;
    padding-top: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 30px;
    line-height: 1.3;
    color: #fff;/* */
    text-align: left;
    text-shadow: 2px 2px 3px #666;
    border-bottom: solid 2px #fff;
    
    text-transform: inherit;
    font-weight: 100;
   }
.h1-index-0-bis .span-titre {
    font-family: 'Cormorant Garamond', serif;
    border-top: solid 2px #fff;
    font-size: 1.6em;
    color: #bfe0e9;
    padding-right: 5%;
    text-transform: uppercase;
    
}

.h1-index-0-bis span {
    margin-left: -2px;
    font-size: 1.5em;
font-family: 'dosis', serif;
}

#slide-inside1-logis-bis {
    position: absolute;
    width: 1100px;
    height: 550px;
    margin: -400px 100px 100px 230px;
    opacity: 0;
    left:-400px;
    /*background: rgba(255,255,255,.7);*/
    color: white;
   margin-top: -50%;  /* -25%*/
    /*border-top: solid 4px #b38d95;
    border-bottom: solid 2px #b38d95;*/
    z-index: 50;
    
    
}

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

}

.logo-index {
    position: absolute;
    padding: 0 auto;
    padding-top: 20px;
    margin: 0 auto;
    margin-top: -40%;
   margin-left: -35%;
    width: 20%;
    padding-bottom: 5%; 
    z-index: 20;
    
    }
    
.h2-index-1-logis-index { 
            font-family: 'dosis', cursive;
            font-size: 3em;
            font-weight: 300;
            padding-top: 5%;
            
            line-height: 1;
            color: #9e8347;/*  #c3a005 #053a59*/
            text-align: justify;
            text-shadow: 2px 2px 3px #666;
            padding-bottom: 40px;
           
            }

.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;
}
.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;
    max-width: 100%;
    min-height: 100%;
  }
.body-cv-1 { 
	   background: url('../images/papier-peint-cv.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center center;
        margin: 0 auto;
     padding: 0 auto;
     z-index: 5;
     padding-top: 5%;
    
  }
    


.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%;
  }

.fond-bouton-cv {
     background-color: #dae2e6;/* #ddeded*/
    }

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

.h3-cv {
    margin: 0;
    margin: 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;
    
}

.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: #9c8146;
	font-family: 'dosis', sans-serif; 
	font-weight: 200;
	font-size: 1.2em;
	color: #7b8a99;
	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);
	}



.triangle-cv {
 position: absolute; 
 display : none;
 height : 0;
 width : 0;
margin-top: 6%;
margin-left: 34%;
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: 18%;
margin-left: 52%;
border-width: 0 0 610px 800px;
	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 {
  position: static; 
  display : block;
  height : 0;
  width : 0;
  border-right : 160vh solid transparent;
  border-bottom : 910px solid #4f6469; /* #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;
 }

.triangle-code-erakis-cv {
 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;
}




div#slider {
    display: none;
    
}

.triangle-cv-bis {
 position: absolute; 
 display : block;
 height : 0;
 width : 0;
    margin-top: -5%;
margin-left: 33%;
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;
}

.titre-cv {
    position: absolute;
    margin: 0;
    margin-left: 42%;
    margin-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: 999999999;
    }
.slide-bottom-section-cv {
    margin-bottom: 5%; 
    margin-top: 10%;
    }
    
.slide-parent-cv {margin-top: 30%;}


.parent-cv {
  width: 781px;
  height: 484px;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: 27%;
  overflow: hidden;
  position: relative;
  -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: 800;
  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: 800;
  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: 800;
  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: 800;
  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;
}
.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-bottom: 4%;
    margin-top: 5%;
	background-color: #9c8146;
	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);
	}




.bouton5-cv {
    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-bottom: 4%;
	background-color: #b29351;
	font-family: 'dosis', sans-serif; 
	font-weight: 200;
	font-size: 1.6em;
    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);
	}
.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: 8%;
    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;}

#anim-presentation-moi-5 {
    opacity: 0;
}
    
iframe {
        margin: 0 auto;
        padding: 0 auto;
    }

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

.trait-texte-cv {
      padding-right: 100px; 	
      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%;
    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: 5%;
   margin-top: 5%;
    padding-left: 5%;
    padding-right: 5%;
}

.slide-cv-1 {
    margin-left: 10%;
    padding-bottom: 8%;
}

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

.wrap {
   margin: 50px auto 0 auto;
    width: 100%;
    padding-bottom: 5%;
    align-items: space-around;
    max-width: 1300px;
    margin-top: 5%;
}
.tile {
  width: 580px;
  height: 810px;
  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.3em;
  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);
}

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

}



/*--- POUR DEBUG
 .colonne1, .colonne2, .colonne3, .colonne4, .colonne5, .colonne6, .colonne7, .colonne8, .colonne9, .colonne10, .colonne11, .colonne12, 
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12, 
.item1, .item2, .item3, .item4, .item5, .item6, .item7, .item8, .item9, .item10, .item11, .item12 {
	border: 2px solid green;
	}
.page, .footer, section, hauteur100 { border: 3px solid red; }
.page2 { border: 2px solid violet; }
nav ul li { border: 3px solid blue; }
th, td { border: 1px solid white; } ---*/