/* only large screen */
@media (min-width: 992px) {



    /* menu */

    #section { width: 110%; margin-left: -10px; }
    #section li.dir { position: relative; border-right: 1px solid #D4D4D4; height: 100px; width: 160px; display: inline-block; text-align: center; padding: 5px 0 0 0; }
    #section a.dir { background: url(/content/images/sections/icons.png) no-repeat 0 0; padding-top: 54px; display: block; }
    a.dir.sn-6 { background-position: -100px 0px !important; }
    a.dir.sn-6:hover, a.sn-6.active { background-position: -100px -72px !important; }
    a.dir.sn-5 { background-position: 20px 0px !important; }
    a.dir.sn-5:hover, a.sn-5.active { background-position: 20px -72px !important; }
    a.dir.sn-8 { background-position: -225px 0px !important; }
    a.dir.sn-8:hover, a.sn-8.active { background-position: -225px -72px !important; }
    a.dir.sn-9 { background-position: -340px 0px !important; }
    a.dir.sn-9:hover, a.sn-9.active { background-position: -340px -72px !important; }
    a.dir.sn-16 { background-position: -445px 0px !important; }
    a.dir.sn-16:hover, a.sn-16.active { background-position: -445px -72px !important; }
    a.dir.sn-17 { background-position: -560px 0px !important; }
    a.dir.sn-17:hover, a.sn-17.active { background-position: -560px -72px !important; }

    #section em { position: absolute; z-index: 900; font-size: 11px; width: 149px; height: 40px; margin: 0 0 0 5px; padding: 6px 0 0 0; line-height: 14px; display: block; text-align: center; font-style: normal; font-weight: bold; }
    #section .sub-inner { position: absolute; z-index: 800; background-color: #fff; text-align: left; left: 5px; top: 105px; padding: 20px; border: 1px solid #C0C0C0; display: none; }
    #section .sub-inner td { padding: 0 20px; white-space: nowrap; }

    #section li.dir:hover em { height: 48px; margin-top: -1px; border-style: solid solid none solid; border-width: 1px; border-color: #CCCCCC; background-color: #FFFFFF !important; }
    #section li.dir:hover .sub-inner { display: block; }
    #section a.dir.active em { background-color: #FFD203; }

    #section :nth-child(5) .sub-inner { right: 5px; left: auto; }
    #section :last-child .sub-inner { right: 6px; left: auto; }
}


/* only middle */
@media (min-width: 768px) and (max-width: 991px) {
    
    /*#wrapper { border-top: solid 3px green;  }*/
    
    #wrapper {  width: 100%; }


    /* menu */
    #section.open { position: absolute; z-index: 5000; width: 80%; background-color: #fff; padding: 5px 5px 5px 10px; left: 0; }
    #section li.dir { display: none; width: 100%; list-style: none; }
    #section .sub-inner { margin: 0; }
    #section .sub-inner a { display: block; line-height: 16px; }
    #section table, #section td, #section tr, #section tbody { display: block; padding: 0; margin: 0; width: 100% !important; }
    #section a.dir { display: block; margin: 10px 0; }
    #section td { padding: 0; width: 100%; }
    #section td a { padding: 7px 0; border-bottom: solid 1px #CCCCCC; }
    #section li.tab { display: block; border: solid 1px #C0C0C0; padding: 5px 10px; font-size: 16px; font-weight: bold; margin-bottom: 10px; cursor: pointer; }


    #bcrumbs { border-bottom: dotted 1px #C0C0C0; padding-bottom: 20px; }


    #bottom { display: none; }
    #dir .col:nth-child(3),
    #dir .col:nth-child(4), #dir .time, #hwork,
    #player { display: none; }
    #dir .col:nth-child(5) { margin-left: 100px; }
    #key { width: 300px !important; }
    .search span { display: none; }


    .brands .slick-slide { margin: 0 10px 0 0; text-align: center; }
    .brands .slick-slide .thumb { width: 120px !important; background-size: contain !important; }
    article img { max-width: 100% !important; }

    .products li { margin: 0px 5px 10px 0px; }

    #filter label { display: inline-block; width: 50%; float: left; }
    #filter footer { clear: both; }

    ul.sort { margin: -20px 0 10px 0; }

    #detail .col-lt { width: 50%; display: inline-block; float: left; padding: 0; }
    #detail .col-rt { width: 50%; float: right; min-height: 400px; position: relative; padding-left: 20px; }
    #detail .thumb img { max-width: 100%; }

    .cost span.price { margin: 0px 10px 0px 10px; font-size: 20px; }
}

@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait ) {

    #map .inner { width: 100%; display: block; }
    #map .col { width: 100%; height: auto; margin: 0 0 20px 0; float: none; padding-left: 350px; position: relative; }
    #map .col a { position: absolute; top: 10px; left: 0; right: 50%; }
}



/* only small */
@media (max-width: 767px) {


    /*#wrapper { border-top: solid 3px orange;}*/

    .nm { display: none !important; }
    .om { display: block; }

    #wrapper {  width: auto; display: inline-block; }


    /* menu */
    #section.open { position: absolute; z-index: 5000; width: 80%; background-color: #fff; padding: 5px 5px 5px 10px; left: 0; }
    #section li.dir { display: none; width: 100%; list-style: none; }
    #section .sub-inner { margin: 0; }
    #section .sub-inner a { display: block; line-height: 16px; }
    #section table, #section td, #section tr, #section tbody { display: block; padding: 0; margin: 0; width: 100% !important; }
    #section a.dir { display: block; margin: 10px 0; }
    #section td { padding: 0; width: 100%; }
    #section td a { padding: 7px 0; border-bottom: solid 1px #CCCCCC; }
    #section li.tab { display: block; border: solid 1px #C0C0C0; padding: 5px 10px; font-size: 16px; font-weight: bold; margin-bottom: 10px; cursor: pointer; }


    #main { min-height: 0; padding: 20px 10px; }
    #player,
    #bottom,
    .brands,
    #bcrumbs { display: none !important; }

    .menu-top { padding: 0 10px; display: inline-block; }

    .om .phone { padding: 10px 20px; }

    #dir .contact { display: inline-block;width: 160px;margin: 0 10px 0 0;padding: 0;float: right;}


    #dir .logo { margin: 0 0 0 10px; display: inline-block; width: 95px; height: 80px; background-size: contain;  background: url(/content/images/logo-m.jpg) no-repeat; }
    #dir .cart { background: none; right: 10px; padding: 0; width: 70px; margin: 30px 0 0 0; }

    .search { padding: 10px; }
    .search #key { margin: 0 0 10px 0; width: 100%; }
    .search #find { display: none; }
    .search .menu-top { float: none; margin: 0 0 0 0; }
    .search .menu-top li a { font-size: inherit; }

    .title { margin: 0px 0px 20px 0px; font-style: normal; background: none; display: inline-block; width: 100%; border-bottom: solid 3px #FFD204; padding-bottom: 5px; }
    .title h1, .title h2 { background: none; padding-right: 0px; display: inline-block; margin-bottom: 0; font-size: 18px; }


    ul.sort { display: none; }

    #detail .col-lt { width: 100%; display: block; }
    #detail .col-rt { width: 100%; float: none; min-height: 0; position: relative; }
    #detail .thumb { width: 100%; padding: 10px; margin: 20px 0 10px 0; }
    #detail .thumb img { max-width: 100%; }
    #detail .cost .op { display: block; margin: 10px 0 0 60px; }

    .cart table, .cart tbody, .cart tr { display: block; padding: 0; }
    .cart td { display: inline-block; padding: 0; }
    .cart tr { border-bottom: solid 1px #cecece; }

    .button { float: none !important; margin-top: 5px; }

    .form label span { display: block; }


    #map .inner { width: 100%; display: block; }
    #map .col { width: 100%; height: auto; margin: 0 0 20px 0; float: none; }
    #contacts .col { width: 100%; margin: 0; }
    #contacts .rcolumn { margin: 20px 0px 0px 0px; position: relative; }
    #contacts textarea { width: 100%; }


    #filter select { display: block; margin: 10px 0 0 0; width: 100%; }
}

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

    #map .inner { width: 100%; display: block; }
    #map .col { width: 100%; height: auto; margin: 0 0 20px 0; float: none; padding-left: 280px; position: relative; }
    #map .col a { position: absolute; top: 10px; left: 0; right: 50%; }
}