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

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

@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%;
    }
    .banner-copy {
        margin-top: 0.7em;
        transform: scale(0.75);
    }
}
@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: 404px;
        max-height: 404px;
        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 {
        background-image: url('images/972@2x.jpg');
        background-position: bottom;
        height: 656px;
    }
    .banner-content {
        height: 43vw;
        width: 43vw;
        max-width: 480px;
        max-height: 480px;
        left: 42%;
        top: 22%;
    }
}
@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: 59%;
    right: 0;
    width: 188px;
    margin: 0 auto;
}
.layer.seven{
    top: 63%;
    left: -22%;
    width: 227px;
}
.layer.bingo{
    /* right: 92px;
    width: 148px;
    top: 82%; */
    right: -10px;
    width: 178px;
    top: 66%;
}

@media (min-width: 376px) {
    .layer.stamp{
        top: 52%;
    }
    .layer.bingo{
        /* right: 92px;
        width: 168px;
        top: 79%; */
        right: -10px;
        width: 178px;
        top: 66%;
    }
    .layer.seven{
        top: 58%;
        left: -16%;
        width: 267px;
    }
}

@media (min-width: 444px) and (max-width: 600px){
    
    .layer.seven{
        display: none;
    }
    .layer.bingo{
        display: none;
    }
}

@media (min-width: 600px) {
    .layer.stamp{
        top: 10%;
        left: 67vw;
        width: 140px;
    }
    .layer.seven{
        display: none;
    }
    .layer.bingo{
        right: -2%;
        top: 68%;
    }
}

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

@media (min-width: 972px) {
    .layer.stamp{
        top: 11%;
        left: 65vw;
        width: 220px;
    }
    .layer.bingo{
        width: 226px;
        top: 70%;
        right: 0%;
    }
}

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