.p-larger {
  font-style: 15px;
}
.fg-danger {
  color: #F44336;
}
.fg-success {
  color: #4CAF50;
}
.fg-green {
  color: #61C100;
}
.fg-orange {
  color: #FF8040;
}
.fg-blue {
  color: #4242FF;
}
.fg-brown {
  color: #A71417;
}
.fg-red {
  color:#FF0000;
}
.fg-purple {
  color: #C400C4;
}
.text-center {
  text-align: center;
}
.text-shadow {
  text-decoration: underline;
}
.card-inner-text {
  padding: 10px 20px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  color: #fff;
  background-color: rgba(255,128,0,1.0);
}
.card-inner-text.top {
  background-color: rgba(0,0,255,0.7);
  position: absolute; 
  bottom: 2%;
  left: 20%; 

}
.custom-header {
  padding: 10px 20px;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
}
.divider {
  margin: 20px 0;
}
.overlay {
  background-color: rgba(0,0,90,0.2);
  width: 100%;
  height: 100%;
  position: absolute;
}
.card-img {
  background-size: cover !important; 
  background-repeat: no-repeat !important; 
  background-position: center !important;
  width: 100%; 
  height: 100%; 
}
.card {
  position: relative;
  float: left;
  padding-bottom: 25%;
  height: 200px;
  width: 32%;
  text-align: center;
  margin: 2px;
}

.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card__front,
.card__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card__front {
  background-color: #ccc;
}

.card__back {
  background-color: #f4f4f4;
  padding: 20px;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

/**

Efect on Hover  

**/
.card.effect__hover:hover .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__hover:hover .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

/**

Efect on click  

**/
.card.effect__click.flipped .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__click.flipped .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

/**

Efect on random  

**/
.card.effect__random.flipped .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__random.flipped .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

/* vendor prefixes removed for clarity */
.ribbon {
    width: 97%;
    margin: 10px auto;
    padding: 0 20px 0;
    position: relative;
    color: #444;
    background: #fff;
    /*border: 1px solid #d2d2d2;*/
    border-radius: 3px;
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.1);*/
}
.ribbon h3 {
    display: block;
    height: 50px;
    line-height: 1.3;
    width: 360px;
    margin: 0;
    padding: 5px 10px;
    position: relative;
    left: -16px;
    top: 8px;
    color: #fff;
    text-shadow: 0 1px 1px #111;
    border-top: 1px solid #363636;
    border-bottom: 1px solid rgba(0,0,255,0.9);
    background: rgba(0,0,255,0.7);
    background: linear-gradient(top, #383838 0%, #262626 100%);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ribbon h3::before,
.ribbon h3::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    bottom: -11px;
    z-index: -10;
    border: 5px solid;
    border-color: rgba(0,0,255,0.9) transparent transparent transparent;    
}
.ribbon h3::before {left: 0;}
.ribbon h3::after {right: 0;}
/* Round */
.ribbon.round h3 {
    border-radius: 4px;
}
.ribbon.round h3::before,
.ribbon.round h3::after {
    width: 10px;
    height: 10px;
    bottom: -4px;
    border: none;
    border-radius: 10px;
}
.ribbon.round h3::before {
    background: #33aaf8;
    background: linear-gradient(left, #33aaf8 0%, #0674bb 100%);
}
.ribbon.round h3::after {
    background: #33aaf8;
    background: linear-gradient(right, #33aaf8 0%, #0674bb 100%);
}