/* ####################################
   Popup Notices

   - Critical Rendering Path: Required
   - Popup notices are usually combined with animations, e.g. ".animated .bounceInUp"
   ################################## */

.popupNotice {
    position: fixed;
    z-index: 1000;
    box-sizing: border-box;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 0;
    background: #e4e7ec;
    background: #fed66a;
    background: papayawhip;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
    opacity: 1 !important;
    transition: all ease-in-out 250ms; /* For the slide out animation. */
}

    .popupNotice .message {
        box-sizing: border-box;
        padding: var(--site-padding-thin);
        max-width: 1440px; /* Maximum width of the site's default content template, check associated media query below. */
        margin: 0 auto;
    }

        .popupNotice > .message > * {
            margin: 0 0 10px;
        }

        .popupNotice > .message > :last-child {
            margin-bottom: 0;
        }

        .popupNotice a:link {
        }

    .popupNotice .dismiss {
        position: absolute;
        top: -24px;
        right: 20px;
    }

        .popupNotice .dismiss a {
            display: inline-block;
            box-sizing: border-box;
            width: 48px;
            height: 48px;
            padding-left: 48px;
            color: var(--site-color-white);
            font-weight: 500;
            text-decoration: underline;
            text-align: center;
            overflow: hidden;
            background: var(--site-button-primary-bg);
            background-repeat: no-repeat;
            border-radius: 100%;
            cursor: pointer;
        }

            .popupNotice .dismiss a:hover {
                background: var(--site-color-1-darker);
            }

            .popupNotice .dismiss a::before {
                content: "X";
                position: absolute;
                top: 0;
                left: 0;
                width: 48px;
                line-height: 48px;
                color: var(--site-color-white);
                font-family: 'Comic Sans MS',Arial,Helvetica,sans-serif;
                font-weight: bold;
                font-size: 16px;
            }

@media screen and (max-width: 1200px) {

    .popupNotice .message {
        width: 100%;
        max-width: none;
        border-radius: 0;
    }

    .popupNotice .dismiss {
        right: 20px;
    }

}

@media screen and (max-width: 900px) {

    .popupNotice {
        max-width: 100%;
    }

        .popupNotice > .message {
            font-size: 91.7%;
        }

}