/**Flipcards version 8 **/
/**Reduced text padding to fit larger amount of text **/
.cards-wrapper {
	padding: 15px;
	width: fit-content;
	height: 260px;
	margin: 0 auto;
}

.cards-wrapper .card-container {
	float: left;
	width: 240px!important;
	height: 260px;
	padding-right: 15px;
}

.card4.card-container  {
	height: 360px;
    width: 200px!important;
}

.cards-wrapper .card {
	width: auto !important;
	height: 250px !important;
	box-shadow: 0 3px 8px -1px rgba(0,0,0,0) !important;
	border-color: #cccccc;
	border-width: 2px !important;
	border-style: solid;
	cursor: pointer;
	transition: transform .25s ease-in-out,box-shadow .3s ease,-webkit-transform .25s ease-in-out;
	position: relative;
	border-radius: 20px;
}

.cards-wrapper .card4 .card {
	height: 350px !important;
	}
.cards-wrapper.black40 .card {
	border-color: #cccccc!important;
}
.cards-wrapper.purple .card {
	border-color: #b19fba!important;
}
.cards-wrapper.pink .card {
	border-color: #C74298!important;
}
.cards-wrapper.orange .card {
	border-color: #FF9300!important;
}

.card-container button {
	padding: 0;
	background: none;
	outline: none;
	font-size: 14px;
}
.card-side.front {
	visibility: visible;
	transition: all 0s linear .125s;
}
.card-side {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.cards-wrapper *, ::before, ::after {
	box-sizing: border-box;
}
.card-side.back {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	visibility: hidden;
	transition: all 0s linear .125s;
}
.card-container.flipped .card {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg)
}
.card-container.flipped .front {
	visibility:hidden
}
.card-container.flipped .back {
	visibility:visible
}
.card:hover::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	/*-webkit-animation: pulse 1.5s ease .2s infinite;*/
	/*animation: pulse 1.5s ease .2s infinite;*/
}
.black40 .card:hover::before {
	-webkit-animation: black40-pulse 1.5s ease .2s infinite;
	animation: black40-pulse 1.5s ease .2s infinite;
}
.purple .card:hover::before {
	-webkit-animation: purple-pulse 1.5s ease .2s infinite;
	animation: purple-pulse 1.5s ease .2s infinite;
}
.pink .card:hover::before{
	-webkit-animation: pink-pulse 1.5s ease .2s infinite;
	animation: pink-pulse 1.5s ease .2s infinite;
}
.orange .card:hover::before {
	-webkit-animation: orange-pulse 1.5s ease .2s infinite;
	animation: orange-pulse 1.5s ease .2s infinite;
}

.card-content.has-image.has-text .card-content-image {
	height: 95px !important;
	margin-top: 50px !important;
}

.card4 .card-content.has-image.has-text .card-content-image {
    margin-top: 90px !important;
}

.card-content-image {
	width: 100%;
	padding: 5px 0;
	background: center center no-repeat;
	background-size: contain;
	text-align: center;
}
.card-content.has-image.has-text .card-content-text {
	/* line-height: 40px; */
	/* white-space: nowrap; */
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	margin-top: 10px;
}
.card-content.has-text:not(.has-image) .card-content-text {
	position: absolute;
	top: 50%;
	width: 100%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
}
.card-content-text {
	padding: 0 5px;
}
.back .card-content-text p {
	font-size:14px;
}

.card-content-text ul li{
	padding-bottom: 5px !important;
	font-size: 14px !important;
	text-align: initial !important;
}

/*Black40*/
@-webkit-keyframes black40-pulse{
	0%{
		box-shadow:0 0 0 0 rgba(204, 204, 204, 0.6)
	}
	70%{
		box-shadow:0 0 0 20px rgba(204,204,204,0)
	}
	100%{
		box-shadow:0 0 0 0 rgba(204,204,204,0)
	}
}
@keyframes black40-pulse{
	0%{
		box-shadow:0 0 0 0 rgba(204,204,204,0.6)
	}
	70%{
		box-shadow:0 0 0 20px rgba(204,204,204,0)
	}
	100%{
		box-shadow:0 0 0 0 rgba(204,204,204,0)
	}
}
/*Purple40*/
@-webkit-keyframes purple-pulse{
	0%{
		box-shadow:0 0 0 0 rgba(177,159,186, 0.6)
	}
	70%{
		box-shadow:0 0 0 20px rgba(177,159,186,0)
	}
	100%{
		box-shadow:0 0 0 0 rgba(177,159,186,0)
	}
}
@keyframes purple-pulse{
	0%{
		box-shadow:0 0 0 0 rgba(177,159,186, 0.6)
	}
	70%{
		box-shadow:0 0 0 20px rgba(177,159,186,0)
	}
	100%{
		box-shadow:0 0 0 0 rgba(177,159,186,0)
	}
}
/*Pink*/
@-webkit-keyframes pink-pulse{
	0%{
		box-shadow:0 0 0 0 rgba(199, 66, 152, 0.6)
	}
	70%{
		box-shadow:0 0 0 20px rgba(199,66,152,0)
	}
	100%{
		box-shadow:0 0 0 0 rgba(199,66,152,0)
	}
}
@keyframes pink-pulse{
	0%{
		box-shadow:0 0 0 0 rgba(199,66,152,0.6)
	}
	70%{
		box-shadow:0 0 0 20px rgba(199,66,152,0)
	}
	100%{
		box-shadow:0 0 0 0 rgba(199,66,152,0)
	}
}
/*Orange*/
@-webkit-keyframes orange-pulse{
	0%{
		box-shadow:0 0 0 0 rgba(255, 147, 0,0.6)
	}
	70%{
		box-shadow:0 0 0 20px rgba(199,66,152,0)
	}
	100%{
		box-shadow:0 0 0 0 rgba(199,66,152,0)
	}
}
@keyframes orange-pulse{
	0%{
		box-shadow:0 0 0 0 rgba(255, 147, 0,0.6)
	}
	70%{
		box-shadow:0 0 0 20px rgba(199,66,152,0)
	}
	100%{
		box-shadow:0 0 0 0 rgba(199,66,152,0)
	}
}
/** End of Flipcards **/