/*****************************************************************
    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: 80px; font-size: 30px; position: fixed; left: 0; right: 0; top: 0; }
    #HeaderMobile .top { padding: 0 15px; }
        #HeaderMobile .top a { color: #000; }
    #HeaderMobile ul { font-size: 16px; display: none; }
        #HeaderMobile ul a { display: block; padding: 10px 25px; background-color: #374C83; color: #FFF; }
    #HeaderMobile .language { font-size: 16px; position: absolute; right: 15px; top: -7px; }
        #HeaderMobile .language a { display: block; height: 20px; }
    #HeaderMobile .logo img { max-width: 45% !important; }
    #HeaderMobile .icons { padding-right: 25px; }


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

@media (max-width: 1500px) {
    #Footer .foot-top .row { }
        #Footer .foot-top .row .col-md-4 { padding: 0; padding-left: 10px; padding-right: 10px; }
    #Footer .foot-top h3 { font-size: 14px; }
    #Header .logo { display: inline-block; padding: 39px 0; }
        #Header .logo img { max-width: 100%; }
    #Header .catalog { font-size: 16px; }
        #Header .catalog .icon { margin-right: 15px; margin-left: 15px; }
    #Header .nav-menu .navigation li { padding: 0 5px; }
        #Header .nav-menu .navigation li a { margin-right: 5px; font-size: 14px; }
    #Header .section { }
        #Header .section a { font-size: 14px; }
    #Header .language .dropdown a { margin-left: 15px; }
    #HomeIndex .specialistExport ul li { width: 135px; height: 130px; }
    #Header .submenu .main-categories {  }
        #Header .submenu .main-categories a.category { font-size: 22px; }
}

@media (max-width: 1300px) {
    .mainCategories p { font-size: 22px; }
        .mainCategories .form-Search { margin-top: 5px;}
    .btn.btn-success { border-radius: 0; border: 0; box-shadow: none; background-color: #BD2429; color: white; font-size: 16px; font-weight: 600; font-family: 'Source Sans Pro', sans-serif; padding: 12px 10px; text-transform: uppercase; }
}

@media (max-width: 1200px) {
    #Header .logo img { max-width: 100%; }
    #Header .nav-menu .navigation li a { margin-right: 0; font-size: 13px; }
    #Header .section { padding: 46px 5px; }
    #Header .catalog { font-size: 14px; }
        #Header .catalog .icon { margin-right: 10px; margin-left: 10px; }
    #Header .logo { padding: 42px 0; }
    #Header .submenu .firstSubcat-menu ul li { width: 95px; margin-bottom: 10px; }
    #HomeIndex .specialistExport { padding: 40px 0; }
        #HomeIndex .specialistExport ul li { width: 100px; height: 100px; }
        #HomeIndex .specialistExport a img { display: block; width: 30px; margin: auto; padding-bottom: 5px; }
        #HomeIndex .specialistExport a { font-size: 14px; }
    #HomeIndex .cSize { height: 562px; }
        #HomeIndex .cSize.col-md-7 .row .col-md-6, #HomeIndex .cSize.col-md-6 .row .col-md-12 { max-height: 280px; }
    #HomeIndex .image { height: 480px !important; max-height: 480px !important; }
    #BannerHome .image .content { top: 115px; }

    #ProductDetail .details-prod .details .options .actions.pull-right { float: none !important; }
}


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

@media (max-width: 1024px) {
    body .wrapper { padding: 0 15px; }
    body .wrapperLeftSupressor { margin-left: -15px; }
    #Header .logo { padding: 44px 0; }
    #Header .submenu .icon-cancel { right: 15px; }
    #BannerHome .image .content h2 { font-size: 45px; }
    #BannerHome .image { background-size: cover !important; }
    .med-wrapper { max-width: 100%; }
}


@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; }
    #Header .logo {padding: 42px 0; }
        #Header .logo img { padding-right: 10px; }
    #Header .section a { font-size: 13px; }
    #Header .catalog { font-size: 13px; }
        #Header .catalog .icon { margin-left: 15px; }
        #Header .catalog span { display: none; }
    #HomeContacts .address { padding: 65px 20px; }
    #Header .nav-menu .navigation li a, #Header .section a { font-size: 12px; }
    #ProductsIndex .prod .filters .categories .show-sub-categories .categoriesHolder > .sub-cat { font-size: 15px; }
    .mainCategories p { font-size: 20px; }
    #ProductDetail .details-prod .details .options .actions.pull-right { float: none !important; }
    #HomeIndex .specialistExport ul li { width: 45%; height: 100px; }
    .none { display: none; }
    #Footer .col-sm-5 { width: 100%; }
    #Footer .col-sm-3 { width: 100%; }
    #Footer .foot-top .line-l { border-left: 0 solid #444444; }
    #Footer .foot-top .text span { display: inline-block; margin-top: 20px; padding-right: 30px; padding-left: 30px; }
    #HomeIndex .image { height: 380px !important; max-height: 380px !important; }
    #BannerHome .image .content { right: 120px; width: 50%; top: 100px; }
    #BannerHome .image .back-effect { right: 120px; width: 50%; }
}

/*****************************************************************
   Medium Devices 
*****************************************************************/
@media (max-width: 800px) {
    [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; }
    #Header { display: none; }
    #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; }
    #Footer .foot-top .row .col-md-4 { width: 33.333333%; }
    #HomeContacts .address .col-md-6 { width: 100%; text-align: center; }
    #Footer .foot-top .text span { padding-right: 15px; padding-left: 15px; }
    #ProductsIndex .prod .filters .categories { padding-left: 0; }
    #ProductsIndex .prod .filters .catsHeader { padding-left: 15px; }
    #ProductsIndex .prod .filters { width: 35%; }
    #ProductsIndex .prod .listing { width: 55%; }
    #PortIndex .image-banner .categories ul li { margin: 0 5px; }
    #PortIndex .image-banner h1, #NewsIndex .image-banner h1, #HomeContacts .image-banner h1, #NewsDetail .image-banner h1 { font-size: 55px; }
    #ProductsIndex { padding: 30px 0 !important; }
        #ProductsIndex .cat { display: block; width: 100%; margin: 20px 0; text-align: center; text-transform: uppercase; font-size: 20px; font-family: 'Source Sans Pro', sans-serif; background-color: #374C83; }
        #ProductsIndex .navbar-nav {margin: 0; }
            #ProductsIndex .navbar-nav .cat {margin: 0; }
            #ProductsIndex .cat a { background-color: #4d65a5; color: white; }
            #ProductsIndex .cat:hover a { background-color: #4d65a5; color: white; }
        #ProductsIndex .dropdown-menu { box-shadow: none; border: 0; border-radius: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; }
    #ProductDetail { margin-top: 30px; }

    #BannerHome .image .content { width: 60%; top: 50px; right: 85px; }
    #BannerHome .image .back-effect { width: 60%; right: 85px; }
    #HomeIndex .image { height: 300px !important; max-height: 300px !important; }
    #CoockiesTerms { display: none; }
    #Promotions .flexslider .slides > li { width: 295px !important; }
    #HomeIndex .specialistExport .link-exp h3 { font-size: 22px; }
    #HomeIndex .promotionProducts { margin: 0 40px; }
    #NewsIndex .image-banner { background-size: cover !important; }
    #ProductsIndex .navbar-nav { float: none !important; }

    .searchf { position: relative; margin: 0 15px; }
        .searchf .btn-success { position: absolute; top: 4px; right: 0; height: 35px; line-height: 34px; padding: 0 10px; font-size: 14px; }
        .searchf .form-group { margin-bottom: 14px; line-height: 34px; }
        .searchf input[type="text"], .searchf input[type="password"] { height: 34px; line-height: 34px; padding: 0 10px; width: 100%; position: relative; font-size: 14px; }
}

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

@media (max-width: 768px) {
    .mainCategories p span{text-align:center; border:0;  width: 100%; padding:0;}
}

@media (max-width: 600px) {

    [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; }
    #HeaderMobile .logo img { max-width: 40% !important; }
    #LoginModal .modal-dialog { max-width: 100%; margin: auto; padding: 15px; width: unset; }
    #BasketModal .modal-dialog { max-width: 100%; margin: auto; padding: 15px; width: unset; }
    #Footer .col-sm-5 { text-align: center; }
    #Footer .col-sm-2 { width: 100%; padding: 15px 0; }
    #Footer .foot-top .text { display: none; }
    #Footer .foot-btn ul { float: none; padding-left: 0; }
    #BannerHome .image .content h2 { font-size: 25px; }
    #BannerHome .btn.btn-success { padding: 7px 50px; }
    #BannerHome .image .content h2 p { font-size: 15px; }
    #BannerHome .image .content p { font-size: 15px; margin-bottom: 15px; }
    #HomeIndex .image { height: 200px !important; max-height: 200px !important; }
    #HomeIndex .specialistExport .col-md-2 { display: none; }
    #HomeIndex .specialistExport .col-md-6 { width: 100%; margin-bottom: 15px; }
    #HomeIndex .specialistExport .col-md-4 { width: 100%; }
    #HomeIndex .cSize.col-md-5 { width: 100%; padding: 0; margin-bottom: 35px; }
    #HomeIndex .cSize.col-md-7 { width: 100%; padding: 0; }
    #NewsletterForm { left: 0; width: 100%; }
        #NewsletterForm .title { font-size: 20px; }
    #HomeIndex .newsletter-section .back-effect { width: 100%; left: 0; }
    #PortIndex .image-banner .categories ul { margin-top: 15px; }
    #PortIndex .element-item { width: 50%; }
    #Promotions .flex-direction-nav .flex-next { display: none; }
    #Promotions .flex-direction-nav .flex-prev { display: none; }
    .flex-direction-nav { display: none; }
    #BasketModal .modal-content .product .col-md-4{display:inline-block; vertical-align:middle; float:left;}
    #BasketModal .modal-content .product .col-md-4 img{    max-height: 60px;}
       #BasketModal .modal-content .product .col-md-8{display:inline-block; vertical-align:middle; float:left;}
    #BasketModal .modal-content .infos .col-md-6{width:50%; float:left; display:inline-block;}

    #HomeIndex .specialistExport a { font-size: 14px; display: block; position: relative; }
}


@media (max-width: 400px) {
    #PortIndex .element-item { width: 100%; }
    #HeaderMobile { font-size: 22px; }
    #BannerHome .flex-direction-nav .flex-next, #BannerHome .flex-direction-nav .flex-prev { display: none; }
    #BannerHome .image .content { width: 80%; top: 50px; right: 30px; }
    #BannerHome .image .back-effect { width: 80%; right: 30px; }
    #PortIndex .image-banner h1, #NewsIndex .image-banner h1, #HomeContacts .image-banner h1, #NewsDetail .image-banner h1 { font-size: 35px; }
    #HomeIndex .promotionProducts, #HomeIndex .feedback, #HomeIndex .featuredCategories { margin: 0; }
    #HomeIndex .cSize span .text { font-size: 30px; }
    #HomeIndex .cSize { height: 350px !important; }
        #HomeIndex .cSize.col-md-7 .row .col-md-6, #HomeIndex .cSize.col-md-6 .row .col-md-12 { max-height: 200px; }
        #HomeIndex .cSize.col-md-7 .row .col-md-6 { width: 100%; }
    .none-mob { display: none; }
    #Footer .foot-top .row { padding-right: 0; }
        #Footer .foot-top .row .col-md-4 { width: 100%; }
    #Footer .col-sm-5 { padding: 0; }
    #Footer .foot-btn .icon-cards { background: url('/Content/app/images/sprites.png') -3px -43px; width: 206px; height: 24px; }
    #PortIndex .image-banner .categories ul li button { font-size: 14px; padding: 5px 10px; }
    #HomeContacts .image-banner .contacts .phone { padding: 5px 0; }
        #HomeContacts .image-banner .contacts .phone .addressContact { padding-right: 0; display: block; }
    #NewsDetail .image-banner, #NewsIndex .image-banner, #PortIndex .image-banner { background-size: cover !important; height: 250px !important; }
    #HomeContent .header-top h1 { font-size: 20px; text-align: center; text-transform: uppercase; }
    #HomeContent .header-top { background: #374C83; padding: 45px 25px 20px 15px; margin-bottom: 0; }
}

@media (max-width: 240px) {
    #HeaderMobile, #HeaderMobile .language a { font-size: 15px; }
    #HomeIndex .specialistExport .col-md-4 { padding: 0; }
}