@charset "utf-8";
/* CSS Document */

/* entire container, keeps perspective */
.flipcard {
	position: relative;
 /* width: 220px;
  height: 160px;*/
  perspective: 500px;

}
.flipcard:hover .front, .flipcard.flip .front {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}
.flipcard:hover .back, .flipcard.flip .back {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-moz-transform:  rotateY(0deg);
  -ms-transform:  rotateY(0deg);
}
.flipcard .back {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
  -ms-transform:rotateY(-180deg);
}
.flipcard .front, .flipcard .back {
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	transition: all 0.5s ease-in;
	background-color: #fff;
	backface-visibility: hidden;
	 -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

@media (max-width: 992px) {
.flipcard, .front, .back {
	width: 100%;
	height: 610px;
}
}

@media (min-width: 992px) {
.flipcard, .front, .back {
	max-width: 315px;
	height: 630px;
}
}

@media (min-width: 992px) and  (max-width: 1200px) {
.flipcard, .front, .back {
	height: 675px;
}
}
.flipper .front {
	background-color: #fff;
}
.flipcard .front img {
	width: 100%;
	height: auto;
}
.flipcard .front img.flip-icon {
	float: right;
	width: 44px;
	height: 44px;
	position: absolute;
	bottom: 0;
	right: 0;
}
.flipcard .back {
	background-color: #c4262e;
	color: #fff;
	text-align: center;
	padding: .5em;
}
.flipcard .back h4 {
	font-size: 1.2em;
    line-height: 1.1em;
}
.flipcard .back p, .flipcard .back li {
	font-size: .85em;
	line-height: 1.15;
}

.flipcard .back ul  {
    list-style: outside disc;
    margin: 0 1em 1em;
    text-align:left;
}

.flipcard .back ul li  {
    list-style: outside disc;
    margin: 0 1em;
    text-align:left;
}

/* flip speed goes here 
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}*/

/* hide back of pane during swap 
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}*/

/*  UPDATED! front pane, placed above back 
.front {
	z-index: 2;
	transform: rotateY(0deg);
}*/

/* back, initially hidden pane
.back {
	transform: rotateY(-180deg);
} */

/* 
	Some vertical flip updates 

.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container:hover .back {
	    transform: rotateX(0deg);
	}

	.vertical.flip-container:hover .front {
	    transform: rotateX(180deg);
	}
*/

/*       Fix bug for IE     

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .front, .back{
        -ms-backface-visibility: visible;
        backface-visibility: visible;
    }

    .back {
        visibility: hidden;
        -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
    }
    .front{
        z-index: 4;
    }
    .flip-container:not(.manual-flip):hover .back,
    .flip-container.manual-flip.hover .back{
        z-index: 5;
        visibility: visible;
    }
}
 */