/*****************************************************************
    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; z-index: 900; box-shadow: 0 0 20px 1px rgba(204, 153, 102,.1); width: 100%; }
    #HeaderMobile .top { padding: 0 15px; }
        #HeaderMobile .top a { color: #c96; font-size: 30px; }
        #HeaderMobile .top .logo { display: inline-block; padding: 15px 0; max-width: 200px; margin-left: 15px; }
            #HeaderMobile .top .logo img { max-width: 100%; }
        #HeaderMobile .top .toggle .icon-menu { color: #c96; font-size: 30px; }
    #HeaderMobile ul { font-size: 14px; display: none; width: 100%; }
        #HeaderMobile ul a { display: block; padding: 10px 25px; background-color: #000; color: #FFF; text-transform: uppercase; margin: 0 !important; }
    #HeaderMobile .pull-right { margin-top: 10px; }

/*****************************************************************
    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 .zcmsdoor, body zcmscontent-options { display: none !important; }
    /* TODO */
}

@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 */
}

/*****************************************************************
   Medium Devices 
*****************************************************************/
@media (max-width: 992px) {
    [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; }
    .section.bgloja, .pagetittlebox.bgcontactos, .pagetittlebox.bgnews { background-attachment: unset !important; background-repeat: no-repeat; background-position: center !important; background-size: cover !important; }
}


@media (max-width: 768px) {
    .calltoacton.button2 { margin-top: 70px !important; }
    #Footer .logos-foot { display: inline-block; max-width: 60px; height: 60px; }
}

/*****************************************************************
    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; }
    #LoginModal .modal-dialog { width: auto; margin: 15px; }
    #BasketModal .modal-dialog { width: auto; margin: 15px; }
    #HeaderMobile .top .logo { display: inline-block; padding: 10px 0; max-width: 150px; margin-left: 10px; }
    #HomeBanners { height: 180px !important; }
        #HomeBanners .slides .slide { /*margin-right: 0 !important;*/ background-size: cover !important; height: 180px !important; background-position: center left !important; }
        #HomeBanners .herotext.text3 { margin-top: 0 !important; }
    .tabbox { padding: 0 15px; }
    .smallbanners { font-size: 23px !important; }
    .calltoacton.button2 { margin-top: 95px !important; }
    .calltoacton { position: static; left: 0px; top: 0px; right: 0px; display: inline-block; width: auto !important; height: 35px !important; padding-top: 5px !important; padding-bottom: 5px !important; float: none; clear: none; border: 2px solid #c96; border-radius: 25px; background-color: transparent; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .3); font-family: Roboto, sans-serif; color: #c96; font-size: 14px !important; line-height: 23px !important; text-align: center; text-transform: uppercase; }
    /*.footermenu { padding-left: 0px !important; }*/
    .servicesbox { padding: 25px 0 !important; }
    .sectiongray, .sectionwhite { padding-right: 12px !important; padding-left: 12px !important; }
    .sectionwhite { margin: 0 15px; }
    #HeaderMobile .pull-right .icon { font-size: 22px; }
    #HomeTabs li a { display: block; width: auto; border-bottom: 1px solid #336 !important; background-color: transparent; color: #336; text-align: center; margin: 0 50px; }
    .section.bgloja { height: 250px !important; padding-top: 0px; background-image: url(../images/12313585_627519200684973_7179494282039120816_n.png); background-position: 50% 50%; background-size: cover; background-attachment: unset !important; }
    .banner { height: 200px !important; }
    .textbanner { font-size: 14px !important; text-align: center; margin: auto; }
    .order-filters .textsmall { display: none; }
    .orderby-mobile { display: none; }
    .paginationitem { border-radius: 50%; }
    .paginationbox { display: inline-block; width: 25px !important; height: 25px !important; margin-right: 0 !important; margin-left: 5px; }
    .paginationtext { margin-top: 2px !important; font-family: Montserrat, sans-serif; color: #c96; font-size: 11px !important; }

    #BasketModal { top: 15px; right: 0; padding-right: 0 !important; bottom: 0; left: 0; width: 98% !important; margin: auto !important; }
        #BasketModal .modal-dialog { margin: 0 !important; }
        #BasketModal .modal-content .product { }
            #BasketModal .modal-content .product img { max-width: 100%; }
            #BasketModal .modal-content .product h2 { font-size: 14px !important; line-height: 16px; width: 100%; }
    .categorieitem { margin-right: 10px !important; margin-left: 10px !important; }
    #ThumbsGalery { display: none; }

    #Footer { text-align: center; }
        #Footer .text-center .p15 { padding-bottom: 0; }
        #Footer .text-left, #Footer .text-right { text-align: center; }
        #Footer .p15 { padding: 15px 0; }

    #ProductsIndex .mobile-filters { display: block; }
    #ProductsIndex .filter-desktop { display: none; }
}