/* Загрузка шрифтов */

@font-face{
    font-family: "Rusfont_Regular";
    src: url('../fonts/Rusfont_Regular.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: "Rusfont_Medium";
    src: url('../fonts/Rusfont_Medium.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: "Rusfont_Light";
    src: url('../fonts/Rusfont_Light.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: "Rusfont_Italic";
    src: url('../fonts/Rusfont_Italic.otf');
    font-weight: normal;
    font-style: normal;
}

/* Стили основных тегов */

body, html{
    height: 100%;
    margin: 0;
    font-family: Rusfont_Regular, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    color: #777;
}

h2{
    text-align: center;
    font-family: Rusfont_Italic, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 2rem;
    color: goldenrod;
}

/* Стили блока видео */

#vid_blk{
    position: relative;
    height:73%;
}
video{
    display: block;
    position: relative;
    top: 0;
    object-fit: cover;
    object-position: 0% 25%;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 1;
}

/* Стили окна использования cookie */

#cookie_window{
    display: none;
    position: fixed; 
    z-index: 1000;
    width: 100%;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    color: whitesmoke;
    padding: 5rem 2rem;
    font-family: Rusfont_Regular, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 1.2rem;
}

#cookie_flex{
    display: flex;
    align-items: center;
}

#cookie_text{
    flex-basis: 67%;
}

#cookie_btn_box{
    display: flex;
    justify-content: center;
    flex-basis: 33%;
}

#cookie_btn{
    padding: 1rem 3rem;
    background-color: darkred;
    color: whitesmoke;
    font-size: 1.4rem;
    transition: all 0.8s;
    cursor: pointer;
}

#cookie_btn:hover{
    background-color: darkgreen;
    color: whitesmoke;
}

/* Стили блока Header */

#header{
    position: relative;
    background-image: url(../images/main/texture1.jpg);
    background-color: hsl(221, 100%, 17%);
    padding: 2% 2% 2% 4%;
    text-align: center;
    margin-top: -1px;
    background-blend-mode: darken;
}

#header h1{
    display: inline-block;
    margin-left: 200px;
    color: lightgrey;
    font-family: Rusfont_Regular, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: calc(1rem + 4vw);
    text-shadow: 4px 4px 7px black;
}

#header .clan_logo{
    position: absolute;
    top: -45%;
    left: 4%;
    -webkit-filter: drop-shadow(0 0 0.3em hsl(42, 87%, 55%));
    filter: drop-shadow(0 0 0.3em hsl(42, 87%, 55%));
}

/* Стиль баннера для мобильной версии */

#banner_mobile{
    display: none;
    min-height: 33%;
    max-height: 35%;
    background-position: top;
    background-repeat: no-repeat;
    background-color: hsl(205, 100%, 21%);
    background-image: url(../images/main/banner_parmy.png);
    border-bottom: 3px solid #000;
    box-shadow: 0px 8px 4px 1px #000;
}

/* Стили блока навигации */

#navi_wrapper{
    box-shadow: 0px 8px 4px 1px #000;
    background-color: hsl(221, 100%, 17%);
    border-top: 1px solid orange;
    transition: top 0.6s;
}

#navibar_mobile_title{
    display: none;
    float: right;
    font-family: Rusfont_Regular, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 1.4rem;
    margin-left: auto;
    padding: 2% 8%;
    font-weight: 800;
}

#navi{
    display: block;
    max-width: 1700px;
    color:#ddd;
    background-color:#282E34;
    text-align:center;
    text-align: justify;
    margin: 0 auto;
}

#navbar {
    display: block;
    overflow: hidden;
    background-color: hsl(221, 100%, 17%);
    z-index: 100;
    transition: top 0.3s;
}

.menu{
    display: block;
}

#navbar a{
    float: left;
    display: block;
    text-align: center;
    text-transform: uppercase;
    padding: 1rem 2rem;
    font-family: Rusfont_Regular, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: hsl(210, 31%, 80%);
    transition: all 0.4s;
}

#navbar a:hover, #stats_menu_block a:hover{
    color: white;
    background-color: hsl(221, 85%, 28%);
}

.sticky{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    box-shadow: none;
}

#navbar .current_page, #stats_menu_block .current_stats_page{
    color: hsl(42, 96%, 56%);
}

#myNav .current_page_mbl{
    color: hsl(42, 96%, 56%);
}

#stats_menu_wrapper{
    background-color: hsl(221, 100%, 17%);
    width: 100%;
}

#stats_menu_block{
    display: block;
    max-width: 1700px;
    width: 100%;
    background-color: hsl(221, 100%, 17%);
    text-align:center;
    text-align: justify;
    margin: 0 auto;
}

.stats_links{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.stats_links a{
    float: left;
    display: block;
    text-align: center;
    text-transform: uppercase;
    padding: 1rem 2rem;
    font-family: Rusfont_Regular, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: hsl(210, 31%, 80%);
    transition: all 0.4s;
}

/* Стили кнопки мобильного меню и изменения элементов при её нажатии */

.btn_container{
    display: none;
    padding: 2%;
    cursor: pointer;
}

.bar1, .bar2, .bar3{
    width: 35px;
    height: 5px;
    background-color: lightsteelblue;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1{
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2{
    opacity: 0;
}

.change .bar3{
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

/* Стили мобильного меню */  

.overlay{
    opacity: 1;
    margin-top: 54px;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content{
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
}

.overlay a{
    padding: 3%;
    text-decoration: none;
    font-size: 2.2rem;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Стили фоновых картинок и подписи к ним */

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-5, .bgimg-6, .bgimg-7{
    position: relative;
    opacity: 0.9;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

.bgimg-1{
    background-image: url("../images/main/pol1.jpg");
    min-height: 100%;
    background-position: 50% 30%;
}

.bgimg-2{
    background-image: url("../images/main/pol2.jpg");
    min-height: 130%;
}

.bgimg-3{
    min-height: 120vh;
    background-position: 50% 0%;
    opacity: 1;
    background-color: black;
    background-size: contain;
    background-attachment: fixed;    
}

.bgimg-4{
    background-image: url("../images/main/pol3.jpg");
    min-height: 85%;
    background-attachment: scroll;    
}

.bgimg-5{
    background-image: url("../images/main/pol6.jpg");
    min-height: 100%;
    background-position: 50% 30%;
}

.bgimg-6{
    background-image: url("../images/main/pol5.jpg");
    min-height: 110%;
    background-position: 50% 40%;
}

.bgimg-7{
    background-image: url("../images/main/pol7.jpg");
    min-height: 100%;
    background-position: 50% 40%;
}

.titlepic{
    display: none;
    width: 100%;
    position: relative;
}

.caption, .caption_2, .caption_3{
    position: sticky;
    top: 25%;
    text-align: justify;
    padding: 2% 6.5%;
    background-color: rgba(33, 33, 33, 0.9);
    color: #fff;
    font-size: calc(0.7rem + 0.6vw);
    font-family: Rusfont_Light, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    line-height: 1.5;
}

.caption_3{
    position: relative;
    bottom: 0;
}

.caption h2{
    text-align: justify;
    text-indent: 32px;
}

.caption p{
    display: block;
    max-width: 900px;
    text-indent: 32px;
}

.text_center{
    text-align: center;
}

.infobox, .infobox_error{
    display: flex;
}

.infobox_error{
    flex-direction: column;
}

.infobox_text{
    float: left;
    width: 60%;
}

.infobox_image{
    float: right;
    width: 40%;
    display: flex;
    flex-flow: column; 
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-left: 4%;
}

.video_intro{
    width: 100%;
    height: auto;
}

.squad_img{
    width: 100%;
    max-width: 900px;
    padding: 2rem 2% 0;
}

.p_warning{
    color: red;
    font-size: calc(0.9rem + 0.6vw);
}

/* Стили кнопки "вступить в клан" */

.join_clan_btn{
    width: 100%;
    max-width: 240px;
    height: 54px;
    font-family: Rusfont_Italic, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 1.4rem;
    opacity: 1;
    box-shadow: 0 0 0 3px hsl(33, 13%, 95%);
    position: relative;
    margin: 10px 0;
    text-align: center;
    text-decoration: none;
    color: white;
    transition: box-shadow 1s, font-weight 0s, font-size 0.4s;
}

.join_clan_btn:hover{
    box-shadow: 0 0 20px 12px hsl(48, 100%, 48%);
    font-weight: 600;
    font-size: 1.6rem;
}

.join_clan_btn:hover > p{
    color: darkblue;
}

.join_clan_btn > p{
    background-color: hsl(42, 100%, 41%);
    color: white;
    text-indent: 0;
}

.join_clan_btn p{
    margin: 0;
    height: 54px;
    line-height: 54px;
    box-sizing: border-box;
    z-index: 1;
    left: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.join_clan_btn p span.btn_base{
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    left: 0;
    border: 1px solid black;
}

.join_clan_btn p span.btn_bg{
    left: -5%;
    position: absolute;
    background: lightgray;
    width: 0;
    height: 100%;
    z-index: 3;
    transition: 0.3s ease-out all;
    transform: skewX(-10deg);
}

.join_clan_btn p span.btn_text{
    z-index: 4;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.join_clan_btn p:hover{
    color: darkblue;
}

.join_clan_btn p:hover span.btn_base{
    border: 1px solid white;
}

.join_clan_btn p:hover span.btn_bg{
    width: 110%;
}

/* Стили блока footer */

.main_footer{
    position: absolute;
    bottom: 0%;
    width: 100%;
    text-align: justify;
    padding: 2% 6%;
    background-color: #333;
    color: #fff;
    font-size: calc(0.8rem + 0.4vw);
    font-family: Rusfont_Italic, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    opacity: 0.9;
}

.main_footer a{
    color: orange;
}

.footer{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.parmystats_logo{
    width: 50%;
    float: right;  
    transition: all 0.4s;
}

.parmystats_logo:hover{
    box-shadow: 1px 1px 14px 5px hsl(42deg 96% 56%);
    transform: scale(1.2);
}

/* Стили блока статистики */

#demo_txt{
    color: #777;
    text-align:center;
    text-align: justify;
    transition: 0.8s;
    padding: 3% 6%;
}

.stats_group{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.statbox{
    flex-grow: 1;
    background-color: #DDD;
    margin: 4%;
    border-radius: 30px;
    border: 2px solid #CCC;
    box-shadow: 0px 0px 11px 1px black;
    padding: 1%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.statbox h3{
    text-align: center;
    font-family: Rusfont_Italic, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 1.6rem;
}

.stat_number{
    text-align: center;
    font-family: Rusfont_Italic, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: calc(2rem + 3vw);
    color: goldenrod;
    font-weight: bold;
}

/* Стили блока Top Player */

.top_player_div, .dark_block{
    position: relative;
    color:#ddd;
    background-color:#282E34;
    text-align:center;
    padding: 2% 6%;
    text-align: center;
}

.dark_block{
    color: #fff;
    font-size: calc(0.7rem + 0.6vw);
    font-family: Rusfont_Italic, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    text-align: left;
}

#top_player_nick{
    font-size: 8rem;
}

.awards_box{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    justify-content: space-evenly;
    padding: 0 1rem 1.7rem 0.7rem;
}

.achvmnt{
    position: relative;
}

.achvmnt img{
    width: 7rem;
    height: 7rem;
}

.award_qnty{
    background-color: hsl(205, 87%, 29%);
    padding: 0.2em 0.5em;
    color: hsl(205, 79%, 92%);
    text-align: center;
    position: absolute;
    bottom: 0.7rem;
    right: 0.7rem;
    border: 1px solid hsl(210, 31%, 80%);
    border-radius: 5px;
}

.top_player_stats{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.yesterday_summary{
    font-family: Rusfont_Italic, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    padding: 2%;
}

.yesterday_summary + .yesterday_summary{
    margin-left: 4%;
}

.text_left{
    text-align: left;
}

.text_right{
    text-align: right;
}

.text_accent1{
    font-size: 1.4rem;
    color: darkorange;
}

.text_accent2{
    font-size: 1.2rem;
}

/* Стили блока Top Tanks */

.tanks_table{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    justify-items: center;
}

.tanks_row{
    font-size: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all .2s;
}

.tanks_col_pos{
    position: absolute;
    font-size: 3rem;
}

.tanks_col_nickname, .tanks_col_value{
    text-align: center;
}

/* Стили блока ресурсов клана */

.clan_links{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding-top: 1%;
    align-items: stretch;
    font-family: Rusfont_Light, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    transition: all .6s;
}

.clan_links a{
    text-decoration: none;
    color: whitesmoke;
    transition: all .6s;
}

.clan_res, .sec_clan_res{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1% 3%;
}

.sec_clan_res img{
    width: 48px;
}

.sec_clan_res .res_desc{
    font-size: 1rem;
}

.clan_links a:hover{
    background-color: hsla(208, 0%, 78%, 0.2);
    color: darkorange;
}

.res_desc{
    padding: 3%;
}

/* Стили ленты истории клана */

.timeline{
    position: relative;
    width: 660px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 1em 0;
    list-style-type: none;
}

.timeline:before{
    position: absolute;
    left: 50%;
    top: 0;
    content: ' ';
    display: block;
    width: 6px;
    height: 100%;
    margin-left: -3px;
    background: rgb(80,80,80);
    background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
    background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
    z-index: 5;
}

.timeline li{
    padding: 1em 0;
}

.timeline li:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.direction-l{
    position: relative;
    width: 300px;
    float: left;
    text-align: right;
}

.direction-r{
    position: relative;
    width: 300px;
    float: right;
}

.flag-wrapper{
    position: relative;
    display: inline-block;
    text-align: center;
}

.flag{
    position: relative;
    display: inline;
    background: hsla(197, 95%, 36%, 0.9);
    padding: 6px 10px;
    border-radius: 5px;
    font-weight: 600;
    text-align: left;
}

.direction-l .flag{
    -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
    -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
    box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag{
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-l .flag:before,
.direction-r .flag:before{
    position: absolute;
    top: 50%;
    right: -40px;
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    margin-top: -10px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid hsl(216, 100%, 29%);
    z-index: 10;
}

.direction-r .flag:before{
    left: -40px;
}

.direction-l .flag:after{
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-left-color: hsla(197, 95%, 36%, 0.9);
    border-width: 8px;
    pointer-events: none;
}

.direction-r .flag:after{
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-right-color: hsla(197, 95%, 36%, 0.9);
    border-width: 8px;
    pointer-events: none;
}

.time-wrapper{
    position: absolute;
    width: 200px;
    display: inline-block;
    line-height: 1em;
    font-size: 100%;
    color: darkorange;
}

.twl{
    left: -250px;
    top: -3px;
    text-align: right;
}

.twr{
    right: -250px;
    top: -3px;
    text-align: left;
}

.direction-l .time-wrapper{
    float: left;
}

.direction-r .time-wrapper{
    float: right;
}

.time{
    display: inline-block;
    padding: 4px 6px;
}

.desc{
    margin: 1em 0.75em 0 0;
    font-style: italic;
    line-height: 1.5em;
    font-size: 90%;
}

.direction-r .desc{
    margin: 1em 0 0 0.75em;
}

/* Стили перечня требований клана */

.req_list{
    margin: 0;
    padding-left: 1.2rem;
}

.req_list li{
    position: relative;
    list-style-type: none;
    padding-left: 2.5rem;
    margin-bottom: 0.5rem;
}

.req_list li:before{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0.3vw;
    width: 5px;
    height: 11px;
    border-width: 0 2px 2px 0;
    border-style: solid;
    border-color: #00a8a8;
    transform-origin: bottom left;
    transform: rotate(45deg);
}

/* Стили страниц статистики */

.stats_date_box, .stats_feed_hero, .stats_param_box, .stats_by_tank_box{
    margin-bottom: 1em;
    display: flex;
    justify-content: space-between;
    background-color: hsl(22, 82%, 39%);
    padding: 0.6em 5vw;
    color: hsl(205, 79%, 92%);
    font-size: 2.25rem;
    text-transform: uppercase;
    flex-wrap: wrap;
    align-items: center;
}

#stats_date{
    font-family: Rusfont_Regular;
    font-size: 1.8rem;
    font-weight: 600;
    padding: 0 2%;
}

#stats_param{
    font-family: Rusfont_Regular;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 0 2%;
    max-width: 45%;
}

.statsfeed_block{
    background-color: hsla(210, 4%, 9%, 0.7);
    color: hsl(0, 0%, 100%);
}

.statsfeed_block .article_title{
    display: flex;
    flex: 1;
    background-color: hsl(205, 87%, 29%);
    padding: 0.6em 5vw;
    color: hsl(205, 79%, 92%);
    font-size: 2.25rem;
    text-transform: uppercase;
}

.title_container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: hsl(205, 87%, 29%);
}

.title_container div{
    flex: 1 1 50%;
    padding: 0;
    margin-top: 0; 
}

.title_container h2{
    white-space: nowrap;
    padding: 0;
}

.daily_events_blk{
    font-size: 1rem;
    padding: 1% 2%;
}

.daily_event{
    display: flex;
    align-items: center;
    padding: 1% 0;
}

article + article{
    margin-top: 1.2em;
}

.img_wrapper img{
    width: 4rem;
    height: 4rem;
}

.event_desc{
    margin: 0 2em;
}

.acc_day_stats_block{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    align-items: stretch;
}

.account_header{
    grid-column: 1/4;
    grid-row: 1/2;
    display: flex;
    justify-content: space-between;
    background-color: hsl(205, 87%, 29%);
    padding: 0.6em 1em;
    color: hsl(205, 79%, 92%);
    font-size: 2.25rem;
    text-transform: uppercase;
    position: relative;
}

.account_name{
    display: flex;
    flex-direction:column;
    grid-column: 1/2;
    grid-row: 1/2;
    background-color: hsl(205, 87%, 29%);
}

.account_name .stat_acc_name, .account_name .stat_acc_date{
    font-family: Rusfont_Regular, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 3.4rem;
    color: hsl(205, 79%, 92%);
    text-indent: 0;
}

.account_name .stat_acc_date{
    font-size: 2.4rem;
}

.article_title.date_title{
    justify-content: flex-end;
}

.stat_acc_role {
    position: absolute;
    top: 0;
    left: 0;
    text-transform: none;
    font-weight: 500;
    padding: 0 2%;
    background-color: goldenrod;
    color: darkblue;
    font-size: 1rem;
    opacity: 0.7;
}

.stat_balance{
    display: flex;
    align-items: center;
    grid-column: 2/3;
    grid-row: 1/2;
    color: hsl(209, 23%, 60%);
}

.stat_balance h2, .stat_gl_rat h2{
    font-family: Rusfont_Italic, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 2.4rem;
    color: hsl(209, 23%, 60%);
    text-indent: 0;
}

.stat_gl_rat{
    display: flex;
    margin-top: 0;
    grid-column: 3/4;
    grid-row: 1/2;
    background-color: hsl(205, 87%, 29%);
    align-items: center;
}

.stat_awards_box{
    font-family: 'Rusfont_Regular';
    grid-column: 1/4;
    grid-row: 2/3;
    display: flex;
    flex-wrap: wrap;
    background-color: hsla(0,0%,52%,0.2);
    align-content: space-around;
    justify-content: space-evenly;
}

.stat_achvmnt{
    position: relative;
}

.stat_achvmnt img{
    width: 7rem;
    height: 7rem;
}

.stat_award_qnty{
    font-size: 1rem;
    font-family: Rusfont_Italic, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-weight: 600;
    background-color: hsl(205, 87%, 29%);
    padding: 0.2rem 0.5rem;
    color: hsl(205, 79%, 92%);
    text-align: center;
    position: absolute;
    bottom: 0.7rem;
    right: 0.7rem;
    border: 1px solid hsl(210, 31%, 80%);
    border-radius: 5px;
}

.general_stats {
    grid-column: 1/4;
    grid-row: 3/4;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    background-color: hsla(210, 4%, 9%, 0.7);
    font-size: 1.2rem;
    padding: 1em 2em;
    color: hsl(209deg 8% 84%);
    flex-wrap: wrap;
}

.choose_hero_blk{
    display: flex;
    list-style-type: none;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 0;
    background-color: hsla(210, 4%, 9%, 0.7);
}

.choose_hero_blk li{
    margin: 0;
    flex-grow: 1;
}

.choose_hero_blk > li > a{
    display: block;
    margin: 0;
    padding: 1em 2em;
    font-size: 1.6rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: whitesmoke;
    transition: all 0.3s;
}

.choose_hero_blk > li > a:hover{
    color: hsl(205, 79%, 92%);
    font-weight: 600;
    background-color: hsl(205, 87%, 29%);
    transform: scale(1.2);
}

.stats_feed_hero h3{
    text-transform: none;
    font-size: 1.8rem;
}

.stats_hero_name{
    font-size: 3rem;
    font-weight: 600;
}

.stats_hero_role{
    font-size: 1.6rem;
    text-transform: none;
}

/* Стили радиобокса и фильтров параметров */

.param_filters, .tank_filters{
    display: flex;
}

.tank_filters{
    justify-content: center;
}

.param_filters{
    justify-content: center;
}

.radio_block{
    display: flex;
    flex-direction: column;
    width: 50%;
    font-size: 1.2rem;
    font-family: Rusfont_Light, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    padding: 3%;
}

.options_block{
    display: flex;
    flex-direction: column;
    width: 25%;
    padding: 3%;
    min-width: 200px;
    font-size: 1.2rem;
    font-family: Rusfont_Light, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
}

.stats_filter_option{
    font-family: Rusfont_Regular, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 0 2rem;
}

.radio_block * + *, .options_block * + *, .param_filters * + *, .tank_filters * + *{
    margin-top: 0;
}

.radio_element{
    width: 80%;
    margin: 0.5rem 0;
}

.lbl_pradio{
    display: inline-block;    
    text-align: left;
}

.param_radio{
    vertical-align: middle;
    width: 1em;
    height: 1em;
    margin: 0;
}

.param_radio + label{
    cursor: pointer;
    margin-right: 0;
    transition: all 0.4s;
}

.param_radio:not(checked){
    position: absolute;
    opacity: 0;
    margin-left: 2em;
}

.param_radio:not(checked) + label{
    position: relative;
    padding: 0 0 0 4rem;
}

.param_radio:not(checked) + label:before{
    content: '';
    position: absolute;
    left: 0;
    width: 1.8rem;
    height: 1.8rem;
    background: #FFF;
}

.param_radio:not(checked) + label:before{
    border-radius: 50%;
}

.param_radio:not(checked) + label:after{
    content: '';
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    width: 1.2rem;
    height: 1.2rem;
    background-color: grey;
    box-shadow: inset 0px 2px 7px 0px hsl(209, 61%, 16%);
    opacity: 1;
    transition: all .4s;
}

.param_radio:not(checked) + label:after{
    border-radius: 50%;
}

.param_radio:not(checked):hover + label:after{
    background: hsl(42, 96%, 56%);
    opacity: 1;
}

.param_radio:checked + label:after{
    opacity: 1;
    background-color: hsl(205, 63%, 36%);
}

.param_radio:checked + label{
    color: hsl(42, 96%, 56%);
}

.param_radio:focus + label:before{
    box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}

.stats_table{
    margin: 0 auto;
    width: 70%;
    font-size: 1.4rem;
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
}

.generated_rankings_stats_ajax .stats_table{
    width: 70%;
}

.stats_table * + *{
    margin-top: 0;
}

.stats_table_row{
    display: flex;
    justify-content: space-between;
    transition: all .2s;
    padding: 0.3rem 1rem;
    margin-bottom: 2px;
    background-color: hsl(211, 27%, 70%);
    color: hsl(209, 61%, 16%);
    font-family: Rusfont_Regular, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
}

.stats_table > .stats_table_row:hover, .tank_info_content > .tankers_list > .stats_table_row:hover, .statsfeed_block > .tankers_rating > .rating_row:hover{
    background-color: hsl(209, 61%, 16%);
    color: hsl(210, 31%, 95%);
}

.title_row{
    margin: 3rem 0 2rem;
    font-weight: 600;
}

.tankers_rating > div.golden_pos{
    font-weight: 600;
    font-size: 1.6rem;
    background-color: hsl(42, 87%, 55%);
    text-transform: uppercase;
}

.tankers_rating > div.podium_pos{
    font-weight: 600;
    font-size: 1.4rem;
    background-color: hsl(48, 95%, 76%);
}

.tankers_rating > div.top5_pos{
    font-weight: 600;
    font-size: 1.2rem;
    background-color: hsl(29, 80%, 44%);
}

.tankers_rating > div.top10_pos{
    font-weight: 600;
    font-size: 1.2rem;
    background-color: hsl(205, 84%, 74%);
}

.tankers_rating > div.mean_pos{
    font-weight: 600;
    font-size: 1.4rem;
    background-color: hsl(205, 87%, 29%);
    color: whitesmoke;
    margin: 2rem 0;
}

.tankers_rating > div.alert_pos{
    font-weight: 600;
    font-size: 1.2rem;
    background-color: darkred;
    color: whitesmoke;
    margin: 2rem 0;
}

.tank_filters_group{
    flex: 1 1 30%;
    text-align: center;
}

.tank_check_block{
    background: hsla(209, 61%, 16%, 0.85);
    flex-direction: column;
    text-align: left;
    width: 100%;
    font-size: 1.2rem;
}

.btn_cbx_group{
    font-size: 1.2rem;
    padding: 0.4rem 0;
    display: block;
    flex: 1 1 30%;
    background-color: hsl(205, 100%, 21%);
    color: hsl(205, 79%, 92%);
    cursor: pointer;
    transition: all .2s;
}

.btn_cbx_group:hover{
    color: hsl(210, 31%, 95%);
}

.tank_filters_group:hover .tank_filter_row{
    display: flex;
}

.tank_filters_group:hover .btn_cbx_group{
    background-color: hsl(205, 87%, 29%);
}

.tank_filters_group .tank_check_block{
    position: absolute;
    width: calc(88%/3);
}

.tank_filter_row{
    display: none;
    width: 100%;
    transition: all .3s;
}

.tank_filter_row:hover{
    background-color: hsl(29, 80%, 44%);
    color: hsl(211, 27%, 70%);
}

.tank_cbx{
    display: none;
}

.tank_cbx:checked + label{
    background-color: hsl(209, 28%, 39%);
    color: hsl(212, 33%, 89%);
    transition: all .3s;
}

.tank_filter_row:hover .tank_cbx:checked + label{
    background-color: hsl(29, 80%, 44%);
}

.tank_lbl{
    padding: 0.4rem 2rem;
    width: 100%;
    cursor: pointer;
}

.notanks_message{
    padding: 2rem;
    font-size: 1.2rem;
}

.table_tanks * + *{
    margin-top: 0;
}

.table_tanks{
    display: flex;
    flex-direction: column;
}

.table_tank_row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.4rem 2rem;
    transition: all .2s;
}

.table_tank_row:hover{
    background-color: hsl(29, 80%, 44%);
    color: hsl(212, 33%, 89%);
}

.table_tank_name{
    width: 45%;
}

.table_tank_nation{
    width: 15%;
    text-align: center;
}

.table_tank_tier{
    width: 5%;
    text-align: center;
}

.table_tank_type{
    width: 15%;
    text-align: center;
}

.tank_row_link{
    text-decoration: none;
    color: whitesmoke;
}

.tank_info_buttons * + *{
    margin-top: 0;
}

.stats_table .tank_info_buttons{
    margin: 0;
}

.tank_info_buttons{
    margin: 2rem;
    display: flex;
}

.back_to_tank_filter, .tank_wallpaper_btn{
    margin-right: 2rem;
    padding: 0.5rem 2rem;
    font-size: 1.2rem;
    text-decoration: none;
    background-color: hsl(209, 28%, 39%);
    color: hsl(210, 31%, 80%);
    cursor: pointer;
    transition: all .3s;
}

.back_to_tank_filter{
    background-color: hsl(205, 76%, 39%);
}

.back_to_tank_filter:hover, .tank_wallpaper_btn:hover{
    background-color: hsl(29, 80%, 44%);
    color: hsl(212, 33%, 89%);
    padding: 0.5rem 4rem;
}

.tank_info_block{
    margin: 3rem 2rem;
    display: flex;
    justify-content: space-around;
}

.tank_info_block * + *{
    margin-top: 0;
}

.tank_info_content{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 40%;
}

.tank_info_content + .tank_info_content{
    margin-left: 3%;
}

.hlt_blk{
    background-color: hsla(212, 16%, 25%, 0.8);
    padding: 1.5rem;
    border-radius: 1rem;
    border: 2px solid hsl(0, 0%, 63%);
}

.tank_info_header{
    font-size: 1.4rem;
    color: hsl(0, 0%, 77%);
}

.tank_info_number{
    font-size: 5rem;
    font-family: Rusfont_Medium, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
}

.tankers_list{
    margin: 1rem 0;
}

.tankers_list .stats_table_row{
    min-width: 250px;
    justify-content: center;
    font-size: 1.4rem;
}

.tankers_rating{
    width: 100%;
}

.tankers_rating .stats_table_row{
    font-size: 1.2rem;
    justify-content: space-between;
    width: 100%;
}

.tankers_rating .stats_table_row div + div{
    margin-left: 1rem;
}

.tankers_list .table_legend{
    background-color: hsl(209, 28%, 39%);
    color: hsl(205, 79%, 92%);
}

.tank_title_box{
    display: flex;
    justify-content: center;
}

.tank_title_box > .tank_title{
    font-family: Rusfont_Regular, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 4rem;
    font-weight: 600;
    text-indent: 0;
}

.master_row{
    color: hsl(43, 85%, 48%);
    background-color: hsla(212, 16%, 25%, 0.9);
}

/* Стили меню страниц главной страницы */

.pagenavi{
    padding: 2rem 0 4rem;
}

.pages{
    list-style-type: none;
    padding: 0;
}

.pages li{
    position: relative;
    float: left;
    width: auto;
    min-width: 80px;
    border: 2px solid hsl(209, 61%, 16%);;
    border-left:none;
}

.pages li:first-of-type{
    border-left: 2px solid hsl(209, 61%, 16%);
    border-right: none;
}

.pages li:last-of-type{
    border-left: none;
}

.pages a{
    display: block;
    background-color: darkorange;
    padding: 0.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-family: Rusfont_Italic;
    font-size: 1rem;
    color: white;
    text-decoration: none;
    text-align: center;
    transition: background-color .4s;
}

.pages a:hover{
    background-color: orangered;
    color: black;
}

#curpage{
    height: 2rem;
    background-color: darkorange;
    width: auto;
    border-left: 2px solid hsl(209, 61%, 16%);
    border-right: none;
    border-bottom: none;
}

#curpage:hover{
    background-color: orangered;
}

#endpage{
    background-color: hsl(209, 61%, 16%);
    color: white;
}

#actsnum{
    display: none;
    position: absolute;
    top: calc(2rem + 1px);
    width: auto;
    margin: 0;
    border: 2px solid hsl(209, 61%, 16%);
    border-top: none;
    z-index: 100;
    font-size: 1rem;
}

#actsnum a{
    background-color: lightyellow;
    background-image: none;
    font-size: 0.8em;
    color: black;
    border-bottom: 1px solid hsl(209, 61%, 16%); 
    transition: background-color .2s;
}

#actsnum a:first-of-type{
    border-top: 1px solid hsl(209, 61%, 16%);
}

#actsnum a:last-of-type{
    border-bottom: none;
}

#actsnum a:hover{
    background-color: orangered;
    color: hsl(209, 61%, 16%);
}

.generated_stats_feed_activity_ajax, .generated_stats_ajax, .generated_rankings_stats_ajax, .generated_stats_by_tank_ajax{
    padding-bottom: 15%;
}

.generated_stats_by_tank_ajax{
    min-height: 110%;
}

.generated_tank_list_ajax{
    padding-bottom: 5%;
}

/* Служебные стили */

.clear::after{
    display: block;
    content: " ";
    clear: both;
}

/* Стили для планшетов */

@media (max-width: 1300px){
    
    #header h1{
        font-size: calc(3rem + 1vw);
        margin-left: 0;
    }
    #header .clan_logo{
        display: none;
    }
    
    .infobox{
        flex-direction: column;
        align-items: center;
    }
    
    .infobox_text, .infobox_image{
        width: 78%;
    }
    
    .infobox_image{
        margin: 4% 0;
    }
    
    .stats_group{
        flex-direction: column;
    }
        
    .statbox{
        flex-grow: 0;
        flex-basis: 10%;
        margin: 4% 30%;
    }
    
    .stats_summary{
        margin: 2% 0;
    }
    
    .yesterday_summary{
        padding: 0 1%;
    }
    
    .yesterday_summary + .yesterday_summary{
        margin-left: 0;
    }
    
    .top_player_stats{
        flex-direction: column;
    }
    
    .text_left, .text_right{
        text-align: center;
    }
    
    .titlepic{
        display: block
    }
    
    .bgimg-3{
        display: none;
    }
    
    .footer{
        flex-direction: column;
        align-items: flex-start;
    }
    
    .parmystats_link{
        margin-top: 2%;
    }
    
    .parmystats_logo{
        float: none;
    }
    
    .clan_links{
        flex-direction: column;
        align-items: stretch;
    }
    
    .stats_date_box, .stats_feed_hero, .stats_param_box, .stats_by_tank_box{
        font-size: 3vw;
    }

    .stats_feed_hero{
        flex-direction: column;
    }
    
    .account_header{
        flex-direction: column;
        align-items: center;
    }
    
    .account_name .stat_acc_name{
        font-size: 4vw;
    }
    
    .stat_balance h2, .stat_gl_rat h2, .account_name .stat_acc_date {
        font-size: 3vw;
    }
    
    .statsfeed_block .article_title{
        font-size: 3vw;
    }
    
    .choose_hero_blk > li > a{
        font-size: 2vw;
    }
    
    .pagenavi{
        display: flex;
        justify-content: space-around;
    }
    
    .generated_rankings_stats_ajax .stats_table{
        width: 100%;
    }
    
    .tankers_rating > div.golden_pos{
        font-size: 1.4rem;
    }

    .tankers_rating > div.podium_pos{
        font-size: 1.2rem;
        text-transform: uppercase;
    }

    .tankers_rating > div.top5_pos{
        font-size: 1.2rem;
    }

    .tankers_rating > div.top10_pos{
        font-size: 1.2rem;
    }

    .tankers_rating > div.mean_pos{
        font-size: 1.2rem;
    }

    .tankers_rating > div.alert_pos{
        font-size: 1.2rem;
    }
    
    .options_block{
        width: 50%;
    }
    
    .tank_info_block{
        flex-direction: column;
        align-items: center;
    }
    
    .tank_info_content + .tank_info_content{
        margin-left: 0;
        margin-top: 3%;
    }
    
    .tank_info_content{
        width: 60%;
    }
    
  
}

@media (max-width: 900px){
    #vid_blk{
        position: absolute;
        display: none;
    }
    
    .youtube_video{
        width: 100%;
        height: calc(100vw/1.78);
    }
        
    #header h1{
        font-size: calc(1rem + 3vw);
    }
    
    .infobox_text, .infobox_image{
        width: 100%;
    }
    
    .statbox{
        margin: 4% 20%;
    }
    .tanks_table{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .timeline{
 	width: 100%;
	padding: 4em 0 1em 0;
    }

    .timeline li{
	padding: 4em 0 6em;
    }

    .direction-l, .direction-r{
	float: none;
	width: 100%;
	text-align: center;
    }

    .flag-wrapper{
        display: block;
	text-align: center;
    }

    .flag {
	z-index: 15;
    }

    .direction-l .flag:before,
    .direction-r .flag:before{
        position: absolute;
        top: -20px;
	left: 50%;
	content: ' ';
	display: block;
	width: 12px;
	height: 12px;
	margin-left: -9px;
	background: #fff;
	border-radius: 10px;
	z-index: 10;
    }

    .direction-l .flag:after,
    .direction-r .flag:after{
	content: "";
	position: absolute;
	left: 50%;
	top: -8px;
	height: 0;
	width: 0;
	margin-left: -8px;
	border: solid transparent;
	border-bottom-color: hsla(197, 95%, 36%, 0.9);
	border-width: 8px;
	pointer-events: none;
    }

    .time-wrapper{
	display: block;
	margin: 0;
	z-index: 14;
        padding: 0.6rem;
    }

    .direction-l .time-wrapper{
	float: none;
    }

    .direction-r .time-wrapper{
	float: none;
    }

    .desc{
        position: relative;
        margin: 1em 0 0 0;
        padding: 1em;
        background: rgba(245,245,245, 0.8);
        color: black;
        -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
        -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
        box-shadow: 0 0 1px rgba(0,0,0,0.20);
        z-index: 15;
    }

    .direction-l .desc,
    .direction-r .desc{
	position: relative;
	margin: 1em 1em 0 1em;
	padding: 1em;
        z-index: 15;
        border-radius: 6px;
        font-size: 1rem;
    }

    .twl, .twr{
        left: 0;
        top: -82px;
        text-align: center;
        width: 100%;
        background-color: hsla(0, 0%, 1%, 0.3);
        border-radius: 3px;
    }
    
    .time{
        font-size: 1.2rem;
    }
    
    .flag{
        font-size: 1.2rem;
    }
    
    .clan_res img{
        width: 48px;
    }
    
    .account_name .stat_acc_name, .account_name .stat_acc_date{
        font-size: 2rem;
    }
    
    .stat_balance h2, .stat_gl_rat h2, .account_name .stat_acc_date{
        font-size: 1.6rem;
    }
    
    .choose_hero_blk > li > a{
        font-size: 1.2rem;
    }
    
    .stats_hero_name{
        font-size: calc(1rem + 3vw);
    }

    .stats_hero_role{
        font-size: calc(1rem + 2vw);
    }
    
    #stats_param{
        width: 100%;
        max-width: none;
    }
    
    .stats_param_box{
        flex-direction: column;
        font-size: 1.2rem;
        margin-bottom: 0;
    }
    
    .param_filters{
        flex-direction: column;
        padding: 2% 2%;
    }
    
    .radio_block{
        width: 100%;
    }
    
    .options_block{
        width: 50%;
    }
    
    .stats_table{
        padding: 0;
    }
    
    .tank_info_content{
        width: 100%;
    }
    
    .tank_info_buttons{
        flex-direction: column;
    }
    
    .tank_info_buttons * + * {
        margin-top: 2rem;
    }
    
    .stats_table .tank_info_buttons{
        margin: 2rem 0 0;
    }
    
    .back_to_tank_filter, .tank_wallpaper_btn{
        font-size: 1rem;
    }
    
    .tank_title_box > .tank_title{
        font-size: calc(1rem + 4vw);
    }
    
}

/* Стили для мобильных телефонов */

@media (max-width: 570px){
    
    #cookie_window{
        padding: 4rem 1rem;
        font-size: 1.1rem;
    }
    
    #cookie_flex{
        flex-direction: column;
    }
    
    #cookie_btn_box{
        padding: 4rem;
    }
    
    .btn_container{
        display: block;
    }
    
    .menu{
        display: none;
    }
    
    .stats_links{
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
    }
        
    .stats_links a{
        border-bottom: 1px solid hsl(221, 100%, 5%);
    }
    
    #stats_menu_wrapper + div > .caption{
        padding: 0;
    }
    
    .stats_date_box, .stats_feed_hero, .stats_by_tank_box{
        flex-direction: column;
        font-size: 1.2rem;
        margin-bottom: 0;
    }
    
    .stats_feed_hero{
        text-align: center;
    }
    
    #stats_date{
        font-size: 1.4rem;
    }
    
    .generated_stats_feed_activity_ajax, .generated_stats_ajax, .generated_rankings_stats_ajax, .generated_stats_by_tank_ajax{
        padding-bottom: 50%;
    }
    
    #header{
        display: none;
    }
    
    #navbar{
        display: flex;
        align-items: center;
    }
    
    #navibar_mobile_title, #banner_mobile{
        display: block;
    }
    
     #banner_mobile{
        position: relative;
    }
    
    .mbl_banner_text{
        position: absolute;
        bottom: 4%;
        right: 2%;
        color: whitesmoke;
        font-size: 2rem;
        font-weight: 600;
        padding: 0.6rem;
        text-shadow: 6px -4px 5px black;
        letter-spacing: 0.1rem;
    }
    
    h2{
        text-align: center;
        color: goldenrod;
        font-family: Rusfont_Italic, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
        font-size: 2rem;
        padding: 2rem 0;
    }
    
    .statbox{
        margin: 4%;
    }
    
    .bgimg-7{
        background-position-x: 85%;
    }
    
    .caption h2{
        text-align: center;
        text-indent: 0;
    }
    
    .account_header h2{
        padding: 0;
    }
    
    .caption p, .footer{
        font-size: 1rem;
    }
    
    .yesterday_summary{
        font-size: 1rem;
        text-align: left;
    }
    
    p.dateinfo .text_accent1{
        font-size: 1.2rem;
    }
    
    .generated_stats_ajax .text_accent1, .generated_stats_feed_activity_ajax .text_accent1{
        font-size: 1.2rem;
    }
    
    .text_accent1{
        font-size: 1.4rem;
    }
    
    .text_accent2{
        font-size: 1rem;
    }
    
    .daily_event{
        padding: 2% 0;
    }
    
    .tanks_col_nickname, .tanks_col_value{
        font-size: 1.1rem;
    }
    
    .req_list li:before{
        top: -0.4vw;
    }
        
    .headerbar_container{
        margin-left: 0;
        display: none;
        padding-top: 0.4em;
    }
    
    .title_container{
        padding:0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .stat_balance h2, .stat_gl_rat h2{
        font-size: 1.6rem;
    }
    
    .stat_acc_role{
        font-size: 1rem
    }
    
    .account_header{
        flex-direction: column;
        padding: 1.6rem 0.4rem;
        align-items: center;
    }
    
    .caption .acc_day_stats_block p{
        text-indent: 0;
    }
    
    .newsfeed_block h2{
        padding: 0.6em 1em;
        text-align: center;
        flex-direction: column;
    }
    
    .statsfeed_block h2, .stats_date_box, .loginform h2, .stats_feed_hero, .stats_by_tank_box{
        padding: 10% calc(11vw);
    }
    
    .general_stats{
        padding: 3%;
        font-size: 1rem;
        justify-content: left;
    }
    
    .stats_date_box, .stats_feed_hero, .stats_param_box, .stats_by_tank_box{
        padding: 10% calc(11vw);
    }
    
    .title_container div + div h2{
        padding-top: 0em;
    }
    
    .statsfeed_block .article_title {
        padding: 0.4em calc(11vw);
        font-size: 1.2rem;
    }
    
    .img_wrapper img {
        width: 3rem;
        height: 3rem;
    }
    
    .event_desc .dateinfo{
        text-indent: 0;
    }
    
    .event_desc {
        margin: 0 1em;
    }
    
    .account_name{
        align-self: center;
    }
    
    .account_name .stat_acc_name, .account_name .stat_acc_date{
        font-size: 2rem;
        padding-top: 1rem;
    }
    
    .join_clan_btn p span.btn_text{
        font-size: 1.2rem;
    }
    
    .feedhero{
        width: 100%;
    }
    
    .stats_hero_name{
        font-size: 1.6rem;
    }

    .stats_hero_role{
        font-size: 1.2rem;
    }
    
    .options_block{
        width: 100%;
    }
    
    .tank_filters_group .tank_check_block{
        width: 100%;
        left: 0;
    }
    
    .hlt_blk{
        padding: 2% 0;
        border: none;
        border-radius: 0;
    }
    
    .tank_info_block{
        margin: 5% 0;
    }
    
    .wg_link, .parmystats_link{
        text-align: center;
    }
    
    .clan_res, .sec_clan_res{
        padding: 5% 0;
    }
    
    .res_desc{
        font-size: 1rem;
    }
    
    .generated_tank_list_ajax{
        min-height: 100vh;
        margin-bottom: 33%;
    }
}

/* Стиль для очень узких экранов, чтобы предотвратить схлопывание экранов */
@media screen and (max-height: 450px){
    
    .overlay a{
        font-size: 20px
    }
    
    .overlay .closebtn{
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
    
}