﻿.header-highlight .d-flex {
    display: flex;
    flex-direction: column-reverse;
}

.header-highlight .highlight {
    background-color: #C30000;
    display: flex;
    align-items: center;
    text-align: center;
    padding: 50px 10.66%;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    min-height: 33vh;
}

    .header-highlight .highlight .title {
        margin-top: 0px;
        font-size: 36px;
        font-family: Roboto;
        font-weight: 500;
        color: #fff;
        text-transform: none;
        line-height: 42px;
    }

    .header-highlight .highlight .subtitle {
        font-size: 20px;
        line-height: 26px;
    }

        .header-highlight .highlight .subtitle a {
            text-transform: none !important;
            color: #fff;
        }

.header-highlight .highlightImage {
    height: 100%;
    max-width: 100%;
    max-height: 574px;
    overflow: hidden;
}

    .header-highlight .highlightImage img {
        width: 100%;
        height: 550px;
        object-fit: cover;
        min-height: 460px;
    }

.header-highlight .button-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px 0 0;
    width: 100%;
}

    .header-highlight .button-area a {
        width: 100%;
    }

    .header-highlight .button-area .button {
        background-color: #ffffff;
        color: #242424;
        border: 1px solid #fff;
        height: 50px;
        font-size: 18px;
        font-weight: 400;
        max-width: 100%;
        white-space: nowrap;
        width: 100%;
    }

        .header-highlight .button-area .button:hover {
            color: #ffffff;
            border-color: #fff !important;
        }

        .header-highlight .highlight .button-area .button {
            margin-top: 15px;
        }

        .header-highligh .highlight .button-area a:first-of-type .button {
            margin-top: 5px;
        }
.header-highlight div#video-container {
    height: 550px;
}

    .header-highlight div#video-container video {
        height: 100%;
    }


@media screen and (min-width:768px){
    .header-highlight .d-flex {
        display: flex;
        flex-direction: unset;
    }

    .header-highlight .button-area .button,
    .header-highlight .button-area > a {
        width: 100% !important;
    }

    .header-highlight .highlight {
        padding: 0 3% !important;
    }

    .header-highlight .highlightImage {
        max-height: initial;
    }

    .header-highlight .col-md-9#video-container {
        width: 75%;
    }

    .header-highlight .button-area .button {
        max-width: 240px;
        white-space: nowrap;
        width: 100%;
    }
    .header-highlight .highlight-slick .slick-dots {
        right: 34px;
        bottom: 54px !important;
        width: auto;
    }

    .header-highlight .highlightImage {
        min-height: 398px;
    }

}

