/*
Theme Name: Terthemebis
Author: Camille Dufaud
Author URI: http://camilledufaud.com;
Description: Mon premier thème qui m'en fait voir
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

/*permet en gros que tout le contenu reste dans la page, 
comprenant les marges quand les additions dépassent 100% */
* {
  box-sizing: border-box;

}

body  {
    background-color: #ffffff;
    font-family: Helvetica;
    /*font-family:'Open sans';*/
    margin:0;
    padding:0;

}

/* 'Margin: 0 auto' centers block content on the page */
.wrap {
  width: 85%;
  margin: 0 auto;
position:relative;
text-align:center;
}

.content-area {
    position:relative;
    margin:0 auto;

}

/* TEST NOVEMBRE //////////////////////!!!!!!!!!!!!!!!!!!!!!!!!
TEST NOVEMBRE //////////////////////!!!!!!!!!!!!!!!!!!!!!!!!
TEST NOVEMBRE //////////////////////!!!!!!!!!!!!!!!!!!!!!!!!
/////////////////////////////////////////////////////////////*/


/*
.picture {
  width:20%;
}



.edition {
    .box {
        background: $purple;
    }
}

.motion {
    .box {
        background: $blue;
    }
}

.back-end-developer {
    .box {
        background: $orange;
    }
}

.ui-ux-designer {
    .box {
        background: $red;
    }
}

.search-filter {
    display: block;
    margin: auto;
  max-width: 400px;
}

.btn-filter {
  text-decoration:none;
  margin-top:0%;
  display:inline-block;
  font-size:2.2vw;
 z-index:50;
background: none;
    border: none;
    color: #000000;
}
/* FIN TEST NOVEMBRE //////////////////////!!!!!!!!!!!!!!!!!!!!!!!!
TEST NOVEMBRE //////////////////////!!!!!!!!!!!!!!!!!!!!!!!!
TEST NOVEMBRE //////////////////////!!!!!!!!!!!!!!!!!!!!!!!!
/////////////////////////////////////////////////////////////


}

/*******//////////////////////!!!!!!!!!!!!!!!!!!!!!!!!*/

h2 {
 
  margin-top:0%;
  display:inline-block;
  font-size:2.2vw;
   z-index:50;

}



h2 a {
  color:#000000;
  text-decoration:underline 1px;
  text-underline-offset: 6px;
}

h2 a:hover {
  color:#000000;
  text-decoration:none;
}

h3 {
    font-size:2.5vh;
    color:#000000;
    font-weight: bold;

}




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

h3 {

font-size:3.5vw;
margin-block-start: 0.5em;
margin-block-end:0.5em;

}
}

h3 a {
    color:#000000;
  text-decoration:none;


}

h3 a:hover {
  color:#75b09c;
  text-decoration:none;

}

h4 {
  font-family: 'Dela Gothic One', cursive;
  text-decoration:none;
  font-size:1em;
  margin:1.5%;
  padding:0;

}

h4 a {
    text-decoration:none;
}

/********* H5 *********/

h5 {
    font-size:2.5vh;
    color:#000000;
    font-weight: normal;

}

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

h5 {

font-size:3.5vw;
margin-block-start: 0.5em;
margin-block-end:0.5em;

}
}

h5 a {
text-decoration:none;
    color:#000000;


}

h5 a:hover {
text-decoration:none;
color:#EE6352;

}

/********* H6 *********/

h6{
    font-weight: normal;
}

h6 a {
  color:#000000;
  text-decoration:underline 1px;
  text-underline-offset: 2px;
}

h6 a:hover {
  color:#75b09c;
  text-decoration:none;
}

@media screen and (max-width: 600px) {
h6 {
  font-size:2.6vw;
}
h6 a {
  text-decoration:underline 0.5px;
  text-underline-offset: 1px;
}


}

hr { background: none; border: 0; height: 0; padding: 0; margin: 0; }

/********************************************************************************** Réglages header */

#heading {
width:100%;
/*margin:2em;*/
display:flex;
top:0;
  position:fixed;
 z-index:9900;

/* background-color:#2baf60; */
/*text-align:center;*/

}
#heading h1 a { /*à répercuter sur primary-menu !*/
	color:#000000;
  font-size:4vh;
	text-decoration:none;
  text-align:left;
  position:fixed;


}



/******************* Réglages header : menu principal dans les angles */

.primary-menu li {
 list-style-type:none;
 color:#ff0000;
  position:fixed;
 z-index:9900;



}

.primary-menu a {
  color:#000000;
  font-size:4vh;
  text-decoration:none;
  text-align:left;
  font-weight: bold;

}

.primary__travail {
    text-align: right;
    position: fixed;
    right: 2em;
    top: 1.5em;
}


.primary__apropos {
  position: fixed;
  right: 2em;
  bottom: 2em;
  /*transform: rotate(90deg);*/
  text-align:right;
}

.primary__vrac {
  position: fixed;
  left: 0.8em;
  bottom: 4em;
  transform: rotate(-90deg);
  text-align:left;
}


@media screen and (max-width: 850px) {

.primary__travail {
    text-align: right;
    position: fixed;
    right: -0.5em;
    top: 3em;
    transform: rotate(90deg);

}


.primary__apropos {
  position: fixed;
  right: 0.6em;
  bottom: 2em;
  transform: rotate(90deg);
  text-align:right;
}

.primary__vrac {
  position: fixed;
  left: 0.05em;
  bottom: 2em;
  transform: rotate(-90deg);
  text-align:left;
}


}

/********************************** Réglages menu page info */

.mega-menu {
width:100%;
top: 0.3em;
text-align:center;
z-index:8000;
/*position:fixed;*/

}

.mega-menu ul{
  list-style-type: none;
}

.mega-menu li{
    display:inline-block;
    padding: 0 2em 1em 2em;

  

}

.mega-menu a {
font-size:4vh;
  text-decoration:none;
  text-underline-offset:4px;
  text-align:left;
      color:#AAAAAA;
      font-weight:bold;
       border : 1px solid;
       padding: 0.3em 2.5em 0.3em 2.5em;


}

.mega-menu a:hover {

      color:#000000;
}

.mega-menu .current_page_item a {
  color:#000000;
}


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

  .mega-menu a{

       padding: 0.2em 0.2em 0.2em 0.2em;
}
}

/********************************************************************************** Frontpage accueil */

/******************* hero header, BONJOUR */

.bonjour {
  text-align:center;
  height:100vh;
  display:block;
  z-index:50;
  margin:auto;
}

.bonjour h2 {
 
  margin-top:15%;
  display:inline-block;
  font-size:2.5em;
   z-index:50;

}

#extrait h2
{
  margin-top:0%;
}

.different-font {

  font-family: 'Dela Gothic One', cursive;
}

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

.bonjour {
  text-align:center;
  height:100vh;
  max-width:80%;
  display:block;
  z-index:50;
  margin:auto;
}

.bonjour h2 {
 font-size:1.6em;
   margin-top:50%;
}}


/*************************************************************** FAVORITES PROJECTS */

.favorites__container{
/margin:2% 6% 2% 6%;
display:inline-block;
position:relative;
float:left;

}

.favorites__post {

-webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display:inline-block;
  opacity:100;
  margin:1em;
}

.favorites__imagounette {

  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  max-width:100%;
  /*max-height:60vh;*/
}

.favorites__imagounette:hover {
 -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}


/********************************************************************************************** page à propos */
.bonjour__contact {
  text-align:left;
  /*height:100vh;*/
  display:block;
  z-index:50;
  margin-left:40%;
  width:50%;
  margin-bottom:5%;
  margin-top:7%;

}



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



  .bonjour__contact {
  text-align:center;
  /*height:100vh;*/
  display:block;
  margin:auto;
  z-index:50;
  width:90%;
  margin-bottom:5%;
  padding-top:10%;

}

  .bonjour__contact h2 {
    font-size:1.4em;
  }
}



/********************************************************************************** Items déplaçables */
.apropos-vidmobile {
  display:none;
}
.draggable { 

    font-size: 20px;
    cursor: move;
    position:absolute;
    z-index:98;
    background-size:100%;

  }

/*  .nodraggable { 

    font-size: 20px;
    cursor: move;
    position:fixed;
    z-index:98;
    background-size:100%;
    visibility:hidden;
    
  }*/

  .draggable p {
  /*padding-top:60%;*/
    text-align: center;
    font-size:85%;
  }

  #drag1 {  
      width: 16vw; 
    height: 16vw;  
    /*background-color:#f42c2d;*/ 
    background-image: url('img/home_draggable/sourisbdmin.gif');
    /*transform: rotate(6deg);*/  
    top:6%;
    left:14%;


}
  #drag2 {
        width: 16vw; 
    height: 16vw;      
    /*background-color: #f42c2d;*/
    transform: rotate(120deg); 
    background-image: url("img/home_draggable/flowabdmin.gif");
    top:0%;
    left:19%;
}


  #drag4 {
        width: 13vw; 
    height: 13vw;      
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/oeilbdmin.gif");
    top:0%;
    left:7%;
}
  #drag5 {
            width: 21vw; 
    height: 21vw; 
    background-repeat: no-repeat;
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/dialbd.gif");
    top:16%;
    left:13%;
}

  #drag6 {
    height: 14vw; 
    width: 7vw; 
    background-repeat: no-repeat;
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/movebd.gif");
    top:18%;
    left:87%;
    position:fixed;
}


  #drag7 {
    width: 9vw;
    height:9vw; 
    background-repeat: no-repeat;
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/coeurbd.gif");
    top:5%;
    left:77%;
}

  #drag8 {
    width: 8vw;
    height:8vw; 
    background-repeat: no-repeat;
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/oreillabdmin.gif");
    top:7%;
    left:3%;
}

  /*********************************** media queries drag*/

 @media screen and (max-width: 600px) {
.apropos-vidmobile {
  display:block;
  max-width:90%;
  margin: auto;
  text-align:center;
}

.apropos-vidmobile video {
  max-width:80%;
}
  .draggable { 

    font-size: 20px;
    cursor: move;
    position:absolute;
    z-index:98;
    background-size:100%;
    display:none;
  }

    #drag6 {
 display:none; 
}

   #drag1 {  
      width: 24vw; 
    height: 24vw;  
    /*background-color:#f42c2d;*/ 
    background-image: url('img/home_draggable/sourisbdmin.gif');
    /*transform: rotate(6deg);*/  
    top:8%;
    left:38%;
}

  #drag2 {
      width: 23vw; 
    height: 23vw;    
    /*background-color: #f42c2d;*/
    transform: rotate(120deg); 
    background-image: url("img/home_draggable/flowabdmin.gif");
    top:6%;
    left:45%;
}

  #drag4 {
        width: 20vw; 
    height: 20vw;      
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/oeilbdmin.gif");
    top:5.3%;
    left:25%;
}

  #drag5 {
            width: 35vw; 
    height: 35vw; 
    background-repeat: no-repeat;
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/dialbd.gif");
    top:11%;
    left:32%;
}

  #drag7 {
    width: 12vw;
    height:12vw; 
    background-repeat: no-repeat;
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/coeurbd.gif");
    top:8%;
    left:72%;

}

  #drag8 {
    width: 10vw;
    height:10vw; 
    background-repeat: no-repeat;
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/oreillabdmin.gif");
    top:8%;
    left:6%;
}

  }


/************************************ CV */



.CV {
  text-align:left;
  margin:auto;
  width:80%;}

.CV ol{
   list-style: none;
   /*padding : 0 ; margin : 0;*/


}

.CV li {
     border-top: 2.5px solid #75b09c;
     padding: 12px 0 12px 0;

}


/************************************ compétences */

.competences__container {
  margin: auto;
display:grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 12%;
  grid-row-gap: 6%;
  width:80%;


}

.competences__column {

/*  width:28%;
  margin:2,50%;
  float:left;*/
      -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  /*display:flex;*/
  justify-content: center;
  align-items: center;
  text-align:center;
  opacity:100;
       border-bottom: 2.5px solid #ee6352;
     padding: 12px 0 12px 0;
}

  .competences__sticker { 

    font-size: 20px;
    position:relative;
    z-index:98;
    background-size:100%;
    background-repeat:no-repeat;        
    width:7vw;
    height:7vw;

  }

  #sticker1 {

    background-repeat: no-repeat;
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/identbdmin.gif");
    display:inline-block;


}

  #sticker2 {

    background-repeat: no-repeat;
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/printbdmin.gif");
    display:inline-block;
    width:8vw;
    height:8vw;
}

  #sticker3 {

    background-repeat: no-repeat;
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/animbdmin.gif");
    display:inline-block;

}

  #sticker4 {

    background-repeat: no-repeat;
    /*background-color: #f42c2d;*/
    background-image: url("img/home_draggable/webbdmin.gif");
    display:inline-block;

}

#enparler {
  text-align:center;
  margin:auto;
    padding-top:14%;

}

#accompagne {
  text-align:center;
  margin:auto;
    padding-top:7%;
    padding-bottom:7%;

}

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


#enparler {
  text-align:center;
  margin:auto;
    padding-top:45%;

}

#accompagne {
  text-align:center;
  margin:auto;
    padding-top:30%;
    padding-bottom:14%;

}

  .competences__sticker { 

    font-size: 20px;
    position:relative;
    z-index:98;
    background-size:100%;
    width:20vw;
    height:20vw;
  }

  #sticker2 {
        width:22vw;
    height:22vw;
  }
}

/************************************************************************************************ récré */


.bonjour__recre {
 /* width:100%;*/
position:fixed;
top: 40%; left: 50%; /* à 50%/50% du parent référent */
transform: translate(-50%, -50%);
text-align:center;
z-index:-1;
 
}

.bonjour__recre h2 {
 
  margin-top:20%;
  display:inline-block;
  font-size:2.5em;
  

}

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

.bonjour__recre {

  top: 40%; left: 50%;
  width:80%;
}

.bonjour__recre h2 {
 font-size:1.6em;
}}

.bonjour__work {
 
 text-align:center;
  height:40vh;
  display:block;
  z-index:50;
  margin:auto;
  

}


.feminisation {

    display:inline;
      transition-duration: 0.4s ease;




}

.feminisation span {
   transition-duration: 0.4s ease;
       text-decoration: underline 0.08em;
  text-decoration-style: wavy;
    text-decoration-color: #4141d8;
}

.feminisation:hover span {
  display: none;
  text-decoration:none;




}

.feminisation:hover:after {
  content: "designeuse";
  text-decoration:none;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

/************************************************************* page process*/
.bonjour__process {
  text-align:center;
  height:100vh;
  width:60%;
 padding-top:10%;
  display:block;
  z-index:50;
  margin:auto;
}

.bonjour__process h2 {
 
  margin-top:15%;
  display:inline-block;
  font-size:2.5em;
   z-index:50;

}

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

.bonjour__process {
  max-width:90%;
  display:block;
  z-index:50;
  margin:auto;
  padding-top:40%;
}

.bonjour__process h2 {
 font-size:1.2em;
}}

/******************* Sticky elements, micro-menu */

.tu-colles-pelo-work {
 text-align:center;
  position:sticky;
  top:0em;
  display:block;
  z-index:8500;
 background:#ffffff;
  max-width: 100%; /*old : 96*/
  padding:1% 2% 0.2% 2%;
  /*margin:0 2% 0 1%; encore tests fond*/


}

#tcpw-nobg {
  background:none;
}

.tu-colles-pelo-fond {
 text-align:center;
  position:sticky;
  top:0em;
  display:block;
  z-index:8500;
 background:#ffffff;
  max-width: 100%;
  /*padding:0.8% 1% 0.2% 1%;
  margin:0 2% 0 2%;*/


}


.faketextmenu {
  display:block;
  /*padding : 0.5% 1% 1% 1%;
  /*padding-bottom:1%;*/
  /*height:30vh;*/
}


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

  .faketextmenu {
  display:block;
  width:100%;
  margin:auto;
  /*padding : 0.5% 1% 1% 1%;
  /*padding-bottom:1%;*/
  /*height:30vh;*/
}

.faketextmenu h2 {
    margin-top:20%;
font-size:1.1em;
width:90%;
}
}


.idees-images {
  /*color: #4141d8;*/
  /*font-size:2.5vh;*/
 /* font-weight: bold;
  transition-duration: 0.4s;
  background-color:transparent;
  border: none;*/
    font-family: 'Dela Gothic One', cursive;

  display:inline-block;

  /*padding:1em;*/

}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 1.7em;
  height: 0.95em;
  bottom:-0.35em;
    -webkit-transition: .4s;
  transition: .4s;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4141d8;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 0.75em;
  width: 0.75em;
  right: 0.1em;
  bottom: 0.1em;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #ccc;
}

input:focus + .slider {
  box-shadow: 0 0 1px #4141d8;
}

input:checked + .slider:before {
  -webkit-transform: translateX(-0.75em);
  -ms-transform: translateX(-0.75em);
  transform: translateX(-0.75em);
}

/* Rounded sliders */
.slider.round {
  border-radius: 0.9em;
}

.slider.round:before {
  border-radius: 50%;
}



/* ancienne animation idees images *************
.waviy {
  position: relative;
}
.waviy span {
  position: relative;
  display: inline-block;
  animation: waviy 1.4s infinite;
  animation-delay: calc(.1s * var(--i));
  
}
@keyframes waviy {
  0%,40%,100% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-10px)
  }
}
*/


/********************************************************************************** Lotties animations */
.lambda {
  width:4em;
  height:4em;

}

#scrolley {

  padding:0;
  margin:0;

}

.imid {
  height:2em;
  display:flex;
  z-index:70;

}

/* Lottie frontpage ******************************************************/

.knot-container {
position:absolute;
width:100%;
height:100vh;
z-index:-1;
display:block;
}

.knot-container-mobile {
position:absolute;
width:100%;
height:100vh;
z-index:-1;
display:none;
}

#secondLottie {
  padding:0;
  margin:0;

}

#secondLottieMobile {
  padding:0;
  margin:0;

}

/* Lottie frontpage mobile ***************************/



@media screen and (max-width: 600px) {
.knot-container {
display:none;
}

.knot-container-mobile {
display:block;
}


}


/* Lottie footer *******************************************************/

#footLottie {
  padding:0;
  margin:0;

}



.footer-container {
  /*width:80%;
  max-width:80%;*/
  margin:0 auto;
  z-index:-1;

}

#footerLottie {
  width:100%;
}


/* Lottie process ******************************************************/

#firstLottie {
  padding:0;
  margin:0;
  text-align:center;
 
}

.process-container {
  position:fixed;
  top:0;
  left:0;
  /*width:80%;
  max-width:80%;*/
  margin: 0;
  z-index:-1;
  display:block;
  text-align:center;

}

/* Lottie process mobile ******************************************/

#firstLottieMobile {
  padding:0;
  margin:0;
  text-align:center;
 
}

.process-container-mobile {
    top:0;
  left:0;
  position:fixed;
  /*width:80%;
  max-width:80%;*/
  margin:0 auto;
  z-index:-1;
  display:none;
}

@media screen and (max-width: 850px) {
.process-container {
  display:none;
}

.process-container-mobile {
  display:block;
}


}



/********************************************************************************** Page Récré */

.recre__container{
margin:2% 6% 2% 6%;
display:grid;
  grid-template-columns: 1fr 1fr 1fr;

  /*grid-template-rows: 1fr 1fr 3fr ;*/
  grid-column-gap: 8%;
  grid-row-gap: 6%;

}

.recre__column {

/*  width:28%;
  margin:2,50%;
  float:left;*/
      -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display:flex;
    justify-content: center;
  align-items: center;
  opacity:100;
}




.imagounette__recre {
    -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width:100%;
  max-width:100%;
  height:100%;
  opacity:100;
  text-align:center;
  z-index:5;
  position:relative;
   -webkit-transform: rotate(4deg);
  transform: rotate(4deg);

}

.imagounette__recre:hover {
   -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
/*width:200%;
max-width:200%;*/
}

.recre__post-title {
  position:absolute;
  font-size:2em;
  text-align:center;
  transform: rotate(6deg);  
z-index:1;
opacity:0;


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

  .recre__container{
margin:2% 6% 10% 6%;
padding-top:30%;
display:inline-block;
text-align:center;
}

.recre__column {
  width:85%;
  padding-bottom:20%;
margin:auto;
}

.imagounette__recre {
   -webkit-transform: rotate(0deg);
  transform: rotate(0deg);

}}
/********************************************** NAVIGATION ENTRE LES ARTICLES ************/

.prevart {
  text-align:left;
  width:5vw;
    top:25%;
  left:3%;
  position:fixed;
  z-index:9999;
  display:inline-block;
}
.prevart a {
text-decoration:none;
color:#000000;
  font-size:1em;
  font-weight:bold;

}

.prevart a:hover{
  color:#4141d8;
}

.suivart {
  text-align:right;
  width:5vw;
    top:25%;
  right:3%;
  position:fixed;
  z-index:9999;
  display:inline-block;
}
.suivart a {
text-decoration:none;
color:#000000;
  font-size:1em;
  font-weight:bold;

}

.suivart a:hover{
  color:#4141d8;
}

#nomarticle {
display:none;
}

.suivart:hover #nomarticle {
  display:block;
}

.prevart:hover #nomarticle {
  display:block;
}

#arrow {
  font-size:3em;
}

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

  .prevart {
    top:20%;
 
}

  .suivart {
    top:20%;
 
}
.suivart:hover #nomarticle {
  display:none;
}

.prevart:hover #nomarticle {
  display:none;
}

}



/******************************************************* Overlay recreeee */







/********************************************************************************** Page à propos */
.about-info__container {
margin: auto;
display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 12%;
  grid-row-gap: 6%;
  width:85%;

}

.about-info__column {

/*  width:28%;
  margin:2,50%;
  float:left;*/
      -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  /*display:flex;*/
  justify-content: center;
  align-items: center;
  text-align:left;
  opacity:100;
}

/********************************************************************************** Page single project */


.projet-info__container{
margin: auto;
display:grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-column-gap: 12%;
  grid-row-gap: 6%;
  width:85%;
  background-color:#FFFFFF;

}

.projet-info__column {

/*  width:28%;
  margin:2,50%;
  float:left;*/
      -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  /*display:flex;*/
  justify-content: center;
  align-items: center;
  text-align:left;
  opacity:100;
}

#projet-info__column-client a {

  text-decoration:underline 1px;
  text-underline-offset: 4px;
}

#info__column-mobile {
  display:none;
}

#info__column-desktop {
  display:block;
}

@media screen and (max-width: 600px) {
#info__column-mobile {
  display:block;
}

#info__column-desktop {
  display:none;
}

}

.projets__retour {
 color:#ee6352;
 text-decoration:none;
}

.projets__retour:hover {
  color:#4141d8;
   text-decoration:none;

}

.projet-description__container {
	margin:auto;
  margin-bottom:3%;
	display:grid;
	  grid-template-columns: 1fr 3fr;
  grid-column-gap: 6%;
  grid-row-gap: 6%;
  width:85%;


}

.projet-description__column {
  justify-content: center;
  align-items: center;
  text-align:left;
  opacity:100;

}

.projetcontent {
  max-width:85%;
  margin: auto;
  text-align:left;
  display:none;
      -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;

}

.projet__vimeo {
padding:11% 0 10% 0;
position:relative;
display:block;
  text-align:center;
 /* max-width:80%;*/
  margin:auto;
  height:78vh;
}

.projet__images {
    display:inline-block;
    padding: 0 2.5% 0 2.5%;


}


.projet__images img {

  max-height:78vh;
  width:auto;
    margin: 0 2.5% 5% 2.5%; 
}


.projet__imagevideo {
display:inline-block;

}

.projet__imagevideo video {
height:80vh;
width:auto;
margin-bottom:10%;
padding: 0 2.5% 5 2.5%;

}
.projet__caption {
    font-size:0.8em;
        margin-top: 1.3em;
    margin-bottom: 2.2em;
    color:#AAAAAA;
    font-weight: normal;

}

.wp-block-image figcaption {
  font-size:0.8em;
    margin-top: 0;
    margin-bottom: 1em;
    color:#AAAAAA;
    font-weight: normal; }

 .wp-block-gallery figcaption {
  font-size:0.8em;
    margin-top: 0;
    margin-bottom: 1em;
    color:#AAAAAA;
    font-weight: normal; }


@media screen and (max-width: 850px) {
.projet-info__container{
padding-top:15%;
  grid-template-columns: 1fr;
    grid-row-gap: 0%;
 }

.projet-description__container {

    grid-template-columns: 1fr;
      margin-bottom:10%;

}
.projet__vimeo {

  height:60vh;

}


.projet__imagevideo video {
max-width:85%;
}

.projet__images img {
  max-width:85%;
  height:auto;
}



} /* FIN MEDIA QUERIE */

.projet-content-open {
    opacity:1;
  visibility:visible;

}

.projetimages {
width:100%;}

.instagram-media {
    min-width: 235px !important;
    width: 60% !important;
    text-align:center }
/*
.Scroll{
  position:absolute;
  height:100%;
  overflow:auto;
  padding:0;
}


.Scroll-l {
  float:left;
  width:35%;
  position:relative;
  display:block;
  background-color:#ffffff;
  border-left:2px #000000;
  border-right:2px #000000;
}
.Scroll-r {
  width:65%;
  position:relative;
  display:block;

}

.regler{
  clear:both;
}

.informations-projet {
max-width:75%;
margin: 0 auto;
margin-top:10px;
margin-bottom:200px;
}*/

.images-projet {
max-width:80%;
margin: 0 auto;
margin-top:10px;
margin-bottom:200px;
text-align:center;
overflow: hidden;

}

.Scroll::webkit-scrollbar{
  display:none;
}

.images-projet img {
  padding: 2% 2.5% 2% 2.5%;
  max-height:90vh;
  width:auto;

} 




/********************************************************************************** footer */


/*.footer {
  position: fixed;
  height:5%;
  display:block;
  left:0px;
  bottom:0px;
  width:100%;
  background:#000000;
  text-align:center;
  }

  .footer a{
    color:#FFFFFF;
    font-size:80%;
    text-decoration: none;
    margin:1%;
  }*/

  .footing {
    width:85%;
    height:30%;
    bottom:0;
    display:inline-block;
    /*background:#000000;*/
    text-align:center;
    position:relative;
    margin:0 7.5% 0.8% 7.5%;


  }

.footingif {

     width:85%;
    bottom:0;
    display:inline-block;
    /*background:#000000;*/
    text-align:center;
    position:relative;
    margin:0 7.5% 0.8% 7.5%;

}

.footingif img {

  max-width:100%;
}
  .aurevoir {
  text-align:center;
  width:100%;
  display:inline-block;
  z-index:50;
  margin:0;
  position:relative;
  text-align:center;
}

.aurevoir h2 {
 
 
  display:block;
  font-size:2.5em;
   z-index:50;
 }



  .pied {
    vertical-align:middle;
    text-align:center;
    display:inline-block;
    position:relative;
   margin:0 0 0 0;
   width:30%;


  }

    .pied h3{
    text-align:left;
    display:inline-block;
    position:relative;
   /* margin:3em 3em 1em 3em;*/

  }

  #piedesktop {
display:inline-block;
}
#piedmobile {
display:none;

}

.droits {
  font-size:0.8em;
  color:#dddddd;
}
    /* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media screen and (max-width: 850px) {
	  .pied{
    vertical-align:middle;
    text-align:center;
    display:inline-block;
    position:relative;
   margin:0 0 0 0;
   width:75%;

  }


  .aurevoir h2 {
  font-size:1.6em;


}
      .pied h3{
text-align:center;
font-size:3.5vw;
display:block;}

#piedesktop {
display:none;
}
#piedmobile {
display:inline-block;
}

.droits {
  font-size:0.6em;
  color:#dddddd;
}

}