body{background:#1b1d29;position: relative;width: 100vw;height: 100vh;}

.map .sticky-content-inner {
    min-height: 620px;
}
.map-title{color:#fff;max-width: 380px;}
.map-pretitle{color:#fff;}
.map-wall{position:absolute; top:0;
    left:0; width:100%; height:100%}


#mapLight {position: absolute;top: 0;bottom: 0;width: 100%;transition: opacity 1s;z-index: 0;height: 100%;}

#mapLight .maplibregl-canvas{position: absolute;height: 100%;left: 0;top: 0;width: 100%;}
#mapLight .maplibregl-canvas-container{position: absolute;height: 100%;left: 0;top: 0;width: 100%;}

.mapboxgl-ctrl-logo{display: none!important;}
.mapboxgl-ctrl-bottom-right{display: none!important;}
.mapboxgl-popup {
    max-width: 200px;
    /* display: none!important; */
}
.marker {
    background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
    background-size: cover;
    width: 60px;
    height: 60px;
    border-radius: 80px;
    cursor: pointer;
    /* z-index: 1; */
    color: #fff;
}

.marker.mapboxgl-marker{
    transition: opacity .6s, width .2s, height .2s;
}
.marker.mapboxgl-marker.region{background-image: url(../images/pin.png)!important;width: 30px;height: 30px;padding: 10px;background-size: cover;opacity: .8;}
.marker.mapboxgl-marker:hover{z-index:99}
.marker.mapboxgl-marker.active{z-index: 99;width: 40px;height: 40px;border-color: #4186e3;}
.marker.mapboxgl-marker.active:hover{ width: 40px;height: 40px;border-color:  #4186e3;}

.marker.mapboxgl-marker.region .marker_name{
    left: 30px;
    width: 0;
    overflow: hidden;
}
.marker.mapboxgl-marker.region:hover .marker_name{
    left: 30px;
    width: 120px;

}


.marker.mapboxgl-marker.active .marker_name{display:none}
.lightmarker.size__1{width: 50px;
    height: 50px;}
.lightmarker.size__2{
    /* width: 60px; */
    /* height: 60px; */
}
.lightmarker.size__3{
    width: 70px;
    height: 70px;
}

.lightmarker.size__4{width: 80px;
    height: 80px;}

.lightmarker.ready{width:400px!important; height:400px!important}
.lightmarker.active{width:100px!important; height:100px!important}


.lightmarker_name{position:absolute;top: 120px;text-align:center;width: 100%;color: #121822;margin: 0 auto;opacity:0;transition: opacity .3s;height: 0;overflow: hidden;background: #fff;border-radius: 20px;}
.lightmarker_name h3{font-size:14px;font-weight:normal;text-align: center;width: 100%;text-shadow: 0 5px 20px white;margin: 8px auto;}
.lightmarker:hover .lightmarker_name{opacity:1;width: 100%;height: auto;}
.lightmarker.active .lightmarker_name{opacity:1;width: 100%;height: auto;}




.mp{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0%;
    padding-top: 0;
    max-width: 720px;
    margin: 0 auto;
    padding: 50px;
    padding-bottom: 20px;
    padding-bottom: 90px;
    bottom: -100%;
    transition: all .6s;
}
.mp.ready{bottom:0;}
.mp-head{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.mp-head-part{
    width: 80px;
}
.mp-ruler{
    /* position: absolute; */
}
.mp-ruler-preview{
    width: 140px;
    float: left;

    overflow: hidden;
    margin-right: 20px;
}
.mp-ruler-preview img{
    display: block;
    width: 100%;
}
.mp-ruler-content{
    padding: 4px;
    /* max-width: 280px; */overflow: hidden;}
.mp-ruler-name{

    margin-bottom: 0;
    font-size: 21px;
    line-height: 26px;
    font-weight: 600;
    margin: 0;
    margin-bottom: 5px;


    color: #ffffff;
    /* word-break: break-word; *//* width: 280px; */padding-right: 60px;}
.mp-ruler-details{
    font-size: 14px;



    color: #fff;
    /* border-bottom: 1px solid #98AAC1; */text-align: center;padding-bottom: 15px;font-style: italic;width: 100%;/* max-width: 90px; *//* margin-bottom: 20px; */}

.mp-current-date{
    position: relative;
}
.mp-current-date-num{
    color: #FFF;
    font-size: 21px;
    position: relative;
    background: none;
    text-align: center;
    border: none;
    outline: none;
    width: 100%;
    /* font-weight: 100; */

    font-weight: 500;
    font-family: 'Montserrat', sans-serif;height: 50px;user-select: none;
    outline: none;pointer-events: none;}
.mp-current-date-navigation{
    position: absolute;
    font-size: 30px;
    top: 10px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #98AAC1;
    border-radius: 80px;
    cursor: pointer;
    vertical-align: middle;
    display: flex;
    align-items: center;
    transition:all .2s;
}
.mp-current-date-navigation:hover{
    opacity:.6
}
.mp-current-date-navigation:active{
    opacity:1;
    box-shadow: 0 0 50px #90D7F7;
}

.mp-current-date-navigation svg{display:block;width: 23px;margin: 0px 0;padding: 2px;/* vertical-align: middle; */user-select: none;outline: none;}
.mp-current-date-navigation-prev{
    left: -30px;
}
.mp-current-date-navigation-next{
    right: -30px;
}
.mp-current-date-navigation-prev svg{

    margin-left: 8px;}
.mp-current-date-navigation-next svg{

}
.mp-current-event{
    overflow: hidden;
}
.mp-current-event-date{
    margin: 0;
    margin-bottom: 10px;
    font-weight: bold;
    padding-top: 4px;
    font-size: 21px;
    /* border-bottom: 1px solid #ffffff17; */
    display: inline-block;
    /* padding-right: 130px; */
    /* margin-bottom: 40px; */
    /* padding-bottom: 20px; */
    color: #ffffff;
}
.article-body h2.mp-current-event-title{
    font-size: 14px;
    line-height: 21px;
    max-width: 400px;
    font-weight: 600;


    color: #fff;
}
.mp-current-event-desc{
    font-size: 14px;

    line-height: 1.6;
}
.mp-current-event-desc p {font-size: 14px;line-height: 21px;font-weight: 300;color: #fff;}

.mp-slider-body{position:relative;width:100%;margin: 13px 0;}
.mp-slider{
    margin-bottom: 0;
    border-radius: 20px;
    position: relative;
    display: flex;
}
.mp-slider-play{margin-right: 5%;width: 30px;height: 30px;}
.mp-slider-play:hover{opacity:.6}
.mp-slider-play svg{width: 100%;height: 100%;}


.mp-slider-play.noplayed .noplayed{display: block;}
.mp-slider-play.noplayed .played{display: none;}

.mp-slider-play.played .noplayed{display: none;}
.mp-slider-play.played .played{display: block;}


.mp-helper-ages{
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 15px;
    border-radius: 20px;
    overflow: hidden;
    display: none;
}
.mp-helper-age{
    background: linear-gradient(45deg, #005691, #5ba7f3);
    height: 20px;
    width: 20%;
    /* border-radius: 30px; */
}

.mp-ages{
    padding: 50px 0 0;
    opacity: .6;
    display: none;}
.mp-age-list{
    display: flex;
    justify-content: space-between;
}
.mp-age-item{
    font-size: 12px;
    opacity: .9;
    font-weight: 300;
    color: #98AAC1;
    font-family: 'Spectral', serif;
}
.noUi-horizontal .noUi-origin{left: 3%;width: 95%;}
.noUi-connects {
    border-radius: 3px;
    padding: 0 20px;
}
.noUi-connect {
    background: #98aac1;
    padding: 20px 80px;
    /* margin: 0 20px; */
}
.noUi-target {
    background: #58648094;
    border-radius: 40px;
    border: none;
    box-shadow: none;
    height: 2px;
}

.noUi-handle {
    border: 1px solid#ffffff3;
    border-radius: 100px;
    background: #98AAC1;
    cursor: default;
    box-shadow: none;
    border: none;
    transition: all .6s
}
.noUi-active {
    box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
    box-shadow: 0 0 50px #90D7F7;
}

.noUi-horizontal .noUi-handle {
    width: 30px;
    height: 30px;
    right: -15px;
    top: -15px;
}

.noUi-handle:before, .noUi-handle:after{top:12px;left: 17px;background: transparent;}

#age{/* position:absolute; */left: 0;/* width: 280px; */top: 0%;/* display: flex; */}
#age .mp-ruler-content{text-align:left;padding: 17px -0;}
#ruler{/* position:absolute; *//* left: -240px; *//* width: 200px; *//* text-align:center; */top: 0px;overflow: hidden;/* border-bottom: 1px solid #2e313e; *//* margin-bottom: 20px; */}
#ruler .mp-ruler-preview{width: 110px;MARGIN: 0 AUTO;/* float: none; */margin-right: 30px;}
#ruler .mp-ruler-preview img{width: 100%;margin:0 auto;border-radius: 200px;border: 2px solid #ffffff;margin-bottom: 10px;}
.map-content{position: fixed;top: 19%;/* bottom: 20%; */right: 0;width: 30%;transition: all 1s;padding: 20px;max-width: 1480px;margin: 0 auto;padding: 40px;/* pointer-events: none; *//* top: -20%; */color: #fff;right: 6%;
    z-index: 9999;
    /* padding-right: 20vw; */
    /* padding-top: 20vw; */
    margin: 0 4vh;
    background: #1e202fc9;
    /* padding: 40px; */
    width: 35vw;


    border-radius: 10px;

    border: 1px solid #ffffff12;

    top: 120px;
    /* bottom: 270px; */overflow: hidden;}
.map-content.invisible{right: -141%;}
.map-content-inner{position: relative;}
.map-content-inner-right{position:relative;}

#event{position:relative;padding-top: 20px;}
#event:before{content:''; position:absolute; top:0; left:0; height:1px; background: #98aac1; width: 110px;}

.mp-age-preview{width: 80px;margin-right: 50px;float: left;margin-top: 0;display: none;}
.mp-age-preview img{display:block; width:100%}
.mp-age-content{
    /* padding-left: 100px; */
    display: flex;
    align-items: center;
    /* height: 80px; */
    text-align: left;
    margin-bottom: 23px;}
.mp-age-name{
    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    font-weight: 400;
    color: #98aac1;
    margin-bottom: 10px;}
.mp-age-details{display: none;}

.menu-opened .side-menu{opacity:0;}
.side-menu{
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 1;
    max-width: 653px;
    margin: 0 auto;
    right: 0;
    padding: 0;
    bottom: 30px;
    overflow: hidden;
}
.side-menu .logo{display:block;width: 320px;padding: 21px 30px;/* display: none; */float: left;}
.side-menu .logo a{display:block;width:100%;height: 100%;}
.side-menu .logo svg{display:block;width:100%;height: 10%;}
.side-btns{
    display: flex;
    justify-content: space-between;
    bottom: 0;
    margin: 0 auto;
    justify-content: space-between;
    overflow: hidden;
}
.side-btn{width: 49%;/* text-align: center; *//* font-family: 'Spectral', serif; *//* border-right: 1px solid #282e40; */}
.side-btn a{
    display: block;
    padding: 5px 40px;
    font-size: 14px;
    user-select: none;
    color: #586480;
    font-weight: 500;}
.side-btn.active a{color: #ffffff;font-weight: bold;}
.side-btn:last-child{border:none;width: 40%;}
.side-btn:first-child a{text-align:right}
.switcher{
    width: 60px;
    border: 1px solid #98aac1;
    height: 28px;
    border-radius: 100px;
    position: relative;
    padding: 0px;
    margin: 2px 0 0;
    /* margin-left: 20px; */
    overflow: hidden;
    /* display: none; */
}

.switcher-btn{
    width: 20px;
    height: 20px;
    background: #98aac1;
    border-radius: 200px;
    position: absolute;
    right: 3px;
    transition: all .6s;
    top: 3px;
    left: auto;
}
.active .switcher-btn{
    left: 3px;
    right: auto;
}



.close-btn{background: #2d3347;width: 40px;height: 40px;border-radius: 80px;text-align:center;line-height: 40px;position: absolute;right: 100px;top: 40px;font-size: 20px;opacity: 0;right:-100px;transition:opacity 1s;cursor: pointer;z-index: 9;}
.close-btn:hover{background:#39415a}
.ready .close-btn{opacity:1;right: 20px;top: 20px;}
.article {position: fixed;top: 0vh;right: 0;/* max-width: 70vh; *//* background: linear-gradient(270deg, #191820eb, #00000000); *//* padding: 120px; */color: #ffffffa6;/* height: 100vh; */z-index: 9;/* backdrop-filter: blur(5px); */right: -100vw;transition: all .6s;/* overflow: auto; *//* padding-left: 6%; */overflow: hidden;width: 30vw;margin: 190px;transition: opacity .6s;opacity: 0;}
.article.ready{right: 0;z-index: 1;/* padding-right: 20vw; *//* padding-top: 20vw; */margin: 0 4vh;background: #1e202feb;/* padding: 40px; */width: 35vw;/* border: 10vh; *//* height: 60vh; */border-radius: 10px;/* backdrop-filter: blur(11px); */border: 1px solid #ffffff12;/* box-shadow: 0 9px 22px #0000000f; */top: 120px;bottom: 180px;margin: auto 4vw;max-height: 500px;right: 10%;max-width: 500px;opacity: 1;}
.article .section-inner {
    padding-top: 60px;
}

.article.ready.events{bottom: 180px;}
.events .close-btn{display:none;}

#smooth-scroll{overflow:hidden;position: absolute;height: 100%;width: 100%;}
.scroll-content{width:100%;/* overflow: hidden; *//* padding: 60px; */}

.article-body {
    /* margin-bottom: 80px; */
    overflow: auto;
    width: 100%;
    /* height: 1200px; */
    /* font-family: 'Spectral', serif; */
    color: #fff;
    padding: 40px;
    overflow: hidden;
    /* position: absolute; */
    padding-bottom: 100px;
}
.article-body h2{color:#fff; font-size:21px;line-height: 28px;}
.article-body p{font-size: 14px;line-height: 1.8;/* font-family: 'Spectral', serif; */text-overflow: ellipsis;overflow-wrap: break-word;}
.article-body p span{color:#fff!important}

.article-body .btn{margin:10px 0}

.article-body img {
    width: 100%;
}

.article-date {
    color: #ababab;
    margin-bottom: 20px;
}

.article-desc {
    color: #231f20;
}
.marker_name{top: 0;position: relative;opacity: 0;transition:all .6s;left: 70px;width: 140px;display: flex;align-items: center;height: 50px;}
.marker:hover .marker_name{opacity: 1;z-index: 9;}
.marker_name h3{font-size: 14px;/* text-align: center; */line-height: 1.6;font-weight: normal;}
.marker.size__1{
    width: 40px;
    height: 40px;
    border: 2px solid #ccc;
}
.marker.size__1:hover{
    width: 40px;
    height: 40px;
    border-color: #4186e3;
}
.marker.size__2{
    width: 60px;
    height: 60px;
}
.marker.size__3{
    width: 60px;
    height: 60px;
}

.marker.size__4{  width: 120px;
    height: 120px;}


.stat{font-size:12px;color:#fff;}

.article-header{height: 0;position: relative;width: 100%;top: 0;left: 0;display: none;padding: 0;opacity: 0;/* transition:all .6s; */}

.article.ready .article-header{opacity:1;height: 30px;padding-top: 10px;}

.article.ready .article-header svg.top{opacity:1}

.article-header:after{content:''; position:absolute; width:80px; height:4px; background:#ffffff42; left:0; right:0; margin:auto; top:0; bottom:0; border-radius:10px; opacity:0 }
.article-header svg.top{width:80px;margin: 0 auto; display:block;height: 12px;opacity: 0;}
.article-header svg.bottom{width:80px;margin: 0 auto; display:block;height: 12px;display: none;}
.article.ready.large svg.top{display:none;}
.article.ready.large svg.bottom{display:block;}
.article-container{}
.article-preview{
    margin: -50px;
    margin-bottom: 40px;
    height: 240px;
    background-size: cover;
    background-position: top center;
}
.article-preview img{display: block}
.article-preview-place{border-radius: 200px; overflow: hidden; border: 2px solid #fff}
.article-head{/* padding-bottom:30px; */}

.article-head{overflow: hidden;border-bottom: 1px solid #2f323f;margin-bottom: 30px;padding-right: 40px;}
.article-head .article-preview{
    margin: 0;
    width: 110px;
    float: left;
    margin-right: 30px;
    height: auto;
    margin-top: 5px;
    margin-bottom: 20px;
}
.article-head .article-preview img{display: block;width: 100%;}
.article-head h2{/* padding-right: 80px; */line-height: 1.4;padding-top: 5px;margin-bottom: 5px;}
.article-head p{margin:0;color: #98AAC1;margin-bottom: 20px;}
@supports (-webkit-text-stroke: 1px white) {
}

@media screen and (max-width: 10260px) {
    .close-btn{width:80px; height:80px;font-size: 40px;line-height: 80px;}
    .ready .close-btn {
        opacity: 1;
        right: 40px;
        top: 40px;
    }
    .article.ready{right: 8%;max-width: 1000px;max-height: 900px;top: 340px;bottom: 340px;}
    .mp-age-name {
        margin: 0;
        font-size: 27px;
        line-height: 1.6;
        font-weight: 400;
        color: #98aac1;
        margin-bottom: 15px;
    }
    .mp-ruler-name {
        margin-bottom: 0;
        font-size: 35px;
        line-height: 26px;
        font-weight: 600;
        margin: 0;
        margin-bottom: 5px;
        color: #ffffff;
        /* word-break: break-word; */
        /* width: 280px; */
        padding-right: 60px;
    }
    .mp-current-event-date {
        margin: 0;
        margin-bottom: 10px;
        font-weight: bold;
        padding-top: 4px;
        font-size: 38px;
        /* border-bottom: 1px solid #ffffff17; */
        display: inline-block;
        /* padding-right: 130px; */
        /* margin-bottom: 40px; */
        /* padding-bottom: 20px; */
        color: #ffffff;
    }
    .article-body h2.mp-current-event-title {
        font-size: 26px;
        line-height: 1.4;
        max-width: 800px;
        font-weight: 600;
        color: #fff;
    }
    .mp-current-event-desc{}
    .mp-current-event-desc p{}
    .mp-head-part {
        width: 100px;
    }
    .mp-current-date-num {
        color: #FFF;
        font-size: 41px;
        position: relative;
        background: none;
        text-align: center;
        border: none;
        outline: none;
        width: 100%;
        /* font-weight: 100; */
        font-weight: 500;
        font-family: 'Montserrat', sans-serif;
        height: 50px;
        user-select: none;
        outline: none;
        pointer-events: none;
    }
    .article-body{padding:60px;}
    .article-head h2{
        font-size: 52px;
        line-height: 1.2;
    }
    .article-head .article-preview{width: 200px;}
    .article-body p{
        font-size: 26px;
        line-height: 1.8;
    }
    .side-menu {
        position: fixed;
        left: 0;
        width: 100%;
        z-index: 1;
        max-width: 1800px;
        margin: 0 auto;
        right: 0;
        padding: 0;
        bottom: 120px;
        overflow: hidden;
    }
    .side-btn a {
        display: block;
        padding: 5px 40px;
        font-size: 50px;
        user-select: none;
        color: #586480;
        font-weight: 500;
    }

    .switcher{
        width: 130px;
        border: 1px solid #98aac1;
        height: 78px;
        border-radius: 100px;
        position: relative;
        padding: 0px;
        margin: 2px 0 0;
        /* margin-left: 20px; */
        overflow: hidden;
        /* display: none; */
    }

    .switcher-btn{
        width: 60px;
        height: 60px;
        background: #98aac1;
        border-radius: 200px;
        position: absolute;
        right: 8px;
        transition: all .6s;
        top: 8px;
        left: auto;
    }
    .active .switcher-btn{
        left: 8px;
        right: auto;
        width: 60px;
        height: 60px;
    }

    .mp{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0%;
        padding-top: 0;
        max-width: 1291px;
        margin: 0 auto;
        padding: 50px;
        padding-bottom: 20px;
        padding-bottom: 300px;
        bottom: -100%;
        transition: all .6s;
    }

    .mp-slider-play{
        width: 80px;
        height: 80px;
    }
    .noUi-horizontal .noUi-handle {
        width: 70px;
        height: 70px;
        right: -15px;
        top: -35px;
    }
    .mp-slider-body {
        position: relative;
        width: 100%;
        margin: 40px 0;
    }

    .mp-current-date-navigation {
        position: absolute;
        font-size: 30px;
        top: -10px;
        width: 70px;
        height: 70px;
        text-align: center;
        background: #98AAC1;
        border-radius: 80px;
        cursor: pointer;
        vertical-align: middle;
        display: flex;
        align-items: center;
        transition: all .2s;
    }

    .mp-current-date-navigation-prev {
        left: -100px;
    }

    .mp-current-date-navigation-next {
        right: -100px;
    }

    .mp-current-date-navigation svg {
        display: block;
        width: 43px;
        margin: 0px 0;
        padding: 2px;
        /* vertical-align: middle; */
        user-select: none;
        outline: none;
    }

    .mp-current-date-navigation-prev svg {
        margin-left: 26px;
    }

    .article.ready.events {
        bottom: 460px;
    }


    #ruler .mp-ruler-preview {
        width: 140px;
        MARGIN: 0 AUTO;
        /* float: none; */
        margin-right: 30px;
    }

    .mp-ruler-details {
        font-size: 20px;
        color: #fff;
        /* border-bottom: 1px solid #98AAC1; */
        text-align: center;
        padding-bottom: 15px;
        font-style: italic;
        width: 100%;
        /* max-width: 90px; */
        /* margin-bottom: 20px; */
    }

    #event:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 1px;
        background: #98aac1;
        width: 150px;
    }


}
@media screen and (max-width: 3200px) {

    .close-btn{width:40px; height:40px;font-size: 20px;line-height: 40px;}
    .article.ready{right: 8%;max-width: 500px;max-height: 500px;top: 180px;bottom: 180px;}
    .ready .close-btn {
        opacity: 1;
        right: 20px;
        top: 20px;
    }

    .mp-age-name {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 400;
        color: #98aac1;
        margin-bottom: 10px;
    }
    .mp-ruler-name {
        margin-bottom: 0;
        font-size: 21px;
        line-height: 26px;
        font-weight: 600;
        margin: 0;
        margin-bottom: 5px;
        color: #ffffff;
        /* word-break: break-word; */
        /* width: 280px; */
        padding-right: 60px;
    }
    .mp-current-event-date {
        margin: 0;
        margin-bottom: 10px;
        font-weight: bold;
        padding-top: 4px;
        font-size: 21px;
        /* border-bottom: 1px solid #ffffff17; */
        display: inline-block;
        /* padding-right: 130px; */
        /* margin-bottom: 40px; */
        /* padding-bottom: 20px; */
        color: #ffffff;
    }
    .article-body h2.mp-current-event-title {
        font-size: 14px;
        line-height: 21px;
        max-width: 400px;
        font-weight: 600;
        color: #fff;
    }
    .mp-current-event-desc{}
    .mp-current-event-desc p{}
    .mp-head-part {
        width: 80px;
    }
    .mp-current-date-num {
        color: #FFF;
        font-size: 21px;
        position: relative;
        background: none;
        text-align: center;
        border: none;
        outline: none;
        width: 100%;
        /* font-weight: 100; */
        font-weight: 500;
        font-family: 'Montserrat', sans-serif;
        height: 50px;
        user-select: none;
        outline: none;
        pointer-events: none;
    }
    .article-body{padding: 40px;}
    .article-head h2{font-size: 21px;}
    .article-body p{
        font-size: 14px;
        line-height: 1.8;
    }
    .side-menu {
        position: fixed;
        left: 0;
        width: 100%;
        z-index: 1;
        max-width: 653px;
        margin: 0 auto;
        right: 0;
        padding: 0;
        bottom: 30px;
        overflow: hidden;
    }
    .side-btn a {
        display: block;
        padding: 5px 40px;
        font-size: 14px;
        user-select: none;
        color: #586480;
        font-weight: 500;
    }
    .article-head .article-preview{width:120px;}

    .switcher{
        width: 60px;
        border: 1px solid #98aac1;
        height: 28px;
        border-radius: 100px;
        position: relative;
        padding: 0px;
        margin: 2px 0 0;
        /* margin-left: 20px; */
        overflow: hidden;
        /* display: none; */
    }

    .switcher-btn{
        width: 20px;
        height: 20px;
        background: #98aac1;
        border-radius: 200px;
        position: absolute;
        right: 3px;
        transition: all .6s;
        top: 3px;
        left: auto;
    }
    .active .switcher-btn{
        left: 3px;
        right: auto;
        width: 20px;
        height: 20px;
    }

    .mp{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0%;
        padding-top: 0;
        max-width: 720px;
        margin: 0 auto;
        padding: 50px;
        padding-bottom: 20px;
        padding-bottom: 90px;
        bottom: -100%;
        transition: all .6s;
    }

    .mp-slider-play{width: 30px;
        height: 30px;}
    .noUi-horizontal .noUi-handle {
        width: 30px;
        height: 30px;
        right: -15px;
        top: -15px;
    }
    .mp-slider-body {
        position: relative;
        width: 100%;
        margin: 13px 0;
    }

    .mp-current-date-navigation {
        position: absolute;
        font-size: 30px;
        top: 10px;
        width: 30px;
        height: 30px;
        text-align: center;
        background: #98AAC1;
        border-radius: 80px;
        cursor: pointer;
        vertical-align: middle;
        display: flex;
        align-items: center;
        transition: all .2s;
    }
    .mp-current-date-navigation-prev {
        left: -30px;
    }

    .mp-current-date-navigation-next {
        right: -30px;
    }

    .mp-current-date-navigation svg {
        display: block;
        width: 23px;
        margin: 0px 0;
        padding: 2px;
        /* vertical-align: middle; */
        user-select: none;
        outline: none;
    }

    .mp-current-date-navigation-prev svg {
        margin-left: 8px;
    }

    .article.ready.events {
        bottom: 180px;
        top: 120px;
    }

    #ruler .mp-ruler-preview {
        width: 110px;
        MARGIN: 0 AUTO;
        /* float: none; */
        margin-right: 30px;
    }

    .mp-ruler-details {
        font-size: 14px;
        color: #fff;
        /* border-bottom: 1px solid #98AAC1; */
        text-align: center;
        padding-bottom: 15px;
        font-style: italic;
        width: 100%;
        /* max-width: 90px; */
        /* margin-bottom: 20px; */
    }

    #event:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 1px;
        background: #98aac1;
        width: 110px;
    }

}

@media screen and (max-width: 1800px) {
    .article.ready{right: 2%;}

}

@media screen and (max-width: 1420px) {
    .article.ready{right: 0%;}

}

@media screen and (max-width: 1130px) {

    .article.ready{right: 0%;}
}
@media screen and (max-width: 1020px) {

    .header .header-navigation{display:none}
    .article.ready{right: 0%;opacity: 1;}

}
@media screen and (max-width: 880px) {


    .mp-current-date-num{/* font-size: 50px; */}
    .mp-current-date-navigation{/* width:50px; *//* height: 50px; */}
    .mp-current-date-navigation svg  {/* width:20px; *//* height: 20px; *//* margin: 15px; */}

    .mp-ruler-preview{
        width:40px;
    }
    .mp-age-item{font-size:8px;}
    .mp-slider-play{width:50px; margin-right:20px;}

    .mp-current-event-title{/* font-size:20px; */}

    .article{
        right: 0;
        top: auto;
        bottom: -100%;
    }
    .article.ready{left: 0; bottom:0;right: 0;width: auto;top: auto;bottom: 20px;height: auto;max-width: none;margin: 0 auto;left: 20px;right: 20px;max-height: none;/* top: 60%; */height: 160px;transition: all .6s;}



    .article.ready.events{bottom:120px;/* height: 120px; *//* z-index: 9999; */top: auto;}
    .menu-opened .article.ready.events{display:none}
    .article.ready.large{/* top: 140px; */height: 440px;}
    .article.ready.events.large{height: 370px;}
    .article.ready.large .article-body{height:auto;}

    .side-menu{top: 23px;bottom: auto;left: 120px;right: 120px;width: auto;z-index: 9999;}
    .mp.ready{padding-bottom:30px;}
    .side-btn a{padding: 5px 10px;font-size: 12px;}
    .mp-age-name{font-size: 10px;margin-bottom: 0px;}
    .mp-ruler-name{font-size: 14px;line-height: 1.4;}
    #ruler .mp-ruler-preview{width: 50px;margin-right: 15px;}
    .mp-ruler-content{padding: 0}
    .mp-ruler-details{font-size: 7px;}
    .article-body{padding:20px;/* padding-top: 30px; */padding-bottom: 60px;height: 120px;}
    .article-body h2{font-size: 16px;}
    .article-body p{font-size: 14px;line-height: 1.7;color: #FFF;}
    .article-head .article-preview{width: 70px;}
    .article-preview{height:150px;margin-bottom: 15px;}

    .article-header{display:block;}

    .close-btn{width: 30px;height: 30px;font-size: 14px;line-height: 30px;}

}
@media screen and (max-width: 720px) {
}
@media screen and (max-width: 640px) {
    .side-menu{top: 83px;bottom: auto;width: 100%;left: 0;right: 0;z-index: 9;}
}


.popupMap{z-index: 9}
.popupPlace{z-index: 9}
.map-popup{  z-index: 9; position: relative;font-size: 16px;color: #fff;padding: 0 0px;}
.map-popup-place{z-index: 9;}
.map-popup-city-name{color: #d5e5f8
}

.map-popup-place-pin{background:url('../images/place_pin.png');background-size: 100%;width: 0;height: 0;background-repeat: no-repeat;position: relative;margin: 0 auto;display: none;}
.map-popup-place-pin img{display:block; width: 70px; position: absolute;border-radius: 60px;left: 0;right: 0;margin: auto;top: 5px;}

.map-popup-place-pin-name{/* display: flex; */position: relative;/* top: 54px; */left: 0;/* height: 76px; */align-items: center;font-family: 'Montserrat', sans-serif;font-size: 14px;font-weight: 500;text-align: center;}

#mapLight .mapboxgl-popup{margin-top: -25px;}
#mapLight .mapboxgl-popup-content, #mapLight .maplibregl-popup-content {
    background: #232636d6;
    background: none;
    border-radius: 0;
    padding: 6px 10px;
    pointer-events: auto;
    position: relative;
    border: none;
    box-shadow: none;
    border-radius: 4px;
}

#mapLight .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    align-self: center;
    border-bottom: none;
    border-top-color: #232636d6;
    display: none;}

#mapLight .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    align-self: center;

    border-left-color: #232636d6;
}


#mapLight .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    align-self: center;

    border-right-color: #232636d6;
}

#landscape{display: none}
#landscape .view-note{
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 140px;
    margin: auto;
    bottom: 0;
    right: 0;
    color: #fff;
    font-size: 17px;
    padding: 0 20px;
}
#landscape .view-note img{width: 100px; display:block; margin:0 auto;margin-bottom: 10px;}

@media screen and (max-height: 440px) {

    #landscape{display: block;z-index: 2;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #1b1d29;margin: auto;right: 0;bottom: 0;border-radius: 0;}*/
}