html, body, div, span, applet, object, iframe,
blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, legend,
table, tbody, tfoot, thead, tr, th {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
ol, ul{
  list-style: none;
}
blockquote, q {
  quotes: none;
}
ins, a {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

*{
  box-sizing: border-box;
}

body {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Open Sans", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 
    "Droid Sans", "Helvetica Neue", sans-serif;
    background-color: #fff;
}

:root{
  --gen-color: #133163;
  --a-color: #AECDFC;  
  --b-color: #F57C00;
  --grey-color: #CBD5E1;
  --silver-color: #EEEEEE;

  --text-color: #34485E;

  --small-border: 8px;
}

.svg_icons_placeholder{
  display: none;
}

.hide{
    opacity: 0;
}

.show{
    opacity: 1;
}

/* @media only screen and (min-width : 0px) {}

@media only screen and (min-width : 380px) {}

@media only screen and (min-width : 760px) {}

@media only screen and (min-width: 1025px) {}

@media only screen and (min-width: 1440px) {}

@media only screen and (min-width: 2560px) {} */

@media only screen and (min-width : 0px) {
    .mobile_only{
        display: flex;
    }

    .desktop_only{
        display: none;
    }

    h1{
        font-size: 32px;
        margin: 8px 0;
        line-height: normal;
        color: var(--gen-color);
    }

    h2{
        font-size: 12px;
        margin: 6px 0;
        color: var(--gen-color);
    }

    h3{
        color: var(--gen-color);;
    }
}

@media only screen and (min-width : 380px) {
    h1{
        font-size: 36px;
        margin: 12px 0;
    }

    h2{
        font-size: 16px;
        margin: 8px 0;
    }
}

@media only screen and (min-width : 760px) {
    h1{
        font-size: 42px;
        margin: 16px 0;
    }

    h2{
        font-size: 32px;
        margin: 12px 0;
    }
}

@media only screen and (min-width: 1025px) {
    h1{
        font-size: 42px;
        margin: 12px 0;
    }

    h2{
        font-size: 24px;
        margin: 6px 0;
    }

    h3{
        font-size: 22px;
        line-height: 26px;
        font-weight: 600;
        margin: 16px 0;
    }

    h4{
        font-size: 16px;
        line-height: 22px;
        margin: 8px 0;
    }

    .mobile_only{
        display: none;
    }
    .desktop_only{
        display: flex;
    }
}

@media only screen and (min-width: 1440px) {
    h1{
        font-size: 56px;
        font-weight: 600;
        letter-spacing: -2.1px;
    }

    h2{
        font-size: 32px;
        margin: 8px 0;
    }

    h3{
        font-size: 24px;
        line-height: 28px;
        margin: 24px 0;
    }

    h4{
        font-size: 18px;
        line-height: 24px;
    }
}

@media only screen and (min-width: 2560px) {
    h1{
        font-size: 64px;
        font-weight: 600;
        letter-spacing: -2.1px;
    }

    body{
        width: 2000px;
        margin: 0 auto;
    }
}
.main_page{
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    /* border: 1px solid red; */
    overflow: hidden;
}

.left_pagination{
    position: fixed;
    /* transform: translate(-50%); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border: 1px solid red; */
}

.pag_el{
    border-radius: 50%;
    border: 2px solid var(--main-text-color);
}

.pag_el_a{
    border: 0px;
    background-color: var(--orange-color);
}

@media only screen and (min-width : 0px) {
    .main_page {
        padding: 0 6px;
        height: 100%;
    }
}

@media only screen and (min-width : 380px) {}

@media only screen and (min-width : 760px) {
    .main_page {
        padding: 0 12px;
    }
}

@media only screen and (min-width: 1025px) {
   .main_page{
        padding: 0 40px;
        height: 86%;
   }

   .left_pagination {
       width: 40px;
       right: 0;
       top: 40%;
   }

   .pag_el{
       height: 8px;
       width: 8px;
       margin: 10px 0;
   } 
}

@media only screen and (min-width: 1440px) {
    .main_page{
        padding: 0 80px;
    }

    .left_pagination {
        width: 80px;
        right: 0;
        top: 40%;
    }

    .pag_el{
        height: 10px;
        width: 10px;
        margin: 16px 0;
    }
}

@media only screen and (min-width: 2560px) {
    .main_page{
        padding: 0 140px;
    }

    .left_pagination {
        width: 140px;
        right: 0;
        top: 40%;
    }

    .pag_el{
        height: 12px;
        width: 12px;
        margin: 20px 0;
    }
}
.dmi_w{
    opacity: 0;
    transform: translateY(0px);
    width: 100%;
    height: 200vh;
    left: 0px;
    bottom: 100%;
    box-shadow: rgb(0 0 0 / 5%) 0px 24px 64px;
    background: rgb(255, 255, 255);
    transition: transform 0.4s cubic-bezier(0, 0, 0.16, 0.96) 0s, opacity 0.4s cubic-bezier(0, 0, 0.16, 0.96) 0s;
    position: absolute;
    will-change: transform;
    z-index: 5;

    flex-direction: column;
}

.dmi_w_actv{
    opacity: 1;
    transform: translateY(581px);
    transition: transform 0.4s cubic-bezier(0, 0, 0.16, 0.96) 0s, opacity 0.4s cubic-bezier(0, 0, 0.16, 0.96) 0s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
    }

    to {
        transform: translate(0, 80px);;
        opacity: 1;
    }
}

.dmi_block{
    flex-direction: row;
    align-items: flex-end;    

    position: absolute;
    visibility: hidden;
    opacity: 0;
    z-index: 6;
    left: 0px;
    bottom: 80px;
    pointer-events: none;

    background: rgb(255, 255, 255);
    transition: 
        opacity 0.4s cubic-bezier(0, 0, 0.16, 0.96) 0s,
        transform 1s cubic-bezier(0, 0, 0.16, 0.96) 0s;

    width: 100%;
}

.dmi_w_actv > .dmi_block{
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    transform: translate(0, 80px);
}

.dmi_elements {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dm_items{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.dm_item{
    transition: color 0.4s ease 0s
}

.dm_item > a{
    display: flex;
    flex-direction: column;
    color: var(--gen-color);
    transition: color 0.4s ease 0s
}

.dm_item:hover >a {
    color: var(--b-color)
}

.dmi_banner_w{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}


@media only screen and (min-width : 0px) {}

@media only screen and (min-width : 380px) {}

@media only screen and (min-width : 760px) {}

@media only screen and (min-width: 1025px) {
    .dmi_w_actv{
        transform: translateY(506px);
    }

    .dmi_block {
        height: 440px;
    }

    .dmi_elements {
        padding: 0 48px;
        width: 70%;
    }

    .dmi_banner_w{
        width: 30%;
    }

    .dm_item{
        width: 160px;
        margin: 16px 40px 0 0;
    }

    .dmi_banner{
        border: 2px solid grey;
        border-radius: var(--small-border);

        width: 280px;
        height: 220px;
    }
}

@media only screen and (min-width: 1440px) {
    .dmi_w_actv{
        transform: translateY(620px);
    }

    .dmi_block {
        height: 520px;
    }

    .dmi_elements {
        padding: 0 96px;
        width: 64%;
    }

    .dmi_banner_w{
        width: 36%;
    }

    .dm_item{
        width: 160px;
        margin: 20px 60px 0 0;
    }

    .dmi_banner{
        border: 2px solid grey;
        border-radius: var(--small-border);

        width: 400px;
        height: 320px;
    }
}

@media only screen and (min-width: 2560px) {}
header{
    width: 100%;
    position: relative;
}

.lg{
    font-family: 'Poppins';
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -1px;
}

.header_top{
    position: sticky;
    width: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    border-bottom: 1px solid var(--a-color);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--gen-color);
    z-index: 10;
    background-color: #fff;
    user-select: none;
}

.h_menu{
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

.h_left_elements, .h_right_elements{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

.h_left_elements, .h_menu{
    justify-content: flex-start;
}

.h_right_elements{
    justify-content: flex-end;
}

.icon_logo, .icon_menu{
    fill: var(--gen-color);
}

.h_actions_block{
    display: flex;
}

.h_menu_btn{
    touch-action: manipulation;
    outline-color: rgba(255, 255, 255, 0.87);
    outline-style: none;
    outline-width: 0;
    border-radius: var(--small-border);
    border: 2px solid var(--gen-color);
    background-color: #fff;
    color: var(--b-color);
    cursor: pointer;
}

.h_menu_item {
    display: flex;
    cursor: pointer;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    position: relative;
    align-self: center;
}

.h_menu_item > svg{
    transition: transform 250ms cubic-bezier(0, 0, 0.16, 0.96) 0s;
    transform: rotate(0deg);
    fill: var(--gen-color);
}

.h_menu_loader{
    transform-origin: left center;
    transition: width 0.4s cubic-bezier(0, 0, 0.16, 0.96) 0s;
    position: absolute;
    left: -2px;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: var(--b-color);
}

.h_menu_item_actv > .h_menu_loader {
    width: 100%;
}

.h_menu_item_actv>svg {
    transform: rotate(-180deg);
}

@media only screen and (min-width : 0px) {
    .h_menu_from_tab{
        display: none;
    }

    .icon_logo {
        width: 64px;
    }

    .header_top, .h_empty {
        height: 60px;
        padding: 0 8px;
    }

    .icon_lang{
        height: 24px;
        width: 24px;
    }

    .icon_menu{
        height: 32px;
        width: 32px;
    }

    .h_menu_item{
       margin-right: 12px; 
    }

    .h_menu_btn{
        margin-right: 16px;
        font-size: 14px;
        font-weight: 600;
        padding: 4px 6px;
    }
}

@media only screen and (min-width : 380px) {
    
    .header_top, .h_empty {
        padding: 0 16px;
    }

    .icon_logo {
        width: 80px;
    }

    .h_bm{
        margin-right: 22px;       
    }



}

@media only screen and (min-width : 760px) {
    .header_top, .h_empty {
        padding: 0 24px;
    }

    .h_menu_from_tab{
        display: flex;
        margin-right: 12px;
    }

    .h_bm{
        margin-right: 32px;       
    }
}

@media only screen and (min-width: 1025px) {
    .icon_menu{
        height: 48px;
        width: 64px;
    }

    .header_top, .h_empty {
        height: 64px;
        padding: 0 40px;
    }
    .icon_logo {
        width: 104px;
        margin-right: 32px;
    }

    .icon_lang{
        height: 28px;
        width: 28px;
    }

    .h_actions_block{
        flex-direction: row;
        align-items: center;
    }

    .h_menu_item, .h_menu_from_tab{
        font-size: 16px;
        margin-right: 18px;
    }

    .h_bm{
        margin-right: 24px;       
    }

    .h_menu_btn{
        font-size: 18px;
        font-weight: 600;
        padding: 12px 14px;
    }

    .h_menu_item>svg{
        width: 14px;
        height: 14px;
        margin: 4px 0 0 4px;
    } 
}

@media only screen and (min-width: 1440px) {
    .header_top, .h_empty {
        height: 72px;
        padding: 0 96px;
    }
    .icon_logo {
        width: 120px;
        margin-right: 46px;
    }

    .icon_lang{
        height: 28px;
        width: 28px;
    }

    .h_menu_item, .h_menu_from_tab{
        font-size: 18px;
        margin-right: 20px;
    }

    .h_bm{
        margin-right: 32px;       
    }

    .h_menu_btn{
        font-size: 16px;
        font-weight: 600;
        padding: 12px 14px;
    }

    .h_menu_item>svg{
        width: 14px;
        height: 14px;
        margin: 4px 0 0 4px;
    } 
}

@media only screen and (min-width: 2560px) {
    .header_top {
        height: 96px;
        padding: 0 64px;
    }
    .icon_logo {
        width: 132px;
        margin-right: 52px;
    }

    .h_menu_item, .h_menu_from_tab{
        font-size: 22px;
        font-weight: 400;
        margin-right: 20px;
    }

    .h_bm{
        margin-right: 32px;       
    }

    .h_menu_btn{
        font-size: 22px;
        font-weight: 600;
        padding: 12px 14px;
    }
}
.aside {
    position: fixed;
    top: 0;
    right: 0;
    min-height: 100vh;
    max-height: 100vh;
    z-index: 99;
    box-shadow: rgb(0 0 0 / 5%) 0px 24px 64px;
    background-color: #fff;
    box-sizing: border-box;
    width: 320px;

    display: flex;
    opacity: 0;
    visibility: hidden;
    flex-direction: column;

    /* transition: width .4s linear 0.33s, opacity 0.33s linear; */
}

.aside_show{
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
    animation: slideInRight .4s forwards;
}

.m_sidebar_btn_x{
    align-self: flex-end;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.m_menu{
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-top: 1px solid var(--a-color);
}

.mmenuitem{
    border-bottom: 1px solid var(--silver-color);
}

.m_menu_item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: var(--gen-color);
}

.m_menu_item > svg {
    transition: transform 250ms cubic-bezier(0, 0, 0.16, 0.96) 0s;
    transform: rotate(0deg);
    fill: var(--gen-color);
}

.mm_items{
    overflow: hidden;
    transform: scaleY(0); 
    opacity: 0;
    height: 0;
    transform-origin: top;
    transition: transform 0.4s ease;
}


.mmenuitem_actv > .m_menu_item > svg {
    transform: rotate(-180deg);
}

.mmenuitem_actv > .m_menu_item{
    color: var(--b-color);
}

.mmenuitem_actv > .mm_items {
    opacity: 1;
    height: auto;
    transform: scaleY(1);
}

.mm_empty{
    width: 100%;
    height: 142px;
    /* border: 1px solid orange; */
}

@media only screen and (min-width : 0px) {
    .aside {
        padding: 0 12px;
    }

    .m_sidebar_btn_x{
        height: 60px;
    }

    .ic_x{
        height: 40px;
        width: 40px;
        fill: var(--gen-color)
    }

    .m_menu_item{
        padding: 14px 0;
        font-size: 16px;
        font-weight: 600;
    }

    .mm_item{
        margin: 0 0 12px 12px;
    }

    .mm_item a{
        font-size: 14px;
        font-weight: 500;
        color: var(--gen-color);
    }

    .mm_item_deskr{
        font-size: 12px;
        font-weight: 400;
    }

    .m_menu_item > svg {
        width: 16px;
        height: 16px;
        margin: 4px;
    }
}

@media only screen and (min-width : 380px) {
    .aside {
        padding: 0 16px;
    }

    .m_sidebar_btn_x{
        height: 60px;
    }

    .ic_x{
        height: 40px;
        width: 40px;
        fill: var(--gen-color)
    }

    .m_menu_item{
        padding: 14px 0;
        font-size: 16px;
        font-weight: 600;
    }

    .mm_item{
        margin: 0 0 12px 12px;
    }

    .mm_item a{
        font-size: 14px;
        font-weight: 500;
        color: var(--gen-color);
    }

    .mm_item_deskr{
        font-size: 12px;
        font-weight: 400;
    }

    .m_menu_item > svg {
        width: 16px;
        height: 16px;
        margin: 4px;
    }
}

@media only screen and (min-width : 760px) {}

@media only screen and (min-width: 1025px) {}

@media only screen and (min-width: 1440px) {}

@media only screen and (min-width: 2560px) {}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


@keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.sl_w{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sl_blocks{
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    width: 100%;
}

.sl_block{
    position: absolute;
    display: none;
    opacity: 0;
}

.sl_show{
    animation: slider-animation 1.4s cubic-bezier(0, 0, 0.16, 0.96) 0s;
    display: flex;
    opacity: 1;
}

.slb_info {
    display: flex;
    flex-direction: column;
    justify-content: center;

    color: var(--text-color)
}

.slb_img {
    display: flex;
    flex-direction: row;
}

.sl_pbar{
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 2px;
}

.sl_pr{
    height: 30px;
    width: 30%;
    margin: 0 2%;
    position: relative;
    cursor: pointer;
}

.sl_barbase{
    top: 15px;
    position: absolute; 
    height: 2px;
    background-color: var(--a-color);
    width: 100%;
}

.sl_bar{
    top: 15px;
    position: absolute; 
    height: 2px;
    background-color: var(--b-color);
}

.sl_bar_a{
    animation: slider-pbar-animation 10s forwards;
}

.sl_bar_amove{
    width: 100%;
}



@media only screen and (min-width : 0px) {
    .sl_blocks{
        margin-top: 12px;
        width: 100%;
        height: 480px;
    }

    .sl_block {
        flex-direction: column;
        align-items: center;
        height: 480px;
    }

    .slb_info{
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        padding: 16px 24px;
    }

    .slb_info p{
        padding-right: 46px;
    }

    .slb_img {
        justify-content: center;
        align-items: center;
        height: 320px;
    }

    .slb_img img {
        height: auto;
        width: 80%;
    }

    .slb_img_s img{
        height: auto;
        width: 60%;
    }

    .sl_pbar {
        margin: 24px auto;
        width: 100%;
        padding: 0 24px;
    }

    .sl_pr{
        height: 44px;
    }
}

@media only screen and (min-width : 380px) {
    .sl_blocks{
        margin-top: 24px;
        width: 100%;
        height: 600px;
    }

    .sl_block {
        flex-direction: column;
        align-items: center;
        height: 600px;
    }

    .slb_info{
        width: 100%;
        font-size: 16px;
    }

    .slb_info p{
        padding-right: 46px;
    }

    .slb_img {
        justify-content: center;
        align-items: center;
        height: 400px;
    }

    .slb_img img {
        height: auto;
        width: 80%;
    }

    .slb_img_s img{
        height: auto;
        width: 64%;
    }

    .sl_pbar {
        margin: 32px auto;
        width: 100%;
        padding: 0 24px;
    }
}

@media only screen and (min-width : 760px) {
    .sl_blocks{
        margin-top: 32px;
        width: 100%;
        height: 760px;
    }

    .sl_block {
        flex-direction: column;
        align-items: center;
        height: 760px;
    }

    .slb_info{
        width: 100%;
        font-size: 24px;
        padding: 32px 48px;
    }

    .slb_info p{
        padding-right: 96px;
    }

    .slb_img {
        justify-content: center;
        align-items: center;
        height: 480px;
    }

    .slb_img img {
        height: auto;
        width: 70%;
    }

    .slb_img_s img{
        height: auto;
        width: 60%;
    }

    .sl_pbar {
        margin: 40px auto;
        width: 100%;
        padding: 0 40px;
    }
}

@media only screen and (min-width: 1025px) {
    .sl_blocks{
        margin-top: 56px;
        height: 480px;
    }

    .sl_block {
        flex-direction: row;
        height: 480px;
    }

    .slb_info{
        width: 460px;
        height: auto;
        font-size: 18px;
        font-weight: 400;
        padding: 0;
    }

    .slb_info p{
        padding-right: 38px;
    }

    .slb_img {
        justify-content: flex-end;
        width: 512px;
    }

    .slb_img img {
        width: 92%;
        height: auto;
    }

    .slb_img_s img{
        width: 72%;
        height: auto;
    }

    .sl_pbar {
        margin: 36px auto;
        width: 800px;
    }
}

@media only screen and (min-width: 1440px) {
    .sl_blocks{
        margin-top: 96px;
        height: 520px;
    }

    .sl_block{
        height: 520px;
    }

    .slb_info{
        width: 580px;
        font-size: 22px;
    }

    .slb_img {
        justify-content: flex-end;
        width: 640px;
    }

    .slb_info p{
        padding-right: 80px;
    }

    .sl_pbar {
        margin: 96px auto;
        width: 1000px;
    }
}

@media only screen and (min-width: 2560px) {
    .sl_blocks{
        margin-top: 96px;
        height: 660px;
    }

    .sl_block{
        height: 660px;
    }

    .slb_info{
        width: 720px;
    }

    .slb_info p{
        padding-right: 132px;
    }

    .sl_pbar {
        margin: 96px auto;
    }
}

@keyframes slider-pbar-animation {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes slider-animation {
    0% { opacity: 0; }
    100% { opacity: 1; }
}