* {margin:0; padding: 0;}



body {

  position: relative;  

}



p {

  font-family: "Lato", sans-serif;

}



a {

  font-family: "Lato", sans-serif;

}





h1,h2{

  font-family: "Abel", sans-serif;

}



h3 {

   font-family: "Abel", sans-serif;

}

h5 {

  font-family: "Abel", sans-serif;

}


span {

  font-family: "Lato", sans-serif;

}



header{

  text-align: left;

  width: 100%;

  background: #292929;

  color : white;

  position: fixed;

  z-index: 1000;

  height : 80px;

  padding-top : 10px;

  padding-bottom: 10px;

  padding-left : 25px;

}





header img {

  float : left;

  width : 38px;

  height : 67.5px;

  margin-right : 20px;

}



header h1{

  margin-top : 12px;

  font-size: 1.5em;

}





header h3 {

  font-size: 0.8em;

}



header a {

  text-decoration: none;

  color: white;

}







/* MENU */



.toggle

{

Position : absolute;

top:0%;

right:1%;

/*transform: :translate(-50%,-50%);*/

border: 35px;

padding: 35px;

z-index: 1501;

}



.toggle span
{
Position : relative;
width: 36px;
height: 4px;
background: #fff;
display: block;
margin-bottom: 8px;
transition: .5s;
}



.toggle span:nth-child(1)
{
transform-origin: left;
}



.toggle span:nth-child(2)
{
transform-origin: center;
}



.toggle span:nth-child(3)
{
transform-origin: left;
}



.toggle.active span:nth-child(1)
{
transform: rotate(45deg);
left:2px;
}



.toggle.active span:nth-child(2)
{
transform: rotate(315deg);
right:2px;
}



.toggle.active span:nth-child(3)
{
transform: scaleX(0);
}



.toggle.active .sidenav
{
  width: 250px;
}



.toggle.active .sidenav a

{
  width: 250px;
  opacity: 1;
}



.sidenav {



  height: 100%;

  width: 0px;

  position: fixed;

  font-family: "Abel", sans-serif;

  z-index: 1;

  top: 90px;

  right: 0;

  background-color: #292929;

  overflow-x: hidden;

  transition: 0.5s;

  padding-top: 10px;

 

}



.sidenav a {

  padding: 8px 8px 8px 32px;

 font-family: "Abel", sans-serif;

  text-decoration: none;

  font-size: 1.5em;

  color: #ffffff;

  display: block;

  opacity: 0;

  transition: 0.3s;

}



.sidenav a:hover {

  color: #bbbbbb;

}



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

  .sidenav {padding-top: 15px;}

  .sidenav a {font-size: 18px;}

}









/* Loader */

#loader-wrapper {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1000;

    background-color: #292929

}

    #loader {

        display: block;

        position: relative;

        left: 50%;

        top: 50%;

        width: 150px;

        height: 150px;

        margin: -75px 0 0 -75px;

        border-radius: 50%;

        border: 3px solid transparent;

        border-top-color: #E80C7A;

        z-index: 1500;

     

  -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

          animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    }



#loader:before {

    content: "";

    position: absolute;

    top: 5px;

    left: 5px;

    right: 5px;

    bottom: 5px;

    border-radius: 50% ;

    border: 3px solid transparent;

     border-top-color:  #ffc300;

     

  -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

          animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

}



#loader:after {

    content: "";

    position: absolute;

    top: 15px;

    left: 15px;

    right: 15px;

    bottom: 15px;

    border-radius: 50%;

    border: 3px solid transparent;

    border-top-color:  #d13e17;





  -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

}



@-webkit-keyframes spin {

  0%   {

-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */

      -ms-transform: rotate(0deg);  /* IE 9 */

          transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */

}

  100% { 

    -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */

      -ms-transform: rotate(360deg);  /* IE 9 */

          transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */

  }

}

@keyframes spin {

    0%   {

-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */

      -ms-transform: rotate(0deg);  /* IE 9 */

          transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */

  }

  100% { 

    -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */

      -ms-transform: rotate(360deg);  /* IE 9 */

          transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */

}

}





#loader-wrapper .loader-section {

    position: fixed;

    top: 0;

    width: 51%;

    height: 100%;

    background: #292929;

    z-index: 999;

}

 

#loader-wrapper .loader-section.section-left {

    left: 0;

}

 

#loader-wrapper .loader-section.section-right {

    right: 0;

}



/*LOADED STYLES */

.loaded #loader-wrapper .loader-section.section-left {

-webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */

      -ms-transform: translateX(-100%);  /* IE 9 */

          transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */



  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */

          transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */

}



.loaded #loader-wrapper .loader-section.section-right {

-webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */

      -ms-transform: translateX(100%);  /* IE 9 */

          transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */



  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */

          transition: all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */

}



.loaded #loader {

  opacity: 0;



  -webkit-transition: all 0.3s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */

          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */

}



.loaded #loader-wrapper {

  visibility: hidden;



  -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */

      -ms-transform: translateY(-100%);  /* IE 9 */

          transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

  -webkit-transition: all 0.3s 1s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */

          transition: all 0.3s 1s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */



}




.spacer

{

    width: 100%;

    height: 90px;

}



.menu {

  background: white;

  padding: 1% 0;



  text-align: center;



}



.menu a {

  text-decoration: none;

  color: #898989;

  font-size: 2.5em;

  -webkit-transition: all 500ms;

  -moz-transition: all 500ms;

  -o-transition: all 500ms;

  transition: all 500ms;

}



.menu a:hover {

  color:black;

  -webkit-transition: all 500ms;

  -moz-transition: all 500ms;

  -o-transition: all 500ms;

  transition: all 500ms;

}





.menu a.menuCentre {

  padding : 2% 10%;

  

}



.menu a.menuGauche {

  padding : 2% 10% 2% 0%;

}



.menu a.menuDroite {

  padding : 2% 0 2% 10%;

}









ul.img-list {

  list-style-type: none;

  width: 100%;

}



ul.img-list li {

  position: relative;

  width: 33.33%;

  float : left;

  overflow: hidden;

 

}







.sectionsContact a:first:hover {

  text-decoration: none;

}







ul.img-list li img {

  width : 100%;

  display: block;

}



span.text-content h2 {

  color : white;

  font-size: 2em;

  font-weight: bold;

  display: inline-table;

  padding : 25% 10% 5px 10%;

  opacity: 0;

  -webkit-transition: all 1500ms;

  -moz-transition: all 1500ms;

  -o-transition: all 1500ms;

  transition: all 1500ms;

}



span.text-content h3 {

  color : white;

  opacity: 0;

  font-size: 1em;

  -webkit-transition: all 1500ms;

  -moz-transition: all 1500ms;

  -o-transition: all 1500ms;

  transition: all 1500ms;

  padding-top: 5px; 

}



.podcast {

  background: #0c1be8;

}



.event {

  background: #E80C7A;

}



.media {

  background: #29BDBC;

}



.television {

  background: #660099;

}



.videoclip {

  background: #ff3600;

}



.courtmetrage {

  background: #006699;

}



.longmetrage {

  background: #339900;

}



.publicite {

  background: #ffc300;

}



span.text-content {

  cursor: pointer;

  left: 0;

  position: absolute;

  display: table-cell;

  vertical-align: center;

  top: 0;

  width: 100%;

  height : 100%;

  opacity: 0;

  text-align: center;

  opacity: 0;

  -webkit-transition: all 500ms;

  -moz-transition: all 500ms;

  -o-transition: all 500ms;

  transition: all 500ms;

}



.noncliquable {

  background: black;

  cursor: default !important;

}



span.text-date {

  left: 0;

  position: absolute;

  display: table-cell;

  vertical-align: center;

  top: 0;

  width: 100%;

  height : 100%;

  text-align: center;

}

  



span.text-content.texteLogo {

opacity: 1;

color : white;

margin-top: 0;

background : none;





}



span.text-content.texteLogo h2 { 

  margin-top : 8%;

  color : white;  

  opacity: 1;



}



span.text-content.texteLogo h3 { 

 color : white;

 padding-top : 2%;

 font-weight: normal;

 font-size: 1.1em;



}





ul.img-list li:hover span.text-content {

  opacity: 0.88;

  transform: scale(1)

}



ul.img-list li:hover h2 {

  opacity: 1;

  -webkit-transition: all 1500ms;

  -moz-transition: all 1500ms;

  -o-transition: all 1500ms;

  transition: all 1500ms;

}



ul.img-list li:hover h3 {

  opacity: 1;

  -webkit-transition: all 1500ms;

  -moz-transition: all 1500ms;

  -o-transition: all 1500ms;

  transition: all 1500ms;

}







#apropos {

  width: 100%;

  overflow: hidden;

  padding : 6% 0 0 0;

}



#wrapperApropos {

  width : 75%;

  margin: 0 auto;

  text-align: center;

  padding-bottom : 7%;

}



#apropos h1 {

  font-size: 1.5rem;

  margin-bottom : 20px;



}



#apropos p {

  font-size: 1.1rem;

  line-height: 2em;

}



#wrapperApropos p a {

  color : black;

  font-weight: bold;

  text-decoration: none;

}



#apropos p a:hover {

  text-decoration: underline;

}



#contact {

  width: 100%;

  position: relative;

  background-color: #292929;

padding-top: 6%;

}









#contact p {

  font-size: 2em;

}



.contactTitre {

  width : 100%;

  color : white;

  text-align: center;



}



.contactTitre h1 {

  font-size: 1.5rem;

}



.sectionsContact {

  margin: 0 auto;

  width : 50%;

  text-align: center;

  margin-top: 30px;

}



.sectionsContact .social {

  width : 100%;

}







.sectionsContact .cell{

  float : left;

  width : 50%;

}



.sectionsContact .email{

  float : right;

  width : 33%;

}



.sectionsContact .instagram{

  float : left;

  width : 33%;

}



.sectionsContact .facebook{

  float : center;

  width : 33%;

}



.sectionsContact .imdb{

  float : left;

  width : 33%;

}



.sectionsContact div {

    display: inline-block;

    margin : 0 auto;

}



.sectionsContact div.middle {

  margin-left : 15%;

}





.sectionsContact div a {



  color : white;

  text-align: center;

  text-decoration: none;

  -webkit-transition: all 500ms;

  -moz-transition: all 500ms;

  -o-transition: all 500ms;

  transition: all 500ms;

 

}



.sectionsContact div a:hover {

  text-decoration: underline;

  color : white;

  -webkit-transition: all 500ms;

  -moz-transition: all 500ms;

  -o-transition: all 500ms;

  transition: all 500ms;

}







.sectionsContact div a.firstCell:hover {

  text-decoration: none;

}











.sectionsContact div div {

  margin-top: 7px;

}

















#wrapper {

  margin: 0 auto;

  position: relative;

  width : 75%

}



#barreProjet {

  width : 100%;

  color : white;

  padding: 1% 0;



}



#wrapper {

  width : 80%;

}



#barreProjet #wrapper {

  text-align: center;

}



#barreProjet h1 {

  font-size: 3rem;

}







#barreProjet span {

  font-size: 1rem;

  text-align: right;

}





.fullscreen-bg {

  text-align: center;

  background: black;  

}



.fullscreen-bg__video {

    

    text-align: center;

}



.contenuVisuel {

    width: 100%;

    position:relative;

    padding-bottom:56.25%;

    height:0;

    overflow:hidden;

 }





iframe {

    width:100%;

    height:auto;



 }



.contenuVisuel iframe,

.contenuVisuel object,

.contenuVisuel embed {

    width:100%;

    height:100%;

    position:absolute;

    top:0;

    left:0;



}







.ligne.lineWrap {

  width : 75%;

  margin: 0 auto 5% auto;



}







.contenuTexte {

  text-align: center;

  overflow: hidden;

  width: 100%;

  margin: 0 auto;

  padding-bottom : 5%;

}







.contenuTexte .descriptionTexte {

  float : left;

  width : 50%;

}

.contenuTexte .descriptionTexte p{

  padding: 0 10%;

}





.contenuTexte .autresInfos {

  float : right;

  width : 40%;

  padding : 0 5% 0 0;

}


  .contenuTexte .autresInfos .role {

  padding-top : 50px;

  }


  .yttpProjet {

    background: url(../img/yttp/yttpBG.jpg) no-repeat center center fixed;  
  
    -webkit-background-size: cover;
  
    -moz-background-size: cover;
  
    -o-background-size: cover;
  
    background-size: cover;
  
    height : 750px;
  
    }

  .mapppro3Projet {

    background: url(../img/mapppro2/mapppro2BG2.jpg) no-repeat center center fixed;  
  
    -webkit-background-size: cover;
  
    -moz-background-size: cover;
  
    -o-background-size: cover;
  
    background-size: cover;
  
    height : 1000px;
  
    }

  .mapppro2Projet {

    background: url(../img/mapppro2/mapppro2BG.jpg) no-repeat center center fixed;  
  
    -webkit-background-size: cover;
  
    -moz-background-size: cover;
  
    -o-background-size: cover;
  
    background-size: cover;
  
    height : 1000px;
  
    }

    .cioProjet {

      background: url(../img/cio/cioBG.jpg) no-repeat center center fixed;  
    
      -webkit-background-size: cover;
    
      -moz-background-size: cover;
    
      -o-background-size: cover;
    
      background-size: cover;
    
      height : 500px;
    
      }
  

    .beatsProjet {

      background: url(../img/beats/beatsBG.jpg) no-repeat center center fixed;  
    
      -webkit-background-size: cover;
    
      -moz-background-size: cover;
    
      -o-background-size: cover;
    
      background-size: cover;
    
      height : 500px;
    
      }


      .mapppro1Projet {

        background: url(../img/mapppro/mapppro1BG.jpg) no-repeat center center fixed;  
      
        -webkit-background-size: cover;
      
        -moz-background-size: cover;
      
        -o-background-size: cover;
      
        background-size: cover;
      
        height : 500px;
      }

  .mappproProjet {

    background: url(../img/mapppro/mappproBG.jpg) no-repeat center center fixed;  
  
    -webkit-background-size: cover;
  
    -moz-background-size: cover;
  
    -o-background-size: cover;
  
    background-size: cover;
  
    height : 500px;
  
    }

    .mapp2022Projet {

      background: url(../img/mapp2022/mapp2022BG.jpg) no-repeat center center fixed;  
    
      -webkit-background-size: cover;
    
      -moz-background-size: cover;
    
      -o-background-size: cover;
    
      background-size: cover;
    
      height : 500px;
    }

  
    .roamingProjet {

      background: url(../img/roaming/roamingBG.jpg) no-repeat center center fixed;  
    
      -webkit-background-size: cover;
    
      -moz-background-size: cover;
    
      -o-background-size: cover;
    
      background-size: cover;
    
      height : 500px;
    
      }

.patinoireProjet {

  background: url(../img/patinoire/patiBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }


  .monetProjet {

    background: url(../img/monet/monetBG.jpg) no-repeat center center fixed;  
  
    -webkit-background-size: cover;
  
    -moz-background-size: cover;
  
    -o-background-size: cover;
  
    background-size: cover;
  
    height : 500px;
  
    }

  .bvgProjet {

    background: url(../img/bvg/bvgBG.jpg) no-repeat center center fixed;  
  
    -webkit-background-size: cover;
  
    -moz-background-size: cover;
  
    -o-background-size: cover;
  
    background-size: cover;
  
    height : 500px;
  
    }

  .sommeilProjet {

    background: url(../img/sommeil/sommeilBG.jpg) no-repeat center center fixed;  

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height : 500px;
    }



  .iaetmoiProjet {

    background: url(../img/iaetmoi/iaetmoiBG.jpg) no-repeat center center fixed;  

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height : 500px;
    }


  .horizonProjet {

    background: url(../img/horizon/horizonBG.jpg) no-repeat center center fixed;  

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height : 500px;
    }


  .dnlProjet {

    background: url(../img/dnl/dnlBG.jpg) no-repeat center center fixed;  

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height : 500px;

    }

    
  .claudiaalapageProjet {

    background: url(../img/claudiaalapage/claudiaalapageBG.jpg) no-repeat center center fixed;  

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height : 500px;

    }


  .hdc2Projet {

    background: url(../img/hdc2/hdc2BG.jpg) no-repeat center center fixed;  

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height : 500px;

    }



  .acfasProjet {

    background: url(../img/acfas/acfasBG.jpg) no-repeat center center fixed;  

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height : 500px;

    }





  .les-recosProjet {

    background: url(../img/les-recos/les-recosBG.jpg) no-repeat center center fixed;  

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height : 500px;

    }





  .repenserProjet {

    background: url(../img/repenser/repenserBG.jpg) no-repeat center center fixed;  

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height : 500px;

    }





  .covidProjet {

    background: url(../img/covid/covidBG.jpg) no-repeat center center fixed;  

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height : 500px;

    }





  .doueeProjet {

    background: url(../img/douee/doueeBG.jpg) no-repeat center center fixed;  

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height : 500px;

    }



  .apprendreProjet {

    background: url(../img/apprendre/apprendreBG.jpg) no-repeat center center fixed;  

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    height : 500px;

    }



.genieProjet {

  background: url(../img/genie/genieBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }





.funambuleProjet {

  background: url(../img/funambule/funambuleBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }





.uraProjet {

  background: url(../img/ura/uraBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }

  .rllProjet {

    background: url(../img/rll/rllBG.jpg) no-repeat center center fixed;  
  
    -webkit-background-size: cover;
  
    -moz-background-size: cover;
  
    -o-background-size: cover;
  
    background-size: cover;
  
    height : 500px;
  
    }

.maquetteProjet {

  background: url(../img/maquette/maquetteBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



.bflyProjet {

  background: url(../img/bfly/bflyBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }

  .haloProjet {

    background: url(../img/halo/haloBG.jpg) no-repeat center center fixed;  
  
    -webkit-background-size: cover;
  
    -moz-background-size: cover;
  
    -o-background-size: cover;
  
    background-size: cover;
  
    height : 750px;
  
    }



.marriottqcProjet {

  background: url(../img/marriottqc/marriottqcBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



.aeroportqcProjet {

  background: url(../img/aeroportqc/aeroportqcBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



.faceafaceProjet {

  background: url(../img/faceaface/faceafaceBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



.bucheProjet {

  background: url(../img/buche/bucheBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



.mapp2018Projet {

  background: url(../img/mapp2018/mapp2018BG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



.yataiProjet {

  background: url(../img/yatai/yataiBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



.antigoneProjet {

  background: url(../img/antigone/antigoneBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



.bateauProjet {

  background: url(../img/bateau/bateauBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }





.chienProjet {

  background: url(../img/chien/chienBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



.follesProjet {

  background: url(../img/folles/follesBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }





.ataulfoProjet {

  background: url(../img/ataulfo/ataulfoBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.mathildeProjet {

  background: url(../img/mathilde/mathildeBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.gazmetroProjet {

  background: url(../img/gazmetro/gazmetroBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}





.mappProjet {

  background: url(../img/mapp/mappBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}





.passion-flakieProjet {

  background: url(../img/passion-flakie/passion-flakieBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }





.jos-louisProjet {

  background: url(../img/jos/jos-louisBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



  .la-chuteProjet {

  background: url(../img/la-chute/la-chuteBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.caramelProjet {

  background: url(../img/caramel/caramelBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



  .aout-septembreProjet {

  background: url(../img/aout-septembre/aout-septembreBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



  .floreProjet {

  background: url(../img/flore/floreBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.contretempsProjet {

  background: url(../img/contretemps/contretempsBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



.alfaProjet {

  background: url(../img/alfa/alfaBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



.genevieveProjet {

  background: url(../img/genevieve/genevieveBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }





.somethingProjet {

  background: url(../img/something/somethingBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.learnProjet {

  background: url(../img/kroy/kroyBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.vtcqjvProjet {

  background: url(../img/vtcqjv/vtcqjvBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.kloProjet {

  background: url(../img/klo/kloBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.kloFerroProjet {

  background: url(../img/kloferro/kloferroBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.cindyProjet {

  background: url(../img/cindy/cindyBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.karimProjet {

  background: url(../img/karim/karimBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 700px;

}

.bonne-nuitProjet {

  background: url(../img/bonne-nuit/bonne-nuitBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 700px;

}


.bolducProjet {

  background: url(../img/bolduc/BolducBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.claudeProjet {

  background: url(../img/claude/claudeBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.gazolineProjet {

  background: url(../img/gazoline/gazolineBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.verProjet {

  background: url(../img/ver/verBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.canadaProjet {

  background: url(../img/canada/canadaBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.blogueurProjet {

  background: url(../img/blogueur/blogueurBG.jpg) no-repeat center center fixed;  

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

  }



.frankProjet {

  background: url(../img/frank/frankBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.kingProjet {

  background: url(../img/matt/mattBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.toujoursProjet {

  background: url(../img/bernhari/bernhariBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.failliteProjet {

  background: url(../img/hotesse/hotesseBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.byMySideProjet {

  background: url(../img/valaire/valaireBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.psychocideProjet {

  background: url(../img/psychocide/psychocideBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}



.chaponProjet {

  background: url(../img/chapon/chaponBG.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  height : 500px;

}





.contenuTexte h2 {

  font-size: 1em;



}

.description {

  margin-top: 5%;

}



.description a:hover {

  text-decoration: underline;



}



.description a {

   color : black;





}



.contenuTexteWrapper {

  width : 75%;

  margin: 0 auto;

  text-align: center;

}



.contenuTexte h2 {

  font-size: 1.5rem;

  margin-bottom : 20px;



}



.contenuTexte p {

  font-size: 1.1rem;

  margin-bottom : 5%;

  line-height: 2em;

}



.contenuTexteWrapper h3 {

  padding-top : 45px;

}



.description a {

  color: black;

  font-weight: bold;

  text-decoration: none;

}



.description a:hover {

  text-decoration: underline;

}













.copyRightWhite{

  text-align: center;

  font-size: 0.3rem;

  padding : 10% 0 1% 0;

  color: white;

}



.copyRightBlack{

  text-align: center;

  font-size: 0.7rem;

 background: white;

  color: black;

  padding : 1% 0;

}









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

  span.text-content h2 {

    font-size: 2em;

  }



  .contenuTexte .autresInfos .dateRealisation {

  padding-top : 50px;

  }



  ul.img-list li { 

      width : 50%;

  }





  #wrapperApropos {

  width : 75%;

}



.sectionsContact {

  width : 75%;

}



.contenuTexte {

  width: 75%;

  padding-bottom : 1%;

}

.contenuTexte .descriptionTexte {

  clear : both;

  width : 100%;

}





.contenuTexte .autresInfos {

   clear : both;

  width : 100%;

  padding: 0;

}



.sectionsContact div {

    display: block;

    margin : 0 auto;

  }







}



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

  ul.img-list li { 

    width : 100%;

  }



  .partenaires p {

  padding-bottom : 2%;

}



  .menu a.menuCentre {

  padding : 2% 10%;



  }



  .partenaires p {

  display: block;

  margin-bottom : 3%;

}





.menu a.menuGauche {

  padding : 2% 10% 2% 0%;

}



.menu a.menuDroite {

  padding : 2% 0 2% 10%;

}



  #wrapperApropos {

  width : 75%;

}



  





  .contenuTexte {

    width: 100%;

  }

  .sectionsContact div {

    display: block;

    margin : 0 auto;

  }



   span.text-content h2 {

    font-size: 1.7rem;

    margin-top : 25%;

  }



  .sectionsContact div {

    

    margin : 0 auto 45px 0;

}



span.text-content h2 {

  font-size: 2.5rem;

  margin-top : 25%;



}







#barreProjet h1 {

  font-size: 2rem;

}



.contenuTexte h2 {

  font-size: 1.5em;



}



span.text-content h2 {

  padding-top : 5%;



}



.sectionsContact .cell{
  float : none;
  width : 100%;
}



.sectionsContact .email{
  float : none;
  width : 100%;
}

}









@media only screen and (max-width: 481px) {
  ul.img-list li { 
    width : 100%;
  }



  .sectionsContact div {
    display: block;
    margin : 0 auto;
  }



  .sectionsContact div.middle {
    margin : 10% 0 10% 0;
   }

   .sectionsContact div 
   {
    margin : 0 auto 55px 0;
}



span.text-content h2 {
  font-size: 2rem;
  margin-top : 15%;
}




}