/* Your styles here */
@font-face
{
    font-family: 'testNational';
    src: url('../fonts/TestNational-Regular.woff2');
    font-weight: normal;
}

@font-face
{
    font-family: 'testNational';
    src: url('../fonts/TestNational-Medium.woff2');
    font-weight: 300;
}

@font-face
{
    font-family: 'testNational';
    src: url('../fonts/TestNational-Bold.woff2');
    font-weight: bold;
}

@font-face
{
    font-family: 'testNational2';
    src: url('../fonts/TestNational2-Regular.woff2');
    font-weight: normal;
}

@font-face
{
    font-family: 'testNational2';
    src: url('../fonts/TestNational2-Bold.woff2');
    font-weight: bold;
}

header
{
    height: 62px;
}

:root
{
    --blue: #001489;
    --gray: #AEAEAE;
    --red: #CB152F;
    --dark-gray: #4A4A4A;
}

body
{
    font-family: 'testNational', serif; 
    overflow-x: hidden;
}

.phone-input-subtext
{
    padding-top: 0;
    margin-top: 0;
}
.formContainer .field.field_mobile {
    margin-bottom: 8px;
}

.formContainer
{
    max-width: 420px;
}

input::placeholder
{
    font-family: 'testNational', serif;
    color: var(--dark-gray);
}

.formContainer input[type="text"]
{
    border: var(--gray) 1px solid;
    border-radius: 4px;
    padding: 16px;
    font-family: 'testNational', serif;
    color: var(--dark-gray);
}

.short-terms-text
{
    margin-bottom: 84px;
}

.footer-top-padding
{
    padding-top: 24px;
}

.dob
{
    color: var(--blue);
    font-weight: bold;
}

.formContainer .checkboxContainer > a {
    border: solid 1px var(--gray);
    border-radius: 4px;
}

.formContainer .checkboxContainer.checked > a i {
    color: var(--blue);
}

.formContainer select
{
    border: var(--gray) 1px solid;
    border-radius: 4px;
    padding: 16px;
}

.formContainer .focused {
    box-shadow: 0 0 1px 1px var(--blue); 
}

.text-blue {
    color: var(--blue);
}

.bg-blue
{
    background-color: var(--blue);
}

.text-white
{
    color: #ffffff;
}

.text-left
{
    text-align: left;
}

.text-center
{
    text-align: center;
}

.gap-8
{
    gap: 1rem;
}

.gap-16
{
    gap: 2rem;
}

.gap-6
{
    gap: 0.75rem;
}

.gap-4 {
    gap: 0.5rem;
}

.mt-8
{
    margin-top: 1rem;
}

.text-md
{
    font-size: 0.9rem;
}

.mb-0
{
    margin-bottom: 0;
}

.mb-16
{
    margin-bottom: 2rem;
}

.spacing-for-footer-links
{
    margin-block: 12px;
}

.mt-4
{
    margin-top: 0.5rem;
}

.items-center
{
    align-items: center;
}

.text-bold
{
    font-weight: bold;
}

.national2
{
    font-family: 'testNational2', serif;
}

.mandatoryFields
{
    margin-left: 34px;
    color: var(--dark-gray);
}

.mandatory
{
    color: var(--dark-gray);
    font-family: 'testnational', serif
}

.formContainer select {
    font-family: 'testnational', serif;
}

.dateContainer > div > label
{
    display: none;
}

.signup-title
{
    font-size: 92px;
    margin-top: 0;
    margin-bottom: 0;
}

.field.field_terms .error
{
    margin-left: 34px;
}


label
{
    color: var(--blue);
    font-weight: bold;
}

.checkboxContainer label
{
    color: var(--dark-gray);
    font-weight: unset;
}

.buttonContainer button
{
    background-color: var(--red);  
    font-family: 'testnational', serif;
    font-weight: bold;
    width: 100%;
    padding: 16px 20px;
}

.flex
{
    display: flex;
}

.flex-col
{
    flex-direction: column;
}

.justify-between
{
    justify-content: space-between;
}

.justify-center
{
    justify-content: center;
}

.mx-auto
{
    margin-inline: auto;
}

.footer-bottom
{
    width: 100%;
}

.footer-bottom p
{
    flex-grow: 1;
}

.footer-bottom div
{
    flex-basis: 50%;
}

.mb-8
{
    margin-bottom: 1rem;
}

.newsletter-link
{
    text-decoration: none;
    border: solid #ffffff 1px;
    padding-block: 4px;
    padding-inline: 32px;
    border-radius: 4px;
}

.footer-link
{
    text-decoration: none;
}

.hr-mobile
{
    display: none;
}

.nav-logo-container
{
    width: 350px;
    padding-left: 16px;
}

.bg-image
{
    background: url("../img/background-image.png") no-repeat center;
    background-size: cover;
    height: 660px;
    width: 100%;
    position: absolute;
}



header {
    display: flex;
    align-items: center;
}

.nav-logo-container span
{
    padding-bottom: 13%;
    display: block;
    background: url("../img/nav-logo.png") no-repeat center;
    background-size: contain;
}

.text-dark-gray
{
    color: var(--dark-gray);
}

.field.field_zipcode
{
    max-width: 50%;
}

.text-black
{
    color: #464646;
}

.pb-16
{
    padding-bottom: 4rem;
}

.bg-square-images-container
{
    overflow: hidden;
}


.desktop-bg-image-left
{
    background: url("../img/side2.jpg") no-repeat center;
    background-size: cover;
    height: 275px;
    width: 98px;
    top: 150px;
    left: 0;
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.white-space
{
    height: 450px;
}

.subtitle
{
    font-size: 18px;
    margin-top: 0;
    max-width: 400px;
    margin-inline: auto;
}

.formContainer .uploaderContainer .uploaderInner {
    min-height: 80px;
}

.copy-link-button
{
    max-width: 200px;
}

.label
{
    color: var(--blue);
    font-weight: bold;
}

.field_w9Form .error
{
    margin-top: 16px;
}

.field_ageVerification .error
{
    margin-top: 16px;
}

.field_affidavit .error
{
    margin-top: 16px;
}

.field_affidavitTier1 .error
{
    margin-top: 16px;
}

.field_affidavitTier2 .error
{
    margin-top: 16px;
}

.field_affidavitTier3 .error
{
    margin-top: 16px;
}

.field_affidavitTier4 .error
{
    margin-top: 16px;
}

.field_affidavitTier5 .error
{
    margin-top: 16px;
}

.field_affidavitTier6 .error
{
    margin-top: 16px;
}

.field_affidavitTier7 .error
{
    margin-top: 16px;
}

.field_affidavitTier8 .error
{
    margin-top: 16px;
}

.field_affidavitTier9 .error
{
    margin-top: 16px;
}

.field_affidavitTier10 .error
{
    margin-top: 16px;
}

.claim-prize-subtitle
{
    max-width: 600px;
    font-size: 18px;
    margin-inline: auto;
    text-align: center !important;
}

.formContainer .uploaderContainer a.uploadLink {
    background: var(--blue);
}

.desktop-bg-image-right
{
    background: url("../img/side1.jpg") no-repeat center;
    background-size: cover;
    height: 275px;
    width: 98px;
    top: 150px;
    right: 0;
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.cookie.active .cookieInner {
    background-color: var(--blue);
}

.nav > div > div .navContainer ul li {
    border: none;
}

.nav > div > div .navContainer ul {
    border: none;
}

.nav > div > div .navContainer ul li a {
    color: var(--blue);
}

.nav > div > div .navContainer ul li a::after {
    border-color: var(--blue);
}

.navmenu-logo-container
{
    width: 100%;
    max-width: 150px;
    margin-left: 25px;
}

.acceptButtonContainer
{
    margin-inline: auto;
    margin-top: 32px;
}

.acceptButton
{
    background-color: var(--red);
    font-family: 'testnational', serif;
    font-weight: bold;
    width: 100%;
    padding: 16px 48px;
    text-decoration: none;
    color: #ffffff;
}

.navmenu-logo-container span
{
    background: url("../img/nav-logo.png") no-repeat center;
    background-size: contain;
    padding-bottom: 12%;
    display: block;
}

.nav > div > div {
    background-color: #ffffff;
    padding-top: 20px;
}


@media only screen and (max-width: 800px)
{
    
    .nav-logo-container
    {
        width: 250px;
    }
    
    .flex-col-mobile
    {
        flex-direction: column;
    }
    
    .align-center-mobile
    {
        align-items: center;
    }
    
    .flex-order-1
    {
        order: 1;
    }
    
    .flex-order-2
    {
        order: 2;
    }
    
    .flex-order-3
    {
        order: 3;
        
    }
    
    .flex-order-4
    {
        order: 4;
    }
    
    .hr-mobile
    {
        display: block;
        width: 100%;
    }
    
    .text-center-mobile
    {
        text-align: center;
    }
    
    .newsletter-link-margin-bottom-mobile
    {
        margin-bottom: 2rem;
    }
    
    .signup-title
    {
        font-size: 48px;
    }
    
    .stay-connected-container-mobile
    {
        margin-top: 2rem;
    }
    
    .footer-link
    {
        margin-block: 4px;
    }
    
    .footer-links-mobile
    {
        margin-top: 16px;
    }
    
    .mb-8-mobile
    {
        margin-bottom: 1rem;
    }
    
    .mb-16-mobile
    {
        margin-bottom: 2rem;
    }
    
    .desktop-bg-image-left
    {
        display: none;
    }
    
    .desktop-bg-image-right
    {
        display: none;
    }
}

@media only screen and (max-width: 450px)
{
    .bg-image
    {
        background: url("../img/background-image-mobile.jpg") no-repeat center;
        background-size: cover;
        height: 224px;
        width: 100%;
        position: absolute;
    }   
}