.d-none symbol * {
    transition: .3s
}

.d-none {
    display: none;
}

.fos {
    --c-primary: #333333;
    --c-white: #fff;
    --c-light-gray: #ECECEC;
    --c-gray: #888888;
    --cont: calc(100vw * 1840 / 1920);
    --cont-space: calc(100vw * 40 / 1920);
    --space: calc(100vw * 128 / 1920);
    --bd-rs: calc(100vw * 4 / 1920);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    transition: visibility .3s, opacity .3s;
    visibility: hidden;
    opacity: 0;
    display: flex;
    color: var(--c-primary);
    justify-content: center
}

.fos *,
.fos {
    box-sizing: border-box;
}

.fos-body {
    pointer-events: none;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%
}

.fos-fb-cont {
    pointer-events: visible;
    max-width: calc(100% - var(--cont-space) * 2);
    width: calc(100vw * 542 / 1920);
    min-width: calc(100vw * 542 / 1920);
    margin-left: var(--cont-space);
    margin-right: var(--cont-space);
    border-radius: calc(100vw * 4 / 1920);
    position: relative;
    background-color: rgba(255, 255, 255, 0.8);
    padding: calc(100vw * 40 / 1920)
}

.ffc_krest {
    cursor: pointer;
    position: absolute;
    top: calc(100vw * 24 / 1920);
    right: calc(100vw * 24 / 1920);
    width: calc(100vw * 32 / 1920);
    height: calc(100vw * 32 / 1920);
    transition: opacity .3s
}

.ffc_krest svg {
    width: 100%;
    height: 100%
}

.inn_fos-body {
    pointer-events: visible;
    /*width: 100%;*/
    max-height: 100%;
    overflow-y: auto;
    overflow-x: clip;
    padding: calc(100vw * 40 / 1920) 0
}

.fos-bg {
    background-color: rgba(0, 0, 0, .6);
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1
}

.ffc_infos {
    margin-top: calc(100vw * 40 / 1920)
}

.fos .heading {
    font-size: calc(100vw * 42 / 1920);
    text-align: center;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 500
}

.fos input[type=email],
.fos input[type=text],
.fos textarea {
    border: calc(100vw * 1 / 1920) solid #0000;
    transition: border-color .3s;
    padding: 0 calc(100vw * 12 / 1920);
    background-color: #ececec;
    border-radius: calc(100vw * 4 / 1920);
    width: 100%;
    height: 100%
}

.fos textarea {
    resize: none;
    padding: calc(100vw * 9 / 1920) calc(100vw * 12 / 1920)
}

.fos input[type=email].is-invalid,
.fos input[type=text].is-invalid,
.fos textarea.is-invalid {
    border-color: red
}

.ffci_polic {
    display: flex;
    align-items: flex-start;
    gap: calc(100vw * 12 / 1920);
    margin-top: calc(100vw * 40 / 1920)
}

.ffci_polic_chbx {
    cursor: pointer;
    width: calc(100vw * 20 / 1920);
    min-width: calc(100vw * 20 / 1920)
}

.ffci_polic_chbx svg {
    width: 100%;
    height: 100%
}

.ffci_polic_chbx input {
    display: none
}

.ffci_polic_text {
    line-height: 150%;
    color: #888;
    font-size: calc(100vw * 14 / 1920)
}

.ffci_polic_chbx input:checked+svg {
    --stroke: var(--c-primary)
}

.ffci_polic_chbx input.is-invalid+svg {
    --rect-stroke: #f00
}

@media (min-width: 769px) {
    .ffc_krest:hover {
        opacity: .7
    }
}

@media (max-width: 768px) {
    .fos-fb-cont {
        width: calc(100vw * 343 / 375);
        border-radius: calc(100vw * 4 / 375);
        padding: calc(100vw * 32 / 375) calc(100vw * 12 / 375)
    }

    .ffc_krest {
        top: calc(100vw * 8 / 375);
        right: calc(100vw * 8 / 375);
        width: calc(100vw * 24 / 375);
        height: calc(100vw * 24 / 375)
    }

    .inn_fos-body {
        padding: calc(100vw * 40 / 375) 0
    }

    .ffc_infos {
        margin-top: calc(100vw * 40 / 375)
    }

    .fos textarea {
        padding: calc(100vw * 10 / 375) calc(100vw * 12 / 375)
    }

    .fos .heading {
        font-size: calc(100vw * 24 / 375)
    }

    .fos input[type=email],
    .fos input[type=text] {
        border: calc(100vw * 1 / 375) solid #0000;
        padding: 0 calc(100vw * 12 / 375);
        border-radius: calc(100vw * 4 / 375)
    }

    .ffci_polic {
        gap: calc(100vw * 12 / 375);
        margin-top: calc(100vw * 40 / 375)
    }

    .ffci_polic_chbx {
        width: calc(100vw * 20 / 375);
        min-width: calc(100vw * 20 / 375)
    }

    .ffci_polic_text {
        font-size: calc(100vw * 14 / 375)
    }
}