/* MEDIA QUERIES */

@media screen and (max-width: 1920px) {

  section {
    min-height: 1080px;
    height: auto;
  }
  .header {
    margin-top: -100px;
    height: 300px;
  }
  .head-wrapper {
    margin-top: 100px;
    padding: 10px;
  }
  .header-logo {
    -webkit-transform: scale(0.8,0.8);
    -ms-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8);
  }
  .header-nav {
    width: 65%;
  }
	.block-container {
		width: 80%;
    margin-top: 200px;
	}

  /* CTA */
  .bluetext {
    font-size: 18px;
  }
  .contact-ico svg {
    -webkit-transform: scale(0.8,0.8);
    -ms-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8);
    height: 35px;
  }
  .scroll-down {
    -webkit-transform: scale(0.8,0.8);
    -ms-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8);
  	margin-left: -20px;
  }
  .team {
    height: 1200px;
    padding-bottom: 0;
  }
  .block-right {
    margin-top: 200px;
  }
  .block-contacts {
    top: 100px;
    height: 1080px;
  }
  .carousel-wrap {
    margin-top: -130px;
  }
  .marketing {
    height: 1260px;
  }
  .marketing .block-container {
    margin-top: 50px;
  }
  .contacts-content {
    top: 400px;
    width: 85%;
  }
  .map {
    height: 960px;
  }
  .footer-bg path {
    d: path("M120,20 120,0 0,12 0,20");
  }
  .footer-bg line {
    -webkit-transform: rotate(1.4deg) translate(0, -3px);
    -ms-transform: rotate(1.4deg) translate(0, -3px);
    transform: rotate(1.4deg) translate(0, -3px);
  }
  .services {
    height: 1420px;
    padding-bottom: 0;
  }
}

@media screen and (max-width: 1540px) {
  .services {
    height: 1800px;
  }
  .services-grid {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto-fill, 400px);
  }
  .services .grid-item {
    display: flex;
    height: 400px;
  }
  .grid-image, .item-text {
    display: block;
  }
  .grid-image {
    width: 50%;
    height: 100%;
  }
  .item-text {
    width: 50%;
    text-align: left;
    padding: 20px;
  }
  .carousel-wrap {
    margin-top: -50px;
  }
}

@media screen and (max-width: 1460px) {
  .team {
    height: 1800px;
  }
  .team .block-content {
    display: block;
  }
  .block-left, .block-right {
    width: 100%;
  }
  .block-left {
    height: 700px;
    bottom: -275px;
  }
  .block-right {
    position: absolute;
    margin-top: 150px;
    -webkit-clip-path: polygon(100% 0, 100% 85%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 85%, 0 100%, 0 15%);
  }
  .contacts {
    height: 1800px;
  }
  .contacts .block-content {
    display: block;
  }
  .contacts-content {
    top: 150px;
  }
  .block-contacts {
    position: relative;
    top: 175px;
    width: 100%;
    height: 860px;
    -webkit-clip-path: polygon(100% 0, 100% 83%, 0 100%, 0 17%);
    clip-path: polygon(100% 0, 100% 83%, 0 100%, 0 17%);
  }
  .block-map {
    width: 100%;
    height: 860px;
    -webkit-clip-path: polygon(100% 0, 100% 83%, 0 100%, 0 17%);
    clip-path: polygon(100% 0, 100% 83%, 0 100%, 0 17%);
  }
  .footer-bg path {
    d: path("M120,20 120,0 0,10 0,20");
  }
  .footer-bg line {
    -webkit-transform: rotate(2.3deg) translate(0, -5px);
    -ms-transform: rotate(2.3deg) translate(0, -5px);
    transform: rotate(2.3deg) translate(0, -5px);
  }
}

@media screen and (max-width: 1080px) and (orientation: landscape) {

  /* The Overlay (background) */
  .overlay {
      /* Height & width depends on how you want to reveal the overlay (see JS below) */
      display: block;
      height: 0%;
      width: 100%;
      position: fixed; /* Stay in place */
      z-index: 10000; /* Sit on top */
      left: 0;
      top: 0;
      background-color: #2A486B;
      overflow-x: hidden; /* Disable horizontal scroll */
      transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }

  /* Position the content inside the overlay */
  .overlay-content {
      position: relative;
      top: 10%; /* 25% from the top */
      width: 100%; /* 100% width */
      text-align: center; /* Centered text/links */
      margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  }

  /* The navigation links inside the overlay */
  .overlay a {
      padding: 12px;
      text-decoration: none;
      font-size: 26px;
      line-height: 30px;
      color: #fff;
      display: block; /* Display block instead of inline */
      transition: 0.3s; /* Transition effects on hover (color) */
  }

  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
      color: #f1f1f1;
  }

  /* Position the close button (top right corner) */
  .overlay .closebtn {
      position: absolute;
      top: 20px;
      right: 0;
      font-size: 60px;
  }

  .header {
    height: 225px;
  }
  .header-nav, .sticky-nav {
    display: none;
  }
  .mobile-open {
    display: block;
    float: right;
    margin-right: 3vw;
    margin-top: 1vw;
    font-size: 5vw;
    color: #2a486b;
    transition: .2s ease-in-out;
  }
  .socials {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    right: 15vw;
  }
  .block-header {
    height: 300px;
  }
  .about .block-content {
    padding-top: 5vh;
  }
  .block-header-wrapper {
    padding-top: 225px;
  }
  .block-left, .block-right {
    width: 100%;
    height: 160vh;
  }
  .about-icons {
    width: 80%;
  }
  .projects {
    min-height: 150vh;
  }
  .projects .block-content {
    margin-top: 25vh;
    height: 100vh;
  }
  .projects .item {
    height: 100vh;
    padding-top: 150px;
  }
  .contacts {
    height: 1080px;
  }
  .block-contacts {
    top: 80px;
    height: 640px;
  }
  .block-contacts, .block-map {
    -webkit-clip-path: polygon(100% 0, 100% 82%, 0 100%, 0 18%);
    clip-path: polygon(100% 0, 100% 82%, 0 100%, 0 18%);
  }
  .block-map {
    height: 560px;
    margin-top: -40px;
  }
  .map {
    height: 540px;
  }
  footer {
    height: 200px;
    margin-top: -100px;
  }
  .footer-nav {
    display: none;
  }
  .footer-bg path {
    d: path("M120,20 120,0 0,15 0,20");
  }
  .footer-bg line {
    transform: none;
  }
  .scroll-top {
    bottom: 50px;
  }
}

@media screen and (max-width: 1080px) and (orientation: portrait) {
  body {
    overflow: hidden;
  }
  h1 {
    font-size: 10vw;
  }
  h2 {
    font-size: 8vw;
  }
  h3 {
    font-size: 6vw;
  }
  p {
    font-size: 4vw;
    line-height: 6vw;
  }
  .btn, #services-btn, #vacancies-btn {
    font-size: 40px;
  }
  .header-nav, .sticky-nav {
    display: none;
  }
  .header-logo svg {
    -webkit-transform: scale(1.5,1.5);
    -ms-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);
    margin: 15px 0 0 65px;
  }
  .socials {
    -webkit-transform: scale(2.2);
    -ms-transform: scale(2.2);
    transform: scale(2.2);
    right: 25vw;
    top: 30%;
  }
  .carousel-wrap {
    margin-top: -230px;
  }
  footer .socials {
    margin-right: 20%;
  }
  .mobile-open {
    display: block;
    float: right;
    margin-right: 5vw;
    font-size: 8vw;
    color: #2a486b;
    transition: .2s ease-in-out;
  }
  .sticky-header {
    height: 150px;
  }
  .sticky-logo svg {
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
    transform: scale(2.5);
    margin: 20px 0 0 20px;
  }
  .sticky-header .mobile-open {
    margin: 15px 40px 0 0;
  }
  .mobile-open:hover {
    color: #05BEE5;
    cursor: pointer;
  }
  .nav-up {
    top: -150px;
  }

  /* The Overlay (background) */
  .overlay {
      /* Height & width depends on how you want to reveal the overlay (see JS below) */
      display: block;
      height: 0%;
      width: 100%;
      position: fixed; /* Stay in place */
      z-index: 10000; /* Sit on top */
      left: 0;
      top: 0;
      background-color: #2A486B;
      overflow-x: hidden; /* Disable horizontal scroll */
      transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }

  /* Position the content inside the overlay */
  .overlay-content {
      position: relative;
      top: 25%; /* 25% from the top */
      width: 100%; /* 100% width */
      text-align: center; /* Centered text/links */
      margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  }

  /* The navigation links inside the overlay */
  .overlay a {
      padding: 12px;
      text-decoration: none;
      font-size: 7vw;
      line-height: 120px;
      color: #fff;
      display: block; /* Display block instead of inline */
      transition: 0.3s; /* Transition effects on hover (color) */
  }

  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
      color: #f1f1f1;
  }

  /* Position the close button (top right corner) */
  .overlay .closebtn {
      position: absolute;
      top: 20px;
      right: 0;
      font-size: 160px;
  }

  .block-header {
    height: 500px;
  }

  .block-header-wrapper {
    padding-top: 300px;
  }

  .cta-contacts {
    display: none;
  }

  .about {
    height: 170vh;
  }
  .about-icons {
    display: block;
  }
  .about-col {
    width: 100%;
    margin: 30px auto;
  }
  .block-left {
    height: 960px;
  }
  .block-right {
    -webkit-clip-path: polygon(100% 0, 100% 90%, 0 100%, 0 10%);
    clip-path: polygon(100% 0, 100% 90%, 0 100%, 0 10%);
    height: 960px;
  }
  .services {
    min-height: 300vh;
  }
  .services-grid {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto-fill, 85vh);
  }
  .services .grid-item {
    display: inline-grid;
    height: auto;
  }
  .grid-image {
    width: 100%;
    height: 40vh;
  }
  .item-text {
    width: 80%;
    margin: 0 auto;
    height: 50%;
    text-align: center;
  }
  .team {
    height: 3000px;
  }
  .team .block-left {
    margin-top: 110px;
  }
  .team .block-right {
    margin-top: 1000px;
  }
  .projects {
    height: 1280px;
  }
  .item {
    height: 1080px;
    padding-top: 200px;
  }
  .career {
    height: 150vh;
  }
  .contacts {
    height: 2000px;
  }
  .contacts .block-content {
    display: block;
  }
  .block-contacts {
    height: 1080px;
  }
  .contacts-text {
    display: block;
  }
  .contacts-left, .contacts-right {
    width: 80%;
  }
  .block-map {
    height: 960px;
  }
  footer {
    height: 280px;
    bottom: -190px;
  }
  .footer-bg {
    display: none;
  }
  .footer-nav {
    display: none;
  }
  .footer-logo {
    bottom: 15px;
    right: 50%;
    margin-right: -125px;
  }
  .footer-nav {
    display: none;
  }
  .footer-logo {
    -webkit-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
    top: 150px;
    right: 55%;
    margin-right: -150px;
  }
  .footer-wrapper .socials {
    display: block;
    position: absolute;
    right: 50%;
    margin-right: -50px;
    text-align: center;
  }
  .marketing {
    height: 200vh;
  }
}

@media screen and (max-width: 960px) {

  .contacts-text {
    display: block;
  }
  .block-contacts, .block-map {
    -webkit-clip-path: polygon(100% 0, 100% 85%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 85%, 0 100%, 0 15%);
  }
}

@media screen and (max-width: 769px) {
  .banner {
    top: 25vh;
  }
  .contacts-left, .contacts-right {
    width: 90%;
  }
  .block-contacts, .block-map {
    -webkit-clip-path: polygon(100% 0, 100% 92%, 0 100%, 0 8%);
    clip-path: polygon(100% 0, 100% 92%, 0 100%, 0 8%);
  }
}

@media screen and (max-width: 680px) {
  .header .socials {
    display: none;
  }

@media screen and (max-width: 480px) {

  .block-contacts, .block-map {
    -webkit-clip-path: polygon(100% 0, 100% 94%, 0 100%, 0 6%);
    clip-path: polygon(100% 0, 100% 94%, 0 100%, 0 6%);
  }
}