body {
    background: #1C1B1A;
    font-family: 'FuturaFuturis', sans-serif;
    color: white;
    height: 100vh; 
    width: 100vw;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

body.white{
  background: white;
  color: #1C1B1A; 
}

  /*Убрать полосу прокрутки для всей страницы*/
::-webkit-scrollbar {
  width: 0;
}


@font-face {
  font-family: 'FuturaFuturis';
  src: url("../fonts/FuturaFuturis-Regular.eot");
  src: url("../fonts/FuturaFuturis-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/FuturaFuturis-Regular.woff2") format("woff2"), url("../fonts/FuturaFuturis-Regular.woff") format("woff"), url("../fonts/FuturaFuturis-Regular.ttf") format("truetype"), url("../fonts/FuturaFuturis-Regular.svg#FuturaFuturis-Regular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'FuturaFuturisLight';
  src: url("../fonts/FuturaFuturisLight.eot");
  src: url("../fonts/FuturaFuturisLight.eot?#iefix") format("embedded-opentype"), url("../fonts/FuturaFuturisLight.woff2") format("woff2"), url("../fonts/FuturaFuturisLight.woff") format("woff"), url("../fonts/FuturaFuturisLight.ttf") format("truetype"), url("../fonts/FuturaFuturisLight.svg#FuturaFuturisLight") format("svg");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'FuturaFuturisC';
  src: url("../fonts/FuturaFuturisC.eot");
  src: url("../fonts/FuturaFuturisC.eot?#iefix") format("embedded-opentype"), url("../fonts/FuturaFuturisC.woff2") format("woff2"), url("../fonts/FuturaFuturisC.woff") format("woff"), url("../fonts/FuturaFuturisC.ttf") format("truetype"), url("../fonts/FuturaFuturisC.svg#FuturaFuturisC") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'FuturaFuturisC';
  src: url("../fonts/FuturaFuturisC-Bold.eot");
  src: url("../fonts/FuturaFuturisC-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/FuturaFuturisC-Bold.woff2") format("woff2"), url("../fonts/FuturaFuturisC-Bold.woff") format("woff"), url("../fonts/FuturaFuturisC-Bold.ttf") format("truetype"), url("../fonts/FuturaFuturisC-Bold.svg#FuturaFuturisC-Bold") format("svg");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Bebas Neue';
  src: url("../fonts/BebasNeueBold.eot");
  src: url("../fonts/BebasNeueBold.eot?#iefix") format("embedded-opentype"), url("../fonts/BebasNeueBold.woff2") format("woff2"), url("../fonts/BebasNeueBold.woff") format("woff"), url("../fonts/BebasNeueBold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Proxima Nova Lt';
  src: url("../fonts/ProximaNova-Light.eot");
  src: url("../fonts/ProximaNova-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova-Light.woff2") format("woff2"), url("../fonts/ProximaNova-Light.woff") format("woff"), url("../fonts/ProximaNova-Light.ttf") format("truetype"), url("../fonts/ProximaNova-Light.svg#ProximaNova-Light") format("svg");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Proxima Nova Th';
  src: url("../fonts/ProximaNovaT-Thin.eot");
  src: local("Proxima Nova Thin"), local("ProximaNovaT-Thin"), url("../fonts/ProximaNovaT-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNovaT-Thin.woff") format("woff"), url("../fonts/ProximaNovaT-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal; }


  
  .header{
    padding-top: 1vh;
  //  position: fixed;
     top: 0;
     height: 16vh;
     z-index: 999;
     overflow: hidden;
     width: 100%;
     // border: 1px solid red;
     font-family: 'FuturaFuturisC';
     font-weight: bold;
     overflow: visible;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1c1b1a+0,1c1b1a+99&1+68,1+68,0+100 */
background: -moz-linear-gradient(top,  rgba(28,27,26,1) 0%, rgba(28,27,26,1) 68%, rgba(28,27,26,0.03) 99%, rgba(28,27,26,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(28,27,26,1) 0%,rgba(28,27,26,1) 68%,rgba(28,27,26,0.03) 99%,rgba(28,27,26,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(28,27,26,1) 0%,rgba(28,27,26,1) 68%,rgba(28,27,26,0.03) 99%,rgba(28,27,26,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c1b1a', endColorstr='#001c1b1a',GradientType=0 ); /* IE6-9 */
  }

  body.white .header,
  body.white .footer{
    background: #ffc500;

  }

  .header .table-header{
    display: flex;
    justify-content: space-around;
    height: 50%;
    border: 0px;
  }

  .footer{
    z-index: 999;
    position: fixed;
    bottom: 0vh;
    height: 6vh; 
    overflow: hidden;
    width: 100%;
    font-family: 'FuturaFuturisC';
    font-weight: bold;
    overflow: visible;
    background: #ffc500;
    padding: 0.5vh 0vw;
    color: black;
  }

  .footer .marquee{
    overflow: hidden;
  }

  .marquee .js-marquee-wrapper{
    width: 500vw!important;
  }

  .table{
    width: 100%;
  }

  .table .row{
    width: 25%;
    justify-content: center;
    padding: 3.42vh 0;
  }


  .col .row{
    width: 25%;
    justify-content: center;
  
  }

  .table .row:first-child,
  .col .row:first-child {
    width: 15%;
  }

  .table .row:nth-child(2),
  .col .row:nth-child(2){
    width: 35%;
  }

  .table-body{
    display: flex;
    flex-flow: column;
  }

  .table-header,
  .table-column{
    width: 100%;
     display: flex;
     justify-content: space-around;
     font-family: 'FuturaFuturisC';
     font-weight: bold;
     overflow: visible;
     border-bottom: 2px solid #262626;
     align-items: center;
  } 
  
  .table-column{
    position: relative;
  }

  body.white .table-column{
    border-bottom: 2px solid #DADADA;
  }

  .progress{
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    z-index: -1;
    transition: 1.5s;
  }

.shildik{
    content: '';
    position: absolute;
    width: 1%;
    height: 100%;
    left: 0;
    opacity: 1;
    transition: 0.4s;
  }

  .table-column.active{
    background-color: #3a38375e;
  }

  body.white .table-column.active{
    background-color: #f4f4f45e;
  }


  .table-column.active .progress{
    background-color: grey;
    opacity: 0.4;
  }

  .col,
  .table-body .row{
    font-size: 1.75vw;
    text-align: center;
  }

  .table-body .row{
    font-weight: 100;
    background-color: transparent;
  }

  .row {
    flex: 0 1 auto;
   // border: 0px solid grey;
    font-size: 1em;
    text-align: left;
    vertical-align: center; 
    display: flex;
    height: 100%;
    align-items: center;
     // border: 1px solid white;
   }


   .bird{
      position: absolute;
      overflow: visible;
      background-image: url(https://tv.territoria.center/files/bird.svg);
      background-position: top;
      background-size: contain;
      background-repeat: no-repeat;
      max-height: 20vh;
      width: 7vw;
      top: 15px;
      left: 15px;
   }

   body.white .bird{
    background-image: url(https://tv.territoria.center/files/black-bird.svg);
   }

   .w5{
     width: 6%;
   }

   .w75{
    width: 75%;
  }

  .w45{
    width: 45%;
  }

  .w40{
    width: 40%;
  }

  .w30{
    width: 30%;
  }

  .stroke-container{
    position: absolute;
    content: '';
    top: 10px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: visible;
  }

  .header .time .stroke-container{
    transform: scale(1.5);
    background-image: url(https://tv.territoria.center/files/stroke.svg);
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    top: 10px;
  }
  .header .title .stroke-container{
    transform: scale(1.5);
    background-image: url(https://tv.territoria.center/files/groupp.svg);
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    width: 45%;
    margin: 0 auto;
    bottom: 0px;
  }
  .header .date .stroke-container{
    transform: scale(1.5);
    background-image: url(https://tv.territoria.center/files/date-stroke.svg);
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    width: 35%;
    margin: 0 auto;
    bottom: 10px;
  }

  body.white .header .time .stroke-container{
    background-image: url(https://tv.territoria.center/files/black-stroke.svg);
  }
  body.white .header .title .stroke-container{
    background-image: url(https://tv.territoria.center/files/black-groupp.svg);
    width: 45%;
    margin: 0 auto;
    bottom: 0px;
  }
  body.white .header .date .stroke-container{
    background-image: url(https://tv.territoria.center/files/black-date.svg);
    
  }

  .header .time,
  .header .title,
  .header .date {
    position: relative;
  }

  .title {
   // overflow: hidden;
    justify-content: center;
}

  .title,
  .time{
    font-size: 2.5vw;
  }

  .date {
    font-size: 2vw;
  }

  .footer .title,
  .footer .date{
    font-size: 3.5vh;
    width: 100%;
    line-height: 100%;
    max-height: 6vh;
    display: flex;
    align-items: center;
  }

  .time,
  .date{
    text-align: center;
    justify-content: center;
  }

  
@keyframes confetti-slow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
  }
}
@keyframes confetti-medium {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
  }
}
@keyframes confetti-fast {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
  }
}


.container {
  width: 100vw;
    height: 100vh;
    background: #ffffff;
    background-image: url(https://acegif.com/wp-content/gif/confetti-4.gif);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid white;
    display: flex;
    top: 0px;
    z-index: 999999;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    color: black;
    font-size: 2.5vw;
    text-align: center;
    position: fixed;
   // transform: scale(0);
  //  transition: transform .2s cubic-bezier(.59,.08,.385,1), border-radius .1s cubic-bezier(.59,.08,.385,1) 0.2s;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.container div{
  z-index: 9;
}

.container.active{
  transform: scale(1);
  border-radius: 0;
  opacity: 1;
  pointer-events: none;
}

.container .title{
  font-size: 4vw;
  font-family: 'FuturaFuturisC';
  font-weight: bold;
  color: #ffc500;
}

.container .time{
  font-size: 4vw;
  font-family: 'FuturaFuturisC';
  font-weight: bold;
  color: #202020;
}

.container-img{
  width: 45vw;
  height: 45vh;
  margin: 0 auto;
 // background-image: url('');
}

.container-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lessons{
  // display: flex;
   // flex-direction: column;
    max-height: 35vh;
   overflow-y: auto;
   margin: 0 1vw;
}


.container::before{
  position: absolute;
  content: '';
  height: 55vh;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,93,177,0);
  background: -moz-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(255,255,255,0.83) 71%, rgba(255,255,255,1) 86%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,93,177,0)), color-stop(71%, rgba(255,255,255,0.83)), color-stop(86%, rgba(255,255,255,1)));
  background: -webkit-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(255,255,255,0.83) 71%, rgba(255,255,255,1) 86%);
  background: -o-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(255,255,255,0.83) 71%, rgba(255,255,255,1) 86%);
  background: -ms-linear-gradient(top, rgba(255,93,177,0) 0%, rgba(255,255,255,0.83) 71%, rgba(255,255,255,1) 86%);
  background: linear-gradient(to bottom, rgba(255,93,177,0) 0%, rgba(255,255,255,0.83) 71%, rgba(255,255,255,1) 86%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ffffff', GradientType=0 );
} 

.lessons .row{
 // justify-content: center;
  display: inline-block;
  background-color: #dedede;
  height: auto;
  background-color: r;
  margin: 5px;
  padding: 0 20px;
  border-radius: 50px;
  color: white;
  font-size: 1.5vw;
}

.class,
.room{
  margin: 1vh;
  display: inline-block;
}



.confetti-container {
  perspective: 700px;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0%;
}
.confetti--animation-slow {
  animation: confetti-slow 2.25s linear 1 forwards;
}
.confetti--animation-medium {
  animation: confetti-medium 1.75s linear 1 forwards;
}
.confetti--animation-fast {
  animation: confetti-fast 1.25s linear 1 forwards;
}


.btn-tada {
  padding: 12px 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background-image: linear-gradient(
    90deg,
    #03a9f4 0%,
    #8bc34a 33.33%,
    #ffc107 66.66%,
    #ff5722 100%
  );
  background-size: 300% 100%;
  background-position: 0% 0%;
  border: none;
  color: #fff;
  font-weight: 500;
}

.btn-tada:hover {
  animation: background 1s ease-in-out infinite alternate;
}

.paper {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  left: 0;
  will-change: transform;
  perspective: 500px;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }

  100% {
    transform: rotateY(1080deg) rotateX(360deg);
  }
}

@keyframes background {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 100% 0%;
  }
}


.swiper,
.swiper-slide {
  width: 100vw;
  height: 100%;
}

.content__container {
  overflow: hidden;
  height: 4vh;
}

.content__container__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.content__container__list__item {
  line-height: 100%;
  margin: 0;
//  transition: 0.2s;
  text-align: center;
}

body.white .content__container__list__item:first-child,
.content__container__list__item:last-child{
  opacity: 0;
}

body.white .content__container__list__item:last-child,
.content__container__list__item:first-child{
  opacity: 1;
}

body.white .change-text .content__container__list__item {
  transform: translate3d(0, -100%, 0);
}