﻿.videos {
    margin: 0 0 5rem 0;
}
    .videos .description {
        margin: 5rem 0;
        font-size: 1.6rem;
        font-weight: 500;
    }
    .videos .videos-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 5rem;
        margin: 2rem 0;
    }
        .videos .videos-grid .bg-image {
            height: 290px;
            background-position: center center !important;
            background-size: cover !important;
            margin-bottom: 20px;
            text-align: center;
            position: relative;
        }
            .videos .videos-grid .bg-image .play-icon {
                margin: -25px 0 0 -25px;
                text-align: left;
                top: 50%;
                left: 50%;
                position: absolute;
            }
            .videos .videos-grid .bg-image img {
                width: 50px;
            }
        .videos .videos-grid h5 {
            margin: 0;
            font-size: 1.4rem;
            font-weight: 500;
            color: var(--accent-color);
            text-transform: uppercase;
        }
        .videos .videos-grid h1 {
            margin: 0 0 1rem 0;
            font-size: 24px;
            font-weight: 600;
            color: #3c404b;
        }
        .videos .videos-grid p {
            margin: 0 0 1rem 0;
        }
        .videos .pager {
            margin: 5rem 0;
        }
    .videos.latest-videos {
        margin: 0;
    }


@media (max-width: 768px) {
    .videos .videos-grid .bg-image {
        height: 175px;
    }
}
@media (max-width: 550px) {
    .videos .videos-grid {
        grid-template-columns: 1fr;
    }
    .videos .videos-grid .bg-image {
        height: 290px;
    }
}
@media (max-width: 475px) {
    .videos .videos-grid .bg-image {
        height: 175px;
    }
}

.video {
    margin: 0 0 5rem 0;
}
    .video .video-info h1 {
        text-align: center;
        margin: 3rem 0;
        font-size: 3.4rem;
        font-weight: 500;
    }
    .video .video-container {
        background-color: #000;
    }
    .video .video-container .embed-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        max-width: 100%;
    }
        .video .video-container .embed-container iframe, .embed-container object, .embed-container embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    .video .video-info {
        margin: 2rem 0;
    }
    .video .video-info h5 {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 500;
        color: var(--accent-color);
        text-transform: uppercase;
    }

@media (max-width: 768px) {
    .video h1 {
        font-size: 2.4rem;
    }
}
