#video-container {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    display: none;
}

#video-holder {
    width: 95%;
    padding: 10px 5px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

@media (min-width:500px) {
    #video-holder {
        width: 60%;
        padding: 25px;
    }
}

a.close {
    color: #000;
    position: absolute;
    top: 10px;
    right: 10px;
    font-weight: bold;
    opacity: 1;
    filter: alpha(opacity=100);
    cursor: pointer;
}

h3.video-title {
    color: #000;
    margin-top: 0;
    max-width: calc(100% - 20px);
}

a.video-transcript {
    display: inline-block;
    margin-top: 20px;
}

.video-list .row:not(:first-child) {
    display: none;
}

.video-inner {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

    .video-inner iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }

.ytv-single {
    position: relative;
    cursor: pointer;
    margin-top: 30px;
    text-decoration: none;
    color: #000;
}

    .ytv-single:hover {
        text-decoration: none;
        color: #000;
    }

    .ytv-single:first-child {
        margin-top: 0;
    }

    .ytv-single:nth-child(n+5) {
        display: none;
    }

.yt-thumb {
    position: relative;
    border: 1px solid #d1d1d1;
}

    .yt-thumb img {
        max-width: 100%;
    }

    .yt-thumb:after {
        z-index: 5;
        width: 27px;
        height: 32px;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
        background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2227px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2027%2032%22%20enable-background%3D%22new%200%200%2027%2032%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3ClinearGradient%20id%3D%22SVGID_1_%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2213.5%22%20y1%3D%22-6.057235e-10%22%20x2%3D%2213.5%22%20y2%3D%2231.9999%22%3E%0D%0A%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23FFFFFF%22/%3E%0D%0A%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23E6E6E6%22/%3E%0D%0A%3C/linearGradient%3E%0D%0A%3Cpath%20fill%3D%22url%28%23SVGID_1_%29%22%20d%3D%22M27%2C16L0%2C32V0L27%2C16z%22/%3E%0D%0A%3C/svg%3E%0D%0A);
        transition: all 0.5s ease-in-out;
    }

div.video-title {
    font-size: 16px;
    display: block;
    font-weight: bold;
    padding: 5px 0 20px;
}

    div.video-title sup {
        font-size: 0.6em;
        vertical-align: super;
        top: 0;
    }

#moreVideos {
    color: #fff;
    background: #0073ac;
    text-decoration: none;
    border: 1px solid #0073ac;
    display: inline-block;
    padding: 11px 15px 9px 14px;
    font-size: 12px;
    line-height: 1.666666667;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

    #moreVideos:hover {
        color: #0073ac;
        background-color: #ffffff;
    }

@media (min-width:768px) {
    .yt-vid-cont.horizontal .video-list {
        display: flex;
        margin: 0 -15px;
    }

    .yt-vid-cont.horizontal .ytv-single {
        width: calc(100% / 2);
        margin: 0 15px;
    }

    .video-intro {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

        .video-intro p {
            margin: 0 0 19.92px
        }

    .yt-vid-cont {
        display: flex;
        flex-wrap: wrap;
        margin-left: -30px;
    }

    .ytv-single {
        display: flex;
        flex-direction: column;
        margin-left: 30px;
        margin-top: 0;
        overflow: auto;
    }

    .ytv-single {
        flex-basis: calc(50% - 30px);
    }

    .three .ytv-single {
        flex-basis: calc(100% / 3 - 30px);
    }

    .four .ytv-single {
        flex-basis: calc(25% - 30px);
    }

    .ytv-single:hover .yt-thumb:after {
        transform: translateX(-50%) translateY(-50%) scale(1.3);
    }
}

@media (min-width:768px) {
    .yt-vid-cont.horizontal .ytv-single {
        width: calc(100% / 3);
    }
}