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

#Header .toggle { color: #eb7f14; margin: 0 20px 0 10px; padding: 25px 0; -moz-transition: transform 0.5s linear; -o-transition: transform 0.5s linear; -webkit-transition: transform 0.5s linear; transition: transform 0.5s linear; }
    #Header .toggle.active { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }

#HeaderMobile { background-color: #f5f5f5; line-height: 50px; font-size: 1.7em; z-index: 100; }
    #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: transparent; color: #333; }


#zCMSContent > #HeaderMobile { position: fixed; left: 0; right: 0; top: 0; }


.row > [class^=clearfix] { min-height: 0; }
.clearfix-xs:before,
.clearfix-xs:after { display: table; content: " "; }
.clearfix-xs:after { clear: both; }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .clearfix-xs:before,
    .clearfix-xs:after { display: none; }
    .clearfix-sm:before,
    .clearfix-sm:after { display: table; content: " "; }
    .clearfix-sm:after { clear: both; }
}

/* Laptop */
@media (min-width: 992px) {
    .clearfix-sm:before,
    .clearfix-sm:after { display: none; }
    .clearfix-md:before,
    .clearfix-md:after { display: table; content: " "; }
    .clearfix-md:after { clear: both; }
}

/* Laptop L */
@media (min-width: 1200px) {
    .clearfix-md:before,
    .clearfix-md:after { display: none; }
    .clearfix-lg:before,
    .clearfix-lg:after { display: table; content: " "; }
    .clearfix-lg:after { clear: both; }
}



@media (max-width: 1280px) {
    /*body:before{position: fixed;display: block;left: 0;top: 0;right: 0;bottom: 0;background: #fff;content: ' '; z-index: 999998;}
    body:after {position: fixed;top: 50px;left: 0;right: 0;content: 'A versão responsiva para esta resolução ainda não está disponível! Aceda ao website num dispositivo com um ecrã maior para visualizar :) '; margin: auto; z-index: 999999; display: inline-block;max-width: 80%;text-align: center;font-size: 24px;text-transform: uppercase;}*/

    #Header .logo { padding-left: 30px; }
    #Header .mediaWrapper { right: 120px; }
    #Header .navigation li a { padding-left: 10px; padding-right: 10px; }

    #HomeIndex .productsSection,
    #Footer .middleSection,
    #Footer .bottomSection { padding-left: 30px; padding-right: 30px; }
        #Footer .middleSection .logoWrapper a { padding-right: 15px; }
        #Footer .bottomSection .mediaWrapper { right: 30px; }
}

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

@media (max-width: 1060px) {
    #Header .navigation li a { padding-left: 5px; padding-right: 5px; }
}

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

    #TabList { }
        #TabList .nav li { width: 50%; }
            #TabList .nav li:not(:first-child):not(:last-child) { display: none; }
            #TabList .nav li:last-child:after { content: none; }
}

@media (max-width: 992px) {
    #Header { width: 100vw; }
        #Header .logo { padding-left: 0; }



    #Footer .logoWrapper,
    #Footer .shortcutsWrapper { margin-bottom: 30px; }
    #Footer .middleSection { padding-left: 0; padding-right: 0; }
        #Footer .middleSection > .row { max-width: 600px; margin: 0 auto; }
        #Footer .middleSection .logoWrapper { text-align: center; }
        #Footer .middleSection .shortcutsWrapper:nth-child(2n) { text-align: right; }
        #Footer .middleSection .shortcutsWrapper:last-child { text-align: center; }

    .attributesWrapper .attributes,
    .attributesWrapper .schema-details { min-height: 450px; }
        .attributesWrapper .schema-details + div { float: none; }
    .attributesWrapper .contactUsWrapper { padding-top: 20px; text-align: center; }
}

/*****************************************************************
   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 { }
    #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; }

    body h1, body h2, body h3, body h4, body h5, body h6 { }
    body h1 { font-size: 40px; }
    body h2 { font-size: 28px; }
    body h3 { font-size: 21px; }
    body h4 { font-size: 16px; }
    body h5 { font-size: 14px; }
    body p { font-size: 12px; }

    #Header .mediaWrapper { display: none; }

    #HomeBanners .content h1 { font-size: 40px; }
    #HomeIndex .generalContentSection h2 { text-align: center; font-size: 40px; }


    #Footer .middleSection .shortcutsWrapper,
    #Footer .middleSection .shortcutsWrapper:nth-child(2n) { text-align: center; height: auto !important; }

    .attributesWrapper .attributes { text-align: center; }
    .attributesWrapper .navigator { display: none; }

    #HomeContacts .page-title + .text-right { text-align: center; }
    #ZCmsContentBox2 { text-align: center; }
}

/*****************************************************************
    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 .leftSection { width: auto; white-space: nowrap; }
    #Header .logo { }
        #Header .logo img { height: auto; width: 100%; }
    #Header .rightSection { width: auto; float: none; position: absolute; right: 0; }
    #Header .dropdown .dropdown-toggle { width: 65px; }

    #HomeIndex .flexslider { padding: 0; }
        #HomeIndex .flexslider .flex-direction-nav .flex-prev { left: -25px; }
        #HomeIndex .flexslider .flex-direction-nav .flex-next { right: -25px; }
}


@media (max-width: 350px) {
    #Header .logo { }
        #Header .logo img { height: auto; width: 180px; }
}