/*
    Bootstrap Based Modal Video.
    Show a video embed inside of a modal.
    Built with the Bootstrap 3.0 modal
    https://getbootstrap.com/docs/3.3/javascript/#modals

    Dependencies:
        - Bootstrap 3.0 CSS

    Developer: Joshua Pease | jpease@coffeycomm.com
    Creation Date: 2018/01/10
*/

.modal--video .close {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 100%;
    color: #fff;
    -webkit-box-shadow: none;
            box-shadow: none;
    opacity: 1;
    font-weight: normal;
    font-size: 48px;
}

.modal--video .modal-dialog {
    width: auto;
    max-width: 960px;
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    margin: 0 auto;
}

@media (min-width: 980px) {
    .modal--video .modal-dialog {
        width: 100%;
    }

    .modal--video .close {
        left: 100%;
        right: auto;
    }
}

.modal--video.fade .modal-dialog {
    -webkit-transform: translate(0, -55%);
        -ms-transform: translate(0, -55%);
            transform: translate(0, -55%);
}
.modal--video.in .modal-dialog {
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
}

.modal--video  .modal-body__video {
    position: relative;
    padding-bottom: 56.25%;
}

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