.card {
	height: 100px
}
.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000
}
.back, .front {
	-webkit-animation-duration: 15s;
	-moz-animation-duration: 15s;
	-ms-animation-duration: 15s;
	animation-duration: 15s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-ms-animation-timing-function: ease;
	animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0
}
.front {
	-webkit-animation-name: cardFlipFront;
	-moz-animation-name: cardFlipFront;
	-ms-animation-name: cardFlipFront;
	animation-name: cardFlipFront;
	z-index: 2;
	width: 185px;
}
@keyframes cardFlipFront {
0%, 22.5% {
-moz-transform:rotateY(0);
-ms-transform:rotateY(0);
transform:rotateY(0)
}
27.5%, 72.5% {
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
transform:rotateY(180deg)
}
77.5% {
-moz-transform:rotateY(0);
-o-transform:rotateY(0);
-ms-transform:rotateY(0);
transform:rotateY(0)
}
100% {
-moz-transform:rotateY(0);
-ms-transform:rotateY(0);
transform:rotateY(0)
}
}
@-webkit-keyframes cardFlipFront {
0%, 22.5% {
-webkit-transform:rotateY(0);
transform:rotateY(0)
}
27.5%, 72.5% {
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg)
}
100%, 77.5% {
-webkit-transform:rotateY(0);
transform:rotateY(0)
}
}
@keyframes cardFlipBack {
0%, 22.5% {
-moz-transform:rotateY(-180deg);
-ms-transform:rotateY(-180deg);
transform:rotateY(-180deg)
}
27.5%, 72.5% {
-moz-transform:rotateY(0);
-ms-transform:rotateY(0);
transform:rotateY(0)
}
100%, 77.5% {
-moz-transform:rotateY(-180deg);
-ms-transform:rotateY(-180deg);
transform:rotateY(-180deg)
}
}
@-webkit-keyframes cardFlipBack {
0%, 22.5% {
-webkit-transform:rotateY(-180deg);
transform:rotateY(-180deg)
}
27.5%, 72.5% {
-webkit-transform:rotateY(0);
transform:rotateY(0)
}
100%, 77.5% {
-webkit-transform:rotateY(-180deg);
transform:rotateY(-180deg)
}
}
.back {
	-webkit-animation-name: cardFlipBack;
	-moz-animation-name: cardFlipBack;
	-ms-animation-name: cardFlipBack;
	animation-name: cardFlipBack;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	width: 185px;
}

@media only screen and (max-width:320px) {
.card {
	height: 171px;
	margin-top: 10px;
	border: 2px solid #4e312d
}
.mabottom {
	margin-bottom: 10px
}

.front {
    -webkit-animation-name: cardFlipFront;
    -moz-animation-name: cardFlipFront;
    -ms-animation-name: cardFlipFront;
    animation-name: cardFlipFront;
    z-index: 2;
	width: 140px;
	float: left;
}
	
.back {
    -webkit-animation-name: cardFlipBack;
    -moz-animation-name: cardFlipBack;
    -ms-animation-name: cardFlipBack;
    animation-name: cardFlipBack;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
	width: 140px;
	float: left;
}	


}

@media only screen and (min-width:321px) and (max-width:425px) {
.front {
    -webkit-animation-name: cardFlipFront;
    -moz-animation-name: cardFlipFront;
    -ms-animation-name: cardFlipFront;
    animation-name: cardFlipFront;
    z-index: 2;
	width: 169px;
	float: left;
}
	
.back {
    -webkit-animation-name: cardFlipBack;
    -moz-animation-name: cardFlipBack;
    -ms-animation-name: cardFlipBack;
    animation-name: cardFlipBack;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
	width: 169px;
	float: left;
}	

}

@media only screen and (min-width:426px) and (max-width:768px)  { 

    .front {
		-webkit-animation-name: cardFlipFront;
		-moz-animation-name: cardFlipFront;
		-ms-animation-name: cardFlipFront;
		animation-name: cardFlipFront;
		z-index: 2;
		width: 193px;
		float: left;
	}
		
	.back {
		-webkit-animation-name: cardFlipBack;
		-moz-animation-name: cardFlipBack;
		-ms-animation-name: cardFlipBack;
		animation-name: cardFlipBack;
		-webkit-transform: rotateY(-180deg);
		-moz-transform: rotateY(-180deg);
		-ms-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
		width: 193px;
		float: left;
	}	

    
    
 }




}


@media only screen and (min-width:1024px) and (max-width:1339px) 

{
	
		.front {
    -webkit-animation-name: cardFlipFront;
    -moz-animation-name: cardFlipFront;
    -ms-animation-name: cardFlipFront;
    animation-name: cardFlipFront;
    z-index: 2;
	width: 137px;
}
	
.back {
    -webkit-animation-name: cardFlipBack;
    -moz-animation-name: cardFlipBack;
    -ms-animation-name: cardFlipBack;
    animation-name: cardFlipBack;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
	width: 137px;
}	
	
	.clients-mr {
        width: 137px;
}

	
}



@media only screen and (min-width:1440px) and (max-width:2500px) 

{
	
		.front {
    -webkit-animation-name: cardFlipFront;
    -moz-animation-name: cardFlipFront;
    -ms-animation-name: cardFlipFront;
    animation-name: cardFlipFront;
    z-index: 2;
	width: 195px;
}
	
.back {
    -webkit-animation-name: cardFlipBack;
    -moz-animation-name: cardFlipBack;
    -ms-animation-name: cardFlipBack;
    animation-name: cardFlipBack;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
	width: 195px;
}	
	
	.clients-mr {
		width:195px;
}

	
}
@media(max-width:767px){
.back{
    width: 100%;
}
.front{
    width: 100%;
}	
	
}