/*NOTE - page specific CSS - use for overrides*/
:root {
    --secondary-1: #53c7a6;
    --secondary-2: #89d6c2;
    --secondary-3: #274686;
    --secondary-4: #0062c8;
    --secondary-5: #2475ec;
    --secondary-6: #ed475b;
    --secondary-7: #fb7e30;
    --secondary-8: #f9b223;
    --secondary-9: #f9e433;
}
.footer .BcnGrid-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.banner {
    background-image: url('images/300@2x.png');
    height: 667px;
}
.banner-content{
    top: 20%;
    height: 429px;
    width: 100%;
    justify-content: space-between;
}

.BcnButton-containedPrimary{
    background: none;
    background-color: var(--secondary-7);
}
.BcnButton-containedPrimary:hover{
    background: none;
    background-color: var(--secondary-8);
}
.top-legal{
    background: rgba(0, 98, 200, .25);
}
.top-legal p, .top-legal a{
    color: white;
}
.padding-m{
    padding: 4px;
}

/* Overwrite form max-width in container / Optional */
.form-wrapper{
    width: 80% !important;
}
@media screen and (max-width: 300px){
    .fluid-type-title{font-size: var(--fluid-size-title-sm);}
    .fluid-type-subtitle{font-size: var(--fluid-size-subtitle-sm);}
    .banner-content {height: 350px;}
    #submitBt{margin: .5em !important;}
}
@media screen and (min-width: 300px){
    .BcnButton-root.BcnButton-sizeLarge {
        transform: scale(1.2);
    }
}

@media (min-width: 376px) {
    .banner{
        height: 670px;
    }
    .banner-content {
        top: 20%;
        width: 100%;
        max-height: 450px;
    }
}

@media (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi){ 
    .banner {
        background-image: url('images/300@2x.png');
    }
}
@media (min-width: 444px) {
    .banner {
        background-image: url('images/444.png');
        height: 650px;
    }
    .banner-content {
        height: 420px;
        width: 396px;
        top: 19%;
    }
}
@media (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi) and (min-width: 444px) {
    .banner {
        background-image: url('images/444@2x.png');
    }
}
@media (min-width: 636px) {
    .banner {
        background-image: url('images/636.png');
        height: 658px;
    }
    .banner-content {
        height: 450px;
        width: 424px;
        top: 17%;
        max-height: 420px;
    }
}
@media (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi) and (min-width: 636px) {
    .banner {
        background-image: url('images/636@2x.png');
    }
}
@media (min-width: 732px) {
    .banner {
        background-image: url('images/732.png');
        /*height: 574px;*/
    }
    .banner-content {
       max-width: 424px;
        max-height: 450px;
        top: 17%;
    }
    .BcnButton-root.BcnButton-sizeLarge {
        transform: scale(1.3);
    }
}
@media (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi) and (min-width: 732px) {
    .banner {
        background-image: url('images/732@2x.png');
    }
}
@media (min-width: 853px) {
    .banner-content{
    }
}
@media (min-width: 972px) {
    .banner {
        background-image: url('images/972@2x.png');
        background-position: bottom;
        height: 656px;
    }
    .banner-content {
        max-width: 518px;
        max-height: 460px;
        top: 16%;
    }
}
@media (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi) and (min-width: 972px) {
    .banner {
        background-image: url('images/972@2x.png');
    }
}
@media (min-width: 972px) and (min-height: 732px) {
    .banner {
        height: 708px;
    }
}

/* CUSTOM */

.BcnInputBase-input {
    font-family: Faricy New,faricy-new-web !important;
}

.legal-wrapper{
    top:100%;
}


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

.layer{position: absolute; margin: 0 auto;}
.sticker{top: 8%; left: 2%; width: 32%;}
.bell{top: 45%; left: -23%; width: 11%; transform: rotate(-80deg);}
.cherries{ top: -3%; left: 48%; width: 20%; transform: rotate(-25deg);}
.bingo11{top: 72%; left: 80%; width: 21%; transform: rotate(-12deg);}
.bingo33{top: 12%; left: 90%; width: 17%; transform: rotate(-12deg);}
.seven{top: 75%; left: 3%; width: 21%; transform: rotate(12deg);}

@media (min-width: 444px){ 
    .sticker{width: 30%; top: 6%; right: unset; left: 9%;}
    .bell{top: -7%; left: -2%; width: 19%;}
    .cherries{ top: -5%; left: 80%; width: 20%;}
    .bingo11{top: 23%; left: 87%; width: 19%;}
    .bingo33{top: 78%; left: 70%; width: 16%;}
    .seven{top: 70%; left: 1%; width: 19%;}
}

@media (min-width: 600px) {
    .sticker{width: 25%; top: 14%; right: unset; left: 5%;}
    .bell{top: -5%; left: -2%; width: 17%;}
    .cherries{ top: -5%; left: 75%; width: 18%;}
    .bingo11{top: 28%; left: 87%; width: 17%;}
    .bingo33{top: 83%; left: 70%; width: 14%;}
    .seven{top: 60%; left: 3%; width: 17%;}
}

@media (min-width: 732px) {
    .sticker{width: 22%; left: 10%;}
    .bell{top: -5%; left: 1%; width: 15%;}
    .cherries{ top: -5%; left: 68%; width: 16%;}
    .bingo11{top: 33%; left: 87%; width: 15%;}
    .bingo33{top: 83%; left: 70%; width: 12%;}
    .seven{top: 60%; left: 8%; width: 15%;}
}

@media (min-width: 972px) {
    .sticker{top: 14%; left: 10%;}
    .bell{top: -3%; left: 1%; width: 13%;}
    .cherries{ top: -5%; left: 68%; width: 14%;}
    .bingo11{top: 33%; left: 92%; width: 13%;}
    .bingo33{top: 83%; left: 70%; width: 10%;}
    .seven{top: 60%; left: 8%; width: 13%;}
}

@media (min-width: 1200px) {
    .sticker{width: 20%; left: 15%;}
    .bell{top: 5%; left: -3%; width: 11%;}
    .cherries{ top: -5%; left: 68%; width: 12%;}
    .bingo11{top: 43%; left: 92%; width: 11%;}
    .bingo33{top: 78%; left: 70%; width: 8%;}
    .seven{top: 70%; left: 8%; width: 11%;}
}

/* ANIMATE LAYERS */

.fadeIn {
    opacity: 0;
    animation: fadeInAnimation 2s forwards;
  }
  
  @keyframes fadeInAnimation {
    to {
      opacity: 1;
    }
  }