// Mode: Tablet
@phone320: 320px;
@phone480: 480px;
@smartphone800: 800px;
@table-book:1024px;
@all1280:1280px;
@desktop:1600;

@width100:100%;
@width50:50%;
@width25:25%;
/* MOBILA */

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
    header{position: relative;}
    #header {width: @width100;display: block;}

    main {
        width: @width100;
        padding: 0px;
        
        .conteiner{ width: @width100;}
        ul.products-main{    display: contents;}
        ul.products-main li{width: @width100;height: auto;border: 1px solid #ddd;}
    }

    .nav{display: none;}
    
    section{
        width: @width100;

        .step-about, .step-contact, .step-google{width: @width100;position: relative;}
    }
    .main{width: @width100;}
    .heder_nav, .heder_phone, .heder_aside{width: @width100;padding: 0px;}
    
    .heder_nav{padding: 0px;}
    

    
    .heder_logo{width: @width50;text-align: left;float: left;padding: 0px;}
    .heder_phone{display:none;}
    /*MENU*/
    nav > label{display:block;padding:1em 0;text-decoration:none;text-align:center;font-weight:600;color:#f3f0ee;background-color:#2f3035;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
    nav input[type="checkbox"]{display:none}
    nav input[type="checkbox"]:checked ~ ul{display:block}
    nav ul{display:none;margin:0;padding:0;list-style:none;border-bottom:3px solid #35363a;transition:display .3s ease}
    nav ul li{text-align:center}
    nav ul li + li{border-top:0px solid #3a3838}
    nav ul li a{display:block;padding:1em 0;text-decoration:none;color: #d79e1e;}
    nav ul li a:hover{color:#5d8ad0}
}
@media (min-device-width: 1180px){
    nav.mobila{display: none}
}