.newsletter-modal{position:fixed;top:187px;right:53px;width:586px;height:auto;justify-content:center;align-items:center;display:none;opacity:0;z-index:10000001;transition:opacity .3s ease-in-out}.newsletter-modal.open{display:flex;opacity:1}.newsletter-modal .newsletter-modal__close{position:absolute;background-color:#fff;border-radius:50%;top:-21px;right:calc(50% - 21px);width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10000002}.newsletter-modal .newsletter-modal__close svg{transform:rotate(45deg);fill:var(--hp-color-light);transition:all .3s ease-in-out}.newsletter-modal .newsletter-modal__close svg:hover{fill:var(--hp-color-light-active)}.newsletter-modal .newsletter-modal__container{background-color:#fff;border-radius:8px;overflow:hidden}.newsletter-modal .newsletter-modal__container .newsletter-modal__wrapper{overflow-y:auto}.newsletter-modal .newsletter-modal__container .newsletter-modal__wrapper .newsletter-modal__image{width:100%;height:295px;object-fit:cover;display:flex}.newsletter-modal .newsletter-modal__container .newsletter-modal__wrapper .newsletter-modal__image img{object-fit:cover;object-position:center;width:100%}.newsletter-modal .newsletter-modal__container .newsletter-modal__content{padding:56px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;text-align:center}.newsletter-modal .newsletter-modal__container .newsletter-modal__content h2{margin:0}.newsletter-modal .newsletter-modal__container .newsletter-modal__content p{margin-top:20px}.newsletter-modal .newsletter-modal__container .newsletter-modal__content .newsletter-modal__form{margin-top:32px}.newsletter-modal .newsletter-modal__container .newsletter-modal__content .newsletter-modal__form .newsletter__field{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:100%;justify-self:center;position:relative}.newsletter-modal .newsletter-modal__container .newsletter-modal__content .newsletter-modal__form .newsletter__field:after{display:flex;align-items:center;justify-content:center;pointer-events:none;position:absolute;width:100%;height:51px;top:0;left:0;color:inherit;content:attr(data-placeholder);font-family:var(--hp-font--secondary);font-weight:var(--hp-font-weight--regular);font-size:var(--hp-typo--cta-small);line-height:1.6;letter-spacing:0%;transition:color .15s ease-in-out,font-size .15s ease-in-out,transform .15s ease-in-out}.newsletter-modal .newsletter-modal__container .newsletter-modal__content .newsletter-modal__form .newsletter__field.newsletter__field--focus:after{font-size:10px;transform:translateY(-10px);color:var(--hp-color-light-active)}.newsletter-modal .newsletter-modal__container .newsletter-modal__content .newsletter-modal__form .newsletter__field .newsletter__input{width:100%;margin-bottom:12px;border:1.5px solid var(--hp-color-light);outline:none;box-shadow:none;background-color:transparent;height:51px;padding-top:18px;border-radius:32px;text-align:center;text-underline-position:from-font;text-decoration-skip-ink:none;color:var(--hp-color-light-active);position:relative}.newsletter-modal .newsletter-modal__container .newsletter-modal__content .newsletter-modal__form button{width:100%}.newsletter-modal__overlay{width:100vw;height:100vh;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000000;opacity:0;pointer-events:none;background-color:var(--hp-color-darker);transition:all .3s ease-in-out;display:flex!important}.newsletter-modal__overlay.open{opacity:.7;pointer-events:all}@media (max-width: 768px){.newsletter-modal{right:16px;top:auto;bottom:16px;width:calc(100% - 32px);max-height:80vh;transform:translateY(300px);display:flex;pointer-events:none;transition:opacity .3s ease-in-out,transform .3s ease-in-out}.newsletter-modal.open{transform:translateY(0);pointer-events:all}.newsletter-modal .newsletter-modal__container{max-height:80vh;overflow-y:auto}.newsletter-modal .newsletter-modal__container .newsletter-modal__wrapper .newsletter-modal__image{height:173px}.newsletter-modal .newsletter-modal__container .newsletter-modal__wrapper .newsletter-modal__content{padding:36px}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/newsletter-modal.css.map */