/*****************************************************************
    Responsive (mobile | mediumdevice | tablet | desktop)

    <div data-responsive="desktop">Only Desktop</div>
    <div data-responsive="tablet">Only Tablet</div>
    <div data-responsive="mediumdevice">Only Small Tablet</div>
    <div data-responsive="mobile">Only Mobile</div>
    <div data-responsive="mobile-mediumdevice-tablet-desktop">All weeee</div>

*****************************************************************/
[data-responsive] { display: none; }
[data-responsive*="desktop"] { display: block; }
td[data-responsive*="desktop"], th[data-responsive*="desktop"] { display: table-cell; }

/*#HeaderMobile { z-index: 20; background-color: #3F3F3F; line-height: 50px; font-size: 1.7em; position: fixed; left: 0; right: 0; top: 0; }
    #HeaderMobile .top { padding: 0 15px; }
        #HeaderMobile .top a { color: #FFF; }
    #HeaderMobile ul { font-size: 14px; display: none; }
        #HeaderMobile ul a { display: block; padding: 10px 25px; background-color: #808080; color: #FFF; }*/

@media (max-width: 1650px) {
    .box-brand { width: 100%; background-color: #fff; text-align: center; height: 250px; position: relative; display: block; }
}

@media (max-width: 1280px) {
    #Header .full-menu .navigation li a { display: inline-block; color: #ffffff; font-family: Oswald; font-size: 34px; line-height: 60px; font-weight: 600; text-transform: uppercase; transition: 0.3s; }
    .box-brand { width: 100%; background-color: white; text-align: center; height: 250px; position: relative; }

    #Header .full-menu .navigation { margin: 0; padding: 0; display: block; text-align: center; position: relative; top: 20vh; }

    #Footer .footer-top ul { margin-right: 0; }
        #Footer .footer-top ul li { max-width: 95%; line-height: 16px; margin-bottom: 10px; }
            #Footer .footer-top ul li a { line-height: 16px; }
}

@media (max-width: 1180px) {
    .box-brand { width: 100%; background-color: #fff; text-align: center; height: 180px; position: relative; display: block; }
}



/*****************************************************************
    Tablets
*****************************************************************/

@media (max-width: 1024px) {
    body { overflow-x: hidden; }
        body .wrapper { width: 100% !important; display: block; }
        body img { max-width: 100% !important; }
        body .flexslider { max-width: 100% !important; }
    [data-responsive], td[data-responsive], th[data-responsive] { display: none; }
    [data-responsive*="tablet"] { display: block; }
    td[data-responsive*="tablet"], th[data-responsive*="tablet"] { display: table-cell; }

    body .product .imgWrapper { min-height: 240px; padding: 15px 0; }

    .box-brand img { padding: 0 15px; }
    .box-brand { height: 150px; margin-bottom: 15px; }

    #CollectionMain .collection-section { height: 340px !important; }

    #HomeBanners { height: 800px; }
        #HomeBanners .image { height: 800px !important; }
        #HomeBanners .flex-direction-nav, #BannersBottom .flex-direction-nav { display: none; }
    #BannersBottom .image { height: 400px !important; }
        #BannersBottom .image h2 { font-size: 28px; line-height: 30px; }
    #HomeBrands section .boxcontent { padding-top: 0; padding-right: 0; }
    #HomeBrands section .logotipo { height: auto; }
    #HomeIndex section { padding: 25px 56px; }

    .list-collection .prod-collect { width: 33.3333%; }
    #HomeCatalog section .box-content .itemCatalog .imgwrapper { height: auto; }
    #HomeCatalog section .box-content .catalogLink a { font-size: 14px; }
        #HomeCatalog section .box-content .catalogLink a img { max-width: 30px !important; }
        #HomeCatalog section .box-content .catalogLink a div { max-width: 80%; float: right; }
}

@media (max-width: 992px) {
    body .wrapper { max-width: 100% !important; display: block; padding: 0 50px; }
    body { margin-top: 70px; }
    #Footer .footer-top .logo { display: none; }
    #Footer .footer-top .links { width: 50%; display: inline-block; }
    #LateralMenuLeft, #LateralSocialMenu { width: 50px; top: 140px; }
        #LateralMenuLeft .storebtn { font-size: 24px; top: 22vh; }
            #LateralMenuLeft .storebtn svg { max-width: 100%; }
        #LateralSocialMenu .social { top: 26vh; }
    #Header { height: 70px; padding: 10px 0; }
        #Header .logo svg { max-width: 100%; }
    body .marginTop80 { margin-top: 0; }
}

/*****************************************************************
   Medium Devices 
*****************************************************************/
@media (max-width: 768px) {
    [data-responsive], td[data-responsive], th[data-responsive] { display: none; }
    [data-responsive*="mediumdevice"] { display: block; }
    td[data-responsive*="mediumdevice"], th[data-responsive*="mediumdevice"] { display: table-cell; }
    /*body { padding-top: 50px; }*/
    #LoginModal .modal-dialog { margin: auto; margin-top: 15px; }
    #BasketModal { top: 0; right: 0; bottom: 0; left: 0; width: auto; }
        #BasketModal .modal-dialog { margin: auto; margin-top: 15px; width: 450px; }
    #BasketDetail .box-content table td, #BasketDetail .box-content table th { padding: 10px; }
    #BasketDetail .box-content table .price-total { font-size: 25px; }
    #BasketCheckout .basket-lines table p { height: auto; line-height: unset; margin: 3px 0; }
    #BasketCheckout .basket-steps .row { margin: 0 !important; height: auto; line-height: normal; }
        #BasketCheckout .basket-steps .row > * { min-height: 0; padding: 0; }
        #BasketCheckout .basket-steps .row label { display: block; margin-bottom: 5px; margin-top: 15px; }
    #BasketCheckout .basket-steps h3 { margin-bottom: 10px; margin-top: 20px; }
    body .responsive-scroll { overflow-x: scroll; }
    /* TODO */
    #HomeContentGalery { margin-right: 0; }

    body .product .imgWrapper { min-height: 200px; padding: 15px 0; }
    body .product .details .title { font-size: 12px; margin-bottom: 5px; height: 35px; }

    #Footer .footer-top .logo { display: none; }
    #Footer .footer-top .links { width: 50%; display: inline-block; }
        #Footer .footer-top .links ul.pull-right { float: none !important; }
        #Footer .footer-top .links ul { display: block; }

    #HomeCatalog section h3 { font-size: 28px; margin-bottom: 35px; }

    .boxBrands .row { margin: 0 -5px; }
        .boxBrands .row .col-md-3 { padding: 0 5px; }
    .boxBrands .box-brand { height: 150px; margin-bottom: 15px; }
    #CollectionMain section { padding: 35px 15px; }
    #CollectionMain .collection-section { height: auto !important; margin-bottom: 30px; padding: 55px 25px; }
        #CollectionMain .collection-section h4 { margin-bottom: 40px; }
        #CollectionMain .collection-section h2 { font-size: 30px; margin-bottom: 12px; }

    #CollectionIndex section { padding: 25px 15px; }
    #CollectionIndex .banner-section { position: relative; margin-bottom: 80px; }
    .list-collection .prod-collect { width: 50%; }
    .list-collection .product-modal .modal-content .modal-header img { max-width: 100px !important; }
    .list-collection .product-modal .modal-content .modal-header button { position: absolute; right: 0; }
    .list-collection .product-modal .modal-content .modal-header h3 { font-size: 22px; float: right; }
    .list-collection .product-modal.modal-dialog { margin-top: 10vh; }
    #HomeBanners .image .content h2 { font-size: 46px; }
    #BannersBottom .image h2 { font-size: 24px; line-height: 26px; }
    #Footer .small-foot { text-align: center; }
        #Footer .small-foot .text-right { text-align: center; margin-top: 10px; }

    #Header .full-menu .navigation li a { font-size: 26px; line-height: 46px; }
    #Header .small-foot { display: none; }
    #HomeBrands section { padding: 55px 35px; }
        #HomeBrands section .boxcontent { padding-left: 0; }
        #HomeBrands section .logotipo { max-width: 70% !important; }

    #Footer .wrapper { padding: 0 50px; }
    #Footer .footer-top ul li { width: 100%; }
}

/*****************************************************************
    Smartphones
*****************************************************************/
@media (max-width: 500px) {
    [data-responsive], td[data-responsive], th[data-responsive] { display: none; }
    [data-responsive*="mobile"] { display: block; }
    td[data-responsive*="mobile"], th[data-responsive*="mobile"] { display: table-cell; }
    #LoginModal .modal-dialog { width: auto; margin: 15px; }
    #BasketModal .modal-dialog { width: auto; margin: 15px; }
    body .zcmsdoor, body zcmscontent-options, body zcmscontentbox-options { display: none !important; }
    /* TODO */
    #CoockiesTerms { width: 100%; max-width: 100%; left: 0; bottom: 0; border-top: 1px solid #DDD; }
    #Header { height: 70px; padding: 5px 0; }
        #Header .wrapper { padding: 0 15px; }
        #Header .menu .m-bar { display: none; }
    #HomeBanners .image .content h2 { font-size: 38px; padding: 0 50px; }
    #HomeBanners .image .content .btn { font-size: 18px; }
    #HomeIndex .brands-section { padding: 35px 10px; }
        #HomeIndex .brands-section h2 { margin-bottom: 50px; font-size: 22px; }
        #HomeIndex .brands-section .row { margin: 0 -5px; }
        #HomeIndex .brands-section .col-xs-6 { padding: 0 5px; width: 100%; }
    .box-brand { height: 100px; margin-bottom: 10px; }
    #HomeIndex section { padding: 15px 15px; }
    #HomeIndex .list-collection h3 { font-size: 26px; }
    .flexslider .slides > li .product { margin: 10px 0px; }
    #BannersBottom .image h2 { font-size: 16px; line-height: 18px; }
    #BannersBottom .image { height: 200px !important; }
    #BannersBottom .slides > li { display: block; }
    #Footer .footer-top { display: none; }
    #Header .full-menu .navigation { top: 12vh; }
        #Header .full-menu .navigation li a { font-size: 22px; line-height: 46px; }
    #HomeBrands section .logotipo { max-width: 100% !important; }
    #HomeBrands section .paddingcontent { margin-bottom: 50px; }
    #HomeBrands h3 { font-size: 30px;  margin-bottom: 25px;  }
    #HomeBrands section .boxcontent .btn { font-size: 16px; }
    #HomeBrands section, #HomeCatalog section { padding: 55px 15px; }
    #HomeCatalog section .box-content .itemCatalog .collection h4{font-size:14px;}
        #HomeCatalog section .box-content .catalogLink a div { max-width: 100%; float: none !important; }
        #HomeCatalog section .box-content .catalogLink a{font-size:12px;}
        #HomeCatalog section .box-content .itemCatalog .collection { position: absolute; bottom: 10px; padding-left: 10px; padding-right: 10px; margin: auto; width: 100%; text-align: center; }
        #HomeCatalog section .box-content .itemCatalog .magnifier{display:none;}
        #HomeCatalog section .box-content .itemCatalog .collection p{font-size:12px;}
    body .marginTop80 { margin-top: 30px; }
    #HomeContacts h3 { font-size: 26px;  margin-bottom: 40px; padding-top: 65px; }
    #HomeContacts section{padding:0 10px;}
}