@charset "utf-8";

/* CSS Document */

@font-face {
  font-family: 'Roboto', sans-serif;
}

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin-top: 0px!important;
}

h2 {
  font-family: 'Roboto', sans-serif;
  font-size: calc((var(--footer-font-size))+4px);
}

h3 {
  font-family: 'Roboto', sans-serif;
  font-size: calc((var(--footer-font-size))+3px);
}

img {
  border: none;
}

textarea:focus,
input:focus,
a:hover {
  outline: none;
}

div.banner-block {
  /*-webkit-transition: all 0.2s ease;-o-transition: all 0.2s ease;-moz-transition: all 0.2s ease;*/
  border: none;
  border-radius: 0px;
}

div.banner-block:hover {
  box-shadow: none !important;
  border-radius: 7px;
}

a {
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  color: #00aded;
  text-decoration: none;
}

.mesh-button:active .mesh-button:focus {
  outline: none;
  cursor: pointer;
}

.mesh-button:hover {
  outline: none;
  cursor: pointer;
}

.mesh-button: {
  cursor: pointer!important;
}

.mesh-button-padding {
  padding-left: calc(var(--basic-padding)*1.25);
  padding-right: calc(var(--basic-padding)*1.25);
  padding-top: 0px;
}

a,
a:active,
a:hover,
a:focus {
  outline: none;
  text-decoration: none;
}

table#mesh-table1,
table#mesh-table2,
table#mesh-table3,
table#mesh-table4 {
  border-collapse: collapse;
  /* Убираем двойные линии между ячейками */
}

table#mesh-table1 td,
th,
table#mesh-table2 td,
th,
table#mesh-table3 td,
th,
table#mesh-table4 td,
th {
  padding: 4px;
  /* Поля вокруг содержимого таблицы */
  font-family: 'Roboto', sans-serif;
  border: 1px solid white;
  /* Параметры рамки */
  color: white;
  font-size: var(--footer-font-size);
}

table#mesh-table1 tr:not(:nth-child(1)):hover,
table#mesh-table2 tr:not(:nth-child(1)):hover,
table#mesh-table3 tr:not(:nth-child(1)):hover,
table#mesh-table4 tr:not(:nth-child(1)):hover {
  background-color: #D79AF1;
  cursor: pointer;
}

.mesh-slide-show {
  height: var(--height-mesh);
  width: 100%;
  padding-left: 0px;
}

.mesh-header {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  font-family: 'Roboto', sans-serif;
  padding: 10px;
  flex-wrap: wrap;
  font-size: var(--footer-font-size);
}

.mesh-body {
  padding: 10px!important;
}

.sticky {
  position: sticky;
  position: -webkit-sticky;
  /* Safari */
  top: 0px;
  background: white;
  z-index: 3;
  border: 2px solid white;
}

center {
  padding-bottom: var(--basic-padding);
  padding-left: var(--basic-padding);
  padding-right: var(--basic-padding);
  position: absolute;
}

.header {
  height: auto;
  padding-bottom: var(--basic-padding);
  top: 0px;
  width: 100%;
  display: var(--header-big-display);
}

.header-mobile {
  padding-bottom: var(--basic-padding);
  display: var(--header-small-display);
  position: relative;
  z-index: 1001;
}

.header-small-div {
  z-index: 1;
  position: relative;
  pointer-events: none;
}

.menu-ico-svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform .25s ease-in-out;
  -webkit-transform: rotate(0deg);
  -webkit-transform-origin: 50% 50%;
  -webkit-transition: -webkit-transform .25s ease-in-out;
}

.menu-ico {
  transform: rotate(0deg);
  transition: .3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  -webkit-transform: rotate(0deg);
  -webkit-transition: .3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  cursor: pointer;
  color: white;
  width: 11.25vw;
}

.menu-ico[rotatedSign="1"] .menu-ico-svg:nth-child(2) {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.menu-ico[rotatedSign="1"] .menu-ico-svg:nth-child(3) {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.menu-ico[rotatedSign="1"] .menu-ico-svg:nth-child(1) {
  opacity: 0;
}

.menu-ico[rotatedSign="1"] .menu-ico-svg:nth-child(4) {
  opacity: 0;
}

.menu-ico[rotatedSign="1"] {
  color: white;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.header-mobile-menu-ico-div {
  margin-top: calc((var(--basic-padding))*1.25);
  margin-left: calc((var(--basic-padding))*2);
  width: 11.25vw;
  top: 0px;
  left: 0px;
  z-index: 2;
  position: absolute;
}

.header-img {
  width: 100%;
  height: auto;
  position: relative;
}

.nav-container {
  display: var(--nav-cont-display);
  justify-content: center;
  align-items: center;
  padding-bottom: var(--basic-padding);
  flex-wrap: wrap;
}

.flex-container {
  justify-content: flex-start;
  flex-wrap: wrap;
  display: flex;
}

.nav-mobile {
  background: url(../pics/menu.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden!important;
  transform-origin: 0 0;
  -web-kit-transform-origin: 0 0;
  position: relative;
  border-bottom-right-radius: 15%;
  width: 100%;
  height: 100%;
  display: var(--off-canv-display)!important;
}

.nav-mobile-txt {
  position: relative;
  align-items: left;
  text-align: left;
  justify-content: flex-start;
  display: flex;
  flex-direction: var(--nav-mobile-txt-flex-dir);
  flex-wrap: wrap;
}

.nav-block-cell {
  background: linear-gradient(90deg, #A546CC, #64169B);
  height: var(--nav-col-h);
  border-radius: 15px;
  margin-right: var(--nav-block-margin);
  margin-bottom: var(--nav-block-margin);
  align-items: center;
  width: var(--nav-col-w);
  font-size: var(--nav-block-font-size);
  font-family: 'Roboto', sans-serif;
  position: relative;
}

.nav-block-cell:hover {
  background: linear-gradient(90deg, #64169B, #A546CC);
}

.nav-block-cell-label {
  height: var(--nav-col-h);
  align-items: center;
  text-align: center;
  justify-content: center;
  display: flex;
  white-space: normal;
  line-height: normal;
  color: white;
}

.nav-block-cell-label-mobile {
  text-align: left;
  line-height: 150%;
  color: white;
  margin-top: 0%;
  margin-bottom: 7%;
  margin-right: 7%;
  margin-left: 0px;
  font-size: var(--mob-menu-font-size);
  position: relative;
}

.panel {
  width: var(--panel-w);
  height: var(--panel-h);
  background-color: #FAE6FB;
  border-radius: var(--panel-border-radius);
  float: left;
  margin-right: var(--panel-margin-right);
  margin-bottom: var(--panel-margin-bottom);
  position: relative;
}

.panel-full {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
}

.panel-border {
  background-color: white;
  box-shadow: inset 0px 0px 0px 1px #957EEE!important;
  border-radius: var(--panel-border-radius);
}

.panel-border-open-school {
  background: #4507ca;
  position: relative;
}

.panel-info-show {
  width: var(--panel-w);
  height: var(--panel-h);
  background-color: #FAE6FB;
  border-radius: var(--panel-border-radius);
  float: right;
  margin-right: 10px;
  margin-bottom: 10px;
  z-index: 1;
  position: absolute;
}

.info-img-div {
  float: right!important;
  position: absolute!important;
  right: 5px;
  top: 5px!important;
  z-index: 2!important;
  cursor: pointer!important;
  justify-content: center!important;
  height: var(--info-img-h);
}

.video-img-div {
  float: right!important;
  position: absolute!important;
  left: 5px;
  bottom: calc(var(--panel-bottom-h)*1.05);
  z-index: 2!important;
  cursor: pointer!important;
  justify-content: center!important;
  height: var(--info-img-h);
}

.info-img {
  height: var(--info-img-h);
}

.video-img {
  height: var(--info-img-h);
}

.info-img-div:hover {
  -webkit-animation: swing 0.5s ease;
  animation: swing 0.5s ease;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  filter: sepia(90%);
}

.video-img-div:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.panel-img {
  width: var(--panel-w);
  height: var(--img-h);
  border-top-right-radius: var(--panel-border-radius);
  border-top-left-radius: var(--panel-border-radius);
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
}

.panel-img:hover {
  /*filter: invert(25%);*/
}

.panel-img-p {
  width: var(--img-w);
  height: var(--img-h);
  border-top-right-radius: var(--panel-border-radius);
  border-top-left-radius: var(--panel-border-radius);
  border-top: 1px solid #957EEE;
  border-left: 1px solid #957EEE;
  border-right: 1px solid #957EEE;
  position: relative;
}

.panel-img-p:hover {
  /*filter: invert(25%);*/
}

.panel-img-full {
  width: var(--panel-w);
  height: var(--panel-h);
  border-radius: var(--panel-border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: relative;
}

.panel-img-full:hover {
  /*filter: invert(25%);*/
}

.panel-img-full-wh {
  width: var(--panel-w);
  border-radius: var(--panel-border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: relative;
}

.panel-img-full-wh:hover {
  /*filter: invert(25%);*/
}

.do-hover:hover {
  /*filter: invert(25%);*/
}

.undo-hover:hover {
  filter: none!important;
}


/*для подписей внизу плашки*/

.panel-bottom-div {
  width: 100%;
  height: var(--panel-bottom-h);
  display: inline-flex;
}

.header-block {
  font-size: var(--header-font-size);
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  padding-top: var(--header-block-top-pad);
  padding-bottom: var(--header-block-bottom-pad);
  text-align: left;
}

.news-block {
  font-size: calc(var(--head-url-font-size)*0.8);
  color: black;
  font-family: 'Roboto', sans-serif;
  text-align: left;
  vertical-align: top;
}

.news-block-dt {
  font-size: var(--head-url-font-size);
  color: black;
  font-family: 'Roboto', sans-serif;
  text-align: left;
  vertical-align: top;
  padding-bottom: 5px;
  padding-top: 5px;
}

.news-block-img {
  padding-right: 10px;
  float: left;
}

a.news-block-main,
a.news-block-main:hover {
  color: #5A2497;
  text-align: right;
  font-size: calc(var(--head-url-font-size)*0.8);
  font-family: 'Roboto', sans-serif;
  text-decoration: underline;
}

div.news-block-main,
div.news-block-main:hover {
  color: #5A2497;
  text-align: right;
  font-size: calc(var(--head-url-font-size)*0.8);
  font-family: 'Roboto', sans-serif;
  text-decoration: underline;
}

.news {
  /*box-shadow: 0 0 40px rgba(0, 0, 0, .1) inset; */
  cursor: pointer;
  padding: 10px;
  position: relative;
}

.news:hover {
  box-shadow: 0 0 40px rgba(0, 0, 50, .1) inset;
}

.head-url {
  font-size: var(--head-url-font-size);
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: var(--head-url-line-height);
  padding-bottom: var(--basic-padding);
  text-align: left;
  font-family: 'Roboto', sans-serif;
  padding: calc(var(--basic-padding)*1.5);
  flex-wrap: wrap;
}

.head-url-white {
  font-size: var(--head-url-font-size);
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: var(--head-url-line-height);
  padding-bottom: var(--basic-padding);
  text-align: left;
  font-family: 'Roboto', sans-serif;
  padding: calc(var(--basic-padding)*1.5);
  flex-wrap: wrap;
  color: white;
}

#sdam-gia {
  color: white!important;
  justify-content: center!important;
  padding-top: calc(5px + var(--info-img-h));
}

.for-parent-label {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #D79AF1;
  /*background: linear-gradient(90deg, #957EEE, #D79AF1);*/
  border-bottom-left-radius: var(--panel-border-radius);
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-size: var(--label-font-size);
}

.for-parent-label:hover {
  filter: hue-rotate(45deg);
}

.for-teacher-label {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #957EEE;
  /*background: linear-gradient(90deg, #957EEE, #6666ff);*/
  border-bottom-right-radius: var(--panel-border-radius);
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-size: var(--label-font-size);
}

.for-teacher-label:hover {
  filter: hue-rotate(-45deg);
}

.do-teacher-hover:hover {
  filter: hue-rotate(-45deg);
}

.teacher-grad {
  background: linear-gradient(90deg, #957EEE, #6666ff);
}

.teacher-big-button {
  background: linear-gradient(90deg, #957EEE, #6666ff);
  padding-top: var(--header-block-top-pad);
  padding-bottom: var(--header-block-bottom-pad);
}

.dist-edu-text {
  font-size: var(--dist-edu-font-size);
  text-align: justify;
  line-height: normal;
}

.communication-flex-container {
  max-width: var(--max-w);
  padding-bottom: calc(--var(basic-padding)*2)!important;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.communication-img {
  padding: var(--communication-img-padding);
}

.communication-img:hover {
  filter: hue-rotate(30deg);
}

.slide-show {
  max-width: var(--max-w);
  padding-bottom: calc(var(--basic-padding)*2);
  display: flex;
}

.small-img {
  width: var(--small-nav-img-w);
}

.big-img {
  width: var(--big-nav-img-w);
}

.m-width-slider {
  width: var(--max-w);
}

.m-width {
  max-width: var(--max-w);
  width: 100%;
  width: auto !important;
  /* IE max-width hack */
  width: var(--max-w);
  /* width value for IE */
}

.m-width1120 {
  max-width: 1120px;
  width: 100%;
  width: auto !important;
  /* IE max-width hack */
  width: 1120px;
  /* width value for IE */
}

.left-round-border {
  width: 100%!important;
  border-bottom-left-radius: var(--panel-border-radius);
  border-bottom-right-radius: var(--panel-border-radius);
}

.teacher-button {
  font-size: var(--nav-block-font-size);
  color: white;
  align-items: center;
  height: var(--panel-bottom-h);
  min-width: calc(var(--panel-w)*0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: var(--panel-border-radius);
  border-bottom-right-radius: var(--panel-border-radius);
  border-top-left-radius: var(--panel-border-radius);
  border-top-right-radius: var(--panel-border-radius);
  cursor: pointer;
  margin-top: var(--header-block-top-pad);
  margin-bottom: var(--header-block-bottom-pad)!important;
  padding-left: 15px;
  padding-right: 15px;
}

.obrazovarium-small-font {
  color: white!important;
  font-size: calc(var(--head-url-font-size)/1.3)!important;
}

.footer-tel {
  padding-top: calc(--var(basic-padding)*2);
  font-size: var(--footer-font-size);
}

.footer-epos {
  padding-top: calc(--var(basic-padding)/2);
  padding-bottom: calc(--var(basic-padding)*2);
  font-size: var(--footer-font-size);
}

.slider-padding {
  padding-bottom: calc(--var(basic-padding)*2)!important;
}

.corona {
  font-size: var(--corona-font-size);
  font-weight: normal;
  font-family: 'Roboto', sans-serif;
  display: inline-flex;
  justify-content: flex-start;
  text-align: left;
  align-items: center;
  position: relative;
}

.corona-img {
  float: left;
  padding-right: calc((var(--basic-padding))*0.5);
  align-items: center;
  display: inline-flex;
}

.corona-main-div {
  padding-left: var(--basic-padding)!important;
  padding-right: var(--basic-padding)!important;
  padding-bottom: var(--basic-padding);
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
}

.corona-inner-div {
  cursor: pointer;
  background-size: cover;
  border-radius: 15px;
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  text-align: left;
}

.neskucho-main-div {
  padding-left: var(--basic-padding)!important;
  padding-right: var(--basic-padding)!important;
  padding-bottom: var(--basic-padding);
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
}

.neskucho-block {
  cursor: pointer;
  background-size: cover;
  border-radius: 15px;
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  text-align: left;
  align-items: center;
}

.free-cont {}

.pay-cont {}

.ref-div {
  position: absolute!important;
  width: 100%!important;
  bottom: 100%!important;
  /*background-color:red!important;*/
  border: none;
  z-index: -1;
}

@keyframes phone-ring {
  0% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
  50% {
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    filter: hue-rotate(30deg);
  }
  55% {
    transform: scale(1.155);
    -webkit-transform: scale(1.155);
    filter: hue-rotate(45deg);
  }
  100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    filter: hue-rotate(-30deg);
  }
}

.phones {
  position: sticky;
  position: -webkit-sticky;
  /* Safari */
  bottom: calc((var(--basic-padding))*2);
  right: calc((var(--basic-padding))*2);
  float: right;
  background: white;
  z-index: 2;
  width: var(--phone-size);
  height: var(--phone-size);
  cursor: pointer;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  display: inline-block;
  border: none;
}

.phones:hover {
  animation-name: phone-ring;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes offCanvasFadeOut {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0.3;
    width: 100%;
    height: 100%;
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
  }
  100% {
    opacity: 0.2;
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
  }
}

.fade-out {
  animation: offCanvasFadeOut 0.5s;
  animation-fill-mode: forwards;
  -webkit-animation: offCanvasFadeOut 0.5s;
  -webkit-animation-fill-mode: forwards;
}