﻿/*****************************************************************
    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: white; line-height: 50px; font-size: 1.7em; position: fixed; left: 0; right: 0; top: 0; }
    #HeaderMobile .top { padding:0 15px; }
        #HeaderMobile .top a { color:#B8AF99;padding: 8px 0; display: inline-block; margin-left: 8px; }
        #HeaderMobile .top a img { height:50px; }
    #HeaderMobile ul { font-size:14px; display:none; }
        #HeaderMobile ul a { display:block; padding:10px 25px; background-color: #808080; color:#FFF; }

/*****************************************************************
    Tablets
*****************************************************************/
@media (max-width: 1299px) {
    #Header .navigation li a{margin-right:20px;}
    #Header .shortcuts .item{margin-left:10px;}
}

@media (max-width: 1125px) {
    #Header .logo img{ width: 240px; margin-top: 8px;}
}

@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 .zcmsdoor, body zcmscontent-options { display:none !important; }
}

@media (max-width: 1023px) {
   #Header{height:auto;}
   #HomeBanners .image .content h2{font-size:28px;}
   #HomeBanners .image .content p{font-size:20px;}
   #HomeBanners .image{height:300px!important;}
   #HomeBanners .image .content{top:56px;}
}

@media (max-width: 992px) 
{
   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 .zcmsdoor, body zcmscontent-options { display:none !important; }
   /* TODO */
   #HomeIndex .highlightedCategories .highlightedCategory{margin-bottom:30px;} 
   .articleCompact{margin-bottom:30px;} 
    .articleCompact{text-align:center;}
   #HomeIndex .newsletter .contentPart .formHolder{margin-bottom:30px;}
   #Footer .top{text-align:center;}
   #Footer .top .social{max-width:initial;}
   #Footer .top .scrollTop{bottom:-50px; left: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: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; }
   /* TODO */
   #HomeContentGalery { margin-right:0; }
   .productCompact{text-align:center;}
   /*.productCompact .description .middle .btn{float:none!important;}*/
   .contactUs .inner h4{ font-size: 20px; line-height: 26px;}
   #Footer .bottom{text-align:center;}
   #Footer .bottom img{float:none!important; padding-top:15px;}
   #Footer .bottom .textHolder{padding-left:0;}
   .subHeader{ margin-left: 10px;  margin-right: 10px;}
   .subHeader .inner{ padding: 15px 10px; padding-top: 25px;}
   .subHeader .inner h1{font-size:25px; padding-left:0;}
   #HomeContent .contentHolder .zcmscontent-item{padding-left: 20px; padding-right: 20px; text-align:center;}
   #HomeContacts .addresses .address{margin:0; margin-bottom:15px;}
   #HomeContacts .mapAndContactsHolder .contentPart{padding-top: 30px; padding-bottom: 30px; padding-left: 20px; padding-right: 20px;  text-align: center;}
   #BlogDetail .content h1{font-size:30px;}
   #HomeIndex .newsletter .contentPart{padding-top:50px; padding-left:25px; padding-right:25px;}
   #HeaderMobile .top a{margin-left:0;}
   #CoockiesTerms{width:100%; left:0;}
   #ProductsIndex .filters .brandsBox{display:none;}
}

@media (max-width: 767px) {
   #HomeBanners .image .content h2{font-size:18px; max-width:60%;}
   #HomeBanners .image .content p{font-size:20px; margin-bottom:5px; max-width: 90%; margin: auto;}
   #HomeBanners .image{height:200px!important;}
   #HomeBanners .image .content{top:40px;}
   .contactUs{text-align:center;}
   .contactUs .inner img{padding:0;}
   .contactUs .inner{padding:50px;}
   .contactUs .inner .btn{float:none!important;}
   .contactUs .inner h4{padding:0;}
}

/*****************************************************************
    Smartphones
*****************************************************************/
@media (max-width: 500px) {
    #BasketDetail .box-content .title {max-width:150px; word-wrap:break-word; font-size:12px!important;}
   [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;  }
   /* TODO */
   /*.flexslider .flex-direction-nav a{width:30px; height:30px; border: 6px solid white; font-size: 11px;}
   .flex-direction-nav a:before{font-size:11px;}
   .flex-direction-nav .flex-prev{left:20px;}*/
   .flex-direction-nav .flex-prev{left:15px!important;}
   .flex-direction-nav .flex-next{right:15px!important;}
   #HeaderMobile .top a img{height:25px;}
   #HeaderMobile .top a{padding: 4px 0;}
    #HomeBanners .image .content{top:20px;}
    #HomeBanners .image .content p{font-size:16px;}
    #HomeBanners .image .content h2{padding-top:10px; font-size:16px;}
    #Footer .bottom .textHolder{margin-bottom:15px;}
}

@media (max-width: 330px) {

}