/*variables*/
:root {
  --primary: rgb(0, 219, 177);
}

/* Big Tablet to 1200px: widths smaller than 1150px row */
@media only screen and (max-width: 1200px) {
  .side-navigator {
    display: none;
  }

  .slider {
    max-width: 100%;
  }
}

/* Small tablet to big tablet: from 768 to 1049 */
@media only screen and (max-width: 1123px) {
    .hero-text-box {
      top: 8%;
      width: 96%;
    }

    .side-navigator {
      display: none;
    }

    .header-phone {
      display: none;
    }

    .function-section-content {
      top: 10vh;
    }
    h2 {
      font-size: 180%;
    }
    h4 {
      font-size: 150%;
    }
    h5 {
      font-size: 120%;
    }

    .function-section-img {
      margin-top: 4vh;
    }

    /* mobile hamburger navigation */

    .navigator {
      height: 8%;
    }

    nav .main-navigation {
      list-style: none;
      margin: auto;
      position: fixed;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: top 0.7s ease;
      padding: 0;
      width: 100%;
      background-color: white;
      color: var(--primary);
      z-index: 99999999;
      display: none;
    }

    .main-navigation li {
      margin-right: 0;
    }

    nav .main-navigation li a {
      display: inline-block;
      text-decoration: none;
      text-transform: uppercase;
      color: var(--primary);
      font-size: 1.5rem;
      background-color: white;
      font-weight: 500;
    }

    .main-navigation li a:link,
    .main-navigation li a:visited {
      color: var(--primary);
    }

    .hamburger {
      background-color: transparent;
      border: 0;
      color: white;
      font-size: 140%;
      cursor: pointer;
      float: right;
      position: relative;
      margin-top: 2vh;
      margin-right: 4%;
    }

    .hamburger {
      display: block;
    }

    .hamburger:hover {
      color: rgb(0, 219, 177);
    }

    nav .main-navigation .closeMenu,
    .icons i {
      font-size: 2rem;
      display: none;
      cursor: pointer;
    }

    nav .main-navigation .closeMenu {
      display: block;
      position: absolute;
      top: 0.5vh;
      right: 2%;
      color: rgb(0, 219, 177);
    }

    .icons i {
      display: inline-block;
      padding: 12px;
    }

    .team-under {
      margin: 20px 10% 0px 10%;
      font-size: 0.85rem;
    }
    
    .team-upper {
      margin: 10px 10% 0px 10%;
      font-size: 0.8rem;
    }
  }

/* Small phones to small tablets: from 481-767 */
@media only screen and (max-width: 800px) {

  header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      url(../img/hero.jpeg);
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-attachment: scroll;
    background-repeat: no-repeat;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
  }

  .logo {
    left: 10px;
    top: 1px;
  }

  .slider__btn img {
    width: 5vw;
  }

  .hero-text-box {
    top: 15%;
  }

  .navigator-content {
    margin: 0px 20px;
  }

  .download-store-btn img {
    height: 6vh;
  }
  .download-store-btn img:hover,
  .download-store-btn img:active {
    height: 6.1vh;
  }

  .function-section-content {
    top: 10vh;
  }

  #iconsForPreferences img {
    width: 17.5%;
  }
  
  .function-section-description h4 {
    font-size: 110%;
  }
  .function-section-description h5 {
    font-size: 85%;
  }

  .app-description-bg-container-left {
    height: 42vh;
    margin-top: 8vh;
    background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.8)
    );
    border-radius: 0vh 21vh 21vh 0vh;
  }

  .app-description-bg-container-right {
    height: 45vh;
    margin-top: 25vh;
    border-radius: 23vh 0vh 0vh 23vh;
  }

  .function-section-description {
    margin-top: 30%;
    width: 40%;
  }

  .function-section-img {
    width: 40%;
    margin-top: 1vh;
  }

  .netzwerk-logo {
    width: 74%;
    max-width: 74%;
    height: auto;
  }
  .netzwerk-logo:active,
  .netzwerk-logo:hover {
    width: 74.1%;
    height: auto;
  }

  .barslideContainer {
    width: 50%;
    margin-top: 10%;
  }
  .barslider {
    -webkit-appearance: none;
    width: 80%;
    height: 12px;
    outline: none;
    opacity: 0.92;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
    border-radius: 12px;
    box-shadow: 0p 1px 10px 1px black;
    margin-left: 5.5%;
    margin-top: 1rem;
  }
  .barslider:hover {
    opacity: 1;
  }
  .barslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
  }
  .barslider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
  }

  .team-under {
    margin: 20px 10% 0px 10%;
    font-size: 0.7rem;
  }
  
  .team-upper {
    margin: 10px 10% 0px 10%;
    font-size: 0.6rem;
  }

}

/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
  .navigator-content {
    margin: 0px 10px;
  }

  .hero-text-box {
    width: 90%;
  }

  .function-section-description {
    margin-top: 50%;
  }

  .function-section-img {
    width: 40%;
    margin-top: 18vh;
  }

  #iconsForPreferences img {
    width: 13%;
  }

  .function-section-description h4 {
    font-size: 80%;
  }
  .function-section-description h5 {
    font-size: 45%;
  }

  .social-icon {
    height: 40px;
    margin: 25px 15px;
  }

  .social-icon:active,
  .social-icon:hover {
    height: 44px;
    margin: 23px 13px;
  }

  .download-store-btn img {
    height: 5vh;
  }
  .download-store-btn img:hover,
  .download-store-btn img:active {
    height: 5.1vh;
  }

  h1 {
    font-size: 380%;
  }
  h2 {
    font-size: 170%;
  }
  h3 {
    font-size: 170%;
  }

  h5 {
    font-size: 70%;
  }

  .team-under {
    margin: 20px 10% 0px 10%;
    font-size: 0.52rem;
  }
  
  .team-upper {
    margin: 10px 10% 0px 10%;
    font-size: 0.39rem;
  }
}