/*NOTE - page specific CSS - use for overrides*/
.banner {
    background-image: url('images/300@2x.jpg');
    height: 660px;
}
.banner-content{
    top: 10%;
    height: 340px;
    width: 340px;
    left: -50%;
    right: -50%;
    justify-content: flex-start;
}
.banner-copy{
    margin-top: 4em;
}

sup{
    top: -0.8em;
    font-size: 50%;
}

@media (min-width: 376px) {
    .banner{
        height: 660px;
    }
}

@media (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi){ 
    .banner {
        background-image: url('images/300@2x.jpg');
    }
}
@media (min-width: 444px) {
    .banner {
        background-image: url('images/444.jpg');
        height: 454px;
    }
    .banner-content {
        height: 396px;
        width: 396px;
        left: 30%;
        right: unset;
        top: 22%;
    }
}
@media (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi) and (min-width: 444px) {
    .banner {
        background-image: url('images/444@2x.jpg');
    }
}
@media (min-width: 636px) {
    .banner {
        background-image: url('images/636.jpg');
        height: 506px;
    }
    .banner-content {
        height: 56vw;
        width: 56vw;
        left: 36%;
        top: 16%;
    }
}
@media (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi) and (min-width: 636px) {
    .banner {
        background-image: url('images/636@2x.jpg');
    }
}
@media (min-width: 732px) {
    .banner {
        background-image: url('images/732.jpg');
        height: 536px;
    }
    .banner-content {
        height: 50vw;
        width: 50vw;
        max-width: 370px;
        max-height: 370px;
        top: 20%;
        left: 40%;
    }
}
@media (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi) and (min-width: 732px) {
    .banner {
        background-image: url('images/732@2x.jpg');
    }
}
@media (min-width: 972px) {
    .banner-copy{
        margin-top: 0;
    }
    .banner {
        background-image: url('images/972@2x.jpg');
        background-position: bottom;
        height: 656px;
    }
    .banner-content {
        height: 43vw;
        width: 43vw;
        max-width: 454px;
        max-height: 454px;
        left: 42%;
        top: 22%;
        justify-content: center;
    }
}
@media (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi) and (min-width: 972px) {
    .banner {
        background-image: url('images/972@2x.jpg');
    }
}
@media (min-width: 972px) and (min-height: 732px) {
    .banner {
        height: 712px;
    }
}

/* CUSTOM */

.large-screen-only{
    display: none;
}
@media (min-width: 972px) {
    .large-screen-only{
        display: block;
    }
}

.layer{
    position: absolute;
    z-index: inherit;
}

.layer.stamp{
    top: 49%;
    right: 0;
    width: 190px;
    margin: 0 auto;
}
.layer.host{
    top: 43%;
    left: -18%;
    right: auto;
    width: 343px;
    margin: 0 auto;
}
.layer.chip{
    top: 40%;
    width: 220px;
    left: -22%;
}
.layer.seven{
    top: 42%;
    left: -10%;
    width: 130px;
}
.layer.bingo{
    right: -2%;
    width: 164px;
    top: 54%;
}
.layer.cake{
    top: 70%;
    left: 6%;
    width: 250px;
}

@media (min-width: 376px) {
    .layer.stamp{
        top: 45%;
        width: 220px;
    }
}

@media (min-width: 444px) and (max-width: 600px){
    .layer.host{
        display: none;
    }
    .layer.seven{
        top: 19%;
        left: 7%;
        width: 184px;
    }
    .layer.cake{
        top: 56%;
        left: 5%;
        width: 250px;
    }
    .layer.bingo{
        display: none;
    }
    .layer.chip{
        display: none;
    }
}

@media (min-width: 600px) {
    .layer.stamp{
        top: 10%;
        left: 67vw;
        width: 140px;
    }
    .layer.host{
        display: none;
    }
    .layer.chip{
        transform: unset;
        left: 0;
        top: 70%;
    }
    .layer.seven{
        top: 20%;
        margin: 0 auto;
        left: -30%;
        right: 0;
        width: 200px;
    }
    .layer.bingo{
        right: -2%;
        top: 68%;
    }
    .layer.cake{
        top: 58%;
        left: 14%;
        width: 262px;
    }
}

@media (min-width: 732px) {
    .layer.stamp{
        top: 10%;
        left: 65vw;
        width: 166px;
    }
    .layer.chip{
        top: 70%;
        width: 186px;
    }
    .layer.bingo{
        width: 180px;
        top: 70%;
    }
}

@media (min-width: 972px) {
    .layer.stamp{
        top: 11%;
        left: 59vw;
        width: 220px;
    }
    .layer.chip{
        top: 76%;
        width: 200px;
    }
    .layer.seven{
        top: 20%;
        width: 250px;
        right: 0;
    }
    .layer.bingo{
        width: 226px;
        top: 70%;
        right: 0%;
    }
    .layer.cake{
        top: 61%;
        left: 24%;
        width: 334px;
    }
}

@media (min-width: 1200px) {
    .layer.stamp{
        left: 50%;
        width: 230px;
    }
}