@media (max-width:767px) {
	.flip_head{
		line-height: 24px;
		font-size: 18px;
		font-weight: bold;	
	}
	.flip_details{
		line-height: 24px;
		font-size: 18px;
	}
	.flip_click{
		line-height: 24px;
		font-size: 18px;
		font-weight: bold;	
	}
	.front {
		display: -webkit-flex;
		display: flex;
	}
	.normal1-left {
		order: 1;
		-webkit-order: 1;
	}
	.normal1-right {
		order: 0;
		-webkit-order: 0;
	}
	.reversed0-left {
		order: 1;
		-webkit-order: 1;
	}
	.reversed0-right {
		order: 0;
		-webkit-order: 0;
	}
}
@media (min-width: 768px) {
	.flip_head{
		line-height: 34px;
		font-size: 26px;
		font-weight: bold;	
	}
	.flip_details{
		line-height: 34px;
		font-size: 26px;
	}
	.flip_click{
		line-height: 34px;
		font-size: 26px;
		font-weight: bold;	
	}
	.front {
		display: -webkit-flex;
		display: flex;
	}
	.normal1-left {
		order: 1;
		-webkit-order: 1;
	}
	.normal1-right {
		order: 0;
		-webkit-order: 0;
	}
	.reversed0-left {
		order: 1;
		-webkit-order: 1;
	}
	.reversed0-right {
		order: 0;
		-webkit-order: 0;
	}
}
@media (min-width: 992px) {
	.flip_head{
		line-height: 25px;
		font-size: 21px;
		font-weight: bold;	
	}
	.flip_details{
		line-height: 25px;
		font-size: 21px;
	}
	.flip_click{
		line-height: 25px;
		font-size: 21px;
		font-weight: bold;	
	}
	.front {
		display: inherit;
	}
}
@media (min-width: 1200px) {
	.flip_head{
		line-height: 28px;
		font-size: 23px;
		font-weight: bold;	
	}
	.flip_details{
		line-height: 28px;
		font-size: 23px;
	}
	.flip_click{
		line-height: 28px;
		font-size: 23px;
		font-weight: bold;	
	}
	.front {
		display: inherit;
	}
}
/* simple */
.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d; 
	-ms-transform-style: preserve-3d; 
	border: 0px solid #ccc;
}

/*
.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
	filter: FlipH;
	-ms-filter: "FlipH";
}
*/


/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
		
/* END: Accommodating for IE */

.flip-container, .front, .back {
	width: 100%;
	height: 200px;
}

.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-ms-transition: 0.6s;

	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;

	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateY(0deg);

	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-moz-transform: rotateY(0deg);

	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	-o-transform: rotateY(0deg);

	-ms-transition: 0.6s;
	-ms-transform-style: preserve-3d;
	-ms-transform: rotateY(0deg);

	transition: 0.6s;
	transform-style: preserve-3d;
	transform: rotateY(0deg);

	position: absolute;
	top: 0;
	left: 0;
}
/* front pane, placed above back */
.front {
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	z-index: 2;
}


/* back, initially hidden pane */
.back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	width: 98%; 
	height: 200px;
	position: relative; 
	display: inline-block;
	float: right;
}
/*
.no_touch .front {
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	z-index: 2;
}

.no_touch .back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	width: 98%; 
	height: 200px;
	position: relative; 
	display: inline-block;
	float: right;
}

.touch .front {
	z-index: 2;
}


.touch .back {
	width: 98%; 
	height: 200px;
	position: relative; 
	display: inline-block;
	float: right;
}
*/
.front .name {
	font-size: 2em;
	display: inline-block;
	font-family: Courier;
	padding: 0px 0px;
	/* border-radius: 5px; */
	bottom: 60px;
	/* left: 25%; */
	position: absolute;
	/* text-shadow: 0.1em 0.1em 0.05em #333; */
	display: none;

	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(-20deg);
}

.back p {
	position: absolute;
	bottom: 40px;
	left: 0;
	right: 0;
	text-align: center;
	padding: 0 0px;
	font-size: 18px;
}

.front-left {
	width: 49%; 
	height: 200px; 
	position: relative; 
	display: inline-block; 
	float: right;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.front-right {
	width: 49%; 
	height: 200px; 
	position: relative; 
	display: inline-block;
	float: right;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.flip_head {
	padding-top: 10px;
	margin-left: 3%;
	margin-right: 3%;
}

.flip_details {
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 10px;
}
.flip_click {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.flipper a {
	text-decoration: none;
}
.normal0-left {
    -moz-box-shadow:    inset 0 0 25px #000000;
   	-webkit-box-shadow: inset 0 0 25px #000000;
   	box-shadow:         inset 0 0 25px #000000;

}
.normal1-left {
    -moz-box-shadow:    inset 0 0 25px #000000;
   	-webkit-box-shadow: inset 0 0 25px #000000;
   	box-shadow:         inset 0 0 25px #000000;
}
.reversed0-right {
    -moz-box-shadow:    inset 0 0 25px #000000;
   	-webkit-box-shadow: inset 0 0 25px #000000;
   	box-shadow:         inset 0 0 25px #000000;
}
.reversed1-right {
    -moz-box-shadow:    inset 0 0 25px #000000;
   	-webkit-box-shadow: inset 0 0 25px #000000;
   	box-shadow:         inset 0 0 25px #000000;
}