.ngparadelayedpopup { position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; padding: var(--padding); box-sizing: border-box; background-color: var(--fader); } @keyframes delayedpopupfadein { from { opacity: 0 } to { opacity: 1 } } .ngparadelayedpopupcloser { display: block; width: 48px; height: 48px; position: absolute; top: 0; right: 0; opacity: 0.7; } .ngparadelayedpopupcloser:hover { opacity: 1; } .ngparadelayedpopupcloser:focus { filter: brightness(2); opacity: 1; outline: none; } .ngparadelayedpopupstage { position: relative; background-color: var(--background); box-shadow: var(--shadow); } .ngparadelayedpopupstage:focus { outline: none; } .ngparadelayedpopuptext { padding: var(--padding); box-sizing: border-box; display: flex; flex-direction: column; } .ngparadelayedpopuppicture img { display: block; width: 100%; height: auto; } .ngparadelayedpopup form input[type=email] { border-color: #f1cfcf; border-width: 1px; border-style: solid; padding: 6px 12px 6px 12px; background: #ffffff; font: 15px Montserrat,Verdana,Helvetica,sans-serif; color: #5a5a5a; letter-spacing: 0px; border-radius: 0px; box-sizing: border-box; display: block; width: 100%; -webkit-appearance: none; appearance: none; margin-top: var(--padding); } .ngparadelayedpopup form input[type=email]:focus { border-color: #9ea815; background: #ffffff; } .ngparadelayedpopup .ngparadelayedpopupbutton { border-color: #80a4d1; border-width: 2px; border-style: solid; padding: 10px 20px 10px 20px; background: #212c65; font: 14px Montserrat,Verdana,Helvetica,sans-serif; color: #ffffff; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 7px; display: block; cursor: pointer; -webkit-appearance: none; margin-top: var(--padding); text-decoration: none; text-align: center; width: fit-content; } .ngparadelayedpopup .ngparadelayedpopupbutton:hover { border-color: #9ea815; background: #9ea815; font-weight: normal; font-style: normal; text-transform: uppercase; color: #ffffff; text-decoration: none; } .ngparadelayedpopup .ngparadelayedpopupbutton:focus { border-color: #80a4d1; background: #212c65; font-weight: normal; font-style: normal; text-transform: uppercase; color: #ffffff; outline: none; } .ngparadelayedpopup form label { display: block; margin: 10px 0; font-size: 80%; } .ngparadelayedpopup form input[type=checkbox] { margin: 0 10px 0 0; vertical-align: middle; } .ngparadelayedpopup form span { vertical-align: middle; } .ngparadelayedpopup h2 { margin-top: 0; } .ngparadelayedpopup-animate.ngparadelayedpopupopen { animation-duration: 0.3s; animation-name: delayedpopupfadein; } .ngparadelayedpopup.ngparadelayedpopupopen { display: flex; align-items: center; justify-content: center; overflow-y: visible; } .ngparadelayedpopup-centerhorizontal .ngparadelayedpopuptext { align-items: center; } .ngparadelayedpopup-centerhorizontal .ngparadelayedpopuptext h2, .ngparadelayedpopup-centerhorizontal .ngparadelayedpopuptext p { text-align: center; } .ngparadelayedpopup-centerhorizontal .ngparadelayedpopupbutton { margin-left: auto; margin-right: auto; } .ngparadelayedpopupstage { display: flex; } .ngparadelayedpopuptext>:first-child { flex-grow: 1; } .ngparadelayedpopup-centervertical .ngparadelayedpopuptext>:first-child { flex-grow: 0; } .ngparadelayedpopup-centervertical .ngparadelayedpopuptext { justify-content: center; } @media (min-width: 1024px) { .ngparadelayedpopupstage { width: var(--widthstage); border-radius: var(--radius); overflow: hidden; } .ngparadelayedpopuppicture img { width: var(--widthpicturedesktop); height: var(--heightpicturedesktop); } .ngparadelayedpopuppicture-right .ngparadelayedpopuptext { order: 0; } .ngparadelayedpopuppicture-right .ngparadelayedpopuppicture { order: 1; } .ngparadelayedpopuppicture-left .ngparadelayedpopupcloser { right: auto; left: 0; } } @media (max-width: 1023px) { .ngparadelayedpopupstage { flex-direction: column; max-width: 640px; height: 100%; overflow-y: auto; } .ngparadelayedpopuptext { flex-grow: 1; } }