/** Animation Options **/


@keyframes animation1 {
    0% {
        transform: rotate(5deg) scale(1.05);
        box-shadow: 1rem 2rem 4rem 0rem rgb(0 0 0 / 23%);
    }
    100% {
        transform: rotate(7deg) scale(1.1);
        box-shadow: 0rem 1rem 4rem 0rem rgb(0 0 0 / 13%);
    }
}

@keyframes animation2 {
    0% {
        transform: scale(.8);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes rotate360 {
    0% {
        transform: rotate(-00deg);
    }
    100% {
        transform: rotate(-160deg);
    }
}

.animation1 {
    animation: 8s ease-in-out infinite animation1;
    animation-direction: alternate;
}

.animation2 {
    animation: 10s ease-in-out infinite animation2;
    animation-direction: alternate;
}

.shake {
    animation: 12s ease-in-out infinite shakeUpDown;
    animation-direction: alternate;
}

.shake2 {
    animation: 6s ease-in-out infinite shakeUpDown;
    animation-direction: alternate;
}

.rotate-slow {
    animation: 4s ease-in-out infinite rotate360;
    animation-direction: alternate;
}


/**   Hero A **/

.hero-a .overlay {
    z-index: 2;
    top: -4rem;
    width: 100%;

}
.hero-a .container.row {
    justify-content: space-around;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
        padding-left: 0;
}

.hero-a .image-container {
    padding-right: 0;
        padding-left: 0;
    max-height: 20rem;
    overflow: hidden;
    z-index: 1;

}

@media (min-width: 1200px) {
     .hero-a {
         padding-top: 4rem;
         padding-bottom: 6rem;
     }
    .hero-a .container.row {
        justify-content: left;
    }
    .hero-a .overlay {
        margin-top: 5rem;
    }

    .hero-a .overlay-card {
        align-content: center;
        min-height: 425px; /* see front */
    }

    .hero-a .overlay-card .overlay {
        top: -3rem;
    }

    .hero-a .image-container {

        margin-top: 0;
        max-height: 100%;
        overflow: visible;
        position: absolute;
        top: 0;
        right: 2rem;
    }


    /** Transformations **/
    .hero-a .image-container img {
        /*        animation: 8s ease-in-out infinite animation1;
                animation-direction: alternate;*/
        /*        margin-top: 0;
                transform: rotate(3deg) scale(1);*/
        /*        opacity: 0.9;*/


    }


}