/*
	Ribbon theme for Shower HTML presentation template: github.com/pepelsbey/shower
	Copyright © 2010–2012 Vadim Makeev, pepelsbey.net
	Licensed under MIT license: github.com/pepelsbey/shower/wiki/License-En
*/
@import url(http://fonts.googleapis.com/css?family=PT+Sans|PT+Sans+Narrow|PT+Mono&subset=latin,cyrillic);
@import url(reset.css);
@import url(user.css);

body
{
    counter-reset: paging;
    font: 25px/2 'PT Sans', Arial;
}

/* Slide
------------------------------- */
.slide
{
    padding: 71px 120px 0;
    width: 784px;
    height: 569px;
    background: #FFF;
    color: #000;
}

.slide:after
{
    position: absolute;
    counter-increment: paging;
    content: counter(paging, decimal-leading-zero);
    line-height: 1;
}

.slide.first,
.debug .slide.first
{

}

.slide.first .yandex,
.slide.last .yandex
{
    width: 200px;
}

.slide.null
{
    text-align: center;
    line-height: 640px;
}

.slide.null .yandex
{
    width: 60%;
}

.slide.first h2
{
    font-size: 90px;

    position: absolute;
    top: 50%;
    left: 120px;

    width: 550px;

    text-align: left;
    line-height: 1;

    color: #000;

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.slide.first .info
{
    position: absolute;
    bottom: 50px;
    left: 120px;
    width: 450px;
    font-size: 75%;
}

.slide.first .info p
{
    margin: 0;
}

/* Debug */
.debug .slide
{
    background: url(../images/grid.png) no-repeat, #FFF;
}

/* Header */
.slide h2
{
    margin: 0 0 37px;
    font: bold 50px/50px Textbook, 'PT Sans', Arial;
    position: relative;
}

/* Text */
.slide p
{
    margin: 0 0 30px;
}

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

.slide a
{
    border-bottom: 0.1em solid;
    color: #0174A7;
    text-decoration: none;
}

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

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

.slide kbd,
.slide code,
.slide samp
{
    padding: 3px 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #FAFAA2;
    color: #000;
    -webkit-tab-size: 4;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    line-height: 1;
    font-family: 'PT Mono', monospace;
}

/* Quote */
.slide blockquote
{
    font-style: italic;
}

.slide blockquote:before
{
    position: absolute;
    margin: -16px 0 0 -80px;
    color: #CCC;
    font: 200px/1 Textbook, 'PT Sans', Arial;
    content: '\201C';
}

.slide blockquote + figcaption
{
    margin: -30px 0 40px;
    font-style: italic;
    font-weight: bold;
    text-align: right;
}

/* Lists */
.slide ol,
.slide ul
{
    margin: 0 0 30px;
    counter-reset: list;
}

.slide ul ul,
.slide ol ul,
.slide ol ol,
.slide ul ol
{
    margin: 0 0 0 39px;
}

.slide ol li,
.slide ul li
{
    text-indent: -13px;
}

.slide ol > li:before,
.slide ul > li:before
{
    display: inline-block;
    width: 13px;
}

.slide ol > li.red:before,
.slide ul > li.red:before
{
    color: #F00;
}

.slide ol > li.green:before,
.slide ul > li.green:before
{
    color: #0F0;
}

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

.slide ul ul > li:before,
.slide ol ul > li:before
{
    content: '– ';
}

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

.slide ol ol > li:before,
.slide ol ul > li:before,
.slide ul ul > li:before,
.slide ul ol > li:before
{
    color: #000;
}

/* Double */
.slide ol.double,
.slide ul.double
{
    margin-left: -25px;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
}

.slide ol.double li,
.slide ul.double li
{
    padding: 0 30px 0 1em;
}

/* Code */
.slide pre
{
    margin: 0 0 50px;
    counter-reset: code;
    white-space: normal;
}

.slide pre code
{
    display: block;
    padding: 0;
    background: none;
    white-space: pre;
    line-height: 32px;
    font-size: 20px;
}

.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 mark
{
    margin: 0 -8px;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(236, 249, 0, .37);
    color: #000;
    font-style: normal;
}

.slide pre .important
{
    margin: 0;
    background: #C00;
    color: #FFF;
    font-weight: normal;
}

.slide pre .comment
{
    margin: 0;
    padding: 0;
    background: none;
    color: #999;
}

/* Cover */
.slide.cover
{
    background: #000;
    overflow: hidden;
}

.slide.cover.with-header h2
{
    background: rgba(0, 0, 0, 0.6);
    bottom: 5%;
    color: #fff;
    left: 0;
    line-height: 250%;
    margin: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

.slide.cover img,
.slide.cover svg,
.slide.cover video,
.slide.cover object
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    clip: rect(0, 1024px, 640px, 0);
}

.slide.cover.w img,
.slide.cover.w svg,
.slide.cover.w video,
.slide.cover.w object
{
    width: 100%;
}

.slide.cover.h img,
.slide.cover.h svg,
.slide.cover.h video,
.slide.cover.h object
{
    height: 100%;
}

.slide.cover.c img,
.slide.cover.c svg,
.slide.cover.c video,
.slide.cover.c object
{
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.slide.cover.m img,
.slide.cover.m svg,
.slide.cover.m video,
.slide.cover.m object
{
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* Shout */
.slide.shout
{
    background-image: none;
}

.slide.shout h2
{
    position: absolute;
    top: 50%;
    left: 70px;
    right: 70px;
    text-align: left;
    line-height: 1;
    font-size: 80px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* Place */
.place
{
    position: absolute;
}

.place.t,
.place.m,
.place.b
{
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.place.t
{
    top: 0;
}

.place.b
{
    bottom: 0;
}

.place.l,
.place.m,
.place.r
{
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.place.l
{
    left: 0;
}

.place.m
{
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

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

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

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

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

/* List
------------------------------- */
.list
{
    padding: 80px 0 40px 100px;
    background: #585A5E url(../images/linen.png);
}

.list:after
{
    clear: both;
    display: block;
    content: '';
}

/* Caption */
.list .caption
{
    margin: 0 0 50px;
    color: #3C3D40;
    text-shadow: 0 1px 1px #8D8E90;
}

.list .caption h1
{
    font: bold 50px/1 'PT Sans Narrow', sans-serif;
}

.list .caption a
{
    color: #4B86C2;
    text-shadow: 0 -1px 1px #1F3F60;
    text-decoration: none;
}

.list .caption a:hover
{
    color: #5ca4ed;
}

/* Slide */
.list .slide
{
    position: relative;
    float: left;
    margin: 0 -432px -220px 0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
}

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

.list .slide:after
{
    bottom: -100px;
    left: 120px;
    color: #3C3D40;
    text-shadow: 0 2px 1px #8D8E90;
    font-weight: bold;
    font-size: 50px;
}

.list .slide:hover:before
{
    box-shadow: 0 0 0 10px rgba(42, 43, 45, 0.3), 0 20px 50px rgba(42, 43, 45, 0.6);
}

.list .slide:target:before
{
    box-shadow: 0 0 0 1px #305F8D, 0 0 0 10px #3C7CBD, 0 20px 50px rgba(42, 43, 45, 0.6);
}

.list .slide:target:after
{
    text-shadow: 0 2px 1px rgba(42, 43, 45, 0.6);
    color: #4B86C2;
}

@media all and (max-width: 1304px)
{

    .list .slide
    {
        margin: 0 -718px -400px 0;
        -webkit-transform: scale(0.25);
        -moz-transform: scale(0.25);
        -ms-transform: scale(0.25);
        -o-transform: scale(0.25);
        transform: scale(0.25);
    }

    .list .slide:before
    {
        width: 256px;
        height: 160px;
        -webkit-transform: scale(4);
        -moz-transform: scale(4);
        -ms-transform: scale(4);
        -o-transform: scale(4);
        transform: scale(4);
    }

    .list .slide:after
    {
        bottom: -180px;
        text-shadow: 0 4px 2px #8D8E90;
        font-size: 100px;
    }

    .list .slide:target:before
    {
        box-shadow: 0 0 0 1px #305F8D, 0 0 0 10px #3C7CBD, 0 20px 50px rgba(42, 43, 45, 0.6);
    }

    .list .slide:target:after
    {
        text-shadow: 0 4px 2px rgba(42, 43, 45, 0.6);
    }
}

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

.full .caption
{
    display: none;
}

.full .slide
{
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}

.full .slide:after
{
    position: absolute;
    left: 120px;
    bottom: 60px;
    color: #CCC;
    line-height: 18px;
    font-size: 25px;
}

.full .slide:target
{
    visibility: visible;
}

/* Next Lists */
.full .slide li.next
{
    opacity: 0;
}

.full .slide li.next.active
{
    opacity: 1;
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}

/* Cover */
.full .slide.cover,
.full .slide.first,
.full .slide.null,
.full .slide.shout
{
    z-index: 1;
}

.full .slide.cover:after,
.full .slide.first:after,
.full .slide.null:after,
.full .slide.shout:after
{
    content: '';
}

/* Shout */
{
    z-index: 1
;
}
{
    content: ''
;
}

/* Progress */
.full .progress
{
    position: absolute;
    right: 118px;
    bottom: 40px;
    left: 118px;
}

.full .progress div
{
    width: 0;
    height: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    background: rgba(177, 177, 177, 0.4);
    -webkit-transition: width 0.2s linear;
    -moz-transition: width 0.2s linear;
    -ms-transition: width 0.2s linear;
    -o-transition: width 0.2s linear;
    transition: width 0.2s linear;
}

.first
{
    padding: 0;
    width: 1024px;
    height: 640px;
}

.arrow
{
    padding: 71px 120px 0;
    position: relative;
    height: 569px;
}

.arrow:after,
.arrow:before
{
    position: absolute;

    content: '';

    right: 150px !important;
    left: 0;

}

.arrow:after
{
    top: 0;
    bottom: 50%;

    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    border-right: 2px solid #888;
}

.arrow:before
{
    top: 50% !important;
    bottom: 0;

    -webkit-transform: skewX(340deg);
    transform: skewX(340deg);
    border-right: 2px solid #888;
}

pre.small
{
    font-size: 16px;
}

.slide pre.small code
{
    line-height: 30px;
}

.full .slide:after
{
    bottom: 30px;
    left: auto;
    right: 30px;
}

.full .progress
{
    left: 0;
    bottom: 0;
    right: 0;
}

.full .progress div
{
    border-radius: 0;
}