*{
    margin: 0;
    padding: 0;
}
body{
    background: #fff;
}
ul,ol{
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}
img{
    width: 100%;
}
h1,h2,h3,p,a,span,li{
    font-family: 'Inter', sans-serif, serif;
}
.flex{
    display: flex;
}
.main{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    width: calc(100% - 24px);
    max-width: 1400px;
}
header nav a{
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    color: #1D1D1D;
    text-decoration: none;
}
section.contents{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    align-self: center;
    margin-top: 80px;
    padding-bottom: 192px;
    width: calc(100% - 24px);
    max-width: 1400px;
}
section.news{
    display: flex;
    padding: 40px 0 96px 0;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
section.news .controls{
    display: flex;
    width: calc(100% - 24px);
    max-width: 930px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
section.news .controls .navi{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
}
section.news .controls .navi .news-share-menu{
    position: absolute;
    top: 32px;
    left: -2px;
    width: fit-content;
    height: fit-content;
    background: #fff;
    z-index: 100;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 6px 8px 8px rgba(0,0,0,0.33);
    border: 1px solid #dedede;
    border-radius: 10px;
}
section.news .controls .navi .news-share-menu ul li{
    margin: 8px 0;
}
section.news .controls .navi .news-share-menu ul li a{
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #5D5D5D;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
}
section.news .controls .navi .news-share-menu ul li:hover{
    background: #dedede;
}
section.news .controls .navi .share-news.open .news-share-menu{
    display: flex;
}
section.news .controls .navi .share-news.open .popup-underground{
    display: block;
}
section.news .controls .info{
    display: flex;
    padding-bottom: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}
section.news .controls .info .tags-n-published{
    display: flex;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    color: #5D5D5D;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
section.news .controls .info h1{
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    color: #1D1D1D;
}
section.news .controls .info .summary{
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #5D5D5D;
    margin-top: 12px;
}
section.news .controls .info hr{
    width: 100%;
    border-color: rgba(233, 233, 233, 0.2);
}
section.news .controls .info .listen-n-share{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}
section.news .controls .info .listen-n-share .share{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    flex: 1 0 0;
}
section.news .controls .info .listen-n-share .share p{
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: #373737;
}
section.news .controls .info .listen-n-share .share img{
    width: 20px;
    height: 20px;
}
.playing-ani{
    width: 20px;
    height: 20px;
    padding: 4px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    box-sizing: border-box;
}
.playing-ani .bar{
    display: inline-block;
    background: #fff;
    width: 27%;
    height: 100%;
    animation: up-and-down 1.5s ease infinite alternate;
}
.playing-ani .bar_1{
    height: 30%;
}
.playing-ani .bar_2{
    height: 75%;
    animation-delay: -2.5s;
}
.playing-ani .bar_3{
    height: 60%;
    animation-delay: -3.5s;
}
article{
    width: calc(100% - 24px);
    max-width: 954px;
}
article, article p, article ul li, article span{
    color: #373737;

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
article p{
    text-align: justify;
    margin-bottom: 12px;
}
article img{
    margin-bottom: 48px;
    border-radius: 20px;
}
section.latest{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 96px;
    background: #F9FBFF;
    width: 100%;
    border-top: 1px solid #E9E9E9;
}
section.latest .inner{
    display: flex;
    padding: 96px 0;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    align-self: center;
    width: calc(100% - 24px);
    max-width: 1400px;
}
section.latest .inner h2{
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 38px;
    color: #1d1d1d;
}
.latest-title{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    align-self: stretch;
    flex-wrap: wrap;
}
footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 0 64px 0;
    width: 100%;
    background: #031435;
}
footer .inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: calc(100% - 24px);
    max-width: 1400px;
}
.logo{
    width: 190px;
    height: 32px;
}
header nav a{
    margin-right: 24px;
}
header nav a:last-child{
    margin-right: 0;
}
.user-corner{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}
.user-corner .avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
header .mob-menu-btn{
    display: none;
    border: none;
    background: url("/template/img/hamburger.svg") no-repeat center;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
header .mob-menu-btn.open{
    background-image: url("/template/img/close.svg");
}
header .mob-menu-btn .mob-menu{
    position: absolute;
    top: 57px;
    left: 0;
    bottom: 0;
    width: calc(100% - 48px);
    min-height: calc(100vh - 57px);
    background: #fff;
    z-index: 100;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
}
header .mob-menu-btn .mob-menu a{
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
header .mob-menu-btn .mob-menu a,
.title p{
    color: #5D5D5D;
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}
header .mob-menu-btn .mob-menu img{
    width: 32px;
    height: 32px;
}
header .mob-menu-btn.open .mob-menu{
    display: flex;
}
.title{
    padding: 0 25%;
    text-align: center;
}
.title h1{
    color: #1D1D1D;
    text-align: center;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
}
.title p{
    font-size: 18px;
}
.categories{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}
.categories a{
    text-decoration: none;
    text-wrap: nowrap;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    color: #909090;
}
.categories .active{
    border-bottom: 3px solid #4480F3;
}
.categories .active a{
    color: #4480F3;
}
.news-list{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-content: flex-start;
    gap: 48px 30px;
    align-self: stretch;
    flex-wrap: wrap;
}
.news-card, .news-card > a{
    display: flex;
    width: 100%;
    max-width: 326px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    text-decoration: none;
}
.news-card > a:hover h3{
    text-decoration: underline;
}
.news-card img{
    border-radius: 16px;
    height: 244px;
    object-fit: cover;
}
.news-card .summary{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    max-height: 164px;
    overflow: hidden;
}
.news-card .tags{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
    align-self: stretch;
    flex-wrap: wrap;
}
.tag{
    display: inline-flex;
    padding: 4px 10px;
    align-items: flex-start;
    border-radius: 12px;

    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}
.tag.blue{
    border: 1px solid #B4CCFA;
    background: #F4F8FF;
    color: #376ACD;
}
.tag.orange{
    border: 1px solid #FFBE87;
    background: #FFF8F3;
    color: #D9680A;
}
.tag.green{
    border: 1px solid #C2E8A4;
    background: #F7FCF3;
    color: #529E16;
}
.tag.violet{
    border: 1px solid #D1B2F9;
    background: #F9F5FE;
    color: #7032C0;
}
.tag.grey{
    border: 1px solid #D3D3D3;
    background: #F4F4F4;
    color: #777;
}
.tag.darkgreen{
    border: 1px solid #A2DCAD;
    background: #E5F6E8;
    color: #17882E;
}
.tag.pink{
    border: 1px solid #FFD2DA;
    background: #FFF9FA;
    color: #DE7286;
}
.tag.yellow{
    border: 1px solid #FEEBAB;
    background: #FFFAEA;
    color: #CAA323;
}

.news-card .published{
    color: #4480F3;

    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}
.news-card h3{
    color: #1d1d1d;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}
.news-card .description{
    color: #5D5D5D;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
.pagination-container{
    display: flex;
    padding-top: 24px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-wrap: wrap;
    gap: 12px;

    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: #909090;
}
.pagination{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
}
.pagination li{
    display: flex;
    padding: 8px 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 24px;
    width: 16px;
}
.pagination li a{
    color: #909090;
    text-decoration: none;
}
.pagination li.active{
    border-radius: 20px;
    background: #4480F3;
    color: #fff;
}
footer .row{
    display: flex;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
}
footer .row nav{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}
footer .row nav, footer .row nav a{
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    color: #fff;
    text-decoration: none;
}
footer .socials{
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
    align-self: stretch;
}
footer .socials img{
    width: 20px;
    height: 20px;
}
footer .row:last-child nav, footer .row:last-child nav a{
    color: rgba(255,255,255, 0.4);
}
footer hr{
    width: 100%;
    border-color: rgba(42, 85, 167, 0.2);
}
header nav a:hover, .categories a:hover, footer nav a:hover{
    color: #4480F3;
}
footer .row:last-child nav a:hover{
    color: #fff;
}

.button, .button.sm{
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;

    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}
.button.sm{
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.button.sm img{
    width: 20px;
    height: 20px;
}
.button.blue{
    background: #4480F3;
    border: 1px solid;
    color: #fff;
}
.button.white{
    background: #fff;
    border: 1px solid #B4CCFA;
    color: #4480F3;
}
.button.lightgrey{
    background: #fff;
    border: 1px solid #DEDEDE;
    color: #1d1d1d;
}
.button.blue:hover{
    background: #376ACD;
}
.button.white:hover{
    background: #f4f4f4;
}
.button.lightgrey:hover{
    background: #f4f4f4;
}
.mrgt-24{
    margin-top: 24px;
}
.no-scroll{
    overflow: hidden;
}
.hidden{
    display: none!important;
}
/*empty news list*/
.empty-list{
    width: 100%;
    max-width: 650px;
    line-height: 24px;
    text-align: center;
    min-height: calc(100vh - 855px);
}
/*popup*/
.popup-bg{
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(29, 29, 29, 0.60);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    display: none;
}
.popup-bg.open{
    display: flex;
}
.popup-container{
    display: flex;
    width: 100%;
    max-width: 27%;
    padding: 48px 32px 32px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: #fff;
    border-radius: 20px;
    min-width: 236px;
}
.popup-contents{
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.popup-contents h2{
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    color: #1D1D1D;
    text-align: center;
}
.popup-contents p{
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: #5D5D5D;
}
.popup-contents .controls{
    text-align: center;
}
.popup-underground{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
}
.suggest-selector{
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.suggest-selector > div{
    position: relative;
}
.suggest-selector input{
    color: #1D1D1D;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid #d9d9d9;
    padding: 12px;
    box-sizing: border-box;
    width: 100%;
}
.suggest-selector .suggest-list{
    position: absolute;
    top: 41px;
    left: 0;
    width: 100%;
    height: fit-content;
    display: none;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    box-shadow: 1px 2px 2px rgba(0,0,0,0.1);
    z-index: 50;
}
.suggest-selector .suggest-list li{
    background: #fff;
    margin: 8px 12px;
    color: #1D1D1D;
    font-size: 14px;
    cursor: pointer;
}
.suggest-selector .suggest-list.open{
    display: block;
}
.suggest-selector input:hover,
.suggest-selector input:active,
.suggest-selector input:focus{
    border-color: #4480f3;
}

.countries-list{
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px 20px;
}
.countries-list a{
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
}
.countries-list a:hover{
    text-decoration: underline;
}
.countries-list a img{
    width: 100px;
    height: 60px;
}

@media screen and (max-width: 1419px) {
    .news-list{
        justify-content: center;
    }
    .countries-list{
        grid-template-columns: auto auto;
    }
}
@media screen and (max-width: 1023px) {
    .title{
        padding: 0 20px;
    }
    .categories{
        justify-content: flex-start;
        max-width: calc(100% - 12px);
        overflow-x: auto;
        align-self: center;
    }
    footer .row{
        flex-wrap: wrap;
        flex-direction: column;
        gap: 24px;
    }
    footer .row nav, footer .socials{
        align-self: center;
        align-items: center;
    }
    footer .row:last-child{
        flex-direction: column-reverse;
    }
    .settings-apply, .settings-cancel{
        padding: 12px;
    }
}
@media screen and (max-width: 799px) {
    header nav, header .user-corner{
        display: none;
    }
    header{
        border-bottom: 1px solid #eee;
        position: sticky;
        top: 0;
        left: 0;
        background: #fff;
        padding: 12px;
    }
    header .mob-menu-btn{
        display: initial;
    }
    section.latest .inner h2{
        font-size: 28px;
    }
    section.news .controls .info .listen-n-share{
        flex-wrap: wrap;
    }
}
@media screen and (max-width: 619px) {
    .news-card, .news-card > a{
        max-width: 320px;
    }
    .title h1{
        font-size: 32px;
    }
    section.news{
        padding: 20px 0 48px 0;
    }
    section.news .controls .navi{
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }
    section.news .controls .navi .button span{
        display: none;
    }
    section.news .controls .info .listen-n-share .share{
        margin-top: 8px;
    }
    section.news .controls .info .listen-n-share .share p{
        font-size: 12px;
    }
    .start-listen, .stop-listen{
        min-width: 100%;
    }
    section.latest .inner{
        padding: 48px 0;
    }
    .countries-list{
        grid-template-columns: auto;
    }
}
@keyframes up-and-down {
    10% {
        height: 30%;
    }
    30% {
        height: 100%;
    }
    60% {
        height: 50%;
    }
    80% {
        height: 75%;
    }
    100% {
        height: 60%;
    }
}