@media  (max-width: 1400px) , (max-height: 901px) {
    .imagehotspot-container >div{
        background-size: 1100px auto
    }
    #mission-1 .mission1-play #btn-valid.btn-valid {
        bottom: 2px;
        right: 425px;
        line-height: 48px;
        font-size: 27px;
    }
    #map{
        width: 1100px
    }
    #fhotspot17 {
        right: 806px;
        top: 293px;
    }
    #groupe-17 {
        position: absolute;
        left: -225px;
        top: -80px;
    }
    #groupe-17:after {
        top: 22px;
        right: -58px;
        width: 60px;
        height: 58px;
        z-index: -1;
        background-repeat: no-repeat;
        background-position: right top;
    }
    #groupe-26:after {
        top: 49px;
        right: -118px;
        width: 176px;
        height: 22px;
        z-index: -1;
    }
    #groupe-2 {
        position: absolute;
        left: -425px;
        top: -145px;
    }
    #fhotspot8 {
        right: 830px;
        top: 285px;
        width: 35px;
        height: 46px;
    }
    #groupe-8 {
        position: absolute;
        left: -200px;
        top: -10px;
    }
    #groupe-8:after {
        top: 17px;
        right: -22px;
        width: 26px;
        height: 3px;
        z-index: -1;
        background-repeat: no-repeat;
        background-position: right top;
    }
    #groupe-13 {
        position: absolute;
        left: -125px;
        top: 107px;
    }
    #groupe-13:after {
        top: -98px;
        right: 4px;
        width: 30px;
        height: 104px;
        z-index: -1;
        background-position: bottom right;
        background-repeat: no-repeat;
        /* background-size: 45px auto; */
        border-top: 2px solid #fff;
    }
    #fhotspot14 {
        right: 484px;
        top: 330px;
    }
    #groupe-14 {
        position: absolute;
        left: 85px;
        top: 125px;
    }
    #groupe-14:after {
        top: -111px;
        right: 93px;
        width: 155px;
        height: 118px;
        z-index: -1;
        background-position: top right;
    }
    #fhotspot20 {
        right: 475px;
        top: 240px;
        width: 32px;
        height: 49px;
    }
    #groupe-20 {
        position: absolute;
        left: 84px;
        top: 85px;
    }
    #groupe-20:after {
        top: -56px;
        right: 196px;
        width: 76px;
        height: 60px;
        z-index: -1;
        background-position: bottom;
        background-size: 60px;
        background-repeat: no-repeat;
    }
    #fhotspot31, #fhotspot5 {
        right: 500px;
        top: 250px;
        width: 36px;
        height: 48px;
    }
    #groupe-31 {
        position: absolute;
        left: -210px;
        top: 6px;
    }
    #groupe-31:after {
        top: 17px;
        right: -24px;
        width: 26px;
        height: 2px;
        z-index: -1;
    }
    #fhotspot4 {
        right: 513px;
        top: 167px;
        width: 33px;
        height: 47px;
    }
    #groupe-4 {
        position: absolute;
        left: 35px;
        top: -152px;
    }
    #groupe-4:after {
        top: 55px;
        right: 66px;
        width: 146px;
        background-size: 146px;
        height: 100px;
        z-index: -1;
        background-repeat: no-repeat;
    }
    #fhotspot28 {
        right: 426px;
        top: 225px;
        width: 35px;
        height: 46px;
    }
    #groupe-28 {
        position: absolute;
        left: 30px;
        top: 40px;
    }
    #groupe-28:after {
        top: -8px;
        right: 184px;
        width: 24px;
        height: 40px;
        z-index: -1;
        background-position: bottom;
        background-position: left bottom;
    }
    #fhotspot29 {
        right: 454px;
        top: 212px;
        width: 31px;
        height: 46px;
    }
    #groupe-29 {
        position: absolute;
        left: -25px;
        top: -110px;
    }
    #groupe-29:after {
        top: 54px;
        right: 150px;
        width: 2px;
        height: 58px;
        z-index: -1;
    }
    #fhotspot6 {
        right: 395px;
        top: 220px;
        width: 32px;
        height: 49px;
    }
    #groupe-6 {
        position: absolute;
        left: 25px;
        top: -60px;
    }
    #groupe-6:after {
        top: 19px;
        right: 189px;
        width: 15px;
        height: 45px;
        z-index: -1;
        background-position: left top;
    }
    #fhotspot7 {
        right: 275px;
        top: 85px;
        width: 33px;
        height: 49px;
    }
    #groupe-7 {
        position: absolute;
        left: -3px;
        top: -70px;
    }
    #groupe-7:after {
        top: 55px;
    right: 97px;
    width: 64px;
    height: 30px;
        background-position: right;
    }
    #fhotspot21 {
        right: 32px;
        top: 377px;
        width: 31px;
        height: 47px;
    }
    #groupe-21 {
        position: absolute;
        left: -130px;
        top: -75px;
    }
    #groupe-21:after {
        top: 55px;
        right: 47px;
        width: 2px;
        height: 22px;
        z-index: -1;
    }
    #groupe-18:after {
        top: 19px;
        right: 180px;
        width: 60px;
        height: 119px;
        background-size: 43px 120px;
        background-repeat: no-repeat;
    }
    #groupe-26 {
        position: absolute;
        left: -305px;
        top: -53px;
    }
    #groupe-1 {
        position: absolute;
        left: -250px;
        top: -52px;
    }
    #groupe-18 {
        position: absolute;
        left: 70px;
        top: -125px;
    }
    #groupe-2:after {
        top: 49px;
        right: -242px;
        width: 252px;
        height: 99px;
        z-index: -1;
        background-position: right bottom;
        background-repeat: no-repeat;
        /* background-size: auto 136px; */
    }
    #groupe-1:after {
        top: 55px;
        right: -65px;
        width: 100px;
        height: 15px;
        z-index: -1;
        background-position: left bottom;
    }
    #fhotspot32, #fhotspot11 {
        right: 737px;
        top: 445px;
        width: 33px;
        height: 49px;
    }
    #groupe-32, #groupe-11 {
        position: absolute;
        left: -235px;
        top: -4px;
    }
    #groupe-32:after {
        top: 17px;
        right: -47px;
        width: 48px;
        height: 2px;
        z-index: -1;
    }
    #fhotspot23 {
        right: 62px;
        top: 380px;
        width: 31px;
        height: 47px;
    }
    #fhotspot22 {
        right: 130px;
        top: 424px;
        width: 31px;
        height: 47px;
    }
    #groupe-22 {
        position: absolute;
        left: -244px;
        top: 98px;
    }
    #groupe-22:after {
        top: -72px;
        right: -61px;
        width: 70px;
        height: 73px;
        background-repeat: no-repeat;
        z-index: -1;
    }
    #fhotspot19 {
        right: 204px;
        top: 271px;
        width: 33px;
        height: 47px;
    }
    #groupe-19 {
        position: absolute;
        left: 43px;
        top: -50px;
    }
    #groupe-19:after {
        top: 55px;
        right: 115px;
        width: 95px;
        height: 21px;
        z-index: -1;
        background-repeat: no-repeat;
        background-position: right top;
    }
  #fhotspot18 {
        right: 230px;
        top: 284px;
        width: 32px;
        height: 49px;
    }
    #fhotspot9 {
        right: 170px;
        top: 355px;
        width: 33px;
        height: 49px;
    }
    #groupe-9 {
        position: absolute;
        left: -175px;
        top: 35px;
    }
    #groupe-9:after {
        top: -20px;
        right: 10px;
        width: 20px;
        height: 20px;
        z-index: -1;
        background-position: left top;
        background-repeat: no-repeat;
    }
    #fhotspot25 {
        right: 335px;
        top: 220px;
        width: 31px;
        height: 47px;
    }
    #groupe-25 {
        position: absolute;
        left: 172px;
        top: -120px;
    }
    #groupe-25:after {
        top: 30px;
        right: 188px;
        width: 147px;
        height: 103px;
        z-index: -1;
        background-size: 186px auto;
        background-repeat: no-repeat;
        background-position: center;
    }
    #fhotspot13 {
        right: 470px;
        top: 348px;
        width: 35px;
        height: 44px;
    }
    #fhotspot10 {
        right: 510px;
        top: 332px;
        width: 33px;
        height: 49px;
    }
    #groupe-10 {
        position: absolute;
        left: -93px;
        top: 60px;
    }
    #groupe-10:after {
        top: -25px;
        right: 74px;
        width: 2px;
        height: 26px;
        z-index: -1;
    }
    #fhotspot16 {
        right: 635px;
        top: 416px;
        width: 33px;
        height: 49px;
    }
    #groupe-16 {
        position: absolute;
        left: -80px;
        top: 115px;
    }
    #groupe-16:after {
        top: -80px;
        right: 100px;
        width: 2px;
        height: 80px;
        z-index: -1;
        background-repeat: no-repeat;
    }
    #fhotspot15 {
        right: 658px;
        top: 424px;
        width: 33px;
        height: 49px;
    }
    #groupe-15 {
        position: absolute;
        left: -260px;
        top: 108px;
    }
    #groupe-15:after {
        top: -82px;
        right: -84px;
        width: 95px;
        height: 83px;
        z-index: -1;
        background-repeat: no-repeat;
        background-position: right;
         background-size: 95px auto;
    }
    #fhotspot12 {
        right: 725px;
        top: 405px;
        width: 33px;
        height: 49px;
    }
    #groupe-12 {
        position: absolute;
        left: -90px;
        top: -62px;
    }
    #groupe-12:after {
        top: 52px;
        right: 86px;
        width: 2px;
        height: 13px;
        z-index: -1;
    }
              #fhotspot11 {
              right: 668px;
              top: 412px;
              width: 33px;
              height: 49px;
        }
    #fhotspot24 {
        right: 950px;
        top: 396px;
        width: 33px;
        height: 49px;
    }
    #groupe-24 {
        position: absolute;
        left: -110px;
        top: -62px;
    }
    #groupe-24:after {
        top: 55px;
        right: 65px;
        width: 2px;
        height: 9px;
        z-index: -1;
    }
              #fhotspot1 {
              right: 693px;
              top: 201px;
        }
    #fhotspot3 {
        right: 640px;
        top: 120px;
    }
    #groupe-3 {
        position: absolute;
        left: -250px;
        top: -106px;
    }
              #fhotspot26 {
              right: 681px;
              top: 142px;
              width: 24px;
              height: 35px;
        }
    #fhotspot27 {
        right: 618px;
        top: 153px;
        width: 24px;
        height: 35px;
    }
    #groupe-27 {
        position: absolute;
        left: -70px;
        top: -138px;
    }

    #groupe-27:after {
        top: 50px;
        right: 79px;
        width: 20px;
        height: 100px;
        background-position: bottom right;
        z-index: -1;
        background-repeat: no-repeat;
    }
    #fhotspot30 {
        right: 65px;
        top: 425px;
        width: 31px;
        height: 47px;
    }
    #groupe-30 {
        top: 95px;
    }
    #groupe-30:after {
        top: -75px;
        right: 90px;
        width: 15px;
        height: 114px;
        background-size: 27px;
        background-repeat: no-repeat;
        z-index: -1;
    }
    #groupe-3:after {
        top: 58px;
        right: -62px;
        width: 80px;
        height: 60px;
        z-index: -1;
        background-image: url(../img/list-trait/vinci-environnement.png);
        background-repeat: no-repeat;
        background-position: right bottom;
        border-left: 2px solid #fff;
    }
    
    #fhotspot2 {
        right: 665px;
        top: 175px;
    }

}

@media (max-width: 1400px){
        .logo-center img{
            width: 280px;
            height: auto;
        }
        
        section.default#pre-start .h1, section.default#pre-start h1 {
            font-size: 43px;
        }
        section.default#mission-1 .h1, section.default#mission-1 h1 {
            font-size: 32px;
        }
        section.default#mission-1 .h1 span, section.default#mission-1 h1 span{
            font-size: 32px;
        }
        .inputGroup{
            max-width: 670px
        }
        .blocurlDetail,
        #pre-start-1 .blocDetail-h5{
            max-width: 705px
        }
        .inputGroup label {
            font-size: 24px;
            line-height: 26px;
        }
        .blocDetail-h5 h5, .blocDetail h5{
            font-size: 33px;
            line-height: 38px
        }
        #mainNav .navbar-nav .nav-item .nav-link{
            font-size: 12.24px;
            cursor: pointer;
        }
        section.default #mainNav p{
            font-size: 11.83px;
            max-width: 100%
        }

        .btn.btn-participer:hover, .btn.btn-participer{
            font-size: 26.5px;
            line-height: 30px
        }
        .header-right-info .nav-item .nav-link{
            font-size: 13px;
            line-height: 16px;
            padding: 8px 7px 6px;
        }
        .logo-lg img{
            width: auto;
            height: 106px;
        }
      
        section.default#pre-start .h1, section.default#pre-start h1{
            padding-top: 60px
        }
        .btn-href:hover, .btn-href{
            font-size: 31.47px
        }
        .btn-prest2.btn-href:hover, .btn-prest2.btn-href {
            font-size: 22.47px;
        }

        .modal-dialog {
            max-width: 80%;
            margin: 1.75rem auto;
        }
        #boot4alert .modal-header h5{
            font-size: 35px;
            line-height: 40px;
        }
        #boot4alert .modal-body{
            font-size: 18px;
            line-height: 20px
        }
        .blocDetail h4{
          font-size: 37px
        }
        section.default p.preStart{
           font-size: 30px;
           line-height: 30px;
           letter-spacing: 0.5px;
           margin-top: 0px;
        }
        .blocDetail ul{
          font-size: 32px;
          line-height: 40px

        }
        .blocmoreDetail-center{
          max-width: 480px
        }
        #pre-start .btn.btn-participer:hover, #pre-start .btn.btn-participer {
            font-size: 19px;
            background-size: 30px
        }

        .modal-footer .btn{
            font-size: 18px;
            line-height: 30px;
            padding: 0 20px 0 30px;
            background-position: 10px center
        }

        .empty-page h2{
            font-size: 36px;
        }
        .empty-page .btn.btn-participer-add:hover, .empty-page .btn.btn-participer-add{
            font-size: 21px;
            line-height: 26px
        }
        .btn.btn-participer-add:hover, .btn.btn-participer-add{
           /* background-size: 35px;
            padding: 5px 15px 5px 35px;*/
        }
        #mentions_legal_page h2{
            font-size: 27.85px;
            line-height: 30px;
        }
        #mentions_legal_page h3{
            
            font-size: 18.8px;
        }
        section.default#mentions_legal_page p {
            font-size: 18.8px;
        }
        section#home.default{
            padding-top: 50px;
            padding-bottom: 50px;
        }
        #pre-start-1 .blocDetail-li .inputGroup{
            margin-left: 20px
        }

  

    .texthotspot .btn.btn-participer:hover, 
    .texthotspot .btn.btn-participer{
        font-size: 18.97px

    }
    
    .imagehotspot-container >div{
      padding-bottom: 680px!important
    }
    .mission1-mapSolution .imagehotspot-container >div{
        padding-bottom: 680px!important
    }
    
        .solution span {
            font-size: 35.92px;
            line-height: 35px;
            width: 500px;
        }
    .mission1-solution h4, .mission1-0 h4 {
        font-size: 25.46px;
    }
/*    .texthotspot h4 {
        font-size: 22.22px;
        line-height: 25px;
    }*/
    .texthotspot {
        top: 249px;
    }
    .mission1_end .texthotspot {
        top: 220px;
    }
    .mission1-play .texthotspot{
        width: 200px
    }
    #mission-1 .mission1-play h4.reclam {
        font-size: 19px;
        line-height: 17px;
        padding: 5px 0 5px 0px;
        background-size: 200px;
    }
    .mission1-play .drag_them {
        width: 200px;
        padding: 5px;
    }
    .mission1-play .drop_wrap{
      width: 190px
    }
    #mission-1 .mission1-play.mission1-mapSolution .imagehotspot-container h5 {
        height: 27px;
        padding: 2px 6px 0;
        line-height: 12px;
    }
    #mission-1 .mission1-play .imagehotspot-container h3,
    #mission-1 .mission1-play.mission1-mapSolution #form-valid .imagehotspot-container h3,
    #mission-1 .mission1-play h3 {
        font-size: 16px;
        line-height: 18px        
    }
    .mission1-play.mission1-mapSolution #form-valid .drop_holder {
        height: 56px;
        width: 190px;
        background-size: 190px;
        padding: 6px;
    }
    #mission-1 .mission1-play .imagehotspot-container h5, #mission-1 .mission1-play h5 {
        padding: 3px 15px;
        font-size: 13px;
        line-height: 10px;
        height: 26px;
        vertical-align: middle;
        display: block;
    }
    #mission-1 .mission1-play #entite-4 h5 {
        padding: 5px 50px 0 50px;
    }
    #mission-1 .mission1-play #entite-4 h5.en {
        padding: 5px 32px 0 32px;
    }
    .mission1-play .drag_me{
      height: 44px;
      min-height: 44px
    }
    .mission1-play .drag_holder{
      height: 44px;
      min-height: 44px
    }
    #mission-1 .mission1-play #btn-valid {
        z-index: 110;
        bottom: 18px;
        right: 564px;
        line-height: 44px;
        font-size: 25.87px;
    }
    section.default#mission-1 .div-mission-1-play {
       /* min-height: 735px;*/
    }
    .mission1-solution h4.message-validation, .mission1-0 h4.message-validation {
        font-size: 19px;
    }
    #mission-1 .mission1-play #btn-valid.btn-next-step.btn-next-step-solution {
        line-height: 30px;
    }
    .mission1-score .bloc-info-pers h5 {
        font-size: 28.78px;
        line-height: 100px;
        /*max-width: 480px*/
    }
    #mission-1 .mission1-play #btn-valid.btn-valid,
    #mission-1 .mission1-play #btn-valid.btn-next-step{
        line-height: 30px;
        font-size: 20px;
        margin-bottom: 0;
    }
    #mission-1 .mission1-play #btn-valid.btn-next-step{
        line-height: 19px;
        right: 350px
    }

    .div-bg-map{
        background-size: 1100px auto;
    }
    section.default#mission-1 .div-mission-1-end{
        background-image: url("../img/bg-bg.png");
        background-color: #04213d;
        background-size: 1100px 100%;
        background-repeat: no-repeat;
        background-position: right;
    }
    .texthotspot h4 {
        font-size: 25.22px;
        line-height: 24px;
    }
    .container-time {
        top: -100px;
    }
    .container-time-bloc {
        transform: scale(0.56);
        right: -44px;
    }
    .mission2_3 .container-time-bloc {
        transform: scale(0.56);
        right: 0px;
    }
    #mission-1 .res-800-my-1{
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    .card-checkbox .checkbox-container {
        width: 45%;
    }
    .checkbox-container-btn {
        width: 90%;
    }


}
@media  (max-width: 1500px) {
    .texthotspot h4 {
        font-size: 20px;
        line-height: 25px;
    }
}