/* #region FONTS */
@font-face {
    font-family: "Roboto Mono";
    src:
        url("fonts/RobotoMono-Bold.woff2") format("woff2"),
        url("fonts/RobotoMono-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto Mono";
    src:
        url("fonts/RobotoMono-Medium.woff2") format("woff2"),
        url("fonts/RobotoMono-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto Mono";
    src:
        url("fonts/RobotoMono-Regular.woff2") format("woff2"),
        url("fonts/RobotoMono-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto Mono";
    src:
        url("fonts/RobotoMono-Light.woff2") format("woff2"),
        url("fonts/RobotoMono-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto Mono";
    src:
        url("fonts/RobotoMono-Thin.woff2") format("woff2"),
        url("fonts/RobotoMono-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family:futurablack;
    src:url(fonts/RobotoMono-Bold.woff) format("truetype");
    font-weight:900;
    font-style:normal
}

@font-face {
	font-family:futurabold;
	src:url(fonts/RobotoMono-Bold.woff) format("truetype");
	font-weight:400;
	font-style:normal
}

@font-face {
	font-family:RobotoMonoLight;
	src:url(fonts/RobotoMono-Light.woff) format("truetype");
	font-weight:400;
	font-style:normal
}

@font-face{
	font-family:RobotoMonoRegular;
	src:url(fonts/RobotoMono-Regular.woff) format("truetype");
	font-weight:400;
	font-style:normal
}

@font-face{
	font-family:futurademic;
	src:url(fonts/RobotoMono-Medium.woff) format("truetype");
	font-weight:400;
	font-style:normal
}

@font-face{
	font-family:futuraregular;
	src:url(fonts/RobotoMono-Regular.woff) format("truetype");
	font-weight:400;
	font-style:normal
}

@font-face{
	font-family:futuralight;
	src:url(fonts/RobotoMono-Regular.woff) format("truetype");
	font-weight:100;
	font-style:normal
}

@font-face{
	font-family:Proxima;
	src:url(fonts/Proxima/Proxima_Nova_Regular.otf);
	font-weight:400;
	font-style:normal
}

@font-face{
	font-family:ProximaS;
	src:url(https://inobitec.com/bitrix/templates/main/fonts/Proxima/Proxima_Nova_Regular.otf);
	font-weight:400;
	font-style:normal
}
/* #endregion FONTS */


.radio.valid input[type="text"], 
.radio.valid input[type="password"], 
.radio.valid input[type="phone"], 
.radio.valid input[type="mail"], 
.input.valid input[type="text"], 
.input.valid input[type="password"], 
.input.valid input[type="phone"], 
.input.valid input[type="mail"] {
    border: 2px solid #23BF33;
}

.radio.error input[type="text"], 
.radio.error input[type="password"], 
.radio.error input[type="phone"], 
.radio.error input[type="mail"], 
.input.error input[type="text"], 
.input.error input[type="password"], 
.input.error input[type="phone"], 
.input.error input[type="mail"], 
.input.error input[type="number"] {
    border: 2px solid #DA291C;
}


:root {
    --footer-bg-color: #EAF2FC;
    --footer-accent-color: #002855;
    --footer-accent-text-color: #256BCD;
}

* {
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
    text-decoration: none;
}

p, label, textarea, button {
    font-family: 'Roboto Mono', sans-serif;
}

/* region preloader */
.preloader {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    background: rgba(255, 255, 255, .9);
    text-align: center;

    z-index: 9999;
}

.preloader .inn {
    margin: auto;
    font-size: 16px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.preloader .inn img {
    margin: 0 0 20px;
}

.preloader .inn b {
    display: block;
    margin: 0 0 10px;
    font-size: 20px;
    text-transform: uppercase;
}
/* endregion preloader */

.wr {
    max-width: 1600px;
    margin: auto;
    text-align: left;
    padding-left: 45px;
    padding-right: 45px;
}

.mobile-wrapper {
    display: none;
}

/* region header */
.header {
    width: 100%;

    color: #CEE2FA;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    font-family: 'Roboto Mono', sans-serif;

    display: flex;
    align-items: center;
    flex-direction: column;

    background: linear-gradient(to top, #00285580, #002855CC), url(./img/inner-header-bg.png);
}

.header a:not(.nav__item a, .submenu__item a) {
    border-bottom: none;
}

.header__hamburger {
    display: none;
}

.header .header__logo svg, .header__icon{
    fill: #CEE2FA;
    transition: fill .5s;

    cursor: pointer;
}

.header .header__logo svg {
    fill: #FFF;
}

.mobile-container__close {
    cursor: pointer;
}

.header__icon:hover {
    fill: #FFFFFF;
}

.header_main {
    color: #002855;
    background-color: #fff;
    height: auto;
    padding-top: 300px;
}

.header_main .header__logo svg, .header_main .header__icon{
   fill: #002855;
   transition: fill .5s;
}

.header_main .header__icon:hover{
    fill: #256BCD;
}

.header_main > .header__main-header {
    background-color: #fff;
}

.header__main-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    height: 64px;
    padding: 0 64px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.header__nav-wrapper {
    position: relative;
}

.header__dropdown-menu {
    display: none;
    position: absolute;
    top: 42px;
    left: -27px;

    transition: all .5s;
}

.header__dropdown-menu.open {
    display: block;
    top: 42px;
}

.header__icons {
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    gap: 8px;
}

.header__search-mobile {
    display: none;
}

.langs__activ > p{
    font-weight: 700;
    size: 12px;
    line-height: 16px;
    letter-spacing: .1em;
}

/* region scroll */
.scroll {
    background-color: #fff;
    color: #002855;
}

.scroll > .header__logo svg, .scroll .header__icon{
    fill: #002855;
}

.scroll .langs__activ {
    color: #002855;
}
.scroll .langs__activ > svg {
    fill: #002855;
}

.scroll .header__basket-count {
    border-color: #FFF;
}

.scroll .langs__activ:hover {
    color: #256BCD;
}
/* endregion scroll */

/* region sub-header */
.header__sub-header {
    margin-top: 64px;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
}

.header__title {
    color: #FFF;
    padding-bottom: 24px;

    letter-spacing: .1em;
    font-weight: 500;
    font-size: 36px;
    line-height: 40px;
    text-align: center;
}

/* endregion header */

/* region basket */
.mobile-container__basket-count {
    display: flex;
    position: absolute;
    left: 12px;
    bottom: 20px;

    background-color: #D22518;
    color: #FFF;
    font-weight: 400;

    border: 2px solid #002855;
    border-radius: 12px;
    padding: 2px 6px;
}
/* endregion basket */

/* region lang */
.mobile-container__languages {
    padding: 8px 0;
}
.langs {
    display: flex;
    flex-direction: column;
}

.langs__activ {
    cursor: pointer;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    height: 40px;
    width: 60px;
    border-radius: 8px 8px 0 0;

    color: #CEE2FA;
    transition: color .5s;
}

.langs__activ:hover {
    color: #FFF;
}

.langs__activ > svg {
    fill: #CEE2FA;
}

.header_main .langs__activ {
    color: #003C92;
    transition: color .5s;
}

.header_main .langs__activ:hover {
    color: #256BCD;
}

.header_main .langs__activ > svg {
    fill: #003C92;
}

.header__languages.open .langs__activ {
    color: #003C92;
    background-color: #EAF2FC;
}

.header__languages.open .langs__activ > svg {
    fill: #003C92;
}

.langs__switch-dropdown {
    display: none;
}

.langs.open svg {
    transform: rotate(-180deg);
}

.header__languages.open .langs__switch-dropdown {
    position: fixed;
    top: 50px;
    width: 60px;
    padding: 4px 2px;

    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 10px;
    border-radius: 0 0 8px 8px;

    background-color: #FFF;
}

.langs__link, 
.langs__link:active {
    border-radius: 6px;
    padding: 4px;
    color: #002855;
    text-decoration: none;

    transition: color .5s;
}

.langs__link_active {
    color: #256BCD;
}

.langs__link:hover:not(.langs__link_active) {
    color: #256BCD;
    background-color: #EAF2FC;
}
/* endregion lang */
/* endregion header */

/* region content */
.main-container {
    background:#fff;
    color:#272727;
    font-size:1.125em;
    line-height:1.4em;
    font-family:futuraregular;
    text-align:center;

    max-width: 1920px;
    margin: auto;
    text-align: left;
    position: relative;

    font-size: 16px;
}

.page__content {
    padding: 45px 0;
    font-family: Proxima, sans-serif;
}
/* endregion content */

/* region footer */
.footer {
    max-width: 100%;
    padding: 0;
}

.wrapper-youtube {
    display: flex;
    justify-content: center;

    width: 100%;
    padding: 96px 0 48px 0;

    background: linear-gradient(to top,  var(--footer-bg-color) 56%, transparent 44%);
}

.footer__social-networks {
    padding: 48px 0 96px 0;
    background-color: var(--footer-bg-color);
}

.social-networks {
    list-style: none;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.entry-social {
    
    width: 32px;
    height: 32px;
    padding: 15px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 32px;
    transition: background-color 0.9s;
}

.entry-social__link {
    border: 0;
    text-decoration: none;
}

.entry-social__picture {
    fill: #616F86;
    transition: fill 0.8s, stop-color 0.8s;
}

.entry-social__picture_X {
    fill-opacity: 0.65;
    fill: var(--footer-accent-color);
    transition: fill 0.8s, fill-opacity 0.8s;
}

.footer__wrapper {
    background-color: var(--footer-accent-color);
    padding: 0 64px;

    display: flex;
    flex-direction: column;
}

.footer__wrapper-menu {
    padding: 32px 0;
    border-bottom: 1px solid var(--footer-accent-text-color);
}

.wrapper-menu {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.footer__watermark {
    padding: 20px 10px;
    font-size: 12px;
}

.watermark {
    font-family: 'Roboto Mono', sans-serif;
    color: var(--footer-accent-text-color);
    text-align: center;
}

/* ICON */
.entry-social:hover {
    
    background-color: #FFFFFF;
}

.entry-social:active {
    background-color: #FFFFFF;
}

.entry-social__picture_facebook:hover {
    fill: #0866FF;
}

.entry-social__picture_instagram:hover {
    fill: url(#instagram-gradient);
    animation: gradient 1.3s 1 linear;
}
@keyframes gradient {
    0% {
        fill: #616F86;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

.entry-social__picture_youtube:hover {
    fill: #FE0000;
}

.entry-social__picture_X:hover {
    fill: #000;
    fill-opacity: 1;
}

.entry-social__picture_linkedIn:hover {
    fill: #007AB9;
}

.entry-social__picture_telegram:hover {
    fill: #1B92CE;
}

.entry-social__picture_vk:hover {
    fill: #0077FF;
}

/* #region media */
/* mobil */
@media (max-width: 1200px) {
    .headerNew-container-logo > svg{
        width: 103px;
        height: 12px;
    }
    /* region header */
    .header__main-header {
        justify-content: space-between;
        padding: 0;
    }

    .header__hamburger {
        padding-left: 24px;
        display: block;
    }

    .header__hamburger > svg {
        fill: #FFF;
    }

    .header_main .header__hamburger > svg {
        fill: #002855;
    }

    .header__nav-wrapper {
        display: none;
    }

    .header__icons {
        display: none;
    }

    .header__search-mobile {
        display: block;
        padding-right: 24px;
    }

    .header__title {
        font-weight: 500;
        font-size: 32px;
        line-height: 36px;
    }
    /* engregion header */


    /* region mobile menu */
    .mobile-wrapper {
        display: block;
        background-color: #0028553D;

        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;

        z-index: 999;
        transition: transform .5s;
    }

    .mobile-wrapper_reverse {
        left: auto;
        right: -100%;
    }

    .mobile-wrapper.open {
        transform: translateX(100%);
    }

    .mobile-wrapper_reverse.open {
        transform: translateX(-100%);
    }

    .mobile-wrapper__search-wrapper, .mobile-wrapper__hamburger-wrapper {
        height: 64px;
        align-items: center;
        background-color: #F0F1F3;
        display: flex;
        justify-content: end;
    }

    .mobile-wrapper__hamburger-wrapper {
        justify-content: start;
    }

    .mobile-wrapper__search-wrapper > .header__icon_search {
        padding-right: 24px;
    }

    .mobile-wrapper__hamburger-wrapper > .header__icon_hamburger {
        padding-left: 24px;
    }

    .mobile-container {
        width: 280px;
        height: 100vh;

        display: flex;
        flex-direction: column;
        z-index: 999;

        background-color: #FFF;
        transition: transform .5s;

        position: absolute;
        top: 0;
    }

    .mobile-container_reverse {
        right: 0;
    }

    
    .mobile-container_search {
        right: 0;
    }

    .mobile-container.open {
        transform: translateX(100%);
    }
    .mobile-container_search.open {
        transform: translateX(-100%);
    }

    .mobile-container__header {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;

        height: 64px;
        padding: 0 56px 0 24px;
    }

    .mobile-container__header_reverse {
        flex-direction: row-reverse;
        padding: 0 24px 0 56px;
    }

    .mobile-container__content {
        padding: 8px 32px 0 32px;
    }


    .mobile-container__header_search {
        padding-left: auto; 
        padding-right: 24px;

        justify-content: end;
        flex-direction: row-reverse;
    }

    .mobile-container__menu {
        padding: 8px 32px 0 32px;
    }

    .mobile-menu {
        padding: 0 0 16px 0;
    }

    .mobile-container__basket-count {
        border-color: #FFF;
    }

    .mobile-container__icons {
        display: flex;
        gap: 32px;
        justify-content: center;
        padding: 24px 0;
    }

    .mobile-container__icon {
        position: relative;
    }

    .mobile-container__contacts {
        text-transform: none;
        color: #002855;
    }

    .contacts {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contacts__phone, .contacts__email {
        color: #002855;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
    }

    .langs__switch-dropdown {
        display: flex;
        gap: 8px;
        justify-content: center;

        padding: 4px 2px;
    }

    .langs__link {
        color: #002855A6;
        border-radius: 6px;
        padding: 4px;

        font-size: 12px;
        line-height: 16px;
        font-weight: 700;
        letter-spacing: .1em;
        text-align: center;
    }

    .langs__link_active {
        color: #002855;
    }

    .langs__link:focus {
        background-color: #EAF2FC;
        color: #002855A6;
    }

    /* region search */

    .mobile-search {
        display: flex;
        flex-direction: column;
    }

    /* endregion search */
    /* endregion header */

    /* region footer */
    .footer__wrapper {
        padding: 0 24px;
    }

    .wrapper-youtube {
        padding: 64px 0 32px 0;
    }

    .wrapper-menu {
        flex-direction: column;
    }
    /* endregion footer */
}

@media screen and (max-width: 1000px) {
    .wr {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 800px) {
    .page__content {
        padding-top: 15px;
    }
}

@media (max-width: 480px) {
    .social-networks {
        display: grid;
        grid-template-columns: 64px 64px 64px;
        grid-template-rows: 64px 64px;
        align-items: center;
        gap: 24px;
    }
}
/* #endregion media */