.card {
  width: 241px;
  height: 309px;
  margin: 0 25px 20px  10px;
  position: relative;
  cursor: pointer;
  -webkit-perspective: 600px;
  perspective: 200px; 
  float:left; 
	 }
	 
   .card img {
    margin: 0;
		}

  .card .front, .card .back {
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 241px;
	height: 309px;
	border: 1px solid #c3c3c3;
	padding: 0px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-box-shadow: 10px 5px 4px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 10px 5px 4px rgba(0, 0, 0, 0.1);
	box-shadow: 10px 5px 4px rgba(0, 0, 0, 0.1);
	-webkit-transition-duration: 0.5s, 0.2s;
	-moz-transition-duration: 0.5s, 0.2s;
	-ms-transition-duration: 0.5s, 0.2s;
	-o-transition-duration: 0.5s, 0.2s;
	transition-duration: 0.5s, 0.2s;
	-webkit-transition-property: -webkit-transform, box-shadow;
	-moz-transition-property: -moz-transform, box-shadow;
	-ms-transition-property: -ms-transform, box-shadow;
	-o-transition-property: -o-transform, box-shadow;
	transition-property: transform box-shadow;
}
  .card .front {
    z-index: 900;
    background: #fff;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg); }

    .card .front a {
      visibility: hidden; }

  .card.flip .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg); }

  .card .back {
    z-index: 800;
    background:#404040;
    border-color: #999;
    color: #fff;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg); }

 .card.flip .back {
    z-index: 1000;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5); }
	
	
	
	.card.flip .back li{
		line-height: 1.3em;
		margin-bottom: 3px;
	}

  .card .front:hover {
    border-color: #cccccc;
    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); }
	
    .card .front:hover a {
      visibility: visible; }
	  
  .card .flip_back, .card .flip_front {
    visibility: hidden;
    position: absolute;
    top: 5px;
    right: 0px;
    width:25px;
    height: 50px;
	}
	
  .card .flip_front {
    background: transparent url("../imagenes/icon.png") 0 0 no-repeat; }
  .card .flip_back {
    background: transparent url("../imagenes/icon.png") 0 -30px no-repeat; }
	
  .card:hover {
    z-index: 1000; }
	
    .card:hover .flip_back, .card:hover .flip_front {
      visibility: visible;
	  }
	  
.texto{
	font-size:15.5px;
	font-family:"Open Sans", Arial, sans-serif;
	padding:0px 3px 0 5px;
 }
	
	
.titulo {
	color: #23a449;
	font-size: 17px;
	font-size: 1.4vw;
	font-weight:bold;
	text-shadow: 1px 1px 1px #414141;
	padding: 2% 2% 0% 2%;
	}
	
.f_verde2{
	   position: absolute;
	  background: transparent url("../imagenes/respuesta-verde-2.png") 0 0 no-repeat;
	    height: 100%;
	  }
.f_rosa{
	   position: absolute;
	  background: transparent url("../imagenes/respuesta-rosa.png") 0 0 no-repeat;
	    height: 100%;
	  }
.f_naranja{
	   position: absolute;
	  background: transparent url("../imagenes/respuesta-naranja.png") 0 0 no-repeat;
	    height: 100%;
	  }
	  
.f_amarillo{
	   position: absolute;
	  background: transparent url("../imagenes/respuesta-amarillo.png") 0 0 no-repeat;
	    height: 100%;
	  }
	  	  
.f_azules{
	   position: absolute;
	  background: transparent url("../imagenes/respuesta-azules.png") 0 0 no-repeat;
	    height: 100%;
	  }
	  
.f_rojas{
	   position: absolute;
	  background: transparent url("../imagenes/respuesta-rojas.png") 0 0 no-repeat;
	    height: 100%;
	  }
.f_verdes{
	   position: absolute;
	  background: transparent url("../imagenes/respuesta-verdes.png") 0 0 no-repeat;
	    height: 100%;
	  }