/*Настройка скрол-бара*/

::-webkit-scrollbar {
   width: 7px;
   height: 10px;
   background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.1);
   border-radius: 3px;
}

::-webkit-scrollbar-thumb {
   width: 10px;
   position: absolute;
   /*   border-radius: 3px; */
   background: linear-gradient(156deg, rgba(32, 65, 138, 1) 0%, rgba(178, 20, 149, 1) 100%) no-repeat;
}

/*Градиент на сайт*/
body {
   scroll-behavior: smooth;
   background: rgba(32, 65, 138, 1);
   background: linear-gradient(156deg, rgba(32, 65, 138, 1) 0%, rgba(178, 20, 149, 1) 80%) no-repeat;
}
h1,
h3,
h5 {
   font-family: Gilroy;
   font-weight: 700 !important;
}

p {
   font-family: Gilroy;
   font-weight: 100;
   font-size: 16px;
}
b {
   font-family: Gilroy;
}
.social a {
   color: white;
   text-decoration: none;
}
header {
   width: 100%;
}
.navbar-nav {
   font-family: Gilroy;
   font-size: 13px;
   font-weight: 500;
   transition: all 0.3s;
}
.navbar-nav a {
   color: white;
}
.navbar-nav .nav-item {
   font-size: 13px;
}

@media screen and (max-width: 546px) {
   .navbar-brand,
   .navbar-collapse,
   .nav-link {
      margin-left: 0 !important;
      margin-right: 0 !important;
   }
   .nav-link {
      color: white !important;
   }
   .hero__text {
      padding-right: 0 !important;
      padding-left: 0 !important;
      margin-right: 0 !important;
      margin-left: 0 !important;
   }
}

@media screen and (max-width: 768px) {
   .navbar-nav .nav-item {
      font-size: 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
   }
   .nav-link {
      color: white !important;
   }
}

.navbar-nav a:hover {
   color: rgba(255, 255, 255, 0.25);
}

.img-arrow {
   cursor: pointer;
}

.img-person {
   max-width: 100%;
   width: 277px;
   max-height: 277px;
   height: 277px;
   object-fit: cover;
}
.op-t {
   object-position: top;
}

/*Отступы в шапке с ссылками. увеличить-уменьшить, а также настройка цвета текста в нав-баре*/
.nav-masthead .nav-link {
   padding: 0.25rem 0;
   color: rgba(255, 255, 255, 0.5);
   background-color: transparent;
   border-bottom: 0.25rem solid transparent;
}

.navbar-nav .nav-link:hover {
   color: rgba(255, 255, 255, 1) !important;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
   border-bottom-color: rgba(255, 255, 255, 0.25);
}

.nav-masthead .nav-link + .nav-link {
   margin-left: 1rem;
}

.nav-masthead .active {
   color: #fff;
   border-bottom-color: #fff;
}

/*Обводка вокруг картинки со стрелкой*/
.arrow-circle {
   background: none;
   width: 100px;
   height: 100px;
   border: 0.5px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   font-size: 55px;
}

.cong__text {
   width: 70%;
   margin: auto;
}

@media screen and (max-width: 576px) {
   .cong__text {
      width: 100%;
      margin: 0;
   }
}

/*Аналогично.  1-вокруг сосетей 2-на кнопке возле фото*/
.arrow-circle-social {
   background: none;
   width: 30px;
   height: 30px;
   border: 0.5px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
}

.arrow-circle-person {
   display: flex;
   margin-left: 93%;
   margin-top: -10%;
   background: none;
   width: 50px;
   height: 50px;
   background-image: url(arrow.svg);
   background-size: contain;
   background-repeat: no-repeat;
}

@media screen and (max-width: 500px) {
   .img-arrow {
      display: none;
   }
   .superimposed-text {
      margin-top: -100%;
   }
}

.arrow-circle-close {
   background: none;
   width: 40px;
   height: 40px;
   border: 0.5px solid #7f2564;
   border-radius: 50%;
}

/*Отступ имен выпускников*/
.superimposed-text {
   margin-top: -13%;
}

#close_modal {
   font-family: Gilroy;
   font-weight: 400;

   display: flex;
   z-index: 1;
   color: #7f2564;
   left: 30%;

   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
}

.bi-x-lg::before {
   display: flex;
}

@media screen and (min-width: 768px) {
   #close_modal {
      left: 20%;
      top: 50%;
   }
}

@media screen and (max-width: 546px) {
   #close_modal {
      left: 0;
      right: 0;

      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
   }
}

.close-text {
   font-size: 16px;
}

@media screen and (min-width: 768px) {
   .close-text {
      font-size: 25px;
      font-weight: 700;
   }
   .arrow-circle-close {
      border: 2px solid #7f2564;
   }
}

/*Описание специальности выпускников*/
.Direction-text {
   font-family: Gilroy;
   font-weight: 100;
   font-size: 13px;
}

/*Эффект "Тумана" на фото*/
.shadow-purple {
   -webkit-box-shadow: 0px -100px 59px 6px rgba(105, 42, 143, 0.71) inset;
   -moz-box-shadow: 0px -100px 59px 6px rgba(105, 42, 143, 0.71) inset;
   box-shadow: 0px -100px 59px 6px rgba(105, 42, 143, 0.71) inset;
   border-radius: 2%;
}
.modal-win {
   position: fixed;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(0.2vh);
   padding: 0;
   margin: 0;
   top: -100%;
   transition: top 1s;
   cursor: pointer;
}
.modal-win p {
   font-weight: 500;
}
.modal-win.active {
   top: -0%;
   transition: top 1s;
}

.card-event {
   height: 100%;
   background-color: transparent;
   border-radius: 5px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: flex-start;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
}
.card-event hr {
   width: 100%;
}
.card-event__text {
   font-weight: 300;
   opacity: 0.7;
   font-size: 14px;
}
.card-event__time {
   font-weight: 300;
}
.bg {
   z-index: -2;
   position: absolute;
   height: 100%;
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   padding-right: 3em;
   opacity: 0.7;
}
.bg__numbers {
   font-size: 18rem;
   font-weight: 800;
   line-height: 18rem;
   background: linear-gradient(264.58deg, #a107fb 2.78%, #765ad1 90.35%);

   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 576px) {
   .bg__numbers {
      font-size: 5rem;
   }
}
.bg__numbers--1 {
   -ms-flex-item-align: start;
   align-self: flex-start;
   margin-bottom: 5.5rem;
   mix-blend-mode: lighten;
   opacity: 0.7;
}
.bg__numbers--2 {
   -ms-flex-item-align: end;
   align-self: flex-end;
   mix-blend-mode: normal;
   opacity: 0.8;
}
.card__history {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
}
.card__history--year {
   font-size: 85px;
   font-weight: 600;
}
.card__history--desc {
   width: 45%;
   font-size: 18px;
   font-weight: 500;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
}

@media screen and (max-width: 992px) {
   .card__history {
      flex-direction: column;
   }
   .card__history--year {
      width: 100%;
   }
   .card__history--desc {
      width: 100%;
   }
   .images__history {
      height: 350px;
   }
}

@media screen and (max-width: 576px) {
   .images__history--1 {
      display: none;
   }
   .images__history--3 {
      display: none;
   }
}

.card__history--cut {
   margin-top: 15px;
   opacity: 0.7;
   font-size: 15px;
   cursor: pointer;
   transition: all 0.3s;
}
.card__history--cut:hover {
   opacity: 1;
}
.card__history--video {
   height: 500px;
}
.card__history--container {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}
.first__container {
   height: 80vh;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}
@media screen and (max-width: 576px) {
   .first__container {
      height: 100vh;
   }
}
.images__history {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: 100%;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: space-evenly;
   -ms-flex-pack: space-evenly;
   justify-content: space-evenly;
   height: 500px;
}
.images__history--1 {
   -ms-flex-item-align: start;
   align-self: flex-start;
}
.images__history--3 {
   -ms-flex-item-align: end;
   align-self: flex-end;
}
.playback__button {
   position: absolute;
   bottom: 70px;
   right: 70px;
}
.btn__play--pause {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   height: 50px;
   width: 40px;
}
.btn__play--pause .l,
.btn__play--pause .r {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 32%;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   transition: 0.36s cubic-bezier(0.55, 0, 0.1, 1);
}
.btn__play--pause .l {
   background: #fff;
   left: 0;
}
.btn__play--pause .r {
   background: #fff;
   right: 0;
}
.btn__play--pause.active .l {
   background: #fff;
   width: 50%;
   clip-path: polygon(0 0, 100% 25.2%, 100% 74.8%, 0 100%);
}
.btn__play--pause.active .r {
   background: #fff;
   width: 50%;
   clip-path: polygon(0 25.2%, 100% 50%, 100% 50%, 0 74.8%);
}
.video-js {
   width: 100%;
   max-width: 832px;
   border-radius: 10px;
   margin: auto;
}
.vjs-control-bar {
   border-radius: 10px;
}
.vjs-poster {
   border-radius: 10px !important;
   background-size: cover !important;
}
.video-js .vjs-big-play-button {
   top: 50% !important;
   left: calc(50% - 1.5em) !important;
}
.video-js .vjs-tech {
   border-radius: 10px;
}