.bg-modal{
          /* border: 2px solid #f00; */
        /*   width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.7);
          position: fixed;
          top: 0;
          justify-content: center;
          align-items: center;
          z-index: 300; */
          display: none;
         
      }

      .modal-Force{
            /* border: 1px solid #fc0; */
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.7);
          position: fixed;
          top: 0;
          justify-content: center;
          align-items: center;
          z-index: 300;
          display: none;

      }

      .modal-Compromis{
            /* border: 1px solid #fc0; */
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            position: fixed;
            top: 0;
            justify-content: center;
            align-items: center;
            z-index: 300;
          display: none;

      }
      .modal-Bluff{
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.7);
          position: fixed;
          top: 0;
          justify-content: center;
          align-items: center;
          z-index: 300;
          display: none;
      }

   
      .bg-modal .modal-content{
          /* border: 1px solid #f00; */
          width: 80%;
          height: 90%;
          background-color: #1b1b1b;
          position: relative;
          color: aliceblue;
          -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
          transition: width 3s;
          /* opacity: 1; */
          /* transform: translateY(0); */
          /* visibility: visible; */
          /* transition: opacity 0.5s, visibility 0.5s, transform 0.5s 0.2s; */
      }
     
      /* .modal-content:target .overlay {
    
      } */
      .close{
          position: absolute;
          top: 0;
          right: 14px;
          font-size: 42px;
          font-weight: bold;
          color: aliceblue;
          transform: rotate(45deg);
          cursor: pointer;
      }

      .content-temoing{
          /* border: 3px solid #f00; */
          position: absolute;
          top: 60px;
          right:0px;
          width: 33%;
      }
      .content-text{
          /* border: 3px solid #f00; */
          position: absolute;
          top: 60px;
          left:0px;
          width: 66%;
          padding: 0 10px;
      }
      .text-temoing, .sign-temoing{
          /* border: 1px solid #f00; */
          margin-left: 5%;
      }
      .sign-temoing{
         
         margin-top: -12px;
      }
      .text-temoing>h1{
          /* border: 3px solid #f00; */
          margin-top: 20px;
          display: inline-block;
          font-size: 2.5em;
          text-transform: uppercase;
      }
      .text-temoing p{
          font-size: 1.8em;
      }
      .img-temoign{
          border: 3px solid #c4c2c3;
          padding: 10px;
          margin-top: 20px;
          max-width: 335px;
      }
      .modal-content .logo{
          float: right;
      }
      
      .logo-temoign.AirFrance{
          /* border: 3px solid #f00; */
          margin-top: 62px;
          margin-left: 31px;
      }
   

/* <##############################     Modal   Patre 2       ########################################> */

  .button{
    
          font-size: 18px;
          color: aliceblue;
          font-weight: bold;
          opacity: 1;
        }
  .wrap-journal .buttons{
      /* border: 1px solid #f00; */
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120px;
      height: 120px;
      display: none;
      justify-content: center;
      align-items: center;
      background-color: black;
      opacity: .8;
  }

  .wrap-tab-1 .buttons{
      /* border: 1px solid #f00; */
      position: absolute;
      top: 30%;
      left: 30%;
      width: 120px;
      height: 120px;
      display: none;
      justify-content: center;
      align-items: center;
      background-color: black;
      opacity: .8;
      z-index: 200;
     
  }



  .wrap-PC-1 .buttons{
      /* border: 1px solid #f00; */
      position: absolute;
      top: 30%;
      left: 50%;
      width: 120px;
      height: 120px;
      display: none;
      justify-content: center;
      align-items: center;
      background-color: black;
      opacity: .8;
  }


  .wrap-tab-2 .buttons{
      /* border: 1px solid #f00; */
      position: absolute;
      top: 30%;
      left: 30%;
      width: 120px;
      height: 120px;
      display: none;
      justify-content: center;
      align-items: center;
      background-color: black;
      opacity: .8;
  }

  .wrap-tab-3 .buttons{
      /* border: 1px solid #f00; */
      position: absolute;
      top: 30%;
      left: 30%;
      width: 120px;
      height: 120px;
      display: none;
      justify-content: center;
      align-items: center;
      background-color: black;
      opacity: .8;
  }

  .wrap-PC-2 .buttons{
      /* border: 1px solid #f00; */
      position: absolute;
      top: 30%;
      left: 50%;
      width: 120px;
      height: 120px;
      display: none;
      justify-content: center;
      align-items: center;
      background-color: black;
      opacity: .8;
  }

  .wrap-tab-1:hover .buttons{
      display: flex;
      cursor: pointer;

  }
  .wrap-tab-2:hover .buttons{
      display: flex;
      cursor: pointer;
  }
  .wrap-PC-1:hover .buttons{
      display: flex;
      cursor: pointer;
  }
  .wrap-PC-2:hover .buttons{
      display: flex;
      cursor: pointer;
  }
  .wrap-tab-3:hover .buttons{
      display: flex;
      cursor: pointer;
  }
  .wrap-journal:hover .buttons{
      display: flex;
      cursor: pointer;
  }

  html.modal-active, body.modal-active {
      overflow: hidden;
    }

 

    /* ////////////////////////////////////////////////////////////////////// */
    .modal-background .modal {
      /* border: 1px solid #f00; */
      background: rgb(0,0,0);
      background: linear-gradient(96deg, rgba(0,0,0,1) 0%, rgba(31,31,31,1) 44%, rgba(62,62,62,1) 100%);
      padding: 10px;
      display: inline-block;
      border-radius: 3px;
      font-weight: 300;
      position: relative;
      width: 80%;
      height: 671px;
      padding-left: 20px;
      
  }
  #modal-container-rp-C .modal-background .body{
    /* border: 1px solid #f00; */
    clear: both;
    height: 100%;
  }
  .modal-background .wrap-image {
    /* border: 1px solid #f00; */
    position: relative;
    width: 50%;
    height: 300px;
    float: right;
}
  .modal-background .img-tablett-1{
      position: relative;
      top: -84px;
  }
  .modal-background .img-tablett-2 {
    position: relative;
    top: -56px;
}



  .modal-background .img-tablett-1 img{
    width: 100%;
}
  .modal-background .img-tablett-2 img{
    width: 66%;
    transform: rotate(-71deg);
}
.modal-background .img-iinext {
  position: relative;
  top: 0px;
}
.modal-background .img-iinext img {
  width: 100%;
  
}
  #modal-container-WD-C .modal-background .body{
    /* border: 1px solid #f00; */
    clear: both;

    height: 100%;
    padding-top: 10px;
  }

  #modal-container-V-C .modal-background .body{
    /* border: 1px solid #f00; */
    clear: both;
    height: 100%;
    padding-top: 0px;
  }
  #modal-container-V-C .modal-background .wrap-content {
    /* border: 1px solid #f00; */
    width: 50%;
    height: 100%;
    float: left;
    background-color: rgba(0, 0, 0, 0.25);
    /* overflow: scroll; */
}
#modal-container-V-C .modal-background .clear {
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
  margin-bottom: 82px;
  height: 52px;
}
  #modal-container-V-D .modal-background .wrap-content{
    /* border: 1px solid #f00; */
    width: 50%;
    min-height: 315px;
    float: left;
    background-color:  rgba(0, 0, 0, 0.25);
    /* margin-top: 37px; */
  }
  #modal-container-V-C .modal-background .wrap-video{
    /* border: 1px solid #f00; */
  
    width: 50%;
    height: 300px;
    float: right;
    background-color:  rgba(0, 0, 0, 0.25);
  }
  #modal-container-V-C .modal-background .content {

    padding-right: 20px;
    height: 100%;
}
  #modal-container-WD-D .modal-background ul.list {
   margin-left: 15px;
    list-style-type: disc;
    /* list-style: none; */
  }

  #modal-container-WD-D .modal-background ul.list li{
    font-size: .99em  !important;

  }
  #modal-container-WD-D .modal-background ul.list li::before{
    content: "\2022";
    color: red;
    width: 3em;
  }
  .modal-background .wrap-content{
    /* border: 1px solid #f00; */
    width: 50%;
    background-color: rgba(0, 0, 0, 0.25);
    float: left;
  }
  .modal-background .content{
    color: aliceblue;
    text-align: left;
  }
  .modal-background .content h1{
    /* border: 1px solid #f00; */
    width: 100%;
    font-size: 1.42em;
    display: inline-block;
    padding: 0px;
    margin: 0px;
  }
  .modal-background .content p{
    /* border: 1px solid #f00; */
    margin-top: 0px;
    margin-bottom: 8px;
    line-height: 25px;
    font-size: 1.3em;
    display: inline-block;
  }

  .modal-background .modal .header{
    /* background: #c4c2c3; */
    width: 100%;
    height: 60px;
  }
  .modal-background .modal.modal-case-study .info{
    /* background: #180d12; */
    width: 100%;
    height: auto;
  }
  #modal-container-V-D .modal-background .wrap-video{
    /* border: 1px solid #f00; */
    /* background-image: url('../images/video-youtube.jpg'); */
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    width: 50%;
    height: 300px;
    float: right;
    background-color:  rgba(0, 0, 0, 0.25);
  }
/* //////////////////// END modal case study //////////////////////////// */
/* +++++++++++++++++++++++++ ++++++++++++++++++++++++++++++ */

    #modal-container-rp-D .modal-background .modal .header{
      margin-top: 4%;
      height: 93px;
    }
    #modal-container-rp-D .modal-background .modal .header h2{
      display: inline-block;
      border: 2px solid #fff;
      border-left: none;
      float: left;
      color: #fff;
    }
    #modal-container-rp-D .modal-background .modal {
      background-image: url('../images/bg-rp-D.jpg');
      background-repeat: no-repeat;
      background-size: 100% auto;
      
    }
    #modal-container-WD-D .modal-background .modal {
      /* background-image: url('../images/bg-wd-D.jpg');
      background-repeat: no-repeat;
      background-position:center;
      background-size: 100% 100%; */
      
    }
    #modal-container-rp-D .modal-background .wrap-content {
      /* border: 1px solid #f00; */
      width: 60%;
      background-color: rgba(0, 0, 0, 0.25);
  }


  /* ---------------------------------------------------- */
  #modal-container-V-D .modal-background .modal .header,
  #modal-container-WD-D .modal-background .modal .header{
    margin-top: 4%;
    height: 93px;
  }
  #modal-container-V-D .modal-background .modal .header h2,
  #modal-container-WD-D .modal-background .modal .header h2{
    display: inline-block;
    border: 2px solid #fff;
    padding: 10px;
    border-left: none;
    float: left;
    color: #fff;
  }
  #modal-container-WD-D .modal-background .wrap-content {
    /* border: 1px solid #f00; */
    width: 50%;
    background-color: rgba(0, 0, 0, 0.25);
}


  /* ******************************************************** */
  .modal-background .info ul{
    display: inline-table ; 
    float: left;

  }
  .modal-background li.project{
    border-top: 3px solid #fff;
    margin-top: 10px;
    padding-top: 10px;
  }
  .modal-background  ul li{
    /* border: 1px solid #f00; */
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    font-size: 25px ;
  }
  .modal-background  ul li.name{
    /* border: 1px solid #f00; */
    font-size: 25px !important;
    float: left;
    font-weight: bold;  
  }
  .modal-background li.secteur,
  .modal-background li.project {
    /* border: 1px solid #f00; */
    display: flex;
    justify-content: left;
    align-items: left;
  }

  .modal-background li.secteur span, 
  .modal-background li.project span {
    /* border: 1px solid #f00; */
    display: block;
    margin-left: 42px;
    text-align: left;
    font-size: .7em;
  }

  .modal-background li.title span{
    border: 2px solid #fff;
    border-left: none;
    padding-right: 5px;
  }
 
 

  /* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ */

  #modal-container-rp-D .modal-background {
      display: table-cell;
      background: rgba(0, 0, 0, 0.8);
      text-align: center;
      vertical-align: middle;

  }  

  #modal-container-rp-D {
      position: fixed;
      display: table;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      transform: scale(0);
      z-index: 600;
    }
  #modal-container-rp-D.two,
  #modal-container-rp-D.two-m {
 
      transform: scaleY(0.01) scaleX(0);
      animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    
  #modal-container-rp-D.two .modal-background .modal,
  #modal-container-rp-D.two-m .modal-background .modal {
      transform: scale(0);
      animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

  #modal-container-rp-D.two.out,
  #modal-container-rp-D.two-m.out {
      transform: scale(1);
      animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

  #modal-container-rp-D.two.out .modal-background .modal,
  #modal-container-rp-D.two-m.out .modal-background .modal {
      animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

    /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


  #modal-container-rp-C .modal-background {
      display: table-cell;
      background: rgba(0, 0, 0, 0.8);
      text-align: center;
      vertical-align: middle;

  }  
    #modal-container-rp-C {
      position: fixed;
      display: table;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      transform: scale(0);
      z-index: 600;
    }
    #modal-container-rp-C.one,
    #modal-container-rp-C.one-m {
 
      transform: scaleY(0.01) scaleX(0);
      animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-rp-C.one .modal-background .modal,
    #modal-container-rp-C.one-m .modal-background .modal {
      transform: scale(0);
      animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-rp-C.one.out, 
    #modal-container-rp-C.one-m.out {
      transform: scale(1);
      animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-rp-C.one.out .modal-background .modal,  
    #modal-container-rp-C.one-m.out .modal-background .modal {
      animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

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



  #modal-container-V-D .modal-background {
      display: table-cell;
      background: rgba(0, 0, 0, 0.8);
      text-align: center;
      vertical-align: middle;

  }  
    #modal-container-V-D {
      position: fixed;
      display: table;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      transform: scale(0);
      z-index: 600;
    }
    #modal-container-V-D.three,
    #modal-container-V-D.three-m {
 
      transform: scaleY(0.01) scaleX(0);
      animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-V-D.three .modal-background .modal,
    #modal-container-V-D.three-m .modal-background .modal {
      transform: scale(0);
      animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-V-D.three.out,
    #modal-container-V-D.three-m.out {
      transform: scale(1);
      animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-V-D.three.out .modal-background .modal,
    #modal-container-V-D.three-m.out .modal-background .modal {
      animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

    /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


  #modal-container-V-C .modal-background {
      display: table-cell;
      background: rgba(0, 0, 0, 0.8);
      text-align: center;
      vertical-align: middle;
  }  
    #modal-container-V-C {
      position: fixed;
      display: table;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      transform: scale(0);
      z-index: 600;
    }
    #modal-container-V-C.four,
    #modal-container-V-C.four-m{
      transform: scaleY(0.01) scaleX(0);
      animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-V-C.four .modal-background .modal,
    #modal-container-V-C.four-m .modal-background .modal {
      transform: scale(0);
      animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-V-C.four.out,
    #modal-container-V-C.four-m.out {
      transform: scale(1);
      animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-V-C.four.out .modal-background .modal,
    #modal-container-V-C.four-m.out .modal-background .modal {
      animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
     /* ////////////////////////////////////////////////////////////////////////////// */
  #modal-container-WD-D .modal-background {
      display: table-cell;
      background: rgba(0, 0, 0, 0.8);
      text-align: center;
      vertical-align: middle;

  }  
    #modal-container-WD-D {
      position: fixed;
      display: table;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      transform: scale(0);
      z-index: 600;
    }
    #modal-container-WD-D.five,
    #modal-container-WD-D.five-m {
 
      transform: scaleY(0.01) scaleX(0);
      animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-WD-D.five .modal-background .modal,
    #modal-container-WD-D.five-m .modal-background .modal {
      transform: scale(0);
      animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-WD-D.five.out,
    #modal-container-WD-D.five-m.out {
      transform: scale(1);
      animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-WD-D.five.out .modal-background .modal,
    #modal-container-WD-D.five-m.out .modal-background .modal {
      animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
  #modal-container-WD-C .modal-background {
      display: table-cell;
      background: rgba(0, 0, 0, 0.8);
      text-align: center;
      vertical-align: middle;
  }  
    #modal-container-WD-C {
      position: fixed;
      display: table;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      transform: scale(0);
      z-index: 600;
    }
    #modal-container-WD-C.six,
    #modal-container-WD-C.six-m {
 
      transform: scaleY(0.01) scaleX(0);
      animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-WD-C.six .modal-background .modal,
    #modal-container-WD-C.six-m .modal-background .modal {
      transform: scale(0);
      animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-WD-C.six.out,
    #modal-container-WD-C.six-m.out {
      transform: scale(1);
      animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    #modal-container-WD-C.six.out .modal-background .modal,
    #modal-container-WD-C.six-m.out .modal-background .modal {
      animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    /* ######################################################################## */

    @keyframes unfoldIn {
      0% {
        transform: scaleY(0.005) scaleX(0);
      }
      50% {
        transform: scaleY(0.005) scaleX(1);
      }
      100% {
        transform: scaleY(1) scaleX(1);
      }
    }
    @keyframes unfoldOut {
      0% {
        transform: scaleY(1) scaleX(1);
      }
      50% {
        transform: scaleY(0.005) scaleX(1);
      }
      100% {
        transform: scaleY(0.005) scaleX(0);
      }
    }
    @keyframes zoomIn {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
    @keyframes zoomOut {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(0);
      }
    }