:root{
  --color:rgba(102, 102, 228, 0.475);
}

#galleryclick{
  min-height: 432px;
  max-height: 648px;
  overflow-y: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}


.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:rgba(255,208,44,255);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}


.galleryclickshow{

padding: 0;
max-height: 300px;
min-height: 150px;
animation: imgAnim 1s ;


}

@keyframes imgAnim {
0%{
  transform: scale(0.2,0.2);
}
100%{
  transform: scale(1,1);
}

}
/*----------------DOM CSS------*/
.imgDiv{
  min-height: 150px;
  max-height: 100%;
  min-width: 150px;
  max-width: 100%;
 padding: 0;
 overflow: hidden;

 
 
}
.galleryimg{
  display: flex;
  width: 100% !important;
  height: 100% !important;
  
  transition: all 1s linear;
}
.galleryimg:hover{
  transform: scale(1.5,1.5);
}


/*------------------Gallery css-------------------*/
.maindiv{
width: 100%;

height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(19, 18, 18, 0.944);
display: block;
z-index: 2250;
white-space: nowrap;
}
.imgtab{
width: 70%;
height: 70%;
position: relative;
top: 15%;
left: 15%;
}
.close{
position: absolute;
color:rgb(238, 232, 232);
font-weight: 500;
background-color: black;
padding: 5px;
font-size: 20px;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
}
.previous{
position: absolute;
color: white;
font-size: 20px;
font-weight: 800;
background-color: black;
padding: 5px;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: 4;
cursor: pointer;
}
.next{
position: absolute;
color: white;
font-size: 20px;
font-weight: 800;
background-color: black;
padding: 5px;
top: 50%;
transform: translateY(-50%);
right: 0;
z-index: 4;
cursor: pointer;
}
.color{
height: 800px;
background-color: aqua;
}
.lowerdiv{
width: 100%;
height: 20%;
display: flex;
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
position: absolute;

bottom: 0;
z-index: 4;

}
.smallimg{
width: 20%;
height: 100%;

flex: 0 0 auto; 

}
.tinyimg{
width: 100%;
height: 100%;
}


/*-------------------media------------*/

@media(max-width:2770px){






  /*------------------Gallery css-------------------*/
 
}
 

@media(max-width:450px){

/*--------------sidebar---------*/
.sidebar{
  width: 100%;
  position: static;
  margin-top: 10px;
  height: max-content;
  margin-bottom: 10px;
}
.category-list{
  display: grid;
  grid-template-columns: repeat(2,1fr);
}

/*------------------Gallery css-------------------*/
}