.hid{
  opacity: 0;
  filter: blur(5px);
  transform : translateX(-100%);
  transition : all 1s;
}

@media (prefers-reduced-motion) {
  .hid {
    transition: none;
  }
}

.show{
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

.index:nth-child(2){
  transition-delay: 200ms;
}
.index:nth-child(3){
  transition-delay: 400ms;
}
.index:nth-child(4){
  transition-delay: 600ms;
}

.rec:nth-child(2){
  transition-delay: 200ms;
}
.rec:nth-child(3){
  transition-delay: 400ms;
}
.rec:nth-child(4){
  transition-delay: 600ms;
}

.mov:nth-child(2){
  transition-delay: 200ms;
}
.mov:nth-child(3){
  transition-delay: 400ms;
}
.mov:nth-child(4){
  transition-delay: 600ms;
}
.mov:nth-child(5){
  transition-delay: 800ms;
}
.mov:nth-child(6){
  transition-delay: 1000ms;
}

.anim:nth-child(2){
  transition-delay: 200ms;
}
.anim:nth-child(3){
  transition-delay: 400ms;
}
.anim:nth-child(4){
  transition-delay: 600ms;
}
.anim:nth-child(5){
  transition-delay: 800ms;
}
.anim:nth-child(6){
  transition-delay: 1000ms;
}

/* hover img */
.box{
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1);
    transition: 1s;
}
.box img{
  display: block;
  width: 100%;
  border-radius: 5px;
}
.box:hover{
  transform: scale(1.2);
  z-index: 2;
}

.icon{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background:rgba(0, 0, 0, .3);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  opacity: 0;
  transition: 0.6s;
}

.icon:hover{
  opacity: 1;
}

.icon a{
  margin: 15px;
}

.icon a img{
  width: 40px;
  height: 40px;
}

.icon a:hover{
  transform: scale(1.7);
  z-index: 2;
}

.icon > *{
  transform: translateY(25px);
  transition: transform 0.6s;
}

.icon:hover > *{
  transform: translateY(0px);
}

.social a:hover{
  transform: scale(1.7);
  z-index: 2;
  transition: transform 0.6s;
}

.social > *{
  transition: transform 0.6s;
}

.read{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background:rgba(0, 0, 0, .3);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  opacity: 0;
  transition: 0.6s;
}

.read:hover{
  opacity: 1;
}

.read a{
  margin: 15px;
}

.read a img{
  width: 40px;
  height: 40px;
}

.read a:hover{
  transform: scale(1.2);
  z-index: 2;
}

.read > *{
  transform: translateY(25px);
  transition: transform 0.6s;
}

.read:hover > *{
  transform: translateY(0px);
}