@media screen and (max-width: 767px){

    :root{
        --homeWidth: 100%;
        --otherInfoWitdh: 100%;
        --logoFontSize: 25px;
        --sporgiDiv: 60vh;
    }

    body{
        overflow-y: scroll;
    }

    #map{
        width: 120vw;
        height: 90vh;
        transform: translateX(0px);
        transform: translateY(-8vh);
    }

    #scrollDiv{
        width: 100%;
        /*height: 100vh;*/
        flex-direction: column;
        transform: translateX(0px);
        transform: translateY(var(--sporgiDiv));
        left: 0;
        box-shadow: -0px -5px 4px rgba(0, 0, 0, 0.25);
        border-radius: 25px 25px 0px 0px;
        overflow-y: hidden;
        overflow-x: hidden;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    #scrollDiv::-webkit-scrollbar {
        display: none;
    }

    .chiudiDiv{
        -webkit-animation:chiudi 1.2s ease-in-out forwards;
        -moz-animation:chiudi 1.2s ease-in-out forwards;
        animation:chiudi 1.2s ease-in-out forwards;
    }
    
    .estendiDiv{
        -webkit-animation:estendi 1.2s ease-in-out forwards;
        -moz-animation:estendi 1.2s ease-in-out forwards;
        animation:estendi 1.2s ease-in-out forwards;
    }
    
    @-moz-keyframes chiudi { 
        100% { -moz-transform: translateY(var(--sporgiDiv)); } 
    }
    @-webkit-keyframes chiudi { 
        100% { -webkit-transform: translateY(var(--sporgiDiv)); } 
    }
    @keyframes chiudi { 
        100% { 
            -webkit-transform: translateY(var(--sporgiDiv)); 
            transform:translateY(var(--sporgiDiv)); 
        } 
    }

    @-moz-keyframes estendi { 
        0%{-webkit-transform: translateY(var(--sporgiDiv)); 
            transform:translateY(var(--sporgiDiv)); }
        100% { -moz-transform: translateY(20vh); } 
    }
    @-webkit-keyframes estendi { 
        0%{-webkit-transform: translateY(var(--sporgiDiv)); 
            transform:translateY(var(--sporgiDiv)); }
        100% { -webkit-transform: translateY(20vh); } 
    }
    @keyframes estendi { 
        0%{-webkit-transform: translateY(var(--sporgiDiv)); 
            transform:translateY(var(--sporgiDiv)); }
        100% { 
            -webkit-transform: translateY(20vh); 
            transform:translateY(20vh); 
        } 
    }

    #maniglia{
        height: 100px;
        padding: 5px 0px 15px 0px;
        position: sticky;
        background: #fff;
        top: 0;
        width: 100%;
    }

    #tira{
        height: 8px;
        border-radius: 5px;
        background-color: #d9d9d9;
        width: 60%;
    }

    #wheatherNow{
        display: none;
    }

    #logo{
        width: var(--homeWidth);
    }

    #imgLogo{
        width: 50px;
        height: 50px;
    }

    #textLogo{
        font-size: var(--logoFontSize);
    }

    #home{
        border-right: none;
    }

    #iconoTesto p{
        font-size: 32px;
    }

    #homeUp{
        width: 90%;
    }

    /*----SEARCH-ZONE---*/

    #manuSearch p{
        font-size: 20px;
    }

    #otherInfo{
        width: 100%;
        border-right: none;
        margin-top: 3vh;
    }
    
    #OthInfoContainer{
        width: 80%;
        height: 95%;
        display: flex;
        justify-content: space-around;
    }

    /*----------------*/

    #infoTemp p{
        font-size: 17px;
    }

    #infoTemp > div{
        width: 85%;
    }

    /*-------PROSSIME PREVISIONI-----*/
    #proxPrev{
        height: 25vh;
    }

    /*------PREVISIONI PROSSIMI GIORNI------*/
    #otherDays{
        margin-top: 5%;
        width: 95%;
        height: auto;
    }

    #containerSquares{
        position: relative;
        width: 100%;
        height: 60px;
        overflow-x: scroll;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    #containerSquares::-webkit-scrollbar {
        display: none;
    }

    #containerSquares > div{
        flex-direction: row;
        min-width: 80%;
        height: 55px;
        margin-left: 5%;
        justify-content: space-around;
    }

    #containerSquares > div h1{
        margin-bottom: 0;
    }

    #containerSquares > div img{
        width: 40px;
        height: 40px;
    }

    #containerSquares > div:last-child{
        margin-right: 20px;
    }

    #myChart{
        margin-bottom: 50%;
    }
}

@media screen and (min-width: 767px) and (max-width: 1023px){

}