*, *::after, *::before { box-sizing: border-box; } .modal { display: none; bottom: 0; left: 0; opacity: 1; overflow: hidden; position: fixed; right: 0; top: 0; z-index: 999; color: #fff; align-items: center; justify-content: center } .modal.modal--quick-shop { align-items: flex-start; } .modal a, .modal a:hover { color: inherit; } .modal .btn:not([disabled]):not(.btn--secondary):not(.btn--body), .modal .btn:not([disabled]):not(.btn--secondary):not(.btn--body):hover { color: #fff; color: var(--colorBtnPrimaryText); } .modal-open .modal .modal__inner { animation: modal-open 0.5s forwards; } .modal-open .modal:before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color:#000000e3!important; animation: overlay-on 0.5s forwards; cursor: pointer; } [class*="js-modal-open-"] { cursor: pointer !important; } .modal-closing .modal .modal__inner { animation: modal-closing 0.5s forwards; } .modal-closing .modal:before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; background-color: var(--colorModalBg); animation: overlay-off 0.5s forwards; } .modal-open--solid .modal:before { background-color: #000; background-color: var(--colorModalBg) } .modal-open .modal--solid:before { background-color: #000; animation: full-overlay-on 0.5s forwards; } .modal-closing .modal--solid:before { background-color: #000; animation: full-overlay-off 0.5s forwards; } .modal--is-closing { display: flex !important; overflow: hidden; } .modal--is-active { display: flex !important; overflow: hidden; } @media only screen and (min-width:769px) { .modal-open { overflow: hidden; } } .modal__inner { transform-style: preserve-3d; flex: 0 1 auto; margin: 15px; max-width: calc(100% - 15px); display: flex; align-items: center } @media only screen and (min-width:769px) { .modal__inner { margin: 40px; max-width: calc(100% - 80px) } } .modal--square .modal__inner { background-color: #fff; color: #1c1d1d; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1) } .modal__inner img { display: block; max-height: 90vh; } .modal__inner .image-wrap img { max-height: none; } .modal__centered { position: relative; flex: 0 1 auto; min-width: 1px; max-width: 100%; } .modal--square .modal__centered-content { max-height: 80vh; padding: 22.5px; min-width: 200px; min-height: 200px; overflow: auto; -webkit-overflow-scrolling: touch } @media only screen and (min-width:769px) { .modal--square .modal__centered-content { padding: 45px; max-height: 90vh; max-width: 1200px } } .modal__close { border: 0; padding: 15px; position: fixed; top: 0; right: 0; color: #fff } @media only screen and (min-width:769px) { .modal__close { padding: 30px } } .modal__close .icon { width: 28px; height: 28px; } .modal__close:focus, .modal__close:hover { color: #fff; } .modal--square .modal__close { position: absolute; color: #000; padding: 10px } .modal--square .modal__close:focus, .modal--square .modal__close:hover { color: #1c1d1d; } .modal .page-content, .modal .page-width { padding: 0; } .popup-cta { margin-bottom: 15px; } .modal--square .modal__close { background: transparent; } @media only screen and (max-width:768px) { .modal--mobile-friendly { top: auto; bottom: 0; overflow: auto } .modal--mobile-friendly.modal--square .modal__centered-content { padding: 20px 20px 0; } .modal--mobile-friendly.modal--is-active { overflow: auto; } .modal-open .modal--mobile-friendly:before { display: none; } .modal--mobile-friendly .modal__inner { margin: 0; border: 2px solid; border-color: #1c1d1d; border-color: var(--colorTextBody); } .modal--mobile-friendly .h1 { padding-right: 25px; } .modal--mobile-friendly input { font-size: 16px !important; } .modal--mobile-friendly .text-close { display: none; } } @keyframes modal-open{ 0%{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } } @keyframes modal-closing{ 0%{ opacity:1; transform:scale(1); } to{ opacity:0; transform:scale(0.9); } }