/*Galleries List Begin*/
html, body{
	height: 100%;
}

.galleryContainer{
	min-height: 300px;
	position: relative;	
	border-top: 1px solid var(--page-devider-color);
}

.productsContainer > h1 a{
	text-decoration: none;
	color: black;
}
.productsContainer > h1 a:hover,
.productsContainer > h1 a:visited,
.productsContainer > h1 a:active,
{
	color: var(--main-ds-color);
}

.productsContainer > h1 span{
	color: var(--main-ds-color);
}

.galleryContainer::after{
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	
	border-top: 0;
	border-bottom: 1px solid var(--page-devider-color);
	border-left: 0;
	border-right: 1px solid var(--page-devider-color);
	
	top: 0;
	left: 50%;
	
	margin-left: -12px;
	margin-top: -12px;
	transform: rotate(45deg);
	background: white;

}

.galleryList{
    max-width: var(--wrapper-max-width);
    margin-inline: auto;
    padding-inline: var(--inline-padding);
    display: flex;
	flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    padding-top: 30px;
   
}

.galleryList img{max-width: 100%;}

.galleryList li {
  position: relative;
  float: left;
  width: 200px;
  height: 200px;
  margin: 5px;
  padding: 0;
  list-style: none;
}

.galleryList li a {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  border-radius: 4px;
}

.galleryList li h3 {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.galleryList li p {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.galleryList li .normal {
  width: 100%;
  height: 100%;
  background-color: #ECF0F1;
  color: rgba(52, 73, 94, 0.6);
  box-shadow: inset 0 2px 20px #e6ebed;
  text-align: center;
  font-size: 50px;
  line-height: 200px;
}

.galleryList li {
  perspective: 400px;
}

.galleryList  .info {
  transform: rotate3d(1, 0, 0, 90deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  pointer-events: none;
  background-color: rgba(var(--main-ds-color-rgba), 0.6);
}

.galleryList  .in-top .info {
  transform-origin: 50% 0%;
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;
          animation: in-top 300ms ease 0ms 1 forwards;
}

.galleryList  .in-right .info {
  transform-origin: 100% 0%;
  -webkit-animation: in-right 300ms ease 0ms 1 forwards;
          animation: in-right 300ms ease 0ms 1 forwards;
}

.galleryList  .in-bottom .info {
  transform-origin: 50% 100%;
  -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
          animation: in-bottom 300ms ease 0ms 1 forwards;
}

.galleryList  .in-left .info {
  transform-origin: 0% 0%;
  -webkit-animation: in-left 300ms ease 0ms 1 forwards;
          animation: in-left 300ms ease 0ms 1 forwards;
}

.galleryList  .out-top .info {
  transform-origin: 50% 0%;
  -webkit-animation: out-top 300ms ease 0ms 1 forwards;
          animation: out-top 300ms ease 0ms 1 forwards;
}

.galleryList  .out-right .info {
  transform-origin: 100% 50%;
  -webkit-animation: out-right 300ms ease 0ms 1 forwards;
          animation: out-right 300ms ease 0ms 1 forwards;
}

.galleryList  .out-bottom .info {
  transform-origin: 50% 100%;
  -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
          animation: out-bottom 300ms ease 0ms 1 forwards;
}

.galleryList  .out-left .info {
  transform-origin: 0% 0%;
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;
          animation: out-left 300ms ease 0ms 1 forwards;
}

@-webkit-keyframes in-top {
  from {
    transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes in-top {
  from {
    transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-right {
  from {
    transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-right {
  from {
    transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-bottom {
  from {
    transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-bottom {
  from {
    transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-left {
  from {
    transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-left {
  from {
    transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 104deg);
  }
}
@keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 104deg);
  }
}
@-webkit-keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 104deg);
  }
}
@keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 104deg);
  }
}
@keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 104deg);
  }
}



.galleryContainer  *{
  box-sizing: border-box;
}
/*Galleries List Begin*/


/*Gallery*/
.imageList{
    display: flex;
	flex-wrap: wrap;
    flex-direction: row;
    padding-top: 30px;	
}

.imageList a{
	flex: 0 1 25%;
	background-color: white; 
	overflow: hidden;
	
	}

.imageList img{
	height: 100%;
    width: 100%;
    object-fit: fill;
    
  
    transition: .8s opacity;

	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.imageList a:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}


.imageList:hover img { opacity: 0.5; }
.imageList img:hover { opacity: 1; } 




@media (max-width: 1120px){}

@media (max-width: 950px){
	
}

@media (max-width: 832px){
	.imageList a{
		flex: 0 1 33%;
	}
}

@media (max-width: 650px){
	.imageList a{
		flex: 0 1 50%;
	}
	
	.galleryList  .info {
		display: none;
	}
	
	.galleryList  .info2 {
	  height: 50%;
	  bottom: 0;
	  background-color: rgba(var(--main-ds-color-rgba), 0.5);
	  transform: unset;
	  width: 100%;
	  padding: 20px;
	  position: absolute;
	  left: 0;
	  border-radius: 4px;
	  pointer-events: none;
	}
	
}

@media (max-width: 430px){}