body, html{
    height: 100%;
    margin: 0;



}

.bg{
    background-image: url(obraz/more1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height:50%;
}
.heslo{
    padding-top:6%;
    padding-left:55%;
    color: #618685;
    font-weight: 700;
}

/*navigace*/
.topnav {
    overflow: hidden;
    background-color:#80ced6;
    opacity: 0.6;
  }
  
  .topnav a {
    float: left;
    display: block;
    color:#36486b;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #fefbd8;
    color: #36486b;
    
  }
  
  .topnav a.active {
    background-color:#fefbd8;
    color: #36486b;
  }
  
  .topnav .icon {
    display: none;
  }
  
.karty h2{
    text-align: center;
    color: #36486b;
}
.karty{
    padding-top:20px;
    border-radius: 0%;
   
    
}
.card{
  border-radius: 0%;
  border: none;
}
.card-body{
    background-color: #80ced6;
    color:#36486b;
    font-size: larger;
}
.rezervace{   
    color:#36486b;
    margin-top:1%;
    padding-top:2%;  
    background-color: #fefbd8; 
  padding-right: 2%;
}

.rez{   
    background-color:#fefbd8;
    color: #36486b;
  
}
.cena{ 
  color: #36486b;
  padding-left:20%;
  text-align: center;

}

.btnR{
    color:#fefbd8;
    background-color:#80ced6;
    margin-top: 10%;
    margin-left:15%;
    font-size: 30px;
    border-radius:5%;
}
.btnG{
    color:#80ced6;
    background-color:#fefbd8;
    margin-top: 22%;
    margin-left:10%;
    font-size: 30px;
    border-radius: 2%;
}

.boxk{
    background-color: #80ced6;
    color:#36486b;
    margin-top:20px;
    font-size: larger;
}
.mapa{
    padding:7px;
}


  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }
  @media (max-width:768px) {
    .col-s-4 {width: 25%;}
    .col-s-6 {width: 50%;}
    .col-s-12 {width: 100%}
    .h2 h3 {text-align:center}
    .card-title {text-align: center}
   .rez{}
   .cena{padding-left: 0%;}
   .rezervace{text-align:center;}
    .btnG{margin:1%; margin-left:15%;}
    .btnR {margin-left:0%; margin-bottom:1%;}
    footer{text-align: center;} 
    
    
    
} 

@media (max-width:420px) {
        .col-s-6 {width:100%}
        .col-s-12 {width: 100%}
        .karta {text-align:center}
        .mapatext{text-align:center}
        .card-title {text-align: center}    
         
            
} 

 @media (min-width:768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    }