body {
    font: 400 1.125rem 'Karla', 'Verdana', sans-serif;
    color: rgba(0,0,0,.75);
    background: rgba(0,0,0,0);
	line-height: 1.75rem;
  }
  
  h1 {
    font-size: 2rem;
    font-weight: 600;
  }
  
  .row.no-gutters {
    margin: -5px !important;
  }
  
  .row.no-gutters > * {
    padding: 5px !important;
  }
  
  .flipper {
    height: 0;
    padding-bottom: 100%; 
    position: relative;
    -webkit-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
  }

  .no-pad {
    padding-bottom: calc(50% + 5px) !important;
  }
  
  @media (min-width: 576px) {
  
    .ratio-not-1-1 {
      padding-bottom: calc(50% - 5px);
    }  
  }
  
  .flipper-card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .wide {
    height: calc(25% + 5px) !important;
    position: absolute !important;
    padding-bottom: calc(25% - 5px) !important;
  }
  
  .flipper-front,
  .flipper-back {
    position: absolute;
    width: 100%;
    height:100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* border-radius: 10px; */
    background: #c1c3c5;
    display: inline;
    align-items: center;
    justify-content: center;
  }

   /* .flipper-front {
    justify-content: center;
    padding-top: 87%;
  }
    */

    .flipper-front {
      justify-content: center;
      padding-top: 10px;
    }
  
  .flipper-back {
    background: #e1e3e5;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);  
    padding-top: 10px;
    padding-bottom: 50px;   	
  }

    .flipper-front,
  .flipper-back div {
    height:100%;
	padding-left: 3%;
  margin-right: 2%;

  }
  
    .flipper-front div {
	text-align:center;
  }
  
  .flipper-back div {
    overflow-y:auto;
    height:90%;
  }
  
    .flipper-back span {
    padding-left: 1.5em;
    text-indent:-1.5em;
  }
  
  .flipper-card.flipper-is-flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }