/*
Site Name: xLCZ
Description: Theme dév par XLCZ
Version: 4.1.0
Author: xLCZ
Author URI: http://www.xlcz.fr
*/








/************************************************* 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, a.principal{
  transition: background-color 0.5s, margin-left 0.5s, border-bottom 0.1s;

}
.lien a:hover {
  background-color: #fff; 
  opacity : 1;
  border-bottom : 2px solid #000;
  margin-left: 5px;
}

a { 
  padding : 2px 5px 2px 5px;
  font-size : 30px;
  text-decoration : none; 
  font-weight : 500;
  transition : color 1s;
}

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

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

    .new2000 {
      animation: colorblink2000 2s infinite ease;}
          @keyframes colorblink2000 { 
            0% { color : #2a9df4; opacity:0.5; }
            50% { color : #2a9df4; opacity: 1;}
            100% { color : #2a9df4; opacity:0.4; }

          }
           .new2000 strong{
        font-weight: 200;
      }

    .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('http://www.xlcz.fr/docs/ascension.jpg');
                                                    background-size : cover;
                                                  }

                                                  .illustration.regio {
                                                    background-image : url('http://www.xlcz.fr/images/MASTERv1.3.jpg');
                                                    background-size : 600%;
                                                    background-position : 55% 47%;}


                                                    .illustration.lucioles {
                                                      background-image : url('http://www.xlcz.fr/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('http://www.xlcz.fr/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('http://www.xlcz.fr/images/reseamipy.jpg');
  background-position : -16vw 0;
}

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



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

.one-screen {
  height:100vh;
}

#feed {
  height:100vh;
}

.iframe-feeds {
  margin: 0px ;
}

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

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 : 695px;
  }

#feed {
  margin-left: -35px;
  margin-top : 20px !important;
  padding-top: 20px !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
}


 ***********/


/*********** FOOTER STICKY V2 ***********/
div.sticky-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 56px;
  background-color: #fff;
    box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.13);
  z-index: 998;
}

div.sticky-footer ul.tapbar{
  margin: 0px;}

div.sticky-footer ul li {
  text-align: center;
  width: 20vW;
  float: left;
  border: 0px solid black;
}

div.sticky-footer svg {
  fill: black;
  opacity: 0.6;
  width : 30px;
        margin: 10px 0px  -0px 0px;

  /*margin: 10px 0px  -0px 0px;
  transition: opacity 0.5s, fill 0.5s, margin 0.5s;*/
  animation: tabbar-animation  3.5s ease 0s 1 reverse ;

}

div.sticky-footer svg:hover{
  margin: 3px 0px  -3px 0px;
}


div.sticky-footer a{
  display: block;
  font-size: 12px;
  font-weight: 300;
  opacity: 0.7;
  color: #fff;
  /*color: #fff;
  transition: opacity 0.5s, color 0.2s, fill 0.5s;*/
  animation: tabbar-text-animation  3.5s ease 0s 1 reverse ;

}

div.sticky-footer a:hover {
  opacity: 1;
  color: black;
}

.sticky-footer.video  svg:hover {
  fill: #d4802e !important;

}


.sticky-footer.web  svg:hover {
  fill: #660101 !important;
}

.sticky-footer.print  svg:hover {
  fill: #250071 !important;
}


@keyframes tabbar-text-animation {

  0% {color: #fff;}
  25% {color:#000;}
  100% {color: #000;}

}

@keyframes tabbar-animation {
  0% {margin: 10px 0px  -0px 0px;}
  15% {margin: 3px 0px  -3px 0px;}
  100% {margin: 3px 0px  -3px 0px;} 

}



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


 #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, .fin-slide-home {
  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;

}






/*************************************************** HOME NIGHT ******************************************************/


.home-night {

}

.home-night a{
  color : #f8f4f1;

}

div#menu {
  float : left;
  width : auto;
  margin-left: 10vh;
}

div.wrapper{
  margin: 5vh;
  height : 90vh;
  background-color:#000;
  background: url('../images/toit-nuit.JPG');
  background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 10%;}


div.wrapper svg{
  margin-top : 10vh;
  margin-left: 8px;
  height: 45px;
}


/*************************************************** SLIDESHOW PUBLI ******************************************************/


#feed {
width: 100vw; 
height : 100vh;
float : left; 
margin : 30px 0px 0px 0px;}

.slider-point {
width : 100%;
height : 85vh;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;

  .cards-feed {
    flex: 1 1 auto;
  }

}

.cards-feed {
float : left;
min-width : 350px !important;
height : 84vh;
padding : 25px;
margin:  25px 15px 25px 30px !important;}


.title-col {
  width : 100%; 
  float: left;"

}

.title-col h2{
  font-weight : 500;
margin : 5px 0px 20px 0px;
 width:200px; float : left;"

}

.voir-plus {
  font-size : 15px;
  text-align : right; 
  width : 145px; 
  margin-top : 7px;
  float : left; 

}


.voir-plus a{
  font-size : 15px;
  padding : 7px 15px 7px 15px;
  border-radius : 50px;
  border : 1px solid black;
}

.voir-plus a:hover{
  color : blue;
  border : 1px solid blue;
}

.title-col img{
height : 20px;
margin-bottom : -1px;

}

  /*** SLIDESHOW PUBLI MOBILE ***/


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

#feed {
height:  calc(100vh - 10px);}

.slider-point {
height : 76vh;

}
.cards-feed {
min-width : 250px !important;
padding : 5px;
height : 86vh;
overflow: scroll;
margin:  25px 5px 25px 20px !important;}

.voir-plus{
  display : none;
}


}

/************************************************* RESPONSIVE V3 ***************************************************/
/************************************************* RESPONSIVE V3 ***************************************************/
/************************************************* RESPONSIVE V3 ***************************************************/

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


.home-night .wrapper {
height: 100vh;
margin: 0px;

}

#menu, #menu .content {
  margin: 50px 0px 0px 40px !important;
}


div#menu svg {
  margin-left: 2px;
  margin-top:22.5vh;
  height: 30px !important;
}


div#menu ul li a{
  line-height:35px;
  font-size: 25px;
}


      .new2000 {
        font-size:25px;
        font-weight: 100 !important
      ;}
     


}

/************************************************* HOME OPENING ANIM ***************************************************/

.cls-1 { 
  fill:#f8f4f1;
  opacity: 1;
  animation: opening 5s ease;
}

@keyframes opening {
0%{fill:black; opacity: 0;}
10%{fill:black; opacity: 1;}
90%{fill:black; opacity: 1;}
100%{  fill:#f8f4f1;  opacity: 1;}
}

div.wrapper {  
  animation: reveal 5s ease;
}

div.wrapper a{
  animation: reveal-a 5s ease;
}

@keyframes reveal-a {
  0%{opacity: 0;}
  10%{opacity: 0;}
  90%{opacity: 0;}
  100%{opacity: 1;}
}

@keyframes reveal {
  0%{background: url(); }
  10%{background: url();  }
  90%{background: url();  }
  100%{background: url('../images/toit-nuit.JPG');background-color:#000;
 }
}

.welcome, .bienvenue {
  opacity: 0;
  position : absolute;
  font-weight: 200;
  font-size : 25px;
  left : -300px;
}

.welcome {
  animation: welcome 2.2s 0s ease-in-out;
}
.bienvenue {
  animation: welcome 2.2s 2s ease-in-out;
}


@keyframes welcome {
  0%{opacity: 0; left: 10vh; }
  10%{opacity: 0; left: 10vh;}
  30%{opacity: 1; left : 16vh;}
  80%{opacity: 1; left : 16vh;}
  100%{opacity: 0; left : 23vh; }
}

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

@keyframes welcome {
  0%{opacity: 0; left: 0;}
  10%{opacity: 0; left: 0;}
  30%{opacity: 1; left : 40px;}
  80%{opacity: 1; left : 40px;}
  100%{opacity: 0; left : 100px;}
}

}



/*********** MARQUEE NEWS ************/


.marquee-frames{
  border-left : 1px solid #f8f4f1;
  overflow: hidden;
  height : 30px;
  width : 300px;
  margin-left: 5px;

  animation: reveal-a 5s ease;
}

.marquee-news{
  opacity: 0;
  color : white;
  text-align: right;
  display:inline-block;
  line-height: 30px;
  height : 30px;
  width : 1050px;
  animation: marqueelike 11s 4s infinite linear;

}

.marquee-frames a{
  font-size : 16px;
  text-decoration : underline;
}

.marquee-frames .new2000 strong{
  font-weight: 700;

  }

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

    .marquee-frames .new2000 {
        font-size : 16px;

    }

    .marquee-frames{
      width : calc(100vw - 45px);
    }
  }


@keyframes marqueelike{
    0%  {
        transform:translateX(350px);
        opacity:1;
    }
 
    50% {
        transform:translateX(-350px);
         opacity:1;
    }
 
    100%  {
        transform:translateX(-1050px);
         opacity:1;
    }
}