/************************************************* NOUVEAUTÉ ***************************************************/
/************************************************* NOUVEAUTÉ ***************************************************/
/************************************************* NOUVEAUTÉ ***************************************************/

#print span.new-tab, #print div.new, #print div.new2,  #print div.new3  {
  opacity: 0;
}

#web span.new-tab, #web div.new, #web div.new2,  #web div.new3  {
  opacity: 0;
}

#video span.new-tab, #video div.new, #video div.new2,  #video div.new3  {
  opacity: 0;
}



/************************************************* DESKTOP BASE ***************************************************/
/************************************************* DESKTOP BASE ***************************************************/
/************************************************* DESKTOP BASE ***************************************************/

html {
  scroll-behavior: smooth;
}

body{
  width: 100vw;
  height: 100vh;
  background-color : #f8f4f1;
  font-family: 'Montserrat', sans-serif;
  padding: 0px;
  margin: 0px;
}

#splitscreen{
 background: linear-gradient(
   rgba(86, 192, 224, 0.62), 
   rgba(235, 147, 81, 0.20)
   ),url(https://www.seeyousoon.blog/wp-content/uploads/2018/02/DSC06244-1-1030x687.jpg);
 background-position : 50% 50%;
 background-size:cover;
 background-repeat:no-repeat;
 float : left;
 background-color : #FE5815;
 width : 50vw;
 height : 100vh;
 min-width : 300px;
 max-width : 700px;
}



.content{
  width: 45vw;
  margin-left : 5vw;
  margin-right : 5vw;
  float : right; 
  height: 100vh;
  padding: 0px;
}


.content img{ 
  z-index: 1;
  margin-top: 40vh;
  margin-left: 5px;
  width: 10vw; 
  min-width : 120px;
  opacity: 1;
}

.lien {
  text-align: left;
}
.lien a:hover {
  background-color: #fff; 
  opacity : 1;
}

a { 
  padding : 5px;
  padding-left : 5px;
  padding-right : 5px;
  font-size : 30px;
  text-decoration : none; 
  font-weight : 400;
}

a:link {color: #000; opacity:1;}
a:visited {color: #000; opacity:0.9;}
#web a:hover{ color: #660101;}
#print a:hover{color: #250071;}
#video a:hover{ color: #d4802e;}
#mail a:hover{color: #000;}

.pic{
 width:250px;
 height:90px;
 opacity:1;
 background: url(LCZ2016Blanc.png);
}

.text{
 width:250px;
 background:#FFF;
 opacity:0;
}
.pic:hover .text
{
 opacity:0.7;
 text-align:center;
 vertical-align:center;
 font-size:30px;
 font-weight:250;
 padding:30px;
}

#photo{
  height: 0;
  position: absolute;
  margin-top : 97vh;
  width : 100%;
  text-align: left;
  color : white;
  font-weight : 100;
  font-size: 12px;
  margin-left: 5px;
  opacity : 0.45;
  z-index: 9;}



  .new, .new2, .new3 {
    width : 70px;
    margin-top : -27px;
    margin-bottom : 7px;
    line-height : 12px;
    opacity : 1;
    text-transform : uppercase;
    font-weight:300;
    font-size : 9px;
    border-radius: 3px;
    padding : 3px;
    border : 1px solid #c5c3c3;
    color: #c5c3c3;}

    .new strong {
      font-size: 12px;
      opacity : 1;
      color:#c5c3c3; 
      animation: colorblink 4s infinite;}

      .new2 strong {
        font-size: 12px;
        opacity : 1;
        color:#c5c3c3; 
        animation: colorblink2 3.3s infinite;}

        .new3 strong {
          font-size: 12px;
          opacity : 1;
          color:#c5c3c3; 
          animation: colorblink3 2s infinite;}


          @keyframes colorblink { 
            0% { color : #c5c3c3; }
            88% { color : #c5c3c3; }
            90% { color:red; border-color : #8d0a0a; } 
          }

          @keyframes colorblink2 { 
            0% { color : #c5c3c3; }
            38% { color : #c5c3c3; }
            50% { color:red; border-color : #8d0a0a; } 
            63% { color : #c5c3c3; }
          }

          @keyframes colorblink3 { 
            0% { color : #c5c3c3; }
            38% { color : #c5c3c3; }
            50% { color:red; border-color : #8d0a0a; } 
            63% { color : #c5c3c3; }
          }

          ul{ list-style:none;
            margin-bottom :10px;
            margin-left:0;
            padding-left:0; } 

            ul li {
              margin-bottom :1px;
            } 


            /************************************************* PAGES FILLES ***************************************************/
            /************************************************* PAGES FILLES ***************************************************/
            /************************************************* PAGES FILLES ***************************************************/


            #titre-page {
              margin-left: 37vw;
              margin-top: 3vh;
            }

            #titre-page img{
              margin-bottom : -10px;
              margin-left: 73px;
              height: 32px; 
              opacity: 1;
            }

            #titre-page.web img{
              margin-left: 69px;
            }

            #titre-page h2{
              margin:0 0 0 70px;
              font-weight : 500;
              font-size : 50px;
              z-index: 1;
              width: 10vw; 
              min-width : 120px;
              opacity: 1;
            }

            h1{
              font-weight : 100;
              margin : 0;
              font-size : 160px;
              font-style: italic;
              opacity : 0.1;
              margin-bottom : -95px;
            }

            .carre-print {
             opacity : 1;
             width :60px;
             margin-left : 135px;
             height :7px;
             background: linear-gradient(132deg, #250071,#db9128,#250071);
             background-size: 400% 400%;
             animation: BackgroundGradientCarre 10s ease infinite;
           }

           @keyframes BackgroundGradientCarre {
            0% {background-position: 0% 50%;}
            50% {background-position: 100% 50%;}
            100% {background-position: 0% 50%;}
          }

          .carre-web {
           opacity : 1;
           width :20px;
           margin-left : 182px;
           margin-top : -15px;
           height :20px;
           background: linear-gradient( 90deg, #660101,#db9128,#660101);
           background-size: 1000% 1000%;
           animation: BackgroundGradientLosange 6s ease infinite;
           -ms-transform: rotate(45deg); /* IE 9 */
           -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
           transform: rotate(45deg);
         }

         @keyframes BackgroundGradientLosange {
          0% {background-position: 0% 50%;}
          50% {background-position: 100% 50%;}
          100% {background-position: 0% 50%;}
        }

        .carre-video {
         opacity : 1;
         width :22px;
         border-radius : 11px;
         margin-left : 205px;
         margin-top : -55px;
         height :22px;
         background: linear-gradient( 132deg, #d4802e,#d4802e,#d4802e,#db0000,#d4802e,#d4802e,#d4802e);
         background-size: 1000% 1000%;
         animation: BackgroundGradientLosange 5s ease infinite;

       }

       @keyframes BackgroundGradientLosange {
        0% {background-position: 0% 50%;}
        50% {background-position: 100% 50%;}
        100% {background-position: 0% 50%;}
      }

      .back-menu, .back-menu-page {
        z-index : 5;
        position : absolute ;
        top: 10vw ;
        left: 10vw;
        float : left;
        width : 36px;
        height : 36px;
        line-height : 36px;
        text-align : center;
        color : #250071;
        font-size : 14px;
        border-radius : 18px;
        background-color : #fff;
        box-shadow: 0px 0px 25px 3px rgba(0, 0, 0, 0.08);

      }


      .back-menu.print a, .back-menu-page.print a{
        color : #250071;
        font-size : 14px;
        line-height : 36px;
      }

      .back-menu.print:hover, .back-menu-page.print:hover{
        color : white;
        background-color : #250071;
      }

      .back-menu.web a, .back-menu-page.web a{
        color : #660101;
        font-size : 14px;
        line-height : 36px;
      }

      .back-menu.web:hover, .back-menu-page.web:hover{
        color : white;
        background-color : #660101;
      }

      .back-menu.video a, .back-menu-page.video a{
        color : #d4802e;
        font-size : 14px;
        line-height : 36px;
      }

      .back-menu.video:hover, .back-menu-page.video:hover{
        color : white;
        background-color : #d4802e;
      }

      .bigone{
        width : 100%;
        min-height : 37vh;}

        .one {
          margin-top : 9.7vw;
          margin-left: 15vw;
          margin-right: 15vw;
          width : 70vw;
        }

        .left {
        }

        .right {
          float : right;
        } 

        .fiche {
          padding : 40px;
          width : 50vw;
          background-color : #fff;
          border-radius: 3px;
          box-shadow: 0px 0px 35px 3px rgba(0, 0, 0, 0.1);
        }

        .fiche strong{
          /*margin-right : 3px;*/
          opacity : 0.4;
          text-transform : uppercase;
          font-weight:700;
          font-size : 9px;
          border-radius: 3px;
          padding : 3px;
          border : 1px solid #000;}

          .fiche h3{
            margin:0;
            font-size : 30px;
            font-weight : 500; }

            .fiche p {
              font-weight : 300;
              width : 42vw;
              opacity : 0.6;
              margin-bottom : 30px;}

              /*----------------------------------PRINT------------------------------------*/

              .print h3 {
                color : #250071;}

                .print.fiche a {
                  line-height : 42px;}

                  .print.fiche a.linkhard {
                    color : #fff;
                    background-color: #250071;
                    font-size : 16px;
                    padding : 9px;
                    border-radius: 3px;
                    border : 1px solid #250071;}

                    .print.fiche a.linklight {
                      color : #250071;
                      font-size : 16px;
                      padding : 9px;
                      border-radius: 3px;
                      border : 1px solid #250071;}

                      .print.fiche a:hover {
                        color : #fff;
                        background-color: #db9128;
                        border : 1px solid #db9128;}

                        /*----------------------------------WEB------------------------------------*/

                        .web h3 {
                          color : #660101;}

                          .web.fiche a:hover {
                            color : #fff;
                            background-color: #db9128;
                            border : 1px solid #db9128;}

                            .web.fiche a {
                              line-height : 42px;}

                              .web.fiche a.linkhard {
                                color : #fff;
                                background-color: #660101;
                                font-size : 16px;
                                padding : 9px;
                                border-radius: 3px;
                                border : 1px solid #660101;}

                                .web.fiche a.linklight {
                                  color : #660101;
                                  font-size : 16px;
                                  padding : 9px;
                                  border-radius: 3px;
                                  border : 1px solid #660101;}

                                  .web.fiche a:hover {
                                    color : #fff;
                                    background-color: #db9128;
                                    border : 1px solid #db9128;}

                                    /*----------------------------------VIDEO------------------------------------*/

                                    .video h3 {
                                      color : #d4802e;}

                                      .video.fiche a:hover {
                                        color : #fff;
                                        background-color: #026A87;
                                        border : 1px solid #026A87;}

                                        .video.fiche a {
                                          line-height : 42px;}

                                          .video.fiche a.linkhard {
                                            color : #fff;
                                            background-color: #d4802e;
                                            font-size : 16px;
                                            padding : 9px;
                                            border-radius: 3px;
                                            border : 1px solid #d4802e;}

                                            .video.fiche a.linklight {
                                              color : #d4802e;
                                              font-size : 16px;
                                              padding : 9px;
                                              border-radius: 3px;
                                              border : 1px solid #d4802e;}

                                              .video.fiche a:hover {
                                                color : #fff;
                                                background-color: #026A87;
                                                border : 1px solid #026A87;}

                                                #byfollywood img{
                                                  margin-left: -10px;
                                                  margin-bottom : -10px;}

                                                  #byfollywood {
                                                    margin-left : 300px;
                                                    opacity : 0.15;
                                                    font-weight : 300;
                                                  }


                                                  /*----------------------------------ILLUSTRATION------------------------------------*/

                                                  .illustration {
                                                    width : 25vw; 
                                                    height : 211px;
                                                  }

                                                  .illustration.left {
                                                    margin-top : -237px;
                                                    float : right;
                                                  }

                                                  .illustration.right {
                                                    margin-top : -237px;
                                                    float : left;
                                                  }



                                                  .illustration.ascension {
                                                    background-image : url('../docs/ascension.jpg');
                                                    background-size : cover;
                                                  }

                                                  .illustration.regio {
                                                    background-image : url('../images/MASTERv2Def.jpg');
                                                    background-size : 600%;
                                                    background-position : 55% 47%;}


                                                    .illustration.lucioles {
                                                      background-image : url('../images/illustrationluciole.png');
                                                      background-size : cover;
                                                    }

                                                    .illustration.bordeaux {
                                                      background-image : url('http://xlcz.fr/images/Infographiev1.4FR.jpg');
                                                      background-size : cover;
                                                    }

                                                    .illustration.nepal {
                                                      background-image : url('http://xlcz.fr/docs/Trk2.jpg');
                                                      background-size : cover;
                                                    }

                                                    .illustration.lyon {
                                                      background-image : url('http://xlcz.fr/docs/Lyonlight.jpg');
                                                      background-size : cover;
                                                    }

                                                    .illustration.passion {
                                                      background-image : url('../images/illustrationpassion.png');
                                                      background-size : cover;
                                                    }

                                                    .illustration.mathilde {
                                                      background-image : url('https://image.jimcdn.com/app/cms/image/transf/none/path/sf33ef6e83cd86fdf/image/i3ffb0d1a997f78ed/version/1366908215/image.jpg');
                                                      background-size : cover;
                                                      background-position :  50% ;
                                                    }


                                                    .illustration.carteflocoud {
                                                      background-image : url('http://www.xlcz.fr/images/FlocoudCarteVisite.JPG');
                                                      background-size : cover;
                                                      background-position :  50% ;
                                                    }

                                                    .illustration.bigdata {
                                                      background-image : url('../images/illustrationbigdata.png');
                                                      background-size : cover;

                                                    }

                                                    .illustration.follywood {
                                                      background-image : url('http://www.follywood.fr/wp-content/uploads/2016/06/340Logo.png');
                                                      background-size : 100%;
                                                      background-position : 50% 25%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.sta {
                                                      background-image : url('http://choeursaintambroise.xlcz.fr/wp-content/uploads/2014/07/Logo-lettrine.png');
                                                      background-size : 100%;
                                                      background-position : 50% 25%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.sys {
                                                      background-image : url('../images/voyages.jpg');
                                                      background-size : 100%;
                                                      background-position : 50% 50%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.lesgeantes {
                                                      background-image : url('../images/lesgeantes.png');
                                                      background-size : 100%;
                                                      background-position : 50% 25%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.pba {
                                                      background-image : url('../images/illustrationpba.png');
                                                      background-size : 100%;
                                                      background-position : 50% 50%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.jarvis {
                                                      background-image : url('http://xlcz.fr/images/Jarvis.png');
                                                      background-size : 100%;
                                                      background-position : 50% 50%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.youtube {
                                                      background-image : url('http://xlcz.fr/images/youtube.jpg');
                                                      background-size : 80%;
                                                      background-position : 100% 50%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.cdv {
                                                      background-image : url('http://xlcz.fr/images/carnetdevoyage.jpg');
                                                      background-size : 87%;
                                                      background-position : 30% 70%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.up {
                                                      background-image : url('http://xlcz.fr/images/up.jpg');
                                                      background-size : 90%;
                                                      background-position : 100% 70%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.lvq {
                                                      background-image : url('http://xlcz.fr/images/LVQ.jpg');
                                                      background-size : 92%;
                                                      background-position : 40% 0%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.insitu {
                                                      background-image : url('http://xlcz.fr/images/insitu.jpg');
                                                      background-size : 92%;
                                                      background-position : 100% 20%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.regiobus {
                                                      background-image : url('http://www.xlcz.fr/images/reseamipy.jpg');
                                                      background-size : 200%;
                                                      background-position : 50% 50%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.marine {
                                                      background-image : url('http://www.xlcz.fr/images/screenMarineTellier.png');
                                                      background-size : 100%;
                                                      background-position : 50% 50%;
                                                      background-repeat: no-repeat;
                                                    }


                                                    .illustration.flocoud {
                                                      background-image : url('https://www.flocoud.com/wp-content/uploads/2018/10/Logo-v2.2.png');
                                                      background-size : 100%;
                                                      background-position : 50% 25%;
                                                      background-repeat: no-repeat;
                                                    }

                                                    .illustration.sylvain {
                                                      background-image : url('http://sylvain.xlcz.fr/wp-content/uploads/2017/12/Logo-site.png');
                                                      background-size : 100%;
                                                      background-position : 50% 25%;
                                                      background-repeat: no-repeat;
                                                    }


                                                    .right h3, .right strong, .right p, .right a.linkhard{
                                                      margin-left : 10.5vw;
                                                    }





/*.fiche.right.print p, .fiche.right.print h3, .fiche.right.print strong, .fiche.right.print a{
margin-left : 11vw;
}*/


/*.print h2{
 #db9128;
color : #250071;
}*/

.footer {
  width: 100vw;
  float: left;
}

.footer img{
  width : 100px;
  opacity : 0.07;
  margin-top : 15vh;
  margin-bottom : 10vh;
}

/************************************************* PAGES PRINT ***************************************************/
/************************************************* PAGES PRINT ***************************************************/
/************************************************* PAGES PRINT ***************************************************/


.pageprint {
  background-color: #d6d6d6;
}


.back-print {
  z-index : 3;
  font-family: 'Montserrat', sans-serif;
  text-align : center ;
  width : 200px;
  margin :27px;
  position : fixed;
  top : 10px;
  border-radius : 0px ;
}

.logo {
  z-index : 4;
  height : 88px;
  box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.07);
  border-bottom : 0px solid black;
  background-color : #f8f4f1;
  padding-top : 2px;
}

.logo img {
  position : relative;
  margin-left: -90px;
  top : -55px;
  height : 25px;
}

.back-print a{
  width : 200px;
  padding : 7px;
  margin-left: 45px;
  font-weight : 300;
  font-size : 14px;
  background-color: #250071;
  color : white;
}

.back-print a:hover{
  background-color: #d4802e;
}

.back-print h1{
  font-family: 'Montserrat', sans-serif;
  font-weight : 200;
  margin : 0;
  font-size : 60px;
} 

#cardregio {
  margin-top : -36px;
}

.wrapper-regio {
  z-index : 1;
  position : absolute;
  top: 0
  left : 0;
  width: 5930px;
  height : 4680px;
  background-repeat : no-repeat;
  background-size : 5930px auto;
  background-image : url('../images/MASTERv2Def.jpg');
}

.wrapper-regio div{
  position : absolute;
}

.menu-regio {
  z-index : 2;
  font-family: 'Montserrat', sans-serif;
  font-weight : 200;
  width : 200px;
  margin :27px;
  position : fixed;
  top : 130px;
  border-radius : 3px ;
  box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.07);
  background-color: #fff;
}

.menu-regio h5{
  font-family: 'Montserrat', sans-serif;
  color: #6a0b0b;
  margin-bottom : 10px;
  margin-left : 10px;
  line-height: 0px;
  font-size : 12px;
  text-transform: uppercase;
  font-weight : 400;
}

.menu-regio form{
  padding-left : 15px;
}

.liste-ville {border-radius : 3px ;

  color : black;
  margin : 5px;
  padding : 3px;
  height:95px;
  overflow:auto;
  background-color:#f8f4f1;
}

.liste-ville a{
  padding : 2px;
  width : 100%;
  font-size : 15px;
  font-weight : 200;
}

.liste-ville a:hover{
  color : white;
  background-color: #6a0b0b;
}


@keyframes AutoSlide {
 0%, 35%, 80%, 100% {
  left: -142px; /*1ère image*/
}
40%, 75%{
  left: -400px; /*2ème image*/
}
}

#slideshow {
 position: relative;
 width: 200px;
 height: 120px;
 margin:  -0px auto;
 overflow: hidden;
}
#sContent li {
 display: inline;
}

#sContent {
 position: absolute;
 top: 0;
 left: 0;
 width: 500px;
 margin: 0;            
 padding: 0;

 /*CSS3 keyframes animation*/
 animation-name: AutoSlide;
 animation-duration: 30s;
 animation-iteration-count: infinite;
 animation-timing-function: ease-in-out;
}

.wrapper-regiobus {
  z-index : 1;
  position : absolute;
  top: 0;
  left : 0;
  width:76vw;
  height : 100vh;
  margin-left : 24vw;
  background-repeat : no-repeat;
  background-size :  auto 100vh;
  background-image : url('../images/reseamipy.jpg');
  background-position : -16vw 0;
}

.menu-regiobus {
  height : 195px;
  background-image : url('../images/reseamipy.jpg');
  background-size : 800% auto; 
  background-position : 3.5% 93.7%;
}



/************************ FEEDS ***************************/

.one-screen {
  height:100vh;
}

.feed {
  height:100vh;
  padding-top : 30px;
}

.iframe-feeds {
  margin: 0px 7vw 0px 7vw;
}

.iframe-feeds iframe{
  border:0px;width : 100%; height :90vh;}

a.retour-menu{
  font-size : 14px; 
  opacity:0.5; 
  font-weight: 300;
}

.header-feed {
  font-size : 12px; 
  height : 8vh; 
  font-weight: 300; 
  margin : 0px 10px 10px 11vw;
}


@media only screen  and (max-width: 770px){
.iframe-feeds {
  margin : 0px 0px 130px 0px;
}

.iframe-feeds iframe{

height : 2225px;
  }

#feed {
  margin-left: -35px;
  margin-top : 100px !important;
}

.header-feed p {
  padding : 0px;
  margin: 0px;
}

.retour-menu, .one-screen{
  display : none;
}

.header-feed {
    height : auto; 

}

}

/************************************************* RESPONSIVE ***************************************************/
/************************************************* RESPONSIVE ***************************************************/
/************************************************* RESPONSIVE ***************************************************/



@media only screen and (min-width: 770px) {
  div.sticky-top{
    display : none;
  }
  div.sticky-footer {
   display : none;
 }

 .back-menu-page{
  display: inherit;
}

}

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

  /*********** TOP STICKY ***********/

  div.sticky-top {
  /*position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;*/
  position : fixed;
  width: 100vw;
  top: 0;
  height: 80px;
  background-color: #fff;
  text-align: center;
  line-height: 100px;
  box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.13);
  z-index: 999;
}

div.sticky-top img{
  width: 100px;
  max-width:120px; 
}

/*********** FOOTER STICKY ***********/

div.sticky-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  text-align: center;
  height: 80px;
  background-color: #fff;
  text-align: center;
  line-height: 90px;
  box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.13);
  z-index: 998;

}

div.sticky-footer img{
  width: 10vh;
  max-width:120px; 
}

ul.tapbar {
  margin: 0px;
  padding: 0px;

}

ul.tapbar li{
  border-left : 1px solid #f3f3f3;
  width: 33%;
  float: left;
}

ul.tapbar li#print,ul.tapbar li#web,ul.tapbar li#video {
  padding: 0;
  margin: 0;
}

ul.tapbar a{
  display: block;
  padding:0;
  line-height: 80px;
  font-size: 25px;

}

span.new-tab {
  position: absolute;
  top :-10px;
  color : red;
  font-size : 12px
}

/*********** ADAPTATION HOME ***********/


.content, #splitscreen {
  display: none;
}

#splitscreen {
  width : 100vw;
  height: 90vh;
  max-width : 100vw;

}

#photo {
  display: none;
}


/*********** ADAPTATION PAGE FILLE ***********/


.back-menu-page{
  display: none;
}

#titre-page{
  margin-top: 8.5vh;
  margin-left: 20vw;
}

#titre-page img {
  display: none;
}

/*********** ADAPTATION CARDS ***********/

.bigone{
  margin-top: 3vh;
  float: left;
}

.one {
  margin: 8vw;
}

.left {
  margin :0;
  float : left;
}

.right {
  margin :0;
  float : left;
} 

.fiche {
  float : left;
  padding : 40px;
  /*padding-top:220px;*/
  width : 66vw;
  background-color : #fff;
  border-radius: 3px;
  box-shadow: 0px 0px 35px 3px rgba(0, 0, 0, 0.1);
}

.fiche a{
  padding : 35px;
  margin-bottom: 7px;
  display: block;
  /*white-space:nowrap;*/
}


.fiche p {
  font-weight : 300;
  width : 100%;
  opacity : 0.6;
  margin-bottom : 30px;}

  .illustration {
    display: none;
    margin-top :60px;
    width : 45vw; 
    height : 211px;
  }

  .illustration.left {
    padding: 0;
    margin:0;

  }

  .illustration.right {
    padding: 0;
    margin:0;
  }

  .right h3, .right strong, .right p, .right a.linkhard {
    margin-left :0;
  }



}

/************************************************* RESPONSIVE V2 ***************************************************/
/************************************************* RESPONSIVE V2 ***************************************************/
/************************************************* RESPONSIVE V2 ***************************************************/

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

  .slider{
    height: 400px;
    margin-top : 35px !important;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    .cards {
      flex: 1 1 auto;
    } ;
  }

.footer {
  display: none;
}

.premiere-cards {margin-left: 30px;
}

}

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

  .slider{
    width : 834px;
    margin :auto;

  }

  .cards {
    min-height: 370px;
  }

  .fin-slide {
    display: none;
  }

}

.slider-tag{
  padding-bottom: 8px;
  margin-bottom: 10px;
  display: flex;
  width : 240px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  .tag {
    flex: 1 1 auto;
  } ;
}

.cards {
  float : left;
  margin : 15px 5px 15px 15px;
  width : 248px;
  background-color : #fff;
  border-radius: 3px;
  box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.07);
}


.tag {
  /*margin-right : 3px;*/
  opacity : 0.8;
  background-color : #F1F1F1;
  color : black;
  border-radius: 50px;
  font-weight: 400;
  font-size: 9px;
  padding : 8px;
  margin-right: 5px;

}

.cards h2{
  margin:0;
  font-size : 18px;
  font-weight : 500; 
}

.cards p {
  font-weight : 400;
  font-size: 12px;
  opacity : 0.6;;
}

.cards a {
  font-size : 12px;
}

.img-cards{
    height: 165px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}

.content-cards{
  padding : 15px 18px 5px 18px;
}

.bouton-zone{
  padding : 0px 15px 5px 15px;
}

.bouton-zone a{
  font-weight: 400;
  margin :0;
  padding : 0;
  text-transform: uppercase;
  float: left;

}

a.principal{
  color : #fff !important;
  border-radius: 3px;
  padding : 6px;

}

a.secondaire{
  border-radius: 3px;
  padding : 6px;

}

.fin-slide {
  height: 400px; 
  width: 218px; 
}


/******************* COULEUR DE LIEN ET TITRE *********************/ 

.web h2, .web a{
  color : #660101;
}

.web a.principal{ 
  background-color: #660101;
}


.print h2, .print a{
  color : #250071;
}

.print a.principal{ 
  background-color: #250071;
}

.video h2, .video a{
  color : #d4802e;
}

.video a.principal{ 
  background-color: #d4802e;
}

.video a.principal:hover {
  color : #fff;
  background-color: #026A87;
}

.print a.principal:hover, .web a.principal:hover {
  color : #fff;
  background-color: #db9128;
}

.video a.secondaire:hover {
  color : #026A87;
}

.print a.secondaire:hover, .web a.secondaire:hover {
  color : #db9128;
}


/*****************  TITRE PAGE **************************/ 

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

  #titre-page {
    margin-left: 10px;
    margin-top: 9vh;
    margin-bottom: 70px;
  }

  #titre-page img{
    margin-bottom : -10px;
    margin-left: 73px;
    height: 32px; 
    opacity: 1;
  }

  #titre-page.web img{
    margin-left: 69px;
  }

  #titre-page h2{
    margin:0px 0 0 70px;
    font-weight : 500;
    font-size : 50px;
    z-index: 1;
    width: 10vw; 
    min-width : 120px;
    opacity: 1;
    color : black;
  }

 h1{
              font-weight : 100;
              margin-left: 25px;
              font-size : 150px;
              font-style: italic;
              opacity : 0.1;
              margin-bottom : -75px;
            }




}

#titre-page {
    margin-bottom: 50px;
  }

    #titre-page h2{
    color : black;