.container-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
align-items: center;
z-index: -1;
justify-content: center;
opacity: 0;
display: none;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container-modal.show {
opacity: 1;
display: flex;
z-index: 9999999999999999;
animation: fadeIn 0.3s;
}
.modal {
display: flex;
max-width: 554px;
background: var(--tm-dark-blue);
color: #fff;
flex-direction: column;
align-items: center;
padding: 0px 48px 42px 48px;
border-radius: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
position: relative;
overflow: hidden;
}
.modal p,
.modal h2 {
text-align: left;
width: 100%;
}
.modal .video-frame {
width: 100%;
height: 258px;
background: #ffffff21;
border-radius: 20px;
margin: 36px 0 36px 0;
z-index: 1;
}
.modal iframe {
width: 100%;
height: 100%;
border-radius: 20px;
}
.modal .tm-button {
margin-top: 24px;
background-position-x: 88%;
padding: 8px 54px 8px 24px;
}
.modal p {
opacity: 0.67;
font-size: 18px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.2px;
padding: 0;
margin: 0;
}
.modal h2 {
font-size: 38px;
font-weight: 800;
line-height: 48px;
margin-bottom: 12px;
padding: 0;
color: #fff;
margin-right: auto;
}
.modal .logo {
width: 60px;
margin-bottom: 36px;
padding-top: 60px;
margin-right: auto;
margin-left: -4px;
}
.modal .btn-close {
border: unset;
background: unset;
width: 30px;
height: 30px;
position: absolute;
right: 16px;
top: 16px;
cursor: pointer;
transition: all 0.3s;
}
.modal .close-icon {
background: url(//tutormundi.com/wp-content/themes/tm-dev-theme/img/close-icon.svg) no-repeat;
width: 30px;
height: 30px;
display: block;
position: relative;
top: 8px;
left: -12px;
background-size: 22px;
}
.modal .btn-close:hover {
opacity: 0.8;
transition: all 0.3s;
}
.modal .btn-close:active {
transition: all 0.3s;
opacity: 0.5;
}
.modal .tm-button:hover,
.modal .tm-button:active {
background-position-x: 90%;
}
.modal .shape {
position: absolute;
}
.modal .shape-1 {
bottom: -50px;
left: -400px;
}
.modal .shape-0 {
right: -490px;
top: 14px;
left: unset;
}
.modal .shape-1 {
left: -460px;
bottom: -84px;
}
@media (max-width: 767px) {
.modal .btn-close:hover {
opacity: 0.8;
transition: all 0.3s;
}
.modal .btn-close:active {
transition: all 0.3s;
opacity: 0.5;
}
.modal {
padding: 0px 34px 34px 34px;
margin: 16px;
}
.modal .logo {
padding-top: 60px;
width: 48px;
margin-bottom: 32px;
}
.modal p {
font-size: 14px;
line-height: 21px;
}
.modal h2 {
font-size: 28px;
line-height: 36px;
}
.modal .tm-button {
font-size: 14px;
padding: 6px 50px 6px 24px;
margin-top: 8px;
background-position-y: 10px;
}
.modal .video-frame {
height: 158px;
}
.modal .shape-0 {
right: -341px;
top: 28px;
left: unset;
}
.modal .shape-1 {
left: -254px;
bottom: -44px;
}
}