/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext);
* {
  box-sizing: border-box;
}
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}


header {
    position: relative;
    
    background-color: rgba(255,255,255,0.7);
    text-align: center;
    margin: 5vw auto 0 auto;
    overflow: auto;
    width: 50%;
    padding-left: 3%;  
    padding-right: 3%; 
    
}
section {
    position: relative;
   
    background-color: rgba(255,255,255,0.7);
    padding-left: 3%;
    padding-right: 3%;
    text-align: left;
    width: 60%;
    margin: 5vw auto 0 auto;
    overflow: auto;
    
}
section p {
    text-align: justify;
}
section a {
    color: black;
    text-decoration: none;
    background-color: #999;
    display: inline-block;
    width: 80%;
    padding: 5px 20px;
    transition: background-color 1s, color 1s;
    
}
.cudliky {
    padding-left: 3%; 
    padding-right: 3%;
    width: 50%;
    min-width: 200px;
    }
.cudliky p {
    text-align: center;
}
section a:hover {
    background-color: black;
    color: white;
    
}
@media (max-width: 767px) {
  .fullscreen-bg {
    background: url('obrazky/intro_frame.jpg') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }
}
@media (max-width: 600px) {
  .fullscreen-bg {
    background: url('obrazky/intro_frame.jpg') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }
  header, section {
      width: 100%;
  }
}