div.text{
      border: 1px solid red;
      width: 200px;
      height: 100px;
      clear: left;
      overflow: hidden;
}

#kontejner{                           /*kontejner pro fotografie*/
        background-color: #EF9999;
        width: 80%;
        aspect-ratio: 4/3;    
        margin-left: auto;
        margin-right: auto;
        top: 30px; 
        position: relative;
        border: 2px solid black;
        display: flex;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
    //    overflow: hidden;
}

@media screen and (min-width: 700px) {   /*od šířky 700px zákaz scrolování*/
 #kontejner{
        overflow: hidden;
    }
 }

.obr{
    //    width: 100%;
        flex: 1;
        aspect-ratio: 4/3;
        scroll-snap-align: start;
    //    position: relative;
}


@media screen and (max-width: 700px) {   /*do šířky 700px jiný poměr obrázku*/
 #kontejner{
        aspect-ratio: 4/3.1; 
    }
 }



#popis{                              /*kontejner pro pořadí a popisek obrázků*/ 
    //   background-color: black;
       border: 0px solid #050505;
       font-size: 0.9rem;
       width: 80%;
    //   aspect-ratio: 20/2.35;
    //   height: 100px;
       margin-left: auto;
       margin-right: auto;
       top: 29px;
       padding: 2px;
       position: relative;
       display: flex;
       gap: 2px;
    //   flex-direction: column;
}

div#porObr{                          /*hlášení pořadí obrázků*/
       border: 0px solid white;
       border-radius: 7px;
       background-color: #002F8B;  //#00BFFF;
    //   color: rgb(30% 80% 10%);
       color: white;
    //   width: 55%;
    //   width: content;
       flex: 1;
    //   height: 25px;
    //   margin-left: auto;
    //   margin-right: auto;
    //   margin-top: 1px;
       padding: 2px auto 2px auto;
       text-align: center;
       position: relative;
    //   left: 0px;
}

div #textPopis{                      /*popis obrázku*/
       border: 0px solid white;
       border-radius: 7px;
       background-color: #002F8B;
    //   color: rgb(30% 80% 10%);
       color: white;
    //   width: 100%;
    //   height: auto;
    //   margin-left: auto;
    //   margin-right: auto;
       flex: 2;
    //   margin-top: 2px;
    //   margin-left: 4px; 
       padding: 2px auto 2px auto;
       text-align: center; 
}

#nahledy{                            /*kontejner pro náhledy*/ 
       background-color: transparent;
       border: 1px solid #002F8B;
       width: 80%;
       margin-left: auto;
       margin-right: auto;
       top: 28px;
       margin-bottom: 50px;
       padding-top: 0px;
       padding-bottom: 7px;
       position: relative;
       display: flex;
       justify-content: center;
       gap: 3px;
       height: auto;
}

@media screen and (max-width: 700px) {  /*do šířka 700px posun kontejneru pro náhledy směrem nahoru*/
 #nahledy{
      // margin-top: 20px;
    } 
}

#nahledy img{
    //   flex: 1 1 auto;
    //    min-width: 24px;
       border: 3px solid transparent;
}

#nahledy img:hover{
       opacity: 0.8; 
       border: 3px solid #FF8000;
}

#nahledy img.active{
    //   opacity: 0.7; 
       border: 3px solid #FF4500;
}

p.znacka_zpet,.znacka_tam{
       width: 50px;
       height: 25px; 
       border: 1px solid white;
       text-align: center;
       position: absolute;
       top: 45%;
}

p.znacka_tam{
       right: 2px;
}

a#zpet,#tam{
       display: block; 
       color: white;
       width: 100px;
       height: 200%;
       border: 0px solid white;
       padding: 2px;
       text-align: center;
       text-decoration: none;
       position: absolute;
       bottom: -100%;
       animation-name: snizJas;
       animation-duration: 1s;  
       animation-delay: 1s;
       animation-fill-mode: both;    
}

a#zpet{
      left: 0px;
}

a#tam{
      right: 0px;
}      

a#zpet:hover,#tam:hover{
      animation-name: zvysJas;
      animation-delay: 0.1s;
      animation-duration: 0.2s;  
      animation-fill-mode: both;    
}

@keyframes zvysJas {
  from {opacity: 0.2;}
  to {opacity: 1.0;}
} 

@keyframes snizJas {
  from {opacity: 1.0;}
  to {opacity: 0.2;}
}