/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

@font-face {
   font-family: 'Roboto', sans-serif;
   src: url(../../fonts/Roboto-Black.ttf);
   font-weight: normal;
}

#close {
   border: solid 1px;
   width: 14px;
   padding: 3px;
   background-color: red;
   float: right;
   margin: 10px;
   cursor: pointer;
   border-radius: 2px;
   font-weight: bold;
}

#close:hover {
   background-color: #ff44449e;
}

/* Popup Desing CSS*/
.popup-box {
   position: fixed;
   background: rgb(214 214 214/80%);
   width: 100%;
   height: 100%;
   z-index: 99999;
   top: 0;
   left: 0;
   right: 0;
   display: none;
}

.popup-box .popup-box-wrap {
   max-width: 800px;
      width: 100%;
   margin: 0 auto;
   position: absolute;
   top: 50%;
   left: 0;
      right: 0;
   text-align: center;
   display: block;
   min-height: auto;
   background: #fff;
   padding: 50px;
   max-height: calc(100dvh - 50px) !important;
      overflow: auto;
      border-radius: 5px;
      margin: 0 auto;
      transform: translate(0, -50%);
   }
   
   .popup-box .popup-box-wrap #close {
      top: 5px !important;
      right: 5px !important;
}

.popup-box .popup-box-wrap h2 {
   font-size: 30px;
   line-height: 1;
   font-weight: 400;
   color: cornflowerblue;
   text-transform: uppercase;
   margin-bottom: 40px;
}

.popup-box .popup-box-wrap .popup-column {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 30px;
   border-bottom: 1px solid #eee;
   margin-bottom: 10px;
}

.popup-box .popup-box-wrap .popup-column .popup-column-left {
   width: 50%;
   line-height: 0;
}

.popup-box .popup-box-wrap .popup-column .popup-column-right {
   width: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.popup-box .popup-box-wrap .popup-column .popup-column-right h3 {
   font-size: 22px;
   font-weight: 400;
   line-height: 1;
   margin: 0 0 20px;
}

.popup-box .popup-box-wrap .popup-column .popup-column-right .patern-img {
   width: 100%;
   height: 20px;
   margin-bottom: 20px;
}

.popup-box .popup-box-wrap .popup-column .popup-column-right span {
   display: inline-block;
   font-size: 22px;
   line-height: 32px;
   margin: 0;
   position: relative;
}

.popup-box .popup-box-wrap .cool_newsletter__form {
   margin-top: 10px;
}

.popup-box .popup-box-wrap .cool_newsletter__form .sign-up-form .sign-up-form-inline {
   width: auto;
   max-width: 100%;
      margin: 0 auto;
   }
   
   .popup-box .popup-box-wrap .cool_newsletter__form .sign-up-form .sign-up-form-inline .email-field {
   width: 372px;
   margin: 0 auto;
   max-width: 100%;
}

.popup-box .popup-box-wrap .cool_newsletter__form .sign-up-form .sign-up-form-inline .sign-up-email {
   border: 1px solid rgba(0, 0, 0, .35);
   border-radius: 3px;
   text-align: left;
   height: 38px;
   padding: 10px 15px;
   width: 100%;
   display: block;
   margin-bottom: 5px;
   background: transparent;
   font-weight: 400;
   font-size: 16px;
   color: rgb(96, 101, 111);
   font-family: Eina01Regular, "sans-serif", arial;
}

.popup-box .popup-box-wrap .cool_newsletter__form .sign-up-form .sign-up-form-inline .sign-up-email::placeholder {
   color: rgb(57 86 140 / 50%);
}

.popup-box .popup-box-wrap .cool_newsletter__form .sign-up-form .sign-up-form-inline .submit-field {
   width: 372px;
   display: block;
      max-width: 100%;
      margin: 0 auto;
}

.popup-box .popup-box-wrap .cool_newsletter__form .sign-up-form .sign-up-form-inline .sign-up-btn {
   font-size: 12px;
   line-height: 1;
   font-weight: 700;
   color: #fff;
   text-transform: uppercase;
   margin: 0 auto;
   border-radius: 3px;
   display: block;
   width: 100%;
   border: 0;
   padding: 9px 10px !important;
   background: #39568c;
   font-family: 'DrukWideMedium', 'sans-serif', arial !important;
   letter-spacing: 0;
}

.popup-box .popup-box-wrap .cool_newsletter__form .sign-up-form .cool_newsletter_validate {
   text-align: center;
   width: 100%;
   max-width: 100%;
   margin: 6px auto 0;
}

.popup-box .popup-box-wrap .cool_newsletter__form .sign-up-form .cool_newsletter_validate span {
   font-size: 14px;
   line-height: 1px;
   color: rgb(170, 100, 99);
   text-align: left;
}

.popup-box .popup-box-wrap .cool_newsletter__form .sign-up-form .sign-up-form-inline .sign-up-btn:hover {
   background: #4263A1;
}

.popup-box .popup-box-wrap .cool_newsletter__form .sign-up-form .sign-up-form-inline .sign-up-email:focus,
.popup-box .popup-box-wrap .cool_newsletter__form .sign-up-form .sign-up-form-inline .sign-up-btn:focus {
   outline: none;
}

.popup-box .popup-box-wrap #close {
   position: absolute;
   top: -10px;
   right: -10px;
   border: 0;
   float: none;
   background: #eee;
   padding: 10px;
   margin: 0;
   font-weight: normal;
   font-size: 18px;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

.popup-box .popup-box-wrap img {
   width: 700px;
   height: 425px;
   object-fit: contain;
}

.outside-close-popup {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   content: ' ';
}

@media only screen and (max-width:1200px) {
   .popup-box .popup-box-wrap {
      max-width: calc(100% - 40px);
      padding: 19px;
      height: auto;
   }
}
@media screen and (max-width:830px) {
   .popup-box .popup-box-wrap {
      max-width: 100%;
      width: calc(100% - 30px);
   }
}
@media only screen and (max-width:800px) {
   .popup-box .popup-box-wrap {
      max-width: calc(100% - 40px);
      padding: 19px;
      height: auto;
   }

   .popup-box .popup-box-wrap .cool_newsletter__form .sign-up-form .sign-up-form-inline .sign-up-email {
      font-size: 14px;
      height: 32px;
   }

   .popup-box .popup-box-wrap img {
      height: auto;
   }
}

@media screen and (max-height: 601px) {
   .popup-box .popup-box-wrap img {
      width: auto;
      height: auto;
      max-height: calc(100vh - 170px);
   }

   .popup-box .popup-box-wrap {
      width: auto;
   }
}