@charset "utf-8"; 

@font-face {font-family: Roboto; font-weight: normal; font-style: normal; font-display: swap;
src: local(Roboto), local(Roboto-Regular), url(/css/fonts/Roboto.woff2) format(woff2);}

@font-face {font-family: "Roboto Bold"; font-weight: 700; font-style: normal; font-display: swap;
src: local(Roboto Bold), local(Roboto-Bold), url(/css/fonts/Robotobold.woff2) format(woff2);}

@font-face {font-family: "Roboto Italic"; font-weight: normal; font-style: italic; font-display: swap; 
src: local(Roboto Italic), local(Roboto-Italic), url(/css/fonts/Robotoitalic.woff2) format(woff2);}

@font-face {font-family: "Bebas Neue"; font-weight: 400; font-style: normal; font-display: swap; 
 src: local(Bebas Neue Regular), local(BebasNeueRegular), url(/css/fonts/bebasneueregular.woff2) format(woff2);}

@font-face {font-family: "Intro"; font-weight: 400; font-style: normal; font-display: swap; 
src: local(Intro), url(/css/fonts/intro.woff2) format(woff2);}



html, body, main, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, a, address, em, img, strong, sub, sup, i, dl, dt, dd, ol, ul,li, fieldset, form, label, legend, table, caption, tbody, tr, th, td, article, aside, canvas, figure, figcaption, footer, header, menu, nav, output, section, audio, video, form, label, input, textarea {margin: 0; padding: 0; border: 0; outline: 0; background: transparent; -webkit-font-smoothing:subpixel-antialiased; text-rendering: optimizeLegibility; -webkit-overflow-scrolling: touch; vertical-align: baseline; font-family: Roboto, Calibri, "Segoe UI", sans-serif; font-style: normal; font-weight:normal; line-height:1.4;} 

:root {font-size: 16px; }

*, *::after, *::before {box-sizing:border-box;}
*:focus, :focus:not(:focus-visible) {outline: none;}

img {max-width: 100%; height: auto; display:block; object-fit: cover;}


a {color:#036; }
a, *:visited, *:link {text-decoration: none; outline:none; -webkit-text-decoration-skip: ink; text-decoration-skip: ink;} 
a, nav a, button {transition: 0.9s;}
ul, ol, nav summary { list-style: none;} 
button {appearance: none; border: 0; outline: 0;}


::-webkit-scrollbar { background: #788; scrollbar-gutter: stable; }

.none {display:none;}



/* HTML, BODY, HEADER, MAIN, NAV, ARTICLE, ASIDE, SECTION, FOOTER ▼▼▼▼▼▼▼▼▼▼▼ */

header, nav, main, footer, section, article {display: block; position:relative; } 

html {width:100%; height:100%; overflow-x:hidden; scrollbar-color: #788 Scrollbar; scroll-behavior: smooth; scrollbar-gutter: stable;}

body {width:100%; height:100%; background: url(/css/bg_01.webp) 0 0 fixed, #eae7e2; vertical-align:top; margin:0 auto; display: grid; grid-template-columns: 1fr minmax(240px, 1460px) 1fr; grid-template-rows: 170px 1fr 200px;}

header {grid-column: 1 / span 3; z-index:3; }
main {grid-column: 2 / 3; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); z-index:2; }
footer {grid-column: 1 / span 3; z-index:1; overflow-x:hidden;}


/* HEADER ▼▼▼▼▼▼▼▼▼▼▼ */

header {background:url(/css/bg.webp), #f2f2f2; border-bottom:1px solid #888; box-shadow: 0 0 5px #0004;}

.logo {width:400px; height:75px; background:url(/css/logo.svg) no-repeat center / contain; display:block; position:absolute; top:30px; left: 50%; 
transform: translate(-50%, 0); z-index: 5; filter: drop-shadow(2px 2px 4px #0004); cursor:pointer; } 
body[id="/"] .logo {pointer-events: none; cursor:auto; }


header a[href*="tel"], header a[href*="wa.me"] {width: 28px; height: 28px; display:block; position: absolute; top:60px;}

header a[href*="tel"] {background:url(/css/icon_Phone.svg) 0 0 / cover no-repeat; right:50px;}
header a[href*="wa.me"] {background:url(/css/icon_Whatsapp.svg) 0 0 / cover no-repeat; right:90px;}

header a[href*="wa.me"]:hover::before, header a[href*="tel"]:hover::before {width: 100px; height: 28px; font-size:90%; color:#fff; text-align:center; line-height:28px; content: attr(aria-label); display:block; background:#222; border-radius:4px; z-index:15; cursor: not-allowed; pointer-events: none;}

header a[href*="tel"]:hover::before { position:absolute; top:40px; left:-40px; }
header a[href*="wa.me"]:hover::before { position:absolute; top:40px; left:-40px; }


/* NAV ▼▼▼▼▼▼▼▼▼▼▼ */

.Меню {display:none; opacity: 0;}

nav {width:min(100%, 1400px); height:40px; display: grid; gap: 2px; grid-template-columns: 17% repeat(5, auto); position:relative; margin:130px auto 0; z-index: 5; }

nav details {width:100%; display:block; position:relative;}

nav a:not(details > div a), nav summary {width:100%; font-size:clamp(0.75rem, 0.6rem + 0.4vw, 0.8rem); line-height:40px; text-align:center; color:#222; letter-spacing:2px; text-transform:uppercase; display: inline-block; cursor:pointer; white-space:nowrap; position:relative;}
nav a:hover, nav summary:hover {color:#088;}

nav summary:before { content: "▼"; font-size: 90%; color:#d34; margin: -5px 5px 0 0;}
nav summary:hover:before, details[open] > summary:before {content: "▼"; color:#d34;}

nav details > div {width:200%; height:auto; background:url(/css/bg.webp), #f2f2f2; display:block; padding: 20px; position:absolute; top:39px; left:0; 
border: solid #888; border-width: 0 1px 1px 1px; border-radius:0 0 8px 8px; box-shadow: 0 2px 4px #0004;}

nav details > div b {font-size:120%; color:#234; margin:20px 0 5px 10px; display:block;}

nav details > div a {font-size:16px; line-height:20px; text-align:left; color:#344; display:block; padding:5px 10px; white-space:wrap; }
nav details > div a:not(:last-child) {border-bottom:1px solid #aaa; }
nav details > div a:hover {color:#d34; background:#aaa2;}

.active {font-family:"Roboto Bold", sans-serif; color:#e25; cursor: not-allowed; pointer-events: none;}

body[id*="PROGRAMS"] summary, details[open] > summary {font-family:"Roboto Bold", sans-serif; color:#e25;}


/* MAIN ▼▼▼▼▼▼▼▼▼▼▼ */

main {background:#fff; padding:0 60px 30px; }


/* FOOTER▼▼▼▼▼▼▼▼▼▼▼ */

footer {display:grid; box-shadow:inset 0 8px 12px 0 #0004; background:url(/css/logo_td.svg) no-repeat center 35px / 100px 100px, #233; }

.GoTop {z-index: 9999; width: 40px; height: 40px; position: fixed; bottom: 80px; right: 20px; cursor: pointer; border-radius:50%; transform: scale(0); transition: all .7s ease-in-out; background-position: center; background-repeat: no-repeat; background-size: 50%; background-color: #088; background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5MS44NTggNDkxLjg1OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDkxLjg1OCA0OTEuODU4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQ5MS44NTgsNDQyLjQ2MWMwLDEzLjkzMS0xMS4yOTMsMjUuMjI0LTI1LjIyNCwyNS4yMjRMMjQ1LjkzLDM3My4wOTdMMjUuMjI0LDQ2Ny42ODYgICAgQzExLjI5Miw0NjcuNjg2LDAsNDU2LjM5MiwwLDQ0Mi40NjFMMjI3LjAxMSwzMi41OGMwLDAsMTguOTE4LTE4LjkxOCwzNy44MzQsMEMyODMuNzY0LDUxLjQ5OSw0OTEuODU4LDQ0Mi40NjEsNDkxLjg1OCw0NDIuNDYxeiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);}
.GoTop:hover {background-color: #e25; transform: scale(1.2)!important;}

a[href*="politics"] {color:#bbb; text-transform:uppercase; margin:auto auto 20px;}
a[href*="politics"]:hover {color:#8bb;}


/* ТЕКСT ▼▼▼▼▼▼▼▼▼▼▼ */

h1, h2, h3, h4 {line-height:1.2; hyphens: none; text-align:left; white-space:pre-line; display:block; position:relative; text-wrap: balance; z-index:2;}

h1 {font-family: "Bebas Neue", sans-serif; font-size: clamp(2.4rem, 1rem + 2vw, 3.5rem); color:#035; text-transform:uppercase; padding:0 0 0 40px; margin: 0 0 24px; }
h1::before {width: 30px; height:100%; content: ""; display:block; background:#f80; position:absolute; left:0; bottom:0;
clip-path: polygon(60% 0%, 100% 0, 40% 100%, 0% 100%);}

h1 b {font: 70%/1.3 Intro, sans-serif; display:block; margin:15px 0 0;}

h2 {font-family: Intro, sans-serif; font-size:clamp(1.8rem, 2vw + 1rem, 2.5rem); color:#354766; margin: 60px 0 30px; text-shadow:4px 4px 6px #6664;}

h3 {font-family: Roboto, sans-serif; font-size:clamp(1.8rem, 2vw + 1rem, 2.2rem); color:#d44; text-align:center; padding:5px 0; margin: 30px auto 10px; display:block; border-bottom:1px solid #33414e;}

h4 {font-family: "Bebas Neue", sans-serif; font-size: clamp(2rem, 2vw + 1.4rem, 2.4rem); color:#a08d80; text-transform:uppercase; text-align:center;padding:0 20px; margin: 20px auto 10px; display:block; }

h5 {font:1.4em/1.3 "Roboto Bold", sans-serif; text-align:left; margin:30px 0 15px;}

p:not([class]) {color:#020202; text-align:justify; margin:25px 0 5px; }
p:not([class]) {white-space:pre-line; text-wrap: pretty; hyphens: auto; hyphenate-limit-chars: 6 3 3; hyphenate-limit-lines: 6; hyphenate-limit-last: always;}

p b {font-size: 1.2em; font-weight:bold; color:#035;}
p strong:not([class])  {font:1.3em/1.3 "Roboto Bold", sans-serif; text-align:left; color:#202020; margin:30px 0 15px;}
p em {font-family: "Roboto Italic", sans-serif; font-weight:bold; font-style:italic; color:#035;}


p b b, p a b, li b b {white-space:nowrap; text-wrap:nowrap; hyphens: none;}

ul:not([class]) {list-style-position:outside; }
ul:not([class]) li {line-height:1.4; text-align:justify; white-space:pre-line; color:#234; padding:0 0 0 10px; text-wrap: pretty;}
ul:not([class]) li::marker {content: '●'; font-size:140%; color:#345; }

ul:not([class]) ul { margin: -10px 30px 0 10px;}
ul:not([class]) ul li {color:#234; position:relative;}
ul:not([class]) ul li::marker {content: '■'; font-size:80%; color:#e25;} 



/* INDEX ▼▼▼▼▼▼▼▼▼▼▼ */

.Section_01, .Section_02 {display: flex; flex-flow: column nowrap; justify-content: center; }
.Section_01 {padding:20px 10px 40px; background:#f6f3ee; border-radius:12px 12px 0 0; z-index:2; }
.Section_02 {padding:20px 10px; background:#d44; border-radius:0 0 12px 12px; z-index:1;}
.Section_01 { clip-path: polygon(0 0,100% 0,100% calc(100% - 50px),50% 100%,0 calc(100% - 50px));}
.Section_02 { clip-path: polygon(0 0,50% 50px,100% 0,100% 100%,0 100%); margin-top: -40px;}

.Заголовок {font-family: "Bebas Neue", sans-serif; font-size: clamp(2rem, 2vw + 1.4rem, 2.4rem); color:#a08d80; text-transform:uppercase; text-align:center;padding:0 20px; margin: 20px auto 10px; display:block; }

.Link {width:220px; font: normal 1.5rem/1.1 "Bebas Neue", sans-serif; text-align:center; letter-spacing: 1px; color: #fff;background: #d44; padding: 12px 0; margin: 20px auto; border-radius:4px; transition: all 300ms ease-out;}
.Link :hover { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #bbb; background: #345;}
.Link :active {transform: scale(1.1);}

.Врезка_01 {width:100%; height:auto; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-gap: 20px; margin:60px auto 20px; 
justify-items: stretch;}

.Врезка_01 li { font: normal clamp(0.8rem, 1vw + 1rem, 1.25rem)/1.5 Roboto, sans-serif; text-align:center; text-transform:uppercase; color:#fff; hyphens: none; 
 padding:10px; display:flex; align-items: center; justify-content: center; position:relative;}



/* ПРОГРАММЫ ▼▼▼▼▼▼▼▼▼▼▼ */

.Программы {width:100%; margin:30px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); grid-gap: 20px; overflow:hidden;}

.Программы a {width: 100%; font-size: 16px; line-height:1.4; color: #444; text-align:justify; padding:0 20px 20px; cursor:pointer; overflow: hidden; 
background:#fff; border:1px solid #ddd; border-radius:6px; box-shadow: 0 0 10px #0002;
display: grid; gap: 10px 0; grid-template-columns: 1fr; grid-template-rows: subgrid; grid-row: span 3; grid-template-areas: "image" "title" "description";}

.Программы a:hover {border:1px solid #035; box-shadow: none; filter: brightness(95%);}

.Программы a i {width:100%; display:block; aspect-ratio: 2/1; }

.Программы a b {font: normal 1.4rem/1.1 "Roboto Bold", sans-serif; text-align:left; color:#035; display:block; margin:25px 0 0; text-wrap: balance; hyphens: none;} 
.Программы a:hover b {color:#af505f;}


.Программы a {background-size: contain; background-position:center top; background-repeat:no-repeat; }

.Программы a[href*="Infertility"] {background-image:url(/img/Programs/Infertility.webp); }
.Программы a[href*="Communication"] {background-image:url(/img/Programs/Communication.webp);}
.Программы a[href*="Marriage"] {background-image:url(/img/Programs/Marriage.webp);}
.Программы a[href*="Parting"] {background-image:url(/img/Programs/Parting.webp);}
.Программы a[href*="Rating"] {background-image:url(/img/Programs/Rating.webp);}
.Программы a[href*="Tales"] {background-image:url(/img/Programs/Tales.webp);}
.Программы a[href*="Other"] {background-image:url(/img/Programs/Other.webp);}
.Программы a[href*="Solar"] {background-image:url(/img/Programs/Solar.webp);}
.Программы a[href*="Brutal"] {background-image:url(/img/Programs/Brutal.webp);}
.Программы a[href*="Sales"] {background-image:url(/img/Programs/Sales.webp);}
.Программы a[href*="Implementation"] {background-image:url(/img/Programs/Implementation.webp);}
.Программы a[href*="Team"] {background-image:url(/img/Programs/Team.webp);}



/* MODAL ▼▼▼▼▼▼▼▼▼▼▼ */

.modal { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; background: #000; z-index: 1000;
backdrop-filter: blur(0px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, background-color 0.6s ease, backdrop-filter 0.6s ease;}
.modal.open { opacity: 1; background: #0007; backdrop-filter: blur(10px); pointer-events: auto;}

/* Контент модалки */
.modal-content {width:min(94%, 600px); background: #e25; padding:50px 30px 30px; border-radius: 12px; position: relative; 
transform: scale(0.95) translateY(0); opacity: 0; 
box-shadow: 0 5px 20px #0006; transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s ease;}

.modal.open .modal-content { transform: scale(1) translateY(60px); opacity: 1;}
.modal.closing { opacity: 0; background: #0000; backdrop-filter: blur(0px);}
.modal.closing .modal-content { transform: scale(0.95) translateY(5px); opacity: 0;}

.Close {width:30px; height:30px; background: url(/css/form_close.svg) no-repeat center / cover; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; z-index:5; filter: drop-shadow(1px 1px 2px #0008);}
.Close:hover {transform: rotate(90deg) scale(1.0);}



/* ПРОГРАММЫ INSIDE ▼▼▼▼▼▼▼▼▼▼▼ */

.inside {display:grid; grid-template-columns: 350px 1fr; grid-gap: 60px; margin:30px 0;}

.inside div:nth-child(1) {font: normal clamp(2.2rem, 2vw + 1rem, 2.5rem)/1.2 "Bebas Neue", sans-serif;color:#088; text-align:left; text-transform:uppercase; hyphens: none; padding:30px 0 0; margin:20px 0 0; border-top:4px solid #e25;}

.inside ul {margin:10px 0;}

.inside + h5 {margin:50px 0 20px;}



/* СПЕЦИАЛИСТЫ ▼▼▼▼▼▼▼▼▼▼▼ */

.Специалист {display:grid; grid-template-columns: 300px 1fr; grid-gap: 30px; margin:30px 0 60px;}


.Специалист div:nth-child(1) {font: 1.4rem/1.3 Roboto, sans-serif;color:#444; text-align:left; text-transform:uppercase; hyphens: none; margin:20px 0 0;}

.Специалист div:nth-child(1) b {font-family: Roboto, sans-serif; font-size:70%; line-height:1.2; text-transform:none; color:#151515; display:block; margin:10px 0 0;}

.Специалист div:nth-child(1) div {width:100%; max-width:250px; height:auto; margin:0 0 20px; position:relative; aspect-ratio:3/4; border-radius:8px;}
.Nazarenus {background: url(/img/Team/Nazarenus.webp) center/contain no-repeat, linear-gradient(#e25, #800); }
.Zarevskaya {background: url(/img/Team/Zarevskaya.webp) center/contain no-repeat, linear-gradient(#e25, #800); }
.Lubkina {background: url(/img/Team/Lubkina.webp) center/contain no-repeat, linear-gradient(#e25, #800); }
.Panfilova {background: url(/img/Team/Panfilova.webp) center/contain no-repeat, linear-gradient(#e25, #800); }
.Paramonova {background: url(/img/Team/Paramonova.webp) center/contain no-repeat, linear-gradient(#e25, #800); }

.Специалист div:nth-child(2) {border-bottom:4px solid #e25;}



/* ПРЕЙСКУРАНТ ▼▼▼▼▼▼▼▼▼▼▼ */

.Прейскурант { display: block; margin: 0 0 40px;}
.Прейскурант dt {width: calc(100% - 110px); font-size:1.1rem; font-weight:bold; overflow: hidden; display: inline-block; margin: 5px -110px 5px 0;}
.Прейскурант dt:after {width: 100%; content: ''; display: inline-block; margin: 0 -100% 0 3px; border-bottom: 1px dotted #888;}
.Прейскурант dd {width: 110px; font-size:1.2rem; font-weight:bold; text-align:right; color:#d44; display: inline-block; padding: 0 0 0 10px; transform: translate(100%, -10px); text-shadow:1px 2px 3px #0002;}


/* КОНТАКТЫ ▼▼▼▼▼▼▼▼▼▼▼ */

#map {width:calc(100% + 120px); aspect-ratio:1/0.4; margin:0 0 30px; display:block; transform: translate(-60px, 0); }

.address {display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 20px; }

address {font: 1.1rem/1.4 Roboto, sans-serif; color:#151515; text-align:left; white-space:pre-line; hyphens: none; }
address b {font-size:1rem;}
address a {color:#267;}
address a:hover {color:#e23;}


.contact_form {width:100%; padding:0 0 0 30px; margin:0 0 30px; border-radius:0; border-left:1px dotted #888;}

address + .contact_form {margin:20px 0 30px;}

.contact_form legend {width:100%; font: 1.1rem/1.2 Roboto, sans-serif; color:#444; text-align:center; margin:0; padding:0;}
.contact_form legend b {display:block; margin:10px 0;}

.contact_form input[type*="te"] {width:100%; font: 1.2rem/40px Roboto, sans-serif; text-align:left; color:#222; border-bottom:1px solid #aaa;}

.contact_form input[type*="te"]:invalid {color:#888; }
.contact_form input[type*="te"]:invalid:required {border-bottom:1px solid #aaa;}
.contact_form input[type*="te"]:valid {color:#121212; }

.contact_form i {color:#aaa; text-align:center; }


/* ОТЗЫВЫ
---------------------------------------------- */

.reviews-container {width:calc(100% + 120px); background:radial-gradient(circle, #e23, #a00); padding:40px 60px; margin:0 auto; transform: translate(-60px, 32px); box-shadow:inset 0 8px 12px 0 #0004; position: relative;}

.reviews-container h2 {color:#fff; margin: 0 0 30px 0; text-shadow:2px 2px 4px #0008;}

.reviews-wrap {width:100%; height:min(50vh, 300px); overflow:hidden; border:1px solid rgba(30,30,60,0.03); }

.reviews-track {display:block; will-change:transform; counter-reset: slide;}

.review {display:flex; gap:16px; align-items:flex-start; padding:10px 0; border-bottom:1px solid rgba(30,30,60,0.04); min-height:88px; }

.meta {font-size:1.1rem; line-height:1.5; color:#fff; text-align:justify; letter-spacing:-.3px; white-space:pre-line; text-wrap: pretty; 
hyphens: auto; hyphenate-limit-chars: 6 3 3; hyphenate-limit-lines: 6; hyphenate-limit-last: always; 
padding:20px 0; position: relative; user-select: none; will-change: transform; counter-increment: slide; }

.meta::before {content: counter(slide) "."; position: absolute; top: 0; left: 0; 
font-family: "Roboto Bold", sans-serif; font-size: 1.8rem; color: #d86657; display: block; z-index:10; }

.controls  {display:flex; justify-content:center; gap:20px; margin:30px 0 0;}

.control-btn {width:48px; height:48px; cursor:pointer; border:none; border-radius:50%; box-shadow:inset 0 4px 8px 0 #0006;}

.control-btn.play {background:url(/css/button_play.svg) center / 70% 70% no-repeat, #fff;}
.control-btn.pause {background:url(/css/button_pause.svg) center / 70% 70% no-repeat, #fff;}
.control-btn.play:hover, .control-btn.pause:hover {filter: invert(100%); transition: 1.2s ease; }



/* IMG ▼▼▼▼▼▼▼▼▼▼▼ */

.TITLE {width:calc(100% + 120px); aspect-ratio:1/0.4; margin:0 0 60px; background-size: cover; background-position:center top; background-repeat:no-repeat; transform: translate(-60px, 0); }

.Index {background-image:url(/img/Title/Index.webp);}
.Infertility {background-image:url(/img/Title/Infertility.webp);}
.Communication-child {background-image:url(/img/Title/Communication-child.webp);}
.Marriage {background-image:url(/img/Title/Marriage.webp);}
.Parting {background-image:url(/img/Title/Parting.webp);}
.Rating {background-image:url(/img/Title/Rating.webp);}
.Tales {background-image:url(/img/Title/Tales.webp);}
.Other-side {background-image:url(/img/Title/Other-side.webp);}
.Solar-wind {background-image:url(/img/Title/Solar-wind.webp);}
.Brutal-talk {background-image:url(/img/Title/Brutal-talk.webp);}

.Sales {background-image:url(/img/Title/Sales.webp);}
.Implementation {background-image:url(/img/Title/Implementation.webp);}
.Command {background-image:url(/img/Title/Command.webp);}

.Method {background-image:url(/img/Title/Method.webp);}
.Areas {background-image:url(/img/Title/Areas.webp);}
.Team {background-image:url(/img/Title/Team.webp);}
.Price {background-image:url(/img/Title/Price.webp);}

.Error {background-image:url(/img/Title/Error.webp);}
.Postform {background-image:url(/img/Title/Postform.webp);}
.Politics {background-image:url(/img/Title/Politics.webp);}


.inside_img {width:100%; aspect-ratio:1/0.5; display:block; margin:30px 0 -15px; background-size: cover; background-position:center top;}

.Infertility_01 {background-image:url(/img/960/Infertility_01.webp);}
.Communication-child_01 {background-image:url(/img/960/Communication-child_01.webp);}
.Marriage_01 {background-image:url(/img/960/Marriage_01.webp);}
.Parting_01 {background-image:url(/img/960/Parting_01.webp);}
.Rating_01 {background-image:url(/img/960/Rating_01.webp);}
.Tales_01 {background-image:url(/img/960/Tales_01.webp);}
.Other-side_01 {background-image:url(/img/960/Other-side_01.webp);}
.Solar-wind_01 {background-image:url(/img/960/Solar-wind_01.webp);}
.Brutal-talk_01 {background-image:url(/img/960/Brutal-talk_01.webp);}
.Sales_01 {background-image:url(/img/960/Sales_01.webp);}
.Implementation_01 {background-image:url(/img/960/Implementation_01.webp);}
.Command_01 {background-image:url(/img/960/Command_01.webp);}

.Method_01 {background-image:url(/img/960/Method_01.webp);}
.Areas_01 {background-image:url(/img/960/Areas_01.webp);}
.Team_01 {background-image:url(/img/960/Team_01.webp);}
.Price_01 {background-image:url(/img/960/Price_01.webp);}




/* FORM ▼▼▼▼▼▼▼▼▼▼▼ */

form {position:relative; }

form legend {font: 1.4rem/1.2 Intro, sans-serif; color:#ddd; text-align:left; text-transform:uppercase; }
form legend b {font:normal 130%/1.3 "Roboto Bold", sans-serif; color:#345; display:block; margin:10px 0;}

form input[type*="te"] {width:100%; font: 1.3rem/40px Roboto, sans-serif; text-align:left; color:#fff; padding:8px 16px; margin:10px 0 20px; display:block; border-bottom:1px solid #fff;}

form input:invalid {color:#000; }
form input:invalid:required {border-bottom:1px solid #000;}
form input:valid {color:#fff; }

form input[type="checkbox"] { display: none; }

form i {width:100%; font: .85rem/1.3 Roboto, sans-serif; color:#f5f5f5; text-align:center; display:block; margin:25px 0 0;}

form button {width:180px; height:50px; font: 1.1rem/50px Roboto, sans-serif; color: #fff; text-transform:uppercase; letter-spacing:2px; text-align:center; background: #e72; margin:30px auto 0;  cursor: not-allowed; display:block; cursor: pointer;}
form button:hover, form button:focus { background: #088; color:#fff;}


.inside_form {width:calc(100% + 120px); background:radial-gradient(circle, #e23, #a00); padding:40px 0; transform: translate(-60px, 31px); box-shadow:inset 0 8px 12px 0 #0004;}
.inside_form form {width:min(90%, 700px); position:relative; padding:30px; margin:20px auto; background:#fff; border-radius:8px; box-shadow:inset 0 0 6px 0 #0008; backdrop-filter: blur(5px);}
.inside_form legend {width:100%; font: 1rem/1.2 Roboto, sans-serif; color:#333; text-align:center;}
.inside_form input[type*="te"] {color:#222; }
.inside_form input[type*="te"]:invalid {font-size:95%; color:#e25; }
.inside_form input[type*="te"]:invalid:required {border-bottom:1px dotted #444; }
.inside_form input[type*="te"]:valid {color:#121212; }
.inside_form i {color:#e25; }


select {appearance: none; border: 0; outline: 0; background: none; color: inherit; box-shadow: none;}
.select { background:#f2f2f2; padding:0; position: relative; display: flex; overflow: hidden; }
.select select {font-size:100%; line-height:1.5; color:#750037; flex: 1; padding:8px 12px; cursor: pointer; display:flex;}
.select::after { content: "▼"; color:#750037; position:absolute; top:10px; right:10px; transition: 0.25s all ease; pointer-events: none;}
.select:hover::after { color: #f06; animation: bounce 0.5s infinite;}
@-webkit-keyframes bounce { 25% { transform: translatey(3px); } 75% { transform: translatey(-3px); }}
@keyframes bounce { 25% { transform: translatey(3px); } 75% { transform: translatey(-3px); }}

option:checked {color: #fff; background:#f00; padding:4px 8px; }
select option:not(:checked) {color: #444; margin:0 0 5px; }
option[selected] {font-size: 120%;}




/* ============================================================================================================================

/* 1460px */ @media (width <= 1460px) { 

body {width:100%; background: #fbfbf6;}

}




/* ============================================================================================================================


/* 960px */ @media (width <= 960px) { 



/* MAIN ▼▼▼▼▼▼▼▼▼▼▼ */

main {padding:0 40px 30px; box-shadow: none; }


/* ОТЗЫВЫ ▼▼▼▼▼▼▼▼▼▼▼ */

.reviews-container  {width:calc(100% + 80px); padding:40px;  transform: translate(-40px, 32px);}


/* FORM ▼▼▼▼▼▼▼▼▼▼▼ */

.inside_form {width:calc(100% + 80px); padding:30px 0;  transform: translate(-40px, 31px); }


/* КОНТАКТЫ ▼▼▼▼▼▼▼▼▼▼▼ */

#map {width:calc(100% + 80px); margin:0 0 30px; transform: translate(-40px, 0); }



/* IMG ▼▼▼▼▼▼▼▼▼▼▼ */

.TITLE {width:calc(100% + 80px); transform: translate(-40px, 0); }

.Index {background-image:url(/img/960/Index.webp);}

.Infertility {background-image:url(/img/960/Infertility.webp);}
.Communication-child {background-image:url(/img/960/Communication-child.webp);}
.Marriage {background-image:url(/img/960/Marriage.webp);}
.Parting {background-image:url(/img/960/Parting.webp);}
.Rating {background-image:url(/img/960/Rating.webp);}
.Tales {background-image:url(/img/960/Tales.webp);}
.Other-side {background-image:url(/img/960/Other-side.webp);}
.Solar-wind {background-image:url(/img/960/Solar-wind.webp);}
.Brutal-talk {background-image:url(/img/960/Brutal-talk.webp);}
.Sales {background-image:url(/img/960/Sales.webp);}
.Implementation {background-image:url(/img/960/Implementation.webp);}
.Command {background-image:url(/img/960/Team.webp);}

.Method {background-image:url(/img/960/Method.webp);}
.Areas {background-image:url(/img/960/Areas.webp);}
.Team {background-image:url(/img/960/Team.webp);}

.Error {background-image:url(/img/960/Error.webp);}
.Postform {background-image:url(/img/960/Postform.webp);}
.Politics {background-image:url(/img/960/Politics.webp);}

}




/* ============================================================================================================================

/* 800px */ @media (width <= 800px) { 

:root {font-size: 14px; }

body {width:100%; display: grid; grid-template-rows: 130px 1fr 200px;}



/* HEADER ▼▼▼▼▼▼▼▼▼▼▼ */

.logo {width:min(80vw, 350px); height:min(15vw, 75px); position:absolute; top:10px; left: 50%; transform: translate(-50%, 0);} 



header a[href*="tel"], header a[href*="wa.me"] {position: absolute; top:20px;}

header a[href*="tel"] {background:url(/css/icon_Phone.svg) 0 0 / cover no-repeat; right:20px;}
header a[href*="wa.me"] {background:url(/css/icon_Whatsapp.svg) 0 0 / cover no-repeat; right:60px;}

header a[href*="wa.me"]:hover::before, header a[href*="tel"]:hover::before {display: none;}



/* NAV ▼▼▼▼▼▼▼▼▼▼▼ */

.Меню {width: 40px; height:40px;  background:url(/css/Hamburger.svg) center center / contain no-repeat; position:absolute; bottom:10px; right:20px; cursor:pointer; display: block; visibility: visible; opacity: 1; z-index:50;}
.active_Menu {transform: rotate(90deg) scale(1.0);}

nav {width: 100%; height:calc(100svh - 130px); position: absolute; top:130px; left:0; right:auto; padding:0; margin:0; background:#fff url(/css/bg.webp); transform-origin: 0 0; transform: scaleY(0); transition: 0.5s ease-in-out; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); overflow:auto; 
display: grid; gap: 20px; grid-template-columns: 1fr;  grid-template-rows: repeat(5, auto) 90%;}

.nav-open {transform: scaleY(1); padding:20px 0 30px;}
nav a:not(details > div a) {font-size:16px; line-height:18px; color:#212121; text-align:left; letter-spacing:1px; padding:0 40px; order: -1;}

.nav-open details {order: 1; padding:30px;}

nav details > div {width: 100%; background:transparent; border-left:none; border-right:none; border-bottom:none; border-radius:0; box-shadow: none; }




/* ПРОГРАММЫ ▼▼▼▼▼▼▼▼▼▼▼ */

.Программы {grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.Программы a {font-size: 14px; line-height:1.4; }


/* ПРОГРАММЫ INSIDE ▼▼▼▼▼▼▼▼▼▼▼ */

.inside {display:grid; grid-template-columns:1fr; grid-gap: 20px;}



/* СПЕЦИАЛИСТЫ ▼▼▼▼▼▼▼▼▼▼▼ */

.Специалист {display:grid; grid-template-columns: 1fr; grid-gap: 10px; padding:0 0 20px; margin:20px 0;}
.Специалист div:nth-child(2) {border-bottom:4px solid #e25;}


}


/* ============================================================================================================================


/* 600px */ @media (width <= 600px) { 


/* HEADER ▼▼▼▼▼▼▼▼▼▼▼ */

header a[href*="tel"], header a[href*="wa.me"] {position: absolute; top:90px;}


/* NAV ▼▼▼▼▼▼▼▼▼▼▼ */

.Меню {position:relative; bottom:0; right:auto; left:50%; transform: translate(-50%, 85px);}
.active_Menu {filter: blur(2px);}


/* TEXT ▼▼▼▼▼▼▼▼▼▼▼ */

p:not([class]) {text-align:left;}

ul:not([class]) li {text-align:left; }


/* ПРЕЙСКУРАНТ ▼▼▼▼▼▼▼▼▼▼▼ */

.Прейскурант dt {width: calc(100% - 90px); font-size:1rem; font-weight:bold; display: inline-block; margin: 5px 0px 5px 0; }
.Прейскурант dd {width: 80px; font-size:1.1rem; display: inline-block; padding: 0 0 0 10px; transform: translate(0, -7px); }


/* ОТЗЫВЫ ▼▼▼▼▼▼▼▼▼▼▼ */

.meta {font-size:14px; line-height:1.4; text-align:left; letter-spacing:.5px; }


/* КОНТАКТЫ ▼▼▼▼▼▼▼▼▼▼▼ */

#map {aspect-ratio:1/.8; }

.contact_form {width:100%; padding:0; border-left:none;}



/* IMG ▼▼▼▼▼▼▼▼▼▼▼ */

.TITLE {aspect-ratio:1/0.5;   }

.Index {background-image:url(/img/600/Index.webp);}
.Infertility {background-image:url(/img/600/Infertility.webp);}
.Communication-child {background-image:url(/img/600/Communication-child.webp);}
.Marriage {background-image:url(/img/600/Marriage.webp);}
.Parting {background-image:url(/img/600/Parting.webp);}
.Rating {background-image:url(/img/600/Rating.webp);}
.Tales {background-image:url(/img/600/Tales.webp);}
.Other-side {background-image:url(/img/600/Other-side.webp);}
.Solar-wind {background-image:url(/img/600/Solar-wind.webp);}
.Brutal-talk {background-image:url(/img/600/Brutal-talk.webp);}
.Sales {background-image:url(/img/600/Sales.webp);}
.Implementation {background-image:url(/img/600/Implementation.webp);}
.Command {background-image:url(/img/600/Command.webp);}

.Error {background-image:url(/img/600/Error.webp);}
.Postform {background-image:url(/img/600/Postform.webp);}
.Politics {background-image:url(/img/600/Politics.webp);}

.Method {background-image:url(/img/600/Method.webp);}
.Areas {background-image:url(/img/600/Areas.webp);}
.Team {background-image:url(/img/600/Team.webp);}


.inside_img {width:100%; aspect-ratio:3/2; display:block; margin:20px 0 0; background-size: cover; background-position:center top;}

.Infertility_01 {background-image:url(/img/600/Infertility_01.webp);}
.Communication-child_01 {background-image:url(/img/600/Communication-child_01.webp);}
.Marriage_01 {background-image:url(/img/600/Marriage_01.webp);}
.Parting_01 {background-image:url(/img/600/Parting_01.webp);}
.Rating_01 {background-image:url(/img/600/Rating_01.webp);}
.Tales_01 {background-image:url(/img/600/Tales_01.webp);}
.Other-side_01 {background-image:url(/img/600/Other-side_01.webp);}
.Solar-wind_01 {background-image:url(/img/600/Solar-wind_01.webp);}
.Brutal-talk_01 {background-image:url(/img/600/Brutal-talk_01.webp);}
.Sales_01 {background-image:url(/img/600/Sales_01.webp);}
.Implementation_01 {background-image:url(/img/600/Implementation_01.webp);}
.Command_01 {background-image:url(/img/600/Command_01.webp);}

.Method_01 {background-image:url(/img/600/Method_01.webp);}
.Areas_01 {background-image:url(/img/600/Areas_01.webp);}
.Team_01 {background-image:url(/img/600/Team_01.webp);}
.Price_01 {background-image:url(/img/600/Price_01.webp);}

}