:root
{
    --bg_red: #d50000;
    --bg_dark_red: #a70000;
}

body {
    font-family: 'Museo Sans Cyrl 300';
    font-size: 13px;
    background-color: #fafafa;
}


/*============ Уведомление о номой версии =============*/
#popup{
    font-size: 16px;
    text-align: center;
    padding: 30px;
    position: fixed;
    bottom: 0;
    height: 180px;
    width: 100%;
    background-color: #e9d254;
    z-index: 999999;
}

#popup .b-pop-header {
    font-size: 23px;
    font-family: 'Museo Sans Cyrl 700';
}

#popup .b-pop-main a {
    color: var(--bg_red);
    border-bottom: 0.5px solid var(--bg_red);
}


#popup .b-pop-btn__close {
    font-size: 18px;
    border: 1px solid var(--bg_red);
    margin-left: auto;
    margin-right: auto;
    width: 170px;
    padding: 10px 30px;
    border-radius: 6px;
    margin-top: 15px;
    background-color: var(--bg_red);
    color: white;
    text-align: center;
    cursor: pointer;
}











/*=== Стили для заголовков ===*/
h1,h2,h3,h4 {
    font-family: 'Museo Sans Cyrl 900';
    font-weight: 700;
}

button {
    font-family: 'Museo Sans Cyrl 700';
    border: 0;
    outline-style: none;
}

a {text-decoration: none;}

/*
.b-preloader-bg {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0; 
    right: 0; 
    bottom: 0; 
    background: #ffffffcc; 
    z-index: 1001;
}
*/


/*--- Views of preloader --*/
/*#hellopreloader_preload{
    position: fixed;
    z-index: 99999;
    top: 40%;
    width: 120px;
    height: 120px;
    background: #dc312cf0 url(http://hello-site.ru//main/images/preloads/tail-spin.svg) center center no-repeat;
    background-size:77px;
    border-radius: 20px;
    animation-name: move_preloader;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}*/


.b-preloader-bg {
    display: flex;
    justify-content: center;
    position: fixed; /*фиксированное положение блока*/
    left: 0; /*положение элемента слева*/
    top: 0; /*положение элемента сверху*/
    right: 0; /*положение элемента справа*/
    bottom: 0; /*положение элемента снизу*/
    background: #fffffff2; /*цвет заднего фона блока*/
    z-index: 1001; /*располагаем его над всеми элементами на странице*/
}

/*--- Views of preloader --*/
#hellopreloader_preload{
    position: fixed;
    display: flex;
    z-index: 99999;
    top: 40%;
    width: 120px;
    height: 120px;
    background: #dc312cf0 center center no-repeat;
    background-size: 77px;
    border-radius: 20px;
    animation-name: move_preloader;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    align-items: center;
    justify-content: center;
    font-size: 75px;
    color: white;
    font-family: 'Museo Sans Cyrl 900';
}


 /* Standard syntax */
@-webkit-keyframes move_preloader {
    0% {transform: scale(1, 1); opacity: (1);}
    10% {transform: scale(0.8, 0.8);}
    15% {transform: scale(1, 1);}
    20% {transform: scale(0.8, 0.8);}
    100% {transform: scale(100, 100), opacity: (0);}
}

/*grid*/
/*ball-triangle*/
/*tail-spin*/
/*puff*/

/*===================================*/



/*@media(max-width: 425px){
    #hellopreloader_preload{}
}*/

.move_line {
    display: none;
    color: #e04444;
    background-color: var(--bg_red);
    content: "";
    height: 2px;
    border-radius: 5px;
    -moz--transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
	
	/*width: 50px;*/
    /*transform: translate(41px, -1.5px);*/
}



@media(max-width: 768px){
	#sticky_month .move_line {
		display: none;
	}
}


.tab_menu_item {
    cursor: pointer;
}



/*=== Стили для оформления ===*/




/*=== Стили размещения контента ===*/
    .middle-xs {
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
    }
    .center {
        text-align: center;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .full_wdth{
        width: 100%;
    }





/*=== Стили размещения текста ===*/
    .alg_center {
        text-align: center;
    }




/*=== Жирность текста ===*/
    .fw__300 {
        font-family: 'Museo Sans Cyrl 300';
        font-weight: 300;
    }
    .fw__500 {
        font-family: 'Museo Sans Cyrl 500';
        font-weight: 500;
    }
    .fw__700 {
        font-family: 'Museo Sans Cyrl 700';
        font-weight: 700;
    }
    .fw__900 {
        font-family: 'Museo Sans Cyrl 900';
        font-weight: 900;
    }





/*=== Тени для контента ===*/
    .box_shadow {
        -webkit-box-shadow: 0 5px 20px rgba(38, 50, 56, 0.35);
        -moz-box-shadow: 0 5px 20px rgba(38, 50, 56, 0.35);
        box-shadow: 0 5px 20px rgba(38, 50, 56, 0.35);
    }





/*=== Стили цвета текста ===*/
    .red_font {
        color: #d50000;
    }




/*== Сохоанение пропорций картинки ===*/
    .square_today_event {
        position: relative;
        width: 100%;
        height: 210px;
        margin-bottom: 30px;
        padding-top: 75%; /* 4:3 Aspect Ratio */
    }
    .square_sm_img {
        position: relative;
        width: 100%;
        padding-top: 67%; /* 4:3 Aspect Ratio */
    }
    .square_sm_img_2 {
    	position: relative;
    	width: 100%;
    	padding-top: 100%;
    }
    .square_sm_img_3 {
        position: relative;
        width: 100%;
        padding-top: 10%;
    }
    .square_lg_img {
        overflow: hidden;
        position: relative;
        width: 100%;
        padding-top: 56%;
    }
    .square_lg_img_2 {
        position: relative;
        width: 100%;
        padding-top: 100%;
    }
    .square_lg_img_2 div, .square_sm_img_2 div {
        border-radius: 100%;
        box-shadow: none;
    }




/*=== Хлебные крошки ===*/
    .breadcrumb {
        background-color: none;
    }





/*=== Расположение блоков и контента ====*/
    .pd-r-0_5 {padding-right: 0.5rem;}

    .mg_top_bot_5 {margin: 5px 0;}





/*==== BOT margin =======*/
    .rem-bot-3 {margin-bottom: 3rem;}

    .rem-bot-4 {margin-bottom: 4rem;}

    .rem-bot-5 {margin-bottom: 5rem;}

    .rem-bot-6 {margin-bottom: 6rem;}

    .mg_bot_5 {margin-bottom: 5px;}

    .mg_bot_10 {margin-bottom: 10px;}

    .mg_bot_15 {margin-bottom: 15px;}

    .mg_bot_20 {margin-bottom: 20px;}

    .mg_bot_30 { margin-bottom: 30px;}

    .mg_bot_40 { margin-bottom: 40px;}



    
/*==== TOP margin ======*/
    .mg_top_10 {margin-top: 10px;}

    .mg_top_20 {margin-top: 20px;}

    .mg_top_30 { margin-top: 30px;}





/*=== Эффектное появление блока ===*/
    .hid {
        image-rendering: pixelated;
        opacity: 0;
        transform: translate(0, 20px);
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }


    #sticky_month{
        /*display: flex;*/
        /*position: fixed;*/
        justify-content: space-between;
        flex-wrap: wrap;
        background-color: white;
        padding: 15px;
        opacity: 0;
        top: -100px;
        transition: all 0.2s ease-in-out;
        margin: 0;
        border-bottom-left-radius: 4px;        
        border-bottom-right-radius: 4px;        
    }

    #sticky_month ul {
        display: flex;
        justify-content: space-between;
    }

    #sticky_month span a {
        font-size: 11px;
        transition: all 0.3s ease-in-out;
    }

     #sticky_month .active {
        color: var(--bg_red);
        font-size: 11.5px;
        border: 0;
    }

   /* #sticky_month span a:focus {
        color: none;
    }*/


	.table-condensed>thead>tr>th, 
	.table-condensed>tbody>tr>th, 
	.table-condensed>tfoot>tr>th, 
	.table-condensed>thead>tr>td, 
	.table-condensed>tbody>tr>td, 
	.table-condensed>tfoot>tr>td{
	    padding: 5px;
	}







/*=== Scroll botton ===*/
    .scrollup{
        position: fixed;
        bottom: -10%;
        right: 45px;
        float: right;
        display: inline-block;
        z-index: 99999px;
        transition: all 0.3s ease-in-out;
    }


    .up_btn {
        width: 55px;
        height: 55px;
        opacity: 0.85;
        cursor: pointer;
        background: var(--bg_red);
        border-radius: 50%;
        position: relative;
    }



    .up {
        width: 12px;
        height: 12px;
        border-left: 3px solid white;
        border-top: 3px solid white;
        position: absolute;
        /*top: 35px;*/
        left: 21.5px;
        /*opacity: 0;*/
        /*transform-origin: 50% 50%;  */
        transform: rotate(45deg);
        /*transition: all 0.5s ease-in-out;*/

        /* Standard syntax */
        animation-name: move_arrow;
        animation-duration: 1.8s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }


    @-webkit-keyframes move_arrow {
        0% {top: 35px; opacity: 0;}
        25% {opacity: 0.8;}
        50% {opacity: 1;}
        75% {opacity: 0.8;}
        100% {top: 10px; opacity: 0;}
    }

/*    @keyframes move_arrow {
        0% {top: 35px; opacity: 0;}
        25% {opacity: 0.8;}
        50% {opacity: 1;}
        75% {opacity: 0.8;}
        100% {top: 10px; opacity: 0;}
    }*/

    .up_btn:hover {
        background-color: var(--bg_dark_red);
    }

    @media(max-width: 768px){
        /*.up_btn{
            display: none;
        }*/
    }

/*============================================*/






/*==== Изменение стилей под размер экрана ====*/

    @media(max-width: 425px){
        .table-condensed>thead>tr>th, 
        .table-condensed>tbody>tr>th, 
        .table-condensed>tfoot>tr>th, 
        .table-condensed>thead>tr>td, 
        .table-condensed>tbody>tr>td, 
        .table-condensed>tfoot>tr>td{
            padding: 10px;
        }
    }


    @media (max-width: 1199px){
        .menue_block {
            letter-spacing: 0.9px;
        }
        .menue_block:first-child{
        }
        .side_block {
            padding-left: 20px;
            padding-right: 20px;
        }
        .today_born_cont_box {
            height: 141px;
        }
        .square_today_event {
            height: 100%;
            padding-top: 85%;
        }

        
        /* 1.1.1  Измененные стили кнопки вверх */
        .scrollup {
            right: 0;
        }
        .scrollup .up_btn {
            width: 40px;
            height: 40px;
        }
        .scrollup .up_btn .up {
            width: 8px;
            height: 8px;
            left: 16px;
        }


        /* 1.2 Оформление выпадающего списка городов*/
        .bot-cont {
        }
        .today_title {
            width: 85%;
        }
        .weather {
            width: 200px;
        }


        .table-condensed>thead>tr>th, 
        .table-condensed>tbody>tr>th, 
        .table-condensed>tfoot>tr>th, 
        .table-condensed>thead>tr>td, 
        .table-condensed>tbody>tr>td, 
        .table-condensed>tfoot>tr>td{
            padding: 3px;
        }

        .menue_block {
            letter-spacing: 0.9px;
        }
    }





    @media (max-width: 991px){
        #header__section {
            padding-top: 20px;
        }
        .srch-inp input {
            width: 86%;
            padding-left: 4%;
        }
         .mb_bot_mg {
            height: 130px;
        }
        .today_born_cont_box {
            height: 180px;
        }
        .square_today_event {
            padding-top: 61%;
        }
       /* .square_lg_img {
            padding-top: 44.5%;
        }*/
        .copyright {
            padding-top: 45px;
        }
        .bot_logo_box {
            width: 71%;
        }
    }



    @media (max-width: 768px){
        h1 {
            font-size: 33px;
        }
        h2 {
            font-size: 24px;
        }
        h3 {
            font-size: 20px;
        }
        .mid_block {
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .srch-inp input {
            width: 85%;
        }
        .menue_block a:after {
            transform:translateY(19px);
        }
        .square {
            padding-top: 62.5%;
        }
        .today_title {
            font-size: 20px;
        }
        .mb_bot_mg {
            height: 100%;
        }
        .no_mg {
            margin-top: 0;
        }
        .weather {
            margin-left: 20px;
        }
        .square_today_event {
            padding-top: 55%;
            margin-bottom: 20px;
        }
        .moon_box {
            width: 71.4%;
            padding-top: 71.5%;
            margin-left: 36px;
        }
    }





    @media (max-width: 430px) {
        #header__section {
            padding-top: 10px;
        }
        #main__section {
            margin-bottom: 0px;
        }
        .menu_logo {
            margin-top: 5px;
            margin-left: 15px;
            height: 40px;
            width: 45px;
            display: block;
        }
        .srch-inp input {
            width: 86%;
        }

        .main_cont {
            margin-top: 0;
        }
        .title {
            font-size: 33px;
        }
        .today_title {
            font-size: 20px;
        }
        .today_position {
        }
        .bot_logo_box {
            width: 88%;
        }
        .square_today_event {
            padding-top: 61%;
            margin-bottom: 30px;
        }
        .f_sm_txt {
            font-size: 11px;
        }
        .f_md_txt {
            font-size: 10px;
        }
        .site_map {
            padding-top: 59px;
        }
    }





    @media (max-width: 375px) {
        #header__section {
            padding-top: 10px;
        }
        #main__section {
            margin-bottom: 0;
        }
        .srch-inp input {
            width: 84%;
        }
        .menu_logo {
            margin-top: 5px;
            margin-left: 15px;
            height: 40px;
            width: 45px;
            display: block;
        }
        .title {
            font-size: 30px;
        }
        .today_born_name {
            font-size: 16px;
        }
        .today_born_year {
            font-size: 14px;
        }
        .btn_view_more button {
            font-size: 10px;
        }
        .square_today_event {
            padding-top: 65%;
            margin-bottom: 30px;
        }
    }