body div.ccm-page .video-banner.banner {
    background-color: black;
}

.video-banner.banner .file-container {
    top: 0;
    position: absolute;
    overflow: hidden;
    width: 100%;
    transform: inherit;
    height: 100%;
    object-fit: cover;
}

.video-banner.banner .embeded-container {
    position: absolute;
    width: 100%;
    /*height: 100%;*/
    height: calc(100vw/1.77);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.video-banner.banner .playback-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    color: #f1f1f1;
    padding: 10px 20px;
    z-index: 2;
}
[dir="rtl"] .video-banner.banner .playback-controls {
    right: auto;
    left: 0;
}

/**
 * Vimeo player
 */
.video-banner.banner.vimeo-player .embeded-container > div {
    position: static;
    width: auto;
    height: auto;
    top: auto;
    transform: none;
}

.video-banner.banner.vimeo-player .embeded-container iframe,
.video-banner.banner.vimeo-player .embeded-container object,
.video-banner.banner.vimeo-player .embeded-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-banner.banner.youtube-player .playback-controls,
[dir="rtl"] .video-banner.banner.youtube-player .playback-controls {
    left: 0;
    right: auto;
}

.video-banner.banner.youtube-player.mod-sidepanel .playback-controls {
    left: 33.333%;
}

.video-banner.banner .playback-button {
    background-color: transparent;
    border: 0;
    height: 40px;
    width: 40px;
}

.video-banner.banner .playback-button:focus {
    border: 1px solid #888;
}

body div.ccm-page .video-banner.banner .banner-content-heading {
    line-height: 1.6em;
}

body div.ccm-page .video-banner.banner .banner-content {
    max-width: 40em;
}

body div.ccm-page .video-banner.banner.mod-centrebox .banner-content {
    top: 50%;
}

body div.ccm-page .video-banner.banner.mod-centrebox .banner-content,
body div.ccm-page .video-banner.banner.mod-overlaycentre .banner-content,
body div.ccm-page .video-banner.banner.mod-overlaybottom .banner-content {
    height: auto;
    max-height: none;
    min-height: auto;
}

body div.ccm-page .video-banner.banner.mod-sidepanel .banner-content {
    background-color: white;
    z-index: 1;
}

body div.ccm-page .video-banner.banner.mod-sidepanel {
    overflow: hidden;
}

body div.ccm-page .video-banner.banner.mod-sidepanel .file-container,
body div.ccm-page .video-banner.banner.mod-sidepanel .embeded-container {
    left: 33.333%;
    width: 66.666%;
}

/* New chnages for dyanamic sizing */
body div.ccm-page .masthead .video-banner.banner.mod-sidepanel .embeded-container {
    left: 16.66%;
    width: 100%;
}

body div.ccm-page .banner.mod-standard .banner-content.mod-size-thin,
body div.ccm-page .banner.mod-sidepanel .banner-content.mod-size-thin,
body div.ccm-page .banner.mod-standard .banner-img.mod-size-thin,
body div.ccm-page .banner.mod-sidepanel .banner-img.mod-size-thin,
body div.ccm-page .banner-img.mod-size-thin {
    height: 300px;
    min-height: 300px;
    max-height: 300px
}

body div.ccm-page .video-banner.banner .banner-content-desc {
    max-height: none;
}

/*
 Thin types
 */
body div.ccm-page .video-banner.banner .mod-size-thin .banner-content-heading {
    line-height: 1.1em;
}

body div.ccm-page .video-banner.banner.mod-overlaybottom .mod-size-thin .banner-content .banner-content-inner {
    padding: 2em 1em 1em 2em;
}

/*
 Screen sizes
 */
@media only screen and (max-width: 64em) {

    body div.ccm-page .video-banner.banner.mod-sidepanel .banner-content {
        top: 50%;
        height: 50px;
        left: 50%;
        right: auto;
        width: 50px;
        margin: 0px auto;
        padding: 0;
        max-width: none;
        background-color: transparent;
    }

    body div.ccm-page .masthead .video-banner.banner.mod-sidepanel .embeded-container {
        left: auto;
    }

    body div.ccm-page .video-banner.banner.mod-sidepanel .banner-content-inner {
        display: none;
    }

    .video-banner.banner.youtube-player.mod-sidepanel .playback-controls {
        left: 0;
    }

    body div.ccm-page .video-banner.banner.mod-sidepanel.file-player .file-container,
    body div.ccm-page .video-banner.banner.mod-sidepanel .embeded-container {
        position: relative;
    }

    body div.ccm-page .video-banner.banner.mod-sidepanel .file-container,
    body div.ccm-page .video-banner.banner.mod-sidepanel .embeded-container {
        width: 100%;
        top: auto;
        transform: none;
        left: auto;
        object-fit: cover;
        object-position: 50% 50%;
    }

    body div.ccm-page .video-banner.banner.mod-sidepanel .embeded-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    body div.ccm-page .video-banner.banner.mod-standard .banner-img.mod-size-thin,
    body div.ccm-page .video-banner.banner.mod-sidepanel .banner-img.mod-size-thin,
    body div.ccm-page .video-banner.banner.mod-sidepanel.mod-size-thin,
    body div.ccm-page .video-banner.banner.mod-sidepanel .file-container.mod-size-thin,
    body div.ccm-page .video-banner.banner .banner-img.mod-size-thin {
        height: 200px;
        min-height: 200px;
        max-height: 200px
    }

    body div.ccm-page .video-banner.banner.mod-standard .banner-img.mod-size-medium,
    body div.ccm-page .video-banner.banner.mod-sidepanel .banner-img.mod-size-medium,
    body div.ccm-page .video-banner.banner.mod-sidepanel.mod-size-medium,
    body div.ccm-page .video-banner.banner.mod-sidepanel .file-container.mod-size-medium,
    body div.ccm-page .video-banner.banner .banner-img.mod-size-medium {
        height: 300px;
        min-height: 300px;
        max-height: 300px
    }

    body div.ccm-page .video-banner.banner.mod-standard .banner-img.mod-size-large,
    body div.ccm-page .video-banner.banner.mod-sidepanel .banner-img.mod-size-large,
    body div.ccm-page .video-banner.banner.mod-sidepanel.mod-size-large,
    body div.ccm-page .video-banner.banner.mod-sidepanel .file-container.mod-size-large,
    body div.ccm-page .video-banner.banner-content.mod-size-large,
    body div.ccm-page .video-banner.banner .banner-img.mod-size-large {
        height: 400px;
        min-height: 400px;
        max-height: 400px
    }

    body div.ccm-page .video-banner.banner.mod-standard .banner-img.mod-size-full,
    body div.ccm-page .video-banner.banner.mod-sidepanel .banner-img.mod-size-full,
    body div.ccm-page .video-banner.banner.mod-sidepanel.mod-size-full,
    body div.ccm-page .video-banner.banner.mod-sidepanel .file-container.mod-size-full,
    body div.ccm-page .video-banner.banner-content.mod-size-full,
    body div.ccm-page .video-banner.banner .banner-img.mod-size-full {
        height: 450px;
        min-height: 450px;
        max-height: 450px
    }

    body div.ccm-page .video-banner.banner .banner-img.mod-size-full {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        min-height: auto;
        max-height: none;
        overflow: hidden;
    }

    /* Font sizes */
    body div.ccm-page .video-banner.banner .banner-content-inner {
        padding: 2rem;
    }

    body div.ccm-page .video-banner.banner .banner-content-desc {
        font-size: 1.4rem;
    }

    body div.ccm-page .video-banner.banner h1.mod-lg,
    body div.ccm-page .video-banner.banner .mod-h1.mod-lg {
        font-size: 2rem;
        line-height: 1.1;
    }

    body div.ccm-page .banner.mod-overlaybottom .container-fluid {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    body div.ccm-page .video-banner.banner.mod-overlaybottom .banner-content-desc {
        margin-bottom: 0;
    }

    body div.ccm-page .video-banner.banner .banner-content-heading {
        font-size: 26px;
        font-size: 2.6rem;
        line-height: 1.1em;
    }

    body div.ccm-page .video-banner.banner.mod-overlaybottom .banner-content .banner-content-inner {
        padding: 2em 1em 1em 1em;
    }

    body div.ccm-page .video-banner.banner .mod-size-thin .banner-content-heading {
        font-size: 26px;
        font-size: 1.8rem;
        line-height: 1.1em;
    }

}

@media only screen and (max-width: 48em) {

    body div.ccm-page .video-banner.banner.mod-sidepanel.file-player .file-container {
        position: relative;
    }

    /* Set container size to be height of video */
    body div.ccm-page .video-banner.banner.mod-standard .banner-img.mod-size-thin,
    body div.ccm-page .video-banner.banner.mod-sidepanel .banner-img.mod-size-thin,
    body div.ccm-page .video-banner.banner.mod-sidepanel.mod-size-thin,
    body div.ccm-page .video-banner.banner.mod-sidepanel .file-container.mod-size-thin,
    body div.ccm-page .video-banner.banner .banner-img.mod-size-thin,
    body div.ccm-page .video-banner.banner.mod-standard .banner-img.mod-size-medium,
    body div.ccm-page .video-banner.banner.mod-sidepanel .banner-img.mod-size-medium,
    body div.ccm-page .video-banner.banner.mod-sidepanel.mod-size-medium,
    body div.ccm-page .video-banner.banner.mod-sidepanel .file-container.mod-size-medium,
    body div.ccm-page .video-banner.banner .banner-img.mod-size-medium,
    body div.ccm-page .video-banner.banner.mod-standard .banner-img.mod-size-large,
    body div.ccm-page .video-banner.banner.mod-sidepanel .banner-img.mod-size-large,
    body div.ccm-page .video-banner.banner.mod-sidepanel.mod-size-large,
    body div.ccm-page .video-banner.banner.mod-sidepanel .file-container.mod-size-large,
    body div.ccm-page .video-banner.banner-content.mod-size-large,
    body div.ccm-page .video-banner.banner .banner-img.mod-size-large,
    body div.ccm-page .video-banner.banner.mod-standard .banner-img.mod-size-full,
    body div.ccm-page .video-banner.banner.mod-sidepanel .banner-img.mod-size-full,
    body div.ccm-page .video-banner.banner.mod-sidepanel.mod-size-full,
    body div.ccm-page .video-banner.banner.mod-sidepanel .file-container.mod-size-full,
    body div.ccm-page .video-banner.banner-content.mod-size-full,
    body div.ccm-page .video-banner.banner .banner-img.mod-size-full {
        height: calc(100vw/1.85);
        min-height: auto;
        max-height: none;
        padding: 0;
    }

    /* NEW SIZING STUFF */
    body div.ccm-page .video-banner.banner.mod-sidepanel .embeded-container {
        top: auto;
    }
}

/*
Sidebar
 */
body div.ccm-page .sidebar .video-banner.banner.youtube-player,
body div.ccm-page .sidebar .video-banner.banner.file-player,
body div.ccm-page .sidebar .video-banner.banner.mod-sidepanel .file-container,
body div.ccm-page .sidebar .video-banner.banner.mod-sidepanel .embeded-container {
    height: 300px;
}

body div.ccm-page .sidebar .banner-img.mod-size-thin,
body div.ccm-page .sidebar .banner-img.mod-size-medium,
body div.ccm-page .sidebar .banner-img.mod-size-large,
body div.ccm-page .sidebar .banner-img.mod-size-full {
    height: 300px;
    min-height: 300px;
    max-height: 300px;
}

body div.ccm-page .sidebar .video-banner.banner.mod-sidepanel .banner-content {
    display: none;
}

body div.ccm-page .sidebar .video-banner.banner.mod-sidepanel.file-player .file-container {
    position: relative;
    height: 100%;
    max-height: none;
    min-height: auto;
}

body div.ccm-page .sidebar .video-banner.banner.mod-sidepanel .file-container,
body div.ccm-page .sidebar .video-banner.banner.mod-sidepanel .embeded-container {
    width: 100%;
    top: auto;
    transform: none;
}

/* Font sizes */
body div.ccm-page .sidebar .video-banner.banner .banner-content-inner {
    padding: 2rem;
}

body div.ccm-page .sidebar .video-banner.banner .banner-content-desc {
    font-size: 1.4rem;
}

body div.ccm-page .sidebar .video-banner.banner h1.mod-lg,
body div.ccm-page .sidebar .video-banner.banner .mod-h1.mod-lg {
    font-size: 2rem;
}

@media only screen and (max-width: 64em) {
    body div.ccm-page .sidebar .video-banner.banner.youtube-player,
    body div.ccm-page .sidebar .video-banner.banner.file-player,
    body div.ccm-page .sidebar .video-banner.banner.mod-sidepanel .file-container,
    body div.ccm-page .sidebar .video-banner.banner.mod-sidepanel .embeded-container {
        height: 200px;
    }

    body div.ccm-page .sidebar .video-banner.banner .banner-img.mod-size-thin,
    body div.ccm-page .sidebar .video-banner.banner .banner-img.mod-size-medium,
    body div.ccm-page .sidebar .video-banner.banner .banner-img.mod-size-large,
    body div.ccm-page .sidebar .video-banner.banner .banner-img.mod-size-full {
        height: 200px;
        min-height: 200px;
        max-height: 200px;
    }

    div.ccm-page .sidebar .video-banner.banner.mod-overlaybottom .mod-size-full .banner-content {
        bottom: 0;
    }
}

@media only screen and (max-width: 48em) {

    body div.ccm-page .sidebar .video-banner.banner .banner-content-inner {
        height: 100%;
    }

    body div.ccm-page .sidebar .video-banner.banner .banner-content-desc {
        font-size: 1.6rem;
    }
}