﻿
/* cover video */

.cover-video {
    height: 0;
    padding-top: 128.125%;
}

    .cover-video .inner-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

        .cover-video .inner-item .content {
            position: relative;
            float: left;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

            .cover-video .inner-item .content .inner {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 0 14% 7.85% 14%;
                text-align: center;
                text-transform: uppercase;
            }

            .cover-video .inner-item .content h6 {
                margin-top: 0;
                margin-bottom: 2%;
                font-size: 18px;
            }

            .cover-video .inner-item .content h2 {
                margin-top: 0;
                margin-bottom: 8.5%;
                font-size: 46px;
            }

            .cover-video .inner-item .content a .button {
                width: 100%;
                background-color: white;
                border: none;
                color: rgb(36,36,36);
                font-size: 20px;
                margin-bottom: 10px;
            }

            .cover-video .inner-item .content a:hover .button {
                color: white;
            }

        .cover-video .inner-item > .shadow {
            position: absolute;
            top: 0;
            background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.30) 100%);
            background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.30) 100%);
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
            left: 0;
            width: 100%;
            height: 100%;
        }

    .cover-video .image-placeholder {
        position: relative;
        height: 0;
        padding-bottom: 56.25%;
        overflow: hidden;
        margin-bottom: 12%;
    }

        .cover-video .image-placeholder:hover {
            transition: filter 250ms ease-in-out;
            filter: brightness(1.2);
            cursor: pointer;
        }

        .cover-video .image-placeholder img {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            margin: auto;
        }

        .cover-video .image-placeholder .shadow {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
            background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
        }


        .cover-video .image-placeholder .video.logo {
            position: absolute;
            top: 0;
            left: 0;
            fill: none;
            width: 100%;
            height: 100%;
            padding: 17%;
        }

        .cover-video .image-placeholder:hover .logo rect#icon_white_hover_layer {
            font-size: 106px;
        }





@media (max-width: 425px) {

    .cover-video .inner-item .content h6 {
        font-size: 14px;
    }

    .cover-video .inner-item .content h2 {
        font-size: 28px;
    }

    .cover-video .inner-item .content a .button {
        width: 100%;
        background-color: white;
        border: none;
        color: rgb(36,36,36);
        font-size: 14px;
        padding: 10px;
    }
}

@media (min-width: 600px) {
    .cover-video {
        padding-top: 750px;
    }
}

@media (min-width: 768px) {

    .cover-video {
        padding-top: 42%;
    }

        .cover-video.right .inner-item .content {
            float: right;
        }

        .cover-video .inner-item .content {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
        }

            .cover-video .inner-item .content .inner {
                position: relative;
                width: 75%;
                padding: 0;
            }

            .cover-video .inner-item .content h6 {
                font-size: 14px;
                margin-bottom: 3.58%;
            }

            .cover-video .inner-item .content h2 {
                font-size: 28px;
                margin-bottom: 3.58%;
            }

            .cover-video .inner-item .content a .button {
                width: 180px;
                font-size: 14px;
                display: block;
                margin: 0 auto;
                margin-bottom: 10px;
                padding: 10px;
            }

        .cover-video .image-placeholder {
            margin-bottom: 3%;
            width: 50%;
            padding-bottom: 28.125%;
            display: inline-block;
        }
}



@media (min-width: 992px) {

    .cover-video .inner-item .content h2 {
        font-size: 40px;
    }

    .cover-video .image-placeholder {
        width: 40%;
        padding-bottom: 22.5%;
    }

    .cover-video .inner-item .content .inner {
        margin-top: 2.5%;
    }
}
