/*    DIMENSIONI IPAD:
    - Ipad Pro: 1024x1366
    - Ipad Mini: 768x1024
    - Ipad Air: 820x1180
    - Ipad: 768x1024
*/
/* Da fixare iPad Pro M4 13inch, possibile modifica utile min-device-width al posto di min-width */


/*#############################*/
/*##### iPad in verticale #####*/
/*#############################*/
@media only screen and (min-width: 700px) and (max-width: 1024px) and (min-height: 1024px) and (max-height: 1400px) {
    
    .social a img:hover{
        opacity: calc(100%);
    }

    .titolo{
        width: 50vw;
    }

    .menu{
        display: none;
    }

    .tasto_menu_responsive{
        display: flex;
    }

    .tasto_menu_responsive img{
        width: 10vw;
        z-index: 2;
    }

    .menu_responsive{
        z-index: 1;
        padding-top: 5%;
        position: absolute;
        display: flex;
        width: 25vw;
        flex-direction: column;
        margin: 30% 0% 0% -75%;
        background-color: rgb(17, 51, 102);
        border-radius: 0px 0px 20px 0px;
    }

    .menu_responsive a{
        z-index: 1;
        color: white;
        padding: 1.0vw;
        font-size: 3.7vw;
        text-decoration: none;
    }
    
    /*-------------------------*/
    /*----- WHY CHOOSE US -----*/
    /*-------------------------*/
    
    .text_information{
        width: 100vw;
    }

    .titolo_info{
        font-size: 4vh;
    }

    .text_info{
        font-size: 2.3vh;
        width: 90vw;
        height: 60vh;
        text-align: center;
    }

    .linea_vr{
        display: none;
    }

    .immagine_laterale{
        display: none;
    }


    /*-----------------------*/
    /*-------- ROOMS --------*/
    /*-----------------------*/

    .spazio_iphoneeipad_top{
        width: 100vw;
        height: 7vh;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        color: white;
    }

    .container_rooms{
        display: none;
    }

    /*-----------------------*/
    /*------- SERVICE -------*/
    /*-----------------------*/

    .main_service{
        width: 100vw;
    }

    .titolo_service{
        width: 80vh;
    }
    
    .service{
        width: 70vw;
    }

    .other:hover{
        transition: calc(1s);
        opacity: calc(100%);
    }

    .immagine_laterale{
        display: none;
    }

    /*--- TRASPORTI ---*/

    .container_trasporti{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .secondi_servizi{
        height: 20vh;
        width: 70vw;
    }

    .titolo_trasporti{
        font-size: 4vw;
    }
    
    .info_trasporti{
        font-size: 3vw;
    }
}

@media only screen and (min-width: 700px) and (max-width: 900px) and (min-height: 600px) and (max-height: 1200px) {

    .social a img:hover{
        opacity: calc(100%);
    }

    .titolo{
        width: 50vw;
    }

    .menu{
        display: none;
    }

    .tasto_menu_responsive{
        display: flex;
    }

    .tasto_menu_responsive img{
        width: 10vw;
        z-index: 2;
    }

    .menu_responsive{
        z-index: 1;
        padding-top: 5%;
        position: absolute;
        display: flex;
        width: 25vw;
        flex-direction: column;
        margin: 30% 0% 0% -75%;
        background-color: rgb(17, 51, 102);
        border-radius: 0px 0px 20px 0px;
    }

    .menu_responsive a{
        z-index: 1;
        color: white;
        padding: 1.0vw;
        font-size: 3.7vw;
        text-decoration: none;
    }
    
}

@media only screen and (min-width: 700px) and (max-width: 900px) and (min-height: 600px) and (max-height: 750px) {

    .social a img:hover{
        opacity: calc(100%);
    }

    .titolo{
        width: 50vw;
    }

    .menu{
        display: none;
    }

    .tasto_menu_responsive{
        display: flex;
    }

    .tasto_menu_responsive img{
        width: 10vw;
        z-index: 2;
    }

    .menu_responsive{
        z-index: 1;
        padding-top: 5%;
        position: absolute;
        display: flex;
        width: 25vw;
        flex-direction: column;
        margin: 30% 0% 0% -75%;
        background-color: rgb(17, 51, 102);
        border-radius: 0px 0px 20px 0px;
    }

    .menu_responsive a{
        z-index: 1;
        color: white;
        padding: 1.0vw;
        font-size: 3.7vw;
        text-decoration: none;
    }

}



/*#####################*/
/* iPad in orizzontale */
/*#####################*/

@media only screen and (min-width: 1024px) and (max-width: 1100px) and (max-height: 1000px) {
    
    .social a img:hover{
        opacity: calc(100%);
    }

    /*-----------------------*/
    /*-------- ROOMS --------*/
    /*-----------------------*/

    .click_room{
        color: white;
        -webkit-text-stroke: 1px black;
    }

    .info_card{
        color: whitesmoke;
        -webkit-text-stroke: 1px black;
        font-size: 2vw;
    }
}

/* iPad in orizzontale */
@media only screen and (min-width: 1024px) and (max-width: 1100px) and (max-height: 720px) {

    .social a img:hover{
        opacity: calc(100%);
    }

    /*-----------------------*/
    /*-------- ROOMS --------*/
    /*-----------------------*/

    .click_room{
        color: white;
        -webkit-text-stroke: 1px black;
    }
    
    .info_card{
        color: whitesmoke;
        -webkit-text-stroke: 1px black;
        font-size: 2vw;
    }
}

/* iPad in orizzontale */
@media only screen and (min-width: 1024px) and (max-width: 1100px) and (max-height: 600px) {

    .social a img:hover{
        opacity: calc(100%);
    }

    /*-----------------------*/
    /*-------- ROOMS --------*/
    /*-----------------------*/

    .click_room{
        color: white;
        -webkit-text-stroke: 1px black;
    }
    .info_card{
        color: whitesmoke;
        -webkit-text-stroke: 1px black;
        font-size: 2vw;
    }
}

/* iPad Pro in orizzontale */
@media only screen and (min-width: 1024px) and (max-width: 1400px) and (min-height: 820px) and (max-height: 1100px) {

    .social a img:hover{
        opacity: calc(100%);
    }

    /*-----------------------*/
    /*-------- ROOMS --------*/
    /*-----------------------*/

    .click_room{
        color: white;
        -webkit-text-stroke: 1px black;
    }

    .info_card{
        color: whitesmoke;
        -webkit-text-stroke: 1px black;
        font-size: 2vw;
    }
}

/* Ipad Air Only */
@media only screen and (min-width: 1180px) and (max-width: 1200px) and (max-height: 820px) {

    .social a img:hover{
        opacity: calc(100%);
    }

    /*-----------------------*/
    /*-------- ROOMS --------*/
    /*-----------------------*/

    .click_room{
        color: white;
        -webkit-text-stroke: 1px black;
    }
    .info_card{
        color: whitesmoke;
        -webkit-text-stroke: 1px black;
        font-size: 2vw;
    }
}