/**
 * Ribbon theme for Shower HTML presentation engine
 * shower-ribbon v2.1.0, https://github.com/shower/ribbon
 * @copyright 2010–2017 Vadim Makeev, http://pepelsbey.net/
 * @license MIT
 */

 @charset "UTF-8";
 @font-face {
   font-family: PT Sans;
   src: url(../fonts/pt-sans-regular.woff) format("woff")
 }
 
 @font-face {
   font-weight: 700;
   font-family: PT Sans;
   src: url(../fonts/pt-sans-bold.woff) format("woff")
 }
 
 @font-face {
   font-style: italic;
   font-family: PT Sans;
   src: url(../fonts/pt-sans-italic.woff) format("woff")
 }
 
 @font-face {
   font-style: italic;
   font-weight: 700;
   font-family: PT Sans;
   src: url(../fonts/pt-sans-bold-italic.woff) format("woff")
 }
 
 @font-face {
   font-family: PT Sans Narrow;
   font-weight: 700;
   src: url(../fonts/pt-sans-narrow-bold.woff) format("woff")
 }
 
 @font-face {
   font-family: PT Mono;
   src: url(../fonts/pt-mono-regular.woff) format("woff")
 }
 
 *,
 ::after,
 ::before {
   -webkit-box-sizing: border-box;
   box-sizing: border-box
 }
 
 a,
 abbr,
 acronym,
 address,
 applet,
 article,
 aside,
 audio,
 b,
 big,
 blockquote,
 body,
 canvas,
 caption,
 center,
 cite,
 code,
 dd,
 del,
 details,
 dfn,
 div,
 dl,
 dt,
 em,
 embed,
 fieldset,
 figcaption,
 figure,
 footer,
 form,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 header,
 hgroup,
 html,
 i,
 iframe,
 img,
 ins,
 kbd,
 label,
 legend,
 li,
 mark,
 menu,
 nav,
 object,
 ol,
 output,
 p,
 pre,
 q,
 ruby,
 s,
 samp,
 section,
 small,
 span,
 strike,
 strong,
 sub,
 summary,
 sup,
 table,
 tbody,
 td,
 tfoot,
 th,
 thead,
 time,
 tr,
 tt,
 u,
 ul,
 var,
 video {
   margin: 0;
   padding: 0;
   border: 0;
   font: inherit;
   vertical-align: baseline
 }
 
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 main,
 menu,
 nav,
 section {
   display: block
 }
 
 .caption p,
 body {
   line-height: 1
 }
 
 ol,
 ul {
   list-style: none
 }
 
 blockquote,
 q {
   quotes: none
 }
 
 blockquote::after,
 blockquote::before,
 q::after,
 q::before {
   content: none
 }
 
 table {
   border-collapse: collapse;
   border-spacing: 0
 }
 
 a {
   text-decoration: none
 }
 
 @page {
   margin: 0;
   size: 1024px 576px
 }
 
 .shower {
   color: #000;
   counter-reset: slide;
   font: 25px/2 PT Sans, sans-serif;
   -webkit-print-color-adjust: exact;
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
   -ms-text-size-adjust: none
 }
 
 @media print {
   .shower {
     text-rendering: geometricPrecision
   }
 }
 
 .caption {
   font-size: 25px;
   display: none;
   margin-top: -.2em;
   padding: 0 1em .93em;
   width: 100%;
   color: #3c3d40;
   text-shadow: 0 1px 0 #8d8e90
 }
 
 @media (min-width:1174px) {
   .caption {
     font-size: 50px
   }
 }
 
 @media (min-width:2348px) {
   .caption {
     font-size: 100px
   }
 }
 
 .caption h1 {
   padding-bottom: .15em;
   font: 700 1em/1 PT Sans Narrow, sans-serif
 }
 
 .caption p {
   font-size: .6em
 }
 
 .caption a {
   color: #4b86c2;
   text-shadow: 0 -1px 0 #1f3f60
 }
 
 .slide {
   position: relative;
   z-index: 1;
   overflow: hidden;
   padding: 106px 100px 0;
   width: 1024px;
   height: 576px;
   background: #fff;
   font-size: 25px
 }
 
 .slide::after {
   position: absolute;
   top: 0;
   right: 100px;
   padding-top: 15px;
   width: 50px;
   height: 100px;
   background: url(../images/ribbon.svg) no-repeat;
   color: #fff;
   counter-increment: slide;
   content: counter(slide);
   text-align: center
 }
 
 .slide h2 {
   margin-bottom: 34px;
   color: #585a5e;
   font: 700 50px/1 PT Sans Narrow, sans-serif
 }
 
 .slide p {
   margin-bottom: 1em
 }
 
 .slide p.note {
   color: #979a9e
 }
 
 .slide a {
   background: -webkit-gradient(linear, left bottom, left top, color-stop(.09em, currentColor), color-stop(.09em, transparent)) repeat-x;
   background: linear-gradient(to top, currentColor .09em, transparent .09em) repeat-x;
   color: #4b86c2
 }
 
 .slide b,
 .slide strong {
   font-weight: 700
 }
 
 .slide blockquote,
 .slide dfn,
 .slide em,
 .slide i {
   font-style: italic
 }
 
 .slide code,
 .slide kbd,
 .slide mark,
 .slide samp {
   padding: .1em .3em;
   border-radius: .2em
 }
 
 .slide code,
 .slide kbd,
 .slide samp {
   background: rgba(88, 90, 94, .1);
   line-height: 1;
   font-family: PT Mono, monospace, monospace
 }
 
 .slide mark {
   background: #fafaa2
 }
 
 .slide sub,
 .slide sup {
   position: relative;
   line-height: 0;
   font-size: 75%
 }
 
 .slide sub {
   bottom: -.25em
 }
 
 .slide sup {
   top: -.5em
 }
 
 .slide blockquote::before {
   position: absolute;
   margin: -.15em 0 0 -.43em;
   color: #ccc;
   line-height: 1;
   font-size: 8em;
   content: '\201C'
 }
 
 .slide blockquote+figcaption {
   margin: -1em 0 1em;
   font-style: italic;
   font-weight: 700
 }
 
 .slide ol,
 .slide ul {
   margin-bottom: 1em;
   counter-reset: list
 }
 
 .slide ol li,
 .slide ul li {
   page-break-inside: avoid;
   text-indent: -2em
 }
 
 .slide ol li::before,
 .slide ul li::before {
   display: inline-block;
   width: 2em;
   color: #979a9e;
   text-align: right
 }
 
 .slide ol ol,
 .slide ol ul,
 .slide ul ol,
 .slide ul ul {
   margin-bottom: 0;
   margin-left: 2em
 }
 
 .slide ul>li::before {
   padding-right: .5em;
   content: '•'
 }
 
 .slide ul>li:lang(ru)::before {
   content: '—'
 }
 
 .slide ol>li::before {
   padding-right: .4em;
   counter-increment: list;
   content: counter(list) "."
 }
 
 .slide ol>li[value]::before {
   content: attr(value) "."
 }
 
 .slide ul>li[value]::before {
   content: attr(value)
 }
 
 .slide table {
   margin-left: -100px;
   margin-bottom: 1em;
   width: calc(100% + 100px + 100px)
 }
 
 .slide table td:first-child,
 .slide table th:first-child {
   padding-left: 96px
 }
 
 .slide table td:last-child,
 .slide table th:last-child {
   padding-right: 96px
 }
 
 .slide table th {
   text-align: left;
   font-weight: 700
 }
 
 .slide table tr:not(:last-of-type)>* {
   background: -webkit-gradient(linear, left bottom, left top, color-stop(.055em, rgba(88, 90, 94, .5)), color-stop(.055em, transparent)) repeat-x;
   background: linear-gradient(to top, rgba(88, 90, 94, .5) .055em, transparent .055em) repeat-x
 }
 
 .slide table.striped tr:nth-child(even) {
   background: rgba(88, 90, 94, .1)
 }
 
 .slide table.striped tr>* {
   background-image: none
 }
 
 .slide pre {
   margin-bottom: 1em;
   counter-reset: code;
   white-space: normal
 }
 
 .slide pre code {
   display: block;
   margin-left: -100px;
   padding: 0 0 0 100px;
   width: calc(100% + 100px + 100px);
   border-radius: 0;
   background: 0 0;
   line-height: 2;
   white-space: pre;
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4
 }
 
 .slide pre code:not(:only-child).mark {
   background: rgba(88, 90, 94, .1)
 }
 
 .slide pre code:not(:only-child)::before {
   position: absolute;
   margin-left: -2em;
   color: #979a9e;
   counter-increment: code;
   content: counter(code, decimal-leading-zero) "."
 }
 
 .slide pre mark {
   position: relative;
   z-index: -1;
   margin: 0 -.3em
 }
 
 .slide pre mark.important {
   background: #c00;
   color: #fff
 }
 
 .slide pre .comment {
   color: #999
 }
 
 .slide footer {
   position: absolute;
   right: 0;
   bottom: -576px;
   left: 0;
   display: none;
   padding: 41px 100px 8px;
   background: #fbfbba;
   -webkit-box-shadow: 0 1px 0 #fafaa2 inset;
   box-shadow: 0 1px 0 #fafaa2 inset;
   -webkit-transition: bottom .3s;
   transition: bottom .3s
 }
 
 .slide footer mark {
   background: rgba(255, 255, 255, .8)
 }
 
 .slide:hover>footer {
   bottom: 0
 }
 
 .slide.grid {
   background-image: url(../images/grid.png);
   -ms-interpolation-mode: nearest-neighbor;
   image-rendering: -webkit-optimize-contrast;
   image-rendering: -moz-crisp-edges;
   image-rendering: -o-pixelated;
   image-rendering: pixelated
 }
 
 @media (-webkit-min-device-pixel-ratio:2),
 (min-resolution:2dppx) {
   .slide.grid {
     background-image: url(../images/grid@2x.png);
     background-size: 1024px auto
   }
 }
 
 .slide.black {
   background-color: #000
 }
 
 .slide.white {
   background-color: #fff
 }
 
 .slide.clear.active {
   z-index: 2
 }
 
 .slide.clear::after {
   visibility: hidden
 }
 
 .slide .double,
 .slide .triple {
   -webkit-column-gap: 75px;
   column-gap: 75px;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto
 }
 
 .slide .double {
   -webkit-column-count: 2;
   column-count: 2
 }
 
 .slide .triple {
   -webkit-column-count: 3;
   column-count: 3
 }
 
 .slide .shout {
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   text-align: center;
   line-height: 1.2;
   font-size: 150px;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%)
 }
 
 .slide .shout a {
   background: -webkit-gradient(linear, left bottom, left top, color-stop(.11em, currentColor), color-stop(.11em, transparent)) repeat-x;
   background: linear-gradient(to top, currentColor .11em, transparent .11em) repeat-x
 }
 
 .slide .cover {
   z-index: -1;
   max-width: 100%;
   max-height: 100%
 }
 
 .slide .cover.w,
 .slide .cover.width {
   width: 100%;
   max-height: none
 }
 
 .slide .cover.h,
 .slide .cover.height {
   height: 100%;
   max-width: none
 }
 
 .slide .cover+figcaption {
   position: absolute;
   bottom: 20px;
   right: 10px;
   font-size: 12px;
   opacity: .7;
   -webkit-transform-origin: 0 100%;
   transform-origin: 0 100%;
   -webkit-transform: translateX(100%) rotate(-90deg);
   transform: translateX(100%) rotate(-90deg)
 }
 
 .slide .cover+figcaption.white {
   color: #fff
 }
 
 .slide .cover+figcaption a {
   color: currentcolor
 }
 
 .slide .cover,
 .slide .place {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%)
 }
 
 .slide .place.b.l,
 .slide .place.b.r,
 .slide .place.bottom.left,
 .slide .place.bottom.right,
 .slide .place.t.l,
 .slide .place.t.r,
 .slide .place.top.left,
 .slide .place.top.right {
   -webkit-transform: none;
   transform: none
 }
 
 .slide .place.b,
 .slide .place.bottom,
 .slide .place.t,
 .slide .place.top {
   -webkit-transform: translate(-50%, 0);
   transform: translate(-50%, 0)
 }
 
 .slide .place.l,
 .slide .place.left,
 .slide .place.r,
 .slide .place.right {
   -webkit-transform: translate(0, -50%);
   transform: translate(0, -50%)
 }
 
 .slide .place.t,
 .slide .place.t.r,
 .slide .place.top,
 .slide .place.top.left,
 .slide .place.top.right {
   top: 0
 }
 
 .slide .place.r,
 .slide .place.right {
   right: 0;
   left: auto
 }
 
 .slide .place.b,
 .slide .place.b.l,
 .slide .place.b.r,
 .slide .place.bottom,
 .slide .place.bottom.left,
 .slide .place.bottom.right {
   top: auto;
   bottom: 0
 }
 
 .slide .place.l,
 .slide .place.left {
   left: 0
 }
 
 .progress {
   left: -20px;
   bottom: 0;
   z-index: 1;
   display: none;
   width: 0;
   height: 0;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
   border: 10px solid #4b86c2;
   border-right-color: transparent;
   -webkit-transition: width .2s linear;
   transition: width .2s linear;
   clip: rect(10px, 1044px, 20px, 20px)
 }
 
 .progress[style*='100%'] {
   padding-left: 10px
 }
 
 .badge,
 .badge a,
 .progress {
   position: absolute
 }
 
 .badge {
   font-size: 10px;
   top: 0;
   z-index: 1;
   overflow: hidden;
   display: none;
   width: 9em;
   height: 9em;
   right: 0;
   visibility: hidden
 }
 
 @media (min-width:1174px) {
   .badge {
     font-size: 20px
   }
 }
 
 @media (min-width:2348px) {
   .badge {
     font-size: 40px
   }
 }
 
 .badge a {
   right: -50%;
   bottom: 50%;
   left: -50%;
   visibility: visible;
   background: #4b86c2;
   color: #fff;
   text-align: center;
   line-height: 2;
   -webkit-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg)
 }
 
 .region {
   display: none
 }
 
 @media screen {
   .shower.list {
     padding-top: 25px;
     width: 100%;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     background: #585a5e;
     position: absolute;
     clip: rect(0, auto, auto, 0)
   }
 }
 
 @media screen and (min-width:1174px) {
   .shower.list {
     padding-top: 50px
   }
 }
 
 @media screen and (min-width:2348px) {
   .shower.list {
     padding-top: 100px
   }
 }
 
 @media screen {
   .shower.list .caption {
     display: block
   }
   .shower.list .slide {
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     margin: 0 -768px -455px 25px;
     -webkit-transform: scale(.25);
     transform: scale(.25);
     border-radius: 2px;
     -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
     box-shadow: 0 20px 50px rgba(0, 0, 0, .3)
   }
 }
 
 @media screen and (min-width:1174px) {
   .shower.list .slide {
     margin: 0 -512px -270px 50px;
     -webkit-transform: scale(.5);
     transform: scale(.5)
   }
 }
 
 @media screen and (min-width:2348px) {
   .shower.list .slide {
     margin: 0 0 100px 100px;
     -webkit-transform: scale(1);
     transform: scale(1)
   }
 }
 
 @media screen {
   .shower.list .slide:hover {
     -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, .1), 0 20px 50px rgba(0, 0, 0, .3);
     box-shadow: 0 0 0 20px rgba(0, 0, 0, .1), 0 20px 50px rgba(0, 0, 0, .3)
   }
   .shower.list .slide.active {
     -webkit-box-shadow: 0 0 0 1px #376da3, 0 0 0 20px #4b86c2, 0 20px 50px rgba(0, 0, 0, .3);
     box-shadow: 0 0 0 1px #376da3, 0 0 0 20px #4b86c2, 0 20px 50px rgba(0, 0, 0, .3)
   }
   .shower.list .slide * {
     pointer-events: none
   }
   .shower.list .badge,
   .shower.list .slide footer {
     display: block
   }
   .shower.full {
     position: absolute;
     top: 50%;
     left: 50%;
     overflow: hidden;
     margin: -288px 0 0 -512px;
     width: 1024px;
     height: 576px;
     background: #000
   }
   .shower.full .slide {
     position: absolute;
     top: 0;
     left: 0;
     margin-left: -150%;
     visibility: hidden
   }
   .shower.full .slide.active {
     margin: 0;
     visibility: visible
   }
   .shower.full .slide pre code:not(:only-child).mark.next {
     visibility: visible;
     background: 0 0
   }
   .shower.full .slide pre code:not(:only-child).mark.next.active {
     background: rgba(88, 90, 94, .1)
   }
   .shower.full .slide .next {
     visibility: hidden
   }
   .shower.full .slide .next.active {
     visibility: visible
   }
   .shower.full .slide .shout.grow,
   .shower.full .slide .shout.shrink {
     opacity: 0;
     -webkit-transition: .4s ease-out;
     transition: .4s ease-out;
     -webkit-transition-property: opacity, -webkit-transform;
     transition-property: opacity, transform;
     transition-property: opacity, transform, -webkit-transform
   }
   .shower.full .slide .shout.grow {
     -webkit-transform: scale(.1) translateY(-50%);
     transform: scale(.1) translateY(-50%)
   }
   .shower.full .slide .shout.shrink {
     -webkit-transform: scale(10) translateY(-50%);
     transform: scale(10) translateY(-50%)
   }
   .shower.full .slide.active .shout.grow,
   .shower.full .slide.active .shout.shrink {
     opacity: 1;
     -webkit-transform: scale(1) translateY(-50%);
     transform: scale(1) translateY(-50%)
   }
   .shower.full .progress {
     display: block;
     -webkit-transform: translateZ(0);
     transform: translateZ(0)
   }
   .shower.full .region {
     position: absolute;
     clip: rect(0 0 0 0);
     overflow: hidden;
     margin: -1px;
     padding: 0;
     width: 1px;
     height: 1px;
     border: none;
     display: block
   }
 }