/* MEDIA QUERIES*/
/* EXCLUDES 320px on PURPOSE!!! */
/* FONTS */
@font-face {
    font-family: 'Archivo Black';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/archivoblack/v10/HTxqL289NzCGg4MzN6KJ7eW6CYyF-w.ttf) format('truetype');
}

@font-face {
    font-family: 'Bowlby One SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/bowlbyonesc/v12/DtVlJxerQqQm37tzN3wMug9P_g_2pw.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
}

@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notoserif/v16/ga6Iaw1J5X9T9RW6j9bNfFcWbQ.ttf) format('truetype');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/oswald/v40/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiYA.ttf) format('truetype');
}

.texasled,
.font-texasled {
    font-family: 'Texas LED', sans-serif;
}

.oswald,
.font-oswald {
    font-family: 'Oswald', sans-serif;
}

.notoserif,
.font-notoserif {
    font-family: 'Noto Serif', serif;
}

.text-neongreen,
.neongreen-text {
    color: #6efe00;
}

.text-archivoblack,
.font-archivoblack {
    font-family: 'Archivo Black', sans-serif;
    ;
}

.gutters-wrap {
    padding-left: 12px;
    padding-right: 12px;
}

    .gutters-wrap .row > div[class^="col"]:first-child {
        margin-left: 0;
    }

    .gutters-wrap .row > div[class^="col"]:last-child {
        margin-right: 0;
    }

    .gutters-wrap .row.no-gutters {
        margin-bottom: 0;
    }

        .gutters-wrap .row.no-gutters > div[class^="col"] {
            padding: 0;
        }

    .gutters-wrap .row.gutters-xs {
        margin-bottom: 4px;
        margin-left: -10px;
        margin-right: -10px;
    }
        /* Should double the padding from the padding add to the columns */
        .gutters-wrap .row.gutters-xs > div[class^="col"] {
            padding-left: 2px;
            padding-right: 2px;
        }

    .gutters-wrap .row.gutters-sm {
        margin-bottom: 8px;
        margin-left: -8px;
        margin-right: -8px;
    }

        .gutters-wrap .row.gutters-sm > div[class^="col"] {
            padding-left: 4px;
            padding-right: 4px;
        }

    .gutters-wrap .row.gutters-md {
        margin-bottom: 12px;
        margin-left: -6px;
        margin-right: -6px;
    }

        .gutters-wrap .row.gutters-md > div[class^="col"] {
            padding-left: 6px;
            padding-right: 6px;
        }

    .gutters-wrap .row.gutters-lg {
        margin-bottom: 16px;
        margin-left: -4px;
        margin-right: -4px;
    }

        .gutters-wrap .row.gutters-lg > div[class^="col"] {
            padding-left: 8px;
            padding-right: 8px;
        }
/* Shadows */
.shadow.top {
    box-shadow: 0 -10px 20px -5px rgba(0, 0, 0, 0.9);
}

.shadow.right {
    box-shadow: 10px 0 20px -5px rgba(0, 0, 0, 0.9);
}

.shadow.bottom {
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.9);
}

.shadow.left {
    box-shadow: -10px 0 20px -5px rgba(0, 0, 0, 0.9);
}

.shadow.all {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
}

.shadow.top-right {
    box-shadow: 0 -10px 20px -5px rgba(0, 0, 0, 0.9), 10px 0 20px -5px rgba(0, 0, 0, 0.9);
}

.shadow.top-bottom {
    box-shadow: 0 -10px 20px -5px rgba(0, 0, 0, 0.9), 0 10px 20px -5px rgba(0, 0, 0, 0.9);
}

.shadow.top-left {
    box-shadow: 0 -10px 20px -5px rgba(0, 0, 0, 0.9), -10px 0 20px -5px rgba(0, 0, 0, 0.9);
}

.shadow.bottom-right {
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.9), 10px 0 20px -5px rgba(0, 0, 0, 0.9);
}

.shadow.left-right {
    box-shadow: -10px 0 20px -5px rgba(0, 0, 0, 0.9), 10px 0 20px -5px rgba(0, 0, 0, 0.9);
}

.shadow.bottom-left {
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.9), -10px 0 20px -5px rgba(0, 0, 0, 0.9);
}

.shadow.top-bottom-right {
    box-shadow: 0 -10px 20px -5px rgba(0, 0, 0, 0.9), 0 10px 20px -5px rgba(0, 0, 0, 0.9), 10px 0 20px -5px rgba(0, 0, 0, 0.9);
}

.shadow.top-bottom-left {
    box-shadow: 0 -10px 20px -5px rgba(0, 0, 0, 0.9), 0 10px 20px -5px rgba(0, 0, 0, 0.9), -10px 0 20px -5px rgba(0, 0, 0, 0.9);
}

.shadow.inset {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
}
/* Assign fonts to each heading size. */
h1,
h2,
h3 {
    font-family: 'Oswald', sans-serif;
}

h4,
h5,
h6 {
    font-family: 'Noto Serif', serif;
}

.font-oswald {
    font-family: 'Oswald', sans-serif;
}
/* Assign font sizes per device.  */
@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    h1 {
        font-size: 1.7rem;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    h1 {
        font-size: 1.9rem;
    }
}

@media only screen and (min-width : 1681px) {
    h1 {
        font-size: 2.2rem;
        text-shadow: 1px 1px 1px rgba(10,25,60,.5),-1px 1px 1px rgba(10,25,60,.5),1px -1px 1px rgba(10,25,60,.5),-1px -1px 1px rgba(10,25,60,.5);
    }
}

body {
    font-family: 'Noto Serif';
    background: #1b91bf;
    color: white;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    body {
        background: #1b7eb4;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    body {
        background: #188cbc;
    }
}

@media only screen and (min-width : 1681px) {
    body {
        background: #1b91bf;
    }
}
/* As seen on Rules page. The circle image with scratch card in just to beef up the page with a little more design. */
.card-body {
    background: #ffffff;
}

    .card-body a {
        color: #0ff;
    }

strong {
    font-weight: 800;
}

.text-shadow-1 {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25), -1px 1px 1px rgba(0, 0, 0, 0.25), 1px -1px 1px rgba(0, 0, 0, 0.25), -1px -1px 1px rgba(0, 0, 0, 0.25);
}

.text-shadow-2 {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25), -2px 2px 2px rgba(0, 0, 0, 0.25), 2px -2px 2px rgba(0, 0, 0, 0.25), -2px -2px 2px rgba(0, 0, 0, 0.25);
}

#pgPrivacyPolicy,
#pgConsumerProtection,
#pgTermsAndConditions,
#pgHow,
#pgMyAccount,
#pgRulesIndi {
    background: rgba(255, 255, 255, 0.88);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: black;
}

    #pgPrivacyPolicy p,
    #pgConsumerProtection p,
    #pgTermsAndConditions p,
    #pgHow p,
    #pgMyAccount p,
    #pgRulesIndi p {
        line-height: 1.8em;
    }

    #pgPrivacyPolicy a,
    #pgConsumerProtection a,
    #pgTermsAndConditions a,
    #pgHow a,
    #pgMyAccount a,
    #pgRulesIndi a {
        text-decoration: underline;
    }

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgRules h4,
    #pgHow h4,
    #pgRegPage h4 {
        font-size: 18px;
    }
}

@media only screen and (min-width : 1681px) {
    #pgRules h4,
    #pgHow h4,
    #pgRegPage h4 {
        font-size: 1.3rem;
    }
}

#pgRules .game-icon,
#pgHow .game-icon,
#pgRegPage .game-icon {
    width: 100px;
    height: 100px;
    border-radius: 1000px;
    overflow: hidden;
    border: 4px solid #fff;
    margin: 0 auto;
    background-repeat: no-repeat;
}

    #pgRules .game-icon:hover,
    #pgHow .game-icon:hover,
    #pgRegPage .game-icon:hover {
        border: 4px solid #6efe00;
    }

    #pgRules .game-icon img,
    #pgHow .game-icon img,
    #pgRegPage .game-icon img {
        width: 100px;
        height: 100px;
    }

#pgRules .game-name,
#pgHow .game-name,
#pgRegPage .game-name {
    font-family: 'Oswald', sans-serif;
}

@media only screen and (min-width : 320px) {
    #pgRules .game-name,
    #pgHow .game-name,
    #pgRegPage .game-name {
        font-size: 15px;
    }
}

@media only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgRules .game-name,
    #pgHow .game-name,
    #pgRegPage .game-name {
        font-size: 25px;
    }
}

#pgRules a:hover,
#pgHow a:hover,
#pgRegPage a:hover {
    color: #6efe00 !important;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgRules a,
    #pgHow a,
    #pgRegPage a {
        font-size: 14px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape), only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #pgRules a,
    #pgHow a,
    #pgRegPage a {
        font-size: 16px;
    }
}

@media only screen and (min-width : 1681px) {
    #pgRules a,
    #pgHow a,
    #pgRegPage a {
        font-size: 16px;
    }
}

header {
    position: relative;
    z-index: 10 !important;
    /* Hamburger Menu */
    /* These are the evenly spaced colored stripes bordering the bottom of the navbar. [CZAPATA]*/
}

    header .bg-daily-entries {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bf954e+0,bf954e+28,f1dfbc+52,bf954e+100 */
        background: #bf954e;
        /* Old browsers */
        background: -moz-linear-gradient(45deg, #bf954e 0%, #bf954e 28%, #f1dfbc 52%, #bf954e 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(45deg, #bf954e 0%, #bf954e 28%, #f1dfbc 52%, #bf954e 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(45deg, #bf954e 0%, #bf954e 28%, #f1dfbc 52%, #bf954e 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf954e', endColorstr='#bf954e', GradientType=1);
        /* IE6-9 fallback on horizontal gradient */
    }

    header #divDailyEntriesXS {
        position: absolute;
        top: -3px;
        color: white;
        z-index: 101 !important;
        font-family: Oswald !important;
    }

@media only screen and (min-width : 320px) {
    header #divDailyEntriesXS {
        width: 73px;
        height: 73px;
        left: 39.5vw;
    }
}

@media only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    header #divDailyEntriesXS {
        width: 80px;
        height: 80px;
        left: 39.5vw;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1024px) and (orientation:landscape) {
    header #divDailyEntriesXS {
        width: 85px;
        height: 85px;
        left: 44.5vw;
        top: -5px;
    }
}

@media only screen and (min-width : 1025px) {
    header #divDailyEntriesXS {
        width: 90px;
        height: 90px;
        left: 47.6vw;
        top: -2px;
    }

        header #divDailyEntriesXS div.d-sm-block {
            font-size: 18px;
            font-weight: 700;
        }
}

@media only screen and (min-width : 1025px) {
    header #divDailyEntriesXS {
        width: 90px;
        height: 90px;
        left: 46.5vw;
        top: -2px;
    }

        header #divDailyEntriesXS div.d-sm-block {
            font-size: 18px;
            font-weight: 700;
        }
}

header #entryCounter {
    position: relative;
    font-size: 20px;
    color: white;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    header #entryCounter {
        top: 23px;
        font-size: 22px;
        letter-spacing: 1px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1024px) and (orientation:landscape) {
    header #entryCounter {
        top: 27px;
        font-size: 30px;
    }
}

@media only screen and (min-width : 1025px) {
    header #entryCounter {
        top: 28px;
        font-size: 30px;
    }
}

header .navbar .navbar-toggler {
    outline: 0;
    border-width: 0;
    position: relative;
    right: -20px;
}

header .nav-link {
    font-family: 'Bowlby One SC', cursive;
    ;
    font-weight: normal !important;
    font-size: 1.5rem;
}

@media only screen and (min-width : 1681px) {
    header .nav-link {
        font-size: 1.1rem;
        letter-spacing: 0.5px;
        color: red;
    }
}

@media only screen and (min-width : 1681px) {
    header .nav-link {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        font-size: 1.3rem;
    }
}

header .navbar {
    z-index: 100;
    font-family: 'Oswald', sans-serif;
    background: #025285 !important;
}

@media only screen and (min-width : 1681px) {
    header .navbar {
        position: relative;
    }
}

@media only screen and (min-width : 1681px) {
    header .navbar {
        position: relative;
        height: 75px;
    }
}

header .navbar .dropdown-menu {
    font-family: 'Noto Serif', serif;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px), only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    header .navbar .navbar-collapse.collapse,
    header .navbar .navbar-collapse.collapsing {
        margin-top: 7px;
        margin-bottom: 7px;
    }
}

@media only screen and (min-width : 1681px) {
    header .navbar .navbar-collapse.collapse,
    header .navbar .navbar-collapse.collapsing {
        margin-top: 7px;
        margin-bottom: 7px;
    }
}

@media only screen and (min-width : 1681px) {
    header .navbar .navbar-collapse.collapse,
    header .navbar .navbar-collapse.collapsing {
        margin-top: 7px;
        margin-bottom: 7px;
    }
}

header .navbar .navbar-brand img {
    z-index: 100;
    position: relative;
    /* Control the size of the logo on each device */
}

@media only screen and (min-width : 320px) {
    header .navbar .navbar-brand img {
        /*height: 65px;
                width: 65px;
                top: 5px;
                left: 5px;*/
        width: auto;
        height: 32px;
        top: 0;
        left: -5px;
    }
}

@media only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    header .navbar .navbar-brand img {
        width: auto;
        height: 40px;
        top: 0;
        left: -5px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1024px) and (orientation:landscape) {
    header .navbar .navbar-brand img {
        width: auto;
        height: 60px;
        top: 4.5px;
        left: 10px;
    }
}

@media only screen and (min-width : 1025px) {
    header .navbar .navbar-brand img {
        width: auto;
        height: 60px;
        top: 0;
        left: 0;
    }
}

@media only screen and (min-width : 1025px) {
    header .navbar .navbar-brand img {
        width: auto;
        height: 60px;
        top: 0;
        left: 0px;
    }
}

header .colorbar .col {
    height: 5px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

@media only screen and (min-width : 1025px) {
    .getting-started h1 {
        font-size: 2rem;
    }

    .getting-started p {
        font-size: 1.1rem !important;
        margin-right: 1rem;
    }
}

@media only screen and (min-width : 1025px) {
    .getting-started h1 {
        font-size: 2rem;
    }

    .getting-started p {
        font-size: 1.2rem !important;
    }
}

.free {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5000;
}

footer {
    background: #025285;
    margin-top: 1.5rem;
    padding-bottom: 1.5rem;
}

    footer .colorbar .col {
        height: 6px;
        border-top: 3px solid rgba(0, 0, 0, 0.1);
    }

    footer a.list-group-item {
        padding: 3px;
        background: 0 0;
        border: none;
        text-transform: capitalize;
        color: #00ffff;
        font-size: 11.3px;
    }

.text-shadow-1 {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), -1px 1px 1px rgba(0, 0, 0, 0.7), 1px -1px 1px rgba(0, 0, 0, 0.7), -1px -1px 1px rgba(0, 0, 0, 0.7);
}

.text-shadow-2 {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7), -2px 2px 2px rgba(0, 0, 0, 0.7), 2px -2px 2px rgba(0, 0, 0, 0.7), -2px -2px 2px rgba(0, 0, 0, 0.7);
}

.btn-scratchstakes-right {
    background: url('//static.scratchstakes.com/Images/background/btn-main-right-arrow-green.png'), url('//static.scratchstakes.com/Images/background/btn-main-green.png');
    background-repeat: no-repeat, repeat-x;
    background-size: cover;
    background-position: 50% top, left top;
}
/* <AnimatedBackground> */
@keyframes move-twink-back {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -5000px 0;
    }
}

@-webkit-keyframes move-twink-back {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -5000px 0;
    }
}

@-moz-keyframes move-twink-back {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -5000px 0;
    }
}

@-ms-keyframes move-twink-back {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -5000px 0;
    }
}

.background {
    z-index: 0;
}

    .background .stars,
    .background .twinkling {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        display: block;
    }

    .background .stars {
        background: url('//static.scratchstakes.com/Images/background/stars.png') repeat-x top center;
        z-index: 0;
    }

@media only screen and (min-width : 1681px) {
    .background .stars {
        background: url('//static.scratchstakes.com/Images/background/stars-dt.png') repeat-x top center #1b91bf;
    }
}

.background .twinkling {
    background: transparent url('//static.scratchstakes.com/Images/background/twinkling.png') repeat-x top center;
    z-index: 1;
    -moz-animation: move-twink-back 100s linear infinite;
    -ms-animation: move-twink-back 100s linear infinite;
    -o-animation: move-twink-back 100s linear infinite;
    -webkit-animation: move-twink-back 100s linear infinite;
    animation: move-twink-back 100s linear infinite;
}

@media only screen and (min-width : 1681px) {
    .background .twinkling {
        background: url('//static.scratchstakes.com/Images/background/twinkling-dt.png') repeat-x top center;
    }
}
/* </AnimatedBackground> */
.text-white {
    color: white;
}

a.text-white-50:hover {
    color: #6efe00 !important;
}

.text-aqua {
    color: #00feef;
}

a.text-aqua {
    color: #00feef;
    text-decoration: underline;
}

.snippet div.small {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) -2px 2px 2px rgba(0, 0, 0, 0.5), 2px -2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.5);
}

#homepageJumbotron {
    border: none;
}

    #homepageJumbotron td {
        border: none;
    }

    #homepageJumbotron .first-col,
    #homepageJumbotron .last-col {
        width: 25%;
    }

    #homepageJumbotron p {
        font-size: 1.1rem;
    }

#register-0 .stars,
#register-0 .twinkling {
    background: none;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #register-0 {
        background: url('//static.scratchstakes.com/Images/background/registration-0-mobile.jpg') #1b91bf !important;
        background-position: top center;
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 300px;
        padding-top: 25vh;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait) {
    #register-0 {
        background: url('//static.scratchstakes.com/Images/background/registration-0-tablet.jpg') #1b91bf !important;
    }
}

@media only screen and (min-width : 1680px) and (orientation:landscape) {
    #register-0 {
        background: url('//static.scratchstakes.com/Images/background/registration-0-dt.jpg') center top no-repeat #1b91bf !important;
        background-size: cover;
    }
}

@media only screen and (min-width : 1681px) {
    #register-0 {
        /* The image for "Play Free Scratch-Off's, win real money". */
        background: url('//static.scratchstakes.com/Images/background/registration-0-dt.jpg') center top no-repeat #1b91bf !important;
    }

        #register-0 .win-real-money {
            position: relative;
            z-index: 100;
        }

        #register-0 .form-content {
            background: rgba(0, 0, 0, 0.5);
            padding: 3rem 1.5rem 1.5rem 1.5rem;
            border-radius: 20px;
            position: relative;
            top: -2.5rem;
            z-index: 50;
        }

            #register-0 .form-content input.form-control {
                line-height: 50px;
                height: 50px;
                border-radius: 7px;
                text-align: center;
            }
}

#winnerList {
    color: white;
    max-width: 360px;
    margin: 0 auto;
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #winnerList h2 {
        font-size: 135%;
    }
}

@media only screen and (min-width : 1681px) {
    #winnerList h2 {
        font-size: 2.3rem;
        bottom: 7px;
    }
}

#winnerList #btnViewAllWinners {
    position: relative;
    top: -8px;
}

@media only screen and (min-width : 1681px) {
    #winnerList {
        /* margin-left: 40px; */
        /*margin-right: 20px;*/
    }
}

#winnerList .scrollingList {
    height: 175px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
}

    #winnerList .scrollingList ul {
        color: #000;
        -webkit-animation-name: winnerList;
        animation-name: winnerList;
        /* The keyframes for this CSS animation are rendered in the _ScrollingWinnersList partial. */
        -webkit-animation-duration: 15s;
        animation-duration: 15s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: cubic-bezier(1, 0, 0.5, 0);
        animation-timing-function: cubic-bezier(1, 0, 0.5, 0);
        will-change: transform;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

        #winnerList .scrollingList ul .list-group-item {
            line-height: 1rem;
            background: transparent;
            border-color: rgba(0, 0, 0, 0.08) !important;
            height: 60px !important;
            overflow: hidden;
        }

            #winnerList .scrollingList ul .list-group-item .name {
                font-family: 'Oswald', sans-serif;
                text-transform: uppercase;
            }

            #winnerList .scrollingList ul .list-group-item .prize {
                font-family: 'Oswald', sans-serif;
                font-size: 1.9rem;
                text-align: center;
                padding: 5px;
                float: right;
                letter-spacing: -0.05em;
            }

        /* Accessibility: Reduced motion support for vertical scrolling */
        @media (prefers-reduced-motion: reduce) {
            #winnerList .scrollingList ul {
                animation: none;
            }
            
            #winnerList .scrollingList {
                overflow-y: auto;
                scroll-behavior: smooth;
            }
        }

        /* Focus management for vertical scrolling list items */
        #winnerList .scrollingList ul .list-group-item:focus {
            outline: 2px solid #007bff;
            outline-offset: 2px;
        }

        /* Pause vertical animation on hover */
        #winnerList .scrollingList:hover ul {
            animation-play-state: paused;
        }

#blogList {
    color: white;
    max-width: 360px;
    margin: 0 auto;
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #blogList h2 {
        font-size: 135%;
    }
}

@media only screen and (min-width : 1681px) {
    #blogList h2 {
        font-size: 2.3rem;
        bottom: 7px;
    }
}

@media only screen and (min-width : 1681px) {
    #blogList {
        /* margin-left: 40px; */
        /*margin-right: 20px;*/
    }
}

#blogList .staticList {
    height: 175px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
}

    #blogList .staticList ul {
        margin-top: 5px;
    }

        #blogList .staticList ul li {
            margin-left: 10px;
        }

            #blogList .staticList ul li .bullet {
                color: #52BF00;
            }

            #blogList .staticList ul li a {
                font-family: 'Oswald', sans-serif;
                text-transform: uppercase;
                font-size: 1.34rem;
                letter-spacing: -0.05em;
            }

.recent-blogs .card {
    border-color: #157498;
}

    .recent-blogs .card .card-body {
        border-color: #157498;
        background: #157498;
    }

        .recent-blogs .card .card-body .card-title {
            font-weight: 700;
        }

        .recent-blogs .card .card-body .card-text {
            color: #fff;
        }
/* </WinnersListAndAnimation> */
#scratchOffList .completed {
    position: absolute;
    right: -4px;
    top: -4px;
    background: #6efe00;
    color: #004400;
    letter-spacing: 2px;
    padding: 3px 20px;
    font-size: 0.8rem;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: rgba(0, 0, 0, 0.15) -4px 4px;
}

#scratchOffList .card-body {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    background: #000;
    color: #ccc;
}

#scratchOffList .card.placeholder {
    background: unset;
    border: unset;
    text-shadow: unset;
    box-shadow: unset;
}

#scratchOffList .btn-floating {
    position: absolute;
    right: 0;
    bottom: 15px;
}

#scratchOffList .content {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
    /* IE6-9 */
    position: absolute;
    bottom: 0;
    width: 100%;
    color: white;
    padding: 12px 6px;
    display: none;
}

#scratchOffList .ticket {
    min-height: 100px;
    background: white;
    margin-bottom: 30px;
    background-repeat: no-repeat;
    background-size: cover !important;
    position: relative;
}

@media only screen and (min-width : 1681px) {
    #scratchOffList .ticket {
        width: 100%;
        min-height: 250px;
    }
}

.award-group {
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    border-radius: 1.5rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
    /*250,130,1*/
    /* hr => 'You earned 2 entries in our daily $100 giveaway.' */
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    .award-group h4 {
        font-size: 1.1rem;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    .award-group h4 {
        font-size: 1.5rem;
    }
}

@media only screen and (min-width : 1681px) {
    .award-group h4 {
        font-size: 1.6rem;
    }
}

.btn-scratchstakes {
    background: url('//static.scratchstakes.com/Images/background/btn-main-right-arrow-green.png'), url('//static.scratchstakes.com/Images/background/btn-main-left-arrow-green.png'), url('//static.scratchstakes.com/Images/background/btn-main-green.png');
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: right top, left top, left top;
    background-size: contain;
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(50, 0, 0, 0.3), -1px -1px 1px rgba(50, 0, 0, 0.3), -1px 1px 1px rgba(50, 0, 0, 0.3), 1px -1px 1px rgba(50, 0, 0, 0.5);
    padding: 0.5rem 1.6rem;
}

    .btn-scratchstakes:hover {
        color: rgba(255, 255, 255, 0.95);
    }

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    .btn-scratchstakes {
        padding: 0.2rem 1.9rem 0.3rem;
        border-radius: 5px !important;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    .btn-scratchstakes {
        padding: 0.2rem 1rem 0.3rem;
        border-radius: 5px !important;
        font-size: 1.5rem;
    }
}

@media only screen and (min-width : 1681px) {
    .btn-scratchstakes {
        padding: 0.35rem 1.2rem;
        border-radius: 112px !important;
    }
}

.scratch-area-content {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
}

#scratchOffScreen h5,
#BigPrize h5 {
    font-size: 1rem;
}

@media only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px), only screen and (min-width : 320px) {
    #scratchOffScreen .game-description,
    #BigPrize .game-description {
        font-size: 0.8rem;
        line-height: 1.35rem;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #scratchOffScreen .game-description,
    #BigPrize .game-description {
        font-size: 1.1rem;
        line-height: 1.8rem;
    }
}

@media only screen and (min-width : 1681px) {
    #scratchOffScreen .game-description,
    #BigPrize .game-description {
        font-size: 1.3rem;
        line-height: unset;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #scratchOffScreen .scratch-area-wrapper,
    #BigPrize .scratch-area-wrapper {
        margin-top: 1rem;
    }
}

@media only screen and (min-width : 1681px) {
    #scratchOffScreen .scratch-area-wrapper,
    #BigPrize .scratch-area-wrapper {
        margin: 0;
    }
}

#scratchOffScreen .scratchoff-button-bar .btn-scratchstakes,
#BigPrize .scratchoff-button-bar .btn-scratchstakes {
    background: url('//static.scratchstakes.com/Images/background/btn-main-right-arrow-green.png'), url('//static.scratchstakes.com/Images/background/btn-main-left-arrow-green.png'), url('//static.scratchstakes.com/Images/background/btn-main-green.png');
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: right top, left top, left top;
    background-size: contain;
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(50, 0, 0, 0.3), -1px -1px 1px rgba(50, 0, 0, 0.3), -1px 1px 1px rgba(50, 0, 0, 0.3), 1px -1px 1px rgba(50, 0, 0, 0.5);
    padding: 0.5rem 1.6rem;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #scratchOffScreen .scratchoff-button-bar .btn-scratchstakes,
    #BigPrize .scratchoff-button-bar .btn-scratchstakes {
        padding: 0.3rem 1.2rem;
    }
}

#scratchOffScreen .scratchoff-button-bar .btn-scratchstakes:hover,
#BigPrize .scratchoff-button-bar .btn-scratchstakes:hover {
    color: rgba(255, 255, 255, 0.95);
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #scratchOffScreen .scratchoff-button-bar a,
    #BigPrize .scratchoff-button-bar a {
        line-height: 1.2rem;
        font-size: 0.9rem;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #scratchOffScreen .scratchoff-button-bar a,
    #BigPrize .scratchoff-button-bar a {
        line-height: 1.5rem;
    }
}

@media only screen and (min-width : 1681px) {
    #scratchOffScreen .scratchoff-button-bar a,
    #BigPrize .scratchoff-button-bar a {
        line-height: 3rem;
    }
}

#scratchOffScreen .scratch-area-wrapper,
#BigPrize .scratch-area-wrapper {
    margin-left: -14px;
    margin-right: -14px;
    padding-top: 4px;
    padding-right: 2px;
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #scratchOffScreen .scratch-area-wrapper,
    #BigPrize .scratch-area-wrapper {
        margin-top: unset;
        padding-top: 5px;
    }
}

@media only screen and (min-width : 1681px) {
    #scratchOffScreen .scratch-area-wrapper,
    #BigPrize .scratch-area-wrapper {
        margin-top: 3px;
    }
}

#scratchOffScreen .bigtext,
#BigPrize .bigtext {
    font-weight: 800;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25), -2px -2px 3px rgba(0, 0, 0, 0.25), -2px 2px 3px rgba(0, 0, 0, 0.25), 2px -2px 3px rgba(0, 0, 0, 0.25);
}

    #scratchOffScreen .bigtext span,
    #BigPrize .bigtext span {
        color: #6efe00;
    }

#scratchOffScreen h5,
#BigPrize h5 {
    color: #00ffff;
    font-weight: bold;
}

#scratchOffScreen .scratch-text,
#BigPrize .scratch-text {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin: 0 auto;
    position: relative;
    text-shadow: 0 0 4px #000;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #scratchOffScreen .scratch-text,
    #BigPrize .scratch-text {
        font-size: 1.3rem;
        top: -8px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #scratchOffScreen .scratch-text,
    #BigPrize .scratch-text {
        font-size: 1.5rem;
        top: -12px;
    }
}

@media only screen and (min-width : 1681px) {
    #scratchOffScreen .scratch-text,
    #BigPrize .scratch-text {
        font-size: 2.1rem;
        top: -12px;
    }
}

#scratchOffScreen .scratch-text span,
#BigPrize .scratch-text span {
    display: block;
    position: absolute;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #scratchOffScreen .scratch-text span,
    #BigPrize .scratch-text span {
        font-size: 0.7rem;
        bottom: -20px;
        letter-spacing: 0.02rem;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #scratchOffScreen .scratch-text span,
    #BigPrize .scratch-text span {
        font-size: 0.8rem;
        bottom: -25px;
        letter-spacing: 0.02rem;
    }
}

@media only screen and (min-width : 1681px) {
    #scratchOffScreen .scratch-text span,
    #BigPrize .scratch-text span {
        font-size: 0.8rem;
        bottom: -32px;
        letter-spacing: 0.02rem;
    }
}

#scratchOffScreen .scratch-box,
#BigPrize .scratch-box {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: -1px;
    border-radius: 8px;
    min-height: 40px;
}

    #scratchOffScreen .scratch-box.winner,
    #BigPrize .scratch-box.winner {
        width: 100%;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6efe00+0,8eb92a+50,3ba300+51,58ca00+100 */
        background: #6efe00;
        /* Old browsers */
        background: -moz-linear-gradient(top, #6efe00 0%, #8eb92a 50%, #3ba300 51%, #58ca00 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #6efe00 0%, #8eb92a 50%, #3ba300 51%, #58ca00 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #6efe00 0%, #8eb92a 50%, #3ba300 51%, #58ca00 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6efe00', endColorstr='#58ca00', GradientType=0);
        /* IE6-9 */
        /*border: 3px solid rgba(191,210,85,1);*/
        border-radius: 16px;
        text-shadow: 2px 2px 1px #000;
    }

#scratchOffScreen .entries-remaining,
#BigPrize .entries-remaining {
    background: rgba(15, 100, 140, 0.8);
    position: relative;
    z-index: 100;
    width: 100%;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #scratchOffScreen .entries-remaining,
    #BigPrize .entries-remaining {
        font-size: 12px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #scratchOffScreen .entries-remaining,
    #BigPrize .entries-remaining {
        font-size: unset;
    }
}

#pgMyAccount .gender {
    position: relative;
    top: 2px;
}

    #pgMyAccount .gender .mdb-select {
        position: relative;
    }

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgMyAccount .gender .mdb-select {
        position: relative;
        top: 8px;
    }
}

@media only screen and (min-width : 1681px) {
    #pgMyAccount .gender .mdb-select {
        top: -8px;
    }
}

#pgMyAccount .md-form .cogs {
    position: absolute;
    right: 0px;
    top: 0px;
}

#pgMyAccount .state .mdb-select {
    position: relative;
    top: 2px;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgMyAccount .state .mdb-select {
        position: unset;
        top: unset;
    }
}

#pgMyAccount .country #ddlCountry {
    text-transform: uppercase !important;
}

#pgMyAccount .country .mdb-select {
    position: relative;
    top: 3px;
}

.top-prize-winner {
    background: rgba(17, 0, 68, 0.2);
    color: white;
    position: relative;
    z-index: 0;
    padding: 1rem;
}
/* The white transparency header above that has 
    the calendar icon and header. 
    It's used on both Winner's List and Entry History screens. 
*/
.control-bar {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.25);
    padding: 0 0.3rem;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
    /* The orange circles with the greater than, les than symbols seen on entry history page mockup.  */
}

    .control-bar h5 {
        line-height: 35px;
        margin: 0;
    }

    .control-bar #hdnFilterDate {
        color: white;
        border: none !important;
        text-align: center;
    }

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    .control-bar #hdnFilterDate {
        width: 200px;
        line-height: 30px;
        font-size: 16px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    .control-bar #hdnFilterDate {
        width: 270px;
        line-height: 40px;
        font-size: 22px;
    }
}

@media only screen and (min-width : 1681px) {
    .control-bar #hdnFilterDate {
        width: 300px;
        line-height: 40px;
        font-size: 25px;
    }
}

.control-bar #hdnFilterDate__prize {
    color: white !important;
    border: none !important;
    text-align: center;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    .control-bar #hdnFilterDate__prize {
        width: 200px;
        line-height: 30px;
        font-size: 16px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    .control-bar #hdnFilterDate__prize {
        width: 270px;
        line-height: 40px;
        font-size: 22px;
    }
}

@media only screen and (min-width : 1681px) {
    .control-bar #hdnFilterDate__prize {
        width: 300px;
        line-height: 40px;
        font-size: 25px;
    }
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    .control-bar .input-group-append {
        margin-left: -22px !important;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    .control-bar .input-group-append {
        margin-left: -18px !important;
    }
}

@media only screen and (min-width : 1681px) {
    .control-bar .input-group-append {
        margin-left: -16px !important;
    }
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    .control-bar .td-arrow-left,
    .control-bar .td-arrow-right {
        width: 3%;
        text-align: center;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    .control-bar .td-arrow-left,
    .control-bar .td-arrow-right {
        width: 5%;
        text-align: center;
    }
}

@media only screen and (min-width : 1681px) {
    .control-bar .td-arrow-left,
    .control-bar .td-arrow-right {
        text-align: center;
        width: 6%;
    }
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    .control-bar .td-title-content {
        width: 94%;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    .control-bar .td-title-content {
        width: 90%;
    }
}

@media only screen and (min-width : 1681px) {
    .control-bar .td-title-content {
        width: 88%;
    }
}

.control-bar .orange-circle span {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff9400+0,ce0a06+100 */
    background: #ff9400;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ff9400 0%, #ce0a06 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ff9400 0%, #ce0a06 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ff9400 0%, #ce0a06 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9400', endColorstr='#ce0a06', GradientType=0);
    /* IE6-9 */
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    text-align: center;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    margin-top: 2px;
}

.control-bar .orange-circle i {
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
    font-size: 22px;
    position: relative;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

    .control-bar .orange-circle i.fa-angle-left {
        margin-right: 3px;
        margin-top: 1px;
    }

    .control-bar .orange-circle i.fa-angle-right {
        margin-left: 1px;
        margin-top: 1px;
    }

#pgEntryHistory {
    /* This is a wrapping div surrounding the expanded detail view on the entry history screen. */
    /* The table element containing each scratch-off name, current entries, chances remaining and expands to show details. */
}

    #pgEntryHistory .entry-history-wrapper {
        background: #065e90;
    }

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgEntryHistory .entry-history-wrapper {
        font-size: 0.75rem;
    }
}

#pgEntryHistory .entry-history-details .row.no-gutters {
    border-top: 1px solid white;
}

    #pgEntryHistory .entry-history-details .row.no-gutters div:first-child {
        color: #a1ddff;
    }

    #pgEntryHistory .entry-history-details .row.no-gutters div.my-1:not(:first-child) {
        color: #6efe00;
    }

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #pgEntryHistory h1 {
        font-size: 34px;
    }
}

#pgEntryHistory .money-background {
    background: url('https://static.scratchstakes.com/Images/background/money-background.png');
    background-size: cover;
    background-position: center center;
}

    #pgEntryHistory .money-background .shadow-left {
        -moz-box-shadow: inset -10px 0 20px -10px #6efd00;
        -webkit-box-shadow: inset -10px 0 20px -10px #6efd00;
        box-shadow: inset -10px 0 20px -10px #6efd00;
    }

    #pgEntryHistory .money-background .shadow-right {
        -moz-box-shadow: inset 10px 0 20px -10px #6efd00;
        -webkit-box-shadow: inset 10px 0 20px -10px #6efd00;
        box-shadow: inset 10px 0 20px -10px #6efd00;
    }

#pgEntryHistory table.entry-history {
    width: 100%;
    /* This is the caret that ist toggled when the prize information is clicked. It's to the right of the progress bar. */
}

    #pgEntryHistory table.entry-history tr {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    #pgEntryHistory table.entry-history .far {
        font-size: 1.7rem;
        color: rgba(255, 255, 255, 0.75);
        font-weight: bold;
    }

    #pgEntryHistory table.entry-history .chances-remaining {
        color: #a1ddff;
        position: relative;
        top: -5px;
        letter-spacing: 0.05em;
    }

    #pgEntryHistory table.entry-history .bars {
        /* Animation settings */
    }

        #pgEntryHistory table.entry-history .bars .bar {
            float: right;
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.25);
            margin-right: 3px;
        }

            #pgEntryHistory table.entry-history .bars .bar.scratched {
                border: 1px solid;
                border-color: lawngreen;
                /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6dfd00+0,41ba00+100 */
                background: #6dfd00;
                /* Old browsers */
                background: -moz-linear-gradient(top, #6dfd00 0%, #41ba00 100%);
                /* FF3.6-15 */
                background: -webkit-linear-gradient(top, #6dfd00 0%, #41ba00 100%);
                /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to bottom, #6dfd00 0%, #41ba00 100%);
                /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dfd00', endColorstr='#41ba00', GradientType=0);
                /* IE6-9 */
            }

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgEntryHistory table.entry-history .bars .bar img {
        width: 7px;
        height: 35px;
    }
}

#pgEntryHistory table.entry-history .bars .delay-bar-1 {
    animation-delay: 0.2s;
}

#pgEntryHistory table.entry-history .bars .delay-bar-2 {
    animation-delay: 0.4s;
}

#pgEntryHistory table.entry-history .bars .delay-bar-3 {
    animation-delay: 0.6s;
}

#pgEntryHistory table.entry-history .bars .delay-bar-4 {
    animation-delay: 0.8s;
}

#pgEntryHistory table.entry-history .bars .delay-bar-5 {
    animation-delay: 1s;
}

#pgEntryHistory table.entry-history .bars .delay-bar-6 {
    animation-delay: 1.1s;
}

#pgEntryHistory table.entry-history .bars .delay-bar-7 {
    animation-delay: 1.2s;
}

#pgEntryHistory table.entry-history .bars .delay-bar-8 {
    animation-delay: 1.3s;
}

#pgEntryHistory table.entry-history .bars .delay-bar-9 {
    animation-delay: 1.4s;
}

#pgEntryHistory table.entry-history .bars .delay-bar-10 {
    animation-delay: 1.5s;
}

#pgEntryHistory .delay-6s {
    animation-delay: 6s;
}

#pgEntryHistory .delay-7s {
    animation-delay: 7s;
}

#pgEntryHistory .delay-8s {
    animation-delay: 8s;
}

#pgEntryHistory .delay-9s {
    animation-delay: 9s;
}

#pgEntryHistory .delay-10s {
    animation-delay: 10s;
}

#pgWinnersList {
    background: url('//static.scratchstakes.com/Images/blue-rays.png') center top no-repeat;
    background-size: cover;
}

    #pgWinnersList .header {
        /* These are the trophies/trophy shown to the left/right of winners list header. */
        background-image: url('//static.scratchstakes.com/Images/trophy-left.png'), url('//static.scratchstakes.com/Images/trophy-right.png');
        background-repeat: no-repeat;
        background-position: left bottom, right bottom;
        background-size: 85px;
    }

        #pgWinnersList .header h1 {
            font-size: 2rem;
            font-weight: bold;
            text-shadow: 2px 2px 2px rgba(10,25,60,.5),-2px 2px 2px rgba(10,25,60,.5),2px -2px 2px rgba(10,25,60,.5),-2px -2px 2px rgba(10,25,60,.5);
        }

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgWinnersList .header h1 {
        font-size: 1.5rem;
        line-height: 40px;
    }
}

@media only screen and (min-width : 1681px) {
    #pgWinnersList .header h1 {
        font-size: 2.3rem;
    }
}

@media only screen and (min-width : 1681px) {
    #pgWinnersList .header h1 {
        line-height: 45px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait) {
    #pgWinnersList .header {
        background-size: 92px;
    }
}

@media only screen and (min-width : 1681px) {
    #pgWinnersList .header {
        background-size: 100px;
        /* Will increase the size of the tropies per device. */
    }
}

#pgWinnersList .winners-list-wrapper {
    background: #1b91bf;
    border-radius: 8px;
    padding: 0.3rem;
    padding-bottom: 2rem;
}

#pgWinnersList #tblWinners tr.winner {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 5px;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgWinnersList #tblWinners tr.winner td {
        padding: 0;
    }
}

#pgWinnersList #tblWinners tr.winner .scratch-image {
    /* Controls the width of the first column containing the scratch-off thumbnail. */
    /* Controls the height of the scratch off thumbnail on winner's list. */
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgWinnersList #tblWinners tr.winner .scratch-image {
        width: 20%;
        margin-right: 5px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait) {
    #pgWinnersList #tblWinners tr.winner .scratch-image {
        width: 11.2%;
        margin-right: 10px;
    }
}

@media only screen and (min-width : 1680px) and (orientation:landscape) {
    #pgWinnersList #tblWinners tr.winner .scratch-image {
        width: 7.9%;
        margin-right: 10px;
    }
}

@media only screen and (min-width : 1681px) {
    #pgWinnersList #tblWinners tr.winner .scratch-image {
        width: 10.5%;
        margin-right: 5px;
    }
}

#pgWinnersList #tblWinners tr.winner .scratch-image img {
    border: 2px solid rgba(255, 255, 255, 0.65);
}

#pgWinnersList #tblWinners tr.winner .date-and-game {
    line-height: 1.3em;
    position: relative;
    padding-left: 7px;
    top: -5px;
    margin-bottom: -5px;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgWinnersList #tblWinners tr.winner .date-and-game {
        padding-left: 2px;
    }
}

#pgWinnersList #tblWinners tr.winner .name {
    font-family: 'Oswald', sans-serif;
    margin: 0;
    padding-left: 7px;
    line-height: unset;
    font-weight: bold;
    text-transform: uppercase;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgWinnersList #tblWinners tr.winner .name {
        font-size: 0.79rem;
        letter-spacing: 1px;
        font-size: 1rem;
        padding-left: 2px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #pgWinnersList #tblWinners tr.winner .name {
        font-size: 1.3rem;
    }
}

#pgWinnersList #tblWinners tr.winner .text-left {
    padding-left: 0.6rem;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgWinnersList #tblWinners tr.winner .text-left {
        padding-left: 0.3rem;
    }
}

#pgWinnersList #tblWinners tr.winner .text-right {
    padding-right: 0.6rem;
}

#pgWinnersList #tblWinners tr.winner .list-price {
    font-family: 'Oswald', sans-serif;
    font-size: 1.9rem;
    font-weight: bold;
    letter-spacing: -0.05rem;
    position: relative;
}

@media only screen and (min-width : 320px), only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #pgWinnersList #tblWinners tr.winner .list-price {
        font-size: 1.4rem;
    }
}

#pgWinnersList #tblWinners tr.winner .smaller {
    color: #064072;
    position: relative;
    font-size: 80%;
    top: -5px;
}

#pgClaimPrize .form-area {
    background: #1b7eb4;
    border-radius: 9px;
}

@media only screen and (min-width : 1681px) {
    #pgClaimPrize .form-area {
        background: #1b91bf;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #pgClaimPrize .control-label {
        font-size: 0.9rem;
    }
}

@media only screen and (min-width : 1681px) {
    #pgClaimPrize .control-label {
        font-size: 0.8rem;
    }
}

#pgClaimPrize .shadow-top {
    box-shadow: 0 -10px 15px -5px rgba(0, 0, 100, 0.5);
}

#pgClaimPrize .custom-select:first-child {
    color: #717d89;
}

.rulesPageStyle {
    max-width: 800px;
}

.btn-floating {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    width: 47px;
    height: 47px;
    position: relative;
    z-index: 1;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    margin: 10px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
}

    .btn-floating i {
        font-size: 1.25rem;
        line-height: 47px;
    }

    .btn-floating i {
        display: inline-block;
        width: inherit;
        text-align: center;
        color: #fff;
    }

    .btn-floating:hover {
        -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .btn-floating:before {
        -webkit-border-radius: 0;
        border-radius: 0;
    }

    .btn-floating.btn-sm {
        width: 36.15385px;
        height: 36.15385px;
    }

        .btn-floating.btn-sm i {
            font-size: 0.96154rem;
            line-height: 36.15385px;
        }

    .btn-floating.btn-lg {
        width: 61.1px;
        height: 61.1px;
    }

        .btn-floating.btn-lg i {
            font-size: 1.625rem;
            line-height: 61.1px;
        }

.registrationLogo {
    position: absolute;
    left: 0;
    top: 5px;
    z-index: 5000;
}

.WinRealMoney {
    position: absolute;
    top: 5px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 5000;
}

@media only screen and (min-width : 320px) {
    .WinRealMoney {
        left: 75px;
    }
}

@media only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    .WinRealMoney {
        left: 75px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait) {
    .WinRealMoney {
        left: 5px;
    }
}

@media only screen and (min-width : 1680px) and (orientation:landscape) {
    .WinRealMoney {
        left: 13px;
    }
}

@media only screen and (min-width : 1681px) {
    .WinRealMoney {
        left: 10px;
    }
}

@media only screen and (min-width : 1681px) {
    .WinRealMoney {
        left: 17px;
    }
}

@media only screen and (min-width : 320px) {
    .WinRealMoneyIMG {
        width: 220px;
        height: 55px;
    }
}

@media only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    .WinRealMoneyIMG {
        width: 290px;
        height: 70px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait) {
    .WinRealMoneyIMG {
        width: 440px;
        height: 100px;
    }
}

@media only screen and (min-width : 1680px) and (orientation:landscape) {
    .WinRealMoneyIMG {
        width: 440px;
        height: 80px;
    }
}

@media only screen and (min-width : 1681px) {
    .WinRealMoneyIMG {
        width: 510px;
        height: 100px;
    }
}

@media only screen and (min-width : 1681px) {
    .WinRealMoneyIMG {
        width: 510px;
        height: 100px;
    }
}

#smsMainContent .fa-sms {
    position: absolute;
    right: -28px;
    top: -23px;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
    -moz-transform: rotate(70);
    transform: rotate(70);
}

#smsMainContent .custom-control-input:checked ~ .custom-control-label::before {
    color: #000 !important;
    border-color: #00e25b;
    background-color: #00e25b;
}

@media only screen and (min-width : 320px) {
    #smsMainContent .checkbox-wrapper {
        padding-left: 30px;
    }
}

@media only screen and (min-width : 480px), only screen and (min-width : 475px), only screen and (min-width : 414px), only screen and (min-width : 360px) {
    #smsMainContent .checkbox-wrapper {
        padding-left: 40px;
    }
}

@media only screen and (min-width : 768px) and (orientation:portrait), only screen and (min-width : 1680px) and (orientation:landscape) {
    #smsMainContent .checkbox-wrapper {
        padding-left: 30px;
    }
}

@media only screen and (min-width : 1681px) {
    #smsMainContent .checkbox-wrapper {
        padding-left: 90px;
    }
}

#smsMainContent .smsPhoneInput-wrapper {
    max-width: 320px;
    margin: 0 auto 15px auto;
}

    #smsMainContent .smsPhoneInput-wrapper #smsPhoneInput {
        font-size: 1.8em;
        text-align: center;
    }