/**
 * W3C theme for Shower HTML presentation engine
 * shower-w3c v1.0.0 by Daniel Davis
 * Based on shower-ribbon v1.0.9, https://github.com/shower/ribbon
 * Copyright © 2010–2014 Vadim Makeev, http://pepelsbey.net
 * Licensed under MIT license: github.com/shower/shower/wiki/MIT-License
 */

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

ol,ul {
    list-style: none;
}

blockquote,q {
    quotes: none;
}

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

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    counter-reset: slide;
    font: 24px/2 "Helvetica Neue",Helvetica,Arial,Verdana,Geneva,sans-serif;
}

@media print {
    body {
        text-rendering: geometricPrecision;
    }
}

a {
    color: #005a9c;
    background: -webkit-gradient(linear,left bottom,left top,from(currentColor),color-stop(.09em,currentColor),color-stop(.09em,transparent),to(transparent))repeat-x;
    background: -webkit-linear-gradient(bottom,currentColor,currentColor .09em,transparent .09em,transparent)repeat-x;
    background: linear-gradient(to top,currentColor,currentColor .09em,transparent .09em,transparent)repeat-x;
    text-decoration: none;
}

.caption {
    display: none;
    margin: 0 0 50px;
    color: #3C3D40;
    text-shadow: 0 1px 1px #8D8E90;
}

.caption h1 {
    font: 700 48px/1 "Helvetica Neue",Helvetica,Arial,Verdana,Geneva,sans-serif;
}

.caption a {
    text-shadow: 0 -1px 1px #005a9c;
    background: 0 0;
}

.caption a:hover {
    color: #5e93c8;
}

.badge {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    overflow: hidden;
    visibility: hidden;
    width: 11em;
    height: 11em;
    line-height: 2.5;
    font-size: 15px;
}

.badge a {
    position: absolute;
    bottom: 50%;
    right: -50%;
    left: -50%;
    visibility: visible;
    background: #005a9c;
    -webkit-box-shadow: 0 0 1em rgba(0,0,0,.3);
    box-shadow: 0 0 1em rgba(0,0,0,.3);
    color: #FFF;
    text-decoration: none;
    text-align: center;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotate(45deg)translateY(-1em);
    -ms-transform: rotate(45deg)translateY(-1em);
    transform: rotate(45deg)translateY(-1em);
}

.badge a:hover {
    background: #568ec6;
}

.slide {
    position: relative;
    width: 1024px;
    height: 640px;
    background: #FFF;
    color: #333;
    -webkit-print-color-adjust: exact;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

@media print {
    .slide {
        page-break-before: always;
    }
}

.slide:after {
    position: absolute;
    top: 0;
    right: 119px;
    padding: 50px 0 0;
    width: 60px;
    height: 100px;
    background: url(../images/ribbon_w3c.svg) no-repeat;
    color: #FFF;
    counter-increment: slide;
    content: counter(slide);
    text-align: center;
    font-size: 20px;
}

.slide>div {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    padding: 105px 120px 0;
    width: 784px;
    height: 535px;
}

.slide h2 {
    margin: 0 0 37px;
    color: #333;
    font: 700 48px/1 "Helvetica Neue",Helvetica,Arial,Verdana,Geneva,sans-serif;
}

.slide p {
    margin: 0 0 50px;
}

.slide p.note {
    color: #666;
}

.slide b,.slide strong {
    font-weight: 700;
}

.slide i,.slide em {
    font-style: italic;
}

.slide kbd,.slide code,.slide samp {
    padding: 3px 8px;
    border-radius: 8px;
    background: #fafaa2;
    color: #333;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    line-height: 1;
    font-family: monospace;
}

.slide sub,.slide sup {
    position: relative;
    line-height: 0;
    font-size: 75%;
}

.slide sub {
    bottom: -.25em;
}

.slide sup {
    top: -.5em;
}

.slide blockquote {
    font-style: italic;
}

.slide blockquote:before {
    position: absolute;
    margin: -16px 0 0 -80px;
    color: #CCC;
    font: 200px/1 "Helvetica Neue",Helvetica,Arial,Verdana,Geneva,sans-serif;
    content: '\201C';
}

.slide blockquote+figcaption {
    margin: -50px 0 50px;
    font-style: italic;
    font-weight: 700;
}

.slide ol,.slide ul {
    margin: 0 0 50px;
    counter-reset: list;
}

.slide ol li,.slide ul li {
    text-indent: -2em;
}

.slide ol li:before,.slide ul li:before {
    display: inline-block;
    width: 2em;
    color: #BBB;
    text-align: right;
}

.slide ol ol,.slide ol ul,.slide ul ol,.slide ul ul {
    margin: 0 0 0 2em;
}

.slide ul>li:before {
    content: '\2022\00A0\00A0';
}

.slide ul>li:lang(ru):before {
    content: '\2014\00A0\00A0';
}

.slide ol>li:before {
    counter-increment: list;
    content: counter(list)".\00A0";
}

.slide pre {
    margin: 0 0 49px;
    padding: 1px 0 0;
    counter-reset: code;
    white-space: normal;
}

.slide pre code {
    display: block;
    padding: 0;
    background: 0 0;
    white-space: pre;
    line-height: 50px;
}

.slide pre code:before {
    position: absolute;
    margin: 0 0 0 -110px;
    width: 100px;
    color: #BBB;
    text-align: right;
    counter-increment: code;
    content: counter(code,decimal-leading-zero)".";
}

.slide pre code:only-child:before {
    content: '';
}

.slide pre mark {
    padding: 3px 8px;
    border-radius: 8px;
    background: #F7FCA0;
    color: #333;
    font-style: normal;
}

.slide pre mark.important {
    background: #005a9c;
    color: #FFF;
    font-weight: 400;
}

.slide pre mark.comment {
    padding: 0;
    background: 0 0;
    color: #666;
}

.slide table {
    margin: 1em !important;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.slide table th {
    text-align: left;
    font-weight: 700;
}

.slide table.striped tr:nth-child(even) {
    background: #EEE;
}

.slide.cover,.slide.shout {
    z-index: 1;
}

.slide.cover:after,.slide.shout:after {
    visibility: hidden;
}

.slide.cover {
    background: #000;
}

.slide.cover img,.slide.cover svg,.slide.cover video,.slide.cover object,.slide.cover canvas,.slide.cover iframe {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.slide.cover.w img,.slide.cover.w svg,.slide.cover.w video,.slide.cover.w object,.slide.cover.w canvas,.slide.cover.w iframe {
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.slide.cover.h img,.slide.cover.h svg,.slide.cover.h video,.slide.cover.h object,.slide.cover.h canvas,.slide.cover.h iframe {
    left: 50%;
    height: 100%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.slide.cover.w.h img,.slide.cover.w.h svg,.slide.cover.w.h video,.slide.cover.w.h object,.slide.cover.w.h canvas,.slide.cover.w.h iframe {
    top: 0;
    left: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.slide.shout h2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 1;
    font-size: 140px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.slide.shout h2 a {
    background: -webkit-gradient(linear,left bottom,left top,from(currentColor),color-stop(.11em,currentColor),color-stop(.11em,transparent),to(transparent))repeat-x;
    background: -webkit-linear-gradient(bottom,currentColor,currentColor .11em,transparent .11em,transparent)repeat-x;
    background: linear-gradient(to top,currentColor,currentColor .11em,transparent .11em,transparent)repeat-x;
}

.slide .place {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.slide .place.t.l,.slide .place.t.r,.slide .place.b.r,.slide .place.b.l {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.slide .place.t,.slide .place.b {
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

.slide .place.l,.slide .place.r {
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

.slide .place.t,.slide .place.t.l,.slide .place.t.r {
    top: 0;
}

.slide .place.r {
    right: 0;
    left: auto;
}

.slide .place.b,.slide .place.b.r,.slide .place.b.l {
    top: auto;
    bottom: 0;
}

.slide .place.l {
    left: 0;
}

.slide footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -640px;
    z-index: 1;
    display: none;
    padding: 20px 120px 4px;
    background: #fafaa2;
    -webkit-box-shadow: 0 0 0 2px #f0f0ac inset;
    box-shadow: 0 0 0 2px #f0f0ac inset;
    -webkit-transition: bottom .3s;
    transition: bottom .3s;
}

.slide footer p {
    margin: 0 0 16px;
}

.slide footer code {
    background: #fefeeb;
}

.slide:hover footer {
    bottom: 0;
}

@media screen {
    .list {
        position: absolute;
        clip: rect(0,auto,auto,0);
        padding: 80px 0 40px 100px;
        background: #585a5e url(../images/linen.png);
    }
}

@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-resolution:192dpi) {
    .list {
        background-image: url(../images/linen@2x.png);
        -webkit-background-size: 256px;
        background-size: 256px;
    }
}

@media screen {
    .list .caption,.list .badge {
        display: block;
    }

    .list .slide {
        float: left;
        margin: 0 -412px -220px 0;
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5);
    }
}

@media screen and (max-width:1324px) {
    .list .slide {
        margin: 0 -688px -400px 0;
        -webkit-transform: scale(.25);
        -ms-transform: scale(.25);
        transform: scale(.25);
    }
}

@media screen {
    .list .slide:before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 512px;
        height: 320px;
        -webkit-box-shadow: 0 0 30px rgba(0,0,0,.005),0 20px 50px rgba(42,43,45,.6);
        box-shadow: 0 0 30px rgba(0,0,0,.005),0 20px 50px rgba(42,43,45,.6);
        border-radius: 2px;
        content: '';
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scale(2);
        -ms-transform: scale(2);
        transform: scale(2);
    }
}

@media screen and (max-width:1324px) {
    .list .slide:before {
        width: 256px;
        height: 160px;
        -webkit-transform: scale(4);
        -ms-transform: scale(4);
        transform: scale(4);
    }
}

@media screen {
    .list .slide:after {
        top: auto;
        right: auto;
        bottom: -80px;
        left: 120px;
        padding: 0;
        width: auto;
        height: auto;
        background: 0 0;
        color: #3C3D40;
        text-shadow: 0 1px 1px #8D8E90;
        font-weight: 700;
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scale(2);
        -ms-transform: scale(2);
        transform: scale(2);
    }
}

@media screen and (max-width:1324px) {
    .list .slide:after {
        bottom: -104px;
        -webkit-transform: scale(4);
        -ms-transform: scale(4);
        transform: scale(4);
    }
}

@media screen {
    .list .slide:hover:before {
        -webkit-box-shadow: 0 0 0 10px rgba(42,43,45,.3),0 20px 50px rgba(42,43,45,.6);
        box-shadow: 0 0 0 10px rgba(42,43,45,.3),0 20px 50px rgba(42,43,45,.6);
    }

    .list .slide:target:before {
        -webkit-box-shadow: 0 0 0 10px #005a9c,0 20px 50px rgba(42,43,45,.6);
        box-shadow: 0 0 0 10px #005a9c,0 20px 50px rgba(42,43,45,.6);
    }
}

@media screen {
    .list .slide:target:after {
        text-shadow: 0 1px 1px rgba(42,43,45,.6);
        color: #fff;
    }

    .list .slide>div:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        content: '';
    }

    .list .slide.cover:after,.list .slide.shout:after {
        visibility: visible;
    }

    .list .slide footer {
        display: block;
    }

    .full {
        position: absolute;
        top: 50%;
        left: 50%;
        overflow: hidden;
        margin: -320px 0 0 -512px;
        width: 1024px;
        height: 640px;
        background: #000;
    }

    .full.debug:after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        background: url(../images/grid-16x10.svg) no-repeat;
        content: '';
    }

    .full .slide {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 150%;
    }

    .full .slide .next {
        visibility: hidden;
    }

    .full .slide .next.active {
        visibility: visible;
    }

    .full .slide:target {
        margin: 0;
    }

    .full .slide.shout.grow h2,.full .slide.shout.shrink h2 {
        opacity: 0;
        -webkit-transition: all .4s ease-out;
        transition: all .4s ease-out;
    }

    .full .slide.shout.grow:target h2,.full .slide.shout.shrink:target h2 {
        opacity: 1;
        -webkit-transform: scale(1)translateY(-50%);
        -ms-transform: scale(1)translateY(-50%);
        transform: scale(1)translateY(-50%);
    }

    .full .slide.shout.grow h2 {
        -webkit-transform: scale(.1)translateY(-50%);
        -ms-transform: scale(.1)translateY(-50%);
        transform: scale(.1)translateY(-50%);
    }

    .full .slide.shout.shrink h2 {
        -webkit-transform: scale(10)translateY(-50%);
        -ms-transform: scale(10)translateY(-50%);
        transform: scale(10)translateY(-50%);
    }

    .full .progress {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        height: 10px;
        z-index: 1;
    }

    .full .progress div {
        position: absolute;
        left: -20px;
        top: -10px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-bottom-color: #005a9c;
        -webkit-transition: width .2s linear;
        transition: width .2s linear;
    }

    .full .progress div[style$='100%;'] {
        padding-left: 10px;
    }
}

@page {
    margin:0;size:1024px 640px;
}