@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 }

        #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 }