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

  .textblock {
    font-size: 1rem;
  }

}

@media only screen and (max-width: 950px) {
  html {
    font-size: 14px;
  }
}

@media only screen and (max-width: 830px) {
  nav.menu {
    height: 0;
  }
  
  nav.menu .main,
  nav.languages {
    display: none;
    height: 0;
  }

  nav.mobile.active {
    display: grid;
  }

  .toggle-mobile {
    display: block;
  }

  .canvas {
    height: 100%;
  }

  button.info {
    position: fixed;
    right: 1rem;
    top: calc(5rem - var(--border-width));
    z-index: 3000!important;
  }

  .menu button.active {
    border: transparent;
    background-color: transparent;
  }

  .description-collection {
    width: 100%;
    right: calc(-100% - var(--border-width));
  }

  #two-columns {
    flex-direction: column;
    height: 100%;
    overflow-y: scroll;
  }

  #two-columns .column {
    width: 100%;
    overflow: visible;
    border: none;
  }
  
  .document-collection {
    grid-template-columns: repeat(2, 1fr);
  }
}


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

  .textblock {
    font-size: 1.15rem;
    left: 17.5vw!important;
    background-color: rgba(255, 255, 255, 0.85);
    width: 65vw;
    max-width: 65vw;
    text-align: center!important;
    border-radius: 1.5em;
    transform: translateY(-50%)!important;
    padding: 1.15em;
    box-sizing: border-box;
    opacity: 0.2;
  }

  .intro {
    top: 120vw;
  }

  .intro .mobile {
    display: block;
  }

  .intro .desktop {
    display: none;
  }

  .intro svg {
    padding-bottom: 0rem;
  }

  .logo img {
    width: 90%;
    left: 10%;
  }

  .logo h2 {
    font-size: calc(0.85rem + 1vw);
  }

  .de .logo h2,
  .de-simple .logo h2 {
    left: 19.5%;
  }

  .en .logo h2 {
    left: 22%;
  }
  
  .pol .logo h2 {
    left: 22.5%;
  }
  
  .tu .logo h2 {
    left: 21.5%;
  }

  .textblock {
    transform: translateY(-50%);
  }

  .textblock[data-id="1"] {
    top: 293vw;
  }
  
  .textblock[data-id="2"] {
    top: 380vw
  }
  
  .textblock[data-id="3"] {
    top: 482.8lvw
  }
  
  .textblock[data-id="4"] {
    top: 580vw
  }
  
  .textblock[data-id="5"] {
    top: 666vw
  }
  
  .textblock[data-id="6"] {
    top: 755vw
  }
  
  .textblock[data-id="7"] {
    top: 889vw
  }
  
  .textblock[data-id="8"] {
    top: 1000vw
  }
  
  .textblock[data-id="9"] {
    top: 1171vw
  }
  
  .textblock[data-id="10"] {
    top: 1308vw
  }
  
  .textblock[data-id="11"] {
    top: 1376vw
  }
  
  .textblock[data-id="12"] {
    top: 1478vw
  }
  
  .textblock[data-id="13"] {
    top: 1699vw
  }
  
  .textblock[data-id="14"] {
    top: 1838vw
  }

}


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

  .document-collection {
    grid-template-columns: repeat(1, 1fr);
  }

  footer {
    display: none;
  }
}


@media (orientation: portrait) {
  #case-single .canvas {
    display: flex;
    flex-direction: column;
  }

  #case-single .illustration,
  #case-single .description {
    height: 50%;
  }

  .description .slide-single {
    width: 100%;
  }

  .description .slide-single .text {
    justify-content: flex-start;
  }
  

}