/* ----------------------------------------------- */
/* Homepage Video Banner */
/* ----------------------------------------------- */

/* --------------- Play/Pause Button --------------- */

.video-banner-controls {
    position: absolute;
    right:10px;
    top:0;
    margin-top: calc(37.1583% - 60px); /* varies based on parallax container height */
    z-index: 12;
}
.video-banner-controls button {
    padding:13.575px 15px;
    border:0;
    border-radius: 50%;
    background-color: rgba(255,255,255,.8);
}
.video-banner-controls button:focus {
    outline:0 none;
    box-shadow: inset 0 0 0 3px #bcdd31;
    background-color: #fff;
}
.video-banner-controls svg {
    fill: #09144f;
    width:20px;
    height: 22.85px;
    display: block;
}

/* --------------- Video --------------- */

.video-banner {
    position: relative;
}
.video-banner .video-container {
    width: 100%;
    position: relative;
}
.video-banner .video-container .video-overlay {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right:0;
    background-color: #09144f;
    opacity: 0.33;
}
/* Clickable transparent overlay to make the entire
banner clickable in the absence of a button */
.video-banner .pass-through {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
	display:block;
	width:100%;
	z-index:11;
	background-color:transparent;
}
.video-banner video {
    display: block;
    width: 100%;
}

/* --------------- Video Caption --------------- */

.video-caption-inner {
    padding: 1.5rem 15px;
}
.video-caption h2 {
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom:.25em;
}
.video-caption h3 {
    font-weight: 400;
    margin-bottom:.25em;
}
.video-caption .caption-details,
.video-caption .caption-details > * {
    margin-bottom:.75em;
}
.video-caption .caption-details :last-child {
    margin-bottom:0;
}

/* XS and SM only */
@media (max-width: 767px) {

    .video-caption {
        background-color: #fff;
        position: static;
        text-align: center;
    }
    .video-caption h2 {
        color:#09144f !important;
        font-size: 1.75rem !important;
    }
    .video-caption h3 {
        color:#09144f !important;
        font-size: 1.3125rem !important;
    }
    .video-caption .caption-details {
        color:#444 !important;
        font-size: 1.125rem !important;
    }
    .video-caption .btn {
        margin-bottom: .5em;
    }
    .video-caption .caption-details > table {
        margin:0 auto;
    }

}

/* MD and wider */
@media (min-width: 768px) {

    .video-banner .video-container .video-overlay {
        opacity: 0.65;
    }

    /* --------------- Video Captions --------------- */

    .video-caption {
        font-size:19px;
        font-size:2.5vw;
        color:#fff;
        text-shadow:none;
        cursor:default;
        -webkit-user-select: none;  /* Chrome all / Safari all */
        -moz-user-select: none;     /* Firefox all */
        -ms-user-select: none;      /* IE 10+ */
        user-select: none;
        position: absolute;
        top: 0;
        bottom:0;
        left: 0;
        right:0;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        text-align:left;
    }
    .video-caption.empty-caption {
        display: none;
    }
    .video-caption.caption-top {
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start;
    }
    .video-caption.caption-vertical-center {
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-line-pack: center;
        align-content: center;
    }
    .video-caption.caption-bottom {
        -ms-flex-align: end;
        align-items: flex-end;
        -ms-flex-line-pack: end;
        align-content: flex-end;
    }
    .video-caption :last-child {
        margin-bottom:0;
    }
    .video-caption.caption-left {
        left:0;
        right:50%;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .video-caption.caption-center {
        left:0;
        right:0;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }
    .video-caption.caption-right {
        left:50%;
        right:0;
        -ms-flex-pack: end;
        justify-content: flex-end;
        text-align: right;
    }
    .video-caption-inner {
        padding:2vw 5%;
        position: relative;
    }
    .caption-center .video-caption-inner {
        padding-left: 3vw;
        padding-right: 3vw;
    }
    .video-caption .btn {
        font-size:.5295em;
        padding:.222em 1em;
        line-height: 1.5;
        border-radius:1.0833em/50%;
    }
    .text-shadow {
        text-shadow: 0.033em 0.033em 0.05em rgba(0,0,0,0.33);
    }

}