@font-face {
    font-family: Myriad; /* deklarace fontu */
    src: url("font/MyriadPro-Regular.otf"); /* propojení na umístění souboru */
}
@font-face {
    font-family: Myriaditalic; /* deklarace fontu */
    src: url("font/MyriadPro-It.otf"); /* propojení na umístění souboru */
}

@font-face {
    font-family: MyriadPro-BoldIt; /* deklarace fontu */
    src: url("font/MyriadPro-BoldIt.otf"); /* propojení na umístění souboru */
}

@font-face {
    font-family: Subpear; /* deklarace fontu */
    src: url("font/subpear.TTF"); /* propojení na umístění souboru */
}

@font-face {
    font-family: 'opensans-regular';
    src: url('font/OpenSans-Regular.ttf');
}

@media (max-width: 1950px) and (min-width: 781px){
     img{
        max-width: 100%;
        height: auto;
     }
        
        body{
        margin: 0px;
        padding: 0px;
        font-size: 0.9vw;
        font-family: Myriad;
    }
	
	#vetsi {
	font-size: 1.2vw;
	}
    
    a {
        color: #575756;
        text-decoration: none;
    }
    
    .hlavicka {
        margin: auto;
        width: 80%;
        height: 10vw;
        background-color: #fff;
    }
   
    .logo {
        text-align: center;
        width: 10%;
        height: 8.5vw;
        padding: 1vw 1% 0.5vw 1%;
        float: left;
    }
    
    .kontakt {
        float: left;
        width: 85%;
        height: 3vw;
        font-family: Myriaditalic;
        font-size: 2vw;
        color: #575756;
        margin-top: 1.5vw;
        text-align: right;
    }
    
    .kontakt img{
        width: 2.2vw;
    }
    
      
    .menu {
       margin-top: 1.5vw;
       margin-right: 1.5vw;
       float: right;
       width: 85%;
    }

     /* Add a black background color to the top navigation */
.topnav {
    float: right;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #76b729;
  text-align: center;
  margin: 0.2vw;
  padding: 0.3vw 1vw 0.1vw 1vw;
  text-decoration: none;
  font-size: 1.4vw; 
  font-family: Myriad;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #76b729;
  color: white;
  border-radius: 0.3vw;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 

.pozadi2 {
    width: 100%;
    height: 16vw;
    overflow: hidden;
    background-image:url("img/pas-s-fotkami.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
}
 .stred {
         overflow: auto;
            margin: 0 auto 0 auto;
            width: 80%;
            min-height: 500px;
            
    }
    
    .levastrana {
        float: left;
        width: 75%;
        padding-top: 2vw;
    }
    
    .levastrana p {
        margin: 0.5vw 5vw 0 2vw;
        color: #575756;
        text-align: justify;
        font-size: 1.2vw;
        line-height: 2vw;
    }
    
    ul {
       color: #575756;
        font-size: 1.2vw;
        line-height: 2vw; 
    }
    
    strong {
        color: #000;
    }
    
    #cena {
        color: red;
    }
    
    .levastrana img {
        padding: 1vw;
    }
    
    .levastrana a{
        color: #76b729;
        text-decoration-line: underline;
    }
    
    .pravastrana {
        float: left;
        width: 25%;
        text-align: center;
    }
    
    .pravastrana p {
        color: #575756;
        text-align: center;
        font-size: 1.2vw;
        line-height: 2vw;
    }
    
    h2 {
        color: #76b729;
        font-size: 2vw;
        font-weight: normal; 
    }
    
    h3 {
        color: red;
        font-size: 1.5vw;
    }
	
	h4 {
        font-size: 1.5vw;
    }
	
	
        
      h1 {
          margin-left: 11%;
          margin-top: 10vw;
          font-size: 5vw;
          color: #fff;
          text-shadow: 0 0 3px #000, 0 0 20px #000;
        }
         .spodek {
            margin-top: 3vw;
            width: 100%;
            height: 5vw;
        }
        
        .linka {
            background-color: #badb94;
            width: 100%;
            height: 0.25vw;
        }
        
        .spodek-text{
            margin: auto;
            width: 80%;
            font-size: 1.7vw;
            color: #4CAF50;
            font-family: MyriadPro-BoldIt;
        }
        
        .spodek-icon {
            float: left;
            width: 7%;
            height: 5vw;
        }
        
        .spodek-napisy {
            float: left;
            width: 22%;
            height: 5vw;
            margin-top: 1vw;
            margin-left: 3%;
        }
        
        .foto {
            float: left;
            width: 10vw;
            height: 12vw;
            text-align: center;
            padding: 0.5vw;
            padding-bottom: 1vw;
        }
        
        .foto img {
            padding: 0vw;
            margin-bottom: 0.5vw;
        }
}  

@media (max-width: 3000px) and (min-width: 1951px){
         img{
        max-width: 100%;
        height: auto;
     }
        
        body{
        margin: 0px;
        padding: 0px;
        font-size: 0.9vw;
        font-family: Myriad;
    }
	
	#vetsi {
	font-size: 1.2vw;
	}
    
    a {
        color: #575756;
        text-decoration: none;
    }
    
    .hlavicka {
        margin: auto;
        width: 80%;
        height: 10vw;
        background-color: #fff;
    }
   
    .logo {
        text-align: center;
        width: 10%;
        height: 8.5vw;
        padding: 1vw 1% 0.5vw 1%;
        float: left;
    }
    
    .kontakt {
        float: left;
        width: 85%;
        height: 3vw;
        font-family: Myriaditalic;
        font-size: 2vw;
        color: #575756;
        margin-top: 1.5vw;
        text-align: right;
    }
    
    .kontakt img{
        width: 2.2vw;
    }
    
      
    .menu {
       margin-top: 1.5vw;
       margin-right: 1.5vw;
       float: right;
       width: 85%;
    }

     /* Add a black background color to the top navigation */
.topnav {
    float: right;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #76b729;
  text-align: center;
  margin: 0.2vw;
  padding: 0.3vw 1vw 0.1vw 1vw;
  text-decoration: none;
  font-size: 1.4vw; 
  font-family: Myriad;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #76b729;
  color: white;
  border-radius: 0.3vw;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 

.pozadi2 {
    width: 100%;
    height: 16vw;
    overflow: hidden;
    background-image:url("img/pas-s-fotkami.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
}
 .stred {
         overflow: auto;
            margin: 0 auto 0 auto;
            width: 80%;
            min-height: 500px;
            
    }
    
    .levastrana {
        float: left;
        width: 75%;
        padding-top: 2vw;
    }
    
    .levastrana p {
        margin: 0.5vw 5vw 0 2vw;
        color: #575756;
        text-align: justify;
        font-size: 1.2vw;
        line-height: 2vw;
    }
    
    ul {
       color: #575756;
        font-size: 1.2vw;
        line-height: 2vw; 
    }
    
    strong {
        color: #000;
    }
    
    #cena {
        color: red;
    }
    
    .levastrana img {
        padding: 1vw;
    }
    
    .levastrana a{
        color: #76b729;
        text-decoration-line: underline;
    }
    
    .pravastrana {
        float: left;
        width: 25%;
        text-align: center;
    }
    
    .pravastrana p {
        color: #575756;
        text-align: center;
        font-size: 1.2vw;
        line-height: 2vw;
    }
    
    h2 {
        color: #76b729;
        font-size: 2vw;
        font-weight: normal; 
    }
    
    h3 {
        color: red;
        font-size: 1.5vw;
    }
	
	h4 {
		  font-size: 1.5vw;
    }
        
      h1 {
          margin-left: 11%;
          margin-top: 10vw;
          font-size: 5vw;
          color: #fff;
          text-shadow: 0 0 3px #000, 0 0 20px #000;
        }
         .spodek {
            margin-top: 3vw;
            width: 100%;
            height: 5vw;
        }
        
        .linka {
            background-color: #badb94;
            width: 100%;
            height: 0.25vw;
        }
        
        .spodek-text{
            margin: auto;
            width: 80%;
            font-size: 1.7vw;
            color: #4CAF50;
            font-family: MyriadPro-BoldIt;
        }
        
        .spodek-icon {
            float: left;
            width: 7%;
            height: 5vw;
        }
        
        .spodek-napisy {
            float: left;
            width: 22%;
            height: 5vw;
            margin-top: 1vw;
            margin-left: 3%;
        }
        
        .foto {
            float: left;
            width: 10vw;
            height: 12vw;
            text-align: center;
            padding: 0.5vw;
            padding-bottom: 1vw;
        }
        
        .foto img {
            padding: 0vw;
            margin-bottom: 0.5vw;
        }
        
}





@media (max-width: 780px) and (min-width: 320px){
        img{
        max-width: 100%;
        height: auto;
     }
        
        body{
        margin: 0px;
        padding: 0px;
        font-size: 2vw;
        font-family: Myriad;
    }
	
	#vetsi {
	font-size: 2.5vw;
	}
    
    a {
        color: #575756;
        text-decoration: none;
    }
    
    .hlavicka {
        margin: auto;
        width: 100%;
        height: 10vw;
        background-color: #fff;
    }
   
    .logo {
        text-align: center;
        width: 20%;
        height: 20vw;
        padding: 1vw 1% 0.5vw 5%;
        overflow: hidden;
        float: left;
    }
    
    .kontakt {
        float: left;
        margin-left: 10%;
        width: 64%;
        height: 10vw;
        font-family: Myriaditalic;
        font-size: 3.5vw;
        color: #575756;
        margin-top: 2vw;
    }
    
    .kontakt img{
        width: 4vw;
    }
    
      
    .menu {
       margin-left: 9%;
       margin-top: 2vw;
       margin-right: 1.5vw;
       float: left;
       width: 54%;
    }

     /* Add a black background color to the top navigation */
.topnav {
    float: right;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #76b729;
  text-align: center;
  margin: 0.2vw;
  padding: 0.3vw 1vw 0.1vw 1vw;
  text-decoration: none;
  font-size: 3.5vw; 
  font-family: Myriad;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #76b729;
  color: white;
  border-radius: 0.3vw;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 

.pozadi2 {
    width: 100%;
    height: 26vw;
    overflow: hidden;
    background-image:url("img/pas-s-fotkami.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
}
 .stred {
         overflow: auto;
            margin: 0 auto 0 auto;
            width: 90%;
            min-height: 40vw;
            
    }
    
    .levastrana {
        float: left;
        width: 75%;
        padding-top: 2vw;
    }
    
    .levastrana p {
        margin: 0.5vw 5vw 0 2vw;
        color: #575756;
        text-align: justify;
        font-size: 2vw;
        line-height: 3vw;
    }
    
    ul {
       color: #575756;
        font-size: 2vw;
        line-height: 3vw; 
    }
    
    strong {
        color: #000;
    }
    
    #cena {
        color: red;
    }
    
    .levastrana img {
        padding: 1vw;
        width: 60vw;
    }
    
    .levastrana a{
        color: #76b729;
        text-decoration-line: underline;
    }
    
    .pravastrana {
        float: left;
        width: 23%;
        text-align: center;
    }
    
    .pravastrana p {
        color: #575756;
        text-align: center;
        font-size: 2vw;
        line-height: 3vw;
    }
    
    h2 {
        color: #76b729;
        font-size: 4vw;
        font-weight: normal; 
    }
    
    h3 {
        color: red;
        font-size: 3vw;
    }
	h4 {
        font-size: 3vw;
    }
        
      h1 {
          margin-left: 5%;
          margin-top: 16vw;
          font-size: 7vw;
          color: #fff;
          text-shadow: 0 0 3px #000, 0 0 20px #000;
        }
         .spodek {
            margin-top: 3vw;
            width: 100%;
            height: 5vw;
        }
        
        .linka {
            background-color: #badb94;
            width: 100%;
            height: 0.25vw;
        }
        
        .spodek-text{
            margin: auto;
            width: 90%;
            font-size: 2vw;
            color: #4CAF50;
            font-family: MyriadPro-BoldIt;
        }
        
        .spodek-icon {
            float: left;
            width: 7%;
            height: 5vw;
        }
        
        .spodek-napisy {
            float: left;
            width: 22%;
            height: 5vw;
            margin-top: 1vw;
            margin-left: 3%;
        }
        
        .foto {
            float: left;
            width: 20vw;
            height: 24vw;
            text-align: center;
            padding: 0.5vw;
            padding-bottom: 5vw;
        }
        
        .foto img {
            width: 20vw;
            padding: 0vw;
            margin-bottom: 0.5vw;
        }

}


.clear {
    clear: both;
}