/* CSS Document */

body {
    margin:0;
    font-family: 'Open Sans', sans-serif;
    color:black;
    background:white;}

h1 {color: #0072bb;}

h2 {
    margin-top:0;
    margin-bottom:0px;}
   
img {max-width:100%;}

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;} 

li {margin-left:0px;}

.header {
    width:100%;
    background: #f6f6f6;
    border-bottom: #0072bb solid 2px;}

.topnav {
    overflow: hidden;
    min-height:135px; 
    text-align: right;   
    background: #f6f6f6;
    }
                                
.topnav a {
    color: #0072bb;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 55px;
    padding-bottom: 53px;
    text-decoration: none;
    font-size: 125%;
    font-weight: bold;}
      
.topnav a:visited {color: #0072bb;}

.topnav a:hover {
    background-color:#0072bb;
    color: white;}

.topnav .icon {display: none;}

.menu_max {
    max-width:1350px;
    margin: 0px auto;}

.logo {  
    max-width:100%
    float:left;
    margin-left:40px;} 

.menu_align {margin-top:55px;}

.zahlavifoto {
   position: relative; 
   width: 100%;
   background-image: url("foto/uvod.jpg");
   background-size: cover;
   height:60vh;
   width:100%;}



.zahlavifoto_text {    
    margin-left: 3%;
    padding:1%;
    text-align:left;
    margin-top:5%;
    position:absolute;
    max-width:600px;
    background: rgba(0, 0, 0, 0.85);
    font-weight: bold;
    max-width:600px;}
    
 .zahlavifoto_text    h1 {color: #0072bb; font-size:280%; } 
 
  .zahlavifoto_text    h2 {color: #0072bb; font-size:187%;} 
 
    
.zahlavifoto_textm {display:none;}    

.centr {
    margin: 0px auto;
    text-align:left;}
        
.centr a {
    color:blue;
    text-decoration: none;
    font-size: 100%;}
  
.centr a:visited { color:blue;}

.centr a:hover {color:black;}            

.content { 
    max-width:800px;
    margin: 0 auto;
    color:black;
    font-size:110%;
    text-align:justify;
    padding:10px; }
    
.content_index { 
    max-width:800px;
    margin: 0 auto;
    color:black;
    font-size:110%;
    text-align:left;
    padding:10px; }    

.content_kontatky { 
    max-width:800px;
    margin: 0 auto;
    color:black;
    font-size:110%;
    text-align:justify;
    padding:10px;} 

.pozadi{ 
    background: white;
    float:left;
    width:100%;}  

.galery_min { 
    width:255px;
    margin:5px;  
    border-radius: 10px;
    height:auto;}

.galerie { text-align:center;}

.mapa {
    width:450px;
    max-width:100%;
    margin-top:30px;
    float:left;}

.kontakty {
    max-width:300px;
    float:left;
    padding-right:50px;}

.google-maps {
    position: relative;
    padding-bottom: 75%; 
    height: 0;
    overflow: hidden;}

.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;}
    
.foto_dilna img  {width:49.5%;}

.footer {
    background: rgba(0, 0, 0, 0.9);
    color:white;
    text-align:center;
    padding-top:20px;
    padding-bottom:20px;
    font-size:110%;
    width:100%;
    float:left;}

.footer a { 
    color:white;
    text-decoration: none;
    font-size: 100%;}
    
.footer a:visited {color:white;} 

.footer a:hover {color: #0072bb;}

.footer_obal { 
    max-width:800px;
    margin: 0 auto; }

.footer_levy { 
    width:255px;
    padding-left:10px;
    text-align:left;
    float:left;}
    
.footer_levy2 { 
    width:255px;
    padding-left:10px;
    text-align:left;
    float:left;}      

.max_vyska  {min-height: calc(100vh - 124px);}

.BT {
    font-size:80%;
    margin-top:85px;
    text-align:left;
    float:right;
    margin-right:200px;}
    
.toplist {

    margin-top:-75px;
    text-align:right;
    float:right;
    margin-right:15px;}    

.BT a {font-size:100%;}

.index_obr {
    width:300px;
    max-width:100%;
    margin-top:10px;
    float:left;}
    
.index_text {
    width:500px;
    max-width:100%;
    margin-top:10px;
    float:left;}    

@media screen and (min-width: 1400px) {.zahlavifoto {height:50vh;}} 

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

  .zahlavifoto {background-position: 30%;}
  .footer_levy {width:180px;}
  .footer_levy2 {width:180px;}
}
 
@media screen and (max-width: 1100px) { 

  .topnav {  
      min-height:0;
      min-width:90%;}
   
  .topnav a {
      display: none;
      padding:5px;}
  
  .topnav a.icon {
      margin-top:15px;
      display: inline;
      position:absolute;
      top: 0px;
      right:20px;
      padding:0;}

  .topnav.responsive a {
      display: block;
      text-align: center;
      font-size: 120%;  
      padding: 5px;}
  

  .menu_align {margin-top:0px;}  
  
    .zahlavifoto {background-position:70%; height:50vh;}
    
    .toplist {display:none;} 
    
    .BT {margin-right:30px;} 
 
}



@media screen and (max-width: 830px) { .content_kontatky { max-width:450px;}
                                       .content_index { max-width:450px;}
}

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

 
    
  .zahlavifoto_text {

      display:none;}
      
      .zahlavifoto_textm {  margin: 0 auto;
      padding:10px;
      max-width:670px;
    display:block;
      max-width:100%;
       background: white;}  
       
        .zahlavifoto_textm    h1 { font-size:150%; }  
        .zahlavifoto_textm    h2 { font-size:120%; }  
 
  .footer_levy {
      width:100%;
      text-align:center;
      padding:0;
      padding-bottom:15px;} 
        
  .footer_levy2 { display:none;} 
   
  .BT  { 
      width:100%;
      text-align:center;
      float:left;
      padding-right:0;
      margin-top:0;}
     
  .max_vyska  {min-height: calc(100vh - 180px);}     
      .zahlavifoto {background-position:75%; height:35vh;}
}


@media screen and (max-width: 850px) { .galery_min { width:195px; } }

@media screen and (max-width: 640px) { .galery_min { width:250px; } }

@media screen and (max-width: 560px) { .galery_min { width:170px; } }

@media screen and (max-width: 400px) { .galery_min { width:140px; } }

@media screen and (max-width: 340px) { .galery_min { width:250px; } }

@media screen and (max-width: 550px) { .foto_dilna img {width:100%; } }