@font-face {
  font-family: rockwell-nova,sans-serif;
  font-weight: 200;
  font-style: normal;
}

@media (max-width: 1570px) {
  
  .heading h4{
    font-size: 108px;
  }

}

@media (max-width: 1428px) {

  .heading h4{
    font-size: 98px;
  }

}

@media (max-width: 1400px) {
  
  .heading--side--p {
    font-size: 16px;
  }
  
  .column--1 h4 {
    padding-top: 40px;
  }
  
  .column--2 a h4 {
    font-size: 48px;
  }
  
  .ref--category {
    padding-top: 35px;
  }
  
  .were--tech--p, .small--ref {
    font-size: 48px;
  }
  
  .heading--side--p2 {
    font-size: 16px; 
  }
  
  .lets--make--something--great {
    font-size: 68px;
  }
  
  .hello--mail {
    font-size: 56px;
    width: 582px;
  }
  
  .flex--table--row {
    width: 725px;
  }

}

@media (max-width: 1310px) {

  .heading h4{
    font-size: 88px;
  }

}

@media (max-width: 1300px) {

  .flex--table--row {
    flex-direction: column;
    padding-top: 32px;
    width: 100%;
  }
  
  .footer--heading {
    padding-bottom: 32px;
  }
  
  .footer--heading:last-child {
    padding-bottom: 0;
  }

}

@media (max-width: 1200px) {
  
  .heading h4{
    font-size: 78px;
  }

}

@media (max-width: 1100px) {
    
  .heading h4{
    font-size: 68px;
  }
  
  .column--2 a h4 {
    font-size: 38px;
  }
  
  .ref--category {
    font-size: 14px;
  }
  
  .about--project--desc {
    width: 100%;
  }
 
}

@media (max-width: 985px) {
    
  .heading h4{
    font-size: 58px;
  }
  
  .column--2 a h4 {
    font-size: 32px;
  }
  
  .hotfix {
      display: block;
  }
  .hello--mail--wrapper {
      display: none;
  }

}

@media (max-width: 910px) {
    
  .hotfix {
      display: none;
  }
  .hello--mail--wrapper {
      display: block;
  }

  .cursor, .cursor__inner, .cursor__inner--circle {
    display: none;
  }
  
  .main {
    padding: 32px;
  }

  .delimiter {
    display: none;
  }

  .mail {
    display: none;
  }

  .scroll--ico {
    display: none;
  }

  ul.langs {
    position: relative;
  }

  #burger {
    width: 35px;
    height: 32px;
    z-index: 9999;
    outline: none; }

  #burger:before,
  #burger:after {
    cursor: pointer;
    border-radius: 1px;
    height: 2px;
    width: 35px;
    background: white;
    position: absolute;
    right: 0;
    content: '';
  }

  #burger:before {
    top: 0;
  }
  
  #burger:after {
    top: 10px;
  }
  
  #burger,
  #burger:before,
  #burger:after {
    transition: all 0.5s ease-in-out;
  } 
  
  #burger.active {
    background-color: transparent;
  }
  
  #burger.active:before,
  #burger.active:after {
    top: 0;
  }
  
  #burger.active:before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
  
  #burger.active:after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  #mobile--menu.off {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    background-color: #111;
    padding: 40px;
    transform: translate(0, -100%);
    transition: transform 0.4s ease-out;
    -webkit-transform: translate(0, -100%);
    -webkit-transition: transform 0.4s ease-out;
  }
  
  #mobile--menu.on {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index: 42;
    background-color: #111;
    padding: 32px;
    transform: translate(0, 0);
    transition: all 0.4s ease-out;
    -webkit-transform: translate(0, 0);
    -webkit-transition: all 0.4s ease-out;
  }

  .soapImg {
    position: relative;
    -webkit-transform: translateY(200%) rotate(20deg);
    -moz-transform: translateY(200%) rotate(20deg);
    -ms-transform: translateY(200%) rotate(20deg);
    -o-transform: translateY(200%) rotate(20deg);
    transform: translateY(200%) rotate(20deg);
    width: 100%;
    height: auto;
  }

  .evoImg {
    position: relative;
    -webkit-transform: translateY(20%) translateX(-50%) rotate(-15deg);
    -moz-transform: translateY(20%) translateX(-50%) rotate(-15deg);
    -ms-transform: translateY(20%) translateX(-50%) rotate(-15deg);
    -o-transform: translateY(20%) translateX(-50%) rotate(-15deg);
    transform: translateY(20%) translateX(-50%) rotate(-15deg);
    width: 100%;
    height: auto;
  }

  .maImg {
    position: relative;
    -webkit-transform: translateY(50%) rotate(15deg);
    -moz-transform: translateY(50%) rotate(15deg);
    -ms-transform: translateY(50%) rotate(15deg);
    -o-transform: translateY(50%) rotate(15deg);
    transform: translateY(50%) rotate(15deg);
    width: 100%;
    height: auto;
    overflow-x: hidden;
  }

  .nav--bar {
    display: flex;
    justify-content: space-between;
  }

  .nav--menu--mobile {
    display: flex;
    flex-direction: column;
    padding: 82px 0 82px 0;
  }

  .social--sites {
    display: flex;
    flex-direction: column;
    padding-bottom: 80px;
  }
  
  .langs--li {
    display: none;
  }

  .hamburger--menu {
    display: flex;
  }

  .hamburger--menu:hover {
    cursor: pointer;
  }
  
  .mobile--links {
    font-family: rockwell-nova,sans-serif;
    font-size: 32px;
    line-height: 2;
    color: #ffffff;
    text-decoration: underline;
  }
  
  .mobile--social {
    font-family: rockwell-nova,sans-serif;
    font-size: 16px;
    line-height: 3;
    color: #ffffff;
    text-decoration: underline;
  }
  
  .mobile--mail--href {
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: normal;
    color: #ffffff;
  }

  ul.menu {
    display: none;
  }

  .heading {
    padding-bottom: 48px;
    width: 100%;
  }

  .heading h4{
    font-size: 40px;
  }

  .heading--side--p {
    padding-bottom: 80px;
    font-size: 16px;
    color: #ffffff;
  }

  /*hide desktop version*/

  .motion--hover--wrapper {
    display: none;
  }
  
  #work.second--page {
    padding: 0 40px 0 40px;
  }
 
  .flex--table--wrapper--mobile {
    display: flex;
    flex-direction: column;
  }

  .ref--container {
    padding-bottom: 16px;
  }

  .column--1 h4 {
    display: none;
  }

  .h1--class {
    font-size: 14px;
    font-weight: normal;
    color: #ffffff;
    text-transform: uppercase;
    padding-bottom: 32px;
    font-family: nhaas-medium, sans-serif;
  }

  .black-font {
    color: #000;
  }

  .img--ref {
    width: 100%;
    height: auto;
  }

  .h1--ref {
    font-family: nhaas-medium, sans-serif;
    padding-top: 16px;
    font-size: 20px;
    font-weight: normal;
    color: #fff;
  }

  .h1--ref--2 {
    font-family: rockwell-nova,sans-serif;
    font-size: 20px;
    font-weight: normal;
    color: #8f9398;
    padding-bottom: 48px;
  }
  
  .h1--class--ext--ref--page {
    font-family: nhaas-medium, sans-serif;
    padding-top: 16px;
    font-size: 20px;
    font-weight: normal;
    color: #000;
  }

  .third--page {
    padding: 56px 32px 56px 32px;
  }

  .third--page--wrapper {
    flex-direction: column;
  }

  .what--we--do {
    width: 100%;
    padding-bottom: 32px;
  }

  .were--technologists {
    width: 100%;
    padding-bottom: 40px;
  }
  
  .were--tech--p, .small--ref {
    font-size: 40px;
  }

  .heading--side--p2 {
    font-size: 16px;
    padding-bottom: 32px;
  }

  .mega__bg__wrapper {
    padding-top: 80px;
}

  .floaty--table {
    display: none;
  }

  .lets--make--page {
    padding: 40px 32px 32px 32px;
  }

  .lets--make--wrapper {
    flex-direction: column;
  }

  .contact {
    padding-bottom: 32px;
  }

  .lets--make--something--great {
    font-size: 40px;
  }

  .hello--mail {
    font-size: 32px;
    width: 330px;
  }

  .flex--table--row {
    flex-direction: column;
    padding-top: 32px;
  }

  .social--icons--page {
    padding: 0 32px 0 32px;
  }

  .column--70--percent {
    float: left;
    padding-bottom: 1em;
  }

  .copyright--page {
    padding: 104px 32px 69px 32px;
  }

  .copyright--wrapper {
    justify-content: flex-start;
  }
  
  .wrapper--nav {
    padding-top: 108px;
    padding-bottom: 8px;
  }
  
  ul.menu2 {
    width: 100%;
    padding-bottom: 48px;
  }
  
  #scene2 {
    display: none;
  }
  
  .ref--img--wrap {
    display: block;
  }
  
  .car--ref {
    width: 100%;
  }
  
  .wrapper--nav--flex {
    flex-direction: column;
  }

  .second--page {
    padding: 128px 32px 128px 32px;
  }

  .side--head--p p {
    font-size: 16px;
  }

  .about--project--wrapper {
    flex-direction: column;
  }

  .about--project {
    width: 100%;
  }
  
  .about--project--desc {
    font-size: 48px;
  }

}

@media (max-width: 700px) {

  .heading h4:nth-child(2) {
    padding-left: 0;
  }

  .soapImg {
    position: relative;
    -webkit-transform: translateY(200%) rotate(20deg);
    -moz-transform: translateY(200%) rotate(20deg);
    -ms-transform: translateY(200%) rotate(20deg);
    -o-transform: translateY(200%) rotate(20deg);
    transform: translateY(200%) rotate(20deg);
    width: 150%;
    height: auto;
  }

  .evoImg {
    position: relative;
    -webkit-transform: translateY(20%) translateX(-50%) rotate(-15deg);
    -moz-transform: translateY(20%) translateX(-50%) rotate(-15deg);
    -ms-transform: translateY(20%) translateX(-50%) rotate(-15deg);
    -o-transform: translateY(20%) translateX(-50%) rotate(-15deg);
    transform: translateY(20%) translateX(-50%) rotate(-15deg);
    width: 150%;
    height: auto;
  }

  .maImg {
    position: relative;
    -webkit-transform: translateY(50%) rotate(15deg);
    -moz-transform: translateY(50%) rotate(15deg);
    -ms-transform: translateY(50%) rotate(15deg);
    -o-transform: translateY(50%) rotate(15deg);
    transform: translateY(50%) rotate(15deg);
    width: 150%;
    height: auto;
    overflow-x: hidden;
  }

}

@media (max-width: 593px) {
  
  .soapImg {
    position: relative;
    -webkit-transform: translateY(200%) rotate(20deg);
    -moz-transform: translateY(200%) rotate(20deg);
    -ms-transform: translateY(200%) rotate(20deg);
    -o-transform: translateY(200%) rotate(20deg);
    transform: translateY(200%) rotate(20deg);
    width: 200%;
    height: auto;
  }

  .evoImg {
    position: relative;
    -webkit-transform: translateY(20%) translateX(-50%) rotate(-15deg);
    -moz-transform: translateY(20%) translateX(-50%) rotate(-15deg);
    -ms-transform: translateY(20%) translateX(-50%) rotate(-15deg);
    -o-transform: translateY(20%) translateX(-50%) rotate(-15deg);
    transform: translateY(20%) translateX(-50%) rotate(-15deg);
    width: 200%;
    height: auto;
  }

  .maImg {
    position: relative;
    -webkit-transform: translateY(50%) rotate(15deg);
    -moz-transform: translateY(50%) rotate(15deg);
    -ms-transform: translateY(50%) rotate(15deg);
    -o-transform: translateY(50%) rotate(15deg);
    transform: translateY(50%) rotate(15deg);
    width: 200%;
    height: auto;
    overflow-x: hidden;
  }
  
}

@media (max-width: 534px) {

  .hotfix {
     display: block;
  }
  
  .hello--mail--wrapper {
     display: none;
  }
  
}

@media (max-width: 515px) {

  .heading--side--p {
    padding-bottom: 80px;
  }
  
  .scroll--ico {
    display: none;
  }

}



@media (max-width: 430px) {

  .heading--side {
    justify-content: unset;
  }
  
  .were--tech--p, .small--ref  {
    font-size: 24px;
  }
  
  .about--project--desc {
    font-size: 40px;
  }

  .lets--make--something--great, .hello--mail {
    font-size: 32px;
    width: 100%;
  }

}

@media (max-width: 355px) {
    
  .heading h4{
    font-size: 40px;
  }
  
  .were--tech--p, .small--ref  {
    font-size: 28px;
  }
  
  .delimiter__learn__more {
    width: 200px;
  }
  
  .about--project--desc {
    font-size: 32px;
  }
  
  .side--head--p {
    font-size: 14px;
  }
    
  .lets--make--something--great, .hello--mail {
    font-size: 28px;
  }
  
}

@media (max-width: 323px) {

  .footer--heading--h {
    font-size: 18px;
  }

}