/**
 * Notice message style definitions

Table of Contents:

- Notice & Typography
- Logo
- Image
- Buttons
- Icons

- Responsive Dynamic Definitions
    -- Max-Width 991.98px [Tablet]

/*
    Notice & Typography
    ======================================= */

@font-face {
    font-family: "Lato";
    src: url("../fonts/Lato/Lato-Regular.eot?") format("eot"),
    url("../fonts/Lato/Lato-Regular.woff") format("woff"),
    url("../fonts/Lato/Lato-Regular.ttf") format("truetype"),
    url("../fonts/Lato/Lato-Regular.svg#Lato-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Lato Black";
    src: url("../fonts/Lato/Lato-Black.eot?") format("eot"),
    url("../fonts/Lato/Lato-Black.woff") format("woff"),
    url("../fonts/Lato/Lato-Black.ttf") format("truetype"),
    url("../fonts/Lato/Lato-Black.svg#Lato-Black") format("svg");
    font-weight: normal;
    font-style: normal;
}

.cz-notice p {
    font-size: 1rem;
}

.cz-notice *:focus {
    outline: 1px auto #18be95;
}

.cz-notice a {
    color: #179dbe;
    display: inline-block;
    font-weight: 900;
    text-decoration: none !important;
}

.cz-notice a:hover {
    color: #18be95;
}

.cz-notice a,
.cz-notice .button,
.cz-notice button {
    transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
}

.cz-notice a:not(.button)::after {
    background: rgba(0, 0, 0, .05);
    content: '';
    display: block;
    height: 2px;
    transition: width .3s;
    -o-transition: width .3s;
    -webkit-transition: width .3s;
    width: 0;
}

.cz-notice a:hover::after {
    width: 100%;
}

.wp-core-ui .cz-notice {
    background: #fff;
    border: none;
    border-radius: .3125rem;
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .1);
    color: #1e244f;
    font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 2rem;
    margin: 2rem 0;
    overflow: hidden;
}

.wp-core-ui .cz-notice strong {
    font-family: "Lato Black", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.wp-core-ui .cz-notice.notice.is-dismissible {
    padding: 2rem;
}

.cz-mt-1 {
    margin-top: 1rem !important;
}

.cz-mt-2 {
    margin-top: 2rem !important;
}

.cz-text-center {
    text-align: center;
}

/*
    Logo
    ======================================= */

.cz-notice h2,
.cz-notice h4 {
    line-height: 1.2;
    margin: 0;
}

.cz-notice h4 {
    text-transform: uppercase;
}

.cz-notice .theme-logo {
    margin-right: .5rem;
    max-width: 40px;
}

.cz-notice h2.theme-title {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    font-size: 3.125rem;
    justify-content: center;
}

.cz-notice h2.theme-title img,
.cz-notice h2.theme-title strong {
    align-self: center;
    -ms-flex-item-align: center;
}

/*
    Image
    ======================================= */

.cz-notice img.screenshot {
    box-shadow: 0 30px 40px rgba(0, 0, 0, .20);
    -webkit-box-shadow: 0 30px 40px rgba(0, 0, 0, .20);
    height: auto;
    margin-bottom: -5rem;
    max-width: 600px;
    transition: box-shadow .3s ease-in-out;
    -o-transition: box-shadow .3s ease-in-out;
    -webkit-transition: box-shadow .3s ease-in-out;
    width: 100%;
}

.cz-notice img.screenshot:hover {
    box-shadow: 0 30px 40px rgba(0, 0, 0, .40);
    -webkit-box-shadow: 0 30px 40px rgba(0, 0, 0, .40);
}

/*
    Buttons
    ======================================= */

.cz-notice .button {
    background: #18be95;
    border: 0;
    border-radius: .25rem;
    box-shadow: none;
    -webkit-box-shadow: none;
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    height: auto;
    line-height: 26px;
    margin: .2rem .2rem 0 0;
    padding: .5rem 1.5rem;
    text-transform: uppercase;
}

.cz-notice .button-secondary {
    background: #765ece;
    padding: .5rem 1.5rem;
}

.cz-notice .button-terciary {
    background: #5271c0;
}

.cz-notice .button:hover,
.cz-notice .button:focus {
    background: #1e244f;
    color: #fff;
}

.cz-notice .button:focus {
    box-shadow: 0 1px 10px rgba(24, 190, 149, .5);
    -webkit-box-shadow: 0 1px 10px rgba(24, 190, 149, .5);
    outline: none;
}

.cz-notice .button:active {
    transform: none;
    -ms-transform: none;
    -webkit-transform: none;
}

.cz-notice .notice-dismiss::before {
    content: "\62";
    font: bold 1.2rem/1.5rem cz-font;
    height: 1.2rem;
    width: 1.2rem;
}

.cz-notice .notice-dismiss:active:before,
.cz-notice .notice-dismiss:focus:before,
.cz-notice .notice-dismiss:hover:before {
    color: #333;
}

/*
    Icons
    ======================================= */

.cz-notice svg {
    display: inline-block;
    height: 1rem;
    overflow: hidden;
    vertical-align: middle;
    width: 1rem;
    fill: currentColor;
}

.cz-notice .button svg {
    margin-right: .5rem;
}

/*
    Responsive Dynamic Definitions
    ======================================= */

/*
	Max-Width 991.98px [Tablet]
	--------------------------------------- */

@media (max-width: 991.98px) {
    .cz-notice h1 {
        font-size: calc(1.3rem - -1vw);
    }

    .cz-notice h2.theme-title {
        font-size: calc(1.25rem - -0.9vw);
        line-height: 1.4;
    }

    .cz-notice h3 {
        font-size: calc(1.2rem - -0.6vw);
    }

    .cz-notice h4 {
        font-size: calc(1.15rem - -0.3vw);
    }

    .cz-notice h5 {
        font-size: calc(1.1rem - -0.3vw);
    }

    .cz-notice h6 {
        font-size: calc(1rem - -0.3vw);
    }

    .cz-notice .theme-logo {
        max-width: 25px;
    }
}