<style>
/*Desktop / min width 600px 
Default use:
  @include min-(width,4,240);

  use width calculation
  @include min-(width,4,240,'calc(100% - 240px)');
*/
html,
body {
  background-color: green;
  font-family: sans-serif;
  font-size: 100%;
  overflow-y: hidden;
  margin: 0px;
  scroll-behavior: smooth;  
}

p {   font-size: 1em;
}

/*H1 { font-size: 2em; }*/

  .nav {
    position: fixed;
    z-index: 100;
    right: 1em;
    top: 20%;
    -webkit-transform: translateY(-40%);
    transform: translateY(-40%);
    /*display: none;*/
  }
  .nav li {
    list-style: none;
    margin: .5em;
  }
  .nav a {
    display: inline-block;
    padding: .5em 1em;
    color: #fff;
    border-radius: 3px;
    background: rgba(0,0,0,.5);
  }
  .nav a:not(:hover) {
    text-decoration: none;
  }

  
ul{
  list-style:none;  
  }
  
ul li{
/*  display:block;
  height:20px;    
  padding:5px;  
  border-top:1px solid rgba(255,255,255,.1);  */
  transition:all .5s;
  opacity:0;
}  

label:before{
  height:2px;
  width:20px;
  background:#333;
  display:inline-block;
  content:"";
  box-shadow:0px -5px 0px 0px  #333,
             0px -10px 0px 0px #333;
  margin-right:10px;
  transition:all .5s;
  position:relative;
  opacity:1;
}
label{
  display:block;  
  padding:10px;
  color:white;  
  cursor:pointer; 
  background-color:rgba(255, 165, 0, .7);
}
input[type="checkbox"]{
  visibility:hidden;
  position:absolute;
}
#collapse:checked ~ li{  
  margin-top:0;
  opacity:1;
}
#collapse:checked + label:before{
  position:relative;
  right:calc(-160px);
  opacity:0.5;
}  


  
.container {
  height: 100vh;
  overflow: hidden;
  overflow-y: auto;
  perspective: 3px;
  scroll-behavior: smooth;  
}

section {
  background-size: cover;
  color: white;
  background-color: var(--bg, --color-black);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-behavior: smooth;
}
section.image {
  background-position: center center;
  transform: translateZ(-1px) scale(1.5);
  /* Force the background image to fill the whole element. */
  background-size: cover;
  /* Keep the image from overlapping sibling elements. */
  z-index: -1;
  height: 100vh;
  scroll-behavior: smooth;
}
section.text {
  height: auto; /*65vh;*/
  color: black;
  background: white;
  line-height: 1.4;
  padding: 20px;
  scroll-behavior: smooth;
}
section.heading {
  z-index: -1;
  text-shadow: 3px 3px 8px black;
  text-align:center;
  transform: translateY(-30vh) translateZ(1px) scale(1.5);
}

.footer {
  position: relative;
  display: block;
  background-color: green;
  height: auto;/*100vh;*/
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.footer h3 {
  font-weight: normal;
  color: var(--color-blue);
}

.kontakt { max-width: 95%;}

#sp_form { max-width: 95%;}

/* @media screen and (min-width: 45em) {
   .nav {
      display: block;
    }
 }*/
 

</style>