/* Module Custom Styles */
.containerBox {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 2.6rem;
}

.containerBox p {
    margin-bottom: 0px;
}

.text-box {
    position: absolute;
    height: 100%;
    padding: 1rem;
    text-align: center;
    width: 100%;
    
    color: #fff;
    font: normal normal normal 16px/22px Montserrat;
}

.class-details {
    opacity: 0;
    text-align: left;
}

/*
.text-box:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
*/

h4 {
    display: inline-block;
    font-size: 20px; /*or whatever you want*/
    color: #FFF;
    font: normal normal normal 22px/27px Montserrat;
    padding-bottom: 20px;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.animated-pullup {
    /* Initial state: hidden below and transparent */
    transform: translateY(80%);
    animation: pullDownAnimation 250ms forwards ease-out;
}

.animated-vanish {
    /* Initial state:  transparent */
    opacity: 0;
    animation: vanishAnimation 250ms forwards ease-out;
}

@media (min-width: 768px) {
    .containerBox:hover > .animated-pullup {
        /* Initial state: hidden below and transparent */
        transform: translateY(80%);
        background: linear-gradient(0deg,rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 100%);
        /* Apply the animation */
        animation: pullUpAnimation 250ms forwards ease-out;
    }

    .containerBox:hover .animated-vanish {
        /* Initial state: transparent */
        /* Apply the animation */
        animation: unvanishAnimation 250ms forwards ease-out;
    }
}

@keyframes unvanishAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes vanishAnimation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes pullUpAnimation {
    0% {
        transform: translateY(80%); /* Start from below */

    }

    100% {
        transform: translateY(20%); /* Move to top position */

    }
}

@keyframes pullDownAnimation {
    0% {
        transform: translateY(20%); /* Start from Top */

    }

    100% {
        transform: translateY(80%); /* Move to original hidden position */

    }
}