/*--------------------------------------------------------------------------------------------------------------------*/
/*ОБЩИЕ СТИЛИ*/
/*--------------------------------------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'Proxima Nova Regular';
    src: local('Proxima Nova Regular'),
    url('fonts/ProximaNova-Regular.woff2') format('woff2'),
    url('fonts/ProximaNova-Regular.woff') format('woff'),
    url('fonts/ProximaNova-Regular.ttf') format('ttf'),
    url('fonts/ProximaNova-Regular.eot') format('eot');
}

@font-face {
    font-family: 'Proxima Nova Light';
    src: local('Proxima Nova Light'),
    url('fonts/ProximaNova-Light.woff2') format('woff2'),
    url('fonts/ProximaNova-Light.woff') format('woff'),
    url('fonts/ProximaNova-Light.ttf') format('ttf'),
    url('fonts/ProximaNova-Light.eot') format('eot');
}


@font-face {
    font-family: 'Proxima Nova Thin';
    src: local('Proxima Nova Thin'),
    url('fonts/ProximaNovaT-Thin.woff2') format('woff2'),
    url('fonts/ProximaNovaT-Thin.woff') format('woff'),
    url('fonts/ProximaNovaT-Thin.ttf') format('ttf'),
    url('fonts/ProximaNovaT-Thin.eot') format('eot');
}

@font-face {
    font-family: 'Proxima Nova Bold';
    src: local('Proxima Nova Bold'),
    url('fonts/ProximaNova-Bold.woff2') format('woff2'),
    url('fonts/ProximaNova-Bold.woff') format('woff'),
    url('fonts/ProximaNova-Bold.ttf') format('ttf'),
    url('fonts/ProximaNova-Bold.eot') format('eot');
}

@font-face {
    font-family: 'Proxima Nova Semibold';
    src: local('Proxima Nova Semibold'),
    url('fonts/ProximaNova-Semibold.woff2') format('woff2'),
    url('fonts/ProximaNova-Semibold.woff') format('woff'),
    url('fonts/ProximaNova-Semibold.ttf') format('ttf'),
    url('fonts/ProximaNova-Semibold.eot') format('eot');
}


@font-face {
    font-family: 'Proxima Nova Extrabold';
    src: local('Proxima Nova Extrabold'),
    url('fonts/ProximaNova-Extrabld.woff2') format('woff2'),
    url('fonts/ProximaNova-Extrabld.woff') format('woff'),
    url('fonts/ProximaNova-Extrabld.ttf') format('ttf'),
    url('fonts/ProximaNova-Extrabld.eot') format('eot');
}


@font-face {
    font-family: 'Proxima Nova Black';
    src: local('Proxima Nova Black'),
    url('fonts/ProximaNova-Black.woff2') format('woff2'),
    url('fonts/ProximaNova-Black.woff') format('woff'),
    url('fonts/ProximaNova-Black.ttf') format('ttf'),
    url('fonts/ProximaNova-Black.eot') format('eot');
}

:root{
    --white: #ffffff;
    --black: #000000;
    --gray: #85888C;
    --blue: #1E22AA;
    --lightblue: #4e6ed0;
    --blueop: rgb(30,34,170,0.6);
    --blackop: rgb(0,0,0,0.6);
    --red: rgba(255, 0, 0, 0.5);
    --green: rgba(0, 128, 0, 0.5);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body{
    background-color: var(--white);
}


h1{
    font-size:2em;
    font-family: "Proxima Nova Black", sans-serif;
}

h2{
    font-size:1.6em;
    font-family: "Proxima Nova Extrabold", sans-serif;
}

h3{
    font-size:1.2em;
    font-family: "Proxima Nova Bold", sans-serif;
}
h4{
    font-size:1.1em;
    font-family: "Proxima Nova Semibold", sans-serif;
}
p{
    font-size:1em;
    font-family: "Proxima Nova Regular", sans-serif;
}


@media(max-width: 369px) {
    body{
        font-size: 14px;
    }
}

@media(min-width: 370px) and(max-width:400px) {
    body{
        font-size: 15px;
    }
}

@media(min-width: 400px) and(max-width:480px) {
    body{
        font-size: 16px;
    }
}


@media(min-width: 481px) and(max-width:767px) {
    body{
        font-size: 17px;
    }
}

@media (min-width: 768px) and (max-width:991px)  {
        body{
            font-size: 18px;
        }
    }

@media (min-width: 992px) and (max-width:1199px)  {
    body{
        font-size: 19px;
    }
}

@media(min-width:1200px){
    body{
        font-size: 20px;
    }
}


@media(min-width:1440px){
    body{
        font-size: 21px;
    }
}


@media(min-width:1600px){
    body{
        font-size: 25px;
    }
}


@media(min-width:1800px){
    body{
        font-size: 26px;
    }
}


@media(min-width:2000px){
    body{
        font-size: 27px;
    }
}


@media(min-width:2200px){
    body{
        font-size: 28px;
    }
}


@media(min-width:2400px){
    body{
        font-size: 30px;
    }
}



/*--------------------------------------------------------------------------------------------------------------------*/
/*МОДАЛЬНОЕ ОКНО*/
/*--------------------------------------------------------------------------------------------------------------------*/
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blackop);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    color: var(--black);
    background-color: var(--white);
    padding: 0.8em;
    border-radius: 10px;
    border-width: 5px;
    border-style: solid;
    position: relative;
    text-align: center;
    max-width:90vw;
}

.modal-content h4{
    margin-top:1em;
}

.close {
    color: var(--gray);
    position: absolute;
    top:0.5em;
    right: 0.5em;
    cursor: pointer;
}

.close:hover{
    color:var(--black);
}

.success-message {
    border-color: var(--green) !important;
}

.error-message {
    border-color: var(--red) !important;
}


/*--------------------------------------------------------------------------------------------------------------------*/
/*ХЭДЕР*/
/*--------------------------------------------------------------------------------------------------------------------*/
a{
    text-decoration: none;
}

ul{
    list-style: none;
}

.header{
    background:var(--black);
    position: sticky;
    top: 0;
    width: 100%;
    padding: 1em 5%;
    vertical-align: middle;
    z-index: 10000;
    height: 3em;
}

.center_div{
    align-items: center;
    display:flex;
    justify-content: space-between;
    width:100%;
}

.logo{
    display: inline-block;
    color: var(--white);
    line-height: 0;
    align-items: center;
}

.nav{
    max-height: none;
    top: 0;
    position: relative;
    float: right;
    width: fit-content;
}

.menu li{
    float: left;
}

.menu a:hover{
    color: var(--gray);
}

.active{
    text-decoration: underline;
}

.menu a{
    display: block;
    color: var(--white);
    text-align: center;
    padding: 0 0 0 1em;
}

.hamb{
    display: none;
}

.side-menu {
    display: none;
}


@media (max-width: 768px) {
    .nav{
        top: 2.95em;
        right:0;
        width: auto;
        position: fixed;
        overflow: hidden;
        max-height: 0;
        transition: max-height .5s ease-out;
    }

    .menu{
        float:none;
        background-color: var(--black);
        color: var(--white);
    }

    .menu li{
        float: none;
        margin:0;
        padding: 1em 0;
    }

    .menu a{
        padding:0;
        width:100vw;
        display: block;
    }
    .menu a:hover{
        color: var(--gray);
    }

    .hamb{
        display: block;
        padding: calc((1.5em - 3px)/2) 1em;
        cursor: pointer;
        float: right;
    }

    .hamb-line {
        background: var(--white);
        display: block;
        height: 3px;
        position: relative;
        width: 24px;
    }

    .hamb-line::before,
    .hamb-line::after{
        background: var(--white);
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
    }
    .hamb-line::before{
        top: 6px;
    }

    .hamb-line::after{
        top: -6px;
    }

    .side-menu {
        display: none;
    }

    .side-menu:checked ~ nav{
        max-height: 100%;
    }

    .side-menu:checked ~ .hamb .hamb-line {
        background: transparent;
    }

    .side-menu:checked ~ .hamb .hamb-line::before {
        transform: rotate(-45deg);
        top:0;
    }

    .side-menu:checked ~ .hamb .hamb-line::after {
        transform: rotate(45deg);
        top:0;
    }
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*ОБЩИЕ СТИЛИ СЕКЦИЙ*/
/*--------------------------------------------------------------------------------------------------------------------*/

section {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}


/*--------------------------------------------------------------------------------------------------------------------*/
/*ГЛАВНАЯ С ЗАСТАВКОЙ*/
/*--------------------------------------------------------------------------------------------------------------------*/
#section-1 {
    background-color: var(--black);
    background-image: url("images/background.jpg");
    background-position:center center;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-image: url("images/background.jpg");
    -webkit-background-size: cover;
    min-height:calc(100vh - 3em);
}


.content {
    min-height:calc(100vh - 3em);
    height: 100%;
    padding: 5vw;
    color: white;
    display: flex;
    justify-content: space-between;
}

.black{
    min-height:calc(100vh - 3em);
    height: 100%;
    width:100vw;
    background-color: var(--blackop);
}

.company-info {
    flex:1.5;
    padding: 0 5vw 0 0;
}

.top_contact{
margin-top: 3%;
}

.top_contacts{
    margin-top: 10%;
}

.form {
    padding: 10px;
    flex: 1;
    align-self: center;
    border-radius: 20px;
    min-width: 30%;
}

.form-header{
    text-align: center;
}

.inputGroup {
    margin: 1em 0 1em 0;
    width: 100%;
    position: relative;
}

.inputGroup input {
    backdrop-filter: blur(1.4em);
    outline: none;
    border: 0.15em solid var(--white);
    background-color: transparent;
    border-radius: 1em;
    width: 100%;
    color: var(--white) !important;
    position:relative;
    padding: 0.8em;
    font-size: 0.8em;
    font-family: "Proxima Nova Light", sans-serif;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    /*border: 0; */
    -webkit-text-fill-color: var(--white);
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,174,255,0.04) 50%,rgba(255,255,255,0) 51%,rgba(0,174,255,0.03) 100%); }

.inputGroup textarea {
    backdrop-filter: blur(1.4em);
    position:relative;
    color: var(--white) !important;
    resize: none;
    padding: 0.8em;
    font-size: 0.8em;
    font-family: "Proxima Nova Light", sans-serif;
    outline: none;
    border: 0.15em solid var(--white);
    background-color: transparent;
    border-radius: 1em;
    width: 100%;
}

.inputGroup textarea::-webkit-scrollbar {
   display:none;
}

.inputGroup label {
    z-index: 100;
    position: absolute;
    pointer-events: none;
    transition: all 0.3s ease;
    color: var(--white);
    left: 0.8em;
    top: 0.6em;
    font-size: 1em;
    font-family: "Proxima Nova Regular", sans-serif;
}

.inputGroup :is(input:focus, textarea:focus, input:valid, textarea:valid, input.non-empty)~label {
    transform: translateY(-50%) scale(.9);
    left: 0.8em;
    top: 0;
}

.inputGroup :is(input:focus, textarea:focus, input.non-empty:not(.inval), textarea:valid) {
    border-color: var(--lightblue);
}

.inputGroup :is(input.non-empty.inval) {
    border-color: rgba(220, 96, 96, 0.5) !important;
}

.submit_button{
    cursor: pointer;
    background-color: transparent;
    float: right;
    backdrop-filter: blur(1.5em);
    width: auto;
    color: white;
    border-color: white;
    border-radius: 0.6em;
    border-width: 0.17em;
    padding: 0.2em;
    font-size: 1em;
    height:2em;
    font-family: "Proxima Nova Semibold", sans-serif;
}

.submit_button:hover{
    border-color: var(--lightblue);
    color: var(--lightblue);
    backdrop-filter: blur(0.3em);
}


@media (max-aspect-ratio: 13/16) {
    .content {
        flex-direction: column;
    }

    .company-info {
        flex: 1.5;
        padding: 0 10px 10px 10px;
    }

    .form{
        max-width: 500px;
        width:100%;
    }
}

@media (max-width: 920px) {

    #section-1{
        background-image: url("images/background_mobile.jpg");
        -webkit-background-image: url("images/background_mobile.jpg");
        height: 100%;
    }

}



/*--------------------------------------------------------------------------------------------------------------------*/
/*НОВОСТНОЙ СЛАЙДЕР*/
/*--------------------------------------------------------------------------------------------------------------------*/
#section-news {
    /*background-color: #999999;*/
    height: auto;
    padding: 1em 5vw;
    position: relative;
    border-bottom: var(--blue) 0.2em solid;
}

.slider_container {
    position: relative;
    width: 100%;
    max-width: 85vw; /* Максимальная ширина слайдера */
    overflow: hidden;
}

.slider_wrapper {
    display: flex;
    /*justify-content: center;*/
    transition: transform 0.5s ease-in-out;
    /*margin: 0 -10px; !* Добавлены отступы, чтобы стрелки были вне слайдера *!*/
}

.slide {
    /*aspect-ratio: 1/0.9;*/
    flex: 0 0 25%;
    overflow: hidden;
    /*display: flex;*/
    /*flex-direction: column;*/
    align-items: center;
    justify-content: center;
    padding: 0 2%;
}

.slider_navigation {
    position: absolute;
    top: calc(50% - 1.6em);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5vw;
}

.slider_navigation button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 2em;
    outline: none;
    color: var(--blueop);
}

#prevBtn:hover, #nextBtn:hover{
    color: var(--blue);
}

.dots {
    display: flex;
    margin-top: 0.5em;
    justify-content: center;
}

.dot {
    height: 0.4em;
    width: 0.4em;
    background-color:var(--blueop);
    border-radius: 50%;
    margin: 0 0.2em;
    cursor: pointer;
}

.dot.active {
    background-color: var(--blue);
}

.im{
  aspect-ratio: 1/0.6;
    width:100%;
    overflow: hidden;
}

.new_text{
    text-align: justify;
}

.with{
    cursor: pointer;
}

.with:hover{
    text-decoration: underline;
  color: var(--black);
}

.new_date{
    height:10%;
    align-self: start;
    text-align: right;
    font-family: "Proxima Nova Light", sans-serif !important;
}

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

.slide a{
    color: var(--black);
    text-decoration: none;
}

@media(max-width:480px) {

    .slide {
        flex: 0 0 100% ;
        padding: 0 10%;
    }
}

@media (min-width: 481px) and (max-width:991px)  {
    .slide {
        flex: 0 0 50% ;
        padding: 0 5%;
    }
}


@media (min-width: 992px) and (max-width:1199px)  {
    .slide {
        flex: 0 0 33% ;
        padding: 0 3%;
    }
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*ЛАБОРАТОРИЯ*/
/*--------------------------------------------------------------------------------------------------------------------*/
#section-2 {
    background-color: var(--white);
    height:auto;
    display: flex;
    padding: 3.5em 5vw;
    align-items: start;
    justify-content: center;
    flex-direction: row;
}

.screen{
    width:100%;
    aspect-ratio: 4624/3468;
}

.lab{
    margin-left: 10px;
    flex: 1;
}

.lab h2{
    color: var(--blue);
}

img {
    width: 100%; !important;
}

.sim-slider {
    flex: 1;
    min-width: 280px;
    padding: 0.5em 5% 2em 5%;
    background-color: white;
}

.sim-slider {
    position: relative;
}

.sim-slider-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
}

.sim-slider-element {
    width: 100%;
    transition: opacity 1s ease-in;
    opacity: 0;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    display: block;
}

.sim-slider-element img{
    display: block;
    max-width: 100%;
}

.arrow {
    color: var(--blueop);
    background: none;
    border: none;
    font-size: 2.5em;
    position: absolute;
    cursor: pointer;
    z-index: 4;
}

.right {
    right: 1%;
    top: calc(50% - 1em);
    display: block;
}

.left {
    left: 1%;
    top: calc(50% - 1em);
    display: block;
}

.arrow:hover, .arrow:active {
    color: var(--blue);
}

div.sim-slider-dots {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    text-align: center;
}

span.sim-dot {
    width: 0.5em;
    height: 0.5em;
    margin: 0.5em 0.3em;
    padding: 0;
    display: inline-block;
    border-radius: 0.5em;
    cursor: pointer;
}


@media (max-width: 768px) {
    #section-2 {
        flex-direction: column-reverse;
    }

    .lab {
        margin-bottom: 5vh;
    }

    .lab h2{
        text-align: center;
    }

    .sim-slider{
        width: 100%;
        padding: 0.5em 8vw 2em 8vw;
    }
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*ПРЕПОДАВАТЕЛИ*/
/*--------------------------------------------------------------------------------------------------------------------*/
#section-3 {
    background-color: var(--black);
    color: var(--white);
    height:auto;
    padding: 3.5em 5vw;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:100%;
}


.prep_description{
    text-align: center;
    margin-bottom: 2em;
}

.prep_grid{
    width: 100%;
    display: grid;
    grid-gap: 5vh 5vw;
    grid-template-columns:repeat(auto-fit, minmax(280px,20vw)); ;
    grid-auto-flow: row;
    justify-content: center;
}

.prep_item{
    border-radius: 1em;
    background-color: var(--white);
    height:auto;
    padding:1em;
    text-align: center;
    display: grid;
    grid-template-raws: auto auto auto 1fr ;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

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

.avatar{
    background-image: url("images/person.png");
    background-position: center center;
    background-size: contain;
    object-fit: cover;
    border-radius: 50%;
    width: 85%;
    aspect-ratio: 1/1;
}

.name{
    margin-top: 10px;
    color:var(--blue);
}

.job_title{
    font-family: "Proxima Nova Semibold", sans-serif;
    margin: 10px 0;
    color:var(--black);
}

.prep_info{
    height: auto;
    vertical-align: bottom;
    color:var(--black);
}

@media (max-width: 767px) {
    .prep_grid{
        grid-template-columns:repeat(auto-fit, minmax(240px,30vw)); ;
    }
}


/*--------------------------------------------------------------------------------------------------------------------*/
/*СТАТЬИ*/
/*--------------------------------------------------------------------------------------------------------------------*/

#section-4 {
    background-color: var(--white);
    color: var(--black);
    height:auto;
    padding: 3.5em 5vw;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:100%;
}

.articles_description{
    color: var(--blue);
}

.articles{
    margin-top:-20px;
    width:100%;
}

.article{
    box-shadow: 5px 3px 10px 1px var(--black);
    margin-top: 40px;
    padding: 10px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    align-content: center;
    transition: all .2s ease-out;
}

.article h3{
    line-break: auto;
    margin-bottom: 0.5em;
}

.art_avtor{
    text-align: right;
    font-family: "Proxima Nova Light", sans-serif;
}

.art_head img{
    width:2.5em;
    float:left;
    margin: 0.1em 0.3em 0.1em 0;
}

.art_head{
    text-align: justify;
    align-content: center;
    align-items: center;
}
/*.art_div{*/
/*   text-align:right;*/
/*}*/

.art_text{
    text-align: justify;
}

/*.art_link{*/
/*    text-decoration: none;*/
/*    color: var(--blue);*/
/*    text-align: right;*/
/*}*/

.art_link {
    color: var(--black);
    text-decoration: none;
}

.art_link:hover .article{
    box-shadow: 5px 3px 10px 1px var(--blue);
    transform: translate3d(5px, -10px,0);
}




/*--------------------------------------------------------------------------------------------------------------------*/
/*ФУТЕР*/
/*--------------------------------------------------------------------------------------------------------------------*/

footer{
    background:var(--black);
    position: sticky;
    width: 100%;
    padding: 3% 5%;
    height:auto;
    display:flex;
    align-items: start;
    color: var(--white);
    justify-content: space-between;
    text-align: center;
    flex: 1 1 30%;
}


footer h3{
margin-bottom: 1em;
}

footer h4{
    margin-bottom: 0.6em;
}

footer p{
    margin-bottom: 0.5em;
}

footer img{
    vertical-align: middle;
    width: 1.2em;
    height: 100%;
    margin-bottom:0;
}

.contacts p{
    display: flex;
}

hr{
    color:white;
    width:18em;
    max-width:100%;
    opacity: 0.6;
    height: 0;
    border: none;
    border-top: 1px solid white;
    display:none;
}

.f_item hr{
    display:block;
    margin: 0.5em auto;
    max-width:100%;
}

.f_item{
    width:40%;
}

.form0{
    min-width: 200px;
    width:35%;
}

.inputGroup0 {
    margin: 0 0 0.7em 0;
    width: 100%;
    position: relative;
}

.inputGroup0 input {
    padding: 0.5em;
    font-size: 0.8em;
    font-family: "Proxima Nova Light", sans-serif;
    outline: none;
    border: 0.15em solid var(--white);
    background-color: transparent;
    border-radius: 1em;
    width: 100%;
    color: var(--white) !important;
}

.inputGroup0 textarea {
    background-color: transparent;
    resize: none;
    padding: 0.5em;
    font-size: 0.8em;
    font-family: "Proxima Nova Light", sans-serif;
    outline: none;
    border: 0.15em solid var(--white);
    border-radius: 1em;
    width: 100%;
    color: var(--white) !important;
}

.inputGroup0 textarea::-webkit-scrollbar {
    display:none;
}

.inputGroup0 label {
    z-index: 100;
    position: absolute;
    left: 0.8em;
    top: 0.4em;
    font-size: 1em;
    font-family: "Proxima Nova Regular", sans-serif;
    pointer-events: none;
    transition: all 0.3s ease;
    color: var(--white);
}

.inputGroup0 :is(input:focus, input:valid, textarea:focus, textarea:valid, input.non-empty)~label {
    transform: translateY(-50%) scale(.9);
    left: 0.8em;
    top: 0;
}

.inputGroup0 :is(input:focus, textarea:focus, input.non-empty:not(.inval), textarea:valid) {
    border-color: var(--lightblue);
}
.inputGroup0 :is(input.non-empty.inval) {
    border-color: rgba(220, 96, 96, 0.5) !important;
}

.submit_button0{
    cursor: pointer;
    background-color: transparent;
    float: right;
    width: auto;
    border-radius: 0.6em;
    border-width: 0.17em;
    padding: 0.2em;
    font-size: 0.9em;
    height:2em;
    font-family: "Proxima Nova Semibold", sans-serif;
    color: white;
    border-color: white;
}

.submit_button0:hover{
    border-color: var(--lightblue);
    color: var(--lightblue);
}

@media(max-width:650px) {
   footer{
       align-items: center;
       flex-direction: column;
   }

    .f_item{
        width:auto;
        max-width: 90vw;
    }

    .form0{
        max-width: 18em;
        width: 100%;
        margin-top: 0.5em;
    }

    hr{
        display:inline-block;
    }
}