@charset "UTF-8";

main{
  /* color: var(--white); */
  /* color:#1E3D41; */
  color:var(--font);
}

.gallery{
  /* columns: 4;
  padding:0 15px;
  margin:0; */
  position: relative;
}

.gallery li {
  margin-bottom: 20px;
  list-style:none;
}

.gallery li .caption {
  font-size: 120%;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gallery li .mask {
  width:			100%;
  height:			100%;
  position:		absolute;
  top:			0;
  left:			0;
  opacity:		0;
  background-color:	rgba(0,0,0,0.4);
  -webkit-transition:	all .5s ease;
  transition:		all .5s ease;
}
.gallery li:hover .mask{
  opacity:	1;
}

.gallery img{
  width:100%;
  height:auto;
  vertical-align: bottom;
}

.gallery img:hover{
  opacity:0.8;
  filter: brightness(40%);
  transition: 0.5s;
}

.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:50px 20px;
}

.sort-btn li{
  background:var(--white);
  color:#25311C;
  list-style:none;
	border-radius:10px;
	cursor: pointer;
	padding: 10px;
	margin:0 10px;
}

.sort-btn li.active{
  background:#445036;
  color:var(--white);
}

.item-content{
  position:relative;
  width:100%;
  height: 100%;
}

.item {
  display: block;
  position:absolute;
  list-style: none;
  width:24%;  /* 4 items in a row */
  z-index: 1;
  padding : 10px;
}

main {
    padding-top: 10vh;
}

ul{
  margin:0;
  padding: 0;
  list-style: none;
}

a{
  color: #333;
}

a:hover,
a:active{
  text-decoration: none;
}

h1{
  text-align: center;
  font-size:3vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin:30px 0;
}

p{
  margin:0 10px 10px 10px;
  word-wrap : break-word;
}
 
.fadeInImg{
  animation-name: fadeInImgAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  perspective-origin: left center;
  opacity: 0;
}

@keyframes fadeInImgAnime{
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(20deg);
    /* transform:translate(-100px, -100px); */
    opacity: 0;
  }

  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    /* transform:translate(0, 0); */
    opacity: 1;
  }
}

@media only screen and (max-width: 900px) {
  .item{
    width:33%; /* 3 items in a row */
  }
}

@media only screen and (max-width: 768px) {
  .item{
    width:49.5%; /* 2 items in a row */
  }
}

@media only screen and (max-width: 480px) {
  .sort-btn{
    justify-content: space-between;
  }
    
  .sort-btn li{
    /* width:48%; */
    margin:0 0 10px 0;
    text-align:center;
    }
}