.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%;
    overflow-y: hidden; /* Prevents scroll */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    margin: 5% auto; /* 15% from the top and centered */
    padding: 10px 10px;
    width: 90%;
    background: var(--color-brand-blue-dark);
    border-radius: 11px;
    max-width: 574px;
    min-width: 300px;

    #mc_embed_signup {
        background: transparent !important;
    }

    #mc_embed_signup h2 {
        margin: 20px 0 5px;
    }

    #mc_embed_signup #mce-success-response {
        color: white !important;
        font-size: 20px !important;
        text-align: center !important;
        width: 100% !important;
    }

    #mc_embed_signup #mce-error-response {
        text-align: center;
        width: 100%;
    }

    #mc_embed_signup .mc-field-group select {
        border-radius: 3px !important;
        color: black !important;
        padding: 8px 10px !important;
    }

    #mc_embed_signup .mc-field-group label {
        margin-top: 3px !important;
        padding-bottom: 0 !important;
    }

    #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
        position: absolute;
        padding: 1px !important;
        margin: 0;
    }

    form {
        background: var(--color-brand-blue-dark);
        color: white;
        font-family: var(--font-family-primary);

        /* Overriding Mailchimp styles */
        h2 {
            font-size: 20px !important;
            font-weight: 700 !important;
            color: white !important;
            font-family: var(--font-family-primary) !important;

            @media all and (max-width: 47em) {
                font-size: 16px !important;
            }
        }

        label {
            color: white !important;
            font-family: var(--font-family-primary) !important;
        }

        input.button {
            border: 2px solid #FFFFFF !important;
            background: transparent !important;
            padding: 0px 20px !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            color: white !important;
            border-radius: 3rem !important;
            height: 42px !important;
            letter-spacing: 1px;
            margin: auto !important;
            text-align: center !important;
            display: block !important;

            &:hover {
                border: 2px solid var(--color-brand-blue) !important;
                color: var(--color-brand-blue) !important;
            }

            @media all and (max-width: 47em) {
                margin-top: 20px !important;
            }
        }

    }

    .modal-legal {
        font-size: 12px;
         /* max-width: 330px; */
        margin: 20px auto;
        padding: 0 2px;
    }
}

/* The Close Button */
.close {
    z-index: 100;
    position: relative;
    cursor: pointer;
    border: 0px;
    background: transparent;
    float: right;
    font-size: 28px;
    font-weight: bold;

    &::after{
        content: '';
        background-repeat: no-repeat;
        background-size: 100% auto;
        display: inline-block;
        width: 20px;
        height: 20px;
        top: -7px;
        position: relative;
      }
  
        &:hover {
        &::after{
            
        }
    }
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}