@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');
:root{
    --bluecolor: #113D71;
    --redcolor: #D01921;
    --greycolor: #f8f9fa;
    --bs-font-sans-serif: "Exo 2", sans-serif;
}
.bg-grey{background-color: var(--greycolor)}
.bg-blue{background-color: var(--bluecolor); color: #fff;}
.bg-red{background-color: var(--redcolor); color: #fff;}
.col-border-radius{border-radius: 10px 10px 0 0;overflow: hidden}
.btn-close{position: absolute;right: 15px;}
*, *:after, *:before{box-sizing: border-box;}
/* -------------------------------------------- /base ---------------------------------------*/
/* ---------------------------------------- header & footer ----------------------------------*/
header{
    height: 57px;
    .navbar-toggler{border: 1px solid #dedede}
    .dropdown{padding: 0}
    .dropdown-menu{padding:0;--bs-dropdown-padding-y:0;--bs-dropdown-link-active-bg:none;--bs-dropdown-color:var(--bluecolor)}
    .dropdown-item{color: var(--bluecolor); padding: 10px}
    .dropdown-item:hover{border-radius: 5px}
    .dropdown-item.active, .dropdown-item:active{background-color: var(--greycolor)}
    .dropdown-item.active{color: var(--bluecolor);font-weight: 700}
    .telegram{width: 35px;margin-right: 15px;}
    .nav-link, .nav-link:hover, .navbar-nav .nav-link.show{color: var(--bluecolor)}
    .nav-link.active{color: var(--bluecolor) !important;font-weight: 700}
    .contacts-links{display: flex;align-items: center}
    .offcanvas-header{justify-content: flex-start;}
    .offcanvas-title{margin-left: 15px}
    .dropdown-menu{--bs-dropdown-border-radius: 5px}
    @media (max-width: 991px){
        .w-20{width: 60%}
        .w-80{width: 40%}
        .w-20-up{width: 50%}
        .w-80-up{width: 50%}
    }
    @media (max-width: 400px){
        .menu-mob{padding-left: 0 !important;}
    }
}
footer{height: 53px;}
/* ---------------------------------------- /header & footer ----------------------------------*/
/* ------------------------------------ /pages --------------------------------------------*/
.bg-news{background: linear-gradient(110deg, var(--greycolor) 0%, var(--greycolor) 75%, #dee4e9 75%, #dee4e9 82%, #d3dae2 82%, #d3dae2 100%);}
.news-date{background: #fff;width: fit-content;padding: 5px 15px;border-radius: 5px;}
.read-more{color: #fff;width: 100%;background: var(--bluecolor);text-align: center;border-radius: 10px;padding: 10px;margin: 0 auto;text-decoration: none;}
.news-desc, .news-inner{height: 100%;display: flex;flex-direction: column;justify-content: space-between; }
.excursion{height: calc(100vh - 110px);padding: 0;margin: 0;}
.excursion iframe{width: 100%;height: 100%;}
.index{height: calc(100vh - 110px);padding: 0;margin: 0;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;}
.swipe{height: 100%;flex-basis: 50% !important;flex-shrink: 1;transition: 0.5s;display: flex;justify-content: center;align-items: center;}
.swipe:hover{flex-basis: 85% !important;}
.swipe__left{background: url("../img/bg-2.webp") no-repeat center;background-size: cover;}
.swipe__right{background: url("../img/bg-1.webp") no-repeat center;background-size: cover;}
.box__left, .box__right{width: 100%;max-width: 380px;border-radius: 10px;}
.box{background: #ffffffbd; width: 100%; height: 100%;padding: 30px;border-radius: 10px;}
.box__left{background: url("../img/logo-itmo.webp") center center no-repeat; background-size: cover}
.box__right{background: url("../img/logo-leti.webp") center center no-repeat; background-size: cover}
.box .s_head{font-size: 13px;font-weight: 600;text-transform: uppercase;margin-bottom: 15px;color: var(--bluecolor);}
.box .b_head{font-size: 42px;line-height: 44px;margin-bottom: 15px;}
.box p{font-size: 16px;line-height: 30px;margin-bottom: 60px;}
.program-1{background: url("../img/research/research-1.webp"); background-size: cover}
.program-2{background: url("../img/research/research-2.webp"); background-size: cover}
.bi{width: 16px;margin-left: 5px; transition: ease-in-out all .3s}
.icon-link-hover:hover {
    .bi{margin-left: 10px}
}
@media screen and (max-width: 768px){
    body{overflow-x: hidden;}
    .news-date{margin-top: 10px}
    .index{display: block;height: 100%;}
    .swipe{flex-basis: 100% !important;padding: 40px 0;}
    .program-1, .program-2{display: none}
}
@media screen and (max-height: 320px){
    .index {height: 100%;}
    .swipe{padding: 40px 0;}
}
/* ------------------------------------ /pages --------------------------------------------*/
/* ---------------------- animation for buttons & links ----------------------------------*/
.read-more, .link-product{cursor: pointer;display: inline-flex;position: relative;overflow: hidden;z-index: 1;justify-content: center;align-items: center;}
.read-more:hover, .link-product:hover{color: #fff;}
.read-more:before, .link-product:before{content: '';position: absolute;top: 0;right: -50px;bottom: 0;left: 0;border-right: 30px solid transparent;border-top: 90px solid #2D6B9F;transition: transform 0.5s;transform: translateX(-100%);z-index: -1;}
.read-more:hover:before, .link-product:hover:before{transform: translateX(0);}
/* ---------------------- animation for buttons & links ----------------------------------*/
/* ---------------------------------- feedback ---------------------------------*/
.modal-body{background-color: var(--greycolor)}
.form-error{font-size: small;color: var(--redcolor);padding: 10px;}
.feedback div{position: relative;margin: 10px 0}
.all-labels{position: absolute;top: -10px;left: 10%;font-size: 0.75em;color: var(--bluecolor);border-radius: 5px;padding: 0 5px;background-color: #fff;}
.all-inputs{width: 100%;border: 1px solid var(--bluecolor);border-radius: 5px;padding: 10px}
.all-buttons{border-radius: 10px;background-color: var(--bluecolor);color: var(--greycolor);padding: 10px 20px;}
.all-submit-buttons{background-color: var(--redcolor); color: white;border-radius: 10px;padding: 10px 20px; width: 100%;}
.success-message{color: var(--redcolor);font-size: 1.1em;}
.small{text-align: center;}
.politic_list ol{list-style: none;counter-reset: li;}
.politic_list li:before{counter-increment: li;content: counters(li,".") ". ";}
/* ---------------------------------- /feedback ---------------------------------*/