.motta-popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1100;
display: none;
}
.motta-popup__backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.24);
}
.motta-popup__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 640px;
width: 100%;
transition: 0.5s;
}
.motta-popup__close {
position: absolute;
right: 16px;
top: 16px;
font-size: 16px;
font-size: 1rem;
z-index: 1;
cursor: pointer;
}
.motta-popup-position--left-bottom .motta-popup__content {
top: auto;
bottom: 40px;
left: 30px;
right: auto;
transform: translateX(-100%);
transform: none;
}
.motta-popup-position--right-bottom .motta-popup__content {
top: auto;
bottom: 40px;
left: auto;
right: 30px;
transform: translateX(100%);
transform: none;
}
.motta-popup-position--left-top .motta-popup__content {
top: 40px;
bottom: auto;
left: 30px;
right: auto;
transform: translateX(100%);
transform: none;
}
.motta-popup-position--center-bottom .motta-popup__content {
top: auto;
bottom: auto;
left: 30px;
right: auto;
transform: translateY(-100%);
transform: none;
}
@media (min-width: 768px) {
.motta-popup.hide-overlay .motta-popup__backdrop {
display: none;
}
.motta-popup.hide-overlay {
pointer-events: none;
}
.motta-popup.hide-overlay .motta-popup__content  {
pointer-events: auto;
}
}
@media (max-width: 767px) {
.motta-popup-position--left-bottom .motta-popup__content {
left: 0;
bottom: 0;
max-width: 100%;
}
.motta-popup-position--center .motta-popup__content {
left: 16px;
right: 16px;
transform: translateY(-50%);
width: auto;
margin: 0 auto;
}
.motta-popup.hide-overlay-mobile .motta-popup__backdrop {
display: none;
}
}