@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;900&display=swap");

        .padding-section {
            padding: 25rem 0;
        }

        *,
        *::after,
        *::before {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            scroll-behavior: smooth;
            font-family: "museo-sans", sans-serif;
        }

        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

        body {
            min-height: 100vh;
        }

        h1,
        h2,
        h3 {
            font-family: "museo-sans", sans-serif;
            font-weight: 900;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #fff;
        }

        :focus {
            outline: 2px solid black;
        }


        html {
            font-size: 62.5%;
            overflow-x: hidden;
        }

        @media (max-width: 768px) {
            html {
                font-size: 50%;
            }
        }

        body {
            font-family: "museo-sans", sans-serif;
            font-weight: 300;
            overflow-x: hidden;
        }

        .container {
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
            padding: 6rem 0rem 0rem 0rem;
            min-height: 100vh;
        }

        .container_padding {
            padding: 0 8rem 0 8rem;
        }

        fieldset {
            border: none;
        }


        @media (max-width: 1024px) {
            .container {
                min-height: 80vh;
            }

            .es-mbl-hide {
                display: none !important;
            }

        }

        @media (max-width: 768px) {
            .container {
                padding: 4rem 0 0rem 0;
            }

            .container_padding {
                padding: 0 6rem 0 6rem;
            }

        }

        @media (max-width: 480px) {

            .container {
                padding: 3rem 0rem 0rem 0rem;
            }

            .container_padding {
                padding: 0 4rem 0 4rem;
            }

            .mbl-hide {
                display: none !important;
            }
        }

        .container .navigation {
            margin-bottom: 9rem;
        }

        .container .navigation a {
            display: inline-block;
        }

        .container .navigation img {
            width: 100%;
            max-width: 178px;
            display: block;
        }

        main {
            margin-bottom: 3.5rem;
        }

        main .main-title {
            font-size: 5.5rem;
            line-height: 6rem;
            color: #f36d00;
            font-weight: 900;
            margin-bottom: 2rem;
        }

        @media (max-width: 768px) {
            main .main-title {
                font-size: 3.5rem;
                line-height: 4rem;
            }
        }

        @media (max-width: 480px) {
            main .espaniol-title {
                font-size: 3rem;
                line-height: 3.5rem;
            }
        }

        main .main-text {
            max-width: 500px;
        }

        main .main-text.unsub_page {
            max-width: 600px !important;
        }

        main .main-text p {
            font-size: 1.8rem;
            line-height: 2.6rem;
            font-weight: 400;
            color: #6E6E6E;
        }

        .telephone_link {
            font-size: 1.8rem;
            line-height: 2.6rem;
            font-weight: 400;
            color: #6E6E6E;
            text-decoration: none;
            outline: none;
        }

        main .main-text p:first-of-type {
            margin-bottom: 1rem;
        }

        .unsubscribe .unsubscribe-form {
            width: 100%;
            max-width: 84rem;
        }

        .unsubscribe .unsubscribe-form .unsubscribe-form_grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-areas:
                "firstname firstname lastname lastname"
                "gender email email meridian";
            column-gap: 3rem;
        }

        .unsubscribe .unsubscribe-form .unsubscribe-form_unsub {
            display: grid;
            grid-template-columns: 1fr;
        }

        @media (max-width: 920px) {
            .unsubscribe .unsubscribe-form .unsubscribe-form_grid {
                grid-template-columns: 1fr;
                grid-template-areas: auto;
            }
        }

        @media (max-width: 600px) {
            .unsubscribe .unsubscribe-form .unsubscribe-form_grid {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "firstname"
                    "lastname"
                    "gender"
                    "email"
                    "meridian";
            }
        }

        .column_firstname {
            grid-area: firstname;
        }

        .column_lastname {
            grid-area: lastname;
        }

        .column_gender {
            grid-area: gender;
        }

        .column_email {
            grid-area: email;
        }

        .column_meridian {
            grid-area: meridian;
        }


        .unsubscribe .unsubscribe-form .unsubscribe-form_column {
            display: flex;
            flex-direction: column;
        }

        .unsubscribe .unsubscribe-form .column_meridian {
            position: relative;
        }

        .unsubscribe .unsubscribe-form .unsubscribe-form_column.column_meridian span {
            position: absolute;
            bottom: 0;
            width: 300px;
        }

        @media (max-width: 1024px) {
            .unsubscribe .unsubscribe-form .unsubscribe-form_column.column_meridian span {
                position: unset;
                bottom: unset;
                width: auto;
            }

        }

        .unsubscribe .unsubscribe-form .unsubscribe-form_column span {
            height: 3rem;
            color: rgb(233 0 0);
            font-weight: 600;
            font-size: 1.6rem;
            line-height: 2.2rem;

        }

        .unsubscribe .unsubscribe-form label {
            font-size: 1.6rem;
            line-height: 2.2rem;
            font-weight: 900;
            color: #6E6E6E;
            margin-bottom: 0.5rem;
        }

        .unsubscribe .unsubscribe-form input,
        .unsubscribe .unsubscribe-form select {
            -webkit-appearance: none;
            border-radius: 0;
            /* width: 100%; */
            padding: 1rem 1.5rem;
            border: 1px solid #6E6E6E;
            border-radius: 4px;
            background-color: #fff;
            font-size: 1.6rem;
            font-family: "museo-sans", sans-serif;
        }

        .unsubscribe .unsubscribe-form select {
            background-color: transparent !important;
            position: relative;
            z-index: 1;
        }

        .unsubscribe .unsubscribe-form input:focus,
        .unsubscribe .unsubscribe-form select:focus {
            outline: none !important;
            border: 1px solid #719ECE;
            box-shadow: 0 0 10px #719ECE;
        }

        .unsubscribe .unsubscribe-form input::placeholder,
        .unsubscribe .unsubscribe-form select::placeholder {
            color: #6E6E6E;
            font-family: "museo-sans", sans-serif;
        }

        .unsubscribe .unsubscribe-form button {
            display: block;
            padding: 10px 30px 10px 30px;
            background-color: #F36D00;
            border: 0;
            font-weight: 900;
            font-size: 2.2rem;
            font-family: "museo-sans", sans-serif;
            border-radius: 4px;
            cursor: pointer;
            transition: 0.6s color, 0.8s background-color;
            position: relative;
            overflow: hidden;
            z-index: 1;
            color: #fff;
        }

        @media (min-width: 900px) {
            .unsubscribe .unsubscribe-form button:hover {
                color: #fff;
            }
        }

        @media (min-width: 900px) {
            .unsubscribe .unsubscribe-form button::before {
                content: "";
                position: absolute;
                left: 0;
                width: 100%;
                height: 0%;
                background-color: #f36d00;
                z-index: -1;
                transition: 0.8s;
                top: 0;
                border-radius: 0 0 50% 50%;
            }
        }

        @media (min-width: 900px) {
            .unsubscribe .unsubscribe-form button:hover::before {
                height: 180%;
            }
        }

        footer {
            padding-top: 5rem;
            margin-top: auto;
            font-size: 1.8rem;
            font-family: "museo-sans", sans-serif;
            color: #6E6E6E;
            font-weight: 400;
            display: flex;
        }

        .footer_content {
            background-color: #F4F4F4;
            width: 100%;
            padding-top: 2rem;
            padding-bottom: 2rem;
            font-size: 1.8rem;
            font-family: "museo-sans", sans-serif;
        }

        .footer_legal_address {
            margin-bottom: 2rem;
            font-size: 1.8rem;
            line-height: 2.4rem;
            font-family: "museo-sans", sans-serif;
        }

        .footer_legal_copy {
            margin-bottom: 2rem;
            font-size: 1.4rem;
            line-height: 2.1rem;
            font-family: "museo-sans", sans-serif;
        }

        .footer_legal_links {
            width: 100%;
            display: flex;
            flex-direction: row;
            row-gap: 1rem;
            column-gap: 3rem;
            flex-wrap: wrap;
            font-size: 1.4rem;
            line-height: 2.1rem;
            font-family: "museo-sans", sans-serif;
        }

        .footer-link {
            text-decoration: underline;
            color: #6E6E6E;
        }

        .espaniol-button {
            max-width: 26rem !important;
            min-width: 18rem;
        }

        .arrow {
            text-align: right;
            padding: 1rem 1.5rem;
            height: 3rem;
            font-size: 1.6rem;
            line-height: 2.2rem;
        }

        .arrow img {
            width: 1.2rem;
            top: -4.2rem;
            position: relative;
            z-index: 0;
        }

        .validation-field__errors {
            margin-top: 10px;
            color: #e90000;
            font-size: 1.8rem;
            line-height: 2.6rem;
            font-family: "museo-sans", sans-serif;
            font-weight: 700;
        }

        .validation-field__errors .validation-field__error p {
            font-weight: 700 !important;
        }

        fieldset {
            margin-top: 40px;
        }

        .field_container {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 16px !important;
            cursor: pointer;
            font-size: 22px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            font-weight: 500 !important;
            padding-top: 5px !important;
        }

        .field_container input[type=radio] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        .field_checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #fff;
            border: 1px solid #6e6e6e;
        }

        .field_checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .field_container input:checked~.field_checkmark {
            background-color: #fff;
        }

        .field_container input:checked~.field_checkmark:after {
            display: block;
        }

        .field_container .field_checkmark:after {
            top: 5px;
            left: 5px;
            width: 13px;
            height: 13px;
            background: #F36D00;
        }

        .field_container textarea {
            padding: 5px;
            margin-top: 16px;
            width: 410px;
            height: 100px;
            text-align: left;
            font-size: 18px;
            font-weight: 500;
            color: #6e6e6e;
        }

        @media (max-width: 786px) {
            .sorry {
                font-size: 14px !important;
            }

            .field_container textarea {
                width: 100%;
            }
        }