﻿.flip-card {
    background-color: transparent;
    width: 500px;
    height: 500px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}


/*.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 {
}

.flip-card-back {
    transform: rotateY(180deg);
}

body {
    background-color: #282828;
    color: white;
}

.logoAnimation {
    -webkit-animation: rotate-logo 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    -webkit-animation-delay: 1s;
    animation: rotate-logo 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation-delay: 0.5s;
}

.fadeInAnimation {
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes rotate-logo {
    0% {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
    }
}


@-webkit-keyframes scale-up-center {
    0% {
        display: none;
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    1% {
        display: block;
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        display: block;
        opacity: 1;
    }
}

@keyframes scale-up-center {
    0% {
        display: none;
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    1% {
        display: block;
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        display: block;
        opacity: 1;
    }
}
