/* new card flip for IE, firefox, chrome*/
.cardcontainer{
	width: 930px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	background-color: red;
}

.container {
	float:left;
	width: 295px;
	height: 141px;
	position: relative;
	margin: 0 5px 40px 5px;
	/*border: 1px solid #CCC;*/
	-ms-perspective: 1000;
	perspective: 1000;
-webkit-perspective: 1000;
}

.face{
	display: block;
	height: 100%;
	width: 100%;
	line-height: 24px;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	position: absolute;
	transition: all 0.5s linear;
	backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Safari & Chrome */
-moz-backface-visibility: hidden; /* Firefox */
-ms-backface-visibility: hidden; /* Internet Explorer */
-o-backface-visibility: hidden; /* Opera */
}
.face a img{
	/*color: green;*/
	border: 0;
	outline: none;
}
.face h3{
	font-size: 26px;
	color:#770305;
}
.face.flipped {
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
-webkit-transform:rotatey(360deg); /* Safari and Chrome */
-o-transform:rotatey(360deg); /* Opera */
}

.front {
    background: transparent;
}
.back {
    background: transparent;
    transform: rotateY( 180deg );
	/*border: 1px solid #CCC;*/
}

.container:hover .face {
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
-webkit-transform:rotatey(360deg); /* Safari and Chrome */
-o-transform:rotatey(360deg); /* Opera */
-webkit-transform-style: preserve-3d;
}

@media all and (max-width: 700px){
	.cardcontainer{
		display: none;
		}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
  .cardcontainer{
		display: none;
		}
}