html {
  scroll-behavior: smooth;
}

body {
      background: rgba(19, 19,19);
      max-width: 100%;
      overflow-x: hidden; !important
}





@media only screen and (min-width: 992px) {
  .desktop_hide {
    display: none;
  }
}


.desktop_warning {  display: grid;
  grid-template-columns: 20% 1fr 20%;
  grid-template-rows: 10% 1fr 1fr 1fr 20%;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  height: 100vh;
  text-align: center;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . ."
    ". desktop_warning_text_1 ."
    ". desktop_warning_lottie ."
    ". desktop_warning_text_2 ."
    ". . .";
}

.desktop_warning_text_1 { grid-area: desktop_warning_text_1; }

.desktop_warning_lottie { grid-area: desktop_warning_lottie; text-align: center;}

.desktop_warning_text_2 { grid-area: desktop_warning_text_2; }



@media only screen and (max-width: 768px) {
  .desktop_warning {
    display: none;
  }
}

/*-------------------------------------------------------------------------------
  Хэдер
-------------------------------------------------------------------------------*/
.logo img {max-height: 100%;}


/*-------------------------------------------------------------------------------
  Начало
-------------------------------------------------------------------------------*/
.welcome {
  padding-top: 40px;
   display: grid;
  grid-template-columns: 5% 20% 1fr 20% 5%;
  grid-template-rows: max-content max-content max-content;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". welcome_lottie_1 welcome_header_1 welcome_lottie_2 ."
    ". welcome_header_2 welcome_header_2 welcome_header_2 ."
    ". welcome_text welcome_text welcome_text .";
}

.welcome h1 {
  text-align: center;
}

.welcome h2 {
  text-align: center;
}

.welcome p {
  font-size: 14px;
  color: #e6e6e6;
}

.welcome_lottie_1 {
    transform: rotate(-15deg);
    margin-left: 40px;
}

.welcome_lottie_2 {
    transform: rotate(5deg);
    margin-right: 60px;
}

.welcome_lottie_1 { grid-area: welcome_lottie_1; }

.welcome_lottie_2 { grid-area: welcome_lottie_2; }

.welcome_header_1 { grid-area: welcome_header_1; }

.welcome_header_2 { grid-area: welcome_header_2; }

.welcome_text { grid-area: welcome_text; padding-top: 20px;}



/*-------------------------------------------------------------------------------
  Кнопка
-------------------------------------------------------------------------------*/

button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

/* CSS talk bubble */
.talk-bubble {
	margin: 40px;
  display: inline-block;
  position: relative;
	height: auto;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  padding: 10px 5px 10px 10px;
  box-shadow:  1px 1px 3px rgba(217, 217, 217, 0.3),
              -1px -1px 3px #ffffff;
}

.talktext {  display: grid;
  grid-template-columns: min-content max-content;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "talktext_lottie talktext_text";
  width: 80vw;
  height: 100%;
}

.talktext_lottie { grid-area: talktext_lottie; }

.talktext_text { grid-area: talktext_text; padding-left: 10px; padding-right: 10px;}

.talktext_text {
  width: 80%;
}

.talktext_lottie { grid-area: talktext_lottie; }

.talktext_text { grid-area: talktext_text; }



/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: auto;
	right: 30px;
	bottom: -20px;
	border: 10px solid;
	border-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) transparent transparent;
}


/*-------------------------------------------------------------------------------
  После превой кнопки
-------------------------------------------------------------------------------*/
#step_2 {
  display: none;
}

#step_2 {
  scroll-margin-top: 100px;
}
/*-------------------------------------------------------------------------------
  Карточка ассистент
-------------------------------------------------------------------------------*/
.right_implant_card {  display: grid;
  grid-template-columns: 5% 1fr 1fr 15% 15% 5%;
  grid-template-rows: 10px 25px 100px 10px;
  gap: 0px 0px;
  grid-auto-flow: row;
  padding-top: 30px;
  padding-bottom: 20px;
}

.right_implant_card_img { grid-area: 1 / 4 / 4 / 6; z-index: 3;}

.right_implant_card_bg { grid-area: 3 / 2 / 4 / 5; }

.right_implant_card_header { grid-area: 2 / 2 / 3 / 4; }

.right_implant_card_text { grid-area: 3 / 2 / 4 / 4; z-index: 3;  padding-top: 10px;}

.right_implant_card_text p {
  font-size: 12px;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
}

.right_implant_card_text h3 {
  text-align: right;
}

.right_implant_card_header h2 {
  text-align: right;
}

.right_implant_card_bg {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  padding: 30px 30px 30px 30px;
  z-index: 1;
}

.right_implant_card_img img {
  max-width: 100%;
}

/*-------------------------------------------------------------------------------
  Карточка Установка
-------------------------------------------------------------------------------*/

.implant_card {  display: grid;
  grid-template-columns: 5% 15% 15% 1fr 1fr 5%;
  grid-template-rows: 10px 25px 100px 10px;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
}

.implant_card_bg { grid-area: 3 / 3 / 4 / 6; }

.implant_card_img { grid-area: 1 / 2 / 5 / 4; z-index: 3;}

.implant_card_header { grid-area: 2 / 4 / 3 / 6;   margin-left: -7%; }

.implant_card_text { grid-area: 3 / 4 / 4 / 6; z-index: 3;   padding-top: 10px;}


.implant_card h2 {
  color: white;

}

.implant_card p {
  font-size: 12px;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
}


.implant_card_bg {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  padding: 30px 30px 30px 30px;
  z-index: 1;
}

.implant_card_img img {
  max-width: 100%;
}

#ustnovka_bg img {
  filter: drop-shadow(5px 5px 5px #f25645c8);
}

#glove_bg img {
  filter: drop-shadow(5px 5px 5px #98c9e9ff);
}

#materials_bg img {
  filter: drop-shadow(5px 5px 5px #c6c2c3d1);
}


/*-------------------------------------------------------------------------------
  Наёбка
-------------------------------------------------------------------------------*/
.naebka_text p {
  padding-top: 40px;
}

.naebka_text p {
  padding-top: 40px;
  padding-left: 5%;
  padding-right: 5%;
    font-size: 18px;
  color: white;
}

.naebka {  display: grid;
  padding-top: 20px;
  grid-template-columns: 5% 25% 40% 25% 5%;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . naebka_lottie . ."
    ". naebka_left_price naebka_lottie naebka_right_price ."
    ". naebka_left_price naebka_lottie_text_2 naebka_right_price .";
}

.naebka_lottie { grid-area: naebka_lottie; }

.naebka_lottie_text_2 { grid-area: naebka_lottie_text_2; }

.naebka_left_price { grid-area: naebka_left_price; }

.naebka_right_price { grid-area: naebka_right_price; }


.naebka h2 {
  text-align: center;
  font-size: 14px;
}

.naebka h3 {
  text-align: center;
  font-size: 18px;
}

.naebka p {
  font-size: 12px;
  color: white;
}






/*-------------------------------------------------------------------------------
  После второй кнопки
-------------------------------------------------------------------------------*/
#step_3 {
  display: none;
}

#step_3 {
  scroll-margin-top: 100px;
}

/*-------------------------------------------------------------------------------
  Честная стоимость
-------------------------------------------------------------------------------*/
.fair_price_header p {
  padding-left: 5%;
  padding-right: 5%;
  font-size: 18px;
  color: white;
  padding-top: 10px;
}


.black-lives-matter {
  font-family: CeraRoundPro-Black;
  text-align: center;
  padding-top: 20px;
  font-size: 15vw;
  margin: 0;
  background: url(sky.jpg);
  background-size: 40%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  color: rgba(0,0,0,0.08);
  animation: zoomout 10s ease 500ms forwards;
}

@keyframes zoomout {
  from {
    background-size: 40%;
  }
  to {
    background-size: 10%;
  }
}

.fair_price_models {
  padding-top: 30px;
  display: grid;
  grid-template-columns: 5% 40% 10% 40% 5%;
  grid-template-rows: 1fr 20px max-content;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  text-align: center;
}

.fair_price_implant { grid-area: 1 / 2 / 3 / 3; }

.fair_price_koronka { grid-area: 1 / 4 / 3 / 5; }

.fair_price_text_1 { grid-area: 2 / 2 / 4 / 3; }

.fair_price_text_2 { grid-area: 2 / 4 / 4 / 5; }

.fair_price_plus { grid-area: 3 / 3 / 4 / 4; }

.fair_price_models h3 {
  font-size: 32px;
}

.fair_price_models h2 {
  color: white;
  font-family: CeraRoundPro-Bold;
  font-size: 18px;
  line-height: 120%;
}

.fair_price_models img {
  max-width: 100%;
  transform: rotate(15deg);
  z-index: 1;
  margin: auto;
}

.fair_price_implant img {
  filter: drop-shadow(5px 5px 5px #cfcfcf99);
}

.fair_price_koronka img {
  filter: drop-shadow(5px 5px 5px #faf8e8b1);
}

.fair_price_text_1 {
  z-index: 5;
}

.fair_price_text_2 {
  z-index: 5;
}

.fair_price_plus h2 {
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  text-align: center;
  font-size: 38px;
  font-family: CeraRoundPro-Black;
}

.fair_price_text p {
  padding-top: 20px;
  padding-left: 5%;
  padding-right: 5%;
  font-size: 18px;
  color: white;
}
/*-------------------------------------------------------------------------------
  Слайдер налоговый вычет
-------------------------------------------------------------------------------*/

.nalog_text p {
  padding-top: 20px;
  padding-left: 5%;
  padding-right: 5%;
  font-size: 18px;
  color: white;
}

.slidecontainer {
  width: 90%;
  padding-left: 5%;
  padding-top: 30px;
  text-align: center;
}

.slidecontainer h3 {
  color: white;
  background: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-family: CeraRoundPro-Medium;
    padding-bottom: 30px;
}

#demo, #demo1, #price_end {
  background: -webkit-linear-gradient(315deg, #ffbc00, #ff0058);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: CeraRoundPro-Black;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 30px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: opacity .2s;
  box-shadow:  2px 2px 7px #d9d9d9,
              -2px -2px 7px #ffffff;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 50px;
  border: 0;
  background: url('plan.png');
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 50px;
  height: 50px;
  border: 0;
  background: url('plan.png');
  cursor: pointer;
}


/*-------------------------------------------------------------------------------
  После второй кнопки
-------------------------------------------------------------------------------*/
#step_4 {
  display: none;
}

#step_4 {
  scroll-margin-top: 100px;
}

#nalog_button {
  margin-top: -30px;
}

.blocks_fall {
  padding-top: 20px;
  padding-bottom: 20px;
  display: grid;
  grid-template-columns: 5% 1fr 20px 1fr 5%;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 10px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". block-1 . block-2 ."
    ". block-3 . block-4 ."
    ". block-5 . block-6 ."
    ". block-7 . block-8 .";
}

.block-2 { grid-area: block-2; }

.block-1 { grid-area: block-1; }

.block-3 { grid-area: block-3; }

.block-4 { grid-area: block-4; }

.block-5 { grid-area: block-5; }

.block-6 { grid-area: block-6; }

.block-7 { grid-area: block-7; }

.block-8 { grid-area: block-8; }



.block {
  display: table;
  border-radius: 5px;
  height: 50px;
  width: 150px;
  text-align: center;

}

.block p {
  display: table-cell;
  vertical-align: middle;
}

.white_block {
    background: white;
    transform: rotate(2deg);
}

.green_block {
    background: linear-gradient(120deg, #1D976C, #2c3e50);
    transform: rotate(-4deg);
}

.orange_block {
    background: linear-gradient(#e91e63, #ffc107);
    transform: rotate(-3deg);
}

.blue_block {
    background: radial-gradient(#006db3, #29b6f6);
    transform: rotate(-3deg);
}

.pink_block {
    background: linear-gradient(45deg, #FC466B, #3F5EFB);
    transform: rotate(3deg);
}

.ocean_block {
  background: #aa4b6b;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    transform: rotate(3deg);
}


.violet_block {
  background: #654ea3;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #eaafc8, #654ea3);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #eaafc8, #654ea3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    transform: rotate(-4deg);
}


.white_block p {
  color: black;
}




/*-------------------------------------------------------------------------------
  После четвертой кнопки
-------------------------------------------------------------------------------*/
#step_5 {
  display: none;
}

#step_5 {
  scroll-margin-top: 100px;
}


#step_6 {
  display: none;
}

#step_6 {
  scroll-margin-top: 100px;
}


.prodoctorov {
  margin: auto;
  text-align: center;
  justify-content: center;
  width: 70%;
  background: white;
  height: 70px;
  box-shadow:  10px 10px 30px #d9d9d9,
             -10px -10px 30px #ffffff;
}


.prodoctorov {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "prodoctorov_logo"
    "prodoctorov_lottie";
}

.prodoctorov_logo { grid-area: prodoctorov_logo; }

.prodoctorov_lottie { grid-area: prodoctorov_lottie;   display: flex;
  justify-content: center;}


.prodoctorov img {
  width: 90%;
  padding-top: 10px;
}


.nkclinic {
  margin: auto;
  text-align: center;
  justify-content: center;
  width: 70%;
  background: white;
  height: 70px;
  box-shadow:  10px 10px 30px #d9d9d9,
             -10px -10px 30px #ffffff;
}