/* barvičky: #010012 #fbf00e #222741 #222537 #364285 #77ff1d #101010*/
body{	
   background: url(img/pozadi.gif);
   background-attachment: fixed;
   background-repeat: repeat;
   background-size: cover;
   margin:0;
   font-family: Courier;
   min-width: fit-content;
   justify-content:center ;
   align-items:center;
   text-align:center;
   }
h1{
    font-size: 2.5rem;
     text-align: center;
   color: #77ff1d;
    margin: 10px;
    font-family: Courier;
   
}
h2{
     font-size: 3rem;
     text-align: center;
   color: #77ff1d;
    margin: 10px;
    font-family: Courier;

}
h4{
   color: #77ff1d;
   text-align: center;
   font-family: Courier;
}
p{
     padding: 10px;
   padding-left: 20px;
   padding-right: 20px;
     margin: 15px;
     font-family: Courier;
     font-size: 1rem;
   color: #77ff1d;
   text-align: justify;
   
}
a:link {
     color: lightgreen;
     background-color: transparent;
     text-decoration: none;
   }
   
   a:visited {
     color: lightgreen;
     background-color: transparent;
     text-decoration: none;
   }
   
   a:hover {
     color: yellow;
     background-color: transparent;
     text-decoration: underline;
   }
   
   a:active {
     color: yellowgreen;
     background-color: transparent;
     text-decoration: underline;
   }
.celyweb{
     max-width: 100%;
     margin: auto;
   text-align:center;
   align-items:center;
}
.hlavicka{
     position: relative;
   text-align:center;
   background-color:transparent;
   max-width:1920px;
   height:350px;
   margin:auto;
}
.obsah{

background: #101010;

}
.menu{
    min-height: 40px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-content: center;	
}
.menu a {
     color: #77ff1d;
     background: #222741;  
    text-align: center;
     text-decoration: none;
     font-size: 1.1rem;
     letter-spacing: 0.1rem;
     line-height: 40px;
     width: 33.33%;
     height: 40px;
}
.menu a:hover {
     background-color: #363a52;
     color: #77ff1d;
     transition: 0.5s linear 0s;
}
.menu a.active {
     background: #364285;
     color: #77ff1d;
}
.menu a.zpet {
     background: #222741;
     color: #77ff1d;
   width: 100%;
}
.oprojektu{
     width: 66.6%;
     margin: auto;
}
.paticka{
     background-color: #222741 ;
     color: #77ff1d;
     font-size: 1rem;
     overflow: hidden;
   text-align: center;
   margin-top: 2rem;
   float:center;

}
.osa{
     width: 100%;
     overflow:hidden;
     height:350px;
}
/*.vlevo{
     width: 45%;
     height: 350px;
     float: left;
}
.vpravo{
     width: 50%;
     height: 350px;
     float: right;
     border-left: 5px solid #faee0d ;
}*/
.left{
     position: relative;
     float: left;
     background: #101010;
     width: 45%;
     height: 350px;
}
.middle{
     position: relative;
     float: left;
     background: #101010;
     width: 10%;
     height: 350px;
}
.right{
     position: relative;
     float: right;
     background: #101010;
     width: 45%;
     height: 350px;

}
.line {
     position: absolute;
     left: 49%;
     top: 0;
     bottom: 0;
     width: 5px;
     background: #77ff1d;
     z-index: 1;
 }
 .wordwrapper {
     height: 12px;
     position: absolute;
     /*left: -55px;*/
     top: 50%;
     margin-top: -12px;
     z-index: 2;
     width: 5px;
 }
 .word {
     display: flex;
     justify-content: center;
     background: #101010;
     text-align: center;
     width: 5px;
     
 }
 
.mobile{
     display: none;
}
.osa2{
     width: 100%;
     height: auto;
     overflow:hidden;
     
}
.vlevo2{
     width: 45%;
     float: left;
     
}
.vpravo2{
     width: 50%;
     float: right;
}
.foto{
	transition: 0.25s;
	margin: 10px;
}
.foto:hover{
	transform:scale(1.25);
}
@media screen and (max-width: 1000px) {
     .menu a{width: 100%; border-bottom: 1px solid silver}
     .osa{display: none;}
     .osa2{display:none;}
     .oprojektu{width: 100%;}
     .hrat{display:none;}
     .mobile{display: block;}
}
     /*barvičky: #010012 #fbf00e #222741 #222537 #364285 */