/*** reset ***/

*
{
    font: inherit;

    box-sizing: border-box;
    margin: 0;
    padding: 0;

    border: 0;
}

*:before,
*:after
{
    box-sizing: inherit;
}

html,
body
{
    font-family: sans-serif;
    line-height: 1;

        -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-font-smoothing: antialiased !important;
}

audio,
canvas,
progress,
video
{
    display: inline-block;

    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section
{
    display: block;
}

audio:not([controls])
{
    display: none;

    height: 0;
}

[hidden],
template
{
    display: none;
}

a
{
    color: inherit;
    background-color: transparent;
}

a:active,
a:hover
{
    outline: none;
}

abbr[title]
{
    border-bottom: 1px dotted;
}

b,
strong
{
    font-weight: bold;
}

img
{
    border: 0;
}

ol,
ul
{
    list-style: none;
}

blockquote,
q
{
    quotes: none;
}

blockquote:before,
q:before,
blockquote:after,
q:after
{
    content: '';
    content: none;
}

article *,
article *:before,
article *:after
{
    box-sizing: border-box;
}

button,
input,
optgroup,
select,
textarea
{
    font: inherit;

    margin: 0;

    color: inherit;
    border-radius: 0;

    -webkit-appearance: none;
}

button
{
    overflow: hidden;

    border: none;
}

button,
select
{
    text-transform: none;
}

button,
html input[type='button'],
input[type='reset'],
input[type='submit']
{
    cursor: pointer;

    -webkit-appearance: button;
}

button[disabled],
html input[disabled]
{
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner
{
    padding: 0;

    border: 0;
}

input
{
    line-height: normal;
}

input[type='checkbox'],
input[type='radio']
{
    box-sizing: border-box;
    padding: 0;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
height auto,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration
{
    -webkit-appearance: none;
}

table
{
    table-layout: fixed;
    empty-cells: show;
    border-spacing: 0;
    border-collapse: collapse;
}

td,
th
{
    padding: 0;
}

[placeholder]:focus::-webkit-input-placeholder
{
    color: transparent;
}

[placeholder]:focus:-ms-input-placeholder
{
    color: transparent;
}

[placeholder]:focus::placeholder
{
    color: transparent;
}

:focus
{
    outline: none;
}

input::-ms-clear
{
    display: none !important;
}

input::-ms-reveal
{
    display: none !important;
}

/*** end-reset ***/

/*** common ***/

html,
body
{
    font-family: Open Sans, Helvetica, sans-serif;

    width: 100vw;
    height: 100%;

    color: #000;
    background: #fff;

    -webkit-overflow-scrolling: touch;
}

a
{
    text-decoration: none;
}

a:hover
{
    text-decoration: none;
}

p
{
    margin: 0;
}

.wrapper-outer
{
    overflow-x: hidden;

    width: 100%;
}

.wrapper
{
    position: relative;

    box-sizing: initial;
    width: 100%;
    min-width: 320px;
    min-height: 100%;
    min-height: 100vh;

    background: #fff;
    box-shadow: rgba(0,0,0,.3) 0 0 3rem;
}

.content
{
    position: relative;

    overflow: hidden;

    padding-bottom: 8.4rem;
}

.clear
{
    clear: both;

    height: 0;
}

.clearfix
{
    *zoom: 1;
}

.clearfix:before,
.clearfix:after
{
    line-height: 0;

    display: table;

    content: '';
}

.clearfix:after
{
    clear: both;
}

.sprite
{
    background: transparent url('../img/sprite.png') no-repeat;
}

.hidden
{
    display: none !important;
}

.fancybox-close
{
    top: 0 !important;
    right: 0 !important;

    width: 3rem !important;
    height: 3rem !important;

    color: #adadad !important;
    background-image: none !important;
}

.fancybox-inner
{
    height: auto !important;
}

.bg
{
    box-sizing: border-box;
    width: 100%;

    background: #e5e5e5;
}

.button
{
    font-family: 'DSOffi2';
    font-size: 1.5rem;
    line-height: 4.4rem;

    display: block;

    box-sizing: border-box;
    width: 100%;
    height: 4.4rem;
    margin-top: 1.5rem;

    cursor: pointer;
    text-align: center;
    text-decoration: none !important;

    color: #000;
    border-radius: .3rem;
    background: transparent;
}

.button_bg
{
    background: #f9d232;
}

.button_bg_red
{
    color: #fff;
    background: #b31736;
}

.button_disabled
{
    color: #777;
    background: #e6e6e6;
}

.button_border
{
    font-family: 'DSOfficinaSerifBook';
    line-height: 4rem;

    border: .2rem solid #f9d232;
}

.button_border_gray
{
    border-color: #e5e5e5;
}

.button_border_red
{
    border-color: #b31736;
}

.button_strong
{
    font-family: 'DSOffi2';
}

.button_left
{
    float: left;
}

.button_right
{
    float: right;
}

.button_smaller
{
    width: 48%;
}

.button_more-lines
{
    line-height: 1;

    padding: .5rem;
}

.button_margin_3
{
    margin-top: 3rem;
}

.tabs
{
    margin-bottom: 2rem;

    text-align: center;
}

.tabs__item
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.5rem;

    display: inline-table;

    box-sizing: border-box;
    width: 11.7rem !important;
    height: 4.4rem;
    margin-right: .5rem;

    cursor: pointer;
    transition: ease .2s;
    vertical-align: middle;

    color: #000;
    border: .2rem solid #f9d232;
    border-radius: .3rem;
}

.tabs__item_selected
{
    font-family: 'DSOffi2';

    background: #f9d232;
}

.tabs__item:last-child
{
    margin: 0;
}

.tabs__item .icon-tenge
{
    font-weight: bold !important;
}

.tabs__text
{
    display: table-cell;

    vertical-align: middle;
}

.tabs__tab
{
    display: none;

    margin-bottom: 3rem;
}

.tabs__tab_active
{
    display: block;
}

.tabs_underline
{
    margin-top: 1rem;
}

.tabs_underline .tabs__item
{
    font-family: 'DSOffi2';

    color: #777;
    border: none;
    border-bottom: .2rem solid transparent;
    border-radius: 0;
    background: transparent;
}

.tabs_underline .tabs__item_selected
{
    color: #000;
    border-bottom: solid .2rem #f9d232;
}

.title
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 2.2rem;
    line-height: 1.2;

    display: block;

    margin-bottom: 1rem;

    color: #000;
}

.title_align_left
{
    text-align: left;
}

.title_align_center
{
    text-align: center;
}

.title_size_smaller
{
    font-size: 1.8rem;
}

.text
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1.4rem;
    line-height: 1.3;

    color: #000;
}

.text p
{
    margin-top: 5px;
}

.text .icon-tenge
{
    font-size: 1rem;
}

.text_color_base
{
    color: #000;
}

.text_color_gray
{
    color: #777;
}

.text_size_smaller
{
    font-size: 1rem;
}

.text_size_normal
{
    font-size: 1.2rem;
    line-height: 1.8rem;
}

.text_align_left
{
    text-align: left;
}

.text_align_center
{
    text-align: center;
}

.text_margin_normal
{
    margin: 1.5rem 0;
}

.text_link_arrow
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.5rem;

    display: block;

    margin-top: 1.5rem;
}

.text_link_arrow span
{
    font-size: 2rem;

    vertical-align: middle;
}

.text_code
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.4rem;
    line-height: 1.6;

    padding: 1.5rem 0 1rem 0;

    color: #000;
}

.text_code strong
{
    font-family: 'DSOffi2';
}

.text_code span
{
    font-family: 'DSOffi2';
    line-height: 2.6rem;

    display: inline-block;

    height: 2.6rem;
    margin: 0 .5rem;
    padding: 0 .8rem;

    border-radius: 1.5rem;
    background: #f9d232;
}

.checkbox
{
    position: relative;

    width: 2.2rem;
    height: 2.2rem;
}

.checkbox__icon,
.checkbox__input
{
    position: absolute;
    top: 0;
    left: 0;

    width: 2.2rem;
    height: 2.2rem;
}

.checkbox__icon
{
    z-index: 3;
}

.checkbox__icon:before
{
    font-size: 2.2rem;

    position: absolute;
    top: 0;
    left: 0;

    content: '\e915';

    color: #e5e5e5;
}

.checkbox__input
{
    z-index: 5;

    cursor: pointer;

    opacity: 0;
}

.checkbox__input:checked ~ .checkbox__icon:before
{
    content: '\e91a';

    color: #f9d232;
}

.radio
{
    position: relative;

    width: 100%;
    height: 2.2rem;
    padding-left: 2.5rem;
}

.radio__icon,
.radio__input
{
    position: absolute;
    top: 0;
    left: 0;

    width: 2.2rem;
    height: 2.2rem;
}

.radio__icon
{
    z-index: 3;
}

.radio__icon:before
{
    font-size: 2.2rem;

    position: absolute;
    top: 0;
    left: 0;

    content: '\e915';

    color: #e5e5e5;
}

.radio__input
{
    z-index: 5;

    cursor: pointer;

    opacity: 0;
}

.radio__input:checked ~ .radio__icon:before
{
    content: '\e91a';

    color: #f9d232;
}

.radio__label
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1.4rem;
    line-height: 2.2rem;

    display: block;

    cursor: pointer;
    white-space: nowrap;

    color: #777;
}

.radio_rules
{
    height: auto !important;
    padding: 0;
}

.radio_rules .radio__label
{
    line-height: 2rem;

    float: left;

    max-width: 22rem;
}

.radio_rules .radio__input,
.radio_rules .radio__icon
{
    right: 0;
    left: initial;
}

.preloader
{
    display: block;
}

.preloader_normal
{
    width: 3rem;
    height: 3rem;
    margin: 3rem auto;

    background: url('../img/spinner_30x30.gif') center center no-repeat;
    background-size: contain;
}

.preloader_big
{
    width: 6rem;
    height: 6rem;
    margin: 1.5rem auto 0 auto;

    background: url('../img/spinner_60x60.gif') center center no-repeat;
    background-size: contain;
}

.vip-img
{
    display: block;

    width: 12rem;
    margin: 0 auto;
}

/*** end-common ***/

.artist
{
    box-sizing: border-box;
}

.artist_block .artist__name
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.8rem;

    display: block;
    overflow: hidden;

    padding: 1.5rem 0;

    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: #000;
}

.artist_block .artist__preview
{
    width: 6rem;
    height: 6rem;
    margin: 0 auto 1.5rem auto;
}

.artist_block .artist__preview img
{
    width: 100%;
    height: 100%;

    border-radius: 3rem;
}

.artist_block .artist__genres
{
    margin-bottom: 1.5rem;

    text-align: center;
}

.artist_block .artist__genre
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6rem;

    display: inline-block;

    height: 1.8rem;
    margin: 0 .5rem 1rem .5rem;

    color: #777;
    border: .1rem solid #e5e5e5;
    border-radius: .3rem;
}

.artist_block .artist__genre a
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1rem;

    width: 100%;
    height: 100%;
    padding: .1rem 1.2rem;

    color: #777;
}

.artist_block .artist .melodies,
.artist_block .artist .channels
{
    margin-bottom: 3rem;
}

.artist_block .artist .channels
{
    margin-top: -1.5rem;
}

.artist_line
{
    width: 100%;
    height: 6rem;
    margin-bottom: 1rem;
    padding-left: 3.5rem;
}

.artist_line .artist__preview
{
    float: left;

    width: 21%;
    margin: 0;
}

.artist_line .artist__img
{
    width: 6rem;
    height: 6rem;

    border-radius: 6rem;
}

.artist_line .artist__info
{
    float: right;

    width: 72%;
    padding: 1rem 0;
}

.artist_line .artist__name,
.artist_line .artist__count
{
    display: block;
    overflow: hidden;

    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.artist_line .artist__name
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.8rem;

    color: #000;
}

.artist_line .artist__count
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1.4rem;

    margin-top: .4rem;

    color: #777;
}

.authorization
{
    padding: 1rem 0 3rem 0;
}

.authorization__get-pass
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.5rem;

    display: block;

    margin: 1.5rem 0;

    text-align: center;

    color: #000;
}

.authorization__get-pass span
{
    font-size: 2rem;

    vertical-align: middle;
}

.authorization__offer
{
    line-height: 1.5;

    margin-top: 1.5rem;
}

.authorization__offer a
{
    font-weight: 700;

    color: #f9d232;
}

.authorization__offer .icon-tenge
{
    font-size: .75rem !important;
}

.basic-melody
{
    font-family: Open Sans, Helvetica, sans-serif;

    position: relative;

    box-sizing: border-box;
    height: 5rem;
}

.basic-melody__play
{
    display: block;
    float: left;

    width: 21%;
    padding-top: .8rem;

    text-align: center;
}

.basic-melody__play a
{
    color: #f9d232;
}

.basic-melody__play_active .icon-play-in-canal:before
{
    content: '\e918' !important;
}

.basic-melody__info
{
    line-height: 1.3;

    display: block;
    float: left;

    box-sizing: border-box;
    width: 79%;
    height: 100%;
    padding: .7rem 0;

    border-bottom: #ededed solid .1rem;
}

.basic-melody:last-child .basic-melody__info
{
    border: none;
}

.basic-melody__name
{
    font-size: 1.5rem;
    font-weight: bold;

    display: block;

    color: #000;
}

.basic-melody__artist
{
    font-size: 1rem;

    display: block;

    color: #777;
}

.basic-melody__name,
.basic-melody__artist
{
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.basic-melody_playing
{
    z-index: 10;

    margin-top: -.1rem;

    border: .2rem solid #f9d232;
}

.basic-melody_playing .basic-melody__info
{
    border: none;
}

.channels
{
    width: 26rem;
    margin: 0 auto -2.5rem auto;
}

.channels .channel
{
    float: left;

    margin: 0 .5rem 2.5rem .5rem;
}

.channel
{
    display: block;

    width: 12rem;
}

.channel__info
{
    height: 4rem;

    text-align: center;
}

.channel__name
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.5rem;

    width: 100%;

    text-align: center;

    color: #000;
}

.channel__count
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1rem;

    color: #777;
}

.channel__name,
.channel__count
{
    line-height: 1.4;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.channel__preview
{
    display: block;

    width: 12rem;
    height: 12.6rem;
}

.channel__before-preview
{
    width: 100%;
}

.channel__before-preview:before
{
    display: block;

    width: 10.8rem;
    height: .3rem;
    margin: 0 auto;

    content: '';

    background: #e8e8e8;
}

.channel__before-preview:after
{
    display: block;

    width: 11.4rem;
    height: .3rem;
    margin: 0 auto;

    content: '';

    background: #d4d4d4;
}

.channel__img
{
    width: 12rem;
    height: 12rem;
}

.channel__separator
{
    float: right;

    width: 7.3rem;
    height: .1rem;

    background: #e5e5e5;
}

.channel__actions
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1rem;

    display: table;

    box-sizing: border-box;
    width: 100%;

    color: #777;
    border: .1rem solid #e5e5e5;
}

.channel__actions .action
{
    display: block;

    height: 3.4rem;

    cursor: pointer;
}

.channel__actions .action__icon
{
    float: left;

    width: 4.5rem;

    text-align: center;

    color: #777;
}

.channel__actions .action__text
{
    float: left;

    width: 7.3rem;
    margin-top: 1.1rem;
}

.channel__actions .action_buy .action__text
{
    margin-top: .7rem;
}

.channel__actions .action__name
{
    font-size: 1rem;

    color: #777;
}

.channel__actions .action__price
{
    font-size: .7rem;
    line-height: 1.5;
}

.channel__actions .action__price_tenge
{
    font-size: .5rem;
}

.channel__actions .action__icon,
.channel__actions .action__name,
.channel__actions .action__price
{
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.channel__actions .action_fav .icon-music_btn_fav_active
{
    color: #f9d232;
}

.channel_buy
{
    width: 100%;
    margin: 1.5rem 0 2.5rem 0;
}

.channel_buy .channel__preview
{
    float: left;

    width: 12rem;
}

.channel_buy .channel__info
{
    position: relative;

    float: right;

    width: 45%;
    height: 12.6rem;
    margin-left: 1.2rem;

    text-align: left;
}

.channel_buy .channel__description
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1rem;

    color: #777;
}

.channel_buy .channel__listen
{
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
}

.footer
{
    position: absolute;
    z-index: 5;
    bottom: 0;

    box-sizing: border-box;
    width: 100%;
    height: 8.4rem;
    padding-top: 2.5rem;

    background: #e5e5e5;
}

.footer .logo
{
    font-family: 'DSOffi2';
    font-size: 2rem;

    text-align: center;

    color: #adadad;
}

.footer .copyright
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1rem;
    line-height: 2;

    text-align: center;

    color: #adadad;
}

.form
{
    width: 100%;
}

.form__element
{
    position: relative;

    display: block;

    margin-top: 1.5rem;
}

.form__element_margin_more
{
    margin-top: 2.5rem;
}

.form__element_border
{
    margin-top: 0;
    padding: 1.7rem 0;

    border-bottom: solid 1px #e5e5e5;
}

.form__label
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.5rem;

    display: block;

    margin-bottom: 1rem;

    color: #000;
}

.form__input
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 2.2rem;

    display: block;

    box-sizing: border-box;
    width: 100%;
    height: 4.4rem;
    padding: .5rem 2rem;

    color: #000;
    border-radius: .3rem;
    background: #fff;
}

.form__input_border
{
    border: .16rem solid #e5e5e5;
}

.form__input_alert
{
    border: .16rem solid #b31736;
}

.form__alert
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1.2rem;

    position: absolute;
    z-index: 10;
    top: 8rem;

    display: none;

    box-sizing: border-box;
    width: 100%;
    padding: 1.6rem 1.2rem;

    text-align: center;

    color: #fff;
    border-radius: .3rem;
    background: #b31736;
}

.form__alert:before
{
    position: absolute;
    top: -1rem;

    content: '';

    border-right: 1rem solid transparent;
    border-bottom: 1rem solid #b31736;
    border-left: 1rem solid transparent;
}

.form__submit
{
    margin-top: 2.1rem;
}

.form_lk .form__label
{
    font-family: Open Sans, Helvetica, sans-serif;
}

.form_playing-rules
{
    margin-bottom: 3rem;
}

.genres
{
    width: 26rem;
    margin: 0 auto;
}

.genres .genre
{
    display: block;
    float: left;

    width: 12rem;
    margin: 0 .5rem 1rem .5rem;
}

.genres .genre__preview
{
    overflow: hidden;

    width: 12rem;
    height: 12rem;
}

.genres .genre__preview img
{
    display: block;
    float: left;

    width: 6rem;
    height: 6rem;
}

.genres .genre__info
{
    box-sizing: border-box;
    padding: .5rem 1.1rem;

    text-align: center;

    border: .1rem solid #e5e5e5;
}

.genres .genre__name
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.5rem;

    color: #000;
}

.genres .genre__count
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1rem;

    color: #777;
}

.genres .genre__name,
.genres .genre__count
{
    line-height: 1.5;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.header
{
    position: relative;

    box-sizing: border-box;
    height: 5rem;
    padding-top: .6rem;

    background: #212121;
}

.header .languages
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.9rem;

    position: absolute;
    z-index: 10;
    left: .6rem; /*width: 5.8rem*/

    overflow: hidden;

    height: 3.8rem;

    cursor: pointer;
    transition: ease .2s;
    white-space: nowrap;

    border-radius: .2rem;
}

.header .languages .language
{
    position: relative;

    padding: 1rem .9rem;

    cursor: pointer;

    color: #fff;
}

.header .languages .language_active
{
    cursor: pointer;

    color: #adadad;
}

.header .languages .language_active span
{
    font-size: 1.5rem;

    margin-right: -.2rem;
    margin-left: .2rem;

    vertical-align: middle;
}

.header .languages .language_active:after
{
    position: absolute;
    bottom: 0;
    left: .9rem;

    display: block;

    width: calc(100% - 1.8rem);
    height: .1rem;

    content: '';
    cursor: default;

    background: #000;
}

.header .languages_opened
{
    height: 7.6rem;

    background: #f9d232;
}

.header .languages_opened .language_active
{
    color: #000;
}

.header .search
{
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;

    width: 100%;
    height: 9.4rem;
    padding: 1.8rem 3.5rem 0 3.5rem;

    background: #000;
}

.header .search-open,
.header .search__close
{
    position: absolute;
    z-index: 101;
    top: .8rem;
    right: 1rem;

    width: 3.2rem;
    height: 3.2rem;

    cursor: pointer;

    color: #aeaeae;
}

.header .search__input
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 2.2rem;

    box-sizing: border-box;
    width: 100%;
    height: 3rem;
    padding: .4rem .5rem .4rem 0;

    color: #fff;
    border-bottom: .1rem solid #adadad;
    background: transparent;
}

.header .search__options
{
    display: table;

    width: 100%;
    height: 4rem;

    text-align: center;
}

.header .search__option
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.5rem;

    display: table-cell;

    cursor: pointer;
    vertical-align: middle;

    color: #fff;
}

.header .search__option_active
{
    font-family: 'DSOffi2';

    color: #f9d232;
}

.header .search__option:first-child
{
    text-align: left;
}

.header .search__option:last-child
{
    text-align: right;
}

.header .logo
{
    font-family: 'DSOffi2';
    font-size: 1.9rem;
    line-height: 3.8rem;

    text-align: center;

    color: #fff;
}

.header .logo span
{
    color: #f9d232;
}

[class^='icon-'],
[class*=' icon-'],
.icon
{
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    font-size: 3rem;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1; /* Better Font Rendering =========== */

    text-transform: none;

    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-tenge:before
{
    content: '\e90a';
}

.icon-arrow_up:before
{
    content: '\e908';
}

.icon-delta:before
{
    content: '\e906';
}

.icon-menu_search:before
{
    content: '\e900';
}

.icon-music_btn_buy:before
{
    content: '\e904';
}

.icon-music_btn_fav:before
{
    content: '\e913';
}

.icon-music_btn_fav_active:before
{
    content: '\e914';
}

.icon-unactive:before
{
    content: '\e915';
}

.icon-arrow_left:before
{
    content: '\e901';
}

.icon-arrow_right:before
{
    content: '\e902';
}

.icon-btn_close:before
{
    content: '\e903';
}

.icon-btn_menu:before
{
    content: '\1f30a';
}

.icon-btn_more:before
{
    content: '\e905';
}

.icon-left_menu_about:before
{
    content: '\e907';
}

.icon-left_menu_canal:before
{
    content: '\e909';
}

.icon-left_menu_genres:before
{
    content: '\e90b';
}

.icon-left_menu_home:before
{
    content: '\e90d';
}

.icon-left_menu_peronal:before
{
    content: '\e90f';
}

.icon-left_menu_vip:before
{
    content: '\e910';
}

.icon-menu_arrow:before
{
    content: '\e912';
}

.icon-music_btn_vip:before
{
    content: '\e917';
}

.icon-pause_on_img:before
{
    content: '\e918';
}

.icon-personal_music_active:before
{
    content: '\e91a';
}

.icon-personal_music_bin:before
{
    content: '\e91b';
}

.icon-play-in-canal:before
{
    content: '\e91c';
}

.icon-play_on-img:before
{
    content: '\e91d';
}

.icon-rule_playing_edit:before
{
    content: '\e91e';
}

/*** main ***/

/*** end-main ***/

.melody
{
    font-family: Open Sans, Helvetica, sans-serif;

    position: relative;

    overflow: hidden;

    height: 7.4rem;
    padding-left: 1.5rem;
}

.melody__preview
{
    position: relative;

    float: left;

    width: 20%;
    height: 5rem;
    margin: 1.2rem 0;

    cursor: pointer;
}

.melody__preview img
{
    border: 0;
}

.melody__img
{
    display: block;

    width: 5rem;
    height: 5rem;

    border: none;
    background: #e5e5e5;
}

.melody__play
{
    position: absolute;
    top: 0;
    left: 0;

    box-sizing: border-box;
    width: 5rem;
    height: 5rem;
    padding-top: 1rem;
    padding-left: 1rem;

    text-align: left;

    color: #f9d232;
}

.melody__play_active
{
    background: rgba(0,0,0,.5);
}

.melody__play_active:before
{
    content: '\e918' !important;
}

.melody__vip-icon
{
    position: absolute;
    z-index: 9;
    top: -1.2rem;
    right: -1.2rem;

    width: 2.2rem;
    height: 2.2rem;

    background: url('../img/vip-icon.png') center center no-repeat;
    background-size: cover;
}

.melody__info
{
    line-height: 1.3;

    position: relative;

    float: right;

    box-sizing: border-box;
    width: 80%;
    height: 7.4rem;
    padding-left: .5rem;

    text-align: left;

    border-top: #ededed solid .1rem;
}

.melody__description
{
    position: relative;

    width: 100%;
    padding: 2rem 0;
}

.melody:last-child .melody__info
{
    border-bottom: #ededed solid .1rem;
}

.melody:last-child .melody__info .actions,
.melody:last-child .melody__info .actions__open
{
    height: 7.2rem !important;
}

.melody__name
{
    font-size: 1.5rem;
    font-weight: bold;

    display: block;

    color: #000;
}

.melody__artist
{
    font-size: 1rem;

    display: block;

    color: #777;
}

.melody__name,
.melody__artist
{
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.melody_playing
{
    z-index: 10;

    margin-bottom: -.1rem;

    border: .2rem solid #f9d232;
}

.melody_playing .melody__info
{
    border: none;
}

.melody_standard .melody__description
{
    padding-right: 8rem;
}

.melody_standard .melody__info
{
    width: 80%;
}

.melody_standard .melody__info .actions
{
    position: absolute;
    top: 0;
    left: calc(100% - 8rem);

    display: block;
    overflow: hidden;

    width: 100%;
    height: 7.3rem;

    transition: ease .3s;

    background: #f9f9f9;
}

.melody_standard .melody__info .actions_active
{
    left: 0;

    box-shadow: inset rgba(0,0,0,.07) -.1rem .1rem .4rem;
}

.melody_standard .melody__info .actions_active .actions__open
{
    color: #f9d232 !important;
}

.melody_standard .melody__info .actions__open
{
    line-height: 7.4rem;

    position: relative;

    float: left;

    width: 8rem;
    height: 7.3rem;

    cursor: pointer;
    text-align: center;

    color: #777;
    background: #fff;
    box-shadow: rgba(0,0,0,.07) .3rem .1rem .4rem;
}

.melody_standard .melody__info .actions__open:before
{
    height: 100%;
}

.melody_standard .melody__info .actions__open:hover
{
    cursor: pointer;
}

.melody_standard .melody__info .actions__arrow
{
    font-size: 1.5rem;
    line-height: 7.4rem;

    position: absolute;
    z-index: 5;
    top: 0;
    right: .3rem;

    display: block;

    width: 1.2rem;
    height: 7.2rem;
    margin-right: -1.2rem;

    color: #fff;
    text-shadow: rgba(0,0,0,.07) .3rem .1rem .4rem;
}

.melody_standard .melody__info .actions__wrapper
{
    position: relative;
    z-index: 3;

    float: left;

    width: calc(100% - 8rem);
    height: 7.2rem;

    text-align: right;
}

.melody_standard .melody__info .actions__wrapper .action
{
    position: absolute;
    top: 1.2rem;

    text-align: center;
}

.melody_standard .melody__info .actions__wrapper .action__icon
{
    color: #777;
}

.melody_standard .melody__info .actions__wrapper .action__text
{
    font-size: 1rem;

    color: #777;
}

.melody_standard .melody__info .actions__wrapper .action_fav
{
    left: 50%;
}

.melody_standard .melody__info .actions__wrapper .action_fav .icon-music_btn_fav_active
{
    color: #f9d232;
}

.melody_standard .melody__info .actions__wrapper .action_buy
{
    left: 10%;
}

.melody_buy
{
    padding: 0;
}

.melody_buy .melody__info
{
    width: 18.5rem;

    border: none;
}

.melody_extension .melody__info
{
    padding-right: 11.7rem;
}

.melody_extension .melody__actions
{
    font-family: 'DSOffi2';
    font-size: 1.2rem;

    position: absolute;
    z-index: 10;
    top: 50%;
    right: 1.1rem;

    display: block;

    box-sizing: border-box;
    width: 10rem;
    height: 4rem;
    margin-top: -2rem;

    text-align: center;

    color: #000;
    border-radius: .3rem;
}

.melody_extension .melody__actions_not-active
{
    font-family: 'DSOfficinaSerifBook';
    line-height: 3.8rem;

    border: .2rem solid #f9d232;
    background: transparent;
}

.melody_extension .melody__actions_active
{
    padding-top: .5rem;

    background: #f9d232;
}

.melody_select
{
    height: auto;
    padding-right: 3.5rem;
    padding-left: 3.5rem;

    border-top: #ededed solid .1rem;
}

.melody_select:last-child
{
    border-bottom: #ededed solid .1rem;
}

.melody_select .melody__preview
{
    width: 22%;
}

.melody_select .melody__info
{
    z-index: 10;

    width: 78%;
    padding-right: 11rem;

    border: none !important;
}

.melody_select .melody__actions
{
    font-family: 'DSOffi2';
    font-size: 1.2rem;

    position: absolute;
    z-index: 10;
    top: 50%;
    right: 0;

    display: block;

    box-sizing: border-box;
    margin-top: -2rem;

    color: #000;
}

.melody_select .melody__open-rules
{
    font-family: 'DSOfficinaSerifBook';
    line-height: 3.8rem;

    width: 10rem;
    height: 4rem;

    cursor: pointer;
    text-align: center;

    border: .2rem solid #e5e5e5;
    border-radius: .3rem;
    background: transparent;
}

.melody_select .melody__open-rules_disabled
{
    color: #bbb;
    border-color: #f9f9f9;
}

.melody_select .melody__close-rules
{
    position: absolute;
    z-index: 15;
    top: 1rem;
    right: 0;

    display: block;

    cursor: pointer;

    color: #adadad;
}

.melody_select.melody_selected .melody__info
{
    padding-right: 3rem;
}

.melody_table .melody__description
{
    padding-right: 17rem;
}

.melody_table .actions
{
    position: absolute;
    top: 0;
    right: 0;

    display: table;

    box-sizing: border-box;
    width: 16.5rem;
    height: 100%;
}

.melody_table .actions .action
{
    display: table-cell;

    width: 5.5rem;

    text-align: center;
    vertical-align: middle;
}

.melody_table .actions .action .checkbox
{
    margin: 0 auto;
}

.melody_table .actions .action_delete
{
    cursor: pointer;

    color: #adadad;
}

.melody_table .actions .action_delete .icon
{
    font-size: 2.2rem !important;

    display: inline;

    cursor: pointer;
}

.wrapper
{
    z-index: 2;

    transition: ease .3s;
}

.wrapper_menu_left
{
    margin-left: 24rem;
}

.wrapper_menu_right
{
    margin-left: -24rem;
}

.menu-wrapper
{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;

    overflow-y: scroll;

    width: 100%;
    height: 100%;
}

.menu
{
    position: relative;

    display: none;

    width: 24rem;
    min-height: 100%;
}

.menu_left
{
    float: left;

    padding-bottom: 5.4rem;
}

.menu_right
{
    float: right;
}

.menu_bg_white
{
    background: #fff;
}

.menu_bg_gray
{
    background: #e5e5e5;
}

.menu__topline
{
    width: 100%;
    height: 4.8rem;
}

.menu__topline .item
{
    line-height: 4.8rem;

    box-sizing: border-box;
    height: 4.8rem;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    border-bottom: .1rem solid #e6e6e6;
}

.menu__topline .item_current
{
    font-family: 'DSOfficinaSerifBook' !important;
}

.menu__topline_empty .item
{
    border: none;
}

.menu__full-version
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 2rem;
    line-height: 3rem;

    position: absolute;
    bottom: 0;

    display: block;

    width: 24rem;
    height: 5.4rem;
    padding: 1.2rem 2rem 1.2rem 2.5rem;

    color: #000;
    border-top: .1rem solid #e6e6e6;
}

.menu .item
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 2rem;

    display: block;

    padding: 1.2rem 2rem 1.2rem 3rem;

    color: #000;
}

.menu .item_current
{
    font-family: 'DSOffi2';

    color: #f9d232;
}

.menu .item__icon,
.menu .item__name
{
    display: inline-block;

    vertical-align: middle;
}

.menu_main .item
{
    padding-left: 2.2rem;
}

.menu_main .item__icon
{
    width: 2rem;
    margin-right: 1.7rem;
}

.menu_main .item__name
{
    width: 15rem;
}

.page__container
{
    width: 25rem;
    margin: 0 auto;
}

.page_main
{
    padding-top: 1rem;
}

.page_main .section
{
    margin-bottom: 2.5rem;
}

.page_main .section__title
{
    font-family: 'DSOffi2';
    font-size: 2.2rem;

    display: inline-block;

    height: 2.8rem;
    margin-bottom: 2rem;
    padding-left: 1.5rem;

    color: #f9d232;
    border-bottom-width: .2rem;
    border-bottom-style: solid;
    border-bottom-color: #f9d232;
}

.page_main .section .banner
{
    display: block;

    width: 100%;

    text-align: center;
}

.page_main .section .banner__img
{
    display: block;

    width: 100%;
}

.page_artist .melodies
{
    margin-bottom: 3rem;
}

.page_genres
{
    padding: 3.3rem 0 3.8rem 0;
}

.page_genre
{
    padding-top: 1.5rem;
}

.page_genre .melodies
{
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.page_channels
{
    padding-top: 1.5rem;
}

.page_channel .page__container
{
    padding-top: 1.5rem;

    border-radius: 0 0 .8rem .8rem;
    background: #fff;
}

.page_channel .channel
{
    margin: 0 auto;
}

.page_channel .melodies
{
    margin-top: .8rem;
}

.page_buy
{
    padding-top: .5rem;
}

.page_buy .icon-tenge
{
    font-size: 1rem;
}

.page_authorization .text:first-child
{
    margin: 2rem 0 -.5rem 0;
}

.page_authorization .banner
{
    padding-top: 3.5rem;

    text-align: center;
}

.page_authorization .banner .page__container
{
    width: 25rem;
    padding: 2rem 1rem;

    border-radius: .8rem;
    background: #fff;
}

.page_authorization .banner .title
{
    padding: 0 2.5rem;
}

.page_authorization .banner__block
{
    padding: 1rem 0 2rem 0;
}

.page_authorization .banner__img
{
    width: initial;
    max-width: 100%;
    margin: 0 auto;
}

.page_authorization-choise
{
    padding-top: 1.5rem;
}

.page_authorization-choise > .page__container
{
    width: 21rem;
}

.page_authorization-choise .choise
{
    margin: 3rem 0;
}

.page_authorization-choise .bg
{
    padding: 3rem 0 .5rem 0;
}

.page_about p
{
    margin-bottom: 2rem;
}

.page_about .about-list
{
    display: block;

    width: 100%;
    margin-bottom: 3rem;
    padding-left: 3.5rem;
}

.page_about .about-list__item
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1rem;

    display: block;

    box-sizing: border-box;
    width: 100%;
    padding: 1.7rem 3.5rem 1.7rem 0;

    color: #000;
    border-bottom: .1rem solid #e5e5e5;
}

.page_about .about-list__item a
{
    text-decoration: underline;
}

.page_about .about-list__item ul
{
    margin-bottom: 2rem;

    list-style: disc inside;
}

.page_about .about-list__item h2
{
    font-size: 1.2rem;
    font-weight: bold;

    margin-bottom: 1rem;
}

.page_about .accordion__item
{
    cursor: pointer;
    transition: ease .2s;
}

.page_about .accordion__item_opened
{
    cursor: default;
}

.page_about .accordion__title
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.8rem;
    line-height: 1.2;

    display: block;

    text-align: left;

    color: #000;
}

.page_about .accordion__content
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.3;

    display: none;

    margin-top: 2rem;

    color: #000;
}

.page_old-browser .title
{
    margin-bottom: 1.5rem;
}

.page_old-browser .page__container
{
    width: 27.5rem;
    padding-top: 3rem;
}

.page_old-browser img.img-old-browser
{
    max-width: 62%;
    margin: 1rem 0 2rem 0;
}

.page_old-browser .download-app
{
    margin: 0 0 4.5rem 0;
}

.page_old-browser .browsers
{
    margin-top: 1.5rem;

    text-align: center;
}

.page_old-browser .browsers .browser
{
    display: inline-block;

    margin: 0 .5rem;
}

.page_old-browser .browsers .browser__logo
{
    height: 10rem;
}

.page_old-browser .browsers .browser__name
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.5rem;

    text-align: center;

    color: #000;
}

.page_old-browser .ignore
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.5rem;

    display: block;

    margin: 4rem 0 3rem 0;

    text-align: center;

    color: #000;
}

.page_old-browser .ignore span
{
    font-size: 2rem;

    display: inline-block;

    margin-top: -.1rem;

    vertical-align: middle;
}

.page_505
{
    padding: 5rem 0 3rem 0;
}

.page_505 .page__container
{
    width: 27rem;
}

.page_505 img.img-505
{
    max-width: 100%;
    margin-top: .5rem;
}

.page_404
{
    padding: 1.5rem 0 3rem 0;
}

.page_404 .page__container
{
    width: 22rem;
}

.page_404 img.img-404
{
    max-width: 100%;
    margin-top: .8rem;
}

.page_search
{
    padding-top: 1.5rem;
}

.page_search .text
{
    padding-left: 3.5rem;
}

.page_search .text_align_center
{
    padding: 0;
}

.page_search img.img-search
{
    margin: 2rem 0;

    text-align: center;
}

.page_search .search-result
{
    margin: 2rem 0;
}

.page_favorite
{
    padding-top: 1.5rem;
}

.page_favorite .tabs
{
    margin-top: 2rem;
}

.page_empty-favorite
{
    padding-top: 2.5rem;
}

.page_empty-favorite .page__container
{
    width: 19.1rem;
}

.page_empty-favorite img.img-empty-fav
{
    margin: 2rem 0;
}

.page_rules
{
    padding: 1.5rem 0 3rem 0;
}

.page_rules .title
{
    margin-bottom: 2rem;
}

.page_rules .contacts-rules,
.page_rules .groups-rules
{
    margin-top: 4rem;
}

.page_rules .contacts
{
    margin-bottom: -1rem;
}

.page_rules .contacts .contact
{
    display: table;

    box-sizing: border-box;
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.5rem 1.5rem 2rem;

    border: .2rem solid #e5e5e5;
}

.page_rules .contacts .contact__info
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 2.2rem;

    display: table-cell;

    text-align: left;
    vertical-align: middle;
}

.page_rules .contacts .contact__name,
.page_rules .contacts .contact__phone
{
    overflow: hidden;

    max-width: 18rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.page_rules .contacts .contact__name
{
    color: #000;
}

.page_rules .contacts .contact__phone
{
    margin-top: 1rem;

    color: #777;
}

.page_rules .contacts .contact__action
{
    display: table-cell;

    text-align: right;
    vertical-align: top;
}

.page_rules .setting
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1.2rem;
    line-height: 4.6rem;

    color: #000;
    border-top: .1rem solid #e5e5e5;
}

.page_rules .setting:last-child
{
    border-bottom: .1rem solid #e5e5e5;
}

.page_rules .setting__arrow
{
    font-size: 2rem;

    display: inline-block;

    margin-top: -.2rem;

    vertical-align: middle;
}

.page_contact-list
{
    padding: 1.6rem 0 1.8rem 0;
}

.page_contact-list .title
{
    margin-bottom: 2rem;
}

.page_contact-list .contacts .contact
{
    display: table;

    box-sizing: border-box;
    width: 100%;
    margin-bottom: 1.8rem;
}

.page_contact-list .contacts .contact__info
{
    font-family: 'DSOfficinaSerifBook';
    line-height: 1.2;

    display: table-cell;

    text-align: left;
    vertical-align: middle;
}

.page_contact-list .contacts .contact__name,
.page_contact-list .contacts .contact__phone
{
    overflow: hidden;

    max-width: 22rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.page_contact-list .contacts .contact__name
{
    font-size: 2.2rem;

    color: #000;
}

.page_contact-list .contacts .contact__phone
{
    font-size: 1.4rem;

    color: #777;
}

.page_contact-list .contacts .contact__action
{
    display: table-cell;

    text-align: right;
    vertical-align: middle;
}

.page_contact-list .contacts .contact__checkbox
{
    float: right;
}

.page_lk-extension
{
    padding-top: 1.6rem;
    padding-bottom: 3rem;
}

.page_lk-extension .title
{
    margin-bottom: 1.6rem;
}

.page_lk-rules-music
{
    padding-top: 1.6rem;
    padding-bottom: 3rem;
}

.page_lk-rules-music .title
{
    margin-bottom: 1.6rem;
}

.page_lk-rules-music .button
{
    margin-top: 3rem;
}

.page_lk-rules-my-melodies
{
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

.page_lk-rules-my-melodies .melodies__head
{
    display: table;

    box-sizing: border-box;
    width: 100%;
    padding: 1rem 0;
}

.page_lk-rules-my-melodies .melodies__th
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: .8rem;
    line-height: 1.5;

    display: table-cell;

    vertical-align: middle;
    word-break: break-word;

    color: #777;
}

.page_lk-rules-my-melodies .melodies__th_name
{
    padding-left: 1.5rem;

    text-align: left;
}

.page_lk-rules-my-melodies .melodies__th_action
{
    width: 5.5rem;
    padding: 0 .4rem;

    text-align: center;
}

.fancybox
{
    display: block;

    margin: 1rem 0;
}

.popup
{
    display: none;

    box-sizing: border-box;
    width: 25rem;
    padding: 2.5rem 2rem;
}

.popup .title
{
    margin-bottom: 1.5rem;
}

.present
{
    line-height: 1.3;

    padding-top: 2.5rem;
    padding-bottom: .5rem;
}

.present__details
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1rem;

    display: block;

    margin-top: 1.5rem;

    text-align: center;

    color: #777;
}

.present__details span
{
    font-size: 1.5rem;

    vertical-align: middle;
}

.present .form
{
    margin-top: 2.5rem;
}

.rules
{
    position: relative;

    display: none;
}

.rules .form__element
{
    margin-top: 2rem;
}

.rules .form__label
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1.2rem;
}

.rules .week
{
    width: 100%;
    padding-bottom: 2rem;

    text-align: justify;
}

.rules .week .helper
{
    display: inline-block;

    width: 100%;
    height: 0;
}

.rules .week__day
{
    position: relative;

    display: inline-block;
}

.rules .week__day_disabled .week__checkbox
{
    cursor: default;
}

.rules .week__day_disabled .week__text
{
    color: #e5e5e5;
}

.rules .week__day,
.rules .week__checkbox,
.rules .week__text
{
    width: 2.2rem;
    height: 1.7rem;
}

.rules .week__checkbox,
.rules .week__text
{
    position: absolute;
    top: 0;
    left: 0;
}

.rules .week__text
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.8rem;

    z-index: 3;
}

.rules .week__checkbox
{
    z-index: 5;

    cursor: pointer;

    opacity: 0;
}

.rules .week__checkbox:checked ~ .week__text
{
    font-family: 'DSOffi2';

    color: #f9d232;
}

.rules .interval
{
    line-height: 3rem;

    display: block;

    height: 3rem;
}

.rules .interval-container
{
    width: 14rem;
    margin: 0 auto;
    padding-left: 1rem;
}

.rules .interval__time,
.rules .interval__line,
.rules .interval__remove
{
    float: left;
}

.rules .interval__time,
.rules .interval__line
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.8rem;

    color: #000;
}

.rules .interval__time
{
    position: relative;

    width: 4.1rem;
    height: 3rem;
}

.rules .interval__time:before
{
    position: absolute;
    z-index: 5;
    top: 0;
    left: 1.7rem;

    content: ':';
}

.rules .interval__time .select
{
    position: relative;

    display: inline-block;

    width: 1.8rem;
    height: 3rem;
}

.rules .interval__time .select__select,
.rules .interval__time .select__text
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
}

.rules .interval__time .select__select
{
    z-index: 3;

    cursor: pointer;

    opacity: 0;
}

.rules .interval__remove
{
    margin-left: .5rem;

    cursor: pointer;

    color: #b31736;
}

.rules .add-interval
{
    font-family: Open Sans, Helvetica, sans-serif;
    font-size: 1.2rem;
    font-weight: bold;

    margin-top: 1.2rem;
    margin-bottom: 3rem;

    cursor: pointer;
    text-align: center;

    color: #f9d232;
}

.topline
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.3rem;
    line-height: 4.4rem;

    height: 4.4rem;

    color: #777;
    border-bottom: .1rem solid #e5e5e5;
    background: #fff;
}

.topline_empty
{
    border: none;
}

.topline__title
{
    font-family: 'DSOffi2';
    font-size: 1.8rem;

    display: block;

    padding: 0 4rem;

    text-align: center;

    color: #000;
}

.topline__prev
{
    font-size: 1.3rem;

    display: block;
    float: left;

    margin-left: 1rem;

    color: #777;
}

.topline__prev .icon-arrow_left
{
    font-size: 2rem;

    display: inline;

    vertical-align: middle;
}

.topline .open-menu
{
    font-size: 3rem;

    display: table;

    height: 100%;

    cursor: pointer;

    color: #adadad;
}

.topline .open-menu_left
{
    float: left;

    margin-left: 1rem;
}

.topline .open-menu_left:before
{
    display: table-cell;

    vertical-align: middle;
}

.topline .open-menu_right
{
    float: right;

    width: 7rem;
    margin-right: .9rem;
}

.topline .open-menu__icon
{
    font-size: 2rem;

    display: table-cell;

    vertical-align: middle;
}

.topline .open-menu__text
{
    font-family: 'DSOfficinaSerifBook';
    font-size: 1.3rem;
    line-height: 1;

    display: table-cell;

    text-align: right;
    vertical-align: middle;

    color: #777;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)
{
    .sprite
    {
        background-image: url('../img/sprite@2x.png');
        background-size: 1px 1px;
    }
}

@media all and (min-width: 480px)
{
    html,
    body
    {
        font-size: 15px;
    }
}

@media all and (min-width: 640px)
{
    html,
    body
    {
        font-size: 20px;
    }
}

@media all and (max-width: 480px)
{
    html,
    body
    {
        font-size: 10px;
    }
}

