.card-holder.with-flip,
.card-holder.with-flip .normal-state,
.card-holder.with-flip .back-state {
	width: 100%;
}

.card-holder.with-flip {
	-webkit-perspective: 1000px;
    perspective: 1000px;
}

.card-holder.with-flip .flipper {
	-webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;
}

.card-holder.with-flip:hover .flipper .normal-state {
    -webkit-transform: perspective(1000px) rotateY(180deg);
    -moz-transform: perspective(1000px) rotateY(180deg);
    transform: rotateY(180deg);
}

.card-holder.with-flip:hover .flipper .back-state {
    -webkit-transform: perspective(1000px) rotateY(360deg);
    -moz-transform: perspective(1000px) rotateY(360deg);
    transform: rotateY(360deg);
}

.card-holder.with-flip .normal-state, 
.card-holder.with-flip .back-state {
	position: absolute;
	top: 0;
	left: 0;
    -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

.card-holder.with-flip .normal-state {
	z-index: 2;
}

.card-holder.with-flip .back-state {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

@supports (-ms-ime-align:auto) {
    .card-holder.with-flip {
	    perspective: none;
	    overflow: hidden;
	}
	.card-holder.with-flip .flipper {
	    transition-duration: 0s;
		transform-style: flat;
	}
	.card-holder.with-flip:hover .flipper .normal-state {
	    transform: none;
	}
	.card-holder.with-flip:hover .flipper .back-state {
		transform: translateX(0%);
	}
	.card-holder.with-flip .normal-state, 
	.card-holder.with-flip .back-state {
		backface-visibility: visible;
	    perspective: none;
	    transition-duration: 0s;
	}
	.card-holder.with-flip .normal-state {
		z-index: auto;
	}
	.card-holder.with-flip .back-state {
		transform: translateX(-100%);

		transition: transform 0.2s linear;
	}

	.card-holder.with-flip:hover .flipper .inside-state .videoWrapper {
	    /* z-index: 1; */
	}
	.card-holder.with-flip:hover .flipper .inside-state .videoWrapper iframe {
	    z-index: -1;
	}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .card-holder.with-flip {
	    perspective: none;
	    overflow: hidden;
	}
	.card-holder.with-flip .flipper {
	    transition-duration: 0s;
		transform-style: flat;
	}
	.card-holder.with-flip:hover .flipper .normal-state {
	    transform: none;
	}
	.card-holder.with-flip:hover .flipper .back-state {
		transform: translateX(0%);
	}
	.card-holder.with-flip .normal-state, 
	.card-holder.with-flip .back-state {
		backface-visibility: visible;
	    perspective: none;
	    transition-duration: 0s;
	}
	.card-holder.with-flip .normal-state {
		z-index: auto;
	}
	.card-holder.with-flip .back-state {
		transform: translateX(-100%);
		transition: transform 0.2s linear;
	}

	.card-holder.with-flip:hover .flipper .inside-state .videoWrapper {
	    z-index: 1;
	}
}