.bg-home-fade-in {
    background-color: #e9ecef;
    -webkit-animation: fadein-bg 1.5s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein-bg 1.5s;
}

.bg-home-fade-in-dark {
    background-color:  #7a7a7a;
    opacity: 0;
    -webkit-animation: fadein-bg-dark 1.5s forwards; /* Safari, Chrome and Opera > 12.1 */
    animation: fadein-bg-dark 1.5s forwards;

}

.card-big-fade-in {
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 3s;
}


.home-title {
    border-radius: 25px;
    background-color: #5acbed;
    padding: 10px;
}


.green-box-fade {
    opacity: 0;
    animation:fadein 4s forwards;
    animation-delay: 0.2s;
    -webkit-animation: fadein 4s  forwards;
    -webkit-animation-delay: 0.2s;
}

.white-box-fade {
    opacity: 0;
    animation:fadein 4s forwards;
    animation-delay: 0.5s;
    -webkit-animation: fadein 4s  forwards;
    -webkit-animation-delay: 0.5s;
}


.bg-home {
    background-color: #e9ecef;
}

.bg-notice {
    background-color: #9e9e9e;
}

.card-slide-right {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    opacity: 0;
    animation: slide-in 1.5s forwards;
    -webkit-animation: slide-in 1.5s forwards;
}

.card-slide-left {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    opacity: 0;
    animation: slide-in 1.5s forwards;
    -webkit-animation: slide-in 1.5s forwards;
}


.card-slide-1 {
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    opacity: 0;
    animation: slide-in 1s forwards;
    -webkit-animation: slide-in 1s forwards;
}

.card-slide-2 {
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    opacity: 0;
    animation: slide-in 1s forwards;
    animation-delay: 0.2s;
    -webkit-animation: slide-in 1s forwards;
    -webkit-animation-delay: 0.2s;
}

.card-slide-3 {
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    opacity: 0;
    animation: slide-in 1s forwards;
    animation-delay: 0.4s;
    -webkit-animation: slide-in 1s forwards;
    -webkit-animation-delay: 0.4s;
}

.card-slide-4 {
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    opacity: 0;
    animation: slide-in 1s forwards;
    animation-delay: 0.6s;
    -webkit-animation: slide-in 1s forwards;
    -webkit-animation-delay: 0.6s;
}

.card-slide-5 {
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    opacity: 0;
    animation: slide-in 1s forwards;
    animation-delay: 0.8s;
    -webkit-animation: slide-in 1s forwards;
    -webkit-animation-delay: 0.8s;
}

.card-slide-6 {
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    opacity: 0;
    animation: slide-in 1s forwards;
    animation-delay: 1s;
    -webkit-animation: slide-in 1s forwards;
    -webkit-animation-delay: 1s;
}

.img-fade-1 {
    opacity: 0;
    animation:fadein 5s forwards;
    animation-delay: 0.1s;
    -webkit-animation: fadein 5s  forwards;
    -webkit-animation-delay: 0.1s;
}

.img-fade-2 {
    opacity: 0;
    animation:fadein 5s forwards;
    animation-delay: 0.5s;
    -webkit-animation: fadein 5s forwards;
    -webkit-animation-delay: 0.5s;
}


.dark-bg {
    background-color:  #7a7a7a;
}


.green-box {
    border-radius: 25px;
    background-color: #5acbed;
    padding: 10px;
}

.green-nobox {
    background-color: #5acbed;
    padding: 10px;
}

.light-box {
    border-radius: 25px;
    background-color: #f8f9fa;
    padding: 5px;
}


@keyframes fadein-bg-dark {
    100%   { opacity: 1; }
}


@-webkit-keyframes fadein-bg-dark {
    100%   { opacity: 1; }
}


@keyframes fadein-bg {
    from { background-color: #ffffff; }
    to   { background-color: #e9ecef; }
}


@-webkit-keyframes fadein-bg {
    from { background-color: #ffffff; }
    to   { background-color: #e9ecef; }
}

@keyframes slide-in {
    100% { 
        transform: translateX(0%);
        opacity: 1;
     }
}


@-webkit-keyframes slide-in {
    100% { 
        -webkit-transform: translateX(0%);
        opacity: 1;
     }
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}