@import url(font-source-sans-pro.css);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }

body { line-height: 1 }

.clear { clear: both }

ol, ul { list-style: none }

blockquote, q { quotes: none }

    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none }

body { -webkit-text-size-adjust: none }

@-ms-viewport { width: device-width }

@media screen and (max-width:480px) {
    html, body { min-width: 320px }
}

html { box-sizing: border-box }

*, *:before, *:after { box-sizing: inherit }

body { background: #000; }

    body.is-preload *, body.is-preload *:before, body.is-preload *:after { -moz-animation: none !important; -webkit-animation: none !important; animation: none !important; -moz-transition: none !important; -webkit-transition: none !important; transition: none !important }

.all { box-shadow: 0 0 15px #fff }

.bookImages { float: left; padding: 1.5em }

@media screen and (max-width:480px) {
    .bookImages { float: left; padding: 1.5em 2.2em }
}


html { font-size: 16pt }

@media screen and (max-width:1680px) {
    html { font-size: 12pt }
}

@media screen and (max-width:812px) {
    html { font-size: 11pt }
}

@media screen and (max-width:360px) {
    html { font-size: 10pt }
}

body, input, select, textarea { color: #fff; font-family: "Source Sans Pro",sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.65 }

a { -moz-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-bottom-color .2s ease-in-out; -webkit-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-bottom-color .2s ease-in-out; transition: color .2s ease-in-out,background-color .2s ease-in-out,border-bottom-color .2s ease-in-out; border-bottom: dotted 1px rgba(255,255,255,0.5); text-decoration: none; color: inherit }

    a:hover { border-bottom-color: transparent }

strong, b { color: #fff; font-weight: 600 }

em, i { font-style: italic }

p { margin: 0 0 2rem 0 }

h1, h2, h3, h4, h5, h6 { color: #fff; font-weight: 600; line-height: 1.5; margin: 0 0 1rem 0; text-transform: uppercase; letter-spacing: .2rem }

    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none }

    h1.hArticle, h2.hArticle, h3.hArticle, h4.hArticle, h5.hArticle, h6.hArticle { border-bottom: solid 1px #fff; width: max-content; padding-bottom: .5rem }

    h1.hArticle { font-size: 2.25rem; line-height: 1.3; letter-spacing: .5rem }

h1 { font-size: 4.25rem; line-height: 1.8; letter-spacing: .3rem; margin: 0 0 2rem 0 }

    h1 span { font-size: 5rem; line-height: 1.0; letter-spacing: .3rem; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15) }

@media screen and (max-width:812px) {
    h1 span { font-size: 3.5rem }
}

@media screen and (max-width:480px) {
    h1 span { font-size: 2rem }
}

h2 { font-size: 1.2rem; line-height: 1.0; letter-spacing: .2rem }

h3 { font-size: 1rem }

h4 { font-size: .8rem }

h5 { font-size: .7rem }

h6 { font-size: .6rem }

@media screen and (max-width:812px) {
    h1 { font-size: 1.75rem; line-height: 1.4 }

    h2 { font-size: 1.25em; line-height: 1.5 }
}

sub { font-size: .8rem; position: relative; top: .5rem }

sup { font-size: .8rem; position: relative; top: -0.5rem }

blockquote { border-left: solid 4px #fff; font-style: italic; margin: 0 0 2rem 0; padding: .5rem 0 .5rem 2rem }

code { background: rgba(255,255,255,0.075); border-radius: 4px; font-family: "Courier New",monospace; font-size: .9rem; margin: 0 .25rem; padding: .25rem .65rem }

pre { -webkit-overflow-scrolling: touch; font-family: "Courier New",monospace; font-size: .9rem; margin: 0 0 2rem 0 }

    pre code { display: block; line-height: 1.75; padding: 1rem 1.5rem; overflow-x: auto }

hr { border: 0; border-bottom: solid 1px #fff; margin: 2.75rem 0 }

#main article ul.bay { margin: 30px auto; text-align: center; position: relative }

    #main article ul.bay li { display: inline; padding: 2px 20px; position: relative }

#main article ul li a { text-decoration: none; background-repeat: no-repeat; width: 100px; height: 31px; display: inline-block; border-radius: 4px; background-color: #fff; opacity: .5 }

    #main article ul li a[data]:hover:after { color: #000; background-color: #fff; left: -0.8rem; width: max-content }

    #main article ul li a:hover { text-decoration: none; background-repeat: no-repeat; width: 100px; height: 31px; display: inline-block; border-radius: 4px; background-color: #fff; opacity: .9 }

    #main article ul li a.ridero { background-image: url("../../images/ridero.png") }

    #main article ul li a.litres { background-image: url("../../images/LitRes.png") }

    #main article ul li a.litres_audio { background-image: url("../../images/LitRes_audio.png") }

    #main article ul li a.ozon { background-image: url("../../images/ozon.png") }

    #main article ul li a.amazon { background-image: url("../../images/amazon.png") }

    #main article ul li a.feisovet { background-image: url("../../images/feisovet.png") }

    #main article ul li a.chitai-gorod { background-image: url("../../images/ChitaiGorod.png") }
/*ntcn */

@media screen and (max-width:812px) {
    #main article ul.bay li { padding: 2px 10px }
}

@media screen and (max-width:480px) {
    #main article ul.bay li { padding: 2px 5px }
}

.icon { text-decoration: none; border-bottom: 0; position: relative }

    .icon:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important }

    .icon > .label { display: none }

.image { border-radius: 4px; border: 0; display: inline-block; position: relative }

    .image:before { pointer-events: none; background-image: url("../../images/overlay.png"); background-color: rgba(19,21,25,0.5); border-radius: 4px; content: ''; display: block; height: 100%; left: 0; opacity: .5; position: absolute; top: 0; width: 100% }

a[data]:hover:after { content: attr(data); padding: 0 20px; color: #fff; position: absolute; top: -3rem; white-space: nowrap; z-index: 2; border-radius: 5px; background: rgba(0,0,0,0.175); display: block; text-transform: none; letter-spacing: 0rem }

.image img { border-radius: 4px; display: block }

.image.left, .image.right { max-width: 40% }

    .image.left img, .image.right img { width: 100% }

.image.left { float: left; padding: 0 1.5em 1em 0; top: .25em }

.image.right { float: right; padding: 0 0 1em 1.5em; top: .25em }

.image.fit { display: block; margin: 0 0 2rem 0; width: 100% }

    .image.fit img { width: 100% }

.image.main { display: block; margin: 2.5rem 0; width: 100% }

    .image.main img { width: 100% }

@media screen and (max-width:812px) {
    .image.main { margin: 2rem 0 }
}

@media screen and (max-width:480px) {
    .image.main { margin: 1.5rem 0 }
}

ol { list-style: decimal; margin: 0 0 2rem 0; padding-left: 1.25em }

    ol li { padding-left: .25em }

ul { list-style: disc; margin: 0 4rem 0; padding-left: 1em }

    ul li { padding: 0 0.5em }

@media screen and (max-width:812px) {
    ul li { padding: 0 .2em 0 .2em }
}

@media screen and (max-width:480px) {
    ul li { padding: 0 .2em 0 .2em }
}

ul.alt { list-style: none; padding-left: 0 }

    ul.alt li { border-top: solid 1px #fff; padding: .5em 0 }

        ul.alt li:first-child { border-top: 0; padding-top: 0 }

dl { margin: 0 0 2rem 0 }

    dl dt { display: block; font-weight: 600; margin: 0 0 1rem 0 }

    dl dd { margin-left: 2rem }

ul.icons { cursor: default; list-style: none; padding-left: 0 }

    ul.icons li { display: inline-block; padding: 0 .75em 0 0 }

        ul.icons li:last-child { padding-right: 0 }

        ul.icons li a { border-radius: 100%; box-shadow: inset 0 0 0 1px #fff; display: inline-block; height: 2.25rem; line-height: 2.25rem; text-align: center; width: 2.25rem }

            ul.icons li a:hover { background-color: rgba(255,255,255,0.075) }

            ul.icons li a:active { background-color: rgba(255,255,255,0.175) }

/* BG */

#bg { -moz-transform: scale(1.0); -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); -webkit-backface-visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; }

    #bg:before, #bg:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

    #bg:before { -moz-transition: background-color 2.5s ease-in-out; -webkit-transition: background-color 2.5s ease-in-out; transition: background-color 2.5s ease-in-out; -moz-transition-delay: 0.75s; -webkit-transition-delay: 0.75s; transition-delay: 0.75s; background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("../../images/overlay.png"); background-size: auto, 256px 256px; background-position: center, center; background-repeat: no-repeat, repeat; z-index: 2; }

    #bg:after { opacity: 0.75; -moz-transform: scale(1.125); -webkit-transform: scale(1.125); -ms-transform: scale(1.125); transform: scale(1.125); -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out; -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out; transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out; background-image: url("../../images/fon.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 1; }

body.is-article-visible #bg:after { opacity: 0.75; -moz-transform: scale(1.0825); -webkit-transform: scale(1.0825); -ms-transform: scale(1.0825); transform: scale(1.0825); -moz-filter: blur(0.2rem); -webkit-filter: blur(0.2rem); filter: blur(0.2rem); }

body.is-preload #bg:before { background-color: #000; }

#wrapper { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; position: relative; min-height: 100vh; width: 100%; padding: 1rem 2rem 1rem 2rem; z-index: 3 }

    #wrapper:before { content: ''; display: block }

@media screen and (max-width:1680px) {
    #wrapper { padding: 3rem 2rem }
}

@media screen and (max-width:812px) {
    #wrapper { padding: 2rem 1rem }
}

@media screen and (max-width:480px) {
    #wrapper { padding: 1rem }
}

#header { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -moz-transition: -moz-transform .325s ease-in-out,-moz-filter .325s ease-in-out,opacity .325s ease-in-out; -webkit-transition: -webkit-transform .325s ease-in-out,-webkit-filter .325s ease-in-out,opacity .325s ease-in-out; transition: transform .325s ease-in-out,filter .325s ease-in-out,opacity .325s ease-in-out; background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%,rgba(0,0,0,0) 55%); background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%,rgba(0,0,0,0) 55%); background-image: radial-gradient(rgba(0,0,0,0.25) 25%,rgba(0,0,0,0) 55%); max-width: 100%; text-align: center }

    #header > * { -moz-transition: opacity .325s ease-in-out; -webkit-transition: opacity .325s ease-in-out; transition: opacity .325s ease-in-out; position: relative; margin-top: 1.5rem }


    #header > :first-child { margin-top: -2.0rem }

        #header > :first-child:before { display: none }

    #header .logo { line-height: 5.5rem; border: solid 1px #fff; padding: 1px; border-radius: 4px }

        #header .logo .icon:before { font-size: 2rem }

    #header .content { max-width: 100% }

        #header .content .inner { -moz-transition: max-height .75s ease,padding .75s ease,opacity .325s ease-in-out; -webkit-transition: max-height .75s ease,padding .75s ease,opacity .325s ease-in-out; transition: max-height .75s ease,padding .75s ease,opacity .325s ease-in-out; -moz-transition-delay: .25s; -webkit-transition-delay: .25s; transition-delay: .25s; padding: .2rem 2rem; max-height: 40rem; overflow: hidden }

            #header .content .inner > :last-child { margin-bottom: 0 }

        #header .content p { text-transform: uppercase; letter-spacing: .2rem; font-size: .8rem; line-height: 2 }

    #header nav ul { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; margin-bottom: 0; list-style: none; padding-left: 0; border-radius: 4px; justify-content: center }

        #header nav ul li:first-child { border-left: 0 }

        #header nav ul li a { display: block; min-width: 1.0rem; height: 14.5rem; line-height: 2.75rem; padding: .5rem; text-transform: uppercase; letter-spacing: .2rem; font-size: .8rem; border-bottom: 0 }

            #header nav ul li a img { display: block; height: 12.5rem }

@media screen and (max-width:846px) {
    #header nav ul li a img { height: 12rem }
}

@media screen and (max-width:812px) {
    #header nav ul li a img { height: 12.5rem }
}

@media screen and (max-width:770px) {
    #header nav ul li a img { height: 11.5rem }
}

#header nav ul li a:hover { background-color: rgba(255,255,255,0.075) }

#header nav ul li a:active { background-color: rgba(255,255,255,0.175) }

/*
#header nav.use-middle:after { content: ''; display: block; position: absolute; top: 0; left: calc(50% - 1px); width: 1px; height: 100%; background: #fff }
*/

#header nav.use-middle ul li.is-middle { border-left: 0 }

body.is-article-visible #header { -moz-transform: scale(0.95); -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); -moz-filter: blur(0.1rem); -webkit-filter: blur(0.1rem); filter: blur(0.1rem); opacity: 0 }

body.is-preload #header { -moz-filter: blur(0.125rem); -webkit-filter: blur(0.125rem); filter: blur(0.125rem) }

    body.is-preload #header > * { opacity: 0 }

    body.is-preload #header .content .inner { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0 }



@media screen and (max-width:812px) {
    #header > * { margin-top: 2rem }

        #header > *:before { top: calc(-2rem - 1px); height: calc(2rem+1px) }

    #header .logo { line-height: 4.75rem }

        #header .logo .icon:before { font-size: 1.75rem }

    #header .content .inner { padding: 2.5rem 1rem }

    #header .content p { line-height: 1.875 }
}

@media screen and (max-width:480px) {
    #header { padding: 1.5rem 0 }

        #header .content .inner { padding: 2.5rem 0 }

        #header nav ul { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; min-width: 10rem; max-width: 100% }

            #header nav ul li { height: 30rem }

                #header nav ul li a { height: 30rem; line-height: 3rem; min-width: 0; width: 100% }

                    #header nav ul li a img { height: 28rem }

        #header nav.use-middle:after { display: none }
}

#main { -webkit-flex-grow: 1; flex-grow: 1; flex-shrink: 1; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: relative; max-width: 100%; z-index: 3 }

    #main article { -moz-transform: translateY(0.25rem); -webkit-transform: translateY(0.25rem); -ms-transform: translateY(0.25rem); transform: translateY(0.25rem); -moz-transition: opacity .325s ease-in-out,-moz-transform .325s ease-in-out; -webkit-transition: opacity .325s ease-in-out,-webkit-transform .325s ease-in-out; transition: opacity .325s ease-in-out,transform .325s ease-in-out; padding: 3rem 2rem 1.5rem 2rem; position: relative; width: 40rem; max-width: 100%; background-color: rgba(27,31,34,0.85); border-radius: 4px; opacity: 0 }

        #main article.active { -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1 }

        #main article .close { display: block; position: absolute; top: 0; right: 0; width: 4rem; height: 4rem; cursor: pointer; text-indent: 4rem; overflow: hidden; white-space: nowrap }

            #main article .close:before { -moz-transition: background-color .2s ease-in-out; -webkit-transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out; content: ''; display: block; position: absolute; top: .75rem; left: .75rem; width: 2.5rem; height: 2.5rem; border-radius: 100%; background-position: center; background-image: url("../../images/close.png"); background-size: 20px 20px; background-repeat: no-repeat }

            #main article .close:hover:before { background-color: rgba(255,255,255,0.075) }

            #main article .close:active:before { background-color: rgba(255,255,255,0.175) }

        #main article ul { list-style: none; padding: 0; margin: 0 0 0 .8rem }

        #main article span { display: block; text-align: justify }

@media screen and (max-width:812px) {
    #main article { padding: 3.5rem 2rem .5rem 2rem }

        #main article .close:before { top: .875rem; left: .875rem; width: 2.25rem; height: 2.25rem; background-size: 14px 14px }
}

@media screen and (max-width:480px) {
    #main article { padding: 3rem 1.5rem .5rem 1.5rem }
}

#footer { -moz-transition: -moz-transform .325s ease-in-out,-moz-filter .325s ease-in-out,opacity .325s ease-in-out; -webkit-transition: -webkit-transform .325s ease-in-out,-webkit-filter .325s ease-in-out,opacity .325s ease-in-out; transition: transform .325s ease-in-out,filter .325s ease-in-out,opacity .325s ease-in-out; width: 100%; max-width: 100%; margin: 4rem 0 0 0; text-align: center }

    #footer .copyright { letter-spacing: .2rem; font-size: .6rem; opacity: .75; margin: 2rem 0 0 0; text-transform: uppercase }

body.is-article-visible #footer { -moz-transform: scale(0.55); -webkit-transform: scale(0.55); -ms-transform: scale(0.55); transform: scale(0.55); -moz-filter: blur(0.1rem); -webkit-filter: blur(0.1rem); filter: blur(0.1rem); opacity: 0 }

body.is-preload #footer { opacity: 0 }

.experience-tiles { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-around; align-items: stretch }

.experience-tiles-tile { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; background-color: rgba(0,0,0,0.1); align-items: center; flex-direction: column; text-align: center; margin: 5px; padding: 5px; width: 50% }

h2.hd { font-size: 14px; font-weight: 600; margin-bottom: 10px; letter-spacing: .2em }

.tile-icon { color: #ffed00; font-size: 3em; width: 100% }

.text-center { text-align: center }

ul.skill-list li { list-style: none }

ul li[data]:hover:after { content: attr(data); padding: 0 20px; color: #fff; position: absolute; top: -3rem; white-space: nowrap; z-index: 2; border-radius: 5px; background: rgba(0,0,0,0.175); display: block; text-transform: none; letter-spacing: 0rem }

/* Оформление панели */
#side-checkbox
{
    display: none;
}

.side-panel
{
    position: fixed;
    z-index: 999999;
    top: 0;
    left: -360px;
    background: #FFF;
    transition: all 0.5s;
    width: 320px;
    height: 100vh;
    box-shadow: 10px 0 20px rgba(0,0,0,0.4);
    color: #000;
    padding: 40px 20px;
}

.side-title
{
    font-size: 20px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #FFFFFF50;
}
/* Оформление кнопки на странице */
.side-button-1-wr
{
    text-align: center; /* Контейнер для кнопки, чтобы было удобнее ее разместить */
}

.side-button-1
{
    display: inline-block;
}

    .side-button-1 .side-b
    {
        margin: 10px;
        text-decoration: none;
        position: relative;
        font-size: 20px;
        line-height: 20px;
        padding: 12px 30px;
        color: #FFF;
        font-weight: bold;
        text-transform: uppercase;
        font-family: 'Roboto', Тahoma, sans-serif;
        background: transparent;
        cursor: pointer;
        border: 2px solid #FFF;
    }

        .side-button-1 .side-b:hover,
        .side-button-1 .side-b:active,
        .side-button-1 .side-b:focus
        {
            color: #FFF;
        }

        .side-button-1 .side-b:after,
        .side-button-1 .side-b:before
        {
            position: absolute;
            height: 4px;
            left: 50%;
            bottom: -6px;
            content: "";
            transition: all 280ms ease-in-out;
            width: 0;
        }

    .side-button-1 .side-open:after,
    .side-button-1 .side-open:before
    {
        background: red;
    }

    .side-button-1 .side-close:after,
    .side-button-1 .side-close:before
    {
        background: red;
    }

    .side-button-1 .side-b:before
    {
        top: -6px;
    }

    .side-button-1 .side-b:hover:after,
    .side-button-1 .side-b:hover:before
    {
        width: 100%;
        left: 0;
    }
    /* Переключатели кнопки 1 */
    .side-button-1 .side-close
    {
        display: none;
    }

#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open
{
    display: none;
}

#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close
{
    display: block;
}

#side-checkbox:checked + .side-panel
{
    left: 0;
}
/* Оформление кнопки на панели */
.side-button-2
{
    font-size: 30px;
    border-radius: 20px;
    position: absolute;
    z-index: 1;
    top: 8px;
    right: 8px;
    cursor: pointer;
    transform: rotate(45deg);
    color: #000;
    transition: all 280ms ease-in-out;
}

    .side-button-2:hover
    {
        transform: rotate(45deg) scale(1.1);
        color: #FFF;
    }