/* Minification failed. Returning unminified contents.
(57,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '%'
 */
.info-card {
    float: left;
	-webkit-perspective: 600px;
	margin-top: 15px;
	
}
.zodiac-name {
	font-size: 1.2em;
	position: absolute;
	bottom: 20px;
	text-align:center;
  font-family: Georgia,Times,Times New Roman,serif; 
	text-transform: uppercase;
	    width: 100%;
    text-align: center;
}
.front, .back {
	background: #FFF;
	border-radius: 4px;
	transition: -webkit-transform 1s;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	border: 0;
}

.front {
	overflow: hidden;
	width: 100%;
	height: 400px;
	position: absolute;
	z-index: 1;
	transition: all .3s ease-in-out;
	/*top: 18px;*/
}

.back {
	position: relative;
	padding: 0px;
	padding-top: 0px;
	width: 100%;
	height: 400px;
	-webkit-transform: rotateY(-180deg);
	overflow: hidden;
	transition: all .3s ease-in-out
}

.info-card:hover .back {
	-webkit-transform: rotateY(0);
}

.info-card:hover .front {
	-webkit-transform: rotateY(180deg);
}

.card-image {
width: 100%;
height: auto%;
}
@media (max-width: 1279px) {
.front {
	height: 400px;
	 transition: all .3s ease-in-out

}

.back {
	height: 400px;
	 transition: all .3s ease-in-out

}
}
@media (max-width: 1024px) {
.front {
	height: 300px;
	 transition: all .3s ease-in-out

}

.back {
	height: 300px;
	 transition: all .3s ease-in-out

}

}
@media (max-width: 987px) {
.front {
	height: 210px;
	 transition: all .3s ease-in-out

}

.back {
	height: 210px;
	 transition: all .3s ease-in-out

}
}
@media (max-width: 767px) {
.front {
	height: 240px;
	 transition: all .3s ease-in-out

}

.back {
	height: 240px;
 transition: all .3s ease-in-out
}
}
@media (max-width: 736px) {
.front {
	height: 420px;
	 transition: all .3s ease-in-out

}

.back {
	height: 420px;
 transition: all .3s ease-in-out
}
}
@media (max-width: 667px) {
.front {
	height: 340px;
	 transition: all .3s ease-in-out

}

.back {
	height: 340px;
 transition: all .3s ease-in-out
}
}
@media (max-width: 414px) {
.front {
	height: 240px;
	 transition: all .3s ease-in-out

}

.back {
	height: 240px;
 transition: all .3s ease-in-out
}
}
@media (max-width: 375px) {
.front {
	height: 170px;
	 transition: all .3s ease-in-out

}

.back {
	height: 170px;
 transition: all .3s ease-in-out
}
}