@media (min-width: 768px){
    #moto-a-la-une{
        right: 15vw;
        width: 70%;
    }
    #moto-a-la-une h2 {
        font-size: 24px;
    }
}

@media (min-width: 1000px){
    #moto-a-la-une{
        right: 20vw;
        width: 60%;
    }
}

@media (min-width: 1370px){
    #moto-a-la-une{
        right: 25vw;
        width: 50%;
    }
}


/* IMAGE "100vh" de la HOME PAGE */

@media (max-width:1370px){
    #imgMotoAccueilBackground{
        min-height: 700px;
        /* background-color: blue; */
    }
}


@media (max-width:1270px){

#imgMotoAccueilBackground{
        min-height: 650px;
        /* background-color: green;       */
    }
}

@media (max-width:1180px){
    #imgMotoAccueilBackground{
        min-height: 600px;
    }

    #divLinkToBeginHome{
        bottom: 12%;
    }
}


@media (max-width:1000px) {

    #home{
        background-position-y: -24px;
        background-size: 100vw calc(100vh - 70px);
        left: -24px;
        top: -25px;
    }

    #imgMotoAccueilBackground{
        min-height: 530px;
        /* background-color: gray; */
        left: -16px;
    }

    #divLinkToBeginHome{
        bottom: 14%;
        width: 20%;
        font-size: 24px;
    }

    .mainContent {
        flex-direction: column;
    }
    .application,
    .section {
        flex: auto;
    }
    .button {
        font-size: 10px;
    }
    .schoolContainer {
        grid-template-columns: repeat(1, 1fr);
    }
    .router {
        padding: 0px; /* 8px */
    }
    .container {
        height: auto;
    }
    .header {
        padding: 16px;
    }
    .headerrouter {
        padding: 8px 36px;
    }
    .formContainer {
        padding: 0px 16px;
    }
    .menuToggle {
        display: block !important;
        margin-right: 1rem;
        margin-bottom: 0.5rem;
    }
    .actions {
        /* background-color: black; */
        background: linear-gradient(60deg, rgba(255,0,56,1) 0%, rgba(0,0,0,1) 70%);
        position: fixed;
        top: 0;
        left: -80vw;
        flex-direction: column;
        align-items: flex-end;
        grid-gap: 0px; /* 16px */
        /* justify-content: center; */
        height: 100vh;
        width: 80vw;
        padding: 16px;
        z-index: 200;
    }

    .logoApp{
        width: 160px;
        max-width: 90%;
    }

    .CTAButtonSecondary {
        width: 10rem;

        border: 1px solid var(--headerMenuHover);
        border-bottom: 0;
        

        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
    }
    .menu-separator {
        border: 1px solid var(--headerMenuHover);
    }   

    .searchBar.desktop {
        display: none !important;
    }
    .searchBar.phone {
        display: flex !important;
    }
    .searchBar.phone input {
        flex: 1;
    }
    .logoSchoolLogedIn {
        display: none;/* flex; */
        align-items: center;
        justify-content: center;
    }
    .logo.phone {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-top: 2rem;
        /* opacity: 0.9; */
    }
    .footer{
        padding-bottom: 3rem;
    }
    .footer.phone {
        display: block;
        border-top: 1px solid rgba(170, 170, 170, 0.171);
        border-radius: 5px;
        margin-top: 1rem;
    }
    .searchBar.phone {
        margin: 0 8px;
        padding: 16px
    }
    .application {
        padding: 0.5rem !important;
        background-color: transparent !important;
    }
    .application h3 {
        text-align: center;
    }
    #testContainer>div>div:nth-child(3) {
        text-align: left;
        padding-left: 10px;
    }
    .testItem .flex1 {
        text-align: center;
    }
    .testItem {
        display: grid;
        grid-gap: 8px;
        grid-template-columns: repeat(2, 1fr);
    }

    /* NOUVEAU */
/* - - - OCCASION - - -  */    

    #occasionone-div, #bhrone-div, #keroxone-div, #bastosone-div {
        width: 98%;
    }

    #occasion-criteres{
        flex-flow: column;
    }

    #occasion-images, #kerox-images, #bhr-images, #bastos-images{
        text-align: center;
        width: 400px;    
    }

    .occasion-img-big img, .kerox-img-big img, .bhr-img-big img, .bastos-img-big img {
        max-width: 400px;
    }

/* - - - KEROX - - -  */


    #occasion-cards, #kerox-cards, #bhr-cards, #bastos-cards{
        justify-content: center;
    }
    
    .footer{
        color: rgb(150,150,150);
    }

 /* - - - MUSTANG - - -  */
 #mustang{
    left: -24px;
    top: -25px;
 }

 #div-img-mustang{
    width: 92%;
    margin: auto;
  }

}


@media (max-width:992px) {
 
    #googlemap{
        width: 600px;
        height: 350px;
    }
    input[type=text], input[type=email], input[type=number], select{
        width: 20rem;
    }
}

@media (max-width:890px) {

    #imgMotoAccueilBackground{
        min-height: 450px;
        /* background-color: black; */
        /* left: -16px; */
    }

    #divLinkToBeginHome{
        bottom: 14%;
        width: 20%;
        font-size: 20px;
    }

    #linkToBeginHome2 img{
        width: 40px;
    }
}

@media (max-width:768px) {

    #messageAbsenceForm{
        min-width: 80%;
        max-width: 750px;
    }

    #home{
        background-position-x: -10vw;
        background-size: 120vw calc(100vh - 70px);
        left: -13px;
        top: -14px;
    }

    #mustang{
        left: -13px;
        top: -14px;
    }

    #imgMotoAccueilBackground{
        min-height: 400px;
        /* background-color: yellow; */
        /* left: -16px; */
    }

    #divLinkToBeginHome{
        left:calc(50vw - 10%);
        width: 20%;
        bottom: 18%;
        font-size: 20px;
    }

    #divLinkToBeginHome img {
        width: 40px;
    }

    .application{
        margin: 5px;
    }
    .horaires{
        margin-left: 5px;
        margin-right: 5px;
    }
    
    #showOccasion, #showKerox, #showBhr, #showBastos{
        flex-flow: column;
    }

    .bhr-title-big, .kerox-title-big, .bastos-title-big, .occasion-title-big {
        font-size: 1.5rem;
    }
    .bhr-price-big, .bastos-price-big, .occasion-price-big {
        font-size: 1.3rem;
    }
    .kerox-price-big{
        font-size: 1rem;
    }
    .bhr-options-big, .kerox-options-big, .bastos-options-big {
        font-size: 1.1rem;
    }

    #occasion-images, #kerox-images, #bhr-images, #bastos-images{
        text-align: center;
        width: auto;    
    }
    
    .kerox-img-big img, .bhr-img-big img, .bastos-img-big img {
        max-width: 300px; 
    }
    .occasion-img-big img {
        max-width: 280px; 
    }
    .occasion-img-big, .kerox-img-big, .bhr-img-big, .bastos-img-big{
        text-align: left;
    }
    
    #contact-gauche, #contact-droite, #contact-message{
        padding-left: 5px;
    }

    input[type=text], input[type=email], input[type=number], select{
        width: 16rem;
      }

    #googlemap{
        width: 500px;
        height: 300px
    }
}


@media (max-width:635px) {

    #imgMotoAccueilBackground{
        min-height: 333px;
        /* background-color: orange; */
        /* left: -16px; */
    }

    #divLinkToBeginHome{
        left:calc(50vw - 10%);
        width: 20%;
        bottom: 16%;
        font-size: 18px;
    }

    #divLinkToBeginHome img {
        width: 34px;
    }
}


    @media (max-width:576px) {

        #messageAbsenceForm{
            min-width: 90%;
            max-width: 550px;
        }

        #home{
            background-position-x: -30vw;
            background-size: 160vw calc(100vh - 70px);
        }

        #imgMotoAccueilBackground{
            min-height: 300px;
            /* background-color: red; */
            background-size: 130vw;
            background-position-x: -15vw;
            background-position-y: -120px;
        }
    
        #divLinkToBeginHome{
            bottom: 22%;
            font-size: 16px;
        }

        #homeFirstH2{
            margin: 0 0;
            padding: 0 10px;
        }

        .cols-2{
            flex-flow: column;
        }
        
        .paragraphe{
            width: 100%;
        }

        #contact-donnees{
            flex-flow: column;
        }
 
        input[type=text], input[type=email], input[type=number], select{
            width: 20rem;
        }

        #contact-gauche, #contact-droite, #contact-message{
            width: 100%;
        }

        #contact-message{
            width: 20rem;
            margin-left: 0.1rem;
            /* margin-right: 3rem; */
        }
        textarea{
            width: 100%;
        }
    
        #contact-btn{
            width: 20rem;
          }
    
        #googlemap{
            width: 330px;
            height: 250px;
    }

}

@media (max-width:500px) {
    #messageAbsenceForm{
        min-width: 96%;
        max-width: 490px;
    }

    #imgMotoAccueilBackground{
        min-height: 250px;
        /* background-color: green; */
        background-size: 130vw;
        background-position-x: -15vw;
        background-position-y: -105px;
    }

    #divLinkToBeginHome{
        bottom: 22%;
        font-size: 14px;
    }

}

@media (max-width:420px) {

    #home{
        background-position-x: -47vw;
        background-size: 180vw calc(100vh - 70px);
    }


    #imgMotoAccueilBackground{
        min-height: 202px;
        /* background-color: blue; */
        background-size: 140vw;
        background-position-x: -20vw;
        background-position-y: -120px;
        top: -6px;
        left: -5px;
    }

    #divLinkToBeginHome{
        bottom: 22%;
        font-size: 14px;
    }

    #divLinkToBeginHome img {
         width: 22px; 
    }

    .br-little{
        /* display: contents;
        padding-left: 1rem; */
      }
}

@media (max-width:365px) {

    #home{
        background-position-x: -58vw;
        background-size: 200vw calc(100vh - 270px);
    }

    #imgMotoAccueilBackground2{
        height: calc(100vh - 270px);
    }

    #divLinkToBeginHome2{
        /* margin-top: calc(90vh - 361px); */
        font-size: 12px;
    }        

    #divLinkToBeginHome2 img {
        width: 30px;
    }


    #imgMotoAccueilBackground{
        min-height: 167px;
        /* background-color: violet; */
        background-size: 150vw;
        background-position-x: -25vw;
        background-position-y: -114px;
    }

    #tri-occasion div {
        margin: 2px;
        padding: 8px;
    }

}



@media (max-width:300px) {
    

    #imgMotoAccueilBackground{
        min-height: 167px;
        /* background-color: red; */
        background-size: 160vw;
        background-position-x: -30vw;
        background-position-y: -100px;
    }

    #divLinkToBeginHome{
        bottom: 25%;
        font-size: 10px;
    }

    #contact-div {
        width: 300px
    }

    input[type=text], input[type=email], input[type=number], select{
        width: 15rem;
    }

    #contact-message{
        width: 15rem;
        margin-left: 0.1rem;
        /* margin-right: 3rem; */
    }

    #contact-btn{
        width: 15rem;
      }

    #googlemap{
        width: 230px;
        height: 200px;
}


}