html, body 
    {
    height: 100%;
    }
body 
    {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    background-color: #fff;
    }

* html #wrap 
    {
    height: 100%;
    }
    body #wrap 
        {
        min-height: 100%;
        width: 100%;
        margin: auto;
        position: relative;
        }



/* Variables */        
:root
    {
    --main-color: #000;
    --active-color: #ff0000;
    --violet-color: #741F93;
    --blue-color: #0782C1;
    --gray-color: #848484;
    --border-radius: 15px;
    }


/* Mobile button */
.mm_button
    {
    display: none;
    }
    
.box_click
    {
    cursor: pointer;
    }


section,
.container,
.row
    {
    position: relative;
    margin: 0 auto;
    }
section
    {
    margin: 10px auto;
    }


a
    {
    color: var(--blue-color);
    text-decoration: none;
    }
    a:hover
        {
        color: var(--active-color);
        }

p
    {
    margin-bottom: 10px;
    color: var(--main-color);
    }


/* Main elements */
h1,h2,h3
    {
    color: var(--main-color);
    margin: 15px 0 25px 0; 
    }


h1
    {
    font-size: 26px;
    color: red;
    text-align: center;
    }

h2,
.h2_like
    {
    font-size: 20px;
    font-weight: 600;
    color: red;
    text-align: center;
    }

h3.red_header
    {
    font-size: 14px;
    background: red;
    color: #fff;
    padding: 5px 10px;
    margin: 0;
    text-transform: uppercase;
    }




/* Crumbreads */
.crumbreads a 
    {
    text-decoration: none;
    font-size: 12px;
    }
    .crumbreads a:hover 
        {
        text-decoration: underline;
        }
    .crumbreads > span + span::before 
        {
        padding: 0 5px;
        color: #000;
        content: "/ ";
        }


.btn
    {
    display: block;
    padding: 5px 20px;
    margin: 20px auto;
    font-size: 14px;
    }

.field_row
    {
    
    }

input[type='text'],
textarea,
select
    {
    width: 100%;
    display: block;
    padding: 5px;
    font-size: 14px;
    font-family: 'Arial', sans-serif;
    margin: 5px 0;
    box-sizing: border-box;
    }
textarea
    {
    height: 100px;
    }


.field_row.flex
    {
    flex-wrap: nowrap;
    gap: 5px;
    }
.field_row.flex input
    {
    width: auto;
    flex: 1 1 100%;
    }
.field_row.flex select
    {
    width: auto;
    flex: 1 1 10%;
    }


header
    {
    --header-height: 270px;
    height: var(--header-height);
    position: relative;
    background: url('/img/header_bg_dsk.jpg') bottom center repeat-x;
    }

    /* Lang bar */
    .lang_bar
        {
        position: absolute;
        right: 25px;
        top: calc(var(--header-height) - 85px);
        font-size: 18px;
        height: 70px;
        overflow: hidden;
        transition: height 0.2s ease;
        }
        .lang_bar.active
            {
            height: 250px;
            z-index: 2000;
            }
        .lang_bar a,
        .lang_bar div
            {
            display: block;
            background-color: #fff;
            padding: 12px 15px;
            border-radius: var(--border-radius) 0 var(--border-radius) 0;
            box-sizing: border-box;
            margin-bottom: 5px;
            border: 1px #e3e3e3 solid;
            cursor: pointer;
            }
            .lang_bar div
                {
                border-color: #fff;
                }
            .lang_bar a:hover,
            .lang_bar a.active
                {
                display: block;
                background-color: #e3e3e3;
                }


header .logo
    {
    position: absolute;
    top: 30px;
    left: 25px;
    background: #fff url('/img/icons/logo_icon.svg') 10px center no-repeat;
    padding: 10px 10px 10px 70px;
    border-radius: var(--border-radius) 0 var(--border-radius) 0;
    }
    header .logo h2,
    header .logo p
        {
        padding: 0;
        margin: 0;
        color: var(--violet-color);
        font-family: Times;
        font-weight: 200;
        }
    header .logo h2
        {
        font-size: 22px;
        text-transform: uppercase;
        }
        

.soc_icons_wrap
    {
    position: absolute;
    right: 25px;
    top: 30px;
    gap: 15px;
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    }
    .soc_icons_wrap .main_phone,
    .soc_icons_wrap .soc_icons
        {
        flex: 1 1 100%;
        }
    .soc_icons_wrap .main_phone
        {
        background-color: #fff;
        border-radius: var(--border-radius) 0 var(--border-radius) 0;
        display: flex;
        font-size: 16px;
        }
    .soc_icons_wrap .main_phone p
        {
        display: flex;
        padding: 15px 15px 5px 15px;
        }
    .soc_icons_wrap .main_phone p::before
        {
        display: block;
        content: '';
        width: 22px;
        height: 22px;
        background: url('/img/icons/phone.svg');
        filter: invert(100%);
        margin-right: 15px;
        }

    .soc_icons_wrap .soc_icons
        {
        display: flex;
        justify-content: space-between;
        }
        .soc_icons_wrap .soc_icons a
            {
            display: block;
            background-color: #fff;
            border-radius: var(--border-radius) 0 var(--border-radius) 0;
            padding: 10px 15px 5px 15px;
            }




header .tm
    {
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #fff;
    display: flex;
    border-radius: 0 5px 0 0;
    }
    header .tm a
        {
        display: flex;
        padding: 15px 20px;
        }
        header .tm a.active
            {
            color: var(--active-color);
            }
    header .tm a.home
        {
        display: none;
        }

    header .tm a::before
        {
        display: block;
        content: '';
        width: 20px;
        height: 20px;
        background-size: auto 100%;
        background-position: center center;
        background-repeat: no-repeat;
        margin-right: 10px;
        }
    header .tm a.active::before,
    header .tm a:hover::before
        {
        filter: brightness(0) saturate(100%) invert(24%) sepia(95%) saturate(7488%) hue-rotate(359deg) brightness(91%) contrast(122%);
        }
    header .tm a:nth-child(2)::before { background-image: url('/img/icons/id_1217.png')}
    header .tm a:nth-child(3)::before { background-image: url('/img/icons/id_1218.png')}
    header .tm a:nth-child(4)::before { background-image: url('/img/icons/id_1219.png')}
    header .tm a:nth-child(5)::before { background-image: url('/img/icons/id_1220.png')}
    header .tm a:nth-child(6)::before { background-image: url('/img/icons/id_1221.png')}

header .tm .menu_left
    {
    display: none;
    }


.main_cols
    {
    gap: 20px;
    flex-wrap: nowrap;
    }
    .main_cols .menu_left_wrap,
    .main_cols .menu_right_wrap
        {
        flex: 0 0 25%
        }
    .main_cols .content_col
        {
        flex: 1 0 45%;
        }


.menu_left
    {
    
    }
    .menu_left a
        {
        display: block;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        padding: 2px 0 2px 15px;
        color: var(--violet-color);
        
        background-image: url(data:image/gif;base64,R0lGODlhBwAHAIABAK+vr////yH5BAEAAAEALAAAAAAHAAcAAAILRGKHl+ya4pOrhgIAOw==);
        background-repeat: no-repeat;
        background-position: left center;
        }
    .menu_left a.subitem
        {
        background: none;
        color: #686868;
        padding-left: 25px;
        }
        .menu_left a.active,
        .menu_left a:hover
            {
            color: var(--active-color);
            }


.contact_block_left
    {
    margin-top: 20px;
    border-left: 10px red solid;
    }
    .contact_block_left .inner
        {
        padding: 10px;
        }

.search_module,
.module_hot_tour
    {
    margin-bottom: 20px;
    }

.menu_right_wrap
    {
    
    }
    .menu_right_wrap .item
        {
        padding: 15px 0;
        }
        .menu_right_wrap .item:not(:last-child)
            {
            border-bottom: 1px var(--gray-color) solid;
            }
        .actions_b
            {
            color: var(--violet-color);
            }
        .menu_right_wrap .item .more
            {
            color: var(--gray-color);
            }
            .menu_right_wrap .item .more:hover
                {
                color: var(--active-color);
                }


.bm .tm
    {
    text-align: center;
    border-bottom: 1px #e3e3e3 solid;
    padding: 10px 0 30px 0;
    margin: 20px 0;
    }
    .bm .tm a.home,
    .bm .tm .menu_left
        {
        display: none !important;
        }
    .bm .tm a
        {
        padding: 2px 10px;
        font-size: 14px;
        }
    .bm .tm a[class*="id_"]
        {
        border-right: 2px #000 solid;
        }
    .bm .tm a.id_1221
        {
        border: 0;
        }

    .footer_countries
        {
        text-align: center;
        margin-bottom: 40px;
        }
        .footer_countries a
            {
            font-size: 14px;
            }

footer .container
    {
    padding: 15px;
    }



/* Progress bar */
@-webkit-keyframes progress {to {background-position: 30px 0;}}
@-moz-keyframes progress {to {background-position: 30px 0;}}
@keyframes progress {to {background-position: 30px 0;}}
.barBg {width:99%;  height:15px;    border-radius: 8px; margin-bottom:5px;}
.bar {background: #7aff32;  height:30px;    height: 15px;   border-radius: 4px;}
.barFill {
    width: 100%;
    height: 15px;
    border-radius: 20px;
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.hundred {  width: 100%;}   
.cornflowerblue {   background-color: CornflowerBlue;   box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3);}



/* ============================================================================ */
/* Планшет - меньше 1200px  =================================================== */
/* ============================================================================ */
@media (max-width: 1200px) {
    
    header,
    footer,
    section
        {
        padding: 0 15px;
        }

}


/* ============================================================================ */
/* Телефон - меньше 768px   =================================================== */
/* ============================================================================ */
@media (max-width: 768px) {

:root
    {
    --border-radius: 15px;
    }

section
    {
    padding: 0;
    }

.mm_button
    {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 35px;
    padding: 8px 10px;
    cursor: pointer;
    background-color: #fff;
    border-radius: var(--border-radius) 0 var(--border-radius) 0;
    z-index: 3000;
    }
    .mm_button span 
        {
        background: var(--violet-color);
        display: block;
        height: 2px;
        width: 100%;
        margin: 6px 0;
        border-radius: 2px;
        transition: all 0.2s ease-in-out;
        }
    .mm_button.active span:nth-child(1)  { transform: translate(0, 8px) rotate(45deg)  }
    .mm_button.active span:nth-child(2)  { opacity: 0 }
    .mm_button.active span:nth-child(3)  { transform: translate(0, -8px) rotate(-45deg) }


.field_row.flex
    {
    flex-wrap: wrap;
    gap: 0px;
    }
.field_row.flex input,
.field_row.flex select
    {
    width: auto;
    flex: 1 1 100%;
    }



.main_cols
    {
    gap: 20px;
    flex-wrap: wrap;
    }
    .main_cols .menu_left_wrap,
    .main_cols .menu_right_wrap,
    .main_cols .content_col
        {
        flex: 0 0 100%
        }
    .main_cols .menu_left_wrap  { order: 1 }
    .main_cols .menu_right_wrap { order: 3 }
    .main_cols .content_col     { order: 2 }


header
    {
    padding: 0;
    --header-height: 180px;
    background-image: url('/img/header_bg_mobile.jpg');
    background-size: cover;
    }

header .logo
    {
    top: 15px;
    left: 10px;
    background: #fff url('/img/icons/logo_icon.svg') 5px center no-repeat;
    padding: 10px 10px 10px 65px;
    border-radius: var(--border-radius) 0 var(--border-radius) 0;
    }
    header .logo span
        {
        display: none;
        }

    header .logo p
        {
        font-size: 14px;
        }
    header .logo h2
        {
        font-size: 20px;
        }

.soc_icons_wrap
    {
    position: absolute;
    right: auto;
    left: 10px;
    top: 100px;
    flex-wrap: nowrap;
    width: auto;
    }
    .soc_icons_wrap,
    .soc_icons_wrap .soc_icons
        {
        gap: 10px;
        }
    .soc_icons_wrap .soc_icons
        {
        flex: 0 0 100px;
        }
        .soc_icons_wrap .soc_icons a
            {
            padding: 10px 10px 5px 10px;
            }
    .soc_icons_wrap .main_phone
        {
        background-color: var(--violet-color);
        flex: 0 0 44px;
        }
        .soc_icons_wrap .main_phone p
            {
            overflow-x: hidden;
            flex-wrap: nowrap;
            margin: 0;
            padding: 10px 12px;
            }
        .soc_icons_wrap .main_phone p a
            {
            display: none;
            }
        .soc_icons_wrap .main_phone p::before
            {
            display: block;
            content: ' ';
            flex: 0 0 25px;
            height: 25px;
            filter: none;
            margin-right: 0;
            background-size: 100% auto;
            background-repeat: no-repeat;
            }

    .lang_bar
        {
        right: 90px;
        top: -5px
        }

header .tm
    {
    display: none;
    bottom: auto;
    top: 0;
    border-radius: 0;
    z-index: 1000;
    width: 100%;
    }
    header .tm a
        {
        border-bottom: 1px var(--violet-color) solid;
        font-size: 16px;
        }
    header .tm a.home
        {
        display: block;
        padding: 20px 15px 10px 15px;
        border: 0;
        width: 100px;
        }
    header .tm a.home::before
        {
        display: none;
        }

    header .tm .menu_left
        {
        display: block;
        background-color: var(--violet-color);
        }
        header .tm .menu_left a
            {
            color: #fff;
            text-transform: none;
            font-size: 14px;
            font-weight: 400;
            background: none;
            padding: 10px 20px;
            }
        header .tm .menu_left a.subitem
            {
            font-size: 12px;
            padding: 10px 20px 10px 30px;
            background-color: #a361bc;
            }

        
        header .tm .menu_left a.active,
        header .tm .menu_left a:hover
            {
            background: var(--active-color);
            }
        header .tm .menu_left a::before
            {
            display: none;
            }
    

.menu_left_wrap .menu_left
    {
    display: none;
    }

}