/* Style to make body not scroll when scrolling overlay */
.overlay-on{
position: relative;
overflow: hidden !important;
}

/* =================================================================================
START VIDEO OVERLAY
================================================================================= */


/* Overlay style */
.VideoOverlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(255,255,255,1);
overflow: scroll;
z-index:  2147483647;
}

/* Overlay closing cross */
.VideoOverlay .VideoOverlay-close {
width: 35px;
height: 35px;
position: absolute;
right: 35px;
top: 20px;
overflow: hidden;
border: none;
text-indent: 200%;
color: transparent;
outline: none;
z-index: 100;
}

/* Overlay closing cross */
.VideoOverlay .VideoOverlay-close:hover {
width: 35px;
height: 35px;
position: absolute;
right: 35px;
top: 20px;
overflow: hidden;
border: none;
text-indent: 200%;
color: transparent;
outline: none;
z-index: 100;
}


/* add black background to video popup */
.blackbg {
background-color: #000;
}

/* make video popup row be full width */
.VideoOverlay .row {
max-width: 100%;
}

/* make video in popup fill the space */
video {
width: 100%;
height: auto;
max-height: 100vh;
/* top: 25%; */
}

@media only screen and (max-width: 60em) {
video {
/* width: 100%;
height: auto;
max-height: 100vh; */
padding-top: 10%;
}
}




/* =================================================================================
START STAFF OVERLAYS
================================================================================= */



/* Overlay style */
.CarlOverlay,
.DanOverlay,
.AngieOverlay,
.KrisOverlay,
.ElyseOverlay,
.CoryOverlay,
.JimOverlay,
.NickOverlay,
.ClintOverlay,
.TyOverlay{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(255,255,255,1);
overflow: scroll;
z-index:  2147483647;
}

/* Overlay closing cross */
.CarlOverlay .CarlOverlay-close,
.DanOverlay .DanOverlay-close,
.AngieOverlay .AngieOverlay-close,
.KrisOverlay .KrisOverlay-close,
.ElyseOverlay .ElyseOverlay-close,
.CoryOverlay .CoryOverlay-close,
.JimOverlay .JimOverlay-close,
.NickOverlay .NickOverlay-close,
.ClintOverlay .ClintOverlay-close,
.TyOverlay .TyOverlay-close{
width: 35px;
height: 35px;
position: absolute;
right: 35px;
top: 20px;
overflow: hidden;
border: none;
text-indent: 200%;
color: transparent;
outline: none;
z-index: 100;
}

/* Overlay closing cross */
.CarlOverlay .CarlOverlay-close:hover,
.DanOverlay .DanOverlay-close:hover,
.AngieOverlay .AngieOverlay-close:hover,
.KrisOverlay .KrisOverlay-close:hover,
.ElyseOverlay .ElyseOverlay-close:hover,
.CoryOverlay .CoryOverlay-close:hover,
.JimOverlay .JimOverlay-close:hover,
.NickOverlay .NickOverlay-close:hover,
.ClintOverlay .ClintOverlay-close:hover,
.TyOverlay .TyOverlay-close:hover{
width: 35px;
height: 35px;
position: absolute;
right: 35px;
top: 20px;
overflow: hidden;
border: none;
text-indent: 200%;
color: transparent;
outline: none;
z-index: 100;
}



/* ==========================================================================
pop up top close button
==========================================================================*/

.closeit-container {
display: block;
margin: auto;
width: 35px;
height: 35px;
margin-top: 0px;
cursor: pointer;
padding-left: 5px;
}

.leftright {
height: 4px;
width: 35px;
position: absolute;
margin-top: 17px;
background-color: #e52835;
border-radius: 2px;
transform: rotate(45deg);
transition: all .2s ease-in;
}

.rightleft {
height: 4px;
width: 35px;
position: absolute;
margin-top: 17px;
background-color: #e52835;
border-radius: 2px;
transform: rotate(-45deg);
transition: all .2s ease-in;
}

.closeit {
margin: 0px 0 0 5px;
position: absolute;
}

.closeit-container:hover .leftright {
transform: rotate(-45deg);
background-color: #F25C66;
}

.closeit-container:hover .rightleft {
transform: rotate(45deg);
background-color: #F25C66;
}

.closeit-container:hover label {
opacity: 1;
}



/* ==========================================================================
pop up bottom close button
==========================================================================*/

.closeit2-container {
display: block;
margin: auto;
width: 150px;
height: 30px;
margin-top: 0px;
cursor: pointer;
}

.closeit2-container span {
display: inline-block;
padding-left: 25px;
margin-top:13px;
}

.leftright2 {
height: 4px;
width: 20px;
position: absolute;
margin-top: 24px;
background-color: #e52835;
border-radius: 2px;
transform: rotate(45deg);
transition: all .2s ease-in;
}

.rightleft2 {
height: 4px;
width: 20px;
position: absolute;
margin-top: 24px;
background-color: #e52835;
border-radius: 2px;
transform: rotate(-45deg);
transition: all .2s ease-in;
}

.closeit2 {
margin: 60px 0 0 5px;
position: absolute;
}

.closeit2-container:hover .leftright2 {
transform: rotate(-45deg);
background-color: #F25C66;
}

.closeit2-container:hover .rightleft2 {
transform: rotate(45deg);
background-color: #F25C66;
}

.closeit2-container:hover label {
opacity: 1;
}




/* Effects */
.overlay-scale {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}

.overlay-scale.open {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
}