@media only screen and (min-device-width: 320px) and (max-device-width:1023px)   and (orientation: portrait) {
    .logo{
        padding: 20px;
    }
    .logo h1{
        font-size: 110px;
        color: #333;
    }
    
    .nav{
        top: 320px; left: 50%;
    }

    .nav-container{
        padding: 30px 10px 50px 10px;
    }

    .nav-box{
        width: 230px;
        height: 265px;
    }

    .nav-img{
        width: 230px;
        height: 230px;
    }
    
    .nav-title{
        font-size: 25px;
    }

    .menu__block{
        top: 490px;
    }

    .menu__item{
        max-width: 100vw;
    }

}


@media only screen and (min-device-width: 320px) and (max-device-width:1023px)   and (orientation: landscape) {
    .logo{
        padding: 5px;
    }
    .logo h1{
        font-size: 50px;
    }
    
    .nav{
        top: 165px; left: 50%;
    }

    .nav-container{
        padding: 15px 10px 40px 10px;
    }

    .nav-box{
        width: 110px;
        height: 125px;
    }

    .nav-img{
        width: 110px;
        height: 110px;
    }
    
    .nav-title{
        font-size: 12px;
    }

    .menu__block{
        top: 240px;
    }

    .menu__item{
        max-width: 90vw;
    }
    
}

@media only screen and (min-device-width: 1024px) {
    .logo{
        padding-bottom: 3px;
    }
    .logo h1{
        font-size: 80px;
    }
    
    .nav{
        top: 220px; left: 50%;
    }

    .nav-container{
        padding: 20px 10px 30px 10px;
    }

    .nav-box{
        width: 150px;
        height: 175px;
    }

    .nav-img{
        width: 150px;
        height: 150px;
    }
    
    .nav-title{
        font-size: 15px;
    }

    .menu__block{
        top: 310px;
    }

    .menu__item{
        max-width: 800px;
    }

    .tc{
        font-size: 20px;
    }
}