@import url(../fonts/font.css);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline } article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 }
article,aside, figcaption,figure,footer,header,hgroup,nav,section { display: block; }

html, html a { -webkit-font-smoothing: antialiased; }

.wseditor table, .bb-editor table { margin: 0px; }

body, select, input, textarea, button {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: .9rem;
	line-height: 1.5;
	color: #1a1a1a;
	outline: none;
}
	a { 
		outline: none;
		color: #4e8cda;
		text-decoration: none;
	}
	a:hover { text-decoration: underline; }

	a img { border: 0 none; }
	a > img { vertical-align: bottom; }

h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5 {
	margin: 2em 0 .8em 0;
	line-height: 1.35em;
	font-weight: bold;
	text-rendering: optimizeLegibility;
}
h1, .h1 { font-size: 1.9em; }
h2, .h2 { font-size: 1.8em; }
h3, .h3 { font-size: 1.4em; }
h4, .h4 { font-size: 1.2em; }
h5, .h5 { font-size: 1.1em; }

.strike { text-decoration: line-through; }
.nobr { white-space: nowrap; }
.hide { display: none; }
.title_hide { left: -9999px; position: absolute; top: -9999px; overflow: hidden; width: 0; height: 0; }
.uline { text-decoration: underline; }
.strike { text-decoration: line-through; }
.justify { text-align: justify; }
.center { text-align: center; }
.left { float: left; }
.right { float: right; }
	fieldset { border: 1px solid rgba(0,0,0,0.1); padding: 15px; margin-bottom: 1.5em; }
	fieldset legend { font-weight: bold; }

	.grey { color: #999; }
	.grey a { color: inherit; }
	.grey a:hover { color: #1a1a1a; }

	.green { color: #95c00e; }

sup { vertical-align: super; font-size: smaller; } 
.over { display: inline-block; vertical-align: middle; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
a .over { cursor: pointer; }

.cover { background-position: 50% 50%; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; }

ul { padding-left: 40px; list-style: disc outside; margin-top: 1em; margin-bottom: 1em;}
ol { padding-left: 40px; list-style: decimal outside; margin-top: 1em; margin-bottom: 1em;}

.instagram-media, .twitter-tweet {display: inline-block !important;}

strong, b { font-weight: bold }
em, cite, i { font-style: italic }
caption { text-align: left }
th, td { vertical-align: middle }
small, .small { font-size: .9em; }
hr { height: 0; border: 0; border-top: 2px solid #eeeeef; -moz-box-sizing: content-box; box-sizing: content-box; margin: 20px 0; }

	.clr { clear: both }
	.clrfix:after { clear: both; content: ""; display: table; }


body { background: #fff;}


#menu {background-color: #fff; width: 100%; position: fixed; z-index: 99999; border-bottom: 1px solid #ccc;}

	.menu-tel {float: right; width: 250px; padding: 12px 0; font-size: 1.70em; font-weight: 600; text-align: right; background: url(https://chatuchit.ru/uploads/dizayn/tel-menu.webp) no-repeat; background-position: left;}

/* Добавляем черный фон для панели навигации */
.topnav {overflow: hidden; max-width: 1200px; margin: 0 auto;}

/* Стили ссылок панели навигации */
.topnav a {
  float: left;
  display: block;
  color: #333;
  text-align: center;
  padding: 18px 24px;
  text-decoration: none;
  font-size: 17px;
}

/* Класс для выделения текущей страницы */
.active {
  background-color: #f5f5f5;
  color: #333;
}

/* Скрываем ссылку, которая открывает и закрывает панель на малых экранах */
.topnav .icon {
  display: none;
}

/* Контейнер выпадающего блока — нужен для определения позиции */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Стиль кнопки для активации выпадающего блока.
 Подгоняем под панель навигации */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: #333;
  padding: 18px 24px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Стиль выпадающего блока (по умолчанию скрыт) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Стиль ссылок внутри выпадающего блока */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Темный фон при наведении для ссылок панели навигации и
 кнопки вызова выпадающего блока */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Серый фон при наведении на ссылки в выпадающем блоке */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Показываем выпадающее меню, когда пользователь
 наводит мышь на кнопку выпадающего блока */
.dropdown:hover .dropdown-content {
  display: block;
}

a.twostr {padding: 10px 0; width: 200px; line-height: 21px;}



/* Когда ширина экрана меньше 600px, спрятать все ссылки,
 кроме первой ("Главная"). Выводим ссылку, которая
 открывает/закрывает панель навигации (.icon) */
@media screen and (max-width: 780px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
a.twostr {width: 100%; padding: 18px 24px;}
}

/* Класс "responsive" добавляется к панели навигации
 при помощи JavaScript, когда пользователь нажимает на иконку.
 Этот класс оптимизирует панель навигации под маленькие экраны
 (ссылки отображаются вертикально, а не горизонтально) */
@media screen and (max-width: 780px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }

}




#content {max-width: 1200px; margin: 0 auto;}

#content-otzivy {width: 100%; background: #333;}

	.top-block {clear: both; overflow: hidden; background: #161616 url(https://chatuchit.ru/uploads/dizayn/top-block.webp) no-repeat; background-position: right; padding: 40px 50px; border-radius: 20px;}
		.top-block-title {clear: both; overflow: hidden; height: 390px;}
		.top-block-title strong {display: block; font-size: 2.6em; color: #fff; width: 420px;}
		.top-block-cont {display: block; margin-top: 45px; font-size: 1.80em; color: #fff; font-weight: 600;}
		.top-block-cont ul {list-style: none;  margin: 0; padding: 0;}
		.top-block-cont ul li {color: #fff;}
		.top-block-desc {clear: both; overflow: hidden;}
		.top-block-desc ul {list-style: none; padding: 0; margin: 0;}
		.top-block-desc ul li {float: left; width: 25%; overflow: hidden;}
		.top-block-desc-el {overflow: hidden; height: 70px; background: #fff; border-radius: 20px; margin: 5px; padding: 20px; }
		.top-block-desc p {font-size: 0.90em; font-weight: bold; color: #888; line-height: 1.3em;}
		.top-block-desc strong {display: block; font-size: 1.4em; color: #333; margin-bottom: 15px;}

		.analitik-block {clear: both; overflow: hidden; padding-top: 40px;}
			.left-analitik-block-el {width: 90%; overflow: hidden; background: #e2f4ff; border-radius: 20px; padding: 20px;}
				.left-analitik-block {float: left; width: 55%;}
				.left-analitik-block h2 {line-height: 1.3em; margin: 0;}
				.left-analitik-block p {display: block; padding: 10px 0;}
				.left-analitik-block i {color: #888;}
				.left-analitik-block b {display: block; float: left; color: #006699;}
				.left-analitik-block span {display: block; float: left; background: #f4faff; padding: 10px; margin: 0 10px; border-radius: 10px;}
				.right-analitik-block {float: right; width: 43%;}
					.right-analitik-block-el {background: #f5f5f5; padding: 30px; border-radius: 20px;}
					.right-analitik-block-el strong {display: block; margin-bottom: 30px; font-size: 1.4em;}
					.right-analitik-block-el p {display: block; margin-bottom: 63px; font-size: 0.90em;}
						.form-poloska {overflow: hidden; background: #fbfbfb; margin-bottom: 10px; border-radius: 10px; border: 1px solid #ccc; box-shadow: inset 0 0 6px #ccc;}

							.form-poloska-left {display: none;}
							.form-poloska-right {width: 100%; font-weight: 600; color: #666;}

						.form-poloska label {background: none;}
						.form-poloska input {display: inline-block; width: 100%; height: 40px; line-height: 10px; padding: 6px 15px; vertical-align: middle; border-radius: none; background: none; border: none; box-shadow: none;}
						.form-knp {clear: both; overflow: hidden;}

						.form-knp input {background: #006699; padding: 10px 30px; border-radius: 10px; color: #fff; box-shadow: none; border: none; font-weight: bold; margin-top: 30px;}
						.form-knp input:hover {background: #333333; cursor: pointer;}


				
		.icon-block {clear: both; overflow: hidden; padding-top: 40px;}
		.icon-block h2 {line-height: 1em; margin: 0 0 20px 0; font-size: 3em;}
			.icon-block-el {float: left; width: 50%; padding: 20px 0;}
			.icon-block-left {float: left; max-width: 80px; width: 30%;}
			.icon-block-right {float: left; width: 60%; padding-left: 10px;}
			.icon-block-right span {display: block; font-size: 1.4em; color: #333333; font-weight: 600;}
			.icon-block-right p {font-size: 1.1em;}


			.podoydet-block {clear: both; overflow: hidden; padding-top: 40px; color: #f5f5f5;}
			.podoydet-block h2 {line-height: 1em; margin: 0 0 40px 0; font-size: 3em; color: #000;}
			.podoydet-block strong {display: block; font-size: 2em;}
			.podoydet-block p {display: block; padding: 15px 0 25px 0;}
			.spis-podoydet-block {clear: both; overflow: hidden; width: 60%; font-size: 1.2em;}
			.podoydet-block span {display: block; float: left; padding: 5px 10px; border: 2px solid #fff; border-radius: 20px; margin: 5px 10px 10px 0;}
			.podoydet-block-el-1 {background: #1f222e url(https://chatuchit.ru/uploads/dizayn/deti.webp) no-repeat; background-position: right; padding: 25px 30px 30px 30px; margin: 20px 0; border-radius: 20px;}

			.podoydet-block-el-2 {background: #1f222e url(https://chatuchit.ru/uploads/dizayn/vzroslye.webp) no-repeat; background-position: right; padding: 25px 30px 30px 30px; margin: 20px 0; border-radius: 20px;}

			.url-podoydet {clear: both; overflow: hidden;}
			.url-podoydet button {display: block; width: 210px; margin-top: 20px; color: #333; background: #fff; border-radius: 20px; padding: 11px 12px; text-align: center; font-weight: 700;}
			.url-podoydet button:hover {background: #e2f4ff; color: #333; text-decoration: none;}


			.text1-block {clear: both; overflow: hidden; padding-top: 40px; font-size: 1.1em;}
			.text1-block p {font-weight: 600;  font-size: 1.2em;}
			.text1-block img {margin: -37px 25px 0 0;}
			.text1-block ol {clear: both;}
			.text1-block ol li {padding: 10px 0;}


	.akkardeon-block {clear: both; overflow: hidden; padding-top: 20px; }
	.akkardeon-block h2 {line-height: 1em; margin: 0 0 20px 0; font-size: 3em;}




    .accordion__item {
      margin-bottom: 0.5rem;
      border-radius: 0.25rem;
      box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 15%);
    }

    .accordion__header {font-size: 1.1em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 1rem;
      color: #333;
      font-weight: 500;
      background-color: #eee;
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
      cursor: pointer;
      transition: background-color 0.2s ease-out;
    }

    .accordion__header::after {
      flex-shrink: 0;
      width: 1.25rem;
      height: 1.25rem;
      margin-left: auto;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-size: 1.25rem;
      content: "";
      transition: transform 0.2s ease-out;
    }

    .accordion__item_show .accordion__header::after,
    .accordion__item_slidedown .accordion__header::after {
      transform: rotate(-180deg);
    }

    .accordion__header:hover {
      background-color: #ccc;
    }

    .accordion__item:not(.accordion__item_show) .accordion__header {
      border-bottom-right-radius: 0.25rem;
      border-bottom-left-radius: 0.25rem;
    }

    .accordion__content {font-size: 1.1em;
      padding: 0.75rem 1rem;
      background: #fff;
      border-bottom-right-radius: 0.25rem;
      border-bottom-left-radius: 0.25rem;
    }

    .accordion__item:not(.accordion__item_show) .accordion__body {
      display: none;
    }




.otzivy {clear: both; overflow: hidden; padding-top: 40px; max-width: 1200px; margin: 40px auto 0 auto;}
.otzivy h2 {line-height: 1em; margin: 0 0 30px 0; font-size: 3em; color: #fff; text-align: center;}
	.otzivy-block {float: left; width: 25%;}
		.otzivy-com {background: #fff; padding: 10px; border-radius: 10px; margin: 15px 10px;}
			.otzivy-com-top {clear: both; overflow: hidden;}
				.otzivy-com-img {float: left; max-width: 50px; width: 25%;}
				.otzivy-com-img img {max-width: 50px;}
				.otzivy-com-cont {float: left; width: 70%; padding-left: 5px;}
				.otzivy-com-cont span {font-weight: 600;}
				.otzivy-com-cont p {color: #ccc; font-size: 0.90em;}
			.otzivy-com-bottom {clear: both; overflow: hidden; padding: 10px 0 10px 0;}
			.otzivy-com-bottom p {color: #333;}

			.rating-com {background: url(https://chatuchit.ru/uploads/dizayn/rat.webp) no-repeat; padding-left: 20px; line-height: 1em;}
			.rating-com span {color: #ccc;}



		.kyrsy {clear: both; overflow: hidden; margin-top: 40px;}
			.block-razmet {float: left; width: 33.33%;}
				.block-cvet-1 {margin: 10px; padding: 20px; border-radius: 20px; background: #330066;}
				.block-cvet-2 {margin: 10px; padding: 20px; border-radius: 20px; background: #cc9900;}
				.block-cvet-3 {margin: 10px; padding: 20px; border-radius: 20px; background: #333333;}

				.kyrsy-top {border-radius: 10px; background: #fff; opacity: .3; padding: 5px; color: #000; width: 70px; text-align: center; margin-bottom: 20px;}
				.kyrsy-title {font-size: 2em; color: #fff; line-height: 1em; font-weight: 600; margin-bottom: 40px;}
				.kyrsy-price {font-size: 2em; color: #fff; font-weight: 600;}
				.kyrsy-price strike {display: block; font-size: 0.80em; opacity: .3; font-weight: 600;}
				.kyrsy-price p {font-size: 0.60em; display: block;}
				.kyrsy-content {display: block; color: #fff;}
				.kyrsy-content ul {margin: 30px 0; padding: 0; list-style: none;}
				.kyrsy-content ul li {clear: both; overflow: hidden; padding: 10px 5px; border-bottom: 1px solid #fff;}
				.kyrsy-content ul li span {float: right; font-weight: 600;}
				.kyrsy-content span button {display: block; padding: 5px; border-radius: 10px; background: #f5f5f5; margin: 0 auto; text-align: center; color: #333333; width: 120px; font-weight: 600; border: none;}
				.kyrsy-content span button:hover {background: #ffffff; color: #000000; text-decoration: none;}

.overlay {
  position: fixed;
  z-index: 5;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6); /* затемнение фона */
  display: none;
}
.overlay.active {
  display: block;
}
.overlay .flex-popap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay .flex-popap .popap {
  position: relative;
  /* цвет фона всплывающего блока */
  padding: 20px;
  margin: 0 10px;
  max-width: 450px;
  overflow: auto;
}
.popap span {display: block;
  position: absolute;
  top: 25px;
  right: 35px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
	color: #999;
}

	.text-footer {font-size: 1.10em; padding: 30px 0;}
	.text-footer p {text-indent: 40px;}

	.footer {clear: both; overflow: hidden; border-top: 2px solid #f5f5f5; margin-top: 30px;}
	.top-footer {clear: both; overflow: hidden; padding: 30px 0;}
	.block-footer-1 {float: left; width: 25%;}
	.block-footer-2 {float: left; width: 50%; padding-top: 15px;}
	.block-footer-3 {float: left; width: 25%;}
	.block-footer-2 p {text-align: center; color: #ccc;}
	.block-footer-3 span {display: block; font-size: 1.80em; font-weight: 600; text-align: right; line-height: 1em; padding: 5px 0; margin: 0; color: #666;}
	.block-footer-4 {display: none;}
	.block-footer-4 p {text-align: left; color: #ccc;}


@media (max-width: 1200px) {
		#content {padding-left: 5px; padding-right: 5px;}
}




@media (max-width: 1180px) {
		.top-block-cont {width: 55%;}
}



@media (max-width: 1040px) {
	.menu-tel {display: none;}

	.kyrsy-title {font-size: 1.80em;}
}


@media (max-width: 990px) {
	.top-block-title {height: 340px;}
		.top-block {font-size: 0.90em;}
		.top-block-cont {font-size: 1.60em;}


			.podoydet-block-el-1 {background-position: top; padding-top: 330px;}
			.podoydet-block-el-2 {background-position: top; padding-top: 330px;}
			.spis-podoydet-block {width: 100%;}
}

@media (max-width: 910px) {
	.menu-tel {display: none;}

	.top-block {background: #161616 url(https://chatuchit.ru/uploads/dizayn/top-block.webp) no-repeat; background-position: top;}
		.top-block-title {margin-top: 370px; height: auto;}
		.top-block-title strong {display: block; font-size: 2.6em; color: #fff; width: 100%;}
		.top-block-cont {width: 100%; margin: 20px 0;}

		.top-block-desc ul li {width: 50%; font-size: 1.1em;}

		.otzivy-block  {width: 50%;}


			.block-razmet {float: none; margin: 30px auto; width:100%; max-width: 550px;}

	.block-footer-1 {float: none; width: 100%;}
	.block-footer-2 {display: none;}
	.block-footer-3 {float: none; width: 100%; padding-top: 15px;}
	.block-footer-3 span {text-align: left; font-size: 1.40em;}
	.block-footer-4 {display: block; padding: 15px 0;}

	.kyrsy-title {font-size: 2em;}

}

@media (max-width: 680px) {

				.left-analitik-block {float: none; width: 100%;}
					.left-analitik-block-el {width: auto;}
				.right-analitik-block {float: none; width: 100%; margin-top: 40px;}

.podoydet-block-el-1 {background: #1f222e url(https://chatuchit.ru/uploads/dizayn/deti.webp) no-repeat; background-position: top; padding: 325px 30px 30px 30px; margin: 20px 0; border-radius: 20px;}
.podoydet-block-el-2 {background: #1f222e url(https://chatuchit.ru/uploads/dizayn/vzroslye.webp) no-repeat; background-position: top; padding: 325px 30px 30px 30px; margin: 20px 0; border-radius: 20px;}


		.otzivy-block  {width: 100%; float: none;}
			.otzivy-com {margin: 15px 30px;}
}


@media (max-width: 540px) {

		.top-block-desc ul li {clear: both; overflow: hidden; width: 100%; margin: 0 auto;}
		.top-block-desc {padding: 0;}

		.icon-block-el {float: none; width: 100%; clear: both; overflow: hidden;}
			.icon-block-right {width: 70%;}


}

@media (max-width: 480px) {
			.otzivy-com {margin: 15px 10px;}
}