/** HIGHLIGHT **/

.generic-highlight footer {
    margin-bottom: 50px;
}

.generic-highlight {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    color: #fff;
    position: relative;
    background-size: cover;
}

.generic-highlight {
    max-height: 570px;
    overflow: hidden;
}

    .generic-highlight .video-container {
        max-height: 570px;
        width: 100%;
    }

.generic-highlight video {
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
}

.generic-highlight header::before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

    .generic-highlight .highlight-text-wrapper {
        text-align: center;
        text-transform: uppercase;
        margin-top: 20px;
        padding: 0 30px;
    }

.generic-highlight header .smallText, footer .smallText {
    font-size: 12px;
    margin: 0;
    margin-bottom: 11px;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
}

.generic-highlight header .bigText, footer .bigText {
    font-size: 26px;
    margin: 0;
    margin-bottom: 20px;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
}

.generic-highlight header .highlight-text-area, footer .highlight-text-area {
    bottom: 0px;
    position: absolute;
    text-align: center;
    color: #fff;

}

/* buttons */
    .generic-highlight .highlight-text-wrapper .button {
        width: 75%;
        background-color: white;
        border: none;
        color: rgb(36,36,36);
        font-size: 14px;
        margin-bottom: 10px;
    }

.generic-highlight footer .highlight-text-wrapper .button {
    color: #c30000
}

.generic-highlight footer .highlight-text-wrapper .button a:hover {
    color: #fff
}


    .generic-highlight .highlight-text-wrapper .button:hover, footer .highlight-text-wrapper .button:hover {
        color: #fff;
    }

    .generic-highlight .image-container {
        min-height: 325px;
        background-position: center;
        background-size: cover;
        padding-top: 42%;
        max-height: 570px;
    }

.generic-highlight footer .image-container {
    background-size: cover;
}


.generic-highlight footer #image-container {
    background-size: initial;
    background-repeat: no-repeat;
    background-position: 40% 50%;
}


@media screen and (min-width: 768px) {

    .generic-highlight footer .image-container {
        background-position: center;
        padding-top: 0;
        max-height: 374px;
        background-position: 25% 95%;
        height: 374px;
    }


    .generic-highlight footer .highlight-text-area, footer .highlight-text-area {
        padding: 100px 0%;
    }

    /** HIGHLIGHT **/
    .generic-highlight header, footer {
        padding: 0;
    }

        .generic-highlight header::before, footer::before {
            margin: 0;
        }

        .generic-highlight header .highlight-text-area, footer .highlight-text-area {
            float: none;
        }

        .generic-highlight header .highlight-text-wrapper, footer .highlight-text-wrapper {
            margin-top: 0;
            vertical-align: middle;
            float: none;
        }

        .generic-highlight header .smallText, footer .smallText {
            font-size: 14px;
            margin-bottom: 16px;
        }

        .generic-highlight header .bigText, footer .bigText {
            font-size: 40px;
            margin-bottom: 20px;
        }

        .generic-highlight header .highlight-text-area.left, footer .highlight-text-area.left {
            left: 1.75%;
        }

        .generic-highlight header .highlight-text-area.center, footer .highlight-text-area.center {
            left: 50%;
            top: 30%;
            transform: translate(-50%,-50%);
        }

        .generic-highlight header .highlight-text-area.right, footer .highlight-text-area.right {
            right: 1.75%;
        }

    /* buttons */
    .generic-highlight .highlight-text-wrapper .buttons-wrapper {
        padding: 0px 3%;
    }

    .generic-highlight .highlight-text-wrapper .button {
        max-width: 180px;
        font-size: 14px;
        width: 48%;
        display: inline-block;
        margin: 0 auto;
        margin-bottom: 10px;
    }

    .generic-highlight .highlight-text-wrapper {
        padding: 0 40px;
    }

}

@media screen and (min-width: 992px) {

    .generic-highlight footer .highlight-text-area.center {
        left: 50%;
        top: 34%;
        transform: translate(-50%,-50%);
    }

    .generic-highlight footer .highlight-text-area.center {
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .generic-highlight header .highlight-text-area, footer .highlight-text-area {
        top: 33%;
    }
}