/*****************************************************************
    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; }
    #HeaderMobile .top { padding:0 15px; }
        #HeaderMobile .top a { color: #95c11e; font-size: 24px; font-family: 'SohoStd-Medium'; text-transform: uppercase; }
    #HeaderMobile ul { font-size:14px; display:none; }
        #HeaderMobile ul a { display: block; padding: 10px 25px; background-color: #634e43; color: #FFF; font-size: 14px; font-family: 'SohoStd-Medium'; text-transform: uppercase; }
        #HeaderMobile ul a:hover{color: #95c11e; }
/*****************************************************************
    Tablets
*****************************************************************/

@media (max-width: 1200px) {
    #Header .sub-menu { background-color: #634e43; padding: 35px 30px; }
}

@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; }


   #Footer .col-sm-4{width: 33%;}
    #HomeApps .section.bottom .row .col-md-7 {height: 652px !important;}
    #HomeApps .section.middle .row .col-md-7 {height: 388px !important;}
    #HomeApps .section.middle .row .colored-div {height: 388px !important; padding-bottom: 0 !important;}
    #HomeIndex .screen .news span {width: 200px !important; font-size: 12px !important;}
    #HomeApps .satelit {top: 126px !important;}
}

@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 .wrapper-med{max-width:100%;}
   #Header .sub-menu .col-md-2{    width: 30%;     float: left;
    display: inline-block;}
   #Header .sub-menu .col-md-10{width:70%;   
    display: inline-block;}
    #HomeApps .satelit {top: 146px !important;z-index: 0;}
    .paths .breadcrumb {position: relative; z-index: 1;}
   #Footer .networks a img {margin-top: 5px !important;}
   #HomeContacts .radio-inline {display:block; width:75px; margin-left: 0;}
   #HomeApps .section.bgOrange .row .col-md-5 {height: 375px !important;}
   #HomeApps .section.bgOrange .row .col-md-7 {height: 375px !important;}
    #HomeApps .section.bgOrange h2 {font-size: 25px !important;}
    #HomeApps .section.bgOrange img {max-width: 80% !important;}
    #HomeApps .section.middle .row .col-md-7 {height: 250px !important;}
    #HomeApps .section.middle .row .colored-div {height: 250px !important;}
    #HomeApps .section.bottom .row .col-md-7 {height: 545px !important;}
    #HomeApps .section.bottom .row .col-md-5 {height: 545px !important;background-size: cover !important;}
    #HomeApps .section.bottom .row .back-effect {height: 230px !important;}
    #HomeApps .buttons .content img {padding-right: 15px !important;}
    #HomeApps .buttons .content a span {font-size: 20px !important;}
    #HomeApps .buttons .row {margin-bottom: 60px !important;}
    #HomeContent .section {padding-left: 10px !important;}
    #HomeContent .section h2 {font-size:30px !important;}
    #ServicesIndex .categories a span {top: -150px !important; font-size: 30px !important;}
    #ServicesIndex .categories a span span {top: 90px !important;}
  #NewsIndex {padding-bottom: 280px !important;}
  #HomeIndex .products {background-size: cover !important;}
  #HomeIndex .apps {background-size: cover !important; }
  #HomeIndex .show-off {background-size: cover !important; }
  #HomeIndex .news {background-size: cover!important; }
  #HomeIndex .screen .section-one .col-md-6 {padding-left: 15px !important; height: 275px;}
  #HomeIndex .screen .section-two .col-md-4 {padding-left: 15px !important;}
  #HomeIndex .screen .section-three .col-md-3 {padding-left: 15px !important; height:250px;}
  #HomeIndex .screen .section-three .col-md-6 {padding-left: 15px !important; width: 50% !important; height:250px;}
  #HomeIndex .screen .section-three .col-md-6 img{max-height:100%; max-width:unset !important;}
  #HomeIndex .screen .news{height:250px;}
  #HomeIndex .screen {padding-bottom: 240px}
  #HomeIndex .screen .apps span {line-height:26px !important; font-size: 24px !important; height: 90px;}
  #HomeIndex .screen .apps.bio span {line-height:26px !important; font-size: 24px !important; height: 50px;}
    #HomeIndex .screen .products { height: 275px; }
        #HomeIndex .screen .products span img { display: block; height: 40px; }
        #HomeIndex .screen .products span { width: 265px; font-family: 'SohoStd-Medium'; font-size: 24px; text-transform: uppercase; position: absolute; left: 0; right: 0; margin: auto; display: block; text-align: center; top: 0; bottom: 0; height: 79px; line-height: 26px; }
        #HomeIndex .screen .section-two .col-md-4 img{max-height:100%; max-width:unset !important;}
    #HomeIndex .screen .section-two .col-md-4 .apps .logo-icon { height: 80px; }
    #HomeIndex .screen .section-two .col-md-4 .apps.tec .logo-icon { height: 30px; }
    #HomeIndex .screen .section-two .col-md-4 .apps.bio .logo-icon { height: 50px; }
}

@media (max-width: 991px) {
    #HomeIndex .screen .section-one .col-md-6 { height: 250px !important; }
    #HomeIndex .screen .products span{height: 120px !important;}
    #HomeIndex .screen .section-three .col-md-3{width:25%; }
    #HomeIndex .buttons .content a span{font-size: 22px;}
    #Header .logo { display: inline-block; width: 180px; }
    #Header .menu { display: inline-block; margin-left: 35px; margin-top: 10px; }
    #ServicesIndex .categories a img { max-height: 100%; max-width: unset !important; }
    #ServicesIndex .categories a span { top: 0px !important; font-size: 24px !important; }
    #ServicesIndex .categories a .icon-logo{max-width:70% !important;}
}
/*****************************************************************
   Medium Devices 
*****************************************************************/
@media (max-width: 768px) {
    #zCMSContent{padding-top:0;}
   [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; }

   #Footer .col-sm-4 { width: 100%; text-align:center; margin-bottom: 5px;}

    #NewsletterForm {margin-bottom: 10px;}
    .sectionRight {margin-bottom:275px !important; margin-top: 35px !important;}
    .sectionRight a {width:100%; display: inline-block;}
    .sectionRight a img{width:100%;}
    .sectionRight .tecni-apps .icon-logo{max-width:100% !important;}
    .sectionRight a .play {width: 15%;}
    #HomeApps .section h1 {font-size: 40px !important;}
    #HomeApps .section h3 {font-size: 25px !important;}
    #HomeApps .section.bottom .row .back-effect {height: 180px !important;}
    #HomeApps .section.bottom .row .col-md-7 {height: 455px !important;}
    #HomeApps .buttons {padding-bottom: 595px !important;}
    #HomeApps .buttons .col-md-6.addons {padding-bottom: 15px !important; padding-right: 0 !important;}
    #HomeApps .section.middle .row .col-md-7 {height: 320px !important;}
    .paths {padding: 0 !important;}
      .paths .breadcrumb {margin-bottom: 0 !important; text-align:left !important;}

    .paths .breadcrumb > li + li:before {padding:0 !important;}
    #NewsIndex .sec-content .col-md-7 {padding-left: 15px !important; width:50% !important; float:left !important;}
    #NewsIndex .sec-content .col-md-5 {padding-left: 15px !important; width:50% !important; float:left !important;}
    #HomeApps .section.bottom .row .col-md-5 {background-size: cover !important;}
    #HomeApps .satelit {top: 221px !important;}
    #Footer .col-xs-12 a img {margin-bottom: 15px !important;}
   #Footer .col-xs-12 .company {width: 32% !important; display: inline-block !important; text-align: left !important;}
   #Footer .col-xs-12 .products {width: 32% !important; display: inline-block !important; text-align: left !important;}
   #Footer .col-xs-12 .clients {width: 32% !important; display: inline-block !important; text-align: left !important;}
   #HomeContacts .col-md-9 .box-content img {max-width: 100% !important;}
#HomeRecruits .col-md-9 .formContainer {padding-left: 45px !important;}
#HomeRecruits .box-content {padding: 15px !important;}
.sectionRight .uptop img {display: none !important;}
.sectionRight .uptop .content .ZFormGroupTitle {width: 290px !important; padding-bottom: 45px !important;}
#HomeContent .section.map {height: auto !important; padding-top: 25px !important; margin-bottom: 45px !important;}
#HomeContent .sectionRight {padding-left: 20px !important; margin-bottom: 470px !important;}
#HomeContent .sectionRight .uptop .content .ZFormGroupTitle {font-size: 20px !important;}
#ServicesDetail .banner {background-size: cover !important; height: 168px !important;}
#ServicesDetail .sectionRight {padding-left: 15px !important;}
#HomeIndex .screen .section-one .col-md-6{width:50%; height: 160px !important;}
        #HomeIndex .screen .products { height: 160px; }
        #HomeIndex .screen .apps, #HomeIndex .screen .section-two .col-md-4 { height: 200px; }
#HomeIndex .screen .section-two .col-md-4{width:33.22222%; padding:0;}
#HomeIndex .screen .section-three .col-md-6{width:100% !important;}
#HomeIndex .screen .section-three .col-md-3{width:50% !important;}
        #Footer .col-xs-12 {width: 50%; text-align:center;}
        #HomeIndex .buttons .col-md-6 { padding-right: 15px; width: 50%; }
        #HomeIndex .buttons .content a span { font-size: 12px; }
        #HomeIndex .buttons { padding-bottom: 65px; }
        #HomeIndex .screen{  height: 1500px !important;}
        #HomeIndex .buttons .content a{padding: 23px 14px;}
        .paths .breadcrumb li{display:inline-block; margin:20px 10px;}
        .paths.company .breadcrumb a{font-size:14px;}
}

@media (max-width: 600px) {
    .row .col-md-3.rightSection{padding-left:15px;}
    .sectionRight .uptop .content .ZFormGroupTitle{width:100% !important;}
    .sectionRight .tecni-apps .icon-logo { max-width: 50% !important; }
    #HomeIndex .screen .section-one .col-md-6, #HomeIndex .screen .products{width:100%; height:200px !important;}
    #HomeIndex .screen .show-off .subject { bottom: 136px !important; font-size: 25px !important; }
    #HomeIndex .screen .show-off span { position: absolute; left: 0; right: 0; margin: auto; display: block; width: 100%; text-align: center; top: -57px !important; bottom: 0; height: 100px; }
            #HomeIndex .screen{       height: 1850px !important;}
    #HomeIndex .buttons .col-md-6{width:100%; margin-bottom:15px; text-align:center;}
    #Footer .col-xs-12{width:100%;}
    #Footer .img a { display: inline-block; padding-right: 25px; margin-bottom: 25px; }
    #Footer .networks.col-md-2{width:40% !important;}
    #Footer .networks.col-md-3{width:60% !important;}
    #Footer .networks.col-md-3 p{text-align:left;}
    #Footer .networks p { font-size: 14px; font-family: 'Open Sans'; font-weight: 500; color: white; padding-bottom: 15px; display: inline-block; }
    #Footer .extra span { float: none !important; color: white; font-size: 12px; font-family: 'Open Sans';  }
    #Footer .extra p{float:none !important; text-align:center;}
    #ServicesDetail .sectionRight{padding-left:0 !important;}
     #ServicesDetail .box-content { padding: 40px 25px 80px 25px; position: relative; overflow: hidden; }
    #Intro .box .content .img-wrapper .decades { width: 70% !important; height: auto !important; margin: auto; }
    #Intro .box .content img { width: 80% !important; height: auto !important; margin: auto; }
}

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

    #HomeApps .section.top {padding: 55px !important; height: 450px !important;}
    .paths.apps {padding-left: 0 !important;}
    .paths .breadcrumb {text-align: center !important; padding-left: 0 !important;}
    #HomeApps .logo {margin-left: 0 !important;}
    #HomeApps .section h1 {font-size: 30px !important;}
    #HomeApps .section.bgOrange .row .colored-div {padding: 32px 25px 50px 50px !important;}
    #HomeApps .section.bgOrange .row .col-md-7 {height: 215px !important;}
    #HomeApps .section.middle .row .col-md-7 {height: 234px !important;}
    #HomeApps .section.bottom .row .col-md-5 {padding: 32px 25px 50px 50px !important; background-size: cover !important; height: 417px !important;}
    #HomeApps .buttons .content a span {font-size: 15px !important;}
    #HomeApps .section.bottom .row .col-md-7 {height: 315px !important;}
    #HomeContent .section h2 {font-size: 18px !important; width: 180px !important; line-height: 22px !important;}
    #HomeIndex .screen .show-off .subject {bottom: 65px !important; font-size: 25px !important;}
    #HomeIndex .screen .products span {font-size: 19px !important; line-height: 30px !important;}
    #HomeIndex .screen .apps span .bio {height: 60px !important; margin-top:20px !important;}
    #HomeContacts {padding-bottom: 0 !important;}
            .paths .breadcrumb li{display:inline-block; margin:0 15px;}
                #HeaderMobile .top a.logo { display: inline-block; width: 150px; }
                #HeaderMobile .top a.logo img{max-width:100%;}
    #ServicesDetail .box-content h2{font-size:20px;}
   
}

@media (max-width: 350px) {
  
    #HomeApps .section.top {padding: 27px !important;}
    #HomeApps .section h1 {width: 285px !important; font-size: 24px !important;}
    #HomeApps .section h3 {font-size: 20px !important;}
    #HomeApps .section.bgOrange .row .colored-div {padding-left: 15px !important;}
    #HomeApps .section.bgOrange h2 {font-size: 20px !important;}
    #HomeApps .section.bgOrange img {max-width: 100% !important; margin-right: 0 !important;}
    #HomeApps .section.middle h2 {font-size: 22px !important;}
    #HomeApps .section.middle .row .colored-div {padding-left: 15px !important;}
    #HomeApps .section.middle .row .col-md-7 {height: 160px !important;}
    #HomeApps .section.bottom .row .col-md-5 {padding-left: 15px !important; height: 306px !important; background-size: cover !important;}
    #HomeApps .section.bottom h2 {font-size: 25px !important;}
    #HomeApps .section.bottom .row .back-effect {padding: 0 !important; padding-left: 15px !important; height: 104px !important;}
    #HomeRecruits .sectionRight {margin-bottom: 200px !important;}
    #HomeApps .section.bottom .row .col-md-7 {padding-left: 15px !important;}
    #HomeApps .buttons .content a {padding: 0 15px !important; padding-top: 30px !important;}
    #HomeApps .buttons .content img {width: 20% !important; padding-right: 10px !important;}
    #HomeApps .buttons .content a span {font-size: 14px !important;}
    #HomeApps .logo img {width: 100%; margin-left: 8px !important;}
    #ServicesIndex .categories a {height: 170px !important;}
    #ServicesIndex .categories a span {font-size: 25px !important; top: 0 !important;}
    #ServicesIndex .categories .col-md-6 {height: 185px !important;}
    #HomeRecruits .box-content h2 {font-size: 25px !important;}
    #HomeRecruits .col-md-9 .formContainer {padding-right: 20px !important; padding-left: 20px !important;}
   #HomeRecruits .radio-inline {display:block; width:75px; margin-left: 0;}
   #HomeRecruits .bgWhite .banner {height:120px !important; background-size:contain !important;}
   #Footer .col-xs-12 .company {display:none !important;}
   #Footer .col-xs-12 .products {display:none !important;}
    #Footer .col-xs-12 .clients {text-align: center !important; width: 100% !important; display: block !important; margin-top:15px;}
    #HomeContent .section {padding-right: 15px !important;}
    #HomeIndex .screen .section-two .col-md-4, #HomeIndex .screen .section-three .col-md-3 { width: 100% !important; padding-left: 0; padding-right: 15px; }
                #HomeIndex .screen{height: 2600px !important;}
    #ServicesIndex .categories a img { height: 100%; max-width: unset !important; }
    #ServicesIndex .categories a img.icon-logo{max-width:50% !important; height:unset !important;}
    #Footer .img a{display:block; margin-bottom:5px;}
    #Footer .networks.col-md-2, #Footer .networks.col-md-3{width:100% !important;}
}