@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

.modal * {
   box-sizing: border-box;
   color: #000;
}

.overlay {
   opacity: 0.8 !important;
}

.modal {
   display: none;
   text-align: center;
   width: 448px;
   margin: 0px auto;
   position: fixed;
   color: #495259;
   z-index: 9999;
   font-family: "Lato", sans-serif;
   box-shadow: 0 0 30px rgb(0 0 0 / 20%);
   border-radius: 0 0 2px 2px;
}

.modal-dialog {
   box-shadow: 0 -6px 0 0 #cf2127;
   border-radius: 0 0 2px 2px;
   text-align: center;
   white-space: normal;
   background: #fff;
   position: relative;
}

.modal-inner {
   padding: 10px;
   border-radius: 8px;
}

.modal-container {
   padding: 40px 35px;
}

.modal-container {
   border: none;
}

.es .modal-container,
.it .modal-container,
.de .modal-container,
.pt .modal-container {
   padding: 34px 28px;
}

*:focus {
   outline: none;
}
.modal-container p {
   margin: 0;
}

.modal-discount {
   color: #222222;
   /* font: 700 40px/50px "Lato", sans-serif; */
   font: normal normal bold 32px/42px Lato;
   text-transform: capitalize;
   padding: 0;
   display: inline-block;
   letter-spacing: normal;
   text-align: center;
}

.modal-discount:before,
.modal-discount:after {
   display: none;
}

.modal-price--box {
   margin-top: 24px;
}
.fr .modal-price--box {
    max-width: 256px;
    margin: 24px auto 0;
}

.modal-discount--subtitle {
   display: block;
   font: 400 20px/32px "Lato", sans-serif;
   color: #222;
}
.ja .modal-discount--subtitle {
   font: 400 19px/32px "Lato", sans-serif;
}
.modal-offer,
.modal-price .modal-price--box,
.modal-price--main,
.modal-price--sec {
   display: inline-block;
}
.modal-price--box-exclusive {
   color: #cf2127;
   font: 900 30px/40px 'Lato', Arial, sans-serif;
   text-transform: uppercase;
}
.en .modal-price--box-exclusive {
    font-size: 40px;
    line-height: 50px;
}

.modal-offer {
   color: #646464;
   font: normal normal 300 16px/22px Lato;
}

.modal-price--main {
   position: relative;
   padding-left: 15px;
}

.modal-price {
   font-size: 24px;
}

.modal-price span {
   font-size: 30px;
   font-family: "Lato", sans-serif;
}

a.close {
   float: right;
   z-index: 2;
   position: relative;
   top: 14px;
   left: -13px;
}
a.close:hover {
   opacity: 0.5;
}

.modal-button {
   display: block;
   width: 100%;
   max-width: 258px;
   margin: 24px auto 0;
   padding: 12px 18px;
   font: normal normal 900 16px/16px "Lato", sans-serif;
   letter-spacing: 0.54px;
   background: #01af58;
   text-transform: uppercase;
   cursor: pointer;
   outline: none;
   height: unset;
   border-radius: 22px;
}

a.modal-button {
   display: inline-block;
   text-decoration: none !important;
   color: #ffffff !important;
   transition: all 0.5s linear;
}

a.modal-button:hover {
   color: #ffffff;
   text-decoration: none;
   transition: all 0.5s linear;
   background: #027a3e;
}
.modal-button i.arrow-right {
   position: relative;
   left: -50px;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
}
/* a.modal-button:hover .arrow-right {
   border: solid #ffffff;
   border-width: 0 2px 2px 0;
   display: inline-block;
   vertical-align: middle;
   padding: 4px;
   margin-right: 10px;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
   left: 0;
   top: -1px;
} */
/* .es a.modal-button:hover .arrow-right {
   border: solid #ffffff;
   border-width: 0 2px 2px 0;
   display: inline-block;
   vertical-align: middle;
   padding: 4px;
   margin-top: -4px;
   margin-right: 5px;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
} */
.modal-discount--subtitle .arrow-right::before {
   display: none;
}