.flip-container {
               perspective: 1000;
           }

               .flip-container:hover .flipper, .flip-container.hover .flipper {
                   transform: rotateY(180deg);
               }

           .flip-container, .front, .back {

           }
           .front {
               
           }
           .back {
              
           }

           .flipper {
               transition: 0.6s;
               transform-style: preserve-3d;
               position: relative;
           }


           .back {
               backface-visibility: hidden;
               position: absolute;
               top: 0;
               left: 0;
           }


           .front {
               z-index: 2;
           }

           .back {
               transform: rotateY(180deg);
           }
           .front h3 {
               position: absolute;
               background-color: #fff;
               width: 100%;
               text-align: center;
               bottom: 0;
               left: 0;
               padding: 20px;
               font-family: 'Lato-Black';
               font-size: 24px;
               color: #000;
           }
           .back_content {
               position: absolute;
               width: 100%;
               height: 100%;
               opacity: 0.96;
               background-color: #000;
               top: 0;
               left: 0;
               padding: 50px;

           }
               .back_content span {
                   color: #ffdd23;
                   font-size: 80px;
                   font-family: 'Lato-Black';
                   line-height: 64px;
               }
               .back_content p {
                   font-family: 'Lato-Regular';
                   font-size: 22px;
                   color: #fff;
                   line-height: 32px;
                   margin-top: 30px;
               }