/* CSS Document */

body, html {
    /*pading nuk duhen*/
       /* margin: 0%; /* ishte 0 */
        /*padding: 0%; /* ishte 0 orig */
        /*padding-left: 0%; /*e shtova un ishte 1% */
        /*padding-right: 0%; /*e shtova un ishte 1% */
        /*padding-top: 0%; /*e shtova un ishte 1% */
        /*padding-bottom: 0%;/*e shtova un ishte 1% */
    height: 100%; /*ishte 100% duhet 100% sepse zvogelon webpage*/
    display: contents; /* ishte flex, por ndoshta me mire contents */
    align-items: center; /* ishte center  */
    /*justify-content: center; /* ishte center */
    background-color: #646464;   /* ishte  #f0f0f0 */
   /* border: 20%;/**/
    /*border: #E0FF00;/**/
}

.gallery-container {/*containeri ku rrinethumbnail me fotot edhe fotoja main photo e te gjitha */
        background-color: #f0f0f0; /*e shtova  */

   /* left: 10%;*/
    /*align-items: center;*/
    align: center;/* e shtova une*/
    /*border-bottom-right-radius: 50%; /* shtova un borderin majtas container */
    display: flex; /* ishte flex */
    width: 100%; /*ishte 100% e duhet keshtu 100%*/
    height: 100%; /*ishte 100% e duhet te rrije keshtu 100 si per thumbnail edhe per mainPhoto*/
    overflow: auto; /*ishte hidden*/
}

.thumbnail-gallery {/*containeri ku rrine fotot e thumbnail edhe main foto place svogelohet*/
   background-color: #49A636; /* e shtova jeshile*/

   /* width: 20%; /* ishte 20% */
    width: 146px; /* ishte 20% */
    height: 100%;/*ishte 100%  lartesia te scrollduhet 100%*/
    overflow-y: scroll; /* ishte scroll */

}

.thumbnail-gallery img {
    align-content: center;
    width: 100px;/*ishte 100%*/
    height: 100px;/*nuk ishte e shtova une 20% lartesia e fotos ne thumbnail container*/
    
    /* Duhen marginat ketu*/
    margin-left: 2.5%;/*ishte 10px hapsira si border majtas fotos nga parent kur scroll verticale*/
    margin-right: 2.5%;/*e shtova un  borederi djathtas fotos mbifoton tjeter pash foto1 ! foto2*/
    margin-top: 2%;/*ishte 10px hapsira nga foto ne fot te scroll verticale*/
    margin-bottom: 1%;/*ishte 10px hapsira nga foto ne fot te scroll verticale*/
   
    border: #E50509;
    border-bottom-width: medium;
  
border-right-style: dotted;
border-left-style: dotted;
border-top-style: dotted;
border-bottom-style: dotted;
    
border-top-color: aqua;
border-bottom-color: aqua;
border-left-color: aqua;
border-right-color: aqua;
    
border-bottom-left-radius: 20px;/**/
border-bottom-right-radius: 20px;    
border-top-left-radius: 20px;
border-top-right-radius: 20px;

}



.main-image {
    /*animation-delay: 0.3; /* e shtova */
    align-content: center; /* e shtova */
    justify-content: center; /* ishte center */

   background-color: #8E8E8E; /* e shtova */
    width: 99%; /* ishte 80% */
    display: flex; /* ishte flex orig,  punon mir edhe me inline-flex */
    align-items: center; /* ishte center */
    position: relative; /* ishte relative, mos e vendos 200, as inherit,absolute, fixed,    */
  /*  position: static; /* shtuar si prove */
    
border-bottom-left-radius: 20px;/**/
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}


.main-image img {
    align-content: flex; /* e shtova */
    position: relative; /* ishte flex, me absolute sheh te gjith foton scroll edhe djathtas majtas */
    left: 0%;/*e shtova%*/
    right: 0%;/*ishte 15%*/
    top: 0%;/*ishte 70%*/
    bottom: 0%;/*e shtova une */
    transform: translateY(0%); /*isthe -70% orig kjo e ngren lart apo poshte main picture*/
   
    max-width: 94%; /*ishte 100%,por  me mire 95% len pak boshellik per te shikuar bordin */
    max-height: 94%; /*ishte 100%*/
    min-height: 80%;
    min-width: 90%;
    
    
border: #E50509;
border-bottom-width: medium;
  
border-left-style: dashed;
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dashed;
    
border-top-color: aqua;
border-bottom-color: aqua;
border-left-color: aqua;
border-right-color: aqua;

border-bottom-left-radius: 20px;/**/
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}