/*-----------------------*/
html,
body {
    text-align: center;
    /*padding: 30px;*/
    background: #f8f4f2;
    font-family: Arial;
}

.a-box {
    display: inline-block;
    width: 240px;
    text-align: center;
}

.img-container {
    height: 230px;
    width: 200px;
    overflow: hidden;
    border-radius: 0px 0px 20px 20px;
    display: inline-block;
}

    .img-container img {
        transform: skew(0deg, -13deg);
        height: 250px;
        margin: -35px 0px 0px -70px;
    }

.inner-skew {
    display: inline-block;
    border-radius: 20px;
    overflow: hidden;
    padding: 0px;
    transform: skew(0deg, 13deg);
    font-size: 0px;
    margin: 30px 0px 0px 0px;
    background: #c8c2c2;
    height: 250px;
    width: 200px;
}

.text-container {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    padding: 120px 20px 20px 20px;
    border-radius: 20px;
    background: #fff;
    margin: -120px 0px 0px 0px;
    line-height: 19px;
    font-size: 14px;
}

    .text-container h3 {
        margin: 20px 0px 10px 0px;
        color: #04bcff;
        font-size: 18px;
    }



.tariffCards {
    position: absolute;
    top: 30%;
    left: 45%;
    margin: -180px 0 0 -140px;
    user-select: none;
    transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
}

    .tariffCards:after {
        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: 450px;
        height: 140px;
        border-radius: 12px;
        color: #fff;
        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: '';
            width: 200%;
            height: 200%;
            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: 0px;
            z-index: 3;
            background-color: #8063e1;
            background-image: linear-gradient(135deg, #bd7be8, #8063e1);
            box-shadow: 20px 20px 60px rgba(34,50,84,0.5), 1px 1px 0px 1px #8063e1;
        }

        .tariffCards > div.premiumeconomy {
            margin-top: -70px;
            z-index: 2;
            background-color: #3f58e3;
            background-image: linear-gradient(135deg, #7f94fc, #3f58e3);
            box-shadow: 20px 20px 60px rgba(34,50,84,0.5), 1px 1px 0px 1px #3f58e3;
        }

        .tariffCards > div.business {
            margin-top: -70px;
            z-index: 1;
            background-color: #2c6fd1;
            background-image: linear-gradient(135deg, #21bbfe, #2c6fd1);
            box-shadow: 20px 20px 60px rgba(34,50,84,0.5), 1px 1px 0px 1px #2c6fd1;
        }

        .tariffCards > div.first {
            margin-top: -70px;
            background-color: #352f64;
            background-image: linear-gradient(135deg, #415197, #352f64);
            box-shadow: 5px 5px 60px rgba(34,50,84,0.1), 1px 1px 0px 1px #352f64;
        }

        .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;
            }