.mega-uae-btn {
float: left;
display: block;
padding: 7px 20px;
border: none;
background: none;
color: inherit;
vertical-align: middle;
position: relative;
z-index: 1;
-webkit-backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
background: #ECEFF1;
color: #37474f;
}
.mega-uae-btn:focus {
outline: none;
}
.mega-uae-btn > span {
vertical-align: middle;
}
.mega-model-popup {
border-style: solid;
border-width: 1px;
border-radius: 0px;
border-color: #333333;
-webkit-box-shadow: 0 0 7px #404040;
-o-box-shadow: 0 0 7px #404040;
-ms-box-shadow: 0 0 7px #404040;
box-shadow: 0 0 7px #404040;
}
.maw__modal_popup_box .model-popup-btn {
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
cursor: pointer;
outline: none;
}
.mega-model-popup h2{
font-weight: 500;
}
.mega-model-popup img {
max-width: 100%; margin-bottom: 0;
}
.b-close {
box-shadow: none;
font: bold 131% sans-serif;
position: absolute;
right: 5px;
top: 5px;
border-radius: 10px;
color: #fff;
cursor: pointer;
display: inline-block;
text-align: center;
text-decoration: none;
}
.b-close>span {
font-size: 30px;
font-weight: 100;
}
@media only screen and (max-width: 768px) {
.b-close {
right: 5px;
top: 5px;
}
.b-close img {
width: 50px;
}
.mega-model-popup {
margin-right: 10px;
margin-top: 0 !important;
}
} .maw__modal_popup_box .button--winona {
overflow: hidden;
padding: 0;
-webkit-transition: border-color 0.3s, background-color 0.3s;
transition: border-color 0.3s, background-color 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.maw__modal_popup_box .button--winona .modal-popup-after {
content: attr(data-text);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
color: #3f51b5;
-webkit-transform: translate3d(0, 25%, 0);
transform: translate3d(0, 25%, 0);
}
.maw__modal_popup_box .button--winona > span {
display: block;
}
.maw__modal_popup_box .button--winona.button--inverted {
color: #7986cb;
}
.maw__modal_popup_box .button--winona.button--inverted:after {
color: #fff;
}
.maw__modal_popup_box .button--winona .modal-popup-after,
.maw__modal_popup_box .button--winona > span {
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
text-align: center;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.maw__modal_popup_box .button--winona:hover {
border-color: #3f51b5;
background-color: rgba(63, 81, 181, 0.1);
}
.maw__modal_popup_box .button--winona.button--inverted:hover {
border-color: #21333C;
background-color: #21333C;
}
.maw__modal_popup_box .button--winona:hover .modal-popup-after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.maw__modal_popup_box .button--winona:hover > span {
opacity: 0;
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
} .maw__modal_popup_box .button--ujarak {
-webkit-transition: border-color 0.4s, color 0.4s;
transition: border-color 0.4s, color 0.4s;
overflow: hidden;
}
.maw__modal_popup_box .button--ujarak .modal-popup-before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #37474f;
z-index: -1;
opacity: 0;
-webkit-transform: scale3d(0.7, 1, 1);
transform: scale3d(0.7, 1, 1);
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.maw__modal_popup_box .button--ujarak.button--round-s .modal-popup-before {
border-radius: 2px;
}
.maw__modal_popup_box .button--ujarak.button--inverted .modal-popup-before {
background: #7986CB;
}
.maw__modal_popup_box .button--ujarak,
.maw__modal_popup_box .button--ujarak .modal-popup-before {
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.maw__modal_popup_box .button--ujarak:hover {
color: #fff;
border-color: #37474f;
}
.maw__modal_popup_box .button--ujarak.button--inverted:hover {
color: #37474F;
border-color: #fff;
}
.maw__modal_popup_box .button--ujarak:hover .modal-popup-before {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} .maw__modal_popup_box .button--rayen {
overflow: hidden;
padding: 0;
}
.maw__modal_popup_box .button--rayen.button--inverted {
color: #fff;
}
.maw__modal_popup_box .button--rayen .modal-popup-before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #7986cb;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.maw__modal_popup_box .button--rayen.button--inverted .modal-popup-before {
background: #fff;
color: #37474f;
}
.maw__modal_popup_box .button--rayen > .mega-uae-btn-span {
display: block;
}
.maw__modal_popup_box .button--rayen .modal-popup-before,
.maw__modal_popup_box .button--rayen > .mega-uae-btn-span { -webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
padding: inherit;
text-align: center;
}
.maw__modal_popup_box .button--rayen:hover .modal-popup-before {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.maw__modal_popup_box .button--rayen:hover > .mega-uae-btn-span {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
} .maw__modal_popup_box .button--moema {
padding: 1.5em 3em;
border-radius: 50px;
background: #7986cb;
color: #fff;
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
.maw__modal_popup_box .button--moema.button--inverted {
background: #ECEFF1;
color: #37474f;
}
.maw__modal_popup_box .button--moema::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
bottom: -20px;
right: -20px;
background: inherit;
border-radius: 50px;
z-index: -1;
opacity: 0.4;
-webkit-transform: scale3d(0.8, 0.5, 1);
transform: scale3d(0.8, 0.5, 1);
}
.maw__modal_popup_box .button--moema:hover {
-webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
color: #ECEFF1;
background-color: #3f51b5;
-webkit-animation: anim-moema-1 0.3s forwards;
animation: anim-moema-1 0.3s forwards;
}
.maw__modal_popup_box .button--moema.button--inverted:hover {
color: #ECEFF1;
background-color: #7986cb;
}
.maw__modal_popup_box .button--moema:hover::before {
-webkit-animation: anim-moema-2 0.3s 0.3s forwards;
animation: anim-moema-2 0.3s 0.3s forwards;
}
@-webkit-keyframes anim-moema-1 {
60% {
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1);
}
85% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes anim-moema-1 {
60% {
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1);
}
85% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes anim-moema-2 {
to {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes anim-moema-2 {
to {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
} .mega-model-popup {
display: none;
box-sizing: border-box;
max-height: calc(100vh - 2rem);
overflow: visible;
padding: 0;
color: inherit;
transition: opacity 0.2s ease;
}
.mega-model-popup[open] {
display: block;
}
.mega-model-popup .model-popup-container {
max-height: calc(100vh - 2rem);
overflow: auto;
}
.mega-model-popup::backdrop {
background-color: var(--maw-modal-overlay-color, #1a94ad);
opacity: 0.8;
transition: opacity 0.2s ease;
}
.mega-model-popup.maw-modal-opening,
.mega-model-popup.maw-modal-closing {
opacity: 0;
}
.mega-model-popup.maw-modal-closing::backdrop {
opacity: 0;
}
.mega-model-popup .b-close {
appearance: none;
-webkit-appearance: none;
border: 0;
z-index: 2;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.68);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
padding: 0;
}
.mega-model-popup .b-close img {
display: block;
width: 18px;
height: 18px;
object-fit: contain;
}
.mega-model-popup .b-close:focus,
.mega-model-popup .b-close:focus-visible {
outline: 3px solid #111827;
outline-offset: 3px;
}
.maw__modal_popup_box .model-popup-btn:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
.maw-modal-overlay {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
align-items: center;
justify-content: center;
isolation: isolate;
opacity: 0;
transition: opacity 0.2s ease;
}
.maw-modal-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
transition: opacity 0.2s ease;
}
.maw-modal-overlay .mega-model-popup[open] {
z-index: 1;
}
.maw-modal-overlay.is-open {
display: flex;
opacity: 1;
}
.maw-modal-overlay.is-closing,
.maw-modal-backdrop.is-closing {
opacity: 0;
}
.maw-modal-overlay .mega-model-popup[open] {
position: relative !important;
inset: auto !important;
left: auto !important;
top: auto !important;
margin: 0 !important;
transform: none;
max-height: calc(100vh - 2rem);
}
.maw-modal-overlay .mega-model-popup[open] .model-popup-container {
max-height: calc(100vh - 2rem);
}
@media (max-width: 768px) {
.mega-model-popup {
margin-top: 0 !important;
}
.mega-model-popup .model-popup-container {
max-height: calc(100vh - 1rem);
}
}
@media (prefers-reduced-motion: reduce) {
.mega-model-popup,
.mega-model-popup::backdrop,
.maw-modal-overlay,
.maw-modal-backdrop {
animation: none !important;
transition: none !important;
}
}