/* Extra small devices (portrait phones, less than 576px) */
@media screen and (max-width: 575px) { 
    .modal-video-content .modal-video-body video {
        width: 100% !important;    
    }

    .content-video-preview h2 {
        font-size: 1.2em;
        position: relative;
        bottom: 28px;
    }

    .content-video-preview img {
        height: 64px;
        top: 30%;
    }

    .content-video-preview .bottom-effect {
        bottom: 30px;
    }

    .content-video-preview .bottom-effect,
    .content-video-preview .bottom-effect::after {
        height: 100px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767px) { 
    .modal-video-content .modal-video-body video {
        width: 100% !important;    
    }

    .content-video-preview {
        height: 400px;
        margin-bottom: 0 !important;
    }

    .content-video-preview .play-button {
        height: 64px;
        top: 140px;
    }

    .content-video-preview h2 {
        top: 190px;
    }

    .content-video-preview .bottom-effect {
        bottom: 50px;
    }

    .content-video-preview .bottom-effect,
    .content-video-preview .bottom-effect::after {
        height: 100px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991px) { 
    .content-video-preview {
        height: 400px;
        margin-bottom: 0 !important;
    }

    .content-video-preview .play-button {
        height: 64px;
        top: 110px;
    }

    .content-video-preview h2 {
        top: 160px;
    }

    .content-video-preview .bottom-effect {
        top: 200px;
    }

    .content-video-preview .bottom-effect,
    .content-video-preview .bottom-effect::after {
        height: 150px;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199px) { 
    .content-video-preview {
        height: 300px;
    }

    .content-video-preview .play-button {
        height: 64px;
        top: 70px;
    }

    .content-video-preview h2 {
        top: 120px;
    }

    .content-video-preview .bottom-effect {
        top: 150px;
    }

    .content-video-preview .bottom-effect,
    .content-video-preview .bottom-effect::after {
        height: 200px;
    }

    .content-video-preview video {
        position: relative;
        top: -100px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) and (max-width: 1920px) { 
    .content-video-preview {
        height: 400px;
    }

    .content-video-preview .play-button {
        height: 76px;
        top: 124px;
    }

    .content-video-preview h2 {
        top: 180px;
    }

    .content-video-preview .bottom-effect {
        top: 250px;
    }

    .content-video-preview .bottom-effect,
    .content-video-preview .bottom-effect::after {
        height: 300px;
    }

    .content-video-preview video {
        position: relative;
        top: -200px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1921px) and (max-width: 2559px) { 
    .content-video-preview {
        height: 600px;
    }

    .content-video-preview .play-button {
        height: 96px;
        top: 200px;
    }

    .content-video-preview h2 {
        top: 300px;
    }

    .content-video-preview .bottom-effect {
        top: 450px;
    }

    .content-video-preview .bottom-effect,
    .content-video-preview .bottom-effect::after {
        height: 200px;
    }

    .content-video-preview video {
        position: relative;
        top: -200px;
    }
}

@media screen and (min-width: 2560px) {
    .content-video-preview {
        height: 600px;
    }

    .content-video-preview-wrapper .top-effect {
    }

    .content-video-preview .play-button {
        height: 84px;
        top: 160px;
    }

    .content-video-preview h2 {
        top: 240px;
    }

    .content-video-preview .bottom-effect {
        top: 400px;
    }

    .content-video-preview .bottom-effect,
    .content-video-preview .bottom-effect::after {
        height: 300px;
    }

    .content-video-preview video {
        position: relative;
        top: -400px;
    }
}

.content-video-preview {
    overflow: hidden;
    z-index: -1;
}

.content-video-preview video {
	max-width: 100%;
    width: 100%;
}

.content-video-preview .play-button {
	cursor: pointer;
    z-index: 2;
    position: absolute;
}

.content-video-preview h2 {
	position: absolute;
    color: #fff;
    z-index: 2;
}

.content-video-preview .top-effect,
.content-video-preview .bottom-effect {
    position: absolute;
    z-index: 10;
    width: 4400px;
    left: -100px;
    padding-top: 10px;
}

.content-video-preview .top-effect {
    background: rgba(255, 255, 255, 1);
    top: 0px;
}

.content-video-preview .bottom-effect {
    background: rgba(255, 255, 255, 0.6);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.content-video-preview .bottom-effect::after {
	content: '';
    display: block;
    background: white;
    -webkit-box-shadow: inset 0px -12px 13px -2px white;
    -moz-box-shadow: inset 0px -12px 13px -2px white;
    box-shadow: inset 0px -12px 13px -2px white;
}