@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;500&display=swap');

/* reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address,
img, center, ol, ul, li, dl, dt, dd, form, fieldset, label, legend, input, select, button, textarea, table, tbody, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, nav, section, time, mark, audio, video {
	border: 0; font-size: 100%; font: inherit; vertical-align: baseline; padding: 0; margin: 0; }
header, footer, nav, section, article, time { display: block; }
ol, ul { list-style: none; }
table { border-spacing: 0; }
input, button { background: none; }
button::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=button]::-moz-focus-inner { padding:0; border:0; }

/* basic */

html, body { width: 100%; height: auto; min-height: 100vh; }
body { background: #efefef; color: #1e1e1e; font: 300 1em/1 'Noto Sans', sans-serif; display: flex; flex-direction: column; }
a { color: #e5097f; text-decoration: none; outline: none; transition: color 0.2s linear; }
a:hover { color: #e5097f; text-decoration: underline; }
b { font-size: 500; }
input:focus { outline: none; }
input::-webkit-input-placeholder { color: #999; opacity: 1; }
input::-moz-placeholder { color: #999; opacity: 1; }
input::-ms-placeholder { color: #999; opacity: 1; }
.nojs { background: #e94f3d; color: #fff; display: block; padding: 1em; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.red { color: #ed1c24; }
img, svg { display: block; }
img { width: auto; height: auto; max-width: 100%; max-height: 100%; }


/* layout */

.wrapper {
    background: url(../images/background_mask.svg) center / cover no-repeat, -webkit-linear-gradient(left, #b0cb1f, #e5097f);
    background: url(../images/background_mask.svg) center / cover no-repeat, -moz-linear-gradient(left, #b0cb1f, #e5097f);
    background: url(../images/background_mask.svg) center / cover no-repeat, -ms-linear-gradient(left, #b0cb1f, #e5097f);
    background: url(../images/background_mask.svg) center / cover no-repeat, -o-linear-gradient(left, #b0cb1f, #e5097f);
    background: url(../images/background_mask.svg) center / cover no-repeat, linear-gradient(left, #b0cb1f, #e5097f);
    background-attachment: fixed;
    width: 100%;
    min-height: 100vh;
    max-width: 120rem;
    margin: auto;
}

.container {    
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
}

footer[role=contentinfo] {
    background: #fff;
    border-top: 0.0625rem solid #efefef;
    order: 3;
    z-index: 1;
}

header .inner, footer .inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 5%;
    box-sizing: border-box;
}

.content {
    position: relative;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    transition: filter 0.25s linear;
}

section[role=main], article[role=main] {
    background: #fff;
    padding-bottom: 5rem;
}

/* intro */


.intro {
    /* background: -webkit-linear-gradient(left, #b0cb1f, #e5097f);
    background: -moz-linear-gradient(left, #b0cb1f, #e5097f);
    background: -ms-linear-gradient(left, #b0cb1f, #e5097f);
    background: -o-linear-gradient(left, #b0cb1f, #e5097f);
    background: linear-gradient(left, #b0cb1f, #e5097f); */
    order: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

.intro .inner {
    width: 15rem;
    height: 6rem;
}

.intro .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    display: none;
}

.logo {
    display: block;
    position: relative;
    z-index: 1;
    margin: auto;
}

.logo img {
    width: 15rem;
    height: 6rem;
}

.go_down {
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 3rem;
    left: 0;
    right: 0;
    z-index: 1;
    width: 3rem;
    height: 3rem;
    margin: auto;
    cursor: pointer;
}

.go_down svg {
    fill: #e5097f;
    width: 1.125rem;
    height: 1.625rem;
}

/* header */

.mobile_header {
    background: #fff;
    border-bottom: solid 0.0625rem #efefef;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    transition: background 0.2s linear, border-color 0.2s linear;
}

.home .mobile_header:not(.active) {
    background: none;
    border-color: transparent;
}

.mobile_header .inner {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 3rem;
    margin: 0 5%;
}

.mini_logo {
    width: 6.75rem;
    height: 2rem;
    margin: auto;
    cursor: pointer;
}

.mobile_header .mini_slogan {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6.75rem;
    height: 2rem;
    margin: auto;
}

.home .mini_logo, .home .mini_slogan {
    opacity: 0;
    transform: translateY(-3rem);
    transition: opacity 0.2s linear, transform 0.2s ease-out;
}

.home .mobile_header.active .mini_logo, .home .mobile_header.active .mini_slogan,
.home.menu_active .mini_logo, .home.menu_active .mini_slogan {
    transform: translateY(0);
    opacity: 1;
}

.home.menu_active .mobile_header {
    background: #fff;
    border-bottom-color: #efefef;
}


/* menu */

.overlay {
    background: rgba(0,0,0,0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: none;
}

.menu_switch {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1.25rem;
    height: 2.5rem;
    margin: auto;
    cursor: pointer;
}

.menu_switch li {
    background: #999;
    position: absolute;
    width: 1.25rem;
    height: 0.125rem;
    margin: auto;
    transition: transform 0.3s linear, opacity 0.3s linear, top 0.3s linear, bottom 0.3s linear, background 0.3s linear;
    transform-origin: center;
}

.menu_switch li:nth-child(1) { top: 0.8125rem; }
.menu_switch li:nth-child(2) { top: 0; bottom: 0; } 
.menu_switch li:nth-child(3) { bottom: 0.8125rem; }

.menu_active .menu_switch li:nth-child(1) { transform: rotate(45deg); top: 1.1875rem; }
.menu_active .menu_switch li:nth-child(2) { opacity: 0; }
.menu_active .menu_switch li:nth-child(3) { transform: rotate(-45deg); bottom: 1.1875rem; }


.filtered .menu_switch li:nth-child(1) { transform: rotate(-22.5deg); top: 0.9375rem; }
.filtered .menu_switch li:nth-child(2) { opacity: 0; }
.filtered .menu_switch li:nth-child(3) { transform: rotate(22.5deg); bottom: 0.9375rem; }

.filtered section[role=main] {
    padding-bottom: 0;
    margin-bottom: -0.0625rem;
}

nav {
    background: #fff;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
    overflow-y: auto;
    position: fixed;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: -20.5rem;
    width: 20rem;
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transition: left 0.3s ease-out;
}

.menu_active nav { left: 0; }
.menu { padding: 3rem; }
.menu li:not(:last-child) { margin-bottom: 1rem; }
.menu a { line-height: 1.25; }
.menu .current a { font-weight: 500; }

.menu_title {
    font-weight: 500;
    margin-bottom: 1rem;
}

/* contacts */

.contacts {
    position: absolute;
    left: 10%;
}

.contacts_switch {
    background: url(../images/sprite.svg#phone) center / 1.25rem 1.25rem no-repeat;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
}

.contacts_box {
    background: #fff;
    border: 0.0625rem solid #efefef;
    border-radius: 0.25rem;
    display: block;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 1rem;
    padding: 2rem;
    opacity: 0;
    transition: visibility 0.2s linear, opacity 0.2s linear, top 0.2s linear;
}

.contacts_box > * { white-space: nowrap; }

.contacts.active .contacts_box {
    visibility: visible;
    top: 3rem;
    opacity: 1;
    transition: opacity 0.2s linear, top 0.2s linear;
}

/* events */

.event .inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 5%;
}

.event:not(:last-child) {
    border-bottom: 0.0625rem solid #efefef;
    padding-bottom: 2.5rem;
}

.event.hide { display: none; }

.event .img {
    background: #efefef;
    position: relative;
    width: 111%;
    padding-top: 111%;
    margin: 0 -5.5% 1.5rem;
    order: -1;
}

.event .img img {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.event.no_photo .img span { background: #efefef; }

.event.no_photo img {
    opacity: 0.3;
    padding: 10%;
    box-sizing: border-box;
}

.event .title { margin-bottom: 0.5rem; }

.event .title, .event .title a {
    font-size: 1.25rem;
    font-weight: 500;
    color: #1e1e1e;
    text-decoration: none;
}

.event .title a:hover { color: #e5097f; }
.event .slogan, .event .descr { line-height: 1.25; }
.event .slogan span, .event .descr span { font-weight: 300 !important; }
.event .slogan { margin-bottom: 0.75rem; }

.event .descr span, .event .descr li, .event .descr p  {
    color: #737373;
    font-size: 0.875rem !important;
    font-weight: 300 !important;
    line-height: 1.5;
    text-align: justify;
    text-align-last: left;
}

.event .descr ul, .event .descr ol { margin-left: 2rem; }
.event .descr ul { list-style: disc outside; }
.event .descr ol { list-style: decimal outside; }
.event .descr li:not(:last-child) { margin-bottom: 0.5rem; }

.event .tags { margin-top: 0.75rem; }

.event .tags ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.event .tags li { margin-bottom: 0.25rem; }
.event .tags li:not(:last-child) { margin-right: 0.5rem; }
.event .tags a { font-size: 0.875rem; }
.event .tags a::before { content: '#'; }

.read_more {
    font-size: 0.875rem;
    white-space: nowrap;
}

.read_more::before { content: '[ '; }
.read_more::after { content: ' ]'; }

.event .gallery {
    order: -1;
    margin: 0 -5.5% 0.5rem;
}

.event .swiper-slide {
    background: #efefef;
    position: relative;
    width: 100%;
    padding-top: 100%;
}

.event .swiper-slide img {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.swiper-navi {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
}

.swiper-navi li {
    background: #ddd;
    border: 0.5rem solid #fff;
    border-radius: 50%;
    text-indent: -999rem;
    overflow: hidden;
    width: 0.5rem;
    height: 0.5rem;
}

.swiper-navi li:not(.current) { cursor: pointer; }
.swiper-navi .current { background: #b0cb1f; }

/* article */

article[role=main] { padding-top: 3rem; }
article.event.no_photo .inner { padding-top: 2rem; }
article.event .descr > *:not(:last-child) { margin-bottom: 1rem; }
article.event .descr span, article.event .descr li, article.event .descr p { color: #1e1e1e; }
article.event .tags { margin-top: 1.5rem; }

.preloader {
    background: rgba(255,255,255,0.8) url(../images/preloader.svg) center / 4rem 4rem no-repeat;
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.preloaded .content { filter: blur(0.0625rem); }

/* footer */

footer .inner {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.copyrights {
    color: #737373;
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 2rem;
}

.fogma {
    background: url(../images/sprite.svg#fogma) left center / 2.25rem 2.25rem no-repeat;
    color: #737373;
    font-size: 0.875rem;
    text-decoration: none;
    height: 2.25rem;
    padding: 0.25rem 0 0 2.75rem;
    margin: auto;
    transition: opacity 0.2s linear;
}

.fogma, .fogma b { display: block; }
.fogma:hover { opacity: 1; }


@media screen and (max-width: 25em) { /* 400 */
    
    .mobile_header .mini_slogan { display: none; }
    
}

@media screen and (min-width: 40em) { /* 640 */
    
    .contacts { left: 4rem; }
    
    .event .inner { padding-top: 3rem; }
    
    .event .img, .event .swiper-slide { background: none; }

    .event .img, .gallery .swiper-slide { 
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        padding: 0;
    }
    
    .event .img img, .gallery .swiper-slide img {
        position: static;
        max-width: 40rem;
        max-height: 40rem;
    }
    
}
    
@media screen and (min-width: 64em) { /* 1024 */
    
    .mobile_flag { display: none; }
    
    section[role=main], article[role=main], footer[role=contentinfo] { background: rgba(255,255,255,0.95); }
    
    section[role=main], article[role=main] {
        max-width: 64rem;
        margin: auto;
    }
    
    header .inner, footer .inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        max-width: 120rem;
        margin: auto;
    }
    
    nav {
        left: -25.5rem;
        width: 25rem;
    }

    .menu { padding: 3rem 5rem; }
    
    .copyrights { margin: 0; }
    
    .fogma {
        text-indent: -9999rem;
        overflow: hidden;
        width: 2.25rem;
        padding: 0;
        margin: 0;
        opacity: 0.7;
    }
    
}

@media screen and (min-width: 80em) { /* 1280 */
    
    nav {
        left: -30.5rem;
        width: 30rem;
    }
    
    .menu { padding: 3rem 6rem; }
    
    section[role=main], article[role=main] { max-width: 80rem; }
    .event { padding: 0 3rem; }
    .event:not(:last-child) { padding-bottom: 0; }
    article.event { padding: 3rem; }
    
    .filtered section[role=main] {
        padding-bottom: 5rem;
        margin-bottom: 0;
    }
    
    .event .inner {
        position: relative;
        min-height: 26rem;
        padding: 3rem 0 3rem 23rem;
        box-sizing: border-box;
    }
    
    .event .img, .event .gallery {
        position: absolute;
        top: 3rem;
        left: 0;
        width: 20rem;
        height: 20rem;
        margin: 0;
    }
    
    .event .img, .event .swiper-slide { background: #efefef; }
    .event .img img, .gallery .swiper-slide img { max-width: 100%; }
    
    article.event.no_photo .inner {
        min-height: inherit;
        padding: 3rem;
    }

}

@media screen and (min-width: 103.75em) { /* 1660 */
    
    .menu { padding: 3rem 7rem; }
    
}

@media screen and (max-width: 39.9375em), screen and (min-width: 80em) { /* 639 / 1280 */
    
    .event .img img {
        min-width: 100%;
        min-height: 100%;
    }
    
}