.gallery-3d {
	position: relative;
    overflow: hidden;
    display: block;
}

.gallery-3d .normal {
	display: block;
}

.gallery-3d .info {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 2rem;
	pointer-events: none;
    transform: rotate3d(1, 0, 0, 90deg);
    display: flex;
}

.gallery-3d .info .title {
    font-size: 2.4rem;
    display: -webkit-box;
    max-width: 100%;
    height: 3.1rem;

    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1rem;
}

.gallery-3d .info .body {
    overflow-y: hidden;
}

.gallery-3d .info .btn {
    margin-top: 2rem;
    opacity: .5;
}

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

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

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

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

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

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

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

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

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

@keyframes in-right {
	0% {
		opacity: 1;
		
	}
  from {
        transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
        transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
	  	
  }
}

@keyframes in-bottom {
	0% {
		opacity: 1;
		

	}
  from {
        transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
        transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
	  	
  }
}

@keyframes in-left {
	0% {
		opacity: 1;
		
	}
  from {
        transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
        transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
	  	
  }
}

@keyframes out-top {
  from {
        transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
        transform: rotate3d(-1, 0, 0, 104deg);
  }
  100% {
  	opacity: 0;
  }
}


@keyframes out-right {
  from {
        transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
        transform: rotate3d(0, -1, 0, 104deg);
  }
  100% {
  	opacity: 0;
  }
}


@keyframes out-bottom {
  from {
        transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
        transform: rotate3d(1, 0, 0, 104deg);
  }
  100% {
  	opacity: 0;
  }
}

@keyframes out-left {
  from {
        transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
        transform: rotate3d(0, 1, 0, 104deg);
  }
  100% {
  	opacity: 0;
  }
}