html, body {

  width: 420px;
  min-width: unset;
}

h1 {
  
  margin-bottom: 0.3em;
  font-size: 46px;
}

.h-center {
  
  text-align: left;
}

/* -------------------- */
/* GENERIC */
/* -------------------- */

.outer-area {

  width: unset;
  padding: 0 20px;
}

.inner-area {

  padding: 0 20px;
}

/* -------------------- */
/* REUSABLE */
/* -------------------- */

    .contact-card .contact {

      font-size: 20px;
    }

/* -------------------- */
/* SPECIFIC */
/* -------------------- */

header {
  
  height: 80px;
  z-index: 2;
  overflow: visible;
}

  .upper {
    
    display: none;
  }

  .lower {

    height: 80px;
    line-height: 80px;
  }

    nav.desktop {
        
      display: none;
    }

    .navigation-button {

      display: block;
    }

header.min {
  
  top: unset;
}

  header.min .lower{

    top: unset;
  }
    
    header.min .lower > div {

      transform: unset;
    }

nav.mobile {

  display: block;
}

  footer .left {

    position: static;
    margin-right: 0;
    text-align: center;
  }

    footer .left .inner {

      display: inline-block;
      position: static;
      width: unset;
      height: unset;
      padding-top: 50px;
    }

    footer .left .copyright {

      display: inline-block;
    }

  footer .right {
    
    display: none;
  }
      
/* ----- Úvod ----- */

.section-uvod {

  display: none;
  height: 100vh;
  padding: 100px 0 20px 0;
}

  .slider.horizontal {
    
    display: none;
  }

  .slider.vertical {

    display: block;
  }

    .slider .before {
      
      background: url('media/slider-before.square.800.jpg') center 25% / cover;
      clip-path: inset(70% 0 0 0);
    }
  
    .slider .after {
      
      background: url('media/slider-after.square.800.jpg') center 25% / cover;
    }
  
    .slider .delimiter {

      width: 100%; height: 70%;
      border-right: none;
      border-bottom: 6px dashed white;
    }

    .slider .overlay {

      display: flex;
      margin-top: 80px;
      flex-wrap: wrap;
      justify-content: center;
      line-height: 1.2em;
      font-size: 50px;
      text-justify: inter-character;
      text-align: justify;
      text-align-last: justify;
      text-shadow: 0px 0px 10px #00000080;
    }

      .slider p {
        
        margin: 1.5em 0 3em 0;
        text-align: left;
        text-align-last: left;
        text-justify: inter-word;
      }

      .slider .button {
        
        text-shadow: none;
      }

/* ----- O nás ----- */

  .section-o_nas p {
    
    width: unset;
  }

  .medailon {

    position: static;
    width: 283px; height: 500px;
    margin-top: 3em;
  }

/* ----- Služby ----- */

  .section-sluzby {

    margin-bottom: -7em;
  }

  .grid {
    
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-row-gap: 0;
  }

  .cell {

    padding: 1em 1em;
    padding-bottom: 2em;
    margin-bottom: 2em;
  }

  .cell.photo {
    
    height: 216px;
    margin: 0;
    padding: 0;
    border-width: 12px;
  }

  .cell.dlazba {

    grid-row: 3;
  }

/* ----- Kontakt ----- */

  .section-kontakt .map {
    
    height: 380px;
  }

  .note {
    
    display: none;
  }

  .phone-and-email {
    
    float: unset;
    height: unset;
    margin-bottom: 3em;
    line-height: unset;
  }

  .section-kontakt .contact-card {

    display: block;
    margin: 3em 0 0 0;
  }