/*****************************************************************
    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: 60px; font-size: 1.7em; position: fixed; left: 0; right: 0; top: 0; }
    #HeaderMobile .top { padding: 0 15px; }
        #HeaderMobile .top a { color: #00A4D8; font-size: 32px; }
            #HeaderMobile .top a.logo { width: 147px; margin: auto; display: inline-block; padding: 7px 0; position: absolute; left: 0; right: 0; top: -8px; }
    #HeaderMobile ul { font-size: 14px; display: none; }
        #HeaderMobile ul a { display: block; padding: 8px 25px; background-color: #00A4D8; color: #FFF; text-transform: uppercase; font-family: TextaRegular; font-size: 14px; }
            #HeaderMobile ul a:hover { background-color: white; color: #00A4D8; }
/*****************************************************************
    Tablets
*****************************************************************/


@media (max-width: 1850px) {
    #HomeBanners .image {    background-size: cover !important;}
}

@media (max-width: 1300px) {
    #HomeBanners .image { height: 565px !important; max-height: 565px !important; }
}

@media (max-width: 1150px) {
    #HomeBanners .image { height: 500px !important; max-height: 500px !important; }
        #HomeBanners .image .content { top: 115px; }
            #HomeBanners .image .content h1 { font-size: 60px; line-height: 55px; width: 78%; margin: auto; }
            #HomeBanners .image .content p { font-size: 20px; }
}

@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; }
    #HomeBanners .image { height: 486px !important; max-height: 486px !important; }
    #HomeIndex .wrapper { max-width: 95%; }
    .row { margin: 0; }
}

@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; }
    #HomeBanners .image { height: 390px !important; max-height: 390px !important; background-size: cover !important; }
        #HomeBanners .image .content { top: 70px; }
    #HomeIndex .box-content .box h3 { text-transform: uppercase; color: #00A4D8; font-size: 15px; }
}

/*****************************************************************
   Medium Devices 
*****************************************************************/
@media (max-width: 769px) {
    [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; }
    [data-responsive*="tablet-desktop"] { display: none !important; }
    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; }
    #HomeBanners .image .content { top: 100px; width: 100%; }
        #HomeBanners .image .content h1 { font-size: 39px; line-height: 35px; width: 55%; margin: auto; }
    #HomeBanners .image { background-size: cover !important; }
    #Footer .foot-top .line { display: none; }
    #Footer .col-xs-6 { width: 25%; margin: auto; display: block; }
    #Footer .foot-bottom ul { display: none; }
    #Footer .foot-top { background: #7B90A6; color: white; padding: 30px 0; }
    #HomeIndex .wrapper { max-width: 100%; padding: 0; }

    #HomeIndex .news .col-md-4, #HomeIndex .prod.col-md-3 { width: 32.333333%; }
    #HomeIndex .products .wrapper { max-width: 80%; }
    #HomeIndex .company .col-md-8 { padding: 0; }

    #HomeContent .box-products { padding: 50px 25px; }
    #HomeContent .product-page h2 { font-family: TextaRegular; font-size: 58px; color: white; line-height: 43px; text-transform: uppercase; text-align: center; margin-bottom: 50px; }

    #HomeBanners .image .content .image-box { margin-top: 30px ; }
}




/*****************************************************************
    Smartphones
*****************************************************************/

@media (max-width: 650px) {
    #HomeBanners .image .content h1 { font-size: 39px; line-height: 35px; width: 70%; margin: auto; }
    #HomeBanners .image .content p { font-size: 18px; }

    #Footer .col-xs-6 { width: 50%; margin: auto; display: block; text-align: center; }
    #HomeIndex .video .text-video .description { width: 100%; }
    #HomeIndex .products .wrapper { max-width: 90%; }
    #HomeIndex .news .col-md-4, #HomeIndex .prod.col-md-3 { width: 50%; }
        #HomeIndex .prod.col-md-3 .imgWrapper { text-align: center; }

    #HomeIndex .bannerProducts .box-content h1 { margin-top: 15px; text-transform: uppercase; font-family: TextaMedium; font-size: 36px; }
    #HomeContent .box-products { padding: 50px 25px; }
    #HomeContent .product-page h2 { font-family: TextaRegular; font-size: 38px ; color: white; line-height: 43px; text-transform: uppercase; text-align: center; margin-bottom: 50px; }
}

@media (max-width: 500px) {
    [data-responsive], td[data-responsive], th[data-responsive] { display: none; }
    [data-responsive*="tablet-desktop"] { display: none !important; }
    [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; }
    #HomeBanners .image .content h1 { font-size: 32px; line-height: 35px; width: 70%; margin: auto; }
    #HomeBanners .image .content p { font-size: 16px; }
    #HomeIndex .video .text-video .description { width: 100%; position: absolute; bottom: 40px; left: 0; padding-left: 30px; }
    #HomeIndex .company .col-md-8 { padding: 0; }
    #HomeIndex .prod.col-md-3, #HomeIndex .news .col-md-4 { width: 100%; }
    #HomeContent .product-page .box { position: absolute; top: 35vh; padding: 0; color: #fff; font-size: 1.55em; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 1; }
    #HomeContent .explorations { color: #4F4A48; font-size: 32px; font-family: TextaRegular; padding: 50px 0 10px 0; text-transform: uppercase; text-align: center; }
    #HomeBanners .image .content .image-box img { display: inline-block; vertical-align: bottom; width: 100px; margin: 15px 0; }
    #Footer .foot-top img { max-width: 100px; display: block; vertical-align: bottom; margin-right: 0; max-width: 80px !important; margin: auto; }
    #Footer .foot-top a { max-width: 100px; display: block; vertical-align: bottom; margin-right: 0; max-width: 80px !important; margin: auto; }
    #HomeContent .product-page .box img { display: inline-block; vertical-align: bottom; max-width: 400px; margin: 10px 0px; max-width: 100px !important; ~; }
}

@media (max-width: 440px) {
    #Footer .col-xs-6 { width: 100%; margin: auto; display: block; text-align: center; }
    #HomeIndex .box-content .box h3 { text-transform: uppercase; color: #00A4D8; font-size: 16px; }
        #HomeContent .box-products { padding: 20px 15px; }
    #HomeContent .product-page h2 { font-family: TextaRegular; font-size: 28px ; color: white; line-height: 23px; text-transform: uppercase; text-align: center; margin-bottom: 50px; }
}