/*****************************************************************
    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:black; line-height: 50px; font-size: 1.7em; position: fixed; left: 0; right: 0; top: 0; font-family: 'Dosis'; color: #ec6d14;  }
    #HeaderMobile .top { padding:0 15px; }
        #HeaderMobile .top a { color:#FFF; }
        #HeaderMobile .top .logo { color:#FFF; display:inline-block; }
            #HeaderMobile .top .logo img { height:30px; vertical-align:middle; }
    #HeaderMobile ul { font-size:14px; display:none; }
        #HeaderMobile ul a { display:block; padding:10px 25px; background-color: #ec6608; color:#FFF; }

/*****************************************************************
    PC's
*****************************************************************/
@media (max-width: 1366px)
{
    #HomeIndex .informationSection  h1 {padding-top: 20px; padding-bottom: 10px;}
    #HomeIndex .informationSection h2 {padding-bottom: 20px;}
    #HomeIndex .informationSection{background-size: initial!important; background-position: center center!important; }
    #HomeIndex .informationSection .play { padding-top:25px;}
    /**********************************************************************************************************************************/
}

@media (max-width: 1280px)
{
    #HomeIndex .informationSection  h1 {padding-top: 30px; padding-bottom: 5px;}
    #HomeIndex .informationSection h2 {padding-bottom: 6px;}
    #HomeIndex .informationSection .play { padding-top:6px;}
    /**********************************************************************************************************************************/
}

/*****************************************************************
    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 */
    #HomeIndex .informationSection  h1 { padding-bottom: 5px;}
    #HomeIndex .informationSection h2 {padding-bottom: 10px;}
    #HomeIndex .informationSection .play { padding-top:20px;}
}

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

@media (max-width: 900px)
{
    /**********************HOME - SECTIONS******************************************************************/
    #HomeIndex .informationSection h1 {font-size: 55px; max-width: 670px; line-height: 55px; padding-bottom: 12px;}
    #HomeIndex .informationSection h2 {font-size: 20px; max-width: 410px;   padding-bottom: 30px; }
    #HomeIndex .informationSection h3 {font-size: 18px; max-width: 423px; line-height: 22px; padding: 5px 5px;}
    #HomeIndex .informationSection .play { padding-top: 70px;}
    /**********************************************************************************************************************************/
    /********************** WhoWeAre - EquipmentA - EquipmentB ******************************************************************/



    /**********************************************************************************************************************************/
    #Footer .rgth {padding-left: 175px;}
}

/*****************************************************************
   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 */
    /**********************HOME - SECTIONS******************************************************************/
    #HomeIndex .informationSection {height: auto; padding-bottom: 70px;}
    #HomeIndex .informationSection .block:before {display: none;}
    #HomeIndex .informationSection h1 {}
    #HomeIndex .informationSection .play { padding-top: 70px;}
    /**********************************************************************************************************************************/
    /********************** WhoWeAre - EquipmentA - EquipmentB ******************************************************************/
    #ContentPage .bioSection h3 {padding-bottom: 15px;}
    #ContentPage .bioSection h5 {padding-bottom: 15px; }
    #ContactPage .bioSection .img-contact {padding-top: 20px; padding-bottom: 20px;}
    #HomeContacts{padding-top:0;}
    #HomeContent .titleSection h1{ padding-top: 50px;}
    #HomeContent .titleSection{height:300px;}
    #HomeContent .bioSection .imagesHolder{padding-right:0;}
    #Footer .rgth{padding-left:0;}
}

/*****************************************************************
    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;  }
   /* TODO */
       .scroller {display: none;}
    /**********************HOME - SECTIONS******************************************************************/
    #HomeIndex .informationSection {height: auto; padding-bottom: 70px;}
            #HomeIndex .informationSection .block:before {display: none;}
        #HomeIndex .informationSection h1 {font-size: 40px; max-width: 433px; line-height: 38px; padding-bottom: 15px; }
        #HomeIndex .informationSection h2 {font-size: 20px; max-width: 410px;   padding-bottom: 40px; }
        #HomeIndex .informationSection h3 {font-size: 18px; max-width: 423px; line-height: 22px; padding: 10px 5px;}
        #HomeIndex .informationSection .play { padding-top: 50px;}
    /**********************************************************************************************************************************/
    /********************** WhoWeAre - EquipmentA - EquipmentB ******************************************************************/
    #ContentPage .bioSection {text-align: center;}
    #ContentPage .bioSection h3 {padding-bottom: 15px; }
    #ContentPage .bioSection h4 {font-size: 15px; text-align: center; }
    #ContentPage .bioSection .download { display: inline-block; vertical-align: top;  padding-bottom: 15px;}
    #ContentPage .bioSection .imagesHolder { padding-right: 0;}

    #Footer .rgth {padding-left: 37px;}
        #Footer .rgth h5 {font-size: 20px; font-weight: 400;}
    #Footer .ft {font-size: 20px;}
    #Footer .ft ul {padding: 0 4px;}
    #Footer .ft .contacts h5 {display: inline-block; font-size: 20px;}
}

@media (max-width: 350px) {
    /**********************HOME - SECTIONS******************************************************************/
    #HomeIndex .informationSection h1 {font-size: 28px; max-width: 315px; line-height: 31px; padding-bottom: 12px;}
    #HomeIndex .informationSection h2 {font-size: 20px; max-width: 280px;   padding-bottom: 40px; }
    #HomeIndex .informationSection h3 {font-size: 17px; max-width: 315px; line-height: 21px; padding: 10px 5px;}
    #HomeIndex .informationSection .play { padding-top: 45px;}
    /**********************************************************************************************************************************/
    /********************** WhoWeAre - EquipmentA - EquipmentB ******************************************************************/

    #Footer .rgth {padding-left: 37px;}
    #Footer .rgth h5 {font-size: 14px; font-weight: 400;}
    #Footer .ft {font-size: 12px;}
    #Footer .ft ul {padding: 8px 5px;}
    #Footer .ft .contacts h5 { padding-top: 5px; font-size: 14px;}
}

@media (max-width: 320px) {
    /**********************HOME - SECTIONS******************************************************************/
    #HomeIndex .informationSection h1 {font-size: 25px; max-width: 280px; line-height: 24px; padding-bottom: 12px;}
    #HomeIndex .informationSection h2 {font-size: 17px; max-width: 280px;   padding-bottom: 15px; }
    #HomeIndex .informationSection h3 {font-size: 15px; max-width: 280px; line-height: 21px; padding: 5px 5px;}
    #HomeIndex .informationSection .play { padding-top: 50px;}
    /**********************************************************************************************************************************/
    /********************** WhoWeAre - EquipmentA - EquipmentB ******************************************************************/

    #ContentPage .bioSection h4 {font-size: 13px;  }

    /**********************************************************************************************************************************/
    #Footer .rgth {padding-left: 37px;}
    #Footer .rgth h5 {font-size: 12px; font-weight: 400;}
    #Footer .ft {font-size: 10px;}
    #Footer .ft ul {padding: 8px 5px;}
    #Footer .ft .contacts h5 { padding-top: 5px; font-size: 12px;}
}