#contactus {
    @media (max-width: 1239px) {

        position: fixed;
        top: 0;
        width: 0;
        height: 0;

        z-index: 200;

        .body {
            display: none;
        }

        .body.active {
            display: flex;
            align-items: center;
            justify-content: center;

            width: var(--vw);
            height: var(--vh);
            overflow: hidden;
        }

        .background {
            width: var(--vw);
            height: var(--vh);
            overflow: hidden;

            position: absolute;
            backdrop-filter: blur(10px);

            z-index: 250;
        }

        .foreground {
            display: flex;
            align-items: center;
            justify-content: center;

            z-index: 300;
        }

        .form {
            border-radius: 22px;
            width: 300px;

            background-color: #0b0b0b;
            box-sizing: border-box;

            display: flex;
            flex-direction: column;
            position: relative;

            padding: 22px;
            padding-top: 52px;

            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

            zoom: 1.1;
        }

        .close {
            position: absolute;
            cursor: pointer;
            top: 22px;
            right: 22px;
        }

        .close svg {
            width: 18px;
            height: 18px;
        }

        .headline.customer {
            font-family: var(--font3);
            font-weight: 900;
            font-size: 37px;
            line-height: 100%;
            text-transform: uppercase;
            text-align: center;
            color: #fff;
        }

        .headline.proger {
            font-family: var(--second-family);
            font-weight: 500;
            font-size: 30px;
            line-height: 100%;
            text-transform: uppercase;
            text-align: center;
            color: #6170e2;
        }

        .miniline {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 12px;
            text-align: center;
            color: #fff;

            margin-top: 15px;
            margin-bottom: 22px;
        }

        input[type="text"] {
            margin-bottom: 22px;
        }

        textarea {
            margin-bottom: 35px;
            resize: none;
        }

        input[type="text"],
        textarea {
            font-size: 25px;
            font-family: var(--font-family);
            position: relative;
            background-color: #0b0b0b;
            border: none;
            border-bottom: 1px solid #9d9d9d;
            color: #fff;
        }

        input::placeholder,
        textarea::placeholder {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 10px;
            color: #6d6d6d;

            position: absolute;
            top: 0;
            left: 0;
        }

        button {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 13px;
            text-align: center;
            color: #000;

            background-color: #fff;

            padding-bottom: 16px;
            padding-top: 16px;
            border-radius: 15px;

            text-align: center;
            border: none;
        }

        .checkform {
            display: flex;
            flex-direction: row;
            align-self: center;

            margin-top: 22px;

            font-family: var(--font-family);
            font-weight: 500;
            font-size: 10px;
            color: #6b6b6b;
        }

        .checkform input {
            border: 1px solid #fff;
            border-radius: 4px;
            width: 18px;
            height: 18px;
        }

        .label {
            align-self: center;
            margin-left: 5px;
        }

        .checkform a {
            color: #6170e2;
        }
    }

    @media (min-width: 1240px) {

        border: none;
        position: fixed;
        top: 0;
        left: 50%;
        width: 0;
        height: 0;

        z-index: 200;

        .body {
            display: none;
        }

        .body.active {
            display: flex;
            align-items: center;
            justify-content: center;
            justify-self: center;

            width: var(--vw);
            height: var(--vh);
            overflow: hidden;
        }

        .background {
            width: var(--vw);
            height: var(--vh);
            overflow: hidden;

            position: absolute;
            backdrop-filter: blur(20px);

            z-index: 250;
        }

        .foreground {
            display: flex;
            align-items: center;
            justify-content: center;

            z-index: 300;
        }

        .form {
            border-radius: 30px;
            width: 612px;

            background-color: #0b0b0b;
            box-sizing: border-box;

            display: flex;
            flex-direction: column;
            position: relative;

            padding-left: 82px;
            padding-right: 82px;
            padding-bottom: 75px;
            padding-top: 75px;

            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        }

        .close {
            position: absolute;
            cursor: pointer;
            top: 38px;
            right: 38px;
        }

        .close svg {
            width: 30px;
            height: 30px;
        }

        .headline.customer {
            font-family: var(--font3);
            font-weight: 900;
            font-size: 56px;
            line-height: 100%;
            text-transform: uppercase;
            text-align: center;
            color: #fff;
        }

        .headline.proger {
            font-family: var(--second-family);
            font-weight: 500;
            font-size: 56px;
            line-height: 100%;
            text-transform: uppercase;
            text-align: center;
            color: #6170e2;
        }

        .miniline {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 22px;
            text-align: center;
            color: #fff;

            margin-top: 22px;
            margin-bottom: 40px;
        }

        input[type="text"] {
            margin-bottom: 22px;
        }

        textarea {
            margin-bottom: 42px;
            resize: none;
        }

        input[type="text"],
        textarea {
            font-size: 23px;
            font-family: var(--font-family);
            position: relative;
            background-color: #0b0b0b;
            border: none;
            border-bottom: 1px solid #9d9d9d;
            color: #fff;
        }

        input::placeholder,
        textarea::placeholder {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 15px;
            color: #6d6d6d;

            position: absolute;
            top: 0;
            left: 0;
        }

        button {
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 18px;
            text-align: center;
            color: #000;

            background-color: #fff;
            padding-bottom: 18px;
            padding-top: 18px;
            border-radius: 15px;

            text-align: center;
            cursor: pointer;
            border: none;
        }

        .checkform {
            display: flex;
            flex-direction: row;
            align-self: center;

            margin-top: 15px;

            font-family: var(--font-family);
            font-weight: 500;
            font-size: 12px;
            color: #6b6b6b;
        }

        .checkform input {
            border: 1px solid #fff;
            border-radius: 4px;
            width: 18px;
            height: 18px;
        }

        .label {
            align-self: center;
            margin-left: 5px;
        }

        .checkform a {
            color: #6170e2;
            cursor: pointer;
        }
    }
}