/* PROMO CARDS */

.flip-card-front img {
  width: auto;
  height: 80%;
  margin-top: 8%;
}


.flip-card {
    background-color: transparent;
    border: none;
    width: 90%;
    margin: auto;
    height: 45rem;
    perspective: 150rem;
  }



  .shadow {filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));} /*Wrap Flip Card inner in this for shadow*/
  
  .flip-card-inner {
    position: relative;
    width: 90%;
    margin: auto;
    height: 45rem;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);

  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-card-front {
    background-color: #bbb;
    clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 100%, 0 100%);
  }
  
  .flip-card-back {
    background-image: linear-gradient(180deg, #258dab, #0d434e);
    color: white;
    background-color: #bbb;
    transform: rotateY(180deg);
    clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
  }

  



/* PROMO CARDS */


@media only screen and (max-width: 56.25em),
        only screen and (hover: none) {

  .flip-card {
    height: auto;
  }

  .flip-card-front img {
    width: auto;
    height: 75%;
    margin-top: 18%;
    object-fit: contain;
}

  .shadow {filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));} /*Wrap Flip Card inner in this for shadow*/
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    margin: auto;
    height: 75rem;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(0);

  }
  
  .flip-card-front{
    position: relative;
    width: 100%;
    height: 40rem;
  }
  
  
  .flip-card-back {
    position: relative;
    width: 100%;
    height: 38rem;
    margin-top: -10rem;
    /*background-image: linear-gradient(180deg, #bbb, #258dab, #0d434e);*/
    background-image: linear-gradient(180deg, #bbb, #bbb);
    color: #3e3e3f;
    background-color: #bbb;
    transform: rotateY(0);
    clip-path: none;
  }

}



.u-center-text {
  text-align: center;
}
 
.u-margin-bottom-small {
 margin-bottom: 2rem;
}  

.u-margin-bottom-medium {
 margin-bottom: 4rem;
} 

.u-margin-bottom-large {
 margin-bottom: 6rem;
} 

.u-margin-bottom-xlarge {
 margin-bottom: 8rem;
} 

.u-margin-bottom-xxlarge {
 margin-bottom: 12rem;
} 

.u-margin-top-small {
  margin-top: 2rem;
  }

.u-margin-top-medium {
margin-top: 4rem;
}
      @media (max-width: 56.25em){
        .u-margin-top-medium {
          margin-top: 1rem;
        } 
      }

.u-margin-top-large {
margin-top: 6rem;
}