.flip {
   width: 100%;
   min-height: 355px;
   height: auto;
   position: relative;
}

@media screen and ( max-width: 1199px ){
  .flip {
	   width: 100%;
	   min-height: 287px;
	   height: auto;
	   position: relative;
	}
}
@media screen and ( max-width: 991px ){
  .flip {
	   width: 100%;
	   min-height: 213px;
	   height: auto;
	   position: relative;
	}
}

@media (max-width: 767px) {
  .flip {
     width: 100%;
     min-height: 325px;
     height: auto;
     position: relative;
  } 
}

@media (max-width: 700px) {
  .flip {
     width: 100%;
     min-height: 270px;
     height: auto;
     position: relative;
  } 
}

@media (max-width: 600px) {
  .flip {
     width: 100%;
     min-height: 230px;
     height: auto;
     position: relative;
  } 
}

@media (max-width: 500px) {
  .flip {
     width: 100%;
     /*min-height: 190px;*/
     height: auto;
     position: relative;
  } 
}

@media (max-width: 400px) {
  .flip {
     width: 100%;
     /*min-height: 150px;*/
     height: auto;
     position: relative;
  } 
}



.flip .flip-card.flipped {
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg); /* IE 9 */
  -moz-transform:rotatey(-180deg); /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg); /* Opera */
}

.flip .flip-card.flipped .back {
  -ms-backface-visibility: visible; /* Internet Explorer */
}

.flip .flip-card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transform-style: preserve-3d;
  -moz-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  -ms-transition: 0.5s;
  -o-transform-style: preserve-3d;
  -o-transition: 0.5s;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.flip .flip-card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  backface-visibility: hidden;  /* W3C */
  -webkit-backface-visibility: hidden; /* Safari & Chrome */
  -moz-backface-visibility: hidden; /* Firefox */
  -ms-backface-visibility: hidden; /* Internet Explorer */
  -o-backface-visibility: hidden; /* Opera */
}

.flip .flip-card .front {
  position: absolute;
  z-index: 1;
  cursor: pointer;
}
.flip .flip-card .back {
    cursor: pointer;
    
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg); /* IE 9 */
  -moz-transform:rotatey(-180deg); /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg); /* Opera */

}
.card-container{
	position: relative;
}