﻿#video {
    background: #000;
}

.videoEnlargeModal .modal-content {
    background: transparent;
}

.videoEnlargeModal .modal-dialog {
    margin: 35px auto 0 auto;
}

.videoEnlargeModal .close {
    opacity: 1;
    margin-top: -5px;
    margin-right: -20px;
    color: #fff;
}

.videoEnlargeModal iframe.embed-responsive-item {
    background: black;
}

@media (min-width: 540px) {
    .videoEnlargeModal .modal-dialog {
        width: 83%;
        max-width: 430px;
        height: auto;
    }
}

@media (min-width: 640px) {
    .videoEnlargeModal .modal-dialog {
        width: 83%;
        max-width: 600px;
        height: auto;
    }
}

@media (min-width: 768px) {
    .videoEnlargeModal .modal-dialog {
        width: 83%;
        max-width: 650px;
        height: auto;
    }
}

@media (min-width: 992px) {
    .videoEnlargeModal .modal-dialog {
        width: 83%;
        max-width: 800px;
        height: auto;
    }
}

@media (min-width: 1280px) {
    .videoEnlargeModal .modal-dialog {
        width: 83%;
        max-width: 1080px;
        height: auto;
    }
}

@media (min-width: 1920px) {
    .videoEnlargeModal .modal-dialog {
        width: 83%;
        max-width: 1650px;
        height: auto;
    }
}


.video_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    opacity: 1;
    background: #071c2c;
	max-height: 486px;
}

    .video_container #text {
        position: absolute;
        z-index: 6;
        text-align: center;
        top: 43% !important;
        left: 0 !important;
        right: 0;
    }

        .video_container #text #actions {
            height: 95px;
        }

        .video_container #text #playbutton {
            z-index: 3;
            margin: 0 auto;
            margin-top: 0px;
            height: 95px;
            display: block;
        }

            .video_container #text #playbutton .rectangle {
                background-color: black;
                width: 80px;
                height: 80px;
                opacity: 0.6;
                margin: 0 auto;
                border-radius: 50%;
            }

                .video_container #text #playbutton .rectangle:hover {
                    background-color: #52bdff;
                    cursor: pointer;
                    transition: all 1s ease;
                    -webkit-transition: all 1s ease;
                }

            .video_container #text #playbutton .triangle {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 22px 0 22px 32px;
                border-color: transparent transparent transparent white;
                margin: 0 auto;
                position: relative;
                bottom: 60px;
                pointer-events: none;
                cursor: pointer;
                left: 4px;
            }

.video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

    .video iframe {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
    }

    .video .overlay {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 0, 0, 0.5);
    }

.vimeo-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.4;
}

    .vimeo-wrapper iframe {
        width: 100vw;
        height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
        min-height: 100vh;
        min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.videoEnlargeModal .modal-body {
    padding: 0px !important;
}