@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

body {
    font-family: 'Titillium Web' !important;
}

.container-menu {
    left: calc(50% - 60px) !important;
}

.titolo_popup {
    color: #d74838 !important;
    font-weight: bold;
    font-size: 24px;
}

.lateral_gallery {
    width:100% !important;
    height:60% !important;
    top: 0px  !important;
}

.lateral_text {
    font-size: 14px !important;
    width:100% !important;
    height:40% !important;
    top:60% !important;
}

.lateral_text div {
    display: block !important;
    padding:20px !important;
    overflow-y: auto !important;;
}

.popup_background {
    opacity: 0.95 !important;
}

.vertical_centered_box {
    position:relative !important;
}

.solo-testo_popup {
    position: relative !important;
    display: flex;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
}

.solo-testo_popup > div {
    position: relative !important;
    max-height: 100%;
    display: block;
}

.play_stop {
    display: block;
    left: -webkit-calc(50% - 20px) !important;
    left: expression(50% - 20px) !important;
    left: -moz-calc(50% - 20px) !important;
    left: -o-calc(50% - 20px) !important;
    left: calc(50% - 20px) !important;
    bottom: 0px !important
}

.play {
    width: 40px !important;
    height: 40px !important;
}

.stop {
    width: 40px !important;
    height: 40px !important;
}

.close {
    height: 100% !important;
    left: -webkit-calc(100% - 50px) !important;
    left: expression(100% - 50px) !important;
    left: -moz-calc(100% - 50px) !important;
    left: -o-calc(100% - 50px) !important;
    left: calc(100% - 50px) !important;
}

.contenitore-popup.gallery .close {
    height: 40px !important; 
    top: 5px !important;
}

.close img {
    height: 26px;
}

.avanti {
    left: -webkit-calc(100% - 40px) !important;
    left: expression(100% - 40px) !important;
    left: -moz-calc(100% - 40px) !important;
    left: -o-calc(100% - 40px) !important;
    left: calc(100% - 40px) !important;
}

.indietro {
    left: 0px !important;
}

.gallery_counter_text {
    top: 5px !important;
}

.titolo {
    font-size: 24px;
    font-weight: bold;
}

.bold {
    font-weight: bold;
}

.piantina {
    width: 410px !important;
    height: 550px !important;
    top: -webkit-calc(50% - 275px) !important;
    top: expression(50% - 275px) !important;
    top: -moz-calc(50% - 275px) !important;
    top: -o-calc(50% - 275px) !important;
    top: calc(50% - 275px) !important;
    left: -webkit-calc(50% - 205px) !important;
    left: expression(50% - 205px) !important;
    left: -moz-calc(50% - 205px) !important;
    left: -o-calc(50% - 205px) !important;
    left: calc(50% - 205px) !important;
}


@media only screen and (min-width: 1024px) {
    .lateral_gallery {
        width:60% !important;
        height: 100% !important;
    }

    .lateral_text {
        width:40% !important;
        height: 100% !important;
        top:0px !important;
    }

    .lateral_text div {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow-y: auto;
        padding:20px !important;
    }

    .contenitore-popup {
        max-width:75%;
    }

    .contenitore-popup.big-text {
        max-width:100%; 
    }

    .contenitore-popup.gallery {
        max-width:100%; 
    }

    .close img {
        height: 30px;
    }

    .play_stop {
        top: -webkit-calc(100% - 60px) !important;
        top: expression(100% - 60px) !important;
        top: -moz-calc(100% - 60px) !important;
        top: -o-calc(100% - 60px) !important;
        top: calc(100% - 60px) !important;
    }

    .solo-testo_popup > div {
        position: relative !important;
        max-height: 100%;
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

@media only screen and (min-width: 1300px) {
    .solo-testo_popup > div {
        position: relative !important;
        max-height: 100%;
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .lateral_gallery {
        width:70% !important;
        height: 100% !important;
    }

    .lateral_text {
        width:30% !important;
        height: 100% !important;
        font-size: 16px !important;
        top:0px !important;
    }

    .lateral_text div {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow-y: auto;
        padding:20px !important;
    }

    .contenitore-popup {
        max-width:50%;
    }

    .contenitore-popup.big-text {
        max-width:75%; 
    }

    .contenitore-popup.gallery {
        max-width:100%; 
    }

    .close img {
        height: 36px;
    }

    .contenitore-popup.gallery .close {
        top:20px !important;
    }

    .contenitore-popup.gallery .close {
        top:20px !important;
    }

    .gallery_counter_text {
        top: 20px !important;
    }

    .play_stop {
        top: -webkit-calc(100% - 60px) !important;
        top: expression(100% - 60px) !important;
        top: -moz-calc(100% - 60px) !important;
        top: -o-calc(100% - 60px) !important;
        top: calc(100% - 60px) !important;
    }

  }

/* Smartphones (portrait and landscape) max width 600px ----------- 
@media only screen and (max-device-width : 600px) {

    .galleria {
        position: initial !important;
    }

    .lateral_text div {
        padding:20px;
        }
        
    .lateral_gallery {
        width:100% !important;
        height: 60% !important;
        top: 0% !important;
        font-size:14px !important;
        }

    .play_stop {
        display: block;
        top: -webkit-calc(100% - 35px) !important;
        top: expression(100% - 35px) !important;
        top: -moz-calc(100% - 35px) !important;
        top: -o-calc(100% - 35px) !important;
        top: calc(100% - 35px) !important;
    }

    .avanti,
    .indietro {
        width:30px !important;
        height: 30px !important;
    }

    .avanti {
        left: -webkit-calc(100% - 30px) !important;
        left: expression(100% - 30px) !important;
        left: -moz-calc(100% - 30px) !important;
        left: -o-calc(100% - 30px) !important;
        left: calc(100% - 30px) !important;
    }

    .piantina {
        width: 224px !important;
        height: 300px !important;
        top: -webkit-calc(50% - 150px) !important;
        top: expression(50% - 150px) !important;
        top: -moz-calc(50% - 150px) !important;
        top: -o-calc(50% - 150px) !important;
        top: calc(50% - 150px) !important;
        left: -webkit-calc(50% - 112px) !important;
        left: expression(50% - 112px) !important;
        left: -moz-calc(50% - 112px) !important;
        left: -o-calc(50% - 112px) !important;
        left: calc(50% - 112px) !important;
    }
       
}


/* iPads (portrait and landscape) ----------- 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    
    .play_stop {
        display: block;
    }
    
    .piantina {
        width: 298px !important;
        height: 400px !important;
        top: -webkit-calc(50% - 200px) !important;
        top: expression(50% - 200px) !important;
        top: -moz-calc(50% - 200px) !important;
        top: -o-calc(50% - 200px) !important;
        top: calc(50% - 200px) !important;
        left: -webkit-calc(50% - 149px) !important;
        left: expression(50% - 149px) !important;
        left: -moz-calc(50% - 149px) !important;
        left: -o-calc(50% - 149px) !important;
        left: calc(50% - 149px) !important;
    }

    .counter {
        vertical-align: middle !important;
        left: 50% !important;
        top: -webkit-calc(100% - 62px) !important;
        top: expression(100% - 62px) !important;
        top: -moz-calc(100% - 62px) !important;
        top: -o-calc(100% - 62px) !important;
        top: calc(100% - 62px) !important;
    }
}


/* Desktops and laptops ----------- 
@media only screen  and (min-width : 1224px) {
    .play_stop {
        display: block;
    }
  

    
    .information_block {
        position: absolute;
        width:640px !important;
        height:480px !important;
        top: -webkit-calc(50% - 240px) !important;
        top: expression(50% - 240px) !important;
        top: -moz-calc(50% - 240px) !important;
        top: -o-calc(50% - 240px) !important;
        top: calc(50% - 240px) !important;
        left: -webkit-calc(50% - 320px) !important;
        left: expression(50% - 320px) !important;
        left: -moz-calc(50% - 320px) !important;
        left: -o-calc(50% - 320px) !important;
        left: calc(50% - 320px) !important;
    }
    
    .piantina {
        width: 410px !important;
        height: 550px !important;
        top: -webkit-calc(50% - 275px) !important;
        top: expression(50% - 275px) !important;
        top: -moz-calc(50% - 275px) !important;
        top: -o-calc(50% - 275px) !important;
        top: calc(50% - 275px) !important;
        left: -webkit-calc(50% - 205px) !important;
        left: expression(50% - 205px) !important;
        left: -moz-calc(50% - 205px) !important;
        left: -o-calc(50% - 205px) !important;
        left: calc(50% - 205px) !important;
    }
}

/* Large screens ----------- 
@media only screen  and (min-width : 1824px) {

    .piantina {
        width: 596px !important;
        height: 800px !important;
        top: -webkit-calc(50% - 400px) !important;
        top: expression(50% - 400px) !important;
        top: -moz-calc(50% - 400px) !important;
        top: -o-calc(50% - 400px) !important;
        top: calc(50% - 400px) !important;
        left: -webkit-calc(50% - 298px) !important;
        left: expression(50% - 298px) !important;
        left: -moz-calc(50% - 298px) !important;
        left: -o-calc(50% - 298px) !important;
        left: calc(50% - 298px) !important;
    }
    
}
*/