*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

#mezera{
    
    height: 30px;
}

.fullscreen {
   
   /* border: 3px solid white;
    border-radius: 5px;*/
    z-index: 1000;
}


#pod{
    display: none;
    justify-content: center;
    margin: 20px;

}

#nadpis{
    max-width: 1000px;
    text-align: center;
    margin: 10px;
    padding: 10px;
    font-size: x-large;
}

.obrazky{
    display: flex;
    justify-content: space-around;
    max-width: 1000px;
    background-position-x: center;
    margin-top: 10px;
    margin-bottom:20px;



}

#prvni{
    background-image: url('loga/clanky/Golis_balon_2.jpg');
    background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;



}

#druhy{
    background-image:  url('loga/clanky/socializace.jfif');
    background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;


}
#treti{
    background-image:  url('loga/clanky/poslusni_psi.jfif');
    background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;
}

.obsah{
    max-width: 1000px;
}

nav{
    height: 80px;
    background: rgba(76, 168, 79, 0.753);
}

nav img{
    width: 50px;
    position: absolute;
    top: 10px;
    left: 8%;
}

nav ul{
    float:right;
    margin-right:25px ;
}

nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 15px;
}

nav ul li a{
    position: relative;
    color: white;
    font-size: 18px;
    padding: 5px 0 ;
    text-transform: uppercase;
}

nav ul li a:before{
   position: absolute;
   content:'' ; 
   left: 0;
   bottom: 0;
   height: 3px;
   width: 100%;
   background: white;
   transform: scaleX(0);
   transform-origin: right;
   transition: transform.4s linear;

}

nav ul li a:hover:before{
    transform: scaleX(1);
    transform-origin: left;

}

label #btn,
label #cancel{
    color: white;  
    font-size: 30px;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
    }



#check{
    display: none;
}

@media (max-width:1118px) {
    nav img{
        left:3%;
    }

}

@media (max-width:944px) {
    nav img{
        left:1%;
        top: 10px;
        width: 50px;
    }
    nav ul li a{
        font-size:17px ;
    }
    
}

@media (max-width:860px) {
    label #btn{
        display:block ;    
    }

    .obrazky{
        display: flex;
        justify-content: space-around;
        max-height: 150px;
        margin-top: 5px;
        margin-bottom:30px;
        }

        #prvni{
            max-width: 150px;
            max-height: 150px;
        }
    
        #druhy{
            display: none;
        }
    
        #treti{
            max-width: 150px;
            max-height: 150px;
        }
    
        #prvni_d{
            max-width: 150px;
            max-height: 150px;
        }
    
        #druhy_d{
            display: none;
        }
    
        #treti_d{
            max-width: 150px;
            max-height: 150px;
        }
        #prvni_k{
            max-width: 150px;
            max-height: 150px;
        }
    
        #druhy_k{
            display: none;
        }
    
        #treti_k{
            max-width: 150px;
            max-height: 150px;
        }

        #prvni_p{
            max-width: 150px;
            max-height: 150px;
        }
    
        #druhy_p{
            display: none;
        }
    
        #treti_p{
            max-width: 150px;
            max-height: 150px;
        }

        #prvni_g{
            max-width: 150px;
            max-height: 150px;
        }
    
        #druhy_g{
            display: none;
        }
    
        #treti_g{
            max-width: 150px;
            max-height: 150px;
        }

   

    #nadpis{
        font-size:large;
    }

    ul{
      position: fixed;
      width:100%;
      height: 100vh;
      background: rgba(137, 155, 138, 0.939); 
      top:80px;
      left: -100%;
      text-align: center;
      transition:all .5s;

    }

    nav ul li{
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }

    nav ul li a{
        font-size:20px ;
       
    }
    #check:checked ~ ul{
        left: 0;

    }
    #check:checked ~ label #btn{
        display: none;

    }

    #check:checked ~ label #cancel{
        display: block;

    }

    



}


    #prvni_k{
        background-image: url('loga/clanky/skola3.jfif');
        background-position: center;
        background-size: 100%;
        height: 200px;
        width: 200px; 
        border-radius: 20%;
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
        margin-left: 5px;
        margin-right: 5px;
        min-width: 150px;
        min-height:150px;
       
        
        
    }
    
    #druhy_k{
        background-image:  url('loga/clanky/skola5.jfif');
        background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;
        
    }
    #treti_k{
        background-image:  url('loga/clanky/skola4.jfif');
        background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;
   
}

#prvni_p{
    background-image: url('loga/clanky/rtwsmile.jfif');
    background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;
   

}

#druhy_p{
    background-image:  url('loga/clanky/zavody.jfif');
    background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;
    
}
#treti_p{
    background-image:  url('loga/clanky/rtw&dobr.jfif');
    background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;
}


#prvni_g{
    background-image: url('loga/clanky/obranarsky_1.jfif');
    background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;

}

#druhy_g{
    background-image:  url('loga/clanky/socializovany_1.jfif');
    background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;
    
    
}
#treti_g{
    background-image:  url('loga/clanky/tancici_psi.jfif');
    background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;

}

#prvni_d{
    background-image: url('loga/clanky/stopari_3.jfif');
    background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;

}

#druhy_d{
    background-image:  url('loga/clanky/socializovany_2.jfif');
    background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;
    
    
}
#treti_d{
    background-image:  url('loga/clanky/youtube_pes.jfif');
    background-position: center;
    background-size: 100%;
    height: 200px;
    width: 200px; 
    border-radius: 20%;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.362);
    margin-left: 5px;
    margin-right: 5px;
    min-width: 150px;
    min-height:150px;

}








#loga{
    max-width: 900px;
}
footer{
    background-color: rgba(76, 168, 79, 0.753);
    color: white; 
    padding: 20px; 
    text-align: right; 
    display:flex;
}

#adresa{
    text-align: center;
    
    
}

aside {
    flex: 1; 
    background-color: rgba(6, 238, 76, 0.112);
    padding: 20px;
    margin: 10px;
    border-radius: 5%;
    min-width: 200px;
    max-width: 300px;
}

section {
    flex: 3; 
    background-color: rgba(45, 68, 45, 0.04);
    padding: 10px;
    margin: 10px;
    border-radius: 5%;
    min-width: 250px;
    max-width: 500px;
    
}

main {
    display: flex; 
}

@media (max-width: 768px) {
    aside {
        display:none;
    }
    #pod{
        display: block;
        background-color: rgba(6, 238, 76, 0.112);
        padding: 20px;
        margin: 10px;
        border-radius: 5%;
        min-width: 200px;
        max-width: 800px;
        justify-content: center;
        
        
    }


    }

    .obsah{
        justify-content: center;
    }

   
#loga{
    text-align: left;
    position: relative;
    padding: 20px ;
    margin: 20px;
    bottom: 0;
    left: 0;
    
    background-color: rgba(128, 128, 128, 0.135);
    border-radius: 20px;

}

main{
    margin-left: 20px;
    margin-right: 20px;
  }

#logo3{
    width: 50px;
    margin: 10px;
    text-decoration: none;
}

#logo3:hover{
    width: 50px;
    margin: 10px;
    text-decoration: none;
    transform: scale(1.1);
}

#logo2{
    width: 80px;
    margin: 10px;
    text-decoration: none;
}

#logo2:hover{
    width: 80px;
    margin: 10px;
    text-decoration: none;
    transform: scale(1.1);
}

#logo1{
    width: 80px;
    margin: 10px;
    text-decoration: none;
}

#logo1:hover{
    width: 80px;
    margin: 10px;
    text-decoration: none;
    transform: scale(1.1);
}

#konec{
    background:rgba(76, 168, 79, 0.753);
    padding: 20px;
    
    border: 5px solid white;
    text-align: right;
    
}
#logo_F{
    height: 50px;
    padding: 0px;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgb(126, 126, 162);
}
#logo_F:hover{
    height: 50px;
    padding: 0px;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgb(3, 3, 3);
    transform: scale(1.1);
}

.dokumenty {
    background-color: rgba(6, 238, 76, 0.112);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: left;
    margin: 10px;
}

h1 {
    margin-bottom: 20px;
}

#odkazy {
    list-style-type: none;
    padding: 30px;
    margin: 20px;
}

#odkazy li {
    margin: 10px 0;
}

#odkazy li a {
    text-decoration: none;
    color: #050829;
    font-size: 16px;

}

#odkazy li a:hover {
    text-decoration: none;
    color: rgb(91, 91, 192);
    
    
}