/*****************************************************************
    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: 100; background-color: white; line-height: 50px; font-size: 1.7em; position: fixed; left: 0; right: 0; top: 0; box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.3); font-family: Raleway, sans-serif; }
    #HeaderMobile .top { padding: 0 15px; }
        #HeaderMobile .top a.toggle { padding: 5px 0; }
        #HeaderMobile .top a { color: #333; display: inline-block; vertical-align: middle; }
            #HeaderMobile .top a.logo { display: inline-block; vertical-align: middle; width: 115px; margin-left: 15px; display: inline-flex; align-items: center; }
                #HeaderMobile .top a.logo img { max-width: 100%; }
            #HeaderMobile .top a:hover svg path { fill: #333; stroke: transparent; }

        #HeaderMobile .top .social { display: inline-block; border-right: 1px solid #333; padding-right: 10px; margin-right: 10px; margin-bottom: 0; }
            #HeaderMobile .top .social a { display: inline-block; vertical-align: middle; margin-right: 8px; }
    #HeaderMobile ul { font-size: 14px; display: none; width: 100%; }
        #HeaderMobile ul a { display: block; padding: 10px 15px; color: #333; text-transform: uppercase; }
            #HeaderMobile ul a:hover { background-color: #c69c6d; color: #333; }
    #HeaderMobile a:hover svg path { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; fill: #c69c6d; stroke: #c69c6d; }
    #HeaderMobile .basket-icon { position: relative; margin-right: 15px; }
        #HeaderMobile .basket-icon .count-basket { background-color: #333; width: 15px; height: 15px; line-height: 15px; color: white; border-radius: 15px; position: absolute; top: 10px; right: -8px; font-size: 12px; text-align: center; font-weight: 700; }
    #HeaderMobile ul li.dropdown.open { }
        #HeaderMobile ul li.dropdown.open .dropdown-menu { display: block; }
        #HeaderMobile ul li.dropdown.open .dropdown-menu { display: block; padding: 0; margin-top: -2px; border: 0; }

/*****************************************************************
    Desktop
*****************************************************************/
@media (max-width: 1320px) {
    #Footer .top ul li { height: auto; min-height: unset; }
        #Footer .top ul li a { line-height: 13px; }
    .checkmark { position: absolute; top: 10px; left: 0; height: 15px; width: 15px; background-color: #eee; }
    #Footer .top { padding: 15px 50px; }
    body .container { padding: 0 15px; max-width: 1200px !important; width: 100% !important; }
    #ProductDetail .relatedProducts { margin: 0 auto; }

    .products .col4 .product { min-height: 450px; }
    .products .col3 .product { min-height: 370px !important; }
}


/*****************************************************************
    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; }
    #HomeContacts .info .col-md-4 { width: 33.2222222%; float: left; }
    #BasketModal .modal-content .basket-product .col-md-4 { width: 30%; display: inline-block; float: left; }
    #BasketModal .modal-content .basket-product .col-md-8 { width: 70%; display: inline-block; float: left; }
    #BasketModal .modal-content .basket-product .col-md-4 img { height: 80px; }
    #BasketModal .modal-content .infos .col-md-6 { width: 50%; display: inline-block; float: left; }


    .products .col4 .product { min-height: 400px; }
    .products .col3 .product { min-height: 350px; }
}

@media (max-width: 992px) {
    #Header .navigation li { display: inline-block; vertical-align: middle; margin-right: 30px; }
    #Header .navigation { margin: 0; padding: 0; display: block; vertical-align: middle; padding: 15px 30px; }
    #Header .top { margin: 20px 30px; position: relative; }
    #Header .logo { position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; text-align: center; max-width: 150px; line-height: 57px; }
    #Header .social { display: inline-block; vertical-align: middle; margin: 0; text-align: right; padding-right: 15px; margin-top: 20px; }
    #Header .icons-menu a { margin-left: 15px; }
    #ProductsIndex h2 { font-size: 30px; font-weight: 700 !important; text-transform: uppercase; text-align: center !important; margin-bottom: 20px; }
    body h3 { font-size: 18px; text-transform: uppercase; }
    body h4 { font-size: 15px; text-transform: uppercase; }
    #Footer .top { padding: 35px 25px; padding-top: 30px; }
    #Footer .copyright { padding: 25px 25px; }
    #Footer .top .col-md-7 .col-md-4 { width: 33.333333%; float: left; display: inline-block; }
    #Footer .top h4 { margin-bottom: 15px; margin-top: 10px; text-transform: unset; }
    #Header .top { padding: 25px 0px 10px 0px; position: relative; }
}

/*****************************************************************
   Medium Devices 
*****************************************************************/
@media (max-width: 769px) {
    [data-responsive*="tablet-desktop"] { display: none !important; }
    [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: 60px; }
    #HeaderMobile form { position: relative; display: inline-block; vertical-align: bottom; }
        #HeaderMobile form input { border: 0; border-bottom: 1px solid #333333; }
        #HeaderMobile form button { position: absolute; right: 0; top: 0; bottom: 0; margin: auto; color: #333333; padding: 0; font-size: 16px; }

    #BasketModal { top: 0; right: 0; bottom: 0; left: 0; width: auto; }
    #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: none; 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; }
    .products-menu .btn-close { position: absolute; right: 0; top: 48%; cursor: pointer; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; z-index: 3; text-align: center; }
        .products-menu .btn-close::after { display: block; content: ""; width: 35px; height: 62px; background: transparent url('/Content/app/images/ball.png') no-repeat; position: absolute; right: 0; top: 0; }
        .products-menu .btn-close svg { width: 18px; z-index: 3; position: relative; margin-top: 18px; margin-right: 5px; }
            .products-menu .btn-close svg path { fill: white; }
        .products-menu .btn-close:hover svg path { fill: white; }
    .products-menu .btn-open { position: absolute; left: -20px; top: 48%; width: 60px; height: 60px; border-radius: 60px; line-height: 70px; text-align: center; }
        .products-menu .btn-open .menuText { display: block; }
        .products-menu .btn-open svg { display: none; }
        .products-menu .btn-open:after { display: block; content: ""; width: 25px; height: 25px; background: transparent url('/Content/app/images/next3.png') no-repeat; margin-left: 20px; margin-top: 18px; }
    .products-menu.p-close .btn-close { position: absolute; right: 0; top: 48%; cursor: pointer; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; z-index: 3; text-align: center; }
    .products-menu.p-close .btn-open { position: absolute; left: -24px; top: 48%; width: 74px; height: 60px; border-radius: 60px; line-height: 60px; text-align: center; color: white; padding-left: 20px; }
    #ProductDetail .details-prod .col-md-8, #ProductDetail .details-prod .col-md-4 { width: 100%; }
        #ProductDetail .details-prod .col-md-8 .productImages { text-align: center; }
    #HomeBanners .image { height: 80vh !important; }
    #HomeIndex .title { font-size: 30px; font-weight: 700; text-align: center; margin-top: 40px; margin-bottom: 40px; }
    #BlogIndex .categories { padding-top: 20px; padding-bottom: 20px; text-align: center; }
    #ProductDetail .details-prod .col-md-8 .col-md-4 { width: 40%; display: inline-block; float: left; }
    #ProductDetail .details-prod .col-md-8 .col-md-8 { width: 60%; display: inline-block; float: left; }
    #BlogIndex .categories .category { padding: 5px; display: inline-block; }
        #BlogIndex .categories .category a { padding: 8px 7px; display: block; font-size: 14px; text-transform: uppercase; text-align: center; font-weight: 700; }
    #HomeContacts .info .infoIcon { text-align: center; padding-top: 14px; padding-bottom: 46px; font-size: 16px; font-weight: 400; }
    #HomeContacts .info .markerIcon .svgContainer { height: 52px; width: 30px; margin: auto; }
    #HomeContacts .info .mailIcon .svgContainer { height: 54px; width: 40px; margin: auto; }
    #HomeContacts .info .clockIcon .svgContainer { height: 51px; width: 44px; margin: auto; }
    #HomeContacts h1 { font-size: 27px; font-weight: 900; }
    #HomeContacts .form { padding-top: 50px; padding-bottom: 50px; max-width: 725px; margin: auto; }
    .thumb-items .slick-next { transform: rotate(90deg); top: unset; bottom: -18px; left: 0; right: 0; margin: auto; }
    #ProductDetail { padding: 0 15px; }

        /* TODO */
        #ProductDetail .gallery-items { text-align: center; min-height: auto; }
        #ProductDetail .productImages { padding-bottom: 25px; }
    #Gallery .slick-next { top: 50%; margin-top: -15px; right: 5px; }
    #Gallery .slick-prev { top: 50%; margin-top: -15px; left: 5px; }
    #ProductDetail .thumb-items figure { height: auto !important; }
    #_thumbs { display: none !important; }
    #_gallery { width: 100% !important; }

            .subHeader h1{line-height:140px; font-size:30px !important;}
        .subHeader{    background-size: 250% !important; height:140px !important;}


    #ErrorPage .info__text { height:400px !important;}
}



/*****************************************************************
    Smartphones
*****************************************************************/
@media (max-width: 567px) {
    [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; }
    .boxing { float: right; }
    #ProductsIndexForm .text-right { text-align: left; }
    #ProductsIndex .crumb { margin-bottom: 0; }
    #ProductsIndex .listing { margin-top: 0; }
    #LoginModal .modal-dialog { width: 80%; margin-left: 15px; }
    #BasketModal .modal-dialog { width: 80%; margin-left: 15px; }
    /* TODO */
    #ProductDetail .relatedProducts { margin: 0; }
    #CoockiesTerms { width: 100%; max-width: 100%; left: 0; bottom: 0; }
    #HeaderMobile .top a.logo { display: inline-block; vertical-align: middle; width: 100px; margin-left: 10px; }
    #HeaderMobile .top .social { display: none; }
    #LoginModal a { font-size: 13px; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; display: block; }
    #LoginModal .modal-dialog label.pull-left { float: none !important; margin-bottom: 10px; }
    #LoginModal .modal-footer { text-align: left; }
        #LoginModal .modal-footer a.pull-left { float: none !important; margin-bottom: 10px; }
    #HomeBanners .image { height: 60vh !important; }
    #HomeIndex .section-boxs .box .content h2 { font-weight: 700; font-size: 25px; color: white; padding: 0 15px; }
    .section-boxs .box { height: 238px !important; }
    #HomeIndex .title { font-size: 20px; font-weight: 700; text-align: center; margin-top: 40px; margin-bottom: 40px; padding: 0 35px; }
    #Footer { text-align: center; }
        #Footer .pull-right.developed { float: none !important; margin-top: 15px; }
        #Footer .copyright .developed a { display: block; }
    .article .content h2 { font-size: 28px; font-weight: 900; line-height: 30px; text-transform: uppercase; }
    .article .articleLink { padding-top: 13vh; }
    #HomeContacts .info .col-md-4 { width: 100%; float: left; }
    #Map { height: 250px !important; }
    .pagination a { height: 25px; width: 25px; }
    .pagination > li > a, .pagination > li > span { padding: 0; }
    .pagination > li:first-child > a, .pagination > li:first-child > span { padding: 0; }
    .pagination > li:last-child > a, .pagination > li:last-child > span { padding: 0; }

    .products-menu.mobile { display: block; margin-bottom: 0; }
        .products-menu.mobile .categories { width: 100%; padding-top: 15px; }
            .products-menu.mobile .categories button { width: 100%; }
            .products-menu.mobile .categories .dropdown-menu { width: 100%; }
    .products-menu.tablet { display: none; }
    .products .col3 .product { min-height: 320px !important; }
    .products .col4 .product { min-height: 320px; }
    body .product .details .title { font-size: 11px; }
    body .product .imgWrapper { display: block; min-height: 216px; }
    body .product .discount .off { font-size: 12px; line-height: 16px; width: 35px; }
    body .product .discount { text-align: center; position: relative; z-index: 2; position: absolute; top: 0; right: 0; z-index: 2; width: 35px; }
        body .product .discount .off::after { content: ""; width: 0; height: 0; border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 10px solid black; position: absolute; bottom: -10px; right: 0; }
        .subHeader h1{line-height:115px !important; font-size:24px !important;}
        .subHeader{    background-size: 285% !important; height:115px !important;}
        /*#ProductDetail .thumb-items{display:none;}*/
        
}

@media (max-width: 375px) {
    #HeaderMobile .top a svg { width: 23px; height: 23px; }
    #HeaderMobile .top a.logo { width: 90px; }
    #HeaderMobile form { position: relative; display: inline-block; vertical-align: bottom; max-width: 100px; }
    .pagination { padding: 15px 0; margin: 0; border-radius: 0; color: #c69c6d; }
    /* OLD */
    /*
    #ProductDetail .gallery-items { text-align: center; min-height: auto; }
    #ProductDetail .productImages { padding-bottom: 25px; }
    #Gallery .slick-next { top: 50%; margin-top: -15px; right: 5px; }
    #Gallery .slick-prev { top: 50%; margin-top: -15px; left: 5px; }
    #ProductDetail .thumb-items figure { height: auto !important; }
    #_thumbs { display: none !important; }
    */
    #LoginModal .login-recover-link { float: none !important; display: block; margin-bottom: 10px; }
}


@media (max-width: 320px) {
    .boxing { display: none; }
    #ProductsIndex .listing .products .col-xs-6 { width: 100%; }
    #HeaderMobile .top a.logo { width: 70px; height: 55px; }

    
}