/*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: 2em;
}

@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: 18%;
    }
}
@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-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: 480px;
        max-height: 480px;
        left: 42%;
        top: 18%;
        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;
}

.layer.stamp{
    top: 54%;
    right: 0;
    width: 190px;
    margin: 0 auto;
}
.layer.award{
    top: 60%;
    right: -10%;
    width: 220px;
    margin: 0 auto;
}
.layer.host{
    top: 59%;
    left: -21%;
    right: auto;
    width: 343px;
    margin: 0 auto;
}
.layer.chip{
    top: 49%;
    width: 220px;
    left: -22%;
}
.layer.bingo{
    right: -6%;
    width: 178px;
    top: 60%;
}

@media (min-width: 376px) {
    .layer.stamp{
        top: 63%;
        width: 220px;
    }
    .layer.award{
        top: 54%;
        width: 260px;
    }
    .layer.host{
        top: 54%;
        left: -16%;
    }
    .layer.chip{
        top: 43%;
        left: -22%;
    }
    .layer.bingo{
        right: -10%;
        top: 74%;
        width: 134px;
    }
}

@media (min-width: 444px) and (max-width: 600px){
    .layer.host{
        top: 14%;
        right: unset;
        left: -25%;
        width: 321px;
    }
    .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: 15%;
        right: -1%;
        width: 160px;
    }
    .layer.award{
        top: 24%;
        right: -15%;
    }
    .layer.host{
        top: 30%;
        left: -6%;
        right: auto;
    }
    .layer.chip{
        left: -5%;
        top: 12%;
    }
    .layer.seven{
        top: 20%;
        margin: 0 auto;
        left: -30%;
        right: 0;
        width: 200px;
    }
    .layer.bingo{
        right: -7%;
        top: 68%;
    }
    .layer.cake{
        top: 58%;
        left: 14%;
        width: 262px;
    }
}

@media (min-width: 732px) {
    .layer.stamp{
        top: 18%;
        left: 69vw;
        width: 180px;
    }
    .layer.award{
        top: 18%;
        right: -8%;
    }
    .layer.host{
        left: 4%;
        right: auto;
        width: 380px;
    }
    .layer.chip{
        width: 280px;
    }
    .layer.bingo{
        width: 180px;
        top: 70%;
    }
}

@media (min-width: 972px) {
    .layer.stamp{
        top: 20%;
        left: 63vw;
        width: 220px;
    }
    .layer.award{
        top: 20%;
    }
    .layer.chip{
        top: 22%;
        width: 370px;
    }
    .layer.host{
        width: 450px;
        top: 34%;
        left: 7%;
        right: auto;
    }
    .layer.seven{
        top: 20%;
        width: 250px;
        right: 0;
    }
    .layer.bingo{
        width: 216px;
        top: 73%;
        right: 0%;
    }
    .layer.cake{
        top: 61%;
        left: 24%;
        width: 334px;
    }
}

@media (min-width: 1200px) {
    .layer.bingo{
        width: 246px;
        top: 52%;
        right: -2%;
    }
    .layer.stamp{
        left: 56%;
        width: 230px;
    }
    .layer.award{
        width: 320px;
    }
    .layer.host{
        width: 557px;
        top: 20%;
        left: 5%;
        right: auto;
    }
}

.fluid-type-title {
    line-height: 0.95;
}