*{
 margin: 0px;
 padding: 0px;
}

*,
*::before,
*::after {
 box-sizing: border-box;
}

html, body{
 /*scrollbar-color: rgb(65, 65, 65) #f1d253;*/
 width: 100%;
 min-height: 100%;
 overflow-x: hidden;
 font-size: 16px;
}

img {
 max-width: 100%;
 height: auto;
 display: block;
}
@font-face {
 font-family: Comicz;
 src: url('fonts/16872.ttf')
}
/*стили для элементов, выделенных курсором при просмотре страницы в браузере!!!!*/
::selection {
 background-color: #00C2FF;
 color: white;
}
/*-----------------------ЗАГОЛОВОК (header.php)--------------------------------------------------------------------------------*/
header{
 position: relative;
 width: 100%;
 height: auto;
 margin:auto;
 overflow: hidden;
 /*background: radial-gradient(circle, #f2e28e, #FFDD51);*/
}
nav{
 border-bottom: 0px rgba(0, 0, 0, 0.6) solid;
 display: block;
 top: 0;
 left: 0;
 width: 100%;
 height: auto;
 background-color: rgba(255,207,64,0.5);
 transition-delay: 30s;
 position: relative;
}
.non{display:none;}
/*.tran{}*/
nav ul{
/* width: ;*/
 height: auto;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 gap: 25px;
 padding: 10px 0;
}
nav ul li{
 width: auto;
 height: auto;
 list-style-type: none;
 /*transition: background-color 0.3s ease;
 box-shadow: 0.3s ease;
 display: flex;
 align-items: center;
 flex: 1 1 auto;
 min-width: 140px;*/
}
nav ul li a{
 text-align: center;
 margin: auto;
 width:auto;
 padding:10px 14px;
 height: auto;
 display: block;
 color: #df6e11;
 text-decoration: none;
 font-family: "PT Serif", serif;
 font-size: 1.15rem;
 font-weight:100;
 text-transform:uppercase;
}
nav ul li:hover{
cursor: pointer;
 /* -webkit-box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.8);
 -moz-box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.8);
 box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.8);*/
}


/*позиционирование в header род/блока с дочерней картинкой меню для вызова горизонтальной/вертикальной навигации !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.menu
{position:absolute;
z-index:5000;
top:0;
right:0
 /*display:flex;
 flex-direction:row;
 align-items:center;
 float:right;*/
}
/*Стили для картинки меню!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.menu img{
 width: 9vh;
 display: block;
 padding:10px 15px;
 opacity:0.55;
}
/*.phone img:hover{background-color: #FED83B;cursor: pointer;}*/


/*Для пользователя заголовок 1-го уровня скрыт, но поисковый робот его видит!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
h1{
 display: none;
}

/*род/контейнер логотипов в шапке для 2 элементов: логотипа logo_main.png и род/блока logo_name с дочерними картинкой 
названия организации logo_name.png и блоком со ссылкой на телефон!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ 



.logos {
 padding-top: 110px;
 margin: 0 auto;
 width: min(90%,1400px);
 padding-left: 20px;
 padding-right: 20px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 gap: 2rem;
}

/*род/блок logo_name (дочерний для logos) с дочерними картинкой с названием организации logo_name.png и блоком со ссылкой на телефон!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.logo_name
{display:flex;flex-direction:column;justify-content:center; gap:20px}

/*стили для картинок: логотип logo_main и название организации logo_name!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ 

.imLog1,.imLog2{
 display: block;
 height: auto;
}

.imLog1{width:33%/*min(36%, 280px)*/;padding-left:0;}
.imLog2{width:80%/*min(90%, 560px)*/}

/*стили для ссылки на тел!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.logo_name div,.imLog2{margin:auto;}
/*.im{}*/
.logo_name div{border-radius:10px;}
.logo_name a{
 display: block;
 width:auto;
 text-align: center;
 font-family: "PT Serif", serif;
 /*color: rgb(65, 65, 65);*/
 font-size: 30pt;
 text-decoration: none;
 font-weight: bolder;
 padding:10px 15px 10px 15px;
 
}

/*род. блок для модулей учебной программы!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.container {
 width: min(95%, 1400px);
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 1em;
 /*padding: 100px 20px;*/
 margin-top:100px;
 
}
.container {
 border: 5px solid rgb(255,136,0);
 background-color: #fff;
 position: relative;
 z-index: 1;
 padding: 5px;
}

.container::after,
.container::before {
 content: "";
 display: block;
 border: 5px solid #fff;
 z-index: 20;
 position: absolute;
}

.container::after {
 left: -5px;
 top: 10px;
 right: -5px;
 bottom: 10px;
 border-top: none;
 border-bottom: none;
}

.container::before {
 left: 10px;
 top: -5px;
 right: 10px;
 bottom: -5px;
 border-left: none;
 border-right: none;
}

/*род. блок для основных дисциплин, составляющих модуль!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.row{
 width: 100%;
 display: flex;
 padding-top: 2vh;
 padding-bottom: 2vh;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 gap: 4em;
 flex-wrap: wrap;
 border:none;
}
/*род. блок для наименования дисциплин!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.post{
 
 letter-spacing: 1.5px;
 font-family: "PT Serif", serif;
 /*background-color: #f1d253;*/
 font-size:30pt /*clamp(36px, 2.2vw, 42px)*/ /*clamp(2rem, 1.5vw + 1rem, 2.5rem)*/;
 font-weight: bolder;
 color: #FDD5B1;/*rgba(255,136,0,0.61); #EC7C26;#FFCF40 #EC7C26;#FFCF40 #FFA500 #FF7514 #df6e11; rgb(255,207,64);rgb(65, 65, 65);*/
 text-align: center;
 border:none;
}
/*---------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------CONTENT(content.php)---------------------------------------*/


#main{
 margin: 0 auto;
 width: 90%;
 padding: 0 20px;
 height: auto;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content:center;
 outline:0px blue solid;
}
/*заголовки разделов!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
 h2{
 font-family: "PT Serif", serif;
 color: rgb(65, 65, 65);
 font-size:38pt; /*clamp(28px, 3vw, 42px)*/
 text-align: center;
 margin: 6vh auto;
 line-height: 1.4em;
}

section{
 width: 100%;
 height: auto;
 display: block;
 outline:0px blue solid;
 
}

/*подзаголовки дочерних блоков секций!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
section .for_all
{
 font-family: "PT Serif", serif;
 color: #48B9FC;
 font-size: 32pt;
 
 text-align: center;
 margin-bottom: 2vh;
 line-height: 1.2em;
}
section span {
 background-color: #FFBA00;
 border-radius: 10px;
 padding: 3px;
}
h2,h5,h6{color:#48B9FC;outline:0px red solid;}
/*стили для шрифта текста в перечисленных элементах на всей странице в контенте!!!!!*/
p, section li,figcaption{
 letter-spacing: 1.3px;
 font-family: "PT Serif", serif;
 color: rgb(65, 65, 65);
 font-size:22pt /*clamp(16px, 1.5vw, 24px)*/;
 line-height: 1.4em;
 list-style-type: circle;
 font-weight: bold;
}
p {font-weight: 400;
font-family:"arial" /*'Times New Roman';*/ }
/*цвет текста на кнопках Смотреть!!!!!*/
section a{
 color: rgb(65, 65, 65);
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!СТИЛИ ДЛЯ РАЗДЕЛА Ведется набор детей*!!!!!!!!!!!!!!!!!!!!!!!*/
.child {
color:rgb(255,136,0);
 padding-top:1vh;
 font-family: "PT Serif", serif;
font-size: 34pt;
 text-align: center;
 margin-bottom: 2vh;
line-height: 1.2em;}

 .children_recruited{
 width:90%;
 margin:auto;
 padding: 5% 5%;
 background-color: rgba(255,250,205,0.5); /*255,207,64, 164,32, 219,139*/
 border-radius: 50px;
 /*border:3px rgb(255,136,0) solid;*/
 
}
.children_recruited li{
 margin-left: 3vw;
 color: rgb(255,136,0); font-weight:bold; font-size:2.5rem;
}
.children_recruited ul{
 margin-top: 2vh;
 margin-bottom: 2vh;
}
/*.children_recruited p:first-child{
 margin-top: 7vh;
}*/
.children_recruited p:last-child{
 margin-top: 4vh;
 /*margin-bottom:8vh;*/
}
.children_recruited p {color: rgba(255,136,0,0.8); /*font-weight:bold;*/ font-size:2rem}
/*----------------------------------------------------------------------------------------------------------------------------------*/

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!СТИЛИ ДЛЯ РАЗДЕЛА О НАС !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.container4{
 display: none;
 outline:0px solid
}
.container2{
	width:95%;
	outline:0px solid;
	}
.about_us {
 width: 90%;
 margin: auto;
 outline:0px red solid;
	}


.about_us figure {
 width: calc(33.333% - 1rem);
 min-width:220px;
 height: auto;
 display: flex;
 flex-direction: row;
 margin-bottom: 7vh;
 align-items: center;
 outline:0px green solid;
 
}

.about_us img {
 display: block;
 width: 6vw;
 height: 6vw;
}
/* контейнер для первых 6 картинок!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.container2{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
 outline:0px solid;
 margin:auto
}
/* контейнер для последних 2 картинок!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.container3{
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 align-items: center;
 outline:0px solid;
 width:95%;
 margin:auto;
}
/*подписи к картинкам!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.about_us figcaption {
	width:auto;	
 margin-left:10px;
 display: flex;
 flex-direction: column;
 gap: 0.3em;
 font-family: "PT Serif", serif;
 color: rgb(65, 65, 65);
 font-size: clamp(1.1rem, 1.8vw, 1.3rem);
 line-height: 1.2em;
 font-weight: 400;
 outline:0px pink solid;
}

.about_us figcaption span {
 display: block;
 width:auto;
 padding-left:3px;
 padding-right:20px;
 border-radius:10px;
  outline:0px red solid;
 /*background:rgba(255, 186, 0, 0.43);*/
 background:-webkit-linear-gradient(left, rgba(255, 186, 0, 0.5) 0%, rgba(255, 186, 0, 0.43) 35%,rgba(255, 186, 0, 0.33) 75%,rgba(255, 186, 0, 0.23) 85%,rgba(255, 186, 0, 0.13) 95%,rgba(255, 186, 0,0.1) 98%, rgba(255, 186, 0, 0.0) 100%  );
	background: linear-gradient(left,rgba(255, 186, 0, 0.5) 0%, rgba(255, 186, 0, 0.43) 35%,rgba(255, 186, 0, 0.33) 75%,rgba(255, 186, 0, 0.23) 85%,rgba(255, 186, 0, 0.13) 95%,rgba(255, 186, 0,0.1) 98%, rgba(255, 186, 0,0.0) 100%   )
	
 
 
}
/*----------------------------------------------------------------------------------------------------------------------------------*/

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!СТИЛИ ДЛЯ РАЗДЕЛА IT для детей !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.IT_for_kids div {
 padding: 50px;
 margin-top: 4vh;
 border-radius: 50px;
 margin: auto;
 width: 90%;
 transition: background-color 0.3s ease,
 box-shadow 0.3s ease;
}

.IT_for_kids img {
 width: 15%;
 height: auto;
 float: left;
 margin: 0px 40px 20px 0px;
}

.IT_for_kids p {
 margin-bottom: 1%;
 text-indent: 5%;
 text-align: justify;
}

/* При наведении курсора фон очередного дочернего блока секции IT для детей меняется!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.programm:hover {
 background-color: rgba(214, 187, 50, 0.35);
}

.web_dev:hover {
 background-color: rgba(228, 77, 38, 0.4);
}

.comp_graph:hover {
 background-color: rgba(45, 169, 255, 0.35);
}

.Office:hover {
 background-color: rgba(63, 166, 239, 0.4);
}

.one_c:hover {
 background-color: rgba(209, 36, 41, 0.35);
}

.PC:hover {
 background-color: rgba(0, 175, 239, 0.35);
}

/*----------------------------------------------------------------------------------------------------------------------------------*/
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!СТИЛИ ДЛЯ РАЗДЕЛА Работы детей !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.kids_works {
 width: 100%;
 outline:0px green solid;
}

.kids_works figure {
 width: 100%;
 margin: 0;
 padding: 0;
}

.kids_works .web-work-card {
 position: relative;
 overflow: hidden;
 display: block;
 box-shadow: 0 0 7px rgba(0,0,0,0.2);
}

.kids_works img {
 width: 100%;
 display: block;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 height: auto;
}

.kids_works .web-work-link {
 position: absolute;
 inset: auto auto 12px 12px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 0;
 max-width: none;
 padding: 8px 12px;
 margin: 0;
 background-color: rgba(255, 200, 73, 0.9);
 color: #2f2f2f;
 font-family: "PT Serif", serif;
 font-size: 0.95rem;
 font-weight: bold;
 text-decoration: none;
 border-radius: 999px;
 line-height: 1.1;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 transition: background-color 0.3s ease, transform 0.2s ease;
 z-index: 2;
 opacity: 0.95;
 pointer-events: auto;
}

.kids_works .web-work-link:hover {
 background-color: #f2e28e;
 transform: translateY(-1px);
}

.kids_works img.show {
 position: fixed;
 top: 50%;
 left: 50%;
 width: 60%;
 max-width: 90vw;
 max-height: 90vh;
 transform: translate(-50%, -50%);
 z-index: 9999;
 box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
 background-color: #fff;
 cursor: zoom-out;
}

.kids_works img.show:hover {
 transform: translate(-50%, -50%);
}

.kids_works .grid-container {
 width: 90%;
 margin: 0 auto 3% auto;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(3, 1fr);
 gap: 20px;
}

/*.kids_works a {
 display: block;
 width: auto;
 min-width: 180px;
 max-width: 220px;
 background-color: #FFC849;
 font-family: 'Courier New';
 color: rgb(65, 65, 65);
 font-size: clamp(18px, 1.4vw, 28px);
 font-weight: bold;
 text-decoration: none;
 border-radius: 999px;
 text-align: center;
 line-height: 1.2;
 padding: 12px 24px;
 margin: 24px auto 24px;
 box-sizing: border-box;
 transition: background-color 0.3s ease,
 box-shadow 0.3s ease;
 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}*/

.kids_works a:hover {
 cursor: pointer;
 background-color: #f2e28e;
 
 
}

.web-work-card:hover{ -webkit-transform: translateY(-2%) rotate(-1deg);
 -moz-transform: translateY(-2%) rotate(-1deg);
 -ms-transform: translateY(-2%) rotate(-1deg);
 -o-transform: translateY(-2%) rotate(-1deg);
 transform: translateY(-2%) rotate(-1deg);
 transition:transform 1s ease
}
/*----------------------------------------------------------------------------------------------------------------------------------*/

.gallery-controls {
 width: min(92%, 1000px);
 margin: 0 auto 3% auto;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 1rem;
 outline:0px red solid;
 box-shadow: 0 0 10px rgba(0,0,0,0.05);
 padding-bottom:20px;
}

#num2{
 display: none;
}
#no4,#no5,#no9,#no10 {display: none;}

.leftButton,
.leftButtonMobile,
.rightButtonMobile,
.rightButton {
 flex-shrink: 0;
 width: 48px;
 height: 48px;
 border: none;
 border-radius: 50%;
 background-color: #FFC849;
 color: rgb(65, 65, 65);
 font-size: 1.4rem;
 font-weight: bold;
 cursor: pointer;
 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.gallery-window {
 flex: 1;
 overflow: hidden;
 border-radius: 0;
}

#gallery {
 display: flex;
 width: 100%;
 transition: transform 0.35s ease;
}

.gallery-page {
 flex: 0 0 100%;
 width: 100%;
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}

.gallery-page figure {
 width: 100%;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
}

.gallery-page figure img {
 width:min(100%, 1000px);
 height: auto;
 object-fit: cover;
 display: block;
 margin: 0 auto;
}
/*.gallery-page_ img {
width: min(100%, 1000px);}*/

.image-lightbox {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.8);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px;
 z-index: 100000;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.25s ease, visibility 0.25s ease;
}

.image-lightbox.show {
 opacity: 1;
 visibility: visible;
}

.image-lightbox img {
 width: min(100vw, 1800px);
 max-width: none;
 height: auto;
 max-height: none;
 object-fit: contain;
 transform: scale(0.7);
 transform-origin: center center;
 box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}

.scroll-top {
 position: fixed;
 right: 24px;
 bottom: 24px;
 width: 52px;
 height: 52px;
 border: none;
 border-radius: 50%;
 background-color: #FFC849;
 color: rgb(65, 65, 65);
 font-size: 1.6rem;
 line-height: 1;
 box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
 cursor: pointer;
 opacity: 0;
 visibility: hidden;
 transform: translateY(16px);
 transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
 z-index: 10000;
}

.scroll-top.show {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!СТИЛИ ДЛЯ РАЗДЕЛА Консультационные услуги для взрослых !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.counseling_adults {
 width: 90%;
 margin: auto;
 margin-bottom: 15vh;
}
.accordion{
 padding: 50px 5%;
 background-color:rgba(255,207,64, 0.85);
 border-radius: 50px;
}
/*Пункты списка!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ 
h4 {
 text-decoration: none;
 font-family: "PT Serif", serif;
 color: rgb(65, 65, 65);
 font-size: 24pt;
 border-radius: 15px;
 padding: 10px;
}
#non{display:none;}
#accordion>ul {
 z-index: 9;
 overflow: hidden;
 border-radius: 15px;
 transition: height 0.5s;
 margin-bottom: 1vh;
}
#accordion>ul>li{
 z-index: 10;
 font-size: 24pt;
 margin-left: 5vw;
 padding: 5px;
 border-radius: 15px;
 list-style-type: circle;
 margin-bottom: 1vh;
}
#accordion ul li a {
 text-decoration: none;
 color:#D3792D;
}

.tabs__text {
 height: 0;
 font-weight: bold;
 text-decoration: none;
 font-family: "PT Serif", serif;
 color: rgb(65, 65, 65);
 font-size: 20pt;
}
.counseling_adults ul>li>ul>li.select{
 display: block;
}
#accordion h4{color:#D3792D;
 /*width: fit-content;*/
 cursor: pointer;
}
#accordion>ul>li:hover {
 cursor: pointer;
width:100vh
 
}
.counseling_adults li a {
 padding: 5px 10px;
}
/*---------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------ФУТЕР (footer.php)---------------------------------------*/
footer{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 padding-top: 3%;
 width: 100%;
 background-color:rgba(241, 210, 83, 0.7);
}
.footer_img{
 margin: auto;
 margin-left: 3%;
 margin-bottom: 3%;
 width: 100%;
}
.footer_img img{
 display: block ;
 margin: auto;
}
.footer_first_div{
 width: 50%;
 outline:0px solid;
}
.footer_last_div{
 width: 50%;
 margin-bottom: 3vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 outline:0px solid;
}
.footer_img img{
 width: 17%;
}
.under_div{
 width: 100%;
 background-color: #FFBA00;
}
.under_div p{
 text-align: center;
 padding-top: 4vh;
 padding-bottom: 4vh;
}
.it{
 display: block;
 width: 37%;
 margin: auto;
 margin-bottom: 3%;
}
.footer_last_div p{
 font-size: 20pt;
 padding-bottom: 15px;
}
.dev{
 border-top: 1px rgba(0, 0, 0, 0.6) solid;
 /* background-color: rgba(241, 210, 83, 0.7);*/
 width: 98vw;
}
 h6{
 font-family: "PT Serif", serif;
 color: rgb(65, 65, 65);
 font-size: 28pt;
 text-align: center;
 display: block;
 margin-top: 5vh;
}
.dev div{
 width: 85%;
 margin: auto;
 margin-top: 5vh;
 margin-bottom: 5vh;
}
.dev div p{
 font-size: 20pt;
}
.dev div p:first-child, .dev div p:nth-child(2), .dev div p:nth-child(3), .dev div p:nth-child(4){
 margin-bottom: 3vh;
}

/*.yes1,.dev span{
 
 background-color: #FFBA00;
 padding: 5px;
 border-radius: 10px;
}*/
/*span{
 background-color: #FFBA00;
 border-radius: 10px;
 padding: 3px;
}*/
.yes1,.dev span{
 background-color: #FFBA00;
 padding: 5px;
 border-radius: 10px;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------*/
 /*----------------------------------------------- Стили баннера-------------------------------------- */
 #banner {
 font-family: sans-serif;
 /*position: fixed;
 bottom: 0;
 left: 0;
 right: 0;*/
 
 /* background-color: #222;*/
 width:100%;
 /*background:#f1d253;*/
 color:rgb(65, 65, 65);
 padding: 12px 15px;
 text-align: center;
 /* z-index: 9999;*/
 box-sizing: border-box;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content:center;
 gap: 8px; /* расстояние между текстом и кнопками */
 }

 
 /* Стили кнопок */
 button#accept,
 button#reject {
 padding: 8px 16px;
 cursor: pointer;
 border: none;
 border-radius: 4px;
 font-size: 14px;
 }

 button#accept {
 background-color:#FFBA00;
 color:rgb(65, 65, 65);
 }

 button#reject {
 background-color: #6c757d;
 color: #fff;
 }

 button#accept:hover {
 opacity: 0.9;
 }

 button#reject:hover {
 opacity: 0.9;
 }
/*--------------------------------------------------------------------------------------------------*/ 

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! МЕДИАЗАПРОСЫ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*Мобильные устройства (Mobile)
Типичная ширина: 320–480 пикселей (портрет), в некоторых случаях до ~600 пикселей.
Рекомендуемые брейкпоинты:

320 пикселей — минимум, самый узкий смартфон (iPhone SE и аналоги).
375 пикселей — частая ширина iPhone (портрет).
480 пикселей — промежуточный порог для чуть более широких мобильных устройств.
576 пикселей — часто используется как граница «узких» мобильных устройств: до этого значения — максимально компактный макет.
Планшеты (Tablet)
Типичная ширина: 768–1024 пикселей (в зависимости от ориентации).
Рекомендуемые брейкпоинты:

768 px — стандарт для планшетов в портретной ориентации (iPad и аналоги). Часто используется как первый серьёзный переход от мобильного к «полудесктопному» виду.
1024 px — планшеты в альбомной ориентации, небольшие ноутбуки, старые нетбуки.
Десктоп (Desktop)
Типичная ширина: от 1280 px и выше.
Рекомендуемые брейкпоинты:

1280 пикселей — распространенный минимум для ноутбуков и стандартных настольных компьютеров.
1440 px — широкие экраны, популярные среди дизайнеров и разработчиков. 
1920 px+ — большие мониторы и 4K-экраны. Часто не создают отдельный стиль именно для 1920 px, а ограничивают контент фиксированной максимальной шириной (например, max-width: 1200–1400px) и центрируют его.*/

@media (max-width: 1441px)
{
 nav ul li a{
 font-size: 1.1em;
 /* padding: 5px 10px;*/
 }
 
 nav ul{
 width: 80%;
 margin: auto;
 gap: 5px;
 }
 .logos {width:90%;
 margin:auto;
 gap:0rem;}
 
 .about_us {width:93%}
 
 .IT_for_kids div {
 padding: 30px;
 margin-top: 3vh;}
 
 .footer_first_div{
 width: 45%;
 }
 .footer_last_div{
 width: 55%;
	}
	.it {width:40%}
	 .footer_img img {width:25%}
	
	.footer_last_div p{
      font-size: 17pt;
      padding-bottom: 15px;
  }
 .dev div p{
 font-size: 17pt;}
 }
	

@media (max-width: 1281px)
{
	 p {
		 font-size:18pt;
		 }
	.about_us {width:100%}	
	
.container {
	width:80vw;
      gap: 1em;
    padding: 85px 20px;
}
/*род. блок для основных дисциплин post, составляющих  модуль!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.row{   
    gap: 1em;
   }
/*род. блок для наименования дисциплин!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.post{
        font-size:27pt /*clamp(36px, 2.2vw, 42px)*/ /*clamp(2rem, 1.5vw + 1rem, 2.5rem)*/;
  }
 
  
  .it {width:48%}
   .footer_img img {width:30%}
  .footer_first_div{
    width: 42%;
	}
.footer_last_div{
    width: 58%;
	}
  .footer_last_div p{
      font-size: 15pt;
      padding-bottom: 15px;
  }
 .dev h6 {
 font-size:20pt;}
 .dev div p{
 font-size: 15pt;
 }
 }
@media (max-width: 1200px)
 {
	 #main{width:95%}
	    .logos {
        padding-top: 90px;
        }
		.post{
        font-size:25pt}
	/*.about_us figcaption span {background:rgba(255, 186, 0, 0.3);}*/
	h2{
    font-size:32pt; /*clamp(28px, 3vw, 42px);*/
        margin: 0.3em auto 0.3em auto;
    line-height: 1.2em;
}


/*подзаголовки к дочерним блокам секций!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
 section.for_all {
    
    font-size: 26pt;
        margin-bottom: 0.5em;
		line-height: 1em;
}
    p 
	{font-size:16pt /*clamp(16px, 1.5vw, 24px)*/;
    line-height: 1.2em;}
	.IT_for_kids div {
        padding: 20px;
	margin-top:2vh; }
		.kids_works .grid-container {
     grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kids_works a {
        min-width: 170px;
        padding: 12px 20px;
        font-size: clamp(17px, 2vw, 22px);
    }

    .non-visible_1024 {
        display: none;
    }
	#no4,#no5,#no9,#no10 {display: block;}
	.counseling_adults {
    
    margin-bottom: 12vh;
	}
	
	 .footer_img img {
		 width:30%
		 }
}

@media (max-width: 1025px) {
	nav ul li a{
        font-size: 1em;
        padding: 5px 8px;
    }
    
    nav ul{
        width: 80%;
        margin: auto;
        gap: 5px;
    }
	  h2{
        font-size:30pt; /*clamp(28px, 3vw, 42px);*/
	line-height: 1.2em;}  
          
	 section li,
    figcaption,p,
    h4 {
        font-size:clamp(1em, 3.8vw, 1.55em);
        line-height: 1.45em;
    }
	section .for_all{
          font-size: 25pt;  
			line-height: 1.15em;
    }
	#accordion ul li{
    font-size:clamp(16px, 3.8vw, 24px);
        line-height: 1.45em;
		}
		
    .about_us{margin-top:3vh}
	.about_us figure {
        width:calc(50% - 1rem);
        min-width: 220px;
		
    }
	.about_us figcaption {
		margin-left:10px;}
		
	.children_recruited p{
	font-size:1.6rem
	}
	.children_recruited li{
	font-size:2rem
	}

.about_us img {
        width: clamp(72px, 12vw, 90px);
        height: clamp(72px, 12vw, 90px);
    }
	.container {width:80%;
      gap: 1em;
    padding: 70px 20px 70px 20px;
}
/*род. блок для основных дисциплин post, составляющих  модуль!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.row{ flex-direction:column;  
    gap: 0.5em;
   }
/*род. блок для наименования дисциплин!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.post{
        font-size:23pt /*clamp(36px, 2.2vw, 42px)*/ /*clamp(2rem, 1.5vw + 1rem, 2.5rem)*/;
  }

  .it {width:48%}
  
  .footer_img img {width:40%}
  
  .footer_first_div{
    width: 35%;
	}
.footer_last_div{
    width: 65%;
	}
  .footer_last_div p{
      font-size: 14pt;
      padding-bottom: 14px;
  }
 .dev div p{
 font-size: 14pt;
 }
}
@media (max-width: 900px) {
	
	nav ul li a{
        font-size: 0.85em;
        padding: 5px 7px;
    }
	h2{
        font-size:30pt; /*clamp(28px, 3vw, 42px);*/
	line-height: 1.2em;
	}  
             
	section .for_all{
   
       font-size: 25pt;  
			line-height: 1.15em;
    }
        p {
			font-size:14pt /*clamp(16px, 1.5vw, 24px)*/;
        line-height: 1.3em;
		} 
    .logos {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        padding: 70px 20px 30px;
    }

    .logo_name {
        width: 100%;
        align-items: center;
    }

    .imLog1
    {
        width: min(100%, 380px);
        padding: 0;
    }
	

    .container {
        padding: 30px 20px;
    }

    .row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        gap: 1rem;
    }

    .row .post {
        width: 100%;
        max-width: 620px;
    }
	
		
		.IT_for_kids div {
        padding: 10px;
	margin-top:1vh;
	}

    .children_recruited,
    .accordion,
    .IT_for_kids div {
        border-radius: 30px;
    }

   .it {
	   width:65%
	   }
  
  .footer_img img {
	  width:45%
	  }
  
  .footer_first_div{
    width: 30%;
	}
.footer_last_div{
    width: 70%;
	}
  .footer_last_div p{
      font-size: 13pt;
      padding-bottom: 13px;
  }
  .dev h6 {
 font-size:17pt;
 }
 .dev div p{
 font-size: 14pt;
 }
}

 @media (max-width: 769px){
		
	nav ul li a{
		/*font-size:0.8em;*/
	font-weight:700;
	}
	h2{
	font-size:24pt;}
	section .for_all{
   
       font-size: 22pt;  
			line-height: 1.15em;
    }
	.container {
   /* padding: 20px 12px ; */   
    margin-top:0;
	gap:0em}
	.container .row {
		
	gap:0.2rem}
	.child {
		font-size:20pt
		}
	.children_recruited p{
	font-size:1.2rem;
	color: rgba(255,136,0,1.0)
	}
	.children_recruited li{
	font-size:1.4rem
	}
	.about_us img {
		width:clamp(72px, 12vw, 90px);
        height:clamp(72px, 12vw, 90px);
	
	}
     .about_us {
		width:100%; }
		
	.about_us figure {
        width: 50%;
	}
    .about_us figcaption{
       /* background: #FFBA00;*/
        border-radius: 10px;
        padding-left: 5px;
        font-size: 1rem;
		margin-left:0;
		width:auto;
		
    }
    .about_us figcaption span{
        width:auto;
        padding-right:5px ;
    }
		.counseling_adults{
		margin-bottom:8vh
		}
	.accordion{
    padding: 25px 5%;
	}
	
   .it {
	   width:70%
	   }
   
  .footer_img img {
	  width:50%
	  }
  
  .footer_first_div{
    width: 30%;
	}
.footer_last_div{
    width: 70%;
	}
  .footer_last_div p{
      font-size: 0.95rem;
      padding-bottom: 13px;
  }
 .dev div p{
 font-size:  0.95rem;
 }
}

/*подзаголовки к дочерним блокам секций!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

@media (max-width: 640px) {
    h2{
        font-size: 20pt;
        line-height: 1.2em;
        margin: 2vh auto;
    }

	section .for_all {
        font-size:19pt;
		}
	
     section li,
    figcaption,
    .tabs__text,
    h4,
    #accordion ul li {
        font-size: clamp(20px, 3.8vw, 25px);
        line-height: 1.45;
    }

    .menu img {
        width: 56px;
        padding: 8px;
    }

    .container {
        gap: 0rem;
       
    }

   .post {
        font-size: 16pt;
        padding: 1px ;
    }
   
    .children_recruited,
    .accordion,
    .IT_for_kids div {
        
        border-radius: 24px;
    }
	
    .IT_for_kids img {
        width: min(96px, 28vw);
        float: none;
        display: block;
        margin: 16px auto ;
    }

    .kids_works .grid-container {
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
    }

    .kids_works a {
        width: auto;
        min-width: min(220px, 70%);
        padding: 12px 18px;
        font-size: 18px;
    }

    
    #banner {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }
	
	 .dev h6 {
 font-size:15pt;
	}
	}

@media (max-width: 577px) {
	.column{
		width:100%;
		}
		
	.container4{
	width:100%;
	display: flex;
    flex-direction: column;
    /*flex-wrap: wrap;*/
    justify-content:flex-start;
    align-items: center;
	outline:0px green solid;
	 }
	.about_us .noneAbout{
        display: none;
    }

    .container2,.container3{
	display: none;
	}
	
	.about_us figure {
        width: 70%;
	}
	    .about_us figcaption{
       /* background: #FFBA00;*/
        border-radius: 10px;
        padding: 5px;
        font-size: 1rem;
		margin-left:0;
		/*width:100%;*/
	outline:0px red solid;	
    }
	 .about_us figure {
		 flex-direction:row;
        align-items: center;
		justify-content:left;
        gap: 0.75rem;
		margin-left:3vw;
        margin-bottom: 1rem;
		width:70%;
		padding-left:0;
		outline:0px blue solid;
    }
	.about_us figcaption span {
		background:rgba(255, 186, 0, 0.0);
		padding-right:0;}	
		}
	
	
    
	

	@media (max-width: 481px){
	
		nav ul {
		flex-direction:column;
		}
	nav ul li a {
	font-size:0.8em;	
	}
	.menu img {
	width: 9.5vh;
	padding:30px 12px;
 opacity:0.45;
	}
	.children_recruited p {
		color: rgba(255,136,0,1.0);
		}
    
	#main {
		width:100vw;}
	
	.logos {
        padding: 50px 16px 20px;
    }
	 .imLog1 {
        width: min(75%, 360px);
        padding: 0;
    }


    .logo_name a {
        font-size:clamp(18px, 5vw, 1.5em);
    }
	
	.children_recruited{
	width:98%;
	padding:5% 5%;
	}
	.child {
		font-size:22pt
		}
		
	.children_recruited p{
	font-size:1.2rem
	}
	.children_recruited li{
	font-size:1.5rem
	}

    .children_recruited ul {
        padding-left: 1rem;
    }
	

    .kids_works img.show {
        width: min(95vw, 95%);
        max-height: 85vh;
    }

    .non-visible_1024 {
        display: block;
    }
	.IT_for_kids div {
	width:98%
	}
	
	.footer_first_div{
    width: 59%;
	margin:auto;
	}
	
	.footer_last_div{
		width:95%;
	margin:auto;
		}
	.footer_first_div a {
	display:block;
	float:right;
	width:35%;
	}
	
	 .it {
		 width:59%;float:left;
		 }
  .footer_img img {
	  width:95%;
	  margin:auto
	  }
    
  /*.footer_last_div p {
      font-size: 0.73rem;
      padding-bottom: 13px;
  }
   .dev h6 {
 font-size:12pt;
 }
 
 .dev div p {
 font-size:  0.85rem;
 }*/
 
	}

@media (max-width: 426px){
	
   h2{
        font-size: 18pt;
        line-height: 1.2em;
        margin: 2vh auto;
    }
	
	footer .yes2 {
	display:block;
	width:auto;
	padding-top:3px;
	}
	
	section .for_all {
        font-size:17pt; 
    }

	section span{
    	background:rgba(255, 186, 0, 0.5);
		}

   .IT_for_kids div p {
    font-size:1rem
   }
	 .about_us figure {
		 width:90%;
	 }

    .gallery-controls{
        display: block;
		padding-bottom:20px;
    }

    .boxForMobileBtn{
        margin: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: fit-content;
    }

    .leftButton,.rightButton{
        display: none;
    }

    #num2{
        display: block;
    }
	
    .kids_works div img{
		transition:none}
		
    .kids_works div img:hover{
        transform: none;
		-webkit-transform: none
    }

		
	.counseling_adults{
		margin-bottom:7vh
		}
		.dev h6 {
 font-size:11pt;}
	
}

@media (max-width: 376px){
	
	nav ul li a {
	font-size:0.75em;	
	}	
	
	h2{
        font-size: 1.35em;
        line-height: 1.2em;
        margin: 1vh auto;
    }
    
    

	section .for_all {
	font-size:15pt;
    } 
	
.container {
	width:97%
}

	.container .post{
        color:rgba(255,136,0,0.8);
    }
	
.child {
	font-size:20pt}
	
	.children_recruited p{
	font-size:1.1rem;
	letter-spacing:2px;
	font-weight:600;
	}
	.children_recruited li{
	font-size:1.2rem
	}

	.IT_for_kids  div {
	width:99%}
	
	.counseling_adults{
		margin-bottom:6vh
		}
		
	.footer_first_div{
    width: 65%;
	margin:auto;
	}
	.it {
		width:65%;}
	
  .footer_img img {
	  width:95%;
	  margin:auto
	  }
	  
	 /* .footer_last_div p{
      font-size: 0.73rem;
      padding-bottom: 13px;
  }*/
   .dev h6 {
 font-size:12pt;}
 
 /*.dev div p{
 font-size:  0.75rem;
 }*/
 #banner span{
	 font-size:0.85rem}
    
}

@media (max-width: 321px){
	
	h2{
        font-size: 1.3em;
        line-height: 1.2em;
        margin: 1vh auto;
    }
	/*h4,
    #accordion ul li
    {
        font-size: 14pt;
        line-height: 1.45;
    }*/
	/*section .for_all {
	font-size:12pt;}*/
	
	
	/*.IT_for_kids div p 
   {font-size:0.93rem
   }
	
	.child {
		font-size:18pt
		}*/
		
	/*.children_recruited p{
	font-size:0.9rem
	}
	.children_recruited li{
	font-size:1rem
	}*/
    footer .footer_last_div p, footer .dev p {
	font-size:0.89em  ;
	}
	.post {
        font-size: 14pt;
        padding: 0px ;
    }
	.counseling_adults {
		margin-bottom:5vh;
		}
		.about_us figure {
		width:100%;
		margin-left:0;
		}	
		.about_us figcaption,.about_us figcaption span{
		width:100%;
		/*margin-left:0;*/
		}
		
		.about_us img {
        width:62px;
		height:62px;
		}
		
		 
	 #banner span{
		 font-size:0.80rem
		 }
	
}