.flip {
  -webkit-perspective: 800;
perspective: 800;

    position: relative;
 text-align: center;
}
.flip .card.flipped {
  -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}
.flip .card.clipped1 {
  -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}
.flip .card {

  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
    
}
.flip .card .face {

  -webkit-backface-visibility: hidden ;
    backface-visibility: hidden ;
  z-index: 2;
   
}
.flip .card .front {
  position: absolute;
   width: 100%;
  z-index: 1;
  
}
.flip .card .back {
  -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
     
}
  .inner{margin:0px !important;}
  
  .showfront {
   border: 1px solid #3484c9;
  height: 260px;
  width: 100%;
  background-color: #f7f7f7;
  color: #000;
   border-radius: 15px;
  }
  .showback {
   border: 1px solid #3484c9;
  height: 260px;
  width: 100%;
    background-color: #4780c6;
    color: #fff;
     border-radius: 15px;
  }

.flip-icon {
  font-size: 36px;
  color: #3584c9;
 text-align: center;
 margin: 6px 0px 8px 0px;
}
.card .name {
    font-size: 22px;
    line-height: 28px;
    margin: 10px 0 0;
    text-align: center;
    text-transform: capitalize;
}
.front-name {
  color: #000;
    font-size: 22px;
    text-align: center;
    margin-top: 6px;
}
 .back-name {
  color: #fff;
    font-size: 22px;
    text-align: center;
    margin-top: 6px;
}
.text-center-front {
color: #000;
    text-align: center;
    padding: 4px;
}
.text-center-back {
color: #fff;
    text-align: center;
    padding: 4px;
}
  .border-last {
  border: 1px solid #3484c9;
  
  }
    .showface {
   border: 1px solid #3484c9;
  height: 240px;
width:100%;
  background-color: #f7f7f7;
  color: #000;
   border-radius: 15px;
   padding: 20px;
  }
      .showface1 {
   border: 1px solid #3484c9;
  height: 240px;
width: 340px;
  background-color: #f7f7f7;
  color: #000;
   border-radius: 15px;
   padding: 20px;
  }
        .showface2 {
   border: 1px solid #3484c9;
  height: 240px;
width: 340px;
  background-color: #f7f7f7;
  color: #000;
   border-radius: 15px;
   padding: 20px;
  }
         .showface3 {
   border: 1px solid #3484c9;
  height: 240px;

  background-color: #f7f7f7;
  color: #000;
   border-radius: 15px;
padding: 20px;
margin: 0px 0px 0px 0px;
  } 
  html .call-to-action-orange {
  background: #fb8825;
  
  
  }
  html .heading-orange {
   color: #fb8825;
  }