@-ms-keyframes spin {
    from { -ms-transform: rotateY(0deg); }
    to { -ms-transform: rotateY(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotateY(0deg); }
    to { -moz-transform: rotateY(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotateY(0deg); }
    to { -webkit-transform: rotateY(360deg); }
}
@keyframes spin {
    from {
        transform:rotateY(0deg);
    }
    20% {
        transform:rotateY(10deg);
    }
    40% {
        transform:rotateY(-10deg);
    }
    60% {
        transform:rotateY(5deg);
    }
    80% {
        transform:rotateY(-5deg);
    }
    100% {
        transform:rotateY(0deg);
    }
}
@keyframes fullSpin {
    0% {
        transform:rotateY(0deg);
    }
    100% {
        transform:rotateY(360deg);
    }
    
}

    .card {
        cursor: pointer;
        animation: spin 5s ease-in-out;
        animation-iteration-count: infinite;
        max-width: 500px;
        height: 275px;
        margin: auto auto;
        border-radius: 20px;
        overflow: hidden;
        webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.425);
        -moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.425);
        box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.425);
        text-align: center;
        background-color: #fff;
        background-image: url(https://i.ibb.co/PjKf2YV/card1.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, transparent) , to(rgba(250, 250, 250, 0.1)));
    }

    .container {
        perspective: 1000px;
    
    }
    

    @media (max-width: 600px) {
        .card{
            max-width: 300px;
            height: 180px;
        }
    }


 
    
    
    
        .page-card-container {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-self: center;
    
        }
    
        .card-info {
            max-width: 700px;
            flex-basis: 500px;
            display: flex;
            flex-direction: column;
        }
        .cards {
            max-width: 500px;
            flex-basis: 400px;
        }
    
        .tariffCards {
            position: relative;
            margin-left: 50px;
            user-select: none;
            transform: translate3d(0, 0, 0);
            transform-style: preserve-3d;
          }
          .tariffCards:after {
            position: absolute;
            bottom: -27px;
            left: 5%;
            content: '';
            width: 65%;
            height: 10px;
            border-radius: 100%;
            background-image: radial-gradient(rgba(34,50,84,0.04), rgba(34,50,84,0));
          }
          .tariffCards > div {
            position: relative;
            width: 300px;
            height: 175px;
            border-radius: 12px;
            color: #000;
            transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
            transition: all 0.4s ease;
            overflow: hidden;
            cursor: pointer;
          }
          .tariffCards > div:after {
            position: absolute;
            top: -70px;
            left: 0;
            content: '';
            background-image: linear-gradient(60deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.1), rgba(255,255,255,0) 80%);
            transform: translateX(-100%);
          }
          .tariffCards > div img {
            margin-top: 15px;
            pointer-events: none;
          }
          .tariffCards > div h3 {
            position: absolute;
            bottom: 28px;
            left: 15px;
            font-size: 18px;
            font-weight: 800;
          }
          .tariffCards > div span {
            position: absolute;
            font-weight: 700;
            bottom: 15px;
            left: 15px;
            font-size: 12px;
            font-weight: 600;
            opacity: 0.8;
          }
          .tariffCards > div.economy {
            margin-top: 0;
            z-index: 3;
            background-color: #fff;
            background-image: url(https://i.ibb.co/PjKf2YV/card1.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            box-shadow: 20px 20px 80px rgba(34,50,84,0.5), 1px 1px 0px 1px #fff;
          }
          .tariffCards > div.premiumeconomy {
            margin-top: -70px;
            z-index: 2;
            background-color: #fff;
            background-image: url(https://i.ibb.co/4J0c3zq/Screen-Shot-2020-03-21-at-3-30-40-PM.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            box-shadow: 20px 20px 80px rgba(34,50,84,0.5), 1px 1px 0px 1px #fff;
          }
          .tariffCards > div.business {
            margin-top: -70px;
            z-index: 1;
            background-color: #fff;
            background-image: url(https://i.ibb.co/2ZDLKV1/Screen-Shot-2020-03-21-at-3-55-11-PM.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            box-shadow: 20px 20px 80px rgba(34,50,84,0.5), 1px 1px 0px 1px #fff;
          }
          .tariffCards > div.first {
            margin-top: -70px;
            background-color: #fff;
            background-image: url(https://i.ibb.co/StcH7s3/Screen-Shot-2020-03-21-at-3-55-20-PM.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            box-shadow: 20px 20px 80px rgba(34,50,84,0.5), 1px 1px 0px 1px #fff;
          }
          .tariffCards > div:hover {
            transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px);
          }
          .tariffCards > div:hover:after {
            transform: translateX(100%);
            transition: all 1.2s ease-in-out;
          }