.explainer-video-popup-overlay {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100vh;
background: #FFFFFF;
z-index: 501;
-webkit-opacity: 0.875;
-moz-opacity: 0.875;
-ms-opacity: 0.875;
-o-opacity: 0.875;
opacity: 0.875;
filter: alpha(opacity=87);
-webkit-transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
-moz-transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
-ms-transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
-o-transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
}

.explainer-video-popup-content {
display: none;
position: fixed;
top: 0;
left: 25%;
width: 50%;
height: 100%;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
z-index: 502;
text-align: center;
overflow: auto;
-webkit-transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
-moz-transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
-ms-transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
-o-transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
}

.explainer-video-popup-content {
display: none;
position: fixed;
top: 0;
left: 25%;
width: 50%;
height: 100%;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
z-index: 502;
text-align: center;
overflow: auto;
-webkit-transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
-moz-transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
-ms-transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
-o-transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
transition: visibility 0.0625s, opacity 0.0625s ease-in-out;
}

.explainer-video-popup-content-container {
visibility: visible;
width: 100%;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
-webkit-transition: visibility 0s, opacity 0s ease-in-out;
-moz-transition: visibility 0s, opacity 0s ease-in-out;
-ms-transition: visibility 0s, opacity 0s ease-in-out;
-o-transition: visibility 0s, opacity 0s ease-in-out;
transition: visibility 0s, opacity 0s ease-in-out;
}

/* ------------------------------------------------------------------------------------------------------- */

.explainer-video {
position: relative;
display: flex;
align-items: center;
width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
background: #F7F7C3; /* #E3F2E8; #62B57E */
}

.explainer-video .responsive-h4 {
width: 100%;
margin: 0 0 6.25px 0;
padding: 0 0 0 0;
font-family: 'Figtree', sans-serif, 'Manrope', 'Inter', sans-serif, Arial, Verdana, Helvetica;
font-optical-sizing: auto;
font-weight: 900;
font-size: 1.625em;
letter-spacing: -0.0025em;
line-height: 1.3;
text-align: left;
opacity: 1;
}

.explainer-video-left {
position: relative;
float: left;
width: calc(100% - 312.5px);
margin: 0 0 0 0;
padding: 31.25px 37.5px 31.25px 0;
}

.explainer-video-right {
position: absolute;
right: 0;
float: right;
width: 312.5px;
height: calc(100% + 75px);
margin: -37.5px 0 37.5px 0;
padding: 0 0 0 0;
background: #FFFFFF;
border: 1px solid #1F27F1;
-webkit-border-radius: 17.5px 17.5px 17.5px 17.5px;
-moz-border-radius: 17.5px 17.5px 17.5px 17.5px;
-ms-border-radius: 17.5px 17.5px 17.5px 17.5px;
-o-border-radius: 17.5px 17.5px 17.5px 17.5px;
border-radius: 17.5px 17.5px 17.5px 17.5px;
}

/* ------------------------------------------------------------------------------------------------------- */

.tablet-phone-explainer-video {
position: relative;
width: 100%;
margin: 0 0 0 0;
padding: 50px 0 37.5px 0;
background: #F7F7C3; /* #E3F2E8; #62B57E */
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
-ms-border-radius: 0 0 0 0;
-o-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
}

/* ------------------------------------------------------------------------------------------------------- */

.explainervideoimage {
width: 100%;
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
overflow: hidden;
position: relative;
-webkit-border-radius: 16.5px 16.5px 16.5px 16.5px;
-moz-border-radius: 16.5px 16.5px 16.5px 16.5px;
-ms-border-radius: 16.5px 16.5px 16.5px 16.5px;
-o-border-radius: 16.5px 16.5px 16.5px 16.5px;
border-radius: 16.5px 16.5px 16.5px 16.5px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.explainervideoimageinside {
height: 100%;
width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.explainervideoimage:hover .explainervideoimageinside, .explainervideoimage:focus .explainervideoimageinside {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.explainervideoimage:hover .explainervideoimageinside:before, .explainervideoimage:focus .explainervideoimageinside:before {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.explainervideoimageinside:before {
content: "";
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

/* ------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1250px) {

/* ------------------------------------------------------------------------------------------------------- */

.explainer-video-right {
position: absolute;
right: 5%;
float: right;
width: 312.5px;
height: calc(100% + 75px);
margin: -37.5px 0 37.5px 0;
padding: 0 0 0 0;
background: #FFFFFF;
border: 1px solid #1F27F1;
-webkit-border-radius: 17.5px 17.5px 17.5px 17.5px;
-moz-border-radius: 17.5px 17.5px 17.5px 17.5px;
-ms-border-radius: 17.5px 17.5px 17.5px 17.5px;
-o-border-radius: 17.5px 17.5px 17.5px 17.5px;
border-radius: 17.5px 17.5px 17.5px 17.5px;
}

/* ------------------------------------------------------------------------------------------------------- */

}

/* ------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1100px) {

/* ------------------------------------------------------------------------------------------------------- */

.tablet-phone-explainer-video {
position: relative;
width: 100%;
margin: 0 0 -37.5px 0;
padding: 50px 0 37.5px 0;
background: #F7F7C3; /* #E3F2E8; #62B57E */
}

/* ------------------------------------------------------------------------------------------------------- */

}

/* ------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 950px) {

/* ------------------------------------------------------------------------------------------------------- */

.tablet-phone-explainer-video {
position: relative;
width: 90%;
margin: 0 auto -25px auto;
padding: 37.5px 0 25px 0;
background: #F7F7C3; /* #E3F2E8; #62B57E */
-webkit-border-radius: 17.5px 17.5px 17.5px 17.5px;
-moz-border-radius: 17.5px 17.5px 17.5px 17.5px;
-ms-border-radius: 17.5px 17.5px 17.5px 17.5px;
-o-border-radius: 17.5px 17.5px 17.5px 17.5px;
border-radius: 17.5px 17.5px 17.5px 17.5px;
}

/* ------------------------------------------------------------------------------------------------------- */

}