#categories {
	 background-color: #faf0e6;
}
 @media (max-width: 991px) {
	 #categories {
		 padding: 25px 0 !important;
	}
}
 @media (max-width: 768px) {
	 #categories {
		 padding: 20px 0 !important;
	}
}
 .card {
	 position: relative;
	 height: 400px;
	 width: 100%;
	 margin: 10px 0;
	 transition: ease all 1.3s;
	 background-color: #faf0e6;
	 border-radius: 30px;
	 box-shadow: none;
}
 .card:hover .cover {
	 transform: rotateX(0deg) rotateY(-180deg);
}
 .card:hover .cover:before {
	 transform: translateZ(30px);
}
 .card:hover .cover:after {
	 background-color: rgba(255, 255, 255, 0.5);
}
 .card:hover .cover h4 {
	 transform: translateZ(100px) translateX(-50%);
}
 .card:hover .cover .price {
	 transform: translateZ(60px);
}
 .card:hover .cover a {
	 transform: translateZ(-60px) rotatey(-180deg);
}
 .card:hover .cover p {
	 transform: translateZ(-60px) rotatey(-180deg);
}
 .card .cover {
	 position: absolute;
	 height: 100%;
	 width: 100%;
	 transform-style: preserve-3d;
	 transition: ease all 1.3s;
	 background-size: cover;
	 background-position: center center;
	 background-repeat: no-repeat;
}
 .card .cover:before {
	 content: "";
	 position: absolute;
	 top: 20px;
	 left: 20px;
	 right: 20px;
	 bottom: 20px;
	 z-index: 2;
	 transition: ease all 1.3s;
	 transform: translateZ(0px);
}
 .card .cover:after {
	 content: "";
	 position: absolute;
	 top: 0px;
	 left: 0px;
	 right: 0px;
	 bottom: 0px;
	 z-index: 2;
	 transition: ease all 1.3s;
	 background: rgba(0, 0, 0, 0.2);
	 border-radius: 20px;
}
 .card .cover.item-a {
	 border-radius: 20px;
}
 .card .cover.item-b {
	 border-radius: 20px;
}
 .card .cover.item-c {
	 border-radius: 20px;
}
 .card .cover.item-d {
	 border-radius: 20px;
}
 .card .cover h4 {
	 font-weight: 600;
	 position: absolute;
	 bottom: 10%;
	 left: 50%;
	 color: #681e77;
	 transform-style: preserve-3d;
	 transition: ease all 1.3s;
	 z-index: 3;
	 font-size: 15px;
	 transform: translateZ(0px) translateX(-50%);
	 width: 171px;
	 text-align: center;
	 background-color: #fff;
	 text-transform: uppercase;
	 padding: 8px 2px;
	 border: 1px solid rgba(0, 0, 0, 0.2);
	 border-radius: 30px;
}
 .card .cover .price {
	 font-weight: 200;
	 position: absolute;
	 top: 55px;
	 right: 50px;
	 color: white;
	 transform-style: preserve-3d;
	 transition: ease all 1.3s;
	 z-index: 4;
	 font-size: 2em;
	 transform: translateZ(0px);
}
 .card .card-back {
	 position: absolute;
	 height: 100%;
	 width: 100%;
	 background: rgba(0, 0, 0, 0.25);
	 transform-style: preserve-3d;
	 transition: ease all 1.3s;
	 transform: translateZ(-1px);
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: end;
	 padding-bottom: 50px;
	 border-radius: 20px;
}
 .card .card-back a {
	 transform-style: preserve-3d;
	 transition: ease transform 1.3s, ease background 0.5s;
	 transform: translateZ(-1px) rotatey(-180deg);
	 background: #681e77;
	 border: 1px solid rgba(0, 0, 0, 0.2);
	 font-weight: 600;
	 font-size: 12px;
	 text-transform: uppercase;
	 color: white;
	 padding: 8px 2px;
	 outline: none;
	 text-align: center;
	 width: 171px;
	 border-radius: 50px;
	 text-decoration: none;
}
 .card .card-back a:hover {
	 background-color: white;
	 color: #681e77;
}
 .card .card-back p {
	 transform-style: preserve-3d;
	 transition: ease transform 1.3s, ease background 0.5s;
	 transform: translateZ(-1px) rotatey(-180deg);
	 font-weight: bold;
	 font-size: 15px;
	 color: white;
	 padding: 8px 2px;
	 outline: none;
	 text-align: center;
	 width: 200px;
	 border-radius: 50px;
	 text-decoration: none;
}
 .row .col-lg-3:first-of-type .card .card-back {
	/* color: #ff0000;
	 */
}
 .row .col-lg-3:first-of-type .card .card-back p {
	 font-weight: bold;
}
/* @media (max-width: 640px) {
	 .card {
		 .cover {
			 h4 {
				 font-weight: 600;
				 position: absolute;
				 bottom: 10%;
				 left: 20%;
				 color: #681e77;
				 transform-style: preserve-3d;
				 transition: ease all 1.3s;
				 z-index: 3;
				 font-size: 15px;
				 transform: translateZ(0px);
				 width: 171px;
				 text-align: center;
				 background-color: #fff;
				 text-transform: uppercase;
				 padding: 8px 2px;
				 border: 1px solid rgba(0, 0, 0, 0.2);
				 border-radius: 30px;
			}
		}
	}
}
 */