/*** Home Banner */

.video-banner.banner {
    &.mod-overlaybottom.mod-starter-video {
        .banner-img-overlay {
            background: var(--main-color);
            background: rgba(0, 42, 57, 0.6);
            z-index: 1;
        }
        .banner-logo-overlay {
            background: var(--main-color);
            background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 30%, rgba(0, 42, 57, 1) 85%);
            background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 30%, rgba(0, 42, 57, 1) 85%);
            background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 30%, rgba(0, 42, 57, 1) 85%);
            background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 30%, rgba(0, 42, 57, 1) 85%);
            background: linear-gradient(to right, rgba(0, 0, 0, 0) 30%, rgba(0, 42, 57, 1) 85%);
            height:100%;
            left: 0;
            position: absolute;
            top: 0;
            width:100%;
            z-index: 1;
        }
        .banner-logo {
            display: block;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            max-height: 100%;
            padding: 2em;
            height: 20em;
            z-index: 1;
        }
        .banner-content {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            padding: 1em 0;
            }
        }
    }
}

[dir="rtl"] {
    .video-banner.banner {
        &.mod-starter-video {
            .banner-logo-overlay {
                background: var(--main-color);
                background: -moz-linear-gradient(right, rgba(0, 0, 0, 0) 30%, rgba(0, 42, 57, 1) 85%);
                background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 30%, rgba(0, 42, 57, 1) 85%);
                background: -o-linear-gradient(right, rgba(0, 0, 0, 0) 30%, rgba(0, 42, 57, 1) 85%);
                background: -ms-linear-gradient(right, rgba(0, 0, 0, 0) 30%, rgba(0, 42, 57, 1) 85%);
                background: linear-gradient(to left, rgba(0, 0, 0, 0) 30%, rgba(0, 42, 57, 1) 85%);
                left: auto;
                right:0;
            }
            .banner-logo {
                left:0;
                right: auto;
            }
        }
    }
}

/*---------------------------*/

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;
    left: 0;
    right:auto;
    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: 0;
    left: auto;
}

/**
 * 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;
    }
}