@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&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 { 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: 100%; }
body { background: #fff; color: #333; font: 400 1em/1 'Noto Sans', sans-serif; display: flex; flex-direction: column; min-height: 100vh; }
a { color: #0080c1; text-decoration: underline; outline: none; }
a:hover { text-decoration: none; }
b { font-size: 700; }
input:focus { outline: none; }
input::-webkit-input-placeholder { color: #777; opacity: 1; }
input::-moz-placeholder { color: #777; opacity: 1; }
input::-ms-placeholder { color: #777; opacity: 1; }
.nojs { background: #e94f3d; color: #fff; display: block; padding: 1em; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.red { color: #ca1e5a; }

/* common */

img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

fieldset {
    display: block;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

fieldset:not(:last-of-type) { margin-bottom: 1rem; }

input[type=text], input[type=search], textarea {
    background: #fbfbfc;
    border: #cbd0d5 0.0625rem solid;
    font-size: 0.875rem;
    text-decoration: none;
    display: block;
    min-width: 10rem;
    box-sizing: border-box;
    transition: background 0.2s linear, border-color 0.2s linear;
}

input[type=text], input[type=search] {
    line-height: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
}

textarea {
    min-height: 8.75rem;
    padding: 1rem;
    resize: vertical;
}

input[type=text]:focus, input[type=search]:focus, textarea:focus {
    background: #fff;
    border-color: #999;
}

button, .button, input[type=button], input[type=submit] {
    background: #3399CD;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 2rem;
    height: 2rem;
    display: block;
    min-width: 10rem;
    padding: 0 2rem;
    cursor: pointer;
    box-sizing: border-box;
}

/* layout */

.wrapper {
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
}

header[role=banner] {
    order: 1;
    position: relative;
    z-index: 1;
}

footer[role=contentinfo] {
    background: #f3f3f3;
    order: 3;
}
.container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    flex: 1;
    order: 2;
    width: 100%;
    max-width: 75rem;
}

header[role=banner], footer[role=contentinfo], .content { width: 100%; }

.container, header .inner, footer .inner {
    padding: 0 2.5rem;
    box-sizing: border-box;
}

.content {
    overflow: hidden;
    padding: 2rem 2.5rem 3rem 0;
    box-sizing: border-box;
}

aside {
    min-width: 18.75rem;
    padding: 2rem 0;
}

header .inner, footer .inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 75rem;
    margin: auto;
}

header .inner { min-height: 7rem; }

/* header */

.logo img {
    width: 27.125rem;
    height: 5.25rem;
    margin: 1rem 0;
}

.mini_logo, .switch, .search_switch { display: none; }

/* navigation */

nav {
    background: #3399cd;
    border-bottom: 1px solid #3385ae;
    width: 100%;
}

nav ul {
    display: flex;
    flex-direction: row;
    max-width: 75rem;
    padding: 0 2.5rem;
    margin: auto;
    box-sizing: border-box;
}

nav a {
    color: #fff;
    font-size: 0.875rem;
    text-decoration: none;
    line-height: 2.5rem;
    display: block;
    padding: 0 1.5rem;
    transition: background 0.2s linear;
}

nav a:hover { background: #2e89b8; }

nav .parent { display: none; }

/* search */

.search {
    position: relative;
    width: 18.75rem;
}

.search input {
    width: 100%;
    padding-right: 3rem;
}

.search button
{
    background: url(../images/sprite.svg#search) center no-repeat;
    background-size: 1.125rem;
    text-indent: -9999rem;
    overflow: hidden;
    width: 2rem;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0;
    min-width: inherit;
    opacity: 0.7;
    transition: opacity 0.2s linear;
}

.search button:hover { opacity: 1; }

/* content */

section h1 {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

article h1, h2 {
    font-size: 1.25rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

h2 a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s linear;
}

h2 a:hover {
    text-decoration: underline;
    color: #0080c1;
}

h2 + .tags { margin-top: -1rem; }

h3 {
    color: #555;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

section article:not(:last-of-type) {
    border-bottom: 0.0625rem solid #efefef;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.tags {
    font-size: 0.8125rem;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
}

article .tags:before {
    content: '';
    background: url(../images/sprite.svg#hint) center no-repeat;
    background-size: cover;
    display: block;
    width: 0.875rem;
    height: 1.125rem;
    margin-right: 0.25rem;
}

.tags li:not(:last-child):after {
    content: '/';
    color: #999;
    display: inline-block;
    margin: 0 0.125rem;
}

article, article p {
    font-size: 0.8125rem;
    line-height: 1.5;
}

article p { text-align: justify; }
article .img { margin-bottom: 1rem; }
article .img img { margin: auto; }

article .record_text { margin: 1rem 0; }

article footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 1rem;
}

.post_info {
    color: #555;
    font-size: 0.75rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.post_info dl {
    flex: 0 0 auto;
    margin-bottom: 0.25rem;
}

.post_info dl:not(:last-of-type) {
    border-right: 0.0625rem solid #ccc;
    padding-right: 0.5rem;
    margin-right: 0.5rem;
}

.post_info dt, .post_info dd { display: inline; }
time { white-space: nowrap; }

.pinned h1 a, .pinned h2 a { color: #0080c1; }

.pinned h1:before, .pinned h2:before {
    content: '';
    background: url(../images/sprite.svg#pinned) center no-repeat;
    background-size: cover;
    display: inline-block;
    vertical-align: center;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

/* search results */

.search_form {
    border-bottom: 0.0625rem solid #efefef;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-bottom: 2rem;
    margin: 0 auto 2rem auto;
}

.search_form .search {
    border-right: 0;
    width: 100%;
    min-width: 3rem;
    max-width: 18.75rem;
}

.search_form button { min-width: inherit; }

/* socials */

.socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.socials li, .socials a {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.125rem;
    overflow: hidden;
    width: 1.5rem;
    height: 1.5rem;
}

.socials li { margin-right: 0.5rem }

.socials a {
    text-indent: -9999rem;
    display: block;
    transition: opacity 0.2s linear;
    opacity: 0.7;
}

.socials a:hover { opacity: 1; }

footer[role=contentinfo] .socials .fb, .socials .fb a { background-image: url(../images/sprite.svg#facebook_active); }
footer[role=contentinfo] .socials .fb a { background-image: url(../images/sprite.svg#facebook); }
footer[role=contentinfo] .socials .vk, .socials .vk a { background-image: url(../images/sprite.svg#vk_active); }
footer[role=contentinfo] .socials .vk a { background-image: url(../images/sprite.svg#vk); }
footer[role=contentinfo] .socials .rss { background-image: url(../images/sprite.svg#rss_active); }
.socials .rss a { background-image: url(../images/sprite.svg#rss); }
.socials .twitter a { background-image: url(../images/sprite.svg#twitter_active); }

footer[role=contentinfo] .socials li, footer[role=contentinfo] .socials a
{
    border-radius: 0.25rem;
    width: 2rem;
    height: 2rem;
}

footer[role=contentinfo] .socials a { opacity: 1; }
footer[role=contentinfo] .socials a:hover { opacity: 0; }

/* pagination */

.pagination {
    border-top: 0.0625rem solid #efefef;
    color: #555;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
    margin-top: 2rem;
}

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

.pagination li {
    font-size: 0.875rem;
    line-height: 2rem;
}

.pagidots { margin: 0 0.5rem; }

.pagination a, .pagination span {
    text-align: center;
    text-decoration: none;
    display: block;
    min-width: 2rem;
    box-sizing: border-box;
    padding: 0 0.5rem;
    transition: background 0.2s linear;
}

.pagination a:hover {
    background: #0080C1;
    color: #fff;
}

.pagination .current span {
    background: #f3f3f3;
    color: #000;
}

.pagination .prev, .pagination .next,
.pagination .prev > *, .pagination .next > * {
    text-indent: -9999rem;
    overflow: hidden;
    width: 3rem;
    height: 2rem;
}

.pagination .prev { background: url(../images/sprite.svg#prev) center no-repeat; }
.pagination .next { background: url(../images/sprite.svg#next) center no-repeat; }
.pagination .prev a { background: url(../images/sprite.svg#prev_active) center no-repeat; }
.pagination .next a { background: url(../images/sprite.svg#next_active) center no-repeat; }

.pagination .prev a, .pagination .next a {
    opacity: 0;
    transition: opacity 0.2s linear;
}

.pagination .prev span, .pagination .next span { background-color: #fff; opacity: 0.5; }
.pagination .prev a:hover, .pagination .next a:hover { opacity: 1; }
.pagination .prev { order: -1; }

.pagination .prev, .pagination .next,
.pagination .prev a, .pagination .next a {
    background-size: 1rem 1.875rem;
}

.more_news {
    border-top: 0.0625rem solid #efefef;
    padding-top: 2rem;
    margin-top: 2rem;
}

.more_news li {
    color: #555;
    font-size: 0.875rem;
    list-style: circle outside;
    padding-left: 0.25rem;
    margin-left: 1.5rem;
}

.more_news li:not(:last-child) { margin-bottom: 0.5rem; }

/* sidebar */

.navigation {
    background: #fff;
    border: 0.0625rem solid #f3f3f3;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}

.navigation li {
    color: #666;
    list-style: circle inside;
}

.navigation li:not(:last-child) {
    border-bottom: 0.0625rem solid #f3f3f3;
}

.navigation a {
    color: #555;
    font-size: 0.875rem;
    line-height: 1.875rem;
    text-decoration: none;
    transition: color 0.2s linear;
}

.navigation a:hover { color: #0080c1; }

.news_box {
    background: #fff;
    border: 0.0625rem solid #f3f3f3;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.news_box h3, .news {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.news_box h3 {
    background: #fbfbfb;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;    
    margin-bottom: 0.75rem;    
}

.news li {
    font-size: 0.8125rem;
    line-height: 1.25;
}

.news li:not(:last-child) { margin-bottom: 0.375rem; }

.read_more {
    color: #555;
    font-size: 0.8125rem;
    border-top: 0.0625rem solid #f3f3f3;
    text-decoration: none;
    display: block;
    padding: 1rem 0;
    margin: 1rem 1.25rem 0;
    transition: color 0.2s linear;
}

.read_more:after {
    content: '';
    background: url(../images/sprite.svg#readmore) center no-repeat;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    width: 0.5rem;
    height: 0.75rem;
    margin-left: 0.375rem;
}

.read_more:hover {
    color: #333;
    text-decoration: underline;
}

.news_box dl {
    line-height: 1.125rem;
    margin: 0 1.25rem 1.25rem;
}

.news_box dl:last-of-type { margin-bottom: 1.25rem; }

.news_box a {
    font-size: 0.8125rem;
    text-decoration: none;
}

.news_box dt a { display: block; }
.news_box a:hover { text-decoration: underline; }

.news_box dt b {
    font-size: 0.875rem;
    display: block;
}

.news_box dd a {
    color: #999;
    font-size: 0.75rem;
}

.top_forum dl:not(:last-of-type) { margin-bottom: 1rem; }

.promo a { display: block; }

/* footer */

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

.copyrights {
    font-size: 0.8125rem;
    line-height: 1.5;
}

.counter a, .counter img { display: block; }

.counter a {
    opacity: 0.5;
    transition: opacity 0.2s linear;
}

.counter a:hover { opacity: 1; }

/* scroller */

.scroller .inner {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    z-index: 0;
    margin: 0 2.75rem;
}

.scroller:not(:last-of-type) {
    border-bottom: 0.0625rem solid #efefef;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.scroller .prev {
    background: url(../images/sprite.svg#prev_active) center no-repeat;
    left: -2.75rem;
}
.scroller .next {
    background: url(../images/sprite.svg#next_active) center no-repeat;
    right: -2.75rem;
}

.scroller .prev:before { background: url(../images/sprite.svg#prev) center no-repeat; }
.scroller .next:before { background: url(../images/sprite.svg#next) center no-repeat; }

.scroller .scroller_arrow, .scroller .scroller_arrow:before {
    background-color: #fff;
    background-size: 1rem 1.875rem;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.875rem;
    margin: auto;
    cursor: pointer;
    outline: none;
}

.scroller_arrow:before {
    content: '';
    left: auto;
    right: auto;
    margin: auto;
    transition: opacity 0.2s linear;
}

.scroller_arrow:hover:before { opacity: 0; }

.swiper-container:not(.swiper-container-initialized) .swiper-slide { margin-right: 1rem; }

/* releases */

.release {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    max-width: 10rem;
}

.release .cover {
    order: -1;
    margin-bottom: 0.5rem;
}

.release dt {
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}

.release dt a {
    display: block;
    overflow: hidden;
}

.release a { text-decoration: none; }
.release a:hover { text-decoration: underline; }

.release dt b {
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.25rem;
}

.release .date, .release .tags { font-size: 0.75rem; }
.release .date { margin-top: auto; }

.release .tags {
    font-size: 0.6875rem;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    margin: 0.25rem 0 0.375rem;
}

.release .tags li { white-space: nowrap; }
.release .tags, .release .tags a { color: #999; }

.release .rating {
    background: #ccc;
    border-radius: 0.25rem;
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.75;
    padding: 0 0.5rem;
    align-self: flex-start;
}

.release .rating:before {
    content: 'Рейтинг: ';
    display: inline;
}

.release.horizontal {
    position: relative;
    width: auto;
    min-height: 5rem;
    padding-left: 6rem;
    margin: 0 1.25rem;
    display: none;
}

.release.horizontal:nth-child(-n+6) { display: flex; }

.release.horizontal:first-of-type { margin-top: 1.25rem; }
.release.horizontal:last-of-type { margin-bottom: 1.25rem; }
.release.horizontal:not(:last-of-type) { margin-bottom: 1rem; }

.release.horizontal .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 5rem;
    height: 5rem;
}

.release.horizontal dt { margin-bottom: 0; }

.release.horizontal dt a { 
    line-height: 1;
    overflow: visible;
    height: auto;
}

.release.horizontal dt b {
    font-size: 0.8125rem;
    margin-bottom: 0.1875rem;
}

.release.horizontal .date, .release.horizontal .tags  { margin-top: 0.125rem; }
.release.horizontal .tags { line-height: 1.3; }

/* fixed menu */

.dummy_nav {
    height: 0;
    width: 100%;
}

.fixed_menu nav {
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    transition: top 0.3s linear;
}

.nav_down nav { top: 0; }
.nav_up nav { top: -3rem; }


/* media queries yeah! =) */

@media screen and (max-width: 62rem) { /* 992 */
    
    .wrapper { padding-top: 2.5rem; }
    .container { display: block; }
    .content { padding: 2rem 0 0; }
    aside { min-width: inherit; }
    
    .container, header .inner, footer .inner {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .logo, .search, .dummy_nav { display: none; }
    
    header[role=banner] {
        background: #3399cd;
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        right: 0;
        height: 2.5rem;
    }
    
    header .inner { min-height: inherit; }
    
    .mini_logo {
        background: url(../images/sprite.svg#logo) center no-repeat;
        background-size: 9rem 1.5rem;
        display: block;
        position: absolute;
        left: 0;        
        top: 0;
        bottom: 0;
        right: 0;
        width: 9rem;
        margin: auto;
        cursor: pointer;
        transform: translateY(0.25rem);
    }
    
    .switch {
        display: block;
        width: 1.25rem;
        height: 2.5rem;
        position: relative;
        cursor: pointer;
    }
    
    .switch li {
        background: #fff;
        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;
        transform-origin: center;
    }
    
    .switch li:nth-child(1) { top: 0.8125rem; }
    .switch li:nth-child(2) { top: 0; bottom: 0; }
    .switch li:nth-child(3) { bottom: 0.8125rem; }
    
    .menu_active .switch li:first-child { transform: rotate(45deg); top: 1.1875rem; }
    .menu_active .switch li:last-child { transform: rotate(-45deg); bottom: 1.1875rem; }
    .menu_active .switch li:nth-child(2) { opacity: 0; }
    
    nav {
        background: #fff;
        box-shadow: 0.25rem 0 0 rgba(0,0,0,0.05);
        border-bottom: none;
        overflow-y: auto;
        position: fixed;
        z-index: 90;
        top: 2.5rem;
        bottom: 0;
        left: -18.25rem;
        width: 18rem;
        box-sizing: border-box;
        transition: left 0.3s ease-out;
    }
    
    .menu_active nav { left: 0; }
    
    nav > ul {
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    nav li:not(:last-of-type) { margin: 0 0 1.25rem 0; }    
    
    nav a {
        color: #0080c1;
        font-weight: 700;
        line-height: 1rem;
        padding: 0;
    }
    
    nav a:hover {
        background: none;
        text-decoration: underline;
    }
    
    nav .parent { display: block; }
    
    nav .parent ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        margin: 0.5rem 0 0 1rem;
    }
    
    nav .parent li { margin: 0; }
    
    nav .parent ul a {
        color: #555;
        font-weight: normal;
        line-height: 1.75rem;
    }
    
    .search_switch {
        background: url(../images/sprite.svg#search_light) center no-repeat;
        background-size: 1.125rem 1.125rem;
        display: block;
        height: 2.5rem;
        width: 1.125rem;
        cursor: pointer;       
    }
    
    .search_active .search {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 5%;
        right: 5%;
        height: 2.5rem;
        width: auto;
    }
    
    .search input[type=text] { border: none; }
    
    .search button {
        height: 2rem;
        margin: auto;
    }
    
    .search_active .switch, .search_active .search_switch, .search_active .mini_logo { display: none; }
    
    .overlay {
        background: rgba(0,0,0,0.2);
        display: none;
        position: fixed;
        z-index: 1;
        top: 2.5rem;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    article footer {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    article .socials { margin-top: 1rem; }
    
    .navigation { display: none; }
    .promo img { margin: auto; }
    
    .copyrights {
        width: 100%;
        margin-bottom: 1rem;
    }
    
}

@media screen and (max-width: 30rem) { /* 480 */
    
    article p { text-align: left; }
    
}