html, body {
    background: #10a3f1;
    height: 100%;
}

h1 {
    color: #6b7d88;
}

.hide {
    display: none;
}

.uic-wrapper {
    height: 80%;
    width: 80%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective: 500px;
    perspective-origin: 50% -30%;
}

    .uic-wrapper ul {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

        .uic-wrapper ul li {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.3s;
        }

            .uic-wrapper ul li .cards-wrapper .card-front {
                position: relative;
                z-index: 3;
                box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.19);
                opacity: 1;
            }

            .uic-wrapper ul li .cards-wrapper .card-middle {
                z-index: 2;
                opacity: 0;
            }

            .uic-wrapper ul li .cards-wrapper .card-back {
                z-index: 1;
            }

            .uic-wrapper ul li .cards-wrapper .card-out {
                z-index: 0;
                opacity: 0;
            }

    .uic-wrapper nav {
        position: relative;
        z-index: 4;
    }

        .uic-wrapper nav a {
            color: #ffb902;
        }

        .uic-wrapper nav .btn-back {
            font-size: 28px;
            position: fixed;
            top: 20px;
            left: 20px;
            transition: all 0.3s ease;
        }

            .uic-wrapper nav .btn-back:active {
                transform: scale(0.96);
            }

            .uic-wrapper nav .btn-back.back-btn-hide {
                margin-top: -30px;
                opacity: 0;
            }

        .uic-wrapper nav .btn-finish,
        .uic-wrapper nav .btn-next {
            position: absolute;
            bottom: 10px;
            left: 10px;
            right: 10px;
        }

    .uic-wrapper .card {
        background-color: #fff;
        border-radius: 0;
        height: 100%;
        width: 100%;
        padding: 20px 20px 50px;
        border-radius: 8px;
        overflow: auto;
    }

    .uic-wrapper .noBack {
    }

    .uic-wrapper .toRight {
        transform: translate3d(0, 0, 100px);
        opacity: 0;
    }

    .uic-wrapper .toLeft {
        transform: none;
        opacity: 1;
    }

    .uic-wrapper:hover .card-middle {
        transform: translate3d(0, 0, -60px);
        opacity: .8;
    }

    .uic-wrapper:hover .card-back {
        transform: translate3d(0, 0, -120px);
        opacity: .4;
    }

.metaInfo {
    position: fixed;
    bottom: 20px;
    left: 20px;
    color: rgba(255, 255, 255, 0.8);
}

    .metaInfo a {
        color: #fff;
        text-decoration: underline;
    }
/*# sourceMappingURL=main.css.map */