.desktop { display: none; }

#video-front { position: relative; height: 350px; display: block; }

.video-overlay { background: url(../imgs/video-home/video-ss-mobile.jpg) center center no-repeat; background-size: cover; width: 100%; max-width: 100%; position: relative; z-index: 2; min-height: 250px; }

.video-left, .video-right { height: 250px; }

.video-left { background: url(../imgs/video-home/video-overlay-lft.png) left -50px no-repeat; }

.video-right { background: url(../imgs/video-home/video-overlay-rt.png) left -50px no-repeat; }

.video-shadow { position: absolute; top: 0; z-index: 1; width: 100%; max-width: 100%; }

.video-shadow-left, .video-shadow-right { min-height: 300px; height: 520px; }

.video-shadow-left { background: url(../imgs/video-home/video-shadow-mask.png) left bottom no-repeat, url(../imgs/video-home/video-shadow-lft.png) left top no-repeat; margin-top: -50px; }

.video-shadow-right { margin-top: -50px; background-color: black; background: url(../imgs/video-home/video-shadow-mask.png) left bottom no-repeat, url(../imgs/video-home/video-shadow-rt.png) left top no-repeat; }
.video-button-left { text-align: center; }

.videoColumn { position: relative; height: 250px; z-index: 4; top: 0; }
.video-btn { left: 40%; position: absolute; z-index: 2; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.video-content { position: absolute; top: 0; height: 250px; z-index: 5; width: 100%; }

.app-btn { background: url(../imgs/video-home/video-button-mobile.png) right top no-repeat; width: 60%; max-width: 371px; min-width: 218px; height: 50px; padding-top: 3px; position: absolute; top: -50px; left: -0.9375rem; padding-left: 1.3375rem; line-height: 50px; color: #fff; text-transform: uppercase; font-family: FFDINWebProBold; }
.videoText { padding: 0 0.5375rem; }
.videoText h2 { margin: 0; padding: 1rem 0; color: #0088DD; }


@media only screen and (min-width: 48.0625em) {

    .desktop { display: block; }

    #video-front { position: relative; height: 470px; margin-top: 50px; }

    .video-overlay { background: url(../imgs/video-home/video-ss-desktop.jpg) center center no-repeat; background-size: cover; width: 100%; max-width: 100%; position: absolute; top: 0; z-index: 2; min-height: 400px; }

    .video-left, .video-right { min-height: 300px; height: 400px; }

    .videoColumn { position: relative; height: 400px; }
    .video-btn,
    .videoText { position: absolute; z-index: 2; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
    .video-content { position: absolute; top: 0; left: 0; right: 0; z-index: 3; margin: 0 auto; }

    .video-left { background: url(../imgs/video-home/video-overlay-lft.png) right -50px no-repeat; }
    .video-shadow-left { background: url(../imgs/video-home/video-shadow-mask.png) right bottom no-repeat, url(../imgs/video-home/video-shadow-lft.png) right top no-repeat; }
    #video-mobile { display: none; }

    /*Text*/
    .videoColumn p, .videoColumn h2 { color: #fff !important; }


    .videoText { padding: 0; }
    .videoText h2 { margin: 0 0 1rem 0; padding: 0; }
    .videoText p { font-size: 1.2rem; }

    .app-btn { background: url(../imgs/video-home/video-button-angle.png) right top no-repeat; background-position: right top; height: 50px; line-height: 50px; display: inline-block; z-index: 110; position: relative; top: 0; left: 0; width: auto; color: #fff; font-size: .9rem; padding: 0 3rem 0 2rem; }
    .app-btn:hover { background-position: right bottom; color: #fff; }

    .video-btn { left: 50%; }

    a.video-btn { color: #fff; }
}

@media only screen and (min-width: 75em) {

    .video-shadow-left { background: url(../imgs/video-home/video-shadow-mask.png) left bottom no-repeat, url(../imgs/video-home/video-shadow-lft.png) left top no-repeat; margin-top: -50px; }
    .video-left { background: url(../imgs/video-home/video-overlay-lft.png) left -50px no-repeat; }
}