* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; 
    white-space: normal; font: 20px/1.2em "Pan Display Regular"; letter-spacing: 0.05em; }
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
@font-face {
    font-family: "Pan Display Regular";
    src:
        url("PanDisplayWeb-Regular.woff2") format("woff2"),
        url("PanDisplayWeb-Regular.woff") format("woff");
}
@font-face {
    font-family: "Pan Display Bold";
    src:
        url("PanDisplayWeb-Bold.woff2") format("woff2"),
        url("PanDisplayWeb-Bold.woff") format("woff");
}
/*------------- GLOBAL UNCHANGED STYLES -------------*/

.wrapper{
    position: relative; overflow: hidden; 
    display: flex; flex-flow: column wrap; /*  row wrap for horizontal, column wrap for vertical  */
    justify-content: flex-end; align-items: center; 

    color: #27251F;
    background: #FFF;
    border: solid 1px #ffcad4; 
    width: 300px;  /* Ad Width */
    height: 250px;  /* Ad Height */
}
.wrapper > * { position: absolute; }

.bg {
    background: url(bg.png) no-repeat 0 0 / cover;
    width: 300px;
    height: 250px;
    top: 0;
    left: 0;
}

.cta{
    display: flex; justify-content: center; align-items: center;
    border: solid 1px #ffcad4; 
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.12em;
    padding-top: 1px;
    text-align: center;
    width: 108px;
    height: 31px;
    top: 168px;
}
.na-cta   { display: flex; width: 130px; height: 40px; font-size: 12px; }
.coop-cta { display: none; width: 130px; height: 40px; font-size: 12px; }

.logo{
    width: 106px;
    top: 211px;
}
.coop{
    display: flex; justify-content: center; align-items: center;
    background: #FFFFFF;
    width: 300px;  /* Ad Width */
    height: 50px;  /* Retailer Area Height */
    bottom: -50px; /* Negative Retailer Area Height */
}
.coop img {
    max-width: 85%;
    max-height: 40px;
}

.imgs {
    background: #ffcad4;
    width: 91px;
    height: 114px;
    left: 195px;
    top: 11px;
    overflow: hidden;
}

/*------------- INITIAL POSITION & SIZING -------------*/

h1 { font-size: 22px; top: 135px; letter-spacing: 0; }

.p1, .p2 { top: 0px; left:0; position: absolute; opacity: 0; }

/*---------------- ANIMATION ------------------*/
/* animation: name | duration | easing | delay | count; */

.p1 {
    animation:  on 1s ease-in-out 0s forwards,
                off 1s ease-in-out 3s forwards;
}

.p2 {
    animation:  on 1s ease-in-out 4s forwards;
}

@keyframes on {
    0%   {  opacity: 0; }
    100% {  opacity: 1; }      
}

@keyframes off {
    0%   {  opacity: 1; }
    100% {  opacity: 0; }      
}