.tablet-only {
  display: none;
}

.mobile-only {
  display: none;
}

.ms-warning{
  display: none;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .ms-warning{
    position: fixed;
    z-index: 1000;
    padding: 20px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: block;
  }
}

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

  :root {
    --mainfont: 30px;
    --carousel-size: calc((100vw - (2 * var(--mainfont))) * 0.66);
  }

  .carousel-block{
    background: transparent;;
  }

  .tablet-only {
    display: initial;
  }

  .desktop-only {
    display: none;
  }

  main {
    position: relative;
    padding: 3em 0 0;
  }

  .header {
    padding: 20px;
    height: 3em;
  }

  .page {
    padding: 20px;
  }

  .footer {
    padding: 20px 20px 30px 20px;
  }

.langchange{
    font-family: 'Noto Sans SC', sans-serif!important;
    height: var(--smallfont);
  }

  #langchange {
    top: 20px;
    height: calc(1.2 * 20px);
    display: none;
  }

  .cookie-banner {
    padding: 1em 20px;
  }

  .banner-out .footer {
    padding-bottom: calc(20px + 4 * var(--smallfont));
}

  .page.menu-down {
    padding-top: 5rem;
  }

  .page.menu-down header {
    height: 8rem;
  }

  .page.menu-down nav.tablet-only button {
    display: none;
  }

  #menu-activator::before {
    content: ' ';
    height: .3em;
    width: .3em;
    display: block;
    background: var(--foreground);
    border-radius: 50%;
    position: absolute;
    top: .333em;
    left: -.666em;
  }

  #menu-activator {
    text-align: left;
    position: absolute;
    -webkit-appearance: none;
    border: none;
    background: var(--background);
    z-index: 1000;
    width: 100%;
  }

  nav.tablet-only {
    display: inline-flex;
    flex-direction: column;
    max-height: 1em;
    overflow: hidden;
    height: 2000px;
  }

  nav.tablet-only.active {
    max-height: 2000px;
  }

  .line{
    margin-bottom: 0.4em;
  }

  .list li {
    padding: 0.4rem 0;
  }

  .header {
    background: var(--background);
  }

  .footer {
    position: relative;
  }

  .footer .address {
    grid-row-end: span 2;
  }

  .header .logo {
    color: var(--foreground);
  }

  .intro-carousel {
    margin: 0;
  }

  .intro-info {
    padding: 0;
  }

  .heading-block p {
    margin-bottom: 0;
  }

  .swiper-home,
  .swiper-block {
    position: relative;
  }

  .swiper-home {
    height: 1px;
    padding-top: 150%;
  }

  .swiper-home .swiper-wrapper {
    position: absolute;
    top: 0;
    height: calc(100% - 1.59rem);
  }

  .swiper-wrapper {
    width: 100%;
    overflow: hidden;
  }

  form {
    display: flex;
    flex-direction: column;
  }

  input {
    grid-column-end: span 2;
    margin-bottom: 0.4rem;
  }

  label{  
    margin-top: 0.6em;
    margin-bottom: 0.4rem;
  }

  textarea{
    margin-bottom: 0.4rem;
  }
}

@media screen and (max-width: 650px) {
  .header {
    padding: var(--smallfont);
  }

  .page {
    padding: var(--smallfont);
  }

  .footer {
    padding: var(--smallfont) var(--smallfont) calc(1.5* var(--smallfont)) var(--smallfont);
  }

  #langchange {
    top: var(--smallfont);
    height: calc(1.2 * var(--smallfont));
  }

  .cookie-banner {
    padding: 1em var(--smallfont);
  }

  .banner-out .footer {
    padding-bottom: calc( 7 * var(--smallfont));
}


  .footer .address {
    grid-row-end: none;
  }

  .mobile-only {
    display: inherit;
  }

  .header {
    height: 5rem;
  }

  .page.menu-down header {
    height: 10rem;
  }

  .tablet-menu {
    padding-left: .666666em;
  }

  html {
    font-size: 22px;
  }

  main {
    position: relative;
    padding: 5rem 0 0;
  }

  .intro-carousel {
    margin: 0;
  }

  .intro-info {
    padding: 0;
  }

  .profile-info,
  .profile-contact {
    grid-column-end: span 2;
  }

  .profile-info {
    grid-row: 2;
  }

  .profile-info p {
    margin-bottom: 0;
  }

  .paragraph-block,
  .heading-block,
  .intro-block {
    padding-right: 0.5em;
  }



  .tablet-menu{
    grid-column-end: span 10;
  }

}


@media screen and (max-width: 1440px) {
  :root {
    --smallfont: 16px;
  }
}

@media screen and (min-width: 2300px) {
  html {
    font-size: 300%;
  }

}