@font-face {
    font-family: "TildaSans";
    font-style: normal;
    src: url("/storage/app/public/fonts/TildaSans-Medium.ttf");
}
@font-face {
    font-family: "TildaSans bold";
    font-weight: bold;
    src: url("/storage/app/public/fonts/TildaSans-Bold.ttf");
}
@font-face {
    font-family: "TildaSans regular";
    font-weight: normal;
    src: url("/storage/app/public/fonts/TildaSans-Regular.ttf");
}
@font-face {
    font-family: "TildaSans light";
    font-weight: normal;
    src: url("/storage/app/public/fonts/TildaSans-Light.ttf");
}


body{
    /*hyphens:auto;*/
    margin: 0;
    color: #f6f6f6;
    font-family: "TildaSans", "Calibri", sans-serif;
    letter-spacing: 1px;
    align-items: center;
    text-align: center;
    font-size: 24px;
}
/*body:not(.selectable) {user-select:none;}*/
.selectable{user-select: text;}

input{height: 36px; width: 67%;  border: 1px solid #030303; border-radius: 2px; padding:0 10px;font-size:18px;}
input::placeholder{color: #929292; opacity: 0.7; font-style: italic;}
input[type="checkbox"]{width: 20px; height:20px; margin-right:12px;}


.text{font-size: 24px; line-height: 37px;}
.text2{font-weight: 100; line-height: 37px; font-size: 24px; font-family: "TildaSans light", sans-serif; letter-spacing:0.3px;}
.header3{font-weight: 700; line-height: 37px; font-size: 24px;}
.button1{color: #111111;width: 280px; height: 80px; border-radius: 12px; font-size: 26px; font-weight: 700; background-color: #fc9a40; border: 2px solid #fc9a40;}
.button1:hover{background-color: #f6f6f6; color: #fc9a40; cursor: pointer; transition: all 0.2s ease; border: 2px solid #f6f6f6;}
a{text-decoration: none;color: #f6f6f6;}
a:hover{cursor: pointer;}
ul{list-style: none;}

.block0 .container span.underline:after{display: block; content: ""; border-bottom: 3px solid #f6f6f6; width: 0; padding-top: 15px;
    -webkit-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
}
.block0 .container span.underline:hover:after, .block0 .container span.underline:focus:after{width: 100%;}




/*Jarallax*/
.jarallax {position: relative; z-index: 0;}
.jarallax > .jarallax-img {position: absolute; object-fit: cover; top:0; left:0; width: 100%; height: 100%; z-index: -1;}
/*если не убрать, будет на 1 px шире, появятся скроллы*/
/*#jarallax-container-0{border: 1px solid black;}*/

/*HandMade появление текста (уменьшание прозрачности)*/
.textAppear span {opacity: 0; transition: all 1.5s ease;}
.textAppear span.visible {opacity: 1;}


.block0{background: rgb(3, 3, 3);position: sticky; top: 0; z-index: 100; padding: 5px 40px 0; font-size: 22px; font-weight: 600; min-height: 85px; display: flex; margin-top: -1px;}
.block0 div.container{display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; width: 100%}
.block0 img.logo{height: 80px;}
.block0 span.logo{margin-right: 3%;}
.block0 a[href='#offer']{margin-right: 5%;}
.block0 .logo img:hover{transition: all 1s ease;transform: scale(1.2);}
.block0 span{width: 20%;}

/*.block1{min-height: 750px;}*/
.block1 img.background{-webkit-filter: brightness(15%);filter: brightness(15%);}
.block1_content{display: flex; flex-direction: column; width: 80%; margin: auto;}
.block1_content div h1{font-weight: 900; font-size: 65px; font-family: "TildaSans bold", serif;margin: 50px auto;}
.block1_content div.date{margin: 20px 0 30px;}
.block1_content div.text{width: 70%; margin: auto;}
.block1_content button{margin: 50px 0 40px;}
.block1_content .arrow{width: 40px;}


/*чтобы убрать белую полоску между блоками надо делать background-color: #030303 у следующего. Можно маржу еще -1.*/
.block2{background-color: #030303; min-height: 500px; padding: 20px;margin-top: -1px;}
/*шрифт для 2 подзагаловков*/
.header2 h2{font-weight:700; font-size: 62px;}
.header2 h2:after{content: ""; display: block; width: 320px; padding-top: 50px; border-bottom: 5px solid #f6f6f6; margin: auto;}
.block2 div.column{display:flex; flex-wrap: wrap; justify-content: space-evenly; margin-bottom: 50px;}
.block2 div.column div{width: 33%; text-align: justify;}
.block2_text{hyphens:auto;}

.block3{background-color: #030303;min-height: 620px;padding: 20px 40px;}
.block3 img.background{-webkit-filter: brightness(15%);filter: brightness(15%);}
.block3_content{display: flex;flex-direction: column; justify-content: space-evenly;}
.block3_content .text{margin: 70px 0 80px;}

.block4{background-color: #030303; padding: 20px 50px 85px; min-height: 200px;}
.block4_content img{height: 40px;}
.block4_content .lesson_block{display: flex;align-items: flex-start; width: 70%; margin: auto;}
.block4_content ul{margin: 0; padding: 5px 0 25px 25px; text-align: left;}
.block4_content ul li:first-child{margin-bottom: 5px; list-style:none;}
.block4_content.dysplasia ul{list-style:disc;}
.block4_content.dysplasia ul li:nth-child(n+2)::marker {color:#f6f6f6;}

/*.block5{background-color: #f6f6f6; padding: 20px 80px; color: #030303;}*/
.block5{background-color: #f6f6f6; padding: 20px 80px; color: #030303;}
.header2.invert h2{color: #030303;}
.header2.invert h2:after{border-bottom: 5px solid #030303;}
.benifit_block{display: flex; flex-wrap: wrap; justify-content: space-evenly}
.benifit_block>div{width: 20%; margin-top: 60px;}
.benifit_block img{height: 100px;}
.benifit_block>div>div:last-child{margin: 50px 0;}

.block6{background-color: #030303; padding: 20px;}
.block6 .slider_wrapper{width: 50%; margin: auto;}
.block6 .slider_wrapper img{margin: auto;}
.block6 div.button{margin: 40px auto 80px;}

.block7{padding: 20px 80px 110px; background-color: #030303; margin-top: -1px;}
.block7 img.background{-webkit-filter: brightness(15%);filter: brightness(15%);}
.block7 .content2{display: flex; flex-wrap:wrap; justify-content: space-evenly; text-align: center; padding: 0 60px;}
.block7 .content2 img{height: 335px; margin-top:25px; border-radius: 35px;}
.block7 .content2 div{width:40%;}
.block7 .content2 .content_list{flex-grow: 1.2; text-align: left;}
.block7 .content2 .content_list ul{list-style: disc;}
.block7 .content_list li::marker {color:#f6f6f6;}

.block8{background-color: #f6f6f6; padding: 20px 80px 60px; color: #030303;}
.block8 .tariffs{display: flex; flex-wrap: wrap; justify-content: space-around; margin-bottom: 33px;}
.block8 .tariffs>div{width: 350px; background-color:#e6e6e6; border-radius: 30px; margin: 33px 5px; padding-right: 10px; padding-bottom:35px;} /*раньше была height 900px*/
.block8 .list ul{list-style: disc; text-align: left; font-size: 20px; font-weight:100; letter-spacing: 0;
    font-family: "TildaSans light", sans-serif;}
.block8 .list li::marker{color: #030303;}
.block8 .list li.not_avalible{text-decoration: line-through; font-style: italic;}
.block8 div.text{margin:33px auto;}
.block8 .tariffs button{width: 200px; height: 55px; border-radius: 30px; margin: 12px 0 ; font-size: 22px; font-weight: 700; border-style: solid;}
.block8 div.buy_button button{color:#f6f6f6; background-color:#030303;border-width:0; border-style: solid;}
.block8 div.buy_button button:hover{cursor: pointer; transition: all 0.2s ease; background-color:#fc9a40; color:#030303; border-color:#fc9a40; }
.block8 div.partly_buy_button button:hover{cursor: pointer; transition: all 0.2s ease; background-color:#fc9a40; color:#030303; border-color:#030303;}
.block8 .tariffs .not_actual_price{font-size: 28px; text-decoration: line-through; margin:33px 8px;}
.block8 .tariffs .price{font-size: 38px; margin:38px 8px;}
/*.block8 .tariffs div[class*='button']{position: relative}*/
/*.block8 .first div[class*='button']{top: 187px}*/
/*.block8 .second div[class*='button']{top: 92px}*/
.block8 .message{letter-spacing: 0.3px; font-style: italic; margin-right: 33px; }
.block8 .message a{color:#030303;}
.block8 .contact button{height: 55px; width:140px; border-radius: 30px; color: #fff; font-size: 22px; font-weight: 800; transition: all 0.2s ease}
.block8 span.wa button{background-color: #0dc143; border-color:#0dc143; border-style:solid; margin: 10px 5px;}
.block8 span.wa button:hover{cursor:pointer; color:#0dc143; background-color: #fff;}
.block8 span.te button{background-color:#3390ec; border-color:#3390ec; border-style:solid; margin: 10px 5px;}
.block8 span.te button:hover{cursor:pointer; background-color:#fff; color:#3390ec;}
.block8 label.preReg{display: flex; justify-content:space-between; width: 30%; align-items: center; margin: 18px auto;}
.block8 label.preReg.agreement{ font-size:16px;justify-content:start; width:60%; margin-left:35%;}
.block8 label.preReg.agreement input[type='checkbox']{flex-shrink:0;cursor:pointer;}
.block8 label.preReg.agreement a{color:#3390ec; transition: border-bottom 1.3s ease;position: relative;}
.block8 label.preReg.agreement a:after{content: ''; position: absolute; bottom: 0; width: 0; height:1px; left: 0; background: #3390ec; transform-origin: left; transition: all 0.3s ease; opacity: 0;}
.block8 .tariffs.dysplasia .preReg{width:100%; margin:14px 15px; text-align:left;line-height:1.4;}
.block8 label.preReg.agreement a:hover:after{width: 100%; opacity: 1;}
.block8 button.preRegistration{background-color: #3390ec;border: 2px solid #3390ec;border-radius: 12px; height: 56px; width:239px; margin-top: 20px; color: #F6F6F5; font-family: "TildaSans light", sans-serif; font-size: 24px; transition: all 0.5s ease;}
.block8 button.preRegistration:hover{cursor: pointer; background-color: #fc9a40;}
.block8 button.preRegistration img{height: 33px;margin-right: 29px;vertical-align: middle;}
.block8 div.preRegModal{width: 500px;height: 218px;padding: 18px 40px;border-radius: 4px;background: #fafafa;position: fixed;top: 0; left: 0; right: 0; bottom: 0; margin: auto;display: none;opacity: 0;z-index: 2000;text-align: center;}
.block8 div.preRegModal span.preRegModal__close{width: 21px; height: 21px; position: absolute;font-size: 29px;top: -40px; right: -40px;cursor: pointer;display: block;}
.block8 div.myOverlay {z-index: 1000;position: fixed;background: rgba(0,0,0,.7);width: 100%; height: 100%;top: 0; left: 0;cursor: pointer;display: none;}
.block8 .article{margin: 0 auto 20px; width: 60%; text-align: center;}
.block8 img.tg{fill: #f6f6f6; height: 20px;}

.block9{background-color:#fff; padding: 20px 80px 150px; color:#000;}
.block9_content{margin: auto; font-family: "Tilda Sans Light",sans-serif; line-height: 1.5;}
.block9 .first{display: flex; flex-wrap: wrap; justify-content: center;}
.block9 img{height: 375px; border-radius:50%;}
.first_text div:first-child{font-weight: bold;margin-bottom: 33px;}
.block9 .first_text .text_content{text-align: left; margin-left: 60px;}
.block9 .second{text-align: left; margin-left: 60px;}
.block9 .second div.margined{margin:20px 0;}

.block10{background-color:#030303; color:#f6f6f6; padding: 20px 80px 15px;}
.block10 .block10_content{line-height: 40px; font-size: 18px;}
.block10_content img{height: 60px; margin-top: 20px}
.block10_content img:hover{transition: all 1s ease;transform: scale(1.2);}
.block10 .underline{text-decoration:underline;}



/*----------------------------------------media-------------------------------------------------------------*/
@media (max-width: 1380px) {
    .block8 label.preReg{width: 50%;}
    .block8 label.preReg.agreement{ margin-left:25%;}
}

@media (max-width: 1080px) {
    .block0 div.container{flex-direction: column}
    .block0 span{margin:0 30px; width: auto;}
    .block0 span.logo{order: -1;}
    .block0 img.logo{height: 70px;}
    .block1_content div h1{font-weight: 900; font-size: 60px;}
    .block5 .benifit_block>div{width: auto; margin:auto;}
    .block7 .content2 img{height: 250px;}
    .hide_on_phone{display: none;}
    .header2 h2{font-size: 46px;}
}

@media (max-width: 900px) {
    .block7 .content2 div.images{display: none;}
    .block8 .tariffs div[class*='button']{position: unset;}
    .block8 .tariffs>div {height: auto; padding-bottom: 25px;}
    .block8 label.preReg{width: 80%;}
    .block8 label.preReg.agreement{width: 80%; margin:auto;}
    .block5 .tariffs .text{font-size: 30px;}
    .block8 .article {width: 90%;}
    .block8 div.preRegModal{width: 350px;}
    .block8 div.preRegModal p{font-size: 18px; line-height: 1.5;}
}


@media (max-width: 600px) {
    .block1_content div h1{font-weight: 900; font-size: 48px;}
    .hide_on_phone{display: none;}
    .block0 span.logo {margin: 0}
    .block0 span {margin: 0;}
    .block1 {min-height: auto;}
    .block2 div.column div{width: 90%;}
    .block3 {min-height: auto;}
    .block4 .lesson_block{width: 90%;}
    .block4 .lesson_block img{display: none;}
    .block6 .slider_wrapper{width: 65%;}
    .block6 {min-height: auto}
    .block6 div.button {margin:0 auto 20px;}
    .block8{padding: 20px 20px;}
    .block8 .tariffs button {width: 80%;}
    .block8 div.preRegModal{width: 230px; height: 300px; padding: 12px 20px;}
    .block8 div.preRegModal p{font-size: 16px;}
    .block9 .first_text .text_content{margin-left: 10px;}
    .block9 .second{text-align: left; margin-left: 10px;}
    .header2 h2{font-size: 30px;}

}

@media (max-width: 500px) {
    .text2{font-size: 18px;}
    .header2 h2:after{padding-top: 14px; width: 130px;}
    .block0{min-height: auto;}
    .block0 img.logo{height: 45px;}
    .block1_content{width: 90%;}
    .block1_content div h1{font-weight: 900; font-size: 30px; margin: 40px 0;}
    .block1_content div.date{margin: 0 0 30px;}
    .text{font-size: 16px;}
    .text2{font-size: 18px; line-height: 1.8;}
    .header2 h2:after{width:180px;}
    .button1{width: 175px; height: 45px; font-size: 16px;}
    .block2{margin-top: -2px;}
    .block2 div.column div {text-align: left;}
    .block3_content .text {margin-bottom: 30px;}
    .block4_content ul{padding: 5px;}
    .block4{padding: 20px 0 85px;}
    .block5{padding: 20px;}
    .block5 .benifit_block img{height: 45px;}
    .block7{padding: 20px;}
    .block7 .content2{padding: 0;}
    .block8 .tariffs .text{font-size: 24px;}
    .block8 label.preReg{flex-direction: column;}
    .block8 button.preRegistration {margin-bottom: 30px; font-size: 18px; height: 42px; width: 180px; display: inline-flex; justify-content: center;align-items: center;}
    .block8 button.preRegistration img{margin-right: 14px; height: 21px; vertical-align: bottom;}
    .block8 div.preRegModal{width: 130px; height: 300px;}
    .block8 div.preRegModal p{font-size: 14px; line-height: 1.4;}

    .block9 {padding: 20px; font-size: 18px;}
    .block9 img{height: 200px;}
    .block10{padding: 20px 0;}
    .block10 .block10_content{font-size: 12px;}
}