*{box-sizing: border-box;}
    
  body {
    color: black;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 95%;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: 50% 220px;
    background-image: url("g/back1.png"); 
    @supports (background-image: url('g/back1.webp'))
    {background-image: url("g/back1.webp");}
     }
     
     

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) );
}
        
.tlacitko{
    
    color:black;
    height:30px;
    border-style: solid;
    border: 0px solid rgb(000,000,000);
    background-color: rgb(000,000,000,0.1);
    border-radius: 24px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 4px;
    text-decoration: none;
    
}

.tlacitko:hover{
    
    height:30px;
    border-style: solid;
    border: 0px solid rgb(000,000,000);
    border-radius: 24px;
    background-color: rgb(168,200,55,0.7);
    color: white;
    margin-left: auto;
    margin-right: auto;
    padding-top: 4px;
    text-decoration: none;
}

.animace{
    position:relative;
    background-position:50% 8px;
    width: auto;
    max-height: 894px ;
    min-height: 894px ;
    animation-name: animback;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    background-repeat: no-repeat;
}

@keyframes animback {
  0%   { background-image: url("g/back101.png");}
  7%  {background-image: url("g/back102.png"); }
  14%  {background-image: url("g/back103.png");}
  21%  {background-image: url("g/back104.png"); }
  28%  {background-image: url("g/back105.png"); }
  35%  {background-image: url("g/back106.png"); }
  42%  {background-image: url("g/back107.png"); }
  49%  {background-image: url("g/back108.png"); }
  56%  {background-image: url("g/back109.png"); }
  63% {background-image: url("g/back110.png"); }
  70% {background-image: url("g/back111.png"); }
  77% {background-image: url("g/back112.png"); }
  84% {background-image: url("g/back113.png");}
  }
  

.zelena {
    background: -webkit-linear-gradient(140deg, #A3C235 0%, #A0A0A0 20%, #A3C235 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 4px;
    padding-left:12px;
    padding-right:12px;
    font-size: 25px;
    
    border-style: solid;
    border: 0px solid rgb(000,000,000);
    border-radius: 24px;
    text-align-last: center;
    
}
.text{
    margin-top:4px;
    padding: 12px 12px 12px 12px;
    font-size: 20px;
    height:95%;
    text-align: center;
    background-color: rgba(255,255,255,0.8);
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 24px;
    
    
}
.textleva{
    display:inline-block;
    min-width:300px;
    min-height:375px;
    height:auto;
    width:33%;
    padding: 4px 4px 4px 4px;
    font-size: 20px;
    background-color: rgba(255,255,255,0.80);
    border-style: solid;
    border: 0px solid rgb(000,000,000);
    border-radius: 24px;
    text-align-last: center;
    color:black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    
    
}
.textleva:hover{
    display:inline-block;
    background-image: linear-gradient(135deg, rgba(67,115,177,0.1) 0%, rgba(30,83,149,0.9) 25%, rgba(255,255,255,0.2) 75%, rgba(255,255,255,0.1) 100%);
    border-style: solid;
    border: 0px solid rgb(000,000,000);
   
    
}

.textimg{
    position: absolute;
    font-size: 25px;
    color: rgba(255,255,255,0.0);
    font-weight: bold;
    text-align: right;
    padding-right:25px;
    padding-top:40px;
    animation-name: zobraz;
    animation-duration: 2s;
    animation-delay: 2s;
    
    animation-fill-mode: both;
    
    width:100%;
    border-radius: 8px;
    
}
@keyframes zobraz {
  from   {color: rgba(255,255,255,0.0);}
  to {color: rgba(255,255,255,0.5);}
  }

.container {
  position: relative;
  width: auto;
  height: 25%;
}

.ico{
    padding-right: 10px;
    height:auto;
    width: 35px;
    
}

.overlay {
  position: absolute;
  top: 0%;
  background-color: rgba(255,255,255,0.8);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: 0.5s ease;
}

.container:hover .overlay {
  top: 0;
  height: auto;
  border: 1px solid rgb(000,000,000);
  border-radius: 8px;
}

.textC {
  padding: 4px; 
  color: black;
  font-size: 14px;
  width: 100%;
  height: auto;
  
}

.imgbox{
      height:auto;
      width:49%;
      padding:4px 4px ;
      background-color: rgba(255,255,255,0.0);
      display: inline;
      margin-left: auto;
      margin-right: auto;
      border-radius:40px;
      object-fit: contain;
      
}

.imgbox1{
      display: inline;
      margin-left: auto;
      margin-right: auto;
      height:auto;
      width:49%;
      max-width:250px;
      background-color: rgba(255,255,255,0.0);
      border-radius:8px;
      object-fit: contain;
      
}

.imgbox:hover{
      border-radius:40px;
      opacity:1;
}


        
  h1 { 
       font-size: 22px ;
       padding-left: 12px;
       color: black;
       padding: 4px 4px 4px 4px;
         background-color: rgba(255,255,255,0.80);
        border-style: solid;
        border: 0px solid rgb(000,000,000);
         border-radius: 24px;
             }
        
.n
{
    font-size: 22px;
    text-shadow: 0 0 3px #A3C235, 0 0 5px white;
    color: #A3C235; 
    } 

text:hover { 
        font-size: 18px ;
        padding: 4px;
        background-color: rgba(255,255,255,0.7);
        border-style: solid;
        border: 1px solid rgb(000,000,000);
        border-radius: 8px;
       }        
       
.kont {
       padding: 4px;
    font-size: 20px;
    background-color: rgba(255,255,255,1);
    border-style: solid;
    border: 0px solid rgb(000,000,000);
    border-radius: 40px;
    text-align-last: center;
      }   

          

a:link {
      font-size: 20px ;
      color: rgb(0,153,255); 
      
      }

a {
      font-size: 20px ;
      color: rgb(0,0,0); 
      
      }
      
a:visited {
      color: rgb(0,153,255);
}

a:hover {
        color:  #A8C837;
}

.logo {
      height:auto; 
      width: 125px;
      float: left;
      top:0px;
        background-image: linear-gradient(to right, white 10%, rgba(255,255,255,0.5), rgba(0,0,0,0.5), rgba(0,0,0,0.0));
}

.loga {
      max-width:125px;
      width: 125px;
      height:auto;
      padding-left:15px;
      padding-top:15px;
}

.ic { 
      overflow: hidden;
      position:relative;
      height:72px; 
      width: 100px;
      float: right;
      right:0px;
      top:60px;
      
      animation-name: anim1;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: inherit;
    animation-fill-mode: both;
    animation-direction: alternate-reverse;
    background-size: 100px 72px;
   
           
}


@keyframes anim1 {
  from   {background-image: url("g/ic3b.png");}
  to {background-image: url("g/ic3bz.png");}
  }


.ic1 { 
      overflow: hidden;
      position:relative;
      height:auto; 
      width: 70px;
      float: right;
      right:150px;
      top:60px;
      opacity:1;
           
}

.ic2 { 
      overflow: hidden;
      position:relative;
      height:auto; 
      width: 65px;
      float: right;
      right:300px;
      top:65px;
      opacity:1;
           
}

.ic3 { 
      overflow: hidden;
      position:relative;
      height:auto; 
      width: 65px;
      float: right;
      right:450px;
      top:65px;
      opacity:1;
           
}

.ic4 { 
      overflow: hidden;
      position:relative;
      height:auto; 
      width: 200px;
      float: right;
      right:0px;
      top:100px;
      opacity:1;
           
}

.ic5 { 
      overflow: hidden;
      position:relative;
      height:auto; 
      width: 90px;
      float: right;
      right:0px;
      top:41px;
      opacity:1;
           
}

.ic6 { 
      overflow: hidden;
      position:relative;
      height:auto; 
      width: 350px;
      float: right;
      right:0px;
      top:90px;
      opacity:1;
           
}


.nadpis {
      overflow: hidden;
      height: 125px;
      width: auto;
      
      animation-name: pohy;
      animation-duration: 240s;
      animation-delay: 1s;
      animation-iteration-count: infinite;
      box-shadow:  0 10px 8px 0 rgba(0, 0, 0, 0.2) inset;
      border-bottom: 0px solid white; 
      border: 0px solid rgb(000,000,000);
      border-radius: 18px;
      position: sticky;
      background-repeat:repeat-x;
      background-position: right;
      background-color: #103764;
      background-image: url("g/n2.png"); 
      @supports (background-image: url('g/n2.webp'))
    {background-image: url("g/n2.webp");}     
}

.tt a
{
    display: flex;
    position: fixed;
    right: 0%;
    bottom: 0%;
    font-size: 18px ;
    float: right;
    display: block;
    color: rgb(100,100,100);
    font-weight: bold   ;
    font-size:26px;
    text-decoration: none;
}

.tt a:hover
{
color:#A8C837;
}


         
@keyframes pohyb {
  0%   {background-position:right;}
  5%  {background-position:left ; }
  10%  {background-position:left ; }
  15%  {background-position:right; }
  20%  {background-position:left ; }
  25%  {background-position:top; }
  28%  {background-position:top; }
  31%  {background-position:bottom ; }
  35%  {background-position:left ; }
  45% {background-position:right; }
  55% {background-position:left; }
  60% {background-position:top;
        background-image: url("g/n.jpg") }
  65% {background-position:left; }
  70% {background-position:bottom; }
  75% {background-position:right; }
  80% {background-position:top; }
  85% {background-position:left; }
  90% {background-position:right; }
  95% {background-position:top; }
  100%{background-position:right;
        background-image: url("g/n2.png")
         }}

.topnav {
    max-width:100%;
    min-width: 300px;
    overflow: hidden;
    border-bottom: 0px solid black; 
    position: sticky;
       
}


.topnav a {
    font-size: 22px ;
    background-color: rgba(255,255,255,0.3);
    float: left;
    display: block;
    
    color: black;
    text-align: left;
    padding: 5px 10px;
    font-weight: bold   ;
    text-decoration: none;
    min-width: 100px;
    min-height: 30px;
    max-width: 350px;
    max-height: 40px;
}

.topnav a img {
    padding: 0px 5px;
    min-width: 21px;
    min-height: 21px;
    max-width: 40px;
    max-height: 27px;
}


.topnav a:hover {
    background-color: rgba(255,255,255,0.7);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    font-size: 22px;
    color: #A8C837;
}

         
.kont a {
      font-size: 22px ;
      text-align: center;
      color: rgb(100,100,100);
      animation-name: blik;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      }   
  
  @keyframes blik {
  0%   {color: rgb(100,100,100);}
  50%  {color:  #A8C837 ; }
  100%   {color: rgb(100,100,100)}
  }


.nadpis a:hover {
    background-color: rgba(255,255,255,0.0); 
    color: rgba(255,255,255,0.0); ; 
    }

    
.nadpisodkaz a {
    font-size: 18px ;
    color: rgb(255,255,255);
    }
    

      
  .column {
  
    float: left;
    width: 33.33%;
    border-radius: 24px;
    padding-left: 8px;
    font-size: 14px ;
        }
         
  .column66 {
  
    float: left;
    width: 66.66%;
    border-radius: 24px;
    padding-left: 8px;
    font-size: 14px ;
        }

   .columnx {
    float: left;
    width: 45%;
    padding-left: 8px;
    font-size: 14px ;
        }

  .column66x {
  
    float: left;
    width: 55%;
    font-size: 14px ;
        }
        
    .column100x {
  
    float: left;
    height:auto;
    width: 100%;
    min-width: 250px;
    padding: 8px;
    font-size: 14px ;
    color:black;
        }
        
.row:after {
    content: "";
    display: table;
    clear: both;
        }
        
input[type=text], select {
  width: 100%; /* Full width */
  padding: 4px; /* Some padding */ 
  border: 1px solid #000; /* Gray border */
  border-radius: 8px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  font-size:16px;
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}  

input[type=textbox], textarea {
  width: 100%; /* Full width */
  height:150px;
  padding: 4px; /* Some padding */ 
  border: 1px solid #000; /* Gray border */
  border-radius: 8px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  font-size:16px;
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}            

input[type=submit] {
  background-color:  white;
  color: rgb(0,0,0);
  padding: 10px 18px;
  border: 1px solid  rgb(0,0,0);
  border-radius: 8px;
  font-size:16px;
  cursor: pointer;
  width: 100%;
                    }

input[type=submit]:hover {
  background-color: #A8C837;
  color: white;
 
}
.fve
    {
    color:black;
    }
.logonazev
    {
    display:none;
    }

#face
    {
    float:right;
    }
    


@media (max-width:770px)
        {
    body{
      width: 95%;
      }
    .topnav {
      
    }
    .columnx {
        width: 100%;
    }
    .column66x {
        width: 100%;
    }
    .column {
        width: 100%;
    }
    .column66 {
        width: 100%;
    }
    }
    
@media (max-width:770px)
        {
         .imgbox {
        height:auto;
        width:95%;
        }
        .ic2 {
        visibility: hidden;}
        .ic1 {
        visibility: hidden;}
        }    

@media (max-width:1205px)
        {
         .imgbox {
        height:auto;
        width:95%;
        }
        .ic3 {
        visibility: hidden;}
        .textleva{
    margin: auto;
   
    min-width:300px;
    min-height:375px;
    
    width:100%;
    color:black;
    text-align-last: center;
    } 
        }
        
@media (max-width:1080px)
        {
         .imgbox {
        height:auto;
        width:95%;
        }
        .textleva{
    margin: auto;
  
    min-width:300px;
    min-height:375px;
    height:auto;
    width:100%;
    color:black;
    text-align-last: center;
    } 
        .ic3 {
        visibility: hidden;}
        }

 @media (max-width:500px)
        {    
    
        .logonazev
    {
    margin: auto;
    display:block;
    height: 100px;
    width: 365px;
    background-repeat: no-repeat;
    background-image: url("g/logonazev.png");
     @supports (background-image: url('g/logonazev.svg'))
    {background-image: url("g/logonazev.svg");}
    
    }
    
    .textleva{
    margin: auto;
    min-width:300px;
    min-height:375px;
    height:390px;
    width:100%;
    color:black;
    text-align-last: center;
    } 
         .topnav {
      margin: auto;
      float: none;
    }      
        .topnav a img{
        height:30px;
        float: none;      
    }  
    #face {
        display:none;
        
    }  
        .topnav a{
        min-width: 300px;
        max-width: 500px;  
        margin: auto;
        float: none;
        
        }
         .nadpis {
       
        
        height: 0px;
        }
        hr {
        
        
        }
         .imgbox {
        height:auto;
        width:100%;
        }
         .ic {
        visibility: hidden;}
        .tt {
       
        }
        
 @media (max-width:300px)        
        {
        .ic {
        visibility: hidden;}
        
       
        }
 @media (max-width:300px)        
        {
        .tt {
        visibility: hidden;}
        
       
        }