.lgm-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 0;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.lgm-popup-overlay.lgm-visible {
    opacity: 1;
}

/* Positioning: the overlay covers the full viewport as before, and the
   position setting only changes where the box sits within it. */
.lgm-popup-overlay.lgm-pos-top-left      { justify-content: flex-start; align-items: flex-start; }
.lgm-popup-overlay.lgm-pos-top-center    { justify-content: center;     align-items: flex-start; }
.lgm-popup-overlay.lgm-pos-top-right     { justify-content: flex-end;   align-items: flex-start; }
.lgm-popup-overlay.lgm-pos-center-left   { justify-content: flex-start; align-items: center; }
.lgm-popup-overlay.lgm-pos-center        { justify-content: center;     align-items: center; }
.lgm-popup-overlay.lgm-pos-center-right  { justify-content: flex-end;   align-items: center; }
.lgm-popup-overlay.lgm-pos-bottom-left   { justify-content: flex-start; align-items: flex-end; }
.lgm-popup-overlay.lgm-pos-bottom-center { justify-content: center;     align-items: flex-end; }
.lgm-popup-overlay.lgm-pos-bottom-right  { justify-content: flex-end;   align-items: flex-end; }

.lgm-popup {
    background: #fff;
    width: auto;
    max-width: 800px;
    border-radius: 8px;
    position: relative;
}

.lgm-popup-image {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

/* Custom size. A popup with no width or height set never gets these
   classes, so it keeps the original auto sizing. */
.lgm-popup.lgm-has-width {
    width: var(--lgm-width);
    max-width: 100%;
}

.lgm-popup.lgm-has-height {
    height: var(--lgm-height);
    max-height: 100%;
}

.lgm-popup.lgm-has-height .lgm-popup-image {
    height: 100%;
    object-fit: cover;
}

/* Text over the image. pointer-events is off so a click on the text area
   still reaches the image and opens the redirect URL, as before. Links
   inside the text switch it back on. */
.lgm-popup-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    pointer-events: none;
}

.lgm-popup-content.lgm-text-top {
    justify-content: flex-start;
}

.lgm-popup-content.lgm-text-bottom {
    justify-content: flex-end;
}

.lgm-popup-content > :first-child {
    margin-top: 0;
}

.lgm-popup-content > :last-child {
    margin-bottom: 0;
}

/* Themes often colour headings, paragraphs and links with selectors that
   out-rank a plain class, so colour is inherited explicitly here. Text
   the editor has coloured sits in its own span and is not affected. */
.lgm-popup-content h1,
.lgm-popup-content h2,
.lgm-popup-content h3,
.lgm-popup-content h4,
.lgm-popup-content h5,
.lgm-popup-content h6,
.lgm-popup-content p,
.lgm-popup-content li {
    color: inherit !important;
}

/* Links use the popup's link colour if one is set, otherwise the text colour. */
.lgm-popup-content a {
    color: var(--lgm-link-color, inherit) !important;
    text-decoration: underline;
    pointer-events: auto;
}

/* Extra images (for example a school badge), placed from the admin preview
   canvas. Left, top and width are percentages of the popup box. They ignore
   the pointer so a click still reaches the popup underneath. */
.lgm-popup-layer {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
    pointer-events: none;
}

/* Text blocks placed from the admin canvas. Left, top and width are
   percentages of the popup box. Type sizes and colours are set here, not
   left to the theme, so the admin preview is a fair guide. Like the images
   they ignore the pointer, except for links.

   The :is(#top, body) prefix gives the !important rules ID-level weight.
   Themes such as Enfold style paragraphs and headings with #top selectors,
   which would otherwise beat a plain class here. It also matches sites that
   have no #top, because body is in the list. */
.lgm-popup-text {
    position: absolute;
    box-sizing: border-box;
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    pointer-events: none;
}

:is(#top, body) .lgm-popup-text h1,
:is(#top, body) .lgm-popup-text h2,
:is(#top, body) .lgm-popup-text h3,
:is(#top, body) .lgm-popup-text h4,
:is(#top, body) .lgm-popup-text h5,
:is(#top, body) .lgm-popup-text h6 {
    color: inherit !important;
    padding: 0 !important;
    margin: 0 0 0.5em !important;
    font-weight: 600;
    line-height: 1.2 !important;
}

:is(#top, body) .lgm-popup-text h1 { font-size: 2em !important; }
:is(#top, body) .lgm-popup-text h2 { font-size: 1.6em !important; }
:is(#top, body) .lgm-popup-text h3 { font-size: 1.3em !important; }
:is(#top, body) .lgm-popup-text h4 { font-size: 1.1em !important; }
:is(#top, body) .lgm-popup-text h5,
:is(#top, body) .lgm-popup-text h6 { font-size: 1em !important; }

:is(#top, body) .lgm-popup-text p,
:is(#top, body) .lgm-popup-text li {
    color: inherit !important;
    font-size: inherit !important;
    margin: 0 0 1em;
}

:is(#top, body) .lgm-popup-text > :last-child {
    margin-bottom: 0 !important;
}

:is(#top, body) .lgm-popup-text a {
    color: var(--lgm-link-color, inherit) !important;
    text-decoration: underline;
    pointer-events: auto;
}

/* Open animations. Fade In animates opacity from 0 to 1. The four slide
   animations stay fully opaque throughout and only animate position, with
   a slight overshoot on landing. How long the popup waits before it
   opens at all is controlled in popup.js, not here. */
.lgm-popup.lgm-anim-none {
    opacity: 1;
}

.lgm-popup.lgm-anim-fade-in {
    opacity: 0;
}
.lgm-popup-overlay.lgm-visible .lgm-popup.lgm-anim-fade-in {
    animation: lgmFadeIn 0.4s ease-out forwards;
}

.lgm-popup.lgm-anim-slide-left {
    transform: translateX(-60px);
}
.lgm-popup-overlay.lgm-visible .lgm-popup.lgm-anim-slide-left {
    animation: lgmSlideLeft 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.lgm-popup.lgm-anim-slide-right {
    transform: translateX(60px);
}
.lgm-popup-overlay.lgm-visible .lgm-popup.lgm-anim-slide-right {
    animation: lgmSlideRight 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.lgm-popup.lgm-anim-slide-up {
    transform: translateY(60px);
}
.lgm-popup-overlay.lgm-visible .lgm-popup.lgm-anim-slide-up {
    animation: lgmSlideUp 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.lgm-popup.lgm-anim-slide-down {
    transform: translateY(-60px);
}
.lgm-popup-overlay.lgm-visible .lgm-popup.lgm-anim-slide-down {
    animation: lgmSlideDown 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.lgm-popup.lgm-anim-zoom-in {
    opacity: 0;
}
.lgm-popup-overlay.lgm-visible .lgm-popup.lgm-anim-zoom-in {
    animation: lgmZoomIn 0.4s ease-out forwards;
}

@keyframes lgmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes lgmSlideLeft {
    from { transform: translateX(-60px); }
    to   { transform: translateX(0); }
}

@keyframes lgmSlideRight {
    from { transform: translateX(60px); }
    to   { transform: translateX(0); }
}

@keyframes lgmSlideUp {
    from { transform: translateY(60px); }
    to   { transform: translateY(0); }
}

@keyframes lgmSlideDown {
    from { transform: translateY(-60px); }
    to   { transform: translateY(0); }
}

@keyframes lgmZoomIn {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

/* When the popup is scaled down on a small screen (see popup.js), the close
   button and countdown are scaled back up so they stay easy to tap and read. */
.lgm-popup-close,
.lgm-popup-countdown {
    zoom: calc(1 / var(--lgm-zoom, 1));
}

.lgm-popup-countdown {
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    background: none;
    padding: 15px 0px;
    position: absolute;
    bottom: -5px;
}
.lgm-popup-countdown span, .lgm-popup-countdown bdi {
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 12px;
}
.lgm-popup-countdown span {
    margin-right: 7px;
}
.lgm-popup-close {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 10px;
    text-align: center;
    border-radius: 100px;
    border: 2px solid transparent;
    line-height: 25px;
    padding: 0;
    top: 10px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    font-family: Arial, Baskerville, monospace !important;
    font-size: 28px;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    cursor: pointer;
}
.lgm-popup-close:hover {
    -webkit-transform: scale(0.8) rotateZ(180deg);
    transform: scale(0.8) rotateZ(180deg);
    font-size: 23px;
}

@media only screen and (max-width: 768px) {
    /* Corner and edge positions don't have enough room to read as
       distinct once the popup is 90% of a phone's width, so every
       position collapses to center on small screens. */
    .lgm-popup-overlay {
        justify-content: center !important;
        align-items: center !important;
    }

    #top .lgm-popup-countdown {
        position: static;
        bottom: -5px;
        background: #0A2644;
    }
    #top .lgm-popup-countdown span {
        margin-right: 0;
    }
    #top .lgm-popup-countdown span, #top .lgm-popup-countdown bdi {
        background: none;
        display: block;
    }
    .lgm-popup {
        width: 90%;
    }
    .lgm-popup.lgm-has-width {
        width: var(--lgm-width);
        max-width: 90%;
    }
    .lgm-popup-content {
        padding: 20px;
    }
}