@font-face {
    font-family: 'ArtegraSans';
    src: url('fonts/ArtegraSans/ArtegraSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ArtegraSans';
    src: url('fonts/ArtegraSans/ArtegraSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ArtegraSans';
    src: url('fonts/ArtegraSans/ArtegraSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ArtegraSans';
    src: url('fonts/ArtegraSans/ArtegraSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ArtegraSans';
    src: url('fonts/ArtegraSans/ArtegraSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html {
    height: 100%;
}
body {
    min-height: 100%;
}
*{
    margin:0;
    padding:0;
    border:0;
    outline: none;
}
body * {
    position: relative;
    box-sizing: border-box;
}
body {
    display: flex;
    align-items: center;
    background: no-repeat center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.28;
}

.section {
    margin: 0 auto;
    width: 645px;
    max-width: 90%;
    background: white;
    padding: 90px;
    border: 1px solid #E8E8E8;
}

img {max-width: 100%}

:root {
    --styleColor: #000;
}
.-orange {
    --styleColor: #EC7616;
}
.-blue {
    --styleColor: #1082D2;
}
.-clinic {
    --styleColor: #1FB9B2;
}
.-beauty {
    --styleColor: #E986B3;
}

.-ferma {
    --styleColor: #8AB30F;
}

.-aya {
    --styleColor: #98694b;
}

.c-coloured {
    color: var(--styleColor);
}

.btn {
    width: 100%;
    padding: 0 16px;
    text-align: center;
    position: relative;
    text-decoration: none!important;
    height: 50px;
    line-height: 50px;
    white-space: nowrap;
    background: var(--styleColor);
    color: white;
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
}

.logo {
    background: no-repeat left;
    background-size: contain;
}
.title {
    margin-bottom: 30px;
    font-size: 1.78em;
    font-weight: bold;
}

.why .why-btn {
    padding-top: 5px;
    text-decoration: underline;
}
.why .why-btn span {
    cursor: pointer;
}
.why-text {
    display: none;
    padding-top: 10px;
    font-size: 15px;
    font-weight: 300;
}
.why.-open .why-text {display:block}
.captcha {
    margin-top: 30px;
    width: 450px;
    max-width: 100%;
    border: 1px solid #E8E8E8;
    padding: 30px;
    font-size: 18px;
}
.captcha.-hiddenExtra {
    width: 300px;
}
.captcha.-hiddenExtra .extra {
    display: none;
}
.captcha-info {
    display: none;
}
.captcha.-hiddenExtra .captcha-info {
    display: block;
}
.captcha-checkbox {
    display: flex;
    align-items: flex-start;
}
.captcha-texts {
    margin-left: 10px;
}
.captcha-info {
    margin-top: 7px;
    font-size: 15px;
    font-weight: 300;
}
.enter-text {
    margin-top: 20px;
    margin-bottom: 5px;
}
.w-160 {
    width: 160px;
}
.keystring {
    border: 1px solid #C4C4C4;
    height: 50px;
    line-height: 50px;
    padding:0 5px;
    margin-top: 5px;
    font-size: 15px;
    text-align: center;
}
.extra .btn {
    margin-top: 20px;
}

.refresh {
    display: inline-block;
    width: 47px;
    height: 47px;
    background: url(img/refresh.png) no-repeat;
    background-size: contain;
    cursor: pointer;
}

@media(max-width: 991px) {
    body {
        font-size: 15px;
    }
    .section {
        width: 485px;
        padding: 50px 50px 65px;
    }
    .title{
        margin-top: 50px;
    }
    .-clinic .title,
    .-beauty .title {
        margin-top: 30px;
    }
}
@media (max-width: 575px) {
    body {
        font-size: 14px;
    }
    .-clinic .logo,
    .-beauty .logo {
        height: 55px;
    }
    .section {
        margin: 25px auto;
        padding: 55px 15px 40px 30px;
    }
    .-clinic .section,
    .-beauty .section {
        padding: 50px 25px;
    }
    .title {
        font-size: 20px;
    }
    .why-text {
        font-size: 12px;
    }
    .captcha {
        margin-top: 20px;
        padding: 20px;
        font-size: 15px;
    }
    .captcha.-hiddenExtra {
        width: 255px;
    }
    .captcha-info {
        margin-top: 3px;
        font-size: 12px;
    }
    .enter-text {
        margin-top: 15px;
    }
}
@media (max-width: 370px) {
    br {
        display: none;
    }
    .captcha {
        padding: 15px;
    }
    .refresh {
        width: 40px;
        height: 40px;
    }
}

.-orange {
    background-image: url(img/bcg-orange.jpg);
}
.-orange .logo {
    height: 43px;
    background-image: url(img/logo-orange.png);
}

.-blue {
    background-image: url(img/bcg-blue.jpg)
}
.-blue .logo {
    height: 49px;
    background-image: url(img/logo-blue.png);
}

.-clinic {
    background-image: url(img/bcg-clinic.jpg)
}
.-clinic .logo {
    height: 70px;
    background-image: url(img/logo-clinic.png);
}
.-beauty {
    background-image: url(img/bcg-beauty.jpg)
}
.-beauty .logo {
    background-image: url(img/logo-beauty.png);
    height: 45px;
}

.-ferma{
    background-image: url('img/bcg-ferma.jpg');
    font-family: "ArtegraSans";
}

.-ferma .description{
    font-weight: 400;
}

.-ferma .captcha-texts label{
    font-weight: 400;
}

.-ferma .logo {
    background-image: url(img/logo-ferma.svg);
    height: 93px;
    margin-bottom: 34px;
    position: relative;
}

@media (max-width: 575px) {
    .-ferma .logo {
        height: 66px;
        margin-bottom: 20px;
    }
}

.-ferma .logo:after {
    content: '';
    position: absolute;
    left: 146px;
    top: 30px;
    width: 57px;
    height: 38px;
    display: block;
    background-image: url("img/logo-ferma-label1.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.-ferma .logo:before {
    content: '';
    position: absolute;
    left: 210px;
    top: 30px;
    width: 57px;
    height: 38px;
    display: block;
    background-image: url("img/logo-ferma-label2.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.-ferma .why .why-btn{
    text-decoration: none;
    color: #8AB30F;
}

.-ferma .switch  input[type="checkbox"] ~ .switch-span{
    border: 1px solid #1FB9B2;
}

@media (max-width: 575px) {
    .-ferma .logo:after {
        left: 96px;
        top: 20px;
        width: 40px;
        height: 26px;
    }

    .-ferma .logo:before {
        left: 141px;
        top: 20px;
        width: 40px;
        height: 26px;
    }
}

.-aya .section{
    width: 650px;
}
.-aya {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    line-height: 1.28;
    background-image: url(img/bcg-aya.png)
}

.-aya .title {
    margin-top: 0;
    margin-bottom: 10px;
}

.-aya .notation {
    font-weight: 400;
    font-size: 18px;
}
.-aya .why .why-btn{
    margin-top: 20px;
    font-weight: 500;
    color: #98694A;
    text-decoration: none;
}
.-aya .captcha {
    margin-top: 20px;
}

.-aya .captcha-texts label {
    font-size: 18px;
    font-weight: 500;
}
.-aya .captcha-texts .captcha-info{
    font-size: 14px;
}
.-aya .logo {
    height: 85px;
    background-image: url(img/logo-aya.png);
    margin-bottom: 20px;
}

@media (max-width:  991px) {
    .-aya .section{
        width: 485px;
    }
}

@media (max-width: 575px) {
    .-aya {
        background-position: 75%;
    }
    .-aya .section{
        max-width: 90%;
    }

    .-aya .notation {
        font-size: 14px;
    }

    .-aya .captcha {
        width: 290px;
    }
}

.-orange .section,
.-blue .section,
.-clinic .section {
    border: 0;
}

.-orange .title,
.-blue .title {
    margin-top: 60px;
}

.-beauty .section {
    border: 0;
    box-shadow: 0px 3px 6px #00000012;
}
.-clinic .title,
.-beauty .title {
    margin: 40px 0 10px;
}

.switch {
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
}
.switch  input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}
.switch  input[type="checkbox"] ~ .switch-span {
    position: relative;
    top: -3px;
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #707070;
    background-color: white;
    vertical-align: middle;
}
.switch  input[type="checkbox"] ~ .switch-span:before {
    content: '';
    position: absolute;
    top: -2px;
    bottom:0;
    left: 0;
    right:0;
    margin:auto;
    width: 9px;
    height: 5px;
    border: solid transparent;
    border-width: 2px 2px 0 0;
    transform: rotate(135deg);
}

.switch  input[type="checkbox"]:checked ~ .switch-span:before{border-color:var(--styleColor);}
.switch  input[type="checkbox"].error ~ .switch-span {border-color:red}

/*.letters-block {
    display: flex;
    align-items: center;
    gap: 5px
}*/
.letters-block button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    padding: 0;

    position: absolute;
    width: 24px;
    height: 24px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    transition: width .2s, height .2s;
    color: #fff;
    background-color: var(--styleColor);

    cursor: pointer;
    font-size: 16px;
}

.letters-block button.del {
    background-color: #fff;
    width: 28px;
    height: 28px;
    color: #f00;
    font-size: 1.5em;
}

.task-block {
    display: flex;
    align-items: center;
}

.task-block img.task {
    margin-left: 10px;
}