.card__pages{
 width:100%;
 height:32px;
 font-size:14px;
  margin:2em 0 1em 0 ;
  display:inline-block;
}

.card__pages_a_on{
	width:32px;
height:32px;
	float:left;
border:thin solid #1D87FF;
margin:0 0.25em 0 0.25em;
cursor:pointer;
color:#f1f1f1;
background-color:#1D87FF;
border-radius:2px;    
	-webkit-border-radius:2px;

}


.card__pages_a_off{
	width:32px;
height:32px;
	float:left;
border:thin solid #999;
margin:0 0.25em 0 0.25em;
cursor:pointer;
color:#999;
background-color: transparent
border-radius:2px;    
	-webkit-border-radius:2px;
}
.card__pages_a_off:hover{
color:#f9f9f9;
background-color:#1D87FF;
}

.card__pages_cell{
  text-align:center;
  position:relative;
  top:5px;;

}













.cat_title{
	text-align:center;
	font-size:0.9em;
	border-bottom:thin solid #F33;
	width:auto;
	display:inline-block;
	margin:1em 0 0 0;
	
	}



figure.my_card {
 
  position: relative;
  overflow: hidden;
  margin:1em ;
  min-width: 120px;
  max-width: 330px;


  background: #fff;
  color: #000000;
  border:solid thin #ccc;
  
  float:left;
   z-index:0;
   box-shadow:1px 1px 9px #999 ;
   border-radius:6px;    
	-webkit-border-radius:6px;
}
figure.my_card * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.my_card > img {
  width: 50%;
  border-radius: 50%;
  border: 4px solid #fff;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: scale(1.6);
  transform: scale(1.6);
  position: relative;
  float: right;
  right: -15%;
  z-index: 5;
  cursor:pointer;
}
figure.my_card figcaption {
  padding: 20px 30px 20px 20px;
  position: absolute;
  left: 0;
  width: 50%;
  
}
figure.my_card figcaption h2{
  margin: 0;
  text-align: left;
  padding: 10px 0;
  width: 100%;

    font-size: 0.9em;
  opacity: 0.8;

 }
 
figure.my_card figcaption p {
	position:relative;
  margin: 0;
  text-align: left;
  width: 100%;
    font-size: 12px;
  opacity: 0.85;
  overflow:hidden;
  z-index:1;
  line-height:18px;
  vertical-align:middle;
  
  
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;


 
}





figure.my_card figcaption .my_title {
  font-size: 1em;
  font-weight:bold;
  text-transform: uppercase;
  border-bottom: 1px solid #ccc;
  margin-bottom:0.25em;
  padding:0 0 0.25em 0;
}


figure.my_card figcaption .icons {
  width: 100%;
  text-align: left;
}
figure.my_card figcaption .icons i {
  font-size: 26px;
  padding: 5px;
  top: 50%;
  color: #000000;
}


figure.my_card .position {
  width: 100%;
  text-align: left;
  padding: 8px 0 6px 15px;
  font-size: 0.7em;
  opacity: 1;
  color: #ffffff;
  background: #000000;
  clear: both;
   z-index: 3;
   position:relative;
   cursor:pointer;
}




figure.my_card.blue .position {
  background: #20638f;
}
figure.my_card.red .position {
  background: #962d22;
}
figure.my_card.yellow .position {
  background: #bf6516;
}
figure.my_card:hover > img,
figure.my_card.hover > img {
  right: -12%;
}

body {
  background-color: #fcfcfc;

  justify-content: center;
  align-items: center;

  margin: 0;
  height: 100%;
}