@media all and (max-width: 1280px) {
    #content-what {
      width: 650px;
      height: 310px;
      background: transparent url('../img/what_diagram_650.png') no-repeat top left;
    }
    
    #content-what .label {
      width: 140px;
      font-size: 1.1em;
      line-height: 1.1em;
    }

    .label-1 {left: 7px; top: 169px;}
    .label-2 {left: 166px; top: 103px;}
    .label-3 {left: 340px; top: 169px;}
    .label-4 {left: 501px; top: 103px;} 
    
    #content-why, #content-how {
      font-size: 2.7em;
      line-height: 1.4em;
    }    
}

@media all and (max-width: 1200px) {
    .catalogue-wrapper .button {
        width: 180px !important;
        font-size: 0.9em !important;
    }
}

@media all and (max-width: 1185px) {
  #circles {width: 573px;}
  .circle {margin-left: 60px;}
  #circles .circle:first-child {margin-left: 0px !important;}
  #circles .circle:nth-child(4) {margin-top: 20px !important; clear: both; margin-left: 120px;}
  #circles .circle:nth-child(5) {margin-top: 20px !important;}
  
  #solution .section-background {
    background-position: center center !important;
    background-size: 100% 100%;
  }
}

@media all and (max-width: 1160px) {
  #switcher {
    width: 64px;
    height: 64px;;
    background: transparent url('../img/button_hiring_small.png') no-repeat top left;
    top: 35px;
  }

  #switcher span {
    width: 48px;
    top: 15px;
    left: 9px;
    font-size: 14px;
  }
  
  #hiring-close {
    width: 64px;
    height: 64px;
    left: 50px;
    top: 325px;
    background: transparent url('../img/button_hiring_close_small.png') no-repeat top left;
  }

  #hiring-close span {
    width: 48px;
    top: 23px;
    left: 9px;
    font-size: 14px;
  }  
}

@media all and (max-width: 1060px) {
  #sedex_side {
      width: 80px;
      height: 80px;
      background: transparent url('../img/sedex_float_small.png') no-repeat top left;
      top: 90px;
      right: 40px;
  }
}

@media all and (max-width: 970px) {
  #hiring-close {
    left: 20px;
    top: 325px;
  }
  
  h3.title-line {
    margin-right: 80px !important;    
  }
  
  #top-menu li {
    width: 135px !important;
  }
  
  .contact-part a.link {
    padding: 0px 16px 0px 15px !important;
  }  
}

@media all and (max-width: 1100px) {
    #content-why, #content-how {
      font-size: 2.5em;
      line-height: 1.4em;
    }   

    #subnavig {
      margin-top: -71px;
    }    
    
    #subnavig li {
        height: 60px;
    }    
    
    #subnavig li a {
      font-size: 2.4em !important;
      height: 60px;
      line-height: 60px;
    }    
    
    #subnavig-content {
        margin-left: 220px !important;
    }
}

@media all and (max-width: 1024px) {
/*  #circles {width: 844px;}
  .circle {margin-left: 60px;}*/
  
  .stripe-perex {
    font-size: 0.9em;
  }
  
  .stripe-label {
    font-size: 1.4em;
  }
  
    #content-why, #content-how {
      font-size: 2.4em;
      line-height: 1.4em;
    }  
} 

@media all and (max-width: 960px) {
  #solution .long-title {width: 700px;}
  
    #content-why, #content-how {
      font-size: 2.1em;
      line-height: 1.4em;
    }    
}

@media all and (max-width: 980px) {
  .anot {font-size: 1.5em !important;}
  
    #content-what {
      width: 550px;
      height: 263px;
      background: transparent url('../img/what_diagram_550.png') no-repeat top left;
    }  
    
    #content-what .label {
      width: 125px;
      font-size: 0.9em;
      line-height: 1em;
    }

    .label-1 {left: 0px; top: 149px;}
    .label-2 {left: 142px; top: 83px;}
    .label-3 {left: 287px; top: 149px;}
    .label-4 {left: 421px; top: 83px;} 
  
    .catalogue-wrapper .button {
        width: 150px !important;
        font-size: 0.8em !important;
    }
}  

@media all and (max-width: 970px) {
  .section-content {margin: 0px 20px !important;}
}

@media all and (max-width: 920px) {
/*   #circles {width: 784px;} */
/*   .circle {margin-left: 40px;} */
} 

@media all and (max-width: 900px) {
  #presence-map {
    width: 600px;  
    background-image: url('../img/presence_map_small.png') !important;
  }
  
  .marker {width: 15px; height: 15px; background-image: url('../img/map_marker_small.png') !important}
    
  .marker:hover {background-position: -15px 0px;}  
    
  .marker-mx {left: 120px; top: 140px;}
  .marker-bo {left: 163px; top: 168px;}
  .marker-rj {left: 210px; top: 209px;}
  .marker-br {left: 293px; top: 84px;}
  .marker-hk {left: 464px; top: 135px;}
  .marker-sh {left: 477px; top: 123px;}
  
  #radar {width: 183px; height: 183px;}
  
  .radar-1 {background-image: url('../img/radar_1_small.png');}
  .radar-2 {background-image: url('../img/radar_2_small.png');}
  .radar-3 {background-image: url('../img/radar_3_small.png');}
  .radar-4 {background-image: url('../img/radar_4_small.png');}
  
  #marker-label {
    font-size: 1em !important;
  }
} 

@media all and (max-width: 880px) {
  #sedex_side {
      top: 90px;
      right: 20px !important;
  }
}

@media all and (max-width: 870px) {
/*  #circles {width: 412px;}
  #circles .circle {margin-left: 80px;}
  #circles .circle:nth-child(3) {margin-left: 0px !important;}
  #circles .circle:first-child {margin-left: 0px !important;}
  #circles .circle:nth-child(3), #circles .circle:nth-child(4) {margin-top: 40px !important;}*/
  .section-content {margin: 0px 10px !important;}
  
  .stripe-image {width: 150px; height: 148px;}
  .stripe-4 .stripe-image {height: 150px !important;}
  .stripe-1 .stripe-image {background-image: url('../img/stripe_1_small.png');}
  .stripe-2 .stripe-image {background-image: url('../img/stripe_2_small.png');}
  .stripe-3 .stripe-image {background-image: url('../img/stripe_3_small.png');}
  .stripe-4 .stripe-image {background-image: url('../img/stripe_4_small.png');}
  
  .stripe-1:hover .stripe-image {background-image: url('../img/stripe_1_small_hover.png');}
  .stripe-2:hover .stripe-image {background-image: url('../img/stripe_2_small_hover.png');}
  .stripe-3:hover .stripe-image {background-image: url('../img/stripe_3_small_hover.png');}
  .stripe-4:hover .stripe-image {background-image: url('../img/stripe_4_small_hover.png');}
  
  .anot {font-size: 1.2em !important;}
  
    #content-why, #content-how {
      font-size: 1.7em;
      line-height: 1.4em;
    }    
} 

@media all and (max-width: 780px) {
  #solution .long-title {width: 600px;}
  .more-block p {
    width: 80% !important;
  }

  .numbers .number-wrapper:first-child {
    margin-left: 50px !important;
  }  
  
  .numbers .number-wrapper:nth-child(4) {
    clear: both !important;
    margin-left: 110px !important;
    margin-top: 30px !important;
  }
  .numbers .number-wrapper:nth-child(5) {
    margin-left: 30px !important;
    margin-top: 30px !important;
  }
  
    #content-why, #content-how {
      font-size: 1.4em;
      line-height: 1.4em;
    }    
    
    #subnavig-content {
        margin-left: 200px !important;
    }
}  

@media all and (max-width: 730px) {
  .anot {font-size: 1em !important;}
}

/* HEIGHT ADJUSTMENTS */
@media all and (max-height: 600px) {
    .hp .button {
      bottom: 20px;
      right: 20px;
    }
}
