.ASDDisplay-Regular-Web {
    font-family: "ASD Display Web Regular";
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

.ASDSans-Bold-Web {
    font-family: "ASD Sans Web Bold";
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}

.ASDSans-Light-Web {
    font-family: "ASD Sans Web Light";
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
}

.ASDSans-Regular-Web {
    font-family: "ASD Sans Web Regular";
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: "ASD Display Web Regular";
    src: url("/fonts/ASDDisplay-Regular-Web.woff2") format("woff2"),
    url("/fonts/ASDDisplay-Regular-Web.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "ASD Sans Web Bold";
    src: url("/fonts/ASD_FONT_SANS_BOLD_WEB.woff2") format("woff2"),
    url("/fonts/ASD_FONT_SANS_BOLD_WEB.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "ASD Sans Web Light";
    src: url("/fonts/ASD_FONT_SANS_LIGHT_WEB.woff2") format("woff2"),
    url("/fonts/ASD_FONT_SANS_LIGHT_WEB.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "ASD Sans Web Regular";
    src: url("/fonts/ASD_FONT_SANS_REGULAR_WEB.woff2") format("woff2"),
    url("/fonts/ASD_FONT_SANS_REGULAR_WEB.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

html {
    font-size: 14px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html,
body {
    font-family: "ASD Sans Web Regular", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding:0;
}

body {
    height: 100vh;
    width: 100%;
    background-image: url("/img/ASD_SWIU_GLOBAL_SILVER_BACKGROUND_web.jpg");
    background-size: cover;
    -webkit-background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "ASD Sans Web Bold", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}


h1 {
    font-size: 1.8rem;
}

h2 {
    font-size: 1.7rem;
}

h3 {
    font-size: 1.6rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.3rem;
}

h6 {
    font-size: 1rem;
}

.container {
    height: 100vh;
    width: 100%;
}

.container.container-bg {
    background-image: url("/img/swirl.png");
    background-size: auto 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
}

.content-container {
    width: 360px;
    max-width: 100%;
    height: 100vh;
    margin: 0 auto;
}

.centered-content {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 0.5rem;
}

.centered-legal {
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: end;
    text-align: center;
    font-size: 0.75rem;
    padding: 3rem 0.5rem;
}

@media (max-height: 1024px) {
    .container.container-bg {
        background-size: auto 75%;
    }
}

@media (max-width: 1024px) and (max-height: 600px) {
    .container.container-bg {
        background-size: auto 80%;
    }
}

@media (min-width: 768px) {
    .centered-legal {
        margin-left: -5rem;
        margin-right: -5rem;
    }
}

@media (max-width: 768px) {

    .container.container-bg {
        background-size: auto 50%;
    }

    .container-no-bg-mobile {
        background-image: none !important;
    }

    .content-container {
        width: 90%;
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

    .centered-content {
        height: 70vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 15vh;
        overflow: hidden;
    }

    .centered-legal {
        height: 30vh;
        overflow: hidden;
        padding: 1rem 0.5rem;
    }
}

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

.content-centered.content-bg-white {
    background-color: #fff;
    padding: 1rem 0.75rem;
}

.content-centered.content-bg-transparent {
    background-color: transparent;
    padding: 1rem 0.75rem;
}

.form .input-group {
    margin-bottom: 1rem;
}

.form .input-group.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: .75rem 1.25rem;
    border: 1px solid transparent;
}

.form .input-group.error p {
    margin-block-start: 0.25rem;
    margin-block-end: 0.25em;
}

.content-bg-transparent .form input,
.content-bg-transparent .form select {
    background-color: transparent;
    border-width: thin;
    border-color: #000 !important;
    border-top-color: #000 !important;
    border-bottom-color: #000 !important;
    border-left-color: #000 !important;
    border-right-color: #000 !important;
}

.content-bg-transparent .form input[type="checkbox"] {

    margin-left: 0;

    /* Remove default browser styling */
    -webkit-appearance: none;
    appearance: none;

    /* Set custom dimensions and border */
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    border-radius: 4px;

    /* Make the background transparent */
    background-color: transparent;

    display: inline-grid;
    place-content: center;
    cursor: pointer;
}

/* Style the checkmark for the checked state */
.content-bg-transparent .form input[type="checkbox"]::before {
    content: "";
    width: 12px;
    height: 12px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #000; /* Color of the checkmark */
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.content-bg-transparent .form input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.form .dob-fields {
    margin-bottom: 0.75rem;
}

.form input.dob-fields,
.form select {
    display: block;
    width: 100%;
    padding: 0.25rem 0.5rem;
}

.form input[type="checkbox"] {
    margin-left: 0;
}

.form label {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
}

.form #submit {
    display: block;
    width: 100%;
    background-color: #000;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    padding: 0.25rem;
    cursor: pointer;
}

.form #submit:hover {
    background-color: #292929;
}

.form .form-legal {
    line-height: 1.5;
    font-size: 0.7rem;
}

.form .form-legal a,
.form .form-legal a:link,
.form .form-legal a:visited,
.form .form-legal a:hover,
.form .form-legal a:active  {
    color: #000;
}

.form .form-legal a:hover,
.form .form-legal a:active  {
    color: #2f3033;
}

.centered-legal p {
    margin: 0;
    padding: 0;
    line-height: 2;
}


.centered-legal a {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.centered-legal a,
.centered-legal a:link,
.centered-legal a:visited,
.centered-legal a:hover,
.centered-legal a:active {
    color: #000 !important;
    text-decoration: none;
}

.centered-legal a:hover,
.centered-legal a:active {
    text-decoration: underline;
}

.img {
    display: block;
    border: 0;
}

.img.img-fluid {
    max-width: 100%;
    height: auto;
}

b, strong {
    font-weight: 700;
}

.my-auto,
.mb-auto {
    margin-bottom: auto;
}

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

.my-1,
.mb-1 {
    margin-bottom: 1rem;
}

.my-2,
.mb-2 {
    margin-bottom: 2rem;
}

.my-3,
.mb-3 {
    margin-bottom: 3rem;
}

.my-4,
.mb-4 {
    margin-bottom: 4rem;
}

.my-5,
.mb-5 {
    margin-bottom: 5rem;
}

.my-auto,
.mt-auto {
    margin-bottom: auto;
}

.my-0,
.mt-0 {
    margin-top: 0;
}

.my-1,
.mt-1 {
    margin-top: 1rem;
}

.my-2,
.mt-2 {
    margin-top: 2rem;
}

.my-3,
.mt-3 {
    margin-top: 3rem;
}

.my-4,
.mt-4 {
    margin-top: 4rem;
}

.my-5,
.mt-5 {
    margin-top: 5rem;
}

.mx-auto,
.ml-auto {
    margin-left: auto;
}

.mx-0,
.ml-0 {
    margin-left: 0;
}

.mx-1,
.ml-1 {
    margin-left: 1rem;
}

.mx-2,
.ml-2 {
    margin-left: 2rem;
}

.mx-3,
.ml-3 {
    margin-left: 3rem;
}

.mx-4,
.ml-4 {
    margin-left: 4rem;
}

.mx-5,
.ml-5 {
    margin-left: 5rem;
}

.mx-auto,
.mr-auto {
    margin-right: auto;
}

.mx-1,
.mr-1 {
    margin-right: 1rem;
}

.mx-2,
.mr-2 {
    margin-right: 2rem;
}

.mx-3,
.mr-3 {
    margin-right: 3rem;
}

.mx-4,
.mr-4 {
    margin-right: 4rem;
}

.mx-5,
.mr-5 {
    margin-right: 4rem;
}

.logo-centered {
    width: 121px;
}