@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-Thin.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 100; 
} 
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-ThinItalic.ttf") format("truetype"); 
    font-style: italic; 
    font-weight: 100; 
}
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-ExtraLight.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 300; 
} 
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-ExtraLightItalic.ttf") format("truetype"); 
    font-style: italic; 
    font-weight: 300; 
}
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-Light.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 300; 
} 
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-LightItalic.ttf") format("truetype"); 
    font-style: italic; 
    font-weight: 300; 
} 
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 400; 
} 
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-Italic.ttf") format("truetype"); 
    font-style: italic; 
    font-weight: 400; 
} 
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-Medium.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 500; 
} 
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-MediumItalic.ttf") format("truetype"); 
    font-style: italic; 
    font-weight: 500; 
} 
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 600; 
} 
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-SemiBoldItalic.ttf") format("truetype"); 
    font-style: italic; 
    font-weight: 600; 
}
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 700; 
} 
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-BoldItalic.ttf") format("truetype"); 
    font-style: italic; 
    font-weight: 700; 
}
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-ExtraBold.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 800; 
} 
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-ExtraItalic.ttf") format("truetype"); 
    font-style: italic; 
    font-weight: 800; 
} 

@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-Black.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: 900; 
} 
@font-face {
    font-family: Montserrat; 
    src: url("../fonts/Montserrat-BlackItalic.ttf") format("truetype"); 
    font-style: italic; 
    font-weight: 900; 
}

@font-face {
    font-family: Namu; 
    src: url("../fonts/NAMU.ttf") format("truetype"); 
    font-style: normal; 
}

@font-face {
    font-family: KyivTypeSans;
    src: url('../fonts/KyivTypeSans-Thin.otf') format('opentype') ;
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: KyivTypeSans;
    src: url('../fonts/KyivTypeSans-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: KyivTypeSans;
    src: url('../fonts/KyivTypeSans-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: KyivTypeSans;
    src: url('../fonts/KyivTypeSans-Medium.otf') format('opentype') ;
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: KyivTypeSans;
    src: url('../fonts/KyivTypeSans-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: KyivTypeSans;
    src: url('../fonts/KyivTypeSans-Heavy.otf') format('opentype') ;
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: KyivTypeSans;
    src: url('../fonts/KyivTypeSans-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: KyivTypeSansNew;
    src: url('../fonts/KyivTypeSans-Medium2.otf') format('opentype');
    font-style: normal;
}


:root{
    --black:  #000000;
    --black-rgb:  0,0,0;
    --black-2: #0f0b0c;
    --olive-l: #F2F0F1;
    --olive-d: #E8E0D6;
    --grey: #446652;
    --red-rgb: 68,102,82;
    --red: #446652;
    --text-d: #333;
    --white: #ffffff;
    --white-bg: #f0efeb;
    --skin-bg:#84c5db;
    --skin2-bg:#de81b5;
    --header-bg:#F2F0F1;
    --beige:#BDB1A3;
    --footer-bg:#231F20;
    --card-bg:#E1DDD8;
    --orange:#FF914D;
    --grey-black:#1A1A1A;
    --grey-opac:#555453;

    /* fonts */

    --ft12: 12px;
    --ft13: 13px;
    --ft14: 14px;
    --ft15: 15px;
    --ft16: 16px;
    --ft17: 17px;
    --ft18: 18px;
    --ft19: 19px;
    --ft20: 20px;
    --ft21: 21px;
    --ft22: 22px;
    --ft23: 23px;
    --ft24: 24px;
    --ft26: 26px;
    --ft28: 28px;
    --ft30: 30px;
    --ft32: 32px;
    --ft36: 36px;
    --ft38: 38px;
    --ft40: 40px;
    --ft52: 52px;
}

body.font-body-big{
    --ft12: 14px;
    --ft13: 15px;
    --ft14: 16px;
    --ft15: 17px;
    --ft16: 18px;
    --ft17: 19px;
    --ft18: 20px;
    --ft19: 21px;
    --ft20: 22px;
    --ft21: 23px;
    --ft22: 24px;
    --ft23: 25px;
    --ft24: 26px;
    --ft26: 28px;
    --ft28: 30px;
    --ft30: 32px;
    --ft32: 34px;
    --ft36: 38px;
    --ft38: 40px;
    --ft40: 42px;
    --ft52: 54px;
}

body.font-body-very-big{
    --ft12: 16px;
    --ft13: 17px;
    --ft14: 18px;
    --ft15: 19px;
    --ft16: 20px;
    --ft17: 21px;
    --ft18: 22px;
    --ft19: 23px;
    --ft20: 24px;
    --ft21: 25px;
    --ft22: 26px;
    --ft23: 27px;
    --ft24: 28px;
    --ft26: 30px;
    --ft28: 32px;
    --ft30: 34px;
    --ft32: 36px;
    --ft36: 40px;
    --ft38: 42px;
    --ft40: 44px;
    --ft52: 56px;
}

body.invers-color{
    --black:  #ffffff;
    --black-rgb:  255,255,255;
    --black-2: #fff;
    --olive-l: #000;
    --olive-d: #000;
    --grey: #fff;
    --red-rgb: 255,255,255;
    --red: #fff;
    --text-d: #000;
    --white: #000;
    --white-bg: #000;
    --skin-bg:#000;
    --skin2-bg:#000;
    --header-bg:#000;
    --beige:#000;
    --footer-bg:#fff;
    --card-bg:#000;
    --orange:#fff;
    --grey-black:#fff;
    --grey-opac:#fff;
}

html{
    width: 100%;
    overflow-x: hidden;
}

body{
    font-family: serif;
    color: var(--black-2);
    font-size: 100%;
    line-height: 1.3;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--olive-l);
    font-family: Montserrat, sans-serif;
    width: 100%;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img{
    max-width: 100%;
}

table{
    border-collapse: collapse;
    border-spacing: 0;
}

.wrap{
    padding: 0 10px;
    max-width: 1460px;
    margin: 0 auto;
    position: relative;
}

.wrap-l{
    padding: 0 16px;
    margin: 0 auto;
    position: relative;
}

.wrap-s{
    margin: 0 auto;
    position: relative;
    max-width: 1000px;
}

main{
    flex: 1 0 auto;
}

/* header */

header{
    font-size: var(--ft20);
    background: var(--header-bg);
    position: sticky;
    z-index: 2;
    top: 0;
    -webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
}

.header-cont{
    display: flex;
    align-items: center;
    gap: 2em;
    position: relative;
}

.header-logo{
    display: flex;
    height: 3.75em;
}

.header-logo a{
    display: flex;
    max-width: 150px;
    display: flex;
    align-items: center;
}

.header-logo a img{
    width: 100%;
}

.header-logo svg{
    width: auto;
    height: 100%;
}

.header-content-block{
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.header-burger{
    display: none;
    position: absolute;
    right: 0;
    padding: 1em;
    top: 0;
}

.header-burger i{
    font-size: 1.75em;
    color: var(--red);
    opacity: 1;
}

.header-burger .close{
    display: none;
}

.header-menu-cont{
    flex: 1 0 auto;
}

.header-menu-list{
    display: flex;
    align-items: center;
    font-size: 0.9em;
}

.header-menu-item{
    text-align: center;
}

.header-menu-item a{
}

.header-menu-link{
    padding: 0.4em 0.7em;
    color: var(--black);
    position: relative;
    font-weight: 600;
    font-family: KyivTypeSans;
}

.header-menu-link:before{
    content: "";
    width: 0;
    height: 2px;
    top: calc(100% - 2px);
    position: absolute;
    left: 0;
    border-radius: 2px;
    background-color: var(--red);
    transition: .5s all ease-in-out;
}

.header-menu-link:hover{
    text-decoration: none;
    color: var(--red);
}

.header-menu-link:hover:before{
    width: 100%;
}

.header-menu-link .icon{
    display: none;
}

.header-menu-dropdown{
    display: none;
    position: absolute;
    white-space: nowrap;
    font-size: 0.9em;
    background-color: var(--white-bg);
    box-shadow: 0 3px 12px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.08);
    margin-top: 0.5em;
    z-index: 25;
}

.header-menu-dropdown:before{
    position: absolute;
    top: -0.75em;
    left: 1.5em;
    content: '';
    border: solid transparent;
    height: 0;
    width: 0;
    pointer-events: none;
    border-bottom-color: var(--white-bg);
    border-width: 0.375em;
    margin-left: -0.375em;
}

.header-menu-dropdown-item a{
    padding: 0.75em 1em;
    display: block;
    white-space: nowrap;
    color: var(--red);
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: none;
}

.header-menu-dropdown-item a:hover{
    background: var(--white);
    color: var(--black);
}

.header-menu-dropdown-item + .header-menu-dropdown-item{
    border-top: 1px solid rgba(0,0,0,0.25);
}

.header-menu-item.opened .header-menu-dropdown{
    display: block;
}

.header-search-block{
    display: none;
}

.header-search-toogler{
    display: flex;
    align-items: center;
    padding: 1em;
    color: var(--black);
    cursor: pointer;
}

.header-search-toogler i{
    font-size: 1.75em;
}

.header-search-toogler i.close{
    display: none;
}

.header-language-block a{
    padding: 0.4em 1em;
    font-size: 0.9em;
    color: var(--black);
    text-decoration: none;
    font-weight: 600;
    font-family: KyivTypeSans;
}

.header-search-cont.opened .header-search-block{
    position: absolute;
    left: 0px;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.header-search-cont.opened .header-search-block > *{
    height: 100%;
}

.header-search-input{
    height: 100%;
    position: relative;
}

.header-search-input input{
    width: 100%;
    border: 3px solid transparent;
    background: var(--white);
    font-weight: 400;
    font-size: 0.9em;
    line-height: 3.75;
    padding: 0 3.75em;
    border-radius: 0;
    outline: 0;
}

.header-search-input input::placeholder{
    opacity: 0.25;
    color: inherit;
}

.header-search-input input:focus{
    border-color: var(--black);
}

.header-search-input-icon{
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    padding: 1em;
    color: var(--black);
    opacity: .25;
}

.header-search-input-icon i{
    font-size: 1.75em;
}

.header-search-input input:focus + .header-search-input-icon{
    opacity: 1;
}

.header-search-cont.opened .header-search-toogler{
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
}

.header-search-cont.opened .header-search-toogler i:not(.close){
    display: none;
}

.header-search-cont.opened .header-search-toogler i.close{
    display: inline-block;
    opacity: 1;
    color: var(--red);
}

@media(max-width: 1440px){
    header{
        font-size: var(--ft19);
    }
}

@media(max-width: 1336px){
    header{
        font-size: var(--ft18);
    }
}

@media(max-width: 1232px){
    header{
        font-size: var(--ft17);
    }
}

@media(max-width: 1128px){
    header{
        font-size: var(--ft16);
    }
}

@media(max-width: 1024px){
    .header-burger{
        display: block;
    }

    .header-cont{
        flex-wrap: wrap;
        gap: 0;
    }

    .header-content-block > div:not(.header-burger){
        display: none;
    }

    .header-cont.menu-opened .header-burger i:not(.close){
        display: none;
    }

    .header-cont.menu-opened .header-burger .close{
        display: block;
    }

    .header-cont.menu-opened{
        background: var(--olive-l);
    }

    .header-content-block{
        flex-direction: column;
        flex: 0 0 100%;
        max-width: 100%;
        align-items: unset;
    }

    .header-cont.menu-opened .header-content-block > div:not(.header-burger){
        display: block;
    }

    .header-search-toogler{
        display: none;
    }

    .header-search-block{
        display: block;
        margin-bottom: 10px;
    }

    .header-language-block{
        border: 1px solid;
        padding: 1em;
        text-align: center;
        margin: 1em;
    }

    .header-language-block a{
        display: block;
        width: 100%;
        padding: 1em;
        margin: -1em 0;
    }

    .header-menu-list{
        flex-direction: column;
        align-items: unset;
        font-size: 1.25em;
        padding-top: 10px;
    }

    .header-menu-link{
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 0.75em;
    }

    .header-menu-item + .header-menu-item{
        border-top: 1px solid;
    }

    .header-menu-link .icon{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-menu-link .opened{
        display: none;
    } 

    .header-menu-dropdown{
        position: static;
        margin: 0;
        background: transparent;
        box-shadow: none;
    }

    .header-menu-dropdown-item + .header-menu-dropdown-item{
        border: 0;
    }

    .header-menu-dropdown-item a{
        font-size: .75em;
        padding: 1em;
    }

    .header-menu-dropdown-item a:hover{
        background: transparent;
        color: var(--red);
    }

    .header-menu-item.opened .header-menu-link .opened{
        display: block;
    }

    .header-menu-item.opened .header-menu-link .closed{
        display: none;
    }

    .header-language-block{
        order: 2;
    }

    .header-search-cont{
        order: 3;
    }
}

/* footer */

footer{
    font-size: var(--ft18);
    background: var(--footer-bg);
    color: var(--header-bg);
    padding: 70px 0;
}

.footer-grid{
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.footer-grid-item{
    display: flex;
    flex-direction: column;
}

.footer-list-title{
    font-size: var(--ft26);
    font-family: KyivTypeSansNew;
    margin-bottom: 30px;
}

.footer-list{
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-list li + li{
    margin-top: 5px;
}

.footer-phone-group{
    display: flex;
    align-items: center;
    gap: 10px;
}


.footer-phone-group .icon{
    display: flex;
    align-items: center;
}

.footer-phone-group .icon svg{
    width: 20px;
}

.footer-phone-group .icon path{
    fill: var(--header-bg);
}

.footer-phone-group .icon:hover path{
    fill: var(--red);
}

.footer-list-item a.underline{
    text-decoration: underline;
}

.footer-list-item a:hover{
    text-decoration: underline;
    color: var(--red);
}

.footer-block{
    line-height: 1.5;
    padding: 1em .5%;
    position: relative;
}

.footer-contact-name{
    font-weight: bold;
    text-transform: uppercase;
}

.footer-contact-name, .footer-contact-address, .footer-contact-phone, .footer-contact-email{
    font-size: .875em;
}

.footer-contact-phone strong, .footer-contact-email strong{
    text-transform: uppercase;
}

.footer-contact-email a{
    text-decoration: underline;
    color: inherit;
}

.footer-social{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.footer-social-item{
    display: flex;
    align-items: center;
}

.footer-social-item a{
    display: flex;
    align-items: center;
}

.footer-social-item svg{
    width: 30px;
}

.footer-social-item svg path{
    fill: var(--header-bg);
}

.footer-social-item:hover{
    text-decoration: none;
    color: inherit;
}

.footer-social-item .icon{
    display: flex;
    align-items: center;
    font-size: 1em;
}

.footer-social-item .icon svg{
    width: 20px;
}

.footer-social-item .text{
    font-size: .75em;
    padding: 0.125em 0;
    border-bottom: 1px solid;
    line-height: 1;
}


@media(max-width: 1440px){
    footer{
        font-size: var(--ft19);
    }
}

@media(max-width: 1272px){
   footer{
        font-size: var(--ft18);
    }
}

@media(max-width: 1104px){
    footer{
        font-size: var(--ft17);
    }
}

@media(max-width:936px){
    footer{
        font-size: var(--ft16);
    }
}

@media(max-width:768px){
    footer{
        font-size: var(--ft16);
    }
}

/* main */

.main-banner-block{
    position: relative;
}

.main-banner-block .wrap{
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
}

.main-banner-img{
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 50%;
}

.main-banner-img img{
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
}



.main-banner-text {
    font-size: var(--ft24);
    width: fit-content;
    padding: 1.5em ;
    margin-top: 1em;
    margin-bottom: 1em;
    color: var(--white);
}

.main-banner-semititle{
    font-size: 1em;
    font-weight: 500;
}

.main-banner-title{
    margin-bottom: 0.5em;
    font-size: var(--ft52);
    line-height: 1.2;
    /*font-weight: 700;*/
    font-family: KyivTypeSansNew;
}

.main-banner-title span{
    white-space: nowrap;
    font-size: 0.8em;
}

.main-banner-btns{
    font-weight: 500;
    margin: 1em -0.5em -0.5em -0.5em
}

.main-banner-btn{
    display: inline-block;
    margin: 0.5em;
    background-color: transparent;
    color: var(--white,#000);
    border: 1px solid var(--white,#000);
    transition: .25s all;
    text-decoration: none;
    padding: 6px 11px;
    font-size: var(--ft30);
    line-height: 36px;
    text-transform: uppercase;
}

.main-banner-btn:hover{
    color: var(--white,#000);
    border: 1px solid var(--white,#000);
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
    text-decoration: none;
}

.icons-info-section{
    padding: 3em 0;
}

.icons-info-cont{
    display: flex;
    flex-wrap: wrap;
}

.icons-info-elem{
    flex:0 0 25%;
    max-width: 25%;
    text-align: center;
    padding: 1em;
    text-decoration: none;
}

.icons-info-elem:hover{
    text-decoration: none;
    color: inherit;
}

.icons-info-head .icon{
    line-height: 1;
    margin-bottom: 10px;
}

.icons-info-head .icon svg{
    width: 3.75em;
    height: 3.75em;
}

.icons-info-head .icon svg path{
    fill: var(--black);
}

.icons-info-title{
    font-family: KyivTypeSansNew;
    font-size: 1.25em;
    line-height: 1.2;
    /*font-weight: 600;*/
}

.icons-info-elem:hover .icons-info-title{
    text-decoration: underline;
}

.icons-info-body{
    margin-top: 0.5em;
}

.text-l .icons-info-body{
    font-size: 0.8em;
}

.icons-info-foot{
    display: flex;
    align-items: center;
    justify-content: center;
}

.icons-info-foot .icon{
    opacity: .5;
    padding-top: 0.5em;
    padding-bottom: 0;
    display: inline-flex;
    transition: all .25s ease-in-out;
}

.icons-info-elem:hover .icons-info-foot .icon{
    opacity: 1;
}

.icons-info-foot .icon svg{
    height: 1.25em;
    width: 1.25em;
}

.icons-info-foot .icon svg path{
    fill: var(--black);
}


.section{
    padding: 30px 0;
    background: var(--header-bg);
}

.section-grey{
    background-color: var(--olive-d);
}

.d-section-title{
    /*font-weight: 400;*/
    font-size: var(--ft36);
    margin: 20px 0 ;
    font-family: KyivTypeSansNew;
    text-transform: uppercase;
}

.page-title-sec .d-section-title{
    margin: 2em 0 1em 0;
}

.section-row{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5%;
}

.section-row-item{
    flex: 0 0 99%;
    max-width: 100%;
    margin: .5%;
}

.section-row-item.section-row-item-full, .section-row-4 .section-row-item.section-row-item-full{
   flex: 0 0 99%;
    max-width: 100%;
    margin: .5%; 
}

.section-row-3{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5%;
}

.section-row-3 .section-row-item{
    flex: 0 0 32.33%;
    max-width: 32.33%;
    margin: .5%;
}

.action-card{
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: 10px;
}

.action-card.exposition{
    background: transparent;
}

.action-card-date-cont{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
}

.action-card-date{
    font-family: KyivTypeSansNew;
    font-size: var(--ft32);
    /*font-weight: 700;*/
    line-height: 1.25;
}

.action-card-date-detail{
    min-height: 48px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
    font-weight: 600;
}

.action-card-date-week{
    text-align: right;
    line-height: 1.5;
    font-size: var(--ft14);
}

.action-card-date-time{
    text-align: right;
    line-height: 1.5;
    font-size: var(--ft14);
}

.action-card-img-cont{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.action-card-img-cont:before{
    content: "";
    display: block;
    padding-top: 100%;
}

.action-card-img-cont img{
    position: absolute;
    max-width: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    scale: 1;
    transition: 0.3s all;
    height: 100%;
    width: 100%;
}

.action-card-img-cont:hover img{
    scale: 1.04;
}

.action-card-info{
    display: flex;
    flex-direction: column;
    padding: 15px 15px;
    font-size: var(--ft16);
}

.exposition .action-card-info{
    padding: 15px 0;
}

.exposition.type .action-card-info{
    text-align: center;
}

.exposition.type .action-card-img-cont:before{
    padding-top: 75%;
}

.action-card-name{
    display: flex;
    overflow: hidden;
    margin-bottom: 15px;
    transition: 0.3s all;
    text-decoration: none;
    text-overflow: ellipsis;
    font-size: var(--ft24);
    font-weight: 500;
    height: calc(32px* 2);
    line-height: 32px;
    transition: 0.3s all;
    width: 100%;
}

.action-card-name a{
    font-family: KyivTypeSansNew;
    font-size: var(--ft24);
    /*font-weight: 700;*/
    line-height: 32px;
    transition: 0.3s all;
    width: 100%;
}

.action-card-name a:hover{
    color: var(--red);
    text-decoration: none;
}

.action-card-descr{
    overflow: hidden;
    height: calc(18px* 3);
    margin-bottom: 20px;
    text-overflow: ellipsis;
    line-height: 18px;
}

.action-card-descr p{
    margin-top: 0;
    font-size: var(--ft14);
    line-height: 18px;
}

.module-grid{
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.module-content{
    flex-grow: 1;
}

.icons-info-head{
    gap: 9px;
    display: flex;
    flex-direction: column;
}

.icons-info-head.line-3 .icons-info-title{
    line-height: 1.5em;
    min-height: 3em;
    overflow: hidden;
}

.module-media{
    padding-bottom: 50%;
    width: 100%;
    overflow: hidden;
    position: relative;
    text-align: left;
}

.ckv-img .module-media{
    padding-bottom: 100%;
}

.large-img .module-media{
    padding: 0;
}

.module-media img{
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    transition: all .5s ease-in-out;
}

.large-img .module-media img{
    position: static;
    transform: none;
}

.module-grid{
    color: inherit;
    text-decoration: none;
}

.module-grid:hover{
    color: inherit;
    text-decoration: none;
}

.module-content{
    font-size: var(--ft18);
    line-height: 1.4;
    background: rgba(var(--red-rgb),0.85);
    color: var(--white);
}

.color1 .module-content{
    background: var(--skin-bg);
    text-align: left;
}

.color2 .module-content{
    background: var(--skin2-bg);
    text-align: left;
}

.color-l .module-content{
    background: var(--white);
}

.text-l .module-content{
    text-align: left;
}

.module-layout{
    padding: 1em 0.4em;
}

.text-l .module-layout{
    padding: 10px;
}

.module-grid:hover .icons-info-title{
    text-decoration: underline;
}

.module-grid:hover .icons-info-foot .icon{
    opacity: 1;
}

.module-grid:hover .module-media img{
    transform: scale(1.1,1.1);
}

.section-btns{
    margin: .5% 0;
    font-size: var(--ft18);
    margin-top: 20px;
}

.section-btn{
    background-color: transparent;
    color: var(--black,#000);
    border: 1px solid var(--black,#000);
    transition: .25s all;
    padding: 6px 11px;
    font-size: var(--ft20);
    line-height: 1;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    border-radius: 8px;
}

.section-btn:hover{
    text-decoration: none;
    color: inherit;
    transform: scale(1.01);
}

.section-row-4{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5%;
}

.section-row-4 .section-row-item{
    flex: 0 0 24%;
    max-width: 24%;
    margin: .5%;
}

.section-row-4 .section-row-item-2{
    flex: 0 0 49%;
    max-width: 49%;
    margin: .5%;
}

.section-row-item-hovered .module-media{
    padding-bottom: 100%;
}

.section-row-item-hovered.section-row-item-2 .module-media{
    padding-bottom: 49%;
}

.section-row-item-hovered .module-content{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--black-rgb),0.45);
    color: var(--white);
}

.section-row-item-hovered .module-content path{
    fill: var(--white);
}

.section-row-item-hovered .module-media img{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    transform: none;
}

.section-row-item-hovered .module-grid:hover .module-media img{
    scale:1.1;
    transform: none;
}

.section-row-item-large.section-row-item-hovered .module-media{
    padding-bottom: 200%;
}

.section-row-item-large.section-row-item-hovered .module-media img{
    height: 100%;
}

.section-row-item-text{
    padding: 1em 0;
    margin-left: .5%;
    max-width: 1000px;
    font-size: var(--ft24);
    line-height: 1.4;
}

@media(min-width: 360px){
    .icons-info-cont, .module-content, .section-btns{
        font-size: var(--ft13);
    }
}

@media(min-width: 400px){
    .icons-info-cont, .module-content, .section-btns{
        font-size: var(--ft14);
    }
}
@media(min-width: 440px){
    .icons-info-cont, .module-content, .section-btns{
        font-size: var(--ft15);
    }
}

@media(min-width: 480px){
    .icons-info-cont, .module-content, .section-btns{
        font-size: var(--ft16);
    }
}

@media(min-width: 640px){
    .main-banner-text, .main-banner-title-page, .section-row-item-text{
        font-size: var(--ft17);
    }

    .icons-info-cont, .module-content, .section-btns{
        font-size: var(--ft12);
    }
}

@media(min-width: 693.33333px){
    .icons-info-cont, .module-content, .section-btns{
        font-size: var(--ft13);
    }
}

@media(min-width: 720px){
    .main-banner-text, .main-banner-title-page, .section-row-item-text{
        font-size: var(--ft17);
    }
}

@media(min-width: 746.66667px){
    .icons-info-cont, .module-content, .section-btns{
        font-size: var(--ft14);
    }
}

@media(min-width: 768px){
    .wrap-l{
        max-width: 656px;
        padding: 0 8px;
    }
}
@media(min-width: 853.33333p){
    .icons-info-cont, .module-content, .section-btns{
        font-size: var(--ft16);
    }
}

@media(min-width: 880px){
    .main-banner-text, .main-banner-title-page, .section-row-item-text{
        font-size: var(--ft19);
    }
}

@media(min-width: 906.66667px){
    .icons-info-cont, .module-content, .section-btns{
        font-size: var(--ft17);
    }
}

@media(min-width: 960px){
    .main-banner-text, .main-banner-title-page, .section-row-item-text{
        font-size: var(--ft20);
    }

    .icons-info-cont, .module-content{
        font-size: var(--ft16);
    }
}

@media(min-width: 1040px){
    .main-banner-text, .main-banner-title-page, .section-row-item-text{
        font-size: var(--ft21);
    }
}

@media(min-width: 1120px){
    .main-banner-text, .main-banner-title-page, .section-row-item-text{
        font-size: var(--ft22);
    }
}

@media(min-width: 1200px){
    .main-banner-text, .main-banner-title-page, .section-row-item-text{
        font-size: var(--ft23);
    }
}

@media(min-width: 1280px){
    .main-banner-text, .main-banner-title-page, .section-row-item-text{
        font-size: var(--ft24);
    }

    .icons-info-cont, .module-content, .section-btns{
        font-size: var(--ft18);
    }

    .wrap-l{
        max-width: 720px;
    }
}

@media(max-width: 1020px){
    .wrap-s{
        padding: 0 8px;
    }

    .icons-info-title{
        font-size: 1em;
    }
}

@media(max-width: 640px){
    .main-banner-text {
        font-size: var(--ft15);
        position: relative;
        top: 0;
        margin: 0;
        transform: none;
        width: 100%;
        padding: 1em;
        max-width: unset;
    }

    .main-banner-img{
        padding-bottom: 0;
    }

    .main-banner-img img{
        position: static;
        transform: none;
    }

    .icons-info-elem{
        flex: 0 0 50%;
        max-width: 50%;
    }

    .section-row, .section-row-4, .section-row-3, .section-row-2{
        margin: 0 -4px;
    }

    .section-row-item{
        flex: 0 0 calc(100% - 8px);
        max-width: calc(100% - 8px);
        margin: 4px;
    }

    .section-row-item.section-row-item-full, .section-row-4 .section-row-item.section-row-item-full{
        flex: 0 0 calc(100% - 8px);
        max-width: calc(100% - 8px);
        margin: 4px;
    }

    .section-row-3 .section-row-item, .section-row-4 .section-row-item.section-row-item-large{
        flex: 0 0 calc(100% - 8px);
        max-width: calc(100% - 8px);
        margin: 4px;
    }

    .section-row-4 .section-row-item{
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
        margin: 4px;
    }

    .section-row-4 .section-row-item-2{
        flex: 0 0 calc(100% - 8px);
        max-width: calc(100% - 8px);
    }

    .section-row-item-text{
        max-width: unset;
        margin-left: 0;
        font-size: var(--ft15);
    }

}

@media(max-width: 360px){
    .icons-info-cont, .module-content, .section-btns{
        font-size: var(--ft12);
    }
}

/* breadcrumbs */

.breadcrumbs-cont{
    padding: 0.75em 0;
    color: var(--red);
}

.breadcrumbs-item{
    display: inline-block;
    font-weight: 400;
    font-size: .875em;
    line-height: 1;
}

a.breadcrumbs-item-link{
    border-bottom: 1px solid var(--red);
    color: inherit;
    text-decoration: none;
}

.breadcrumbs-sep{
    display: inline-flex;
}

.breadcrumbs-sep svg{
    width: .875em;
}

.breadcrumbs-sep path{
    fill: var(--red);
}

@media(min-width: 1024px){
    .breadcrumbs-section{
        font-size: var(--ft16);
    }
}

@media(min-width: 1128px){
    .breadcrumbs-section{
        font-size: var(--ft17);
    }
}

@media(min-width: 1232px){
    .breadcrumbs-section{
        font-size: var(--ft18);
    }
}

@media(min-width: 1336px){
    .breadcrumbs-section{
        font-size: var(--ft19);
    }
}

@media(min-width: 1440px){
    .breadcrumbs-section{
        font-size: var(--ft20);
    }
}


/* wats on */

.page-title, .page-text-semi, .page-text-body{
    font-size: var(--ft16);
    line-height: 1.5;
}

.page-title span{
    font-size: 2.75em;
    line-height: 1.125;
    font-size: 700;
    display: block;
    font-size: 2.75em;
    padding-top: 1.125em;
    margin-bottom: 0.5em;
    margin-left: .5%;
    margin-right: .5%;
    font-family: Namu, sans-serif;
}

.page-text-semi{
    margin: 0 .5%;
}

.page-text-date{
    padding-top: .5em;
    margin-bottom: 1em;
    border-top: 1px solid;
}

.page-text-date .meta-date{
    font-size: 1em;
}

.page-text-semi span{
    display: block;
    font-size: 1.25em;
    line-height: 1.5;
    margin-top: 0.5em;
    margin-bottom: 1em;
    text-align: justify;
}

.section-card{
}

.mobule-card{
    margin-bottom: 30px;
}


.mobule-card a:not(.section-btn){
    display: block;
    text-decoration: none;
    color: inherit;
}

.mobule-card a:hover .mobule-card-grid{
    box-shadow: 0 3px 12px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.08);
    -moz-transform: translate(0,-2px);
    -ms-transform: translate(0,-2px);
    -webkit-transform: translate(0,-2px);
    transform: translate(0,-2px);
}

.mobule-card-grid{
    position: relative;
    transition: all .25s;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background: var(--beige);
}

.bg-gray .mobule-card-grid{
    background: var(--olive-d);
}

.bg-olive .mobule-card-grid{
    background: var(--grey);
}

.mobule-card.colored .mobule-card-grid {
    background: var(--skin-bg);
}

.mobule-card.colored2 .mobule-card-grid {
    background: var(--skin2-bg);
}

.mobule-card-img{
    position: relative;
    width: 40%;
    flex: 0 0 40%;
    padding-bottom: 40%;
    overflow: hidden;
}

.mobule-card-img img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

.mobule-card-content{
    font-size: var(--ft14);
    padding: 20px 40px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.mobule-card-text .mobule-card-content{
    padding: 1em 2em;
}

.mobule-card-text .mobule-card-head{
    border:0;
    font-size: 1.2em;
}

.accordion .mobule-card-content{
    padding: 1em 2em;
}

.accordion .mobule-card-body{
    display: none;
}

.accordion  .mobule-card-head{
    cursor: pointer;
}

.accordion .mobule-card-content.opened .mobule-card-head{
    border-bottom: none;
}

.accordion .accordion-icon{
    position: absolute;
    padding: 1em;
    right: 0;
    top: 0;
    cursor: pointer;
}

.accordion .mobule-card-content.opened .accordion-icon svg{
    transform: rotate(90deg);
}

.accordion .accordion-icon svg{
    width: 1em;
}

.accordion .mobule-card-content.opened .mobule-card-body{
    display: block;
}

.mobule-card-head{
    display: inline-block;
    font-weight: 400;
    font-size: var(--ft36);
    font-weight: 700;
    font-family: KyivTypeSans;
    text-transform: uppercase;
    border-bottom: 2px solid;
    padding-bottom: 5px;
}

.mobule-card-head .icon{
    margin-bottom: 0.5em;
}

.mobule-card-head .icon svg{
    width: 3.75em;
    height: 3.75em;
}

.mobule-card-body{
    flex-grow: 1;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: var(--ft20);
    display: flex;
    align-items: center;
}

.mobule-card-body p:last-child{
    margin: 0;
}

.section-card-title{
    font-size: var(--ft16);
}

.section-card-title span{
    display: block;
    font-weight: bold;
    font-size: 1.5em;
    padding-top: 1em;
    margin-bottom: 0.5em;
}

.meta-date{
    margin: 4px 0;
    font-size: var(--ft20);
    font-family: KyivTypeSans;
    font-weight: 600;
    display: flex;
    align-items: center;

}

.meta-date .icon{
    display: inline-flex;
    margin-right: 10px;
    max-width: 30px;
}

.meta-date .icon svg{
    width: 1em;
    height: 1em;
}

.calendar-sec .wrap{
}

.calendar-sec .table-responsive{
    padding: 2px;
}

.calendar-sec{
    padding-bottom: 2em;
}

.calendar-table{
    width: 1435px;
}

.calendar-table td, .calendar-table th{
    padding: 0;
    width: 205px;
}

th.calendar-header{
    width: 615px;
}

th.calendar-nav{
    width: 820px;
}

th.calendar-header, th.calendar-nav{
    border-bottom: 1px solid;
    padding: 10px 0;
    font-size: var(--ft20);
    font-weight: 600;
    font-family: KyivTypeSans;
}

.calendar-table a{
    text-decoration: none;
}

.calendar-table a .icon{
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.calendar-table a .icon path{
    fill: var(--black);
}

.calendar-table a:hover{
    color: var(--red);
}

.calendar-table a:hover .icon path{
    fill: var(--red);
}

.calendar-nav {
    text-align: right;
}

.calendar-weekdays th{
    font-size: .75em;
    font-weight: 400;
    padding: 10px 5px;
    font-size: var(--ft16);
    font-family: KyivTypeSans;
}

.calendar-mobule{
    position: relative;
    display: block;
    text-decoration: none;
    width: 100%;
    min-height: 3.5em;
    font-size: var(--ft14);
}

.calendar-mobule.skin{
    background: var(--white);
}

.calendar-mobule:hover{
    box-shadow: 0 1.5px 4px rgba(0,0,0,0.12), 0 1.5px 3px rgba(0,0,0,0.06);
    z-index: 2;
    margin: 1px -1px -1px 1px;
}

.calendar-grid{
    padding: 5px;
}

.calendar-grid .date-title{
    font-weight: 600;
    font-size: var(--ft18);
    font-family: KyivTypeSans;
}

.calendar-grid .date-events{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ft14);
    line-height: 1.25;
}

.calendar-grid .date-event{
    margin-top: 0.5em;
    color: var(--black);
}

.calendar-grid .date-event:before{
    content: '';
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    border: 0.25em solid;
    border-color: inherit;
    display: inline-block;
    vertical-align: middle;
    margin-top: -0.25em;
    margin-right: 0.25em;
}


@media(min-width: 492px){
    .mobule-card-img{
        width: 148px;
        flex: 0 0 148px;
        padding-bottom: 148px;
    }
}

@media(min-width: 600px){
    .mobule-card-content{
        font-size: var(--ft16);
    }
}

@media(min-width:640px){
    .page-title, .page-text-semi, .page-text-body, .section-card-title{
        font-size: var(--ft16);
    }
}

@media(min-width:768px){
    .page-title, .page-text-semi, .page-text-body, .section-card-title{
        font-size: var(--ft18);
    }

    .calendar-mobule{
        min-height: 6em;
    }
}

@media(min-width: 1024px){
    .calendar-mobule{
        font-size: var(--ft15);
    }
}

@media(min-width:1240px){
    .page-title, .page-text-semi, .page-text-body, .section-card-title{
        font-size: var(--ft20);
    }
}

@media(min-width: 1280px){
    .mobule-card-img{
        width: 250;
        flex: 0 0 250px;
        padding-bottom: 250px;
    }

    .calendar-mobule{
        font-size: var(--ft16);
    }
}

/* exhobotion  */

.map-block{
    width: 100%;
    position: relative;
}


.map-block img{
    width: 100%;
}

.map-block .icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 5px;
    background: rgba(var(--black-rgb), .6);
}

.map-block .icon path{
    fill: var(--white);
}

/* open-air */

.main-banner-title-page{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    padding: 1em;
    color: var(--white);
}

.main-banner-title-page.text-bg{
    width: 100%;
    max-width: unset;
    background: rgba(var(--black-rgb), .5);
    text-align: left;
    padding: 2em;
}

.main-banner-title-page.text-bg .main-banner-title{
    margin-bottom: 0;
}

.text-large .module-content{
    background: rgba(var(--red-rgb), 0.85);
}

.text-large .icons-info-title{
    font-size: 2em;
    margin-bottom: .25em;
}

.text-l .icons-info-title{
    font-size: 0.85em;
    line-height: 1.2;
    text-align: center;
}

/* colection  */

.text-little .module-content{
    text-align: left;
    background: rgba(var(--red-rgb), 0.85);
    font-size: var(--ft16);
}

.color-w .module-content{
    background: rgba(var(--red-rgb), 0.85);
}

.text-little .icons-info-title{
    font-size: 1.1em;
    margin-bottom: .25em;
    text-decoration: underline;
    text-align: center;
}

.main-banner-page .main-banner-img{
    padding: 0;
}

.main-banner-page .main-banner-img img{
    position: static;
    transform: none;
}

.main-banner-page .main-banner-img-prop{
    padding-top: 50%;
}

.main-banner-page .main-banner-img-prop img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
}

.main-banner-page .main-banner-title-page{
    position: static;
    color: var(--black);
}   

/* about us */

.page-text-body{

}

.page-text-body p{
        margin-top: 0.5em;
    margin-bottom: 1em;
    line-height: 1.5;
}

.page-text-body p:last-child{
    margin-bottom: 0;
}

/* plan-visit  */

.article-links{
    margin: 1em 0;
    padding: 0;
    list-style: disc;
}

.article-links li{
    margin-left: 1.5em;
    margin-bottom: 0.5em;
}

.article-links li a{
    text-decoration: underline;
}

/* email font */

.email-form{
    padding: 30px 0;
}

.email-form-block{
    width: 100%;
    display: flex;
}

.inputs-block{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.email-form-block input[type="submit"]{
    background-color: transparent;
    color: var(--black, #000);
    border: 2px solid var(--red, #b30021);
    transition: .25s all;
    padding: 1em 1.5em;
    font-size: .75em;
    line-height: 1;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
}

.email-form-block input[type="submit"]:hover{
    text-decoration: none;
    color: inherit;
    transform: scale(1.01);
}

.email-form-block input[type="text"]{
    background-color: transparent;
    color: var(--black, #000);
    border: 2px solid var(--red, #b30021);
    transition: .25s all;
    padding: 0.9em 1.5em;
    font-size: .75em;
    line-height: 1;
    text-decoration: none;
    font-weight: 600;
    border-right: 0;
    flex-grow: 1;
}

.email-form-block.solo-input input[type="text"]{
    border: 2px solid var(--red, #b30021);
}

.email-form-block input[type="text"]:hover, .email-form-block input[type="text"]:focus{
    outline: none;
    box-shadow: none;
}

.email-form-title{
    margin-bottom: 0.5em;
    text-align: center;
    font-size: 1.5em;
    line-height: 1.5;
    font-weight: 700;
}

/* exposition */

.project-content{
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.project-container{
    width: 55%;
}

.project-img-holder{
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: 100%;
}

.project-img-holder img{
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transition: 0.3s cubic-bezier(0.43, 0.07, 0.61, 0.95);
    -moz-transition: 0.3s cubic-bezier(0.43, 0.07, 0.61, 0.95);
    -ms-transition: 0.3s cubic-bezier(0.43, 0.07, 0.61, 0.95);
    -o-transition: 0.3s cubic-bezier(0.43, 0.07, 0.61, 0.95);
    transition: 0.3s cubic-bezier(0.43, 0.07, 0.61, 0.95);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.project-img-holder:hover img{
        -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}

.project-description-cont{
    z-index: 1;
    background-color: transparent;
    padding: 20px;
    width: 45%;
    position: static;
    right: 0;
}

.project-title{
    font-size: var(--ft36);
    color: var(--black);
    margin-bottom: 23px;
    text-align: center;
    font-weight: 700;
}

.project-text{
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 32px;
    text-align: justify;
}

@media(max-width: 1000px){
    .project-content{
        flex-wrap: wrap;
    }

    .project-container{
        width: 100%;
    }

    .project-description-cont{
        position: relative;
        top: 0;
        transform: none;
        width: 100%;
    }
}

/* articels-title */

.articles-title-cont{
    display: flex;
    align-items: center;
    margin: 0 -10px;
}

.articles-title{
    padding: 0 10px;
    flex: 0 0 75%;
    max-width: 75%;
    text-align: center;
}

.articles-title-cont.no-autor .articles-title{
    flex: 0 0 100%;
    max-width: 100%;
}

.avtor-title-block{
    padding: 20px 10px 0;
    flex: 0 0 25%;
    max-width: 25%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.avtor-title-img{
    width: 100%;
    max-width: 192px;
    height: 100%;
    max-height: 192px;
    overflow: hidden;
    border-radius: 50%;
}

.avtor-title-name a{
    font-size: var(--ft28);
    text-align: center;
    text-decoration: none;
}

.avtor-title-name a:hover{
    color: var(--red);
}

@media(max-width:1000px){
    .articles-title-cont{
        flex-wrap: wrap;
    }

    .articles-title, .avtor-title-block{
        flex: 0 0 100%;
        max-width: 100%;
    }

}

/* autor-title */

.author-title-cont{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.author-title-img-block, .author-title-info{
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 10px;
}

.author-title-position{
    line-height: 1.3;
}

.author-title-img{
    width: 100%;
    height: 100%;
    max-width: 190px;
    max-height: 190px;
    overflow: hidden;
    border-radius: 50%;
}

.author-title-info{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.author-title-contact{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.author-title-contact-item{
    display: flex;
    align-items: center;
    gap: 5px;
}

.author-title-contact-item:hover{
    color: var(--red);
    text-decoration: none;
}

.author-title-contact-item .icon{
    display: flex;
    align-items: center;
}

.author-title-contact-item .icon svg{
    width: 15px;
}


@media(max-width: 1000px){
    .author-title-cont{
        gap: 20px;
        flex-direction: column;
        align-items: center;
    }

    .author-title-name{
        text-align: center;
    }

    .author-title-img-block, .author-title-info{
        flex: 0 0 auto;
        max-width: 100%;
    }
}

/* document-list */

.documents-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.documents-list-item{
    display: flex;
    gap: 5px;
    align-items: center;
}

.documents-list-item-date{
    font-size: var(--ft14);
    white-space: nowrap;
}

.documents-list-item-img{
    display: flex;
    align-items: center;
}

.documents-list-item-name{
    font-size: var(--ft16);
    display: flex;
    gap: 5px;
}

.documents-list-item-name .icon{
    display: flex;
    align-items: center;
}

.documents-list-item-name .icon svg{
    width: 15px;
}

.documents-list-item-name:hover{
    color: var(--red);
    text-decoration: none;
}

.documents-list-item-name:hover path{
    fill: var(--red);
}

/* administration */

.blog-title-cont{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    text-align: center;
}

.blog-desc{
    border: 1px solid var(--red);
    padding: 10px;
    font-size: var(--ft16);
}

.team-block{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.team-col{
    display: flex;
    align-items: center;
}

.admin-cont{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.admin-cont + .admin-cont{
    margin-top: 40px;
}

.admin-cont > div{
    padding: 0 10px;
}

.team-col{
    flex: 0 0 calc(100%/3);
    max-width: calc(100%/3);
    margin-bottom: 30px;
    gap: 20px;
}

.admin-cont .blog-title-cont{
    /*flex: 0 0 calc(200%/5);
    max-width: calc(200%/5);*/
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
}


.team-img{
    margin: 0;
    width: 192px;
    height: 192px;
    flex: 0 0 192px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--red);
}


.team-col .author-title-contact{
    margin-bottom: 10px;
}

.admin-cont-semi{
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.admin-cont-semi .team-col{
    flex: 0 0 calc(100%/3);
    max-width: calc(100%/3);
}

@media(max-width: 1220px){
    .admin-cont .blog-title-cont, .admin-cont-semi{
        flex: 0 0 100%;
        max-width: 100%;
    }

    .team-col{
        flex: 0 0 calc(100%/2);
        max-width:  calc(100%/2);
    }

    .admin-cont-semi .team-col{
        flex: 0 0 calc(100%/2);
        max-width: calc(100%/2);
    }
}

@media(max-width: 886px){
    .admin-cont .blog-title-cont, .admin-cont-semi{
        flex: 0 0 100%;
        max-width: 100%;
    }

    .team-col, .admin-cont-semi .team-col{
        
    }

    .admin-cont{
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .admin-cont-semi{
        justify-content: center;
    }

    .team-col{
        flex: 0 0 auto;
        max-width:  460px;
        justify-content: center;
    }

    .admin-cont-semi .team-col{
        flex: 0 0 auto;
        max-width: 460px;
    }

    .team-img{
        margin: 0;
        flex: 0 0 192px;
    }
}

@media(max-width: 576px){
    .team-col{
        max-width:  360px;
    }

    .admin-cont-semi .team-col{
        max-width: 360px;
    }
}

/* contacts */

.contact-list{
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0 auto;
    max-width: 400px;
}

.contact-list-item{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-list-title{
    font-weight: 700;
}

.contact-list-text a:hover{
    text-decoration: none;
    color: var(--red);
}

.contact-phone-block{
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-phone-block .icon{
    display: flex;
    align-items: center;
}

.contact-phone-block svg{
    width: 20px;
}

.contact-phone-block path{
    fill: #868686;
}

.contact-phone-block .icon:hover path{
    fill: var(--red);
}

.contact-soc-list{
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
}

.contact-soc-item{
    display: flex;
    align-items: center;
}

.contact-soc-item a{
    display: flex;
    align-items: center;
}

.contact-soc-item svg{
    width: 30px;
}

.contact-soc-item  path{
    fill: #868686;
}

.contact-soc-item a:hover path{
    fill: var(--red);
}

.sec-map iframe{
    width: 100%!important;
}

.link-top-cont{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0.75em 0;
}

.link-top-item{
    background-color: transparent;
    color: var(--black, #000);
    border: 1px solid var(--black, #000);
    transition: .25s all;
    padding: 6px 11px;
    font-size: var(--ft20);
    line-height: 1;
    text-decoration: none;
    font-weight: 400;
    display: inline-flex;
    border-radius: 8px;
    gap: 5px;
    text-transform: uppercase;
    font-family: KyivTypeSans;
}

.link-top-item:hover, .link-top-item.active{
    background: var(--grey);
    color: var(--white);
    border-color: var(--grey);
    text-decoration: none;
}

.link-top-item .badge{
    background: var(--black);
    color: var(--white);
}

.link-top-item:hover .badge{
    background: var(--white);
    color: var(--grey);
}

/* slider */

.slider-item img{
    width: 100%;
}

.slider-cont .slick-arrow{
    z-index: 2;
    width: auto;
    height: auto;
}

.slider-cont .slick-arrow svg{
    width: 40px;
    height: 40px;
}

.slider-cont .slick-arrow path{
    stroke: var(--black);
}

.slider-cont .slick-arrow:before{
    content: none;
}

.slider-cont .slick-prev{
    left: 25px;
}

.slider-cont .slick-next{
    right: 25px;
}

/* donate-block */

.donate-block{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.donate-title{
    font-size: var(--ft32);
    line-height: 46px;
    font-weight: 700;
}

.donate-icon svg{
    width: 70px;
}

.donate-semi-title{
    line-height: 30px;
    font-size: var(--ft20);
    font-weight: 700;
}

.donate-numbers{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    font-size: var(--ft16);
}

.donate-thx{
    text-align: center;
    font-size: var(--ft32);
    line-height: 46px;
    font-weight: 700;
}

.section-video iframe{
    width: 100%!important;
}

.comments-block{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.comments-list{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.comment-cont{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comment-item{
    padding: 20px;
    border-bottom: 1px solid var(--grey);
}

.comment-item + .comment-item{
    margin-left: 50px;
}

.comment-date{
    font-size: var(--ft12);
    color: var(--beige);
    margin-bottom: 10px;
}

.comment-autor{
    font-weight: 700;
}

.comment-form .form-control{
    border-color: var(--grey);
    box-shadow: none;
    outline: none;
}

.comment-form textarea.form-control{
    min-height: 150px;
}

svg a {
    opacity: 0;
}

svg a:hover {
    opacity: 0.2;
}

.map-interactive svg{
    max-width: 100%!important;
}

.excursion-item .module-content{
    color: var(--black-2);
    margin: -60px 0 0 50px;
    z-index: 2;
}

.excursion-item .module-layout{
    background: var(--olive-l);
}

.section-grey .excursion-item .module-layout{
    background: var(--olive-d);
}

.excursion-item.text-little .icons-info-title{
    min-height: 3.4em;
}

.chevron-list{
    padding: 0;
    margin: 0;
    list-style: none;
    padding-left: 10px;
}

.chevron-list li{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 500;
}

.chevron-list li + li{
    margin-top: 5px;
}

.chevron-list li .icon{
    display: flex;
    align-items: center;
    flex: 0 0 10px;
    padding-top: 6px;
}

.chevron-list li .icon path{
    fill: var(--red);
}

.modal-content{
    background: var(--olive-d);
}

.modal-content > div{
    border-color: var(--red);
}

.modal-content .section-btn{
    margin-top: 0;
}

/* about-us-main */

.about-us-grid{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    gap: 20px 0;
}

.about-us-grid-img{
    padding: 0 15px;
    flex: 0 0 40%;
    max-width: 40%;
}

.about-us-grid-text-cont{
    padding: 0 15px;
    flex: 0 0 60%;
    max-width: 60%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
}

.about-us-grid-text{
    font-size: var(--ft20);
    line-height: 24px;
    text-align: justify;
}

.about-us-grid-text-cont .section-btns{
    margin: 0;
}

/* visitors */

.title-page{
    margin: 0;
    font-weight: 400;
    font-size: var(--ft36);
    /*font-weight: 700;*/
    font-family: KyivTypeSansNew;
    text-transform: uppercase;
}

.title-page span{
    display: inline-block;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: var(--ft36);
    /*font-weight: 700;*/
    font-family: KyivTypeSansNew;
    text-transform: uppercase;
    border-bottom: 3px solid var(--orange);
}

.visitors-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 60px 0;
    margin: 0 -30px;
}

.visitors-grid-item{
    padding: 0 30px;
    flex: 0 0 25%;
    max-width: 25%;
    display: flex;
    flex-direction: column;
}

.visitors-item{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    padding: 15px;
    gap: 30px;
    text-decoration: none;
    color: var(--white);
    background: var(--grey-opac);
}

.visitors-item:hover{
    text-decoration: none;
}

.visitors-item-icon{
    max-width: 70px;
    max-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visitors-item-icon img{
    max-height: 100%;
}

.visitors-item-name{
    color: var(--white);
    font-size: var(--ft38);
    line-height: 42px;
    font-family: KyivTypeSansNew;
    /*font-weight: 600;*/
}

.visitors-rule{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.visitors-rule-title{
    font-size: var(--ft24);
    font-weight: 700;
    line-height: 1.5;
}

.visitors-rule-list{
    font-size: var(--ft18);
}

.visitors-rule-list li + li{
    margin-top: 15px;
}

.visitors-rule-ps{
    font-size: var(--ft22);
    font-weight: 600;
    line-height: 1.5;
}

.visitors-rule-ps p{
    margin-bottom: 0;
}

/* tickets */

.ticket-grid{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -40px;
}

.ticket-grid-item{
    padding: 0 40px;
    flex:  0 0 50%;
    max-width: 50%;
}

.ticket-price-cont{
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.ticket-free-cont{
    padding: 30px;
    border-radius: 10px;
    background: var(--header-bg);
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.ticket-price-group{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.ticket-price-group-title{
    font-family: KyivTypeSansNew;
    font-size: var(--ft32);
    line-height: 1.5;
    /*font-weight: 600;*/
    text-transform: uppercase;
}

.ticket-price-list{
    display: flex;
    flex-direction: column;
}

.ticket-price-item{
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.ticket-price-item + .ticket-price-item{
    border-top: 2px solid #737373;
}

.ticket-price-type{
    display: flex;
    align-items: center;
    gap: 40px;
}

.ticket-price-type .icon{
    display: flex;
    align-items: center;
    max-width: 30px;
}

.ticket-price-name{
    font-size: var(--ft24);
    font-weight: 400;
    line-height: 1.5;
}

.ticket-price-value{
    white-space: nowrap;
    /*font-weight: 700;*/
    font-family: KyivTypeSansNew;
    font-size: var(--ft30);
    line-height: 1.5;
}

.ticket-free-group{
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-size: var(--ft20);
    line-height: 1.5;
}

.ticket-free-ps{
    font-size: var(--ft20);
    line-height: 1.5;
    font-weight: 600;
}

/* how to find */

.map-text-cont{
    display: flex;
    flex-direction: column;
    gap: 50px;
    font-size: var(--ft20);
    line-height: 1.5;
}

.map-text-cont.mklass{
    margin-bottom: 30px;
}

.map-text-addres{
    font-weight: 600;
    text-decoration: underline;
}

.map-road-cont{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.map-road-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.map-road-item{
    display: flex;
    flex-direction: column;
    list-style: none;
}

.map-road-title-cont{
    display: flex;
    align-items: center;
    list-style: none;
    gap: 20px;
}

.map-road-title-cont .icon{
    display: flex;
    align-items: center;
    max-width: 40px;
}

.map-road-title-cont .icon svg{
    width: 40px;
}

.map-road-title{
    font-size: var(--ft32);
    font-weight: 700;
    line-height: 1.2;
}

.map-road-title span{
    display: inline-block;
    border-bottom: 2px solid var(--black-2);
}

.map-road-item-dropdown{
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: var(--ft20);
    line-height: 1.5;
}

.map-road-item-text-group{
    display: flex;
    flex-direction: column;
}

.map-road-item-text-title{
    font-weight: 600;
    font-family: KyivTypeSans;
}

.map-road-item[open] .map-road-title span{
    border-color: var(--orange);
}

.map-road-item-ps{
    color: var(--orange);
}

/* work-time */

.worktime-grid{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -30px;
    gap: 60px 0;
}

.worktime-grid-item{
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
}

.worktime-item{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    border-radius: 10px;
    gap: 30px;
    background: var(--grey-opac);
    color: var(--white);
    line-height: 1.2;
}

.worktime-period{
    font-size: var(--ft40);
    font-weight: 600;
    line-height: 1.2;
    color: #FFD078;
    font-family: KyivTypeSans;
}

.worktime-clock-group{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.worktime-clock-group-title-text{
    font-size: var(--ft22);
    font-weight: 600;
}

.worktime-clock-group-clock{
    font-size: var(--ft30);
    font-weight: 700;
}

.worktime-clock-group-semi{
    opacity: .6;
}

.worktime-clock-ps{
    color: #FFD078;
    font-size: var(--ft20);
    font-weight: 600;
}

/* shop */

.shop-card-item{
    padding: 20px;
    background: var(--header-bg);
    border-radius: 5px;
}

.shop-card-img{
    margin: 0 50px 10px;
    padding-top: 100%;
    position: relative;
}

.shop-card-img img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-card-info{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shop-card-type{
    font-size: var(--ft14);
}

.shop-card-name{
    overflow: hidden;
    height: calc(24px * 3);
    display: flex;
}

.shop-card-name a{
    font-size: var(--ft24);
    line-height: 24px;
    font-family: KyivTypeSans;
    font-weight: 600;
}  

.shop-card-name a:hover{
    color: var(--red);
    text-decoration: none;
}

.shop-card-price{
    font-size: var(--ft16);
    font-weight: 600;
}

/* eat */

.foto-card{
    position: relative;
    padding-top: 100%;
}

.foto-card img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

@media(max-width: 1230px){
    .action-card-date{
        font-size: var(--ft26);
    }

    .visitors-item-name{
        font-size: var(--ft30);
    }

    .ticket-grid-item{
        padding: 0 20px;
    }

    .ticket-grid{
        margin: 0 -20px;
    }
}

@media(max-width: 991px){
    .main-banner-title{
        font-size: var(--ft36);
    }

    .main-banner-btn{
        font-size: var(--ft12);
    }

    .section-row-4 .section-row-item{
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
        margin: 4px;
    }

    .visitors-grid-item{
        flex:  0 0 50%;
        max-width: 50%;
        padding: 0 20px;
    }

    .visitors-grid{
        margin: 0 -20px;
        gap: 40px 0;
    }

    .worktime-period{
        font-size: var(--ft30);
    }

    .ticket-grid{
        flex-wrap: wrap;
    }

    .ticket-grid-item{
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media(max-width: 767px){
    .about-us-grid-img, .about-us-grid-text-cont{
        flex: 0 0 100%;
        max-width: 100%;
    }

    .worktime-grid-item{
        flex: 0 0 100%;
        max-width: 100%;
    }

    .footer-grid{
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .footer-grid-logo{
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .footer-grid-item{
        order: 2;
    }

    .mobule-card-head{
        font-size: var(--ft24);
    }

    .main-banner-block .wrap{
        bottom: 10px;
    }

    .main-banner-title {
        font-size: var(--ft28);
    }

    .ticket-price-type{
        gap: 20px;
    }

    .ticket-price-item{
        gap: 20px;
    }
}

@media(max-width: 576px){
    .section-row-4 .section-row-item{
        flex: 0 0 calc(100% - 8px);
        max-width: calc(100% - 8px);
        margin: 4px;
    }

    .action-card-date{
        font-size: var(--ft32);
    }

    .visitors-item-name{
        font-size: var(--ft24);
    }

    .visitors-item-icon{
        max-width: 50px;
        max-height: 70px;
    }

    .footer-grid-item{
        flex: 0 0 100%;
    }

    .mobule-card-grid{
        flex-wrap: wrap;
    }

    .mobule-card-img{
        flex: 0 0 100%;
        max-width: 100%;
        padding-bottom: 100%;
    }

    .main-banner-title {
        font-size: var(--ft24);
    }

    .ticket-price-item{
        flex-direction: column;

    }

    .ticket-price-type{
        width: 100%;
    }
}

/* pagination */

.pagination-section{
    padding: 20px 0;
}

.pagination-cont{
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination{
    display: flex;
    align-items: center;
    gap: 15px;
}

.pagination-item{
    flex: 0 0 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    border: 1px solid var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ft16);
    text-decoration: none;
    transition: 0.3s all;
    width: 40px;
}

.pagination-item:hover, .pagination-item.active{
    background: var(--red);
    color: var(--white);
    text-decoration: none;
}

.slider-item-img{
    position: relative;
    padding-top: 50%;
    height: auto;
}

.slider-item-img img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inclusive-btn{
    position: fixed;
    right: 0;
    bottom: 100px;
    z-index: 10;
    width: 60px;
    height: 60px;
    background: var(--olive-l);
    border: 1px solid var(--black);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inclusive-modal{
    margin: 30px 30px 30px auto;
    max-width: 600px;
}

.inclusive-modal .modal-content{
    background: transparent;
    border: 0;
    border-radius: 0;
}

.inclusive-types-cont{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.inclusive-block{
    display: flex;
    flex-direction: column;
    background: var(--olive-l);
    border-radius: 10px;
    overflow: hidden;
}

.inclusive-title{
    padding: 20px;
    font-size: var(--ft18);
    font-weight: 700;
    border-bottom: 1px solid var(--black);
} 

.inclusive-body{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.inclusive-text{
    font-size: var(--ft14);
}

.inclusive-standart{
    font-size: var(--ft14);
    color: var(--red);
}

.inclusive-standart:hover{
    color: var(--red);
}

.inclusive-btn-group{
    display: flex;
    align-items: center;
    gap: 12px;
}

.inclusive-btn-style{
    flex: 0 0 calc(100%/3 - 8px);
    max-width: calc(100%/3 - 8px);
    text-align: center;
    background-color: transparent;
    color: var(--black, #000);
    border: 1px solid var(--black, #000);
    transition: .25s all;
    padding: 6px 11px;
    font-size: var(--ft18);
    line-height: 1;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    border-radius: 8px;
    justify-content: center;
}

.inclusive-btn-style:hover{
    text-decoration: none;
    color: inherit;
    transform: scale(1.01);
}

.inclusive-btn-style.active{
    background: var(--red);
    color: var(--white);
}

.inclusive-modal .close{
    position: absolute;
    right: 20px;
    top: 20px;
    width: 20px;
    height: 20px;
    font-size: var(--ft20);
    line-height: 20px;
}

.inclusive-modal .modal-body{
    padding: 0;
}

body.img-bw img, body.img-bw image{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
}

body.img-hidden img, body.img-hidden image{
    visibility: hidden;
}

@media(max-width: 660px){
    .inclusive-modal{
        width: calc(100% - 60px);
        max-width: calc(100% - 60px);
    }

    .inclusive-btn-group{
        flex-wrap: wrap;
    }

    .inclusive-btn-style{
        flex: 0 0 100%;
        max-width: 100%;
    }
}