/* Extra small devices (portrait phones, less than 576px) */
@media screen and (max-width: 575px) { 

}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767px) { 

}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991px) { 

}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199px) { 

}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) and (max-width: 1920px) { 

}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1921px) and (max-width: 2559px) { 

}

/* Hi Res devices */
@media screen and (min-width: 2560px) {

}

.modal-video-container {
    align-items: center;
	color: #fff;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.modal-video-overlay {
	background-color: rgba(0,0,0, 0.8);
    display: inline-block;
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 101;
}

.modal-video-overlay::after {
	display: block;
    content: '';
    background-color: rgba(0,0,0, 0.1);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.modal-video-content {
    display: flex;
    flex-direction: column;
	z-index: 102;
}

.modal-video-content .modal-video-body video {
    width: 640px;
}

.modal-video-close-container {
	display: flex;
    height: 32px;
    background: #52ACF2;
    justify-content: flex-end;
    align-items: center;
    padding: 4px;
}

.modal-video-close-container .fa-close {
	align-self: flex-end;
}