@media (max-width: 320px) {

    body h1 {
            font-size: 1.6em;
            /* margin: .67em 0; */
            line-height: unset;    
        }

    .preload .loading-bar {
    /* border: 1px solid #f00; */
    position: relative;
    top: 50%;
    left: 5%;
    z-index: 3000;
  
}
    #contenair,#page-9 .atable,.client{
        display: none;
    }
.temoignage {
   
        border: 2px solid #fff;
        height: 110px;
        margin-top: 6px;
    }

.legend {
       
        font-size: 0.9em;
    }  
img.tem-img {
        /* border: 1px solid #f00; */
        /* margin: 15px 15px 0 5px; */
        height: 106px;
    } 
.temoignage .ttt {
        /* border: 1px solid #f00; */
        border-radius: 0;
        position: absolute;
        top: 65px;
        right: 8px;
        width: 133px;
        font-size: 15px;
        background-color: #181818;
        color: #fff;
    } 
/* ********************************** page 1 ****************************/
        header .logo {
            /* border: 1px solid #f00; */
            width: 147px;
            height: auto;
            margin-top: 15px;
            margin-left: 14px;
        }

        .logo img {
            /* border: 1px solid #f00; */
            width: 140px;
            height: auto;
        }
        .wrape-video img {
            /* border: 1px solid #0c0; */
            position: absolute;
            top: 12%;
            right: 10%;
            display: block;
            width: 200px;
            height: 289px;
            margin: auto;
        }

        .slogan {
            /* border: 1px solid #f00; */
            display: table;
            color: aliceblue;
            text-transform: uppercase;
            position: relative;
            top: 56%;
            left: 8%;
            font-size: 20pt;
        }

        .preload .pre-slogan {
            /* border: 1px solid #f00; */
            position: relative;
            top: 52%;
            left: 5%;
            z-index: 3000;
            height: 40px;
            width: 100%;
            max-width: 320px;
        }
        .bubbles li:nth-child(4) {
            width: 60px;
            height: 60px;
            left: 80%;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
            -webkit-animation-duration: 22s;
            animation-duration: 82s;
        }

/* ********************************** page 2 ****************************/
#page-2 h1{
    position: relative;
    top: -449px;
}
#page-2 .agence {
    /* border: 1px solid #f00; */
    /* background: #000; */
    top: 519px;
}
section#page-2{
    position: relative;
}
#page-2 .affiche-1 {
    /* border: 1px solid #f00; */
    /* position: relative; */
    padding-left: 0px !important;
    padding-right: 0px !important;
}
        #page-2 .layer-1 {
            /* border: 1px solid #fc0; */
            width: 100%;
            height: 50vh;
            background-image: url(../images/affiche-1-1.jpg);
            background-position: left;
            background-repeat: no-repeat;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #page-2 .layer-2{
            /* border: 1px solid #f00; */
            /* width: 200px;
            height: 100px; */
            width: 390px;
            height: 200px;
            background-image: url('../images/affiche-1-2.png');
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            /* top: 65%; */
            top: 33%;
            /* right: 0%; */
            right: -20%;

        }

        #page-2 .layer-3 {
            /* border: 1px solid #f00; */
           /*  width: 130px;
            height: 160px; */
            width: 190px;
            height: 240px;
            background-image: url(../images/affiche-1-3.png);
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
           /* top: 45% ; */
           top: 0% ;
            right: 45%;
        }

        #page-2 .layer-4 {
            /* border: 1px solid #f00; */
            width: 50px;
            height: 50px;
            background-image: url(../images/affiche-1-4.png);
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            /* top: 60%; */
            top: 45%;
            right: 35%;
        }
        #page-2 .wrape-img {
            /* border: 1px solid #f00; */
            float: none;
            /* background: #f90; */
            /* width: 60%; */
            height: 53vh;
            /* position: relative;
            top: 0;
            left: 0; */
            position: absolute;
            top: 183px;
            right: 0
        }

        #page-2 .wrape-agence {
            /* border: 1px solid #f00; */
            float: none;
            /* width: 60%; */
            height: 100%;
            position: relative;
            top: 0px ;
            right: 0px;
            color: aliceblue;
        }

/* ********************************** page 3 ****************************/
        #page-3{
            /* border: 1px solid #f00; */
            width: 100%;
            height: 100%;
        }
        #page-3 h1{
            position: relative;
            top: -421px;
            left: 0px;
        }
        
        #page-3 p{
            margin-left: -4px;
        }

        img.img-responsive.img-fluid {
            /* border: 1px solid #f00; */
        }
        .wrape-graph {
            /* border: 1px dashed #fc0; */
            margin-top: 44px;
            margin-bottom: 19px;
        }

        #page-3 .wrape-agence, #page-3 .affiche-2{
            /* border: 1px solid #f90; */
            /* width: 100%;
            height: 100vh; */
            background: #000 !important;
            color: aliceblue;
            float: none;

        }
        
        #page-3 .wrape-img img {
            /* border: 1px solid green; */
            min-width: 200px;
        }
        #page-3 .wrape-img {
            /* border: 1px solid #f00; */
            float: none;
            /* background: #f90; */
            width: 100%;
            /* height: auto; */
            position: relative;
            top: 48px;
            left: 0;
        }
        #page-3 .boxeur-plan1 img {
            /* border: 1px solid #f00; */
            width: 2%;
            height: auto;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
            bottom: 0%;
            /* right: 30%; */
        }
        #page-3 .boxeur-plan img {
            /* border: 1px solid #fc0; */
            width: 100%;
            height: auto;
            position: absolute;
            top: 0px;
            /* left: 0px; */
            left: 0px !important;
            /* overflow-x: hidden; */
        }
      
        #confettiCanvas {
            /* border: 1px solid #fc0; */
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            display: block !important;
            z-index: 99;
        }
        #page-3 .agence-web {
            /* border: 1px solid #f00; */
            float: none;
            background: #000;
            width: 100%;
            height: 100%;
            position: relative;
            top: 982px;
            right: -13px;
            color: aliceblue;
           
        }
        #page-3 .clear {
            border: 1px solid #fc0;
            /* visibility: hidden; */
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 31px;
            margin-bottom: 10px;
        }
/* ********************************** page Client ****************************/

.client h2{
            width: auto;
            text-align:start;
            padding: 20px;
            color: aliceblue;

          }
/* ********************************** page 4 ****************************/
        #page-4 h1{
            position: relative;
            top: -246px;
        }
        
        #page-4 {
            /* border: 1px solid #f90; */
            width: 100%;
            height: 100%;
            background: #000;
            color: aliceblue;
            overflow: hidden;
        }
        #page-4 .agence {
            margin: 10px;
            position: relative;
            top: 651px;
        }
        #page-4 .wrape-img {
            position: relative;
            top: -66px;
            right: -200;

        }
        #page-4 .wrape-img img {
            /* border: 1px solid #f90; */
           /*  min-width: 300px;
            position: relative;
            right: -400px !important;
            overflow-x: hidden; */

            min-width: 200px;
            position: relative;
            right: -483px !important;
            overflow-x: hidden;
        }
        #page-4 .clear {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 212px;
            margin-bottom: 10px;
        }
/* ********************************** page 5 ****************************/

        #page-5 .agence {
            float: none !important;
            /* border: 1px solid #f00; */
            
            margin: 0px 9px;
            position: relative;
            top: 295px;
        }

        #page-5 h1{
            position: relative;
            top: -351px;
        }
    
        
        #page-5 .wrape-img {
            float: none !important;           
            /* border: 1px solid #f00; */
            width: 100%;
            height: 50vh;
            position: relative;
            top: -304px;
            background: url(../images/affiche-5-2.jpg);
            background-repeat: no-repeat;
            background-position: left bottom;
            background-size: 100% auto;
        }
        #page-5 {
            /* border: 1px solid #f90; */
            width: 100%;
            height: 100%;
            background: #000;
            color: aliceblue;
            /* background: url(../images/affiche-5-2.png);
            background-repeat: no-repeat;
            background-position: left bottom;
            background-size: 70% auto; */
          
            /* background-size: cover; */

        }
        #page-5 .clear {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 71px;
            margin-bottom: 10px;
        }
/* ********************************** page 6 ****************************/
        #page-6 {
            /* border: 1px solid #f90; */
            width: 100%;
            height: 100%;
            background: #000;
            color: aliceblue;
            position: relative;
        }
        #page-6 h1{
            position: relative;
            top: -255px;
        }
        #page-6 .agence {
            
            float: none !important;
            /* border: 1px solid #f00; */
            margin: 0px 9px;
        }
        #page-6 .agence-web {
            /* border: 1px solid #f00; */
            position: relative;
            top: 329px;
            left: 0;
            z-index: 5;
        }
        #page-6 .wrape-img {
            position: relative;
            width: 100%;
            height: 243px;
            top: -135px;
            right: 0;
            /* border: 1px solid #f00; */
            z-index: 1;
            overflow: hidden;
        }
    
        #page-6 .runner {
            position: relative;
            /* border: 1px solid blue; */
            top: 0px;
            left: 200px;
            z-index: 2;
            
            min-width: 300px !important;
           
        }
        #page-6 .sky {
            position: absolute;
            /* border: 1px solid #fc0; */
            top: 0px;
            left: 0px;
            z-index: 1;
        }
        #page-6 .clear {
            border: 1px solid #fc0;
            /* visibility: hidden; */
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 71px;
            margin-bottom: 10px;
        }
/* ********************************** page 7 ****************************/

        #page-7 {
            /* border: 1px solid #f90; */
            width: 100%;
            height: 100%;
            background: #000;
            color: aliceblue;
            position: relative;
            overflow: hidden;
        }
        #page-7 h1{
            position: relative;
            top: -321px;
        }
        #page-7 .affiche-5 {
            border: 0px solid #fc0;
        }
        #page-7 .agence {
            /* border: 1px solid #f00; */
            float: none !important;
            margin: 0px 10px;
            position: relative;
            top: 335px;
            right: 0;
        }

        #page-7 .wrape-img {
            position: relative;
            width: 100%;
            height: 368px;
            top: -473px;
            right: 0;
            /* border: 1px solid #f00; */
            z-index: 1;
            overflow: hidden;
        }

        #page-7 img.stade {
            position: relative;
            top: 0px;
            left: 0px;
            width: 100%;
            height: auto;
            transition: 5s ease-in-out;
        }
        #page-7 img.panel {
            /* border: 1px solid #f00; */
            background: transparent;
            position: absolute;
            top: 60px;
            left: -10px;
            width: 200px;
            height: auto;
            transform: translate(-25px, -25px);
        }
        #page-7 img.player{
            /* border: 1px solid #f00; */
            background: transparent;
            position: absolute;
            top: 100px;
            left: 227px;
            width: 157px;
            height: auto;
            transition: 16s ease-in-out;
            transition:  2s;
            transition-timing-function: cubic-bezier(.14,.87,.85,.45);
            transform: translate(35px, 45px); 
        }
        #page-7 img.stade.active {

            transition: 20s ease-in-out;
            -ms-transform: scale(1);
            -webkit-transform: scale(1);
            transform: scale(1.2);

        }
        #page-7 img.player.active {
      
           
            transition: 20s;
            transition-timing-function: cubic-bezier(.14,.87,.85,.45);
            /* transform:  translate(28px, 25px); */
            transform: translate(-44px, -33px);
    
        }


/* ********************************** page 8 ****************************/

        #page-8 {
            /* border: 1px solid #f90; */
            width: 100%;
            height: 100%;
            background: #000;
            color: aliceblue;
            position: relative;
            overflow: hidden;
        }
        #page-8 h1{
            position: relative;
            top: -455px;
            left: -18px;
            z-index: 300;
        }
        #page-8 p{
            margin-left: -17px;
        }
        #page-8 .affiche-5 {
            border: 1px solid #fc0;
        }
        #page-8 .agence {
            /* border: 1px solid #f00; */
            float: none !important;
            margin: 0px 10px;
            position: relative;
            top: 455px;
            right: 0;
            z-index: 300;
        }
        #page-8 .wrape-img {
            position: relative;
            width: 100%;
            height: 80vh;
            top: -225px;
            right: 0;
            /* border: 1px solid #f00; */
            z-index: 1;
            overflow: hidden;
            background: url(../images/arch-plan2.jpg);
            background-repeat: no-repeat;
            background-position: right;
            background-size: cover;
        }
        #page-8 .wrape-img img {
            /* border: 1px solid #f00; */
            position: absolute;
            top: 12px;
            height: auto;
         
        }
        .arch {
            /* border: 1px solid #f00; */
            position: relative;
            width: 303px;
            right: -507px;
        }
/* ********************************** page 9 ****************************/

        #page-9 {
            /* border: 1px solid #fc0; */
            /* height: 4000px; */
            height: 100%;
            width: 100%;
            position: relative;
            z-index: 600;
            overflow: hidden;
        }
        .atable-mobile {
            /* border: 1px solid #f00; */
            width: 100%;
            height: 100%;
            /* background: url(../images/BG-mobile.jpg); */
            background-repeat: no-repeat;
            background-position: cover;
            background-size: 100% 100%;
            /* position: relative; */
            overflow: hidden;
        }
        #page-9 .atable-mobile {
            /* border: 1px solid #f00; */
            width: 100%;
            height: 100%;
            /* background: url(../images/BG-mobile.jpg); */
            background-repeat: no-repeat;
            background-position: cover;
            background-size: 100% 100%;
            overflow: hidden;
        }
        #page-9 .atable-mobile img{

        width: 100%;
        }
        #page-9 .wrap-mobile-RP,
        #page-9 .wrap-mobile-V,
        #page-9 .wrap-mobile-WD{
            /* border: 1px solid #f00; */
            width: 150px;
            height: 150px;
            /* background: #fc0; */
            position: absolute;
            z-index: 622;
            cursor: pointer; 
        }


        #page-9 .wrap-mobile-RP {  
            top: 132px;
            left: calc(50% - 27px);   
        }
        #page-9 .wrap-mobile-V {   
            top: 322px;
            left: calc(50% - 128px); 
        }
        .button {
            font-size: 18px;
            color: aliceblue;
            font-weight: bold;
            opacity: 1;
            width: 100%;
            height: 100%;
        }
        #page-9 .wrap-mobile-WD { 
            top: 491px;
            left: calc(50% - 52px);}
        #page-9>h1 {
            position: relative;
            top: 0px;
            text-align: center;
            color: aliceblue;
            z-index: 300;
        }
/* ********************************** page 10 ****************************/
        #page-10{
            /* border: 1px solid #f00; */
            width: 100%;
            height:100%;
            position: relative;
    
        }
        #page-10 ul span.rect {
            width: 5px;
            height: 5px;
            position: relative;
            top: 10px;
            left: -12px;
        }
        #page-10 .wrap-copy ul.copy li {
            display: inline-block;
            margin: 0 9px;
            font-size: .7em;
        }

        #page-10 .body {
            margin-top: 0px;
            margin-bottom: 13px;
        }

        #page-10 .body ul {
            color: aliceblue;
            font-size: 1.25em;
        }
        .adress.col-lg-6 {
            margin-top: 20px;
        }
        #page-10 .map {
            /* border: 1px solid #f00; */
            height: 300px;
            margin-top: 29px;
        }
        #page-10 ul.social-media li {
            /* border: 1px solid #fc0; */
            display: inline-block;
            width: 30px;
            height: 34px;
   
        }
        #page-10 .wrap-adress,#page-10 .map{
        float: none;
        }
        #page-10 ul.social-media {
            /* border: 1px solid #f00; */
            float: none;
        }
        #page-10 .logo {
            /* border: 1px solid #f00; */
            width: 135px;
            float: left;
        }
        /* ***************  Modals  ****************** */
        .bg-modal .modal-content {
            width: 90%;
            height: 100%;
        }
        .content-temoing {
            /* border: 3px solid #f00; */
            position: relative;
            top: 20px;
            right: -16px;
            width: 88%;
        }
        .content-text {
            /* border: 3px solid #f00; */
            position: relative;
            top: 21px;
            left: 0px;
            width: 100%;
        }
        .text-temoing, .sign-temoing {
            /* border: 1px solid #f00; */
            margin-left: 0;
        }
        .sign-temoing {
            margin-top: 8px;
            width: 100%;
        }
      
        .sign-temoign-mobile {
            /* border: 3px solid #f00; */
            margin-left: 31px;
            width: 46%;
        }
        .modal-content .logo {
            float: right;
            display: none;

        }

        .text-temoing>h1 {
            /* border: 3px solid #f00; */
            margin-top: 5px;
            display: inline-block;
            font-size: 1.25em;
            text-transform: uppercase;
        }
        .text-temoing p {
            font-size: 1.1em;
        }
        .logo-temoign-everis {
            /* border: 3px solid #f00; */
            margin-top: -18px;
            width: 50%;
            float: left;
        }
        .logo-temoign-everis {
            /* border: 3px solid #f00; */
            margin-top: -18px;
            width: 42%;
        }
        .sign-temoign-everis{
            width: 50%;
            float: left;
        }
        .logo-temoign-leader-food {
            /* border: 3px solid #f00; */
            margin-top: -18px;
            width: 39%;
            float: left;
        }

        .sign-temoign-leader-food{
            /* border: 1px solid #f00; */
            width: 50%;
            float: left;
        }
        .logo-temoign.AirFrance {
            /* border: 3px solid #f00; */
            margin-top: 17px;
            width: 50%;
        }
    /* /////////// Modale Parte II  */
    .modal-background .content h1 {
        /* border: 1px solid #f00; */
        width: 100%;
        font-size: 1.2em;
        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.1em;
        display: inline-block;
    }

    #modal-container-rp-D .modal-background .modal .header {
        margin-top: -8%;
        height: 93px;
        margin-bottom: 61%;
    }
    .modal-background .img-iinext {
        position: relative;
        top: -132px;
    }
    #modal-container-rp-D .modal-background .modal {
        background-image: url(../images/bg-rp-D.jpg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: 0px 73px;
        overflow: scroll;
    }
    #modal-container-rp-D .modal-background .wrap-content {
        /* border: 1px solid #f00; */
       
        top: -190px;
    }
    #modal-container-V-D .modal-background .modal .header, #modal-container-WD-D .modal-background .modal .header {
        margin-top: -5%;
        height: 89px;
    }
    .modal-background .modal {
        /* border: 1px solid #f00; */
        background: rgb(0,0,0);
        background: linear-gradient(96deg, rgba(0,0,0,0.5) 0%, rgba(31,31,31,0.5) 44%, rgba(62,62,62,1) 100%);
        padding: 10px;
        display: inline-block;
        border-radius: 3px;
        font-weight: 300;
        position: relative;
        width: 100%;
        height: 671px;
        padding-left: 20px;
        
    }
    #modal-container-V-D .modal-background .wrap-video {
        /* border: 1px solid #f00; */
        width: 100%;
        height: 300px;
        float: right;
        background-color: rgba(0, 0, 0, 0.25);
        position: relative;
        top: -580px;
    }

    #modal-container-V-C .modal-background .wrap-video {
        /* border: 1px solid #f00; */
        width: 100%;
        height: auto ;
        /* float: right; */
        background-color: rgba(0, 0, 0, 0.25);
        position: relative;
        top: -650px;
    }
    #modal-container-V-C .modal-background .wrap-content {
        /* border: 1px solid #f00; */
        top: 14px;
    }
    #modal-container-V-C .modal-background .modal .header {
        /* background: #c4c2c3; */
        width: 100%;
        height: 37px;
    }
    #modal-container-V-C .modal-background .content h1{
        /* border: 1px solid #f00; */
        font-size: 1.1em;
       
    }
    #modal-container-V-C .modal-background .content p {
        /* border: 1px solid #f00; */
        font-size: .9em;
       
    }
    iframe.everis {
        height: 217px;
    }
    .modal-background ul li {
        /* border: 1px solid #f00; */
        display: inline-block;
        text-transform: uppercase;
        color: #fff;
        font-size: 16px;
    }
    .modal-background ul li.name {
        /* border: 1px solid #f00; */
        font-size: 16px !important;
        float: left;
        font-weight: bold;
    }
     .modal-background .body {
        /* border: 1px solid #f00; */
        clear: both;
       
        height: 100% !important;
        overflow: scroll;
    }

    .modal-background .wrap-content {
        /* border: 1px solid #f00; */
        width: 100% !important;
        background-color: rgba(0, 0, 0, 0.25);
        float: none;
        position: relative;
        top: 40px;
    }
    #modal-container-WD-D .modal-background .wrap-content {
        /* border: 1px solid #f00; */
        width: 100% !important;
        background-color: rgba(0, 0, 0, 0.25);
        float: none;
        position: relative;
        top: 73px;
    }
    .modal-background .wrap-image {
        /* border: 1px solid #fc0; */
        position: relative;
        width: 100%;
        top: -614px;
        height: 262px;
        float: none;
    }
    .img-tablett-1 {
        position: relative;
        top: -67px !important;
    }
    .modal-background .content {
        color: aliceblue;
        text-align: left;
        padding-top: 228px;
    }
       
}   /*  End Screen média B/w 320px  */
/* *****************************************************
*
*
*
*
*********************************************************/
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 321px to 479px
*/

@media (min-width: 321px) and (max-width: 480px) {

    body h1 {
            font-size: 1.6em;
            /* margin: .67em 0; */
            line-height: unset;    
        }

    .preload .loading-bar {
    /* border: 1px solid #f00; */
    position: relative;
    top: 50%;
    left: 5%;
    z-index: 3000;
  
}
    #contenair,#page-9 .atable,.client{
        display: none;
    }
.temoignage {
   
        border: 2px solid #fff;
        height: 110px;
        margin-top: 0px;
    }

.legend {
       
        font-size: 1.18em;
    }  
img.tem-img {
        /* border: 1px solid #f00; */
        /* margin: 15px 15px 0 5px; */
        height: 106px;
    } 
.temoignage .ttt {
        /* border: 1px solid #f00; */
        border-radius: 0;
        position: absolute;
        top: 65px;
        right: 8px;
        width: 154px;
        font-size: 17px;
        background-color: #181818;
        color: #fff;
    } 
/* ********************************** page 1 ****************************/
        header .logo {
            /* border: 1px solid #f00; */
                /* border: 1px solid #f00; */
            width: 100%;
            height: auto;
            margin: 0;
            position: absolute;
        }

        .logo img {
            /* border: 1px solid #f00; */
            width: 200px;
            height: auto;
            margin-left: auto;
            margin-right: auto;
            display: block;
            margin-top: 8px;
        }
        .wrape-video img {
            /* border: 1px solid #0c0; */
            position: absolute;
            top: 12%;
            right: 10%;
            display: block;
            width: 200px;
            height: 289px;
            margin: auto;
        }

        .slogan {
            /* border: 1px solid #f00; */
            display: table;
            color: aliceblue;
            text-transform: uppercase;
            position: relative;
            top: 56%;
            left: 0%;
            font-size: 20pt;
        }

        .preload .pre-slogan {
            /* border: 1px solid #f00; */
            position: relative;
            top: 52%;
            left: 5%;
            z-index: 3000;
            height: 40px;
            width: 100%;
            max-width: 320px;
        }
        .bubbles li:nth-child(4) {
            width: 60px;
            height: 60px;
            left: 80%;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
            -webkit-animation-duration: 22s;
            animation-duration: 82s;
        }

/* ********************************** page 2 ****************************/
#page-2 h1{
    position: relative;
    top: -449px;
}
#page-2 .agence {
    /* border: 1px solid #f00; */
    /* background: #000; */
    top: 519px;
}
section#page-2{
    position: relative;
}
#page-2 .affiche-1 {
    /* border: 1px solid #f00; */
    /* position: relative; */
    padding-left: 0px !important;
    padding-right: 0px !important;
}
        #page-2 .layer-1 {
            /* border: 1px solid #fc0; */
            width: 100%;
            height: 50vh;
            background-image: url(../images/affiche-1-1.jpg);
            background-position: left;
            background-repeat: no-repeat;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #page-2 .layer-2{
            /* border: 1px solid #f00; */
            /* width: 200px;
            height: 100px; */
            width: 390px;
            height: 200px;
            background-image: url('../images/affiche-1-2.png');
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            /* top: 65%; */
            top: 33%;
            /* right: 0%; */
            right: -20%;

        }

        #page-2 .layer-3 {
            /* border: 1px solid #f00; */
           /*  width: 130px;
            height: 160px; */
            width: 190px;
            height: 240px;
            background-image: url(../images/affiche-1-3.png);
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
           /* top: 45% ; */
           top: 0% ;
            right: 45%;
        }

        #page-2 .layer-4 {
            /* border: 1px solid #f00; */
            width: 50px;
            height: 50px;
            background-image: url(../images/affiche-1-4.png);
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            /* top: 60%; */
            top: 45%;
            right: 35%;
        }
        #page-2 .wrape-img {
            /* border: 1px solid #f00; */
            float: none;
            /* background: #f90; */
            /* width: 60%; */
            height: 53vh;
            /* position: relative;
            top: 0;
            left: 0; */
            position: absolute;
            top: 183px;
            right: 0
        }

        #page-2 .wrape-agence {
            /* border: 1px solid #f00; */
            float: none;
            /* width: 60%; */
            height: 100%;
            position: relative;
            top: 0px ;
            right: 0px;
            color: aliceblue;
        }

/* ********************************** page 3 ****************************/
        #page-3{
            /* border: 1px solid #f00; */
            width: 100%;
            height: 100%;
        }
        #page-3 h1{
            position: relative;
            top: -421px;
            left: 0px;
        }
        
        #page-3 p{
            margin-left: -4px;
        }

        img.img-responsive.img-fluid {
            /* border: 1px solid #f00; */
        }
        .wrape-graph {
            /* border: 1px dashed #fc0; */
            margin-top: 44px;
            margin-bottom: 19px;
        }

        #page-3 .wrape-agence, #page-3 .affiche-2{
            /* border: 1px solid #f90; */
            /* width: 100%;
            height: 100vh; */
            background: #000 !important;
            color: aliceblue;
            float: none;

        }
        
        #page-3 .wrape-img img {
            /* border: 1px solid green; */
            min-width: 200px;
        }
        #page-3 .wrape-img {
            /* border: 1px solid #f00; */
            float: none;
            /* background: #f90; */
            width: 100%;
            /* height: auto; */
            position: relative;
            top: 48px;
            left: 0;
        }
        #page-3 .boxeur-plan1 img {
            /* border: 1px solid #f00; */
            width: 2%;
            height: auto;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
            bottom: 0%;
            /* right: 30%; */
        }
        #page-3 .boxeur-plan img {
            /* border: 1px solid #fc0; */
            width: 100%;
            height: auto;
            position: absolute;
            top: 0px;
            /* left: 0px; */
            left: 0px !important;
            /* overflow-x: hidden; */
        }
      
        #confettiCanvas {
            /* border: 1px solid #fc0; */
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            display: block !important;
            z-index: 99;
        }
        #page-3 .agence-web {
            /* border: 1px solid #f00; */
            float: none;
            background: #000;
            width: 100%;
            height: 100%;
            position: relative;
            top: 982px;
            right: -13px;
            color: aliceblue;
           
        }
        #page-3 .clear {
            border: 1px solid #fc0;
            /* visibility: hidden; */
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 31px;
            margin-bottom: 10px;
        }
/* ********************************** page Client ****************************/

.client h2{
            width: auto;
            text-align:start;
            padding: 20px;
            color: aliceblue;

          }
/* ********************************** page 4 ****************************/
        #page-4 h1{
            position: relative;
            top: -320px;
        }
        
        #page-4 {
            /* border: 1px solid #f90; */
            width: 100%;
            height: 100%;
            background: #000;
            color: aliceblue;
            overflow: hidden;
        }
        #page-4 .agence {
            margin: 10px;
            position: relative;
            top: 651px;
        }
        #page-4 .wrape-img {
            position: relative;
            top: -117px;
            right: -200;

        }
        #page-4 .wrape-img img {
            /* border: 1px solid #f90; */
           /*  min-width: 300px;
            position: relative;
            right: -400px !important;
            overflow-x: hidden; */

            min-width: 200px;
            position: relative;
            right: -483px !important;
            overflow-x: hidden;
        }
        #page-4 .clear {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 212px;
            margin-bottom: 10px;
        }
/* ********************************** page 5 ****************************/

        #page-5 .agence {
            float: none !important;
            /* border: 1px solid #f00; */
            
            margin: 0px 9px;
            position: relative;
            top: 349px;
        }

        #page-5 h1{
            position: relative;
            top: -351px;
        }
    
        
        #page-5 .wrape-img {
            float: none !important;           
            /* border: 1px solid #f00; */
            width: 100%;
            height: 50vh;
            position: relative;
            top: -293px;
            background: url(../images/affiche-5-2.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% auto;
        }
        #page-5 {
            /* border: 1px solid #f90; */
            width: 100%;
            height: 100%;
            background: #000;
            color: aliceblue;
            /* background: url(../images/affiche-5-2.png);
            background-repeat: no-repeat;
            background-position: left bottom;
            background-size: 70% auto; */
          
            /* background-size: cover; */

        }
        #page-5 .clear {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 71px;
            margin-bottom: 10px;
        }
/* ********************************** page 6 ****************************/
        #page-6 {
            /* border: 1px solid #f90; */
            width: 100%;
            height: 100%;
            background: #000;
            color: aliceblue;
            position: relative;
        }
        #page-6 h1{
            position: relative;
            top: -255px;
        }
        #page-6 .agence {
            
            float: none !important;
            /* border: 1px solid #f00; */
            margin: 0px 9px;
        }
        #page-6 .agence-web {
            /* border: 1px solid #f00; */
            position: relative;
            top: 329px;
            left: 0;
            z-index: 5;
        }
        #page-6 .wrape-img {
            position: relative;
            width: 100%;
            height: 243px;
            top: -84px;
            right: 0;
            /* border: 1px solid #f00; */
            z-index: 1;
            overflow: hidden;
        }
    
        #page-6 .runner {
            position: relative;
            /* border: 1px solid blue; */
            top: 0px;
            left: 200px;
            z-index: 2;
            
            min-width: 300px !important;
           
        }
        #page-6 .sky {
            position: absolute;
            /* border: 1px solid #fc0; */
            top: 0px;
            left: 0px;
            z-index: 1;
        }
        #page-6 .clear {
            border: 1px solid #fc0;
            /* visibility: hidden; */
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 71px;
            margin-bottom: 10px;
        }
/* ********************************** page 7 ****************************/

        #page-7 {
            /* border: 1px solid #f90; */
            width: 100%;
            height: 100%;
            background: #000;
            color: aliceblue;
            position: relative;
            overflow: hidden;
        }
        #page-7 h1{
            position: relative;
            top: -321px;
        }
        #page-7 .affiche-5 {
            border: 0px solid #fc0;
        }
        #page-7 .agence {
            /* border: 1px solid #f00; */
            float: none !important;
            margin: 0px 10px;
            position: relative;
            top: 335px;
            right: 0;
        }

        #page-7 .wrape-img {
            position: relative;
            width: 100%;
            height: 368px;
            top: -473px;
            right: 0;
            /* border: 1px solid #f00; */
            z-index: 1;
            overflow: hidden;
        }

        #page-7 img.stade {
            position: relative;
            top: 0px;
            left: 0px;
            width: 100%;
            height: auto;
            transition: 5s ease-in-out;
        }
        #page-7 img.panel {
            /* border: 1px solid #f00; */
            background: transparent;
            position: absolute;
            top: 60px;
            left: -10px;
            width: 200px;
            height: auto;
            transform: translate(-25px, -25px);
        }
        #page-7 img.player{
            /* border: 1px solid #f00; */
            background: transparent;
            position: absolute;
            top: 100px;
            left: 227px;
            width: 157px;
            height: auto;
            transition: 16s ease-in-out;
            transition:  2s;
            transition-timing-function: cubic-bezier(.14,.87,.85,.45);
            transform: translate(35px, 45px); 
        }
        #page-7 img.stade.active {

            transition: 20s ease-in-out;
            -ms-transform: scale(1);
            -webkit-transform: scale(1);
            transform: scale(1.2);

        }
        #page-7 img.player.active {
      
           
            transition: 20s;
            transition-timing-function: cubic-bezier(.14,.87,.85,.45);
            /* transform:  translate(28px, 25px); */
            transform: translate(-44px, -33px);
    
        }


/* ********************************** page 8 ****************************/

        #page-8 {
            /* border: 1px solid #f90; */
            width: 100%;
            height: 100%;
            background: #000;
            color: aliceblue;
            position: relative;
            overflow: hidden;
        }
        #page-8 h1{
            position: relative;
            top: -455px;
            left: -18px;
            z-index: 300;
        }
        #page-8 p{
            margin-left: -17px;
        }
        #page-8 .affiche-5 {
            border: 1px solid #fc0;
        }
        #page-8 .agence {
            /* border: 1px solid #f00; */
            float: none !important;
            margin: 0px 10px;
            position: relative;
            top: 455px;
            right: 0;
            z-index: 300;
        }
        #page-8 .wrape-img {
            position: relative;
            width: 100%;
            height: 80vh;
            top: -225px;
            right: 0;
            /* border: 1px solid #f00; */
            z-index: 1;
            overflow: hidden;
            background: url(../images/arch-plan2.jpg);
            background-repeat: no-repeat;
            background-position: right;
            background-size: cover;
        }
        #page-8 .wrape-img img {
            /* border: 1px solid #f00; */
            position: absolute;
            top: 80px;
            height: auto;
         
        }
        .arch {
            /* border: 1px solid #f00; */
            position: relative;
            width: 303px;
            right: -507px;
        }
/* ********************************** page 9 ****************************/

        #page-9 {
            /* border: 1px solid #fc0; */
            /* height: 4000px; */
            height: 100%;
            width: 100%;
            position: relative;
            z-index: 600;
            overflow: hidden;
        }
        .atable-mobile {
            /* border: 1px solid #f00; */
            width: 100%;
            height: 100%;
            /* background: url(../images/BG-mobile.jpg); */
            background-repeat: no-repeat;
            background-position: cover;
            background-size: 100% 100%;
            /* position: relative; */
            overflow: hidden;
        }
        #page-9 .atable-mobile {
            /* border: 1px solid #f00; */
            width: 100%;
            height: 100%;
            /* background: url(../images/BG-mobile.jpg); */
            background-repeat: no-repeat;
            background-position: cover;
            background-size: 100% 100%;
            overflow: hidden;
        }
        #page-9 .atable-mobile img{

        width: 100%;
        }
        #page-9 .wrap-mobile-RP,
        #page-9 .wrap-mobile-V,
        #page-9 .wrap-mobile-WD{
            /* border: 1px solid #f00; */
            width: 150px;
            height: 150px;
            /* background: #fc0; */
            position: absolute;
            z-index: 622;
            cursor: pointer; 
        }


        #page-9 .wrap-mobile-RP {  
            top: 132px;
            left: calc(50% - 27px);   
        }
        #page-9 .wrap-mobile-V {   
            top: 322px;
            left: calc(50% - 128px); 
        }
        .button {
            font-size: 18px;
            color: aliceblue;
            font-weight: bold;
            opacity: 1;
            width: 100%;
            height: 100%;
        }
        #page-9 .wrap-mobile-WD { 
            top: 491px;
            left: calc(50% - 52px);}
        #page-9>h1 {
            position: relative;
            top: 0px;
            text-align: center;
            color: aliceblue;
            z-index: 300;
        }
/* ********************************** page 10 ****************************/
        #page-10{
            /* border: 1px solid #f00; */
            width: 100%;
            height:100%;
            position: relative;
    
        }
        #page-10 ul span.rect {
            width: 5px;
            height: 5px;
            position: relative;
            top: 10px;
            left: -12px;
        }
        #page-10 .wrap-copy ul.copy li {
            display: inline-block;
            margin: 0 9px;
            font-size: .7em;
        }

        #page-10 .body {
            margin-top: 0px;
            margin-bottom: 13px;
        }

        #page-10 .body ul {
            color: aliceblue;
            font-size: 1.25em;
        }
        .adress.col-lg-6 {
            margin-top: 20px;
        }
        #page-10 .map {
            /* border: 1px solid #f00; */
            height: 300px;
            margin-top: 29px;
        }
        #page-10 ul.social-media li {
            /* border: 1px solid #fc0; */
            display: inline-block;
            width: 30px;
            height: 34px;
   
        }
        #page-10 .wrap-adress,#page-10 .map{
        float: none;
        }
        #page-10 ul.social-media {
            /* border: 1px solid #f00; */
            float: none;
        }
        #page-10 .logo {
            /* border: 1px solid #f00; */
            width: 135px;
            float: left;
        }
        /* ***************  Modals  ****************** */
        .bg-modal .modal-content {
            width: 90%;
            height: 100%;
        }
        .content-temoing {
            /* border: 3px solid #f00; */
            position: relative;
            top: 20px;
            right: -16px;
            width: 88%;
        }
        .content-text {
            /* border: 3px solid #f00; */
            position: relative;
            top: 21px;
            left: 0px;
            width: 100%;
        }
        .text-temoing, .sign-temoing {
            /* border: 1px solid #f00; */
            margin-left: 0;
        }
        .sign-temoing {
            margin-top: 8px;
            width: 100%;
        }
      
        .sign-temoign-mobile {
            /* border: 3px solid #f00; */
            margin-left: 31px;
            width: 46%;
        }
        .modal-content .logo {
            float: right;
            display: none;

        }

        .text-temoing>h1 {
            /* border: 3px solid #f00; */
            margin-top: 5px;
            display: inline-block;
            font-size: 1.25em;
            text-transform: uppercase;
        }
        .text-temoing p {
            font-size: 1.1em;
        }
        .logo-temoign-everis {
            /* border: 3px solid #f00; */
            margin-top: -18px;
            width: 50%;
            float: left;
        }
        .logo-temoign-everis {
            /* border: 3px solid #f00; */
            margin-top: -18px;
            width: 42%;
        }
        .sign-temoign-everis{
            width: 50%;
            float: left;
        }
        .logo-temoign-leader-food {
            /* border: 3px solid #f00; */
            margin-top: -18px;
            width: 39%;
            float: left;
        }

        .sign-temoign-leader-food{
            /* border: 1px solid #f00; */
            width: 50%;
            float: left;
        }
        .logo-temoign.AirFrance {
            /* border: 3px solid #f00; */
            margin-top: 17px;
            width: 50%;
        }
    /* /////////// Modale Parte II  */
    .modal-background .content h1 {
        /* border: 1px solid #f00; */
        width: 100%;
        font-size: 1.2em;
        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.1em;
        display: inline-block;
    }

    #modal-container-rp-D .modal-background .modal .header {
        margin-top: -8%;
        height: 93px;
        margin-bottom: 61%;
    }
    .modal-background .img-iinext {
        position: relative;
        top: -132px;
    }
    #modal-container-rp-D .modal-background .modal {
        background-image: url(../images/bg-rp-D.jpg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: 0px 73px;
        overflow: scroll;
    }
    #modal-container-rp-D .modal-background .wrap-content {
        /* border: 1px solid #f00; */
       
        top: -190px;
    }
    #modal-container-V-D .modal-background .modal .header, #modal-container-WD-D .modal-background .modal .header {
        margin-top: -5%;
        height: 89px;
    }
    .modal-background .modal {
        /* border: 1px solid #f00; */
        background: rgb(0,0,0);
        background: linear-gradient(96deg, rgba(0,0,0,0.5) 0%, rgba(31,31,31,0.5) 44%, rgba(62,62,62,1) 100%);
        padding: 10px;
        display: inline-block;
        border-radius: 3px;
        font-weight: 300;
        position: relative;
        width: 100%;
        height: 671px;
        padding-left: 20px;
        
    }
    #modal-container-V-D .modal-background .wrap-video {
        /* border: 1px solid #f00; */
        width: 100%;
        height: 300px;
        float: right;
        background-color: rgba(0, 0, 0, 0.25);
        position: relative;
        top: -580px;
    }

    #modal-container-V-C .modal-background .wrap-video {
        /* border: 1px solid #f00; */
        width: 100%;
        height: auto ;
        /* float: right; */
        background-color: rgba(0, 0, 0, 0.25);
        position: relative;
        top: -650px;
    }
    #modal-container-V-C .modal-background .wrap-content {
        /* border: 1px solid #f00; */
        top: 14px;
    }
    #modal-container-V-C .modal-background .modal .header {
        /* background: #c4c2c3; */
        width: 100%;
        height: 37px;
    }
    #modal-container-V-C .modal-background .content h1{
        /* border: 1px solid #f00; */
        font-size: 1.1em;
       
    }
    #modal-container-V-C .modal-background .content p {
        /* border: 1px solid #f00; */
        font-size: .9em;
       
    }
    iframe.everis {
        height: 217px;
    }
    .modal-background ul li {
        /* border: 1px solid #f00; */
        display: inline-block;
        text-transform: uppercase;
        color: #fff;
        font-size: 16px;
    }
    .modal-background ul li.name {
        /* border: 1px solid #f00; */
        font-size: 16px !important;
        float: left;
        font-weight: bold;
    }
     .modal-background .body {
        /* border: 1px solid #f00; */
        clear: both;
       
        height: 100% !important;
        overflow: scroll;
    }

    .modal-background .wrap-content {
        /* border: 1px solid #f00; */
        width: 100% !important;
        background-color: rgba(0, 0, 0, 0.25);
        float: none;
        position: relative;
        top: 40px;
    }
    #modal-container-WD-D .modal-background .wrap-content {
        /* border: 1px solid #f00; */
        width: 100% !important;
        background-color: rgba(0, 0, 0, 0.25);
        float: none;
        position: relative;
        top: 73px;
    }
    .modal-background .wrap-image {
        /* border: 1px solid #fc0; */
        position: relative;
        width: 100%;
        top: -614px;
        height: 262px;
        float: none;
    }
    .img-tablett-1 {
        position: relative;
        top: -67px !important;
    }
    .modal-background .content {
        color: aliceblue;
        text-align: left;
        padding-top: 228px;
    }
       
}   /*  End Screen média B/w 320px to 479px */


/*********************************************** 
#   
#
#
#
#
#
 ********************************************/

/* ####################   min-width= 480px and max-width= 767px    ###################    */
@media only screen and (min-width: 480px) and (max-width: 767px){


}


/*********************************************** 
#   
#
#
#
#
#
 ********************************************/

/* //////////////////////////// min-width: 768px and max-width: 1024px///////////////////////// */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #page-2, #page-4, #page-5, #page-6, #page-7, #page-8,.client{
        display: none;
       
    }
    .wrape-video img {
        /* border: 1px solid #0c0; */
        position: absolute;
        top: 5%;
        right: 10%;
        display: block;
        width: 374px;
        height: auto;
        margin: auto;
        z-index: 0;
    }

    .slogan {
        /* border: 1px solid #f00; */
        display: table;
        color: aliceblue;
        text-transform: uppercase;
        position: relative;
        top: 50%;
        left: 20%;
        font-size: 28pt;
    }

/* ********************************** page 3 ****************************/

    #page-3 {
        /* border: 1px solid #f90; */
        width: 100%;
        height: 58vh;
        background: #000;
        color: aliceblue;
    }
    #page-3 .agence-web {
        /* border: 1px solid #f00; */
        float: right;
        /* background: #f90; */
        /* width: 60%; */
        height: 60vh;
        position: relative;
        top: 0px;
        right: 0px;
        color: aliceblue;
    }
    #page-3 .boxeur-plan img {
        /* border: 1px solid #fc0; */
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        /* left: 0px; */
        left: 0px !important;
        /* overflow-x: hidden; */
    }
    #page-3 .boxeur-plan1 img {
        /* border: 1px solid #f00; */
        width: auto;
        height: 53vh;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: 0%;
        right: 10%;
    }
    #confettiCanvas {
        /* border: 1px solid #fc0; */
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        display: block !important;
        z-index: 99;
    }






}   /*  End Screen média B/w 768px to 1024px */

/*********************************************** 
#   
#
#
#
#
#
 ********************************************/

/* ####################   min-width= 1025px and max-width= 1280px    ###################    */

@media all and (min-width: 1024px) and (max-width: 1280px) {
     #page-5, #page-6, #page-7, #page-8{
       
        overflow: hidden;
    }
    .wrape-video img {
        /* border: 1px solid #0c0; */
        position: absolute;
        top: 18%;
        right: 10%;
        display: block;
        width: 400px;
        height: 600px;
        margin: auto;
        z-index: 0;
    }
  
    #page-2 .layer-4 {
        /* border: 1px solid #f00; */
        width: 100px;
        height: 100px;
        background-image: url(../images/affiche-1-4.png);
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 65%;
        right: 35%;
    }
  
    #page-2 .layer-3 {
        /* border: 1px solid #f00; */
        width: 360px;
        height: 450px;
        background-image: url(../images/affiche-1-3.png);
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 32%;
        right: 45%;
        z-index: 300;
    }

    #page-2 .layer-2 {
        /* border: 1px solid #f00; */
        width: 500px;
        height: 260px;
        background-image: url(../images/affiche-1-2.png);
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 63%;
        right: -4%;
    }

    #page-4 .agence {
        margin: 20px 0px;
    }

    #page-5 .agence {
        float: right;
        /* border: 1px solid #f00; */
        margin: 100px 0px;
    }

    #page-7 .agence {
        /* border: 1px solid #f00; */
        margin: 0px 0px;  
    }
    #page-8 .wrape-img img {
        /* border: 1px solid #f00; */
        position: absolute;
        top: 88px;
    }
    #page-8 .agence {
        /* border: 1px solid #f00; */
        margin: 10% 0px;
    }
    .arch {
        /* border: 1px solid #f00; */
        position: relative;
        right: -371px;
    }
    
    #expertise .wrap-iphone {
        /* border: 1px solid #f00; */
        /* width: 600px; */
        position: absolute;
        top: 47%;
        right: 20%;
    }
    #expertise .wrap-tab-2 {
        position: absolute;
        top: 86%;
        right: 18%;
    }
    #expertise .iphone img {
        width: 162px;
        height: auto;
    }
    #expertise .video {
        position: absolute;
        top: 17%;
        right: 23%;
        display: inline-block;
        z-index: 200;
    }
    #expertise .pomme {
        position: absolute;
        top: 112%;
        left: 32%;
    }
    #expertise .bannana {
        position: absolute;
        top: 126%;
        right: 9%;
    }
    #expertise .web-digital {
        position: absolute;
        top: 30%;
        left: 19%;
        display: inline-block;
    }

    #expertise .fleur-2 {
        position: absolute;
        top: 108%;
        right: 15%;
    }
  
}/*  End Screen média B/w 1025px to 1280px */

/* @media  screen and (max-height: 720px), screen and (min-width: 1280px){

   

} */



/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
    #page-4 {
        /* border: 1px solid #f90; */
        width: 100%;
        height: 100%;
        background: #000;
        color: aliceblue;
        overflow: hidden;
    }
    /* #page-5 .wrape-img img {
        border: 1px solid #f00;
        position: absolute;
        top: 158px;
        width: 100%;
        min-width: 300px;
        left: -600px !important;
        overflow-x: hidden;
    } */
    #page-2 .layer-2 {
        /* border: 1px solid #f00; */
        width: 500px;
        height: 260px;
        background-image: url(../images/affiche-1-2.png);
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 52%;
        right: -4%;
    }
    #page-2 .layer-3 {
        /* border: 1px solid #f00; */
        width: 360px;
        height: 450px;
        background-image: url(../images/affiche-1-3.png);
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 7%;
        right: 45%;
        z-index: 300;
    }

    #page-3 .agence-web {
        /* border: 1px solid #f00; */
        float: right;
        /* background: #f90; */
        width: 41%;
        height: 100vh;
        /* position: relative;
        top: 223px;
        right: 40px; */
        color: aliceblue;
    }
/* 
    #page-6 .runner {
        border: 1px solid blue;
        position: absolute;
        top: 308px;
        right: 0px !important;
        z-index: 2;
        width: 700px;
        height: auto;
        min-width: 300px;
        overflow-x: hidden;
    } */
    #page-8 .wrape-img img {
        /* border: 1px solid #f00; */
        position: absolute;
        top: 183px;
        /* width: 100%; */
        /* min-width: 300px; */
        /* transition: 5s ease-in-out; */
    }
    .arch {
        /* border: 1px solid #f00; */
        position: relative;
        right: -291px;
    }
    #page-8 .agence {
        /* border: 1px solid #f00; */
        margin: 248px 10px;
    }
	svg#tracesvg {
		/* border: 1px solid #f00;1400 */
		position: absolute;
		top: 290px;
		left: calc(50% - 478px);
		margin-right: 10%;
		z-index: 610;
	}
	.wrap-tab-1 {
		position: absolute;
		top: 740px;
		left: calc(50% - 292px);
		z-index: 622;
		
	}
	.wrap-tab-1 img{
		width: 400px;
		height: auto;
	 }
    

    #page-10 .body {
        margin-top: 82px;
        margin-bottom: 89px;
    }
    .modal-background .content p {
        /* border: 1px solid #f00; */
        margin-top: 0px;
        margin-bottom: 8px;
        /* line-height: 42px; */
        font-size: 1.2em;
        display: inline-block;
    }
  
}


/*********************************************** 
#   
#
#
#
#
#
 **********************************************/

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

    /* #page-5 .wrape-img img {
        border: 1px solid #f00;
        position: relative;
        top: 118px;
        width: 100%;
        min-width: 300px;
        left: -600px !important;
        overflow-x: hidden;
    } */

    #page-8 .wrape-img img {
        /* border: 1px solid #f00; */
        position: absolute;
        top: 131px;
    }
   
    #page-8 .agence {
        /* border: 1px solid #f00; */
        margin: 408px 0px;
    }
    .arch {
        /* border: 1px solid #f00; */
        position: relative;
        right: -624px;
        width: 550px;
        height: auto;
    }

    #page-10 .map {
        /* border: 1px solid #f00; */
        height: 600px;
        float: left;
    }

    .content-text {
        /* border: 3px solid #f00; */
        position: absolute;
        top: 138px;
        left: 0px;
    }
    .text-temoing p {
        font-size: 2.8em;
    }
}/*  End Screen média 1600px */


/*********************************************** 
#   
#
#
#
#
#
 ********************************************/

 @media only screen  and (min-width: 1900px) {
   
    #page-4 .wrape-img img {
        /* border: 1px solid #f90; */
        min-width: 300px;
        max-width: 517px;
        position: relative;
        right: -843px !important;
        overflow-x: hidden;
    }
    #page-1 .wrape-video img {
        /* border: 1px solid #0c0; */
        position: absolute;
        top: 7%;
        right: 17%;
        display: block;
        width: 595px;
        height: auto;
        margin: auto;
        z-index: 0;
    }
    #page-2 .wrape-agence {
        /* border: 1px solid #f00; */
        float: right;
        /* background: #f90; */
        /* width: 60%; */
        height: 100%;
        position: relative;
        top: 400px;
        left: 20px;
        color: aliceblue;
    }
    #page-5 .affiche-4 .balghin {
        /* border: 1px solid #f00; */
        position: absolute;
        bottom: 143px;
        width: 82%;
        min-width: 300px;
        left: calc(50% - 1169px) !important;
        overflow-x: hidden;
    }
    
    #page-6 .runner {
        /* border: 1px solid blue; */
        position: relative;
        top: 365px;
        right: -728px !important;
    }

    #page-6 .agence-web {
        /* border: 1px solid #f00; */
        position: absolute;
        top: 350px;
        left: 0;
        z-index: 5;
    }

    #page-8 .agence {
        /* border: 1px solid #f00; */
        margin: 19% 100px;
    }
    #page-8 .wrape-img img {
        /* border: 1px solid #f00; */
        position: absolute;
        top: 350px;
    }

    #page-9 {
        /* border: 1px solid #f00; */
        /* width: 100%;
        height: 3487px;
        background: url(../images/BG.jpg);
        background-repeat: no-repeat;
        background-position: cover;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden; */
    }
    

    .modal-background .content p {
        /* border: 1px solid #f00; */
        margin-top: 0px;
        margin-bottom: 8px;
        line-height: 31px;
        font-size: 1.5em;
        display: inline-block;
    }
    #modal-container-rp-C .modal-background .content p {
        /* border: 1px solid #f00; */
        margin-top: 0px;
        margin-bottom: 8px;
        line-height: 21px;
        font-size: 1.2em;
        display: inline-block;
    }

    .wrap-PC-2 img {
        width: 438px;
        height: auto;
    }

    .wrap-PC-2 {
        /* border: 1px solid #f00; */
        position: absolute;
        top: 3120px;
        left: calc(50% - 430px);
        z-index: 622;
    }

} /*  End Screen média 1900px */