@font-face {
    font-family:'Open Sans';
    src:url(../fonts/OpenSans.woff) format("woff")
}

@font-face {
    font-weight:bold;
    font-family:'Open Sans';
    src:url(../fonts/OpenSans.Bold.woff) format("woff")
}

@font-face {
    font-style:italic;
    font-family:'Open Sans';
    src:url(../fonts/OpenSans.Italic.woff) format("woff")
}

@font-face {
    font-style:italic;
    font-weight:bold;
    font-family:'Open Sans';
    src:url(../fonts/OpenSans.Bold.Italic.woff) format("woff")
}

@font-face {
    font-family:'Open Sans Light';
    src:url(../fonts/OpenSans.Light.woff) format("woff")
}

@font-face {
    font-family:'Anka Coder';
    src:url(../fonts/Anka.Coder.woff) format("woff")
}

@font-face {
    font-style:italic;
    font-family:'Anka Coder';
    src:url(../fonts/Anka.Coder.Italic.woff) format("woff")
}

@font-face {
    font-family:'Interstate Light';
    src:url(../fonts/interstate-light.woff) format("woff")
}

@font-face {
    font-family:'Interstate Regular';
    src:url(../fonts/interstate-regular.woff) format("woff")
}

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 'Interstate Light', sans-serif
}

a {
    text-decoration:none
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Interstate Regular';
}

.caption {
    display:none;
    margin:0 0 60px;
    padding:0 50px 0 0;
    color:#555
}

.caption h1 {
    font:50px 'Interstate Light', sans-serif
}

.caption a {
    color:#0096d5
}

.caption a:hover {
    border-bottom:0.1em solid
}

.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:#0096d5;
    color:#FFF;
    text-align:center;
    -webkit-transform-origin:50% 100%;
    -moz-transform-origin:50% 100%;
    -ms-transform-origin:50% 100%;
    -o-transform-origin:50% 100%;
    transform-origin:50% 100%;
    -webkit-transform:rotate(45deg) translateY(-1em);
    -moz-transform:rotate(45deg) translateY(-1em);
    -ms-transform:rotate(45deg) translateY(-1em);
    -o-transform:rotate(45deg) translateY(-1em);
    transform:rotate(45deg) translateY(-1em)
}

.slide {
    position:relative;
    width:1024px;
    height:640px;
    background:url(../images/logo_blau.png) bottom right no-repeat #FFF;
    background:url(../images/trilobit_gmbh.svg) bottom right no-repeat #FFF;
    color:#000;
    -webkit-print-color-adjust:exact;
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none
}


.pagenumbers .slide:after {
    position:absolute;
    right:0;
    bottom:45px;
    left:0;
    color:#AAA;
    counter-increment:slide;
    content:counter(slide);
    text-align:center;
    line-height:1
}


.slide>div {
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    padding:100px 96px 0 128px;
    width:800px;
    height:540px
}

.debug .slide {
    background-image:url(../images/grid-16x10.svg)
}

.slide h2 {
    margin:0 0 58px;
    font:48px/1 'Interstate Regular', sans-serif
}

.slide p {
    margin:0 0 48px
}

.slide a {
    border-bottom:0.1em solid;
    color:#0096d5
}

.slide b,
.slide strong {
    font-weight:normal;
    font-family: 'Interstate regular', sans-serif
}

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

.slide kbd,
.slide code,
.slide samp {
    padding:2px 7px;
    background:rgba(0,0,0,0.1);
    -moz-tab-size:4;
    -o-tab-size:4;
    tab-size:4;
    line-height:1;
    font-family:'Anka Coder', monospace
}

.slide blockquote {
    font-style:italic
}

.slide blockquote:before {
    position:absolute;
    margin:-50px 0 0 -100px;
    color:#DDD;
    content:'\201C';
    line-height:1;
    font-size:200px
}

.slide blockquote+figcaption {
    margin:-48px 0 48px;
    font-style:italic;
    font-weight:bold;
    color: #0096d5;
    margin-top: 2.5em;
}

.slide ol,
.slide ul {
    margin:0 0 48px;
    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:#AAA;
    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\2009'
}

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

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

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

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

.slide pre code:before {
    position:absolute;
    margin-left:-50px;
    color:#AAA;
    counter-increment:code;
    content:counter(code,decimal-leading-zero) "."
}

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

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

.slide mark.important {
    padding:3px 7px 0;
    background:#0096d5;
    color:#FFF
    
    background:#C00;
    color:#FFF;
    font-weight:normal;
}

.slide mark.comment {
    color:#AAA
}

.slide table {
    margin:0 0 50px;
    width:100%;
    border-collapse:collapse;
    border-spacing:0
}

.slide table th,
.slide table td {
    background:url("data:image/gif;base64,R0lGODdhAQABAPAAAFKi3wAAACH/C1hNUCBEYXRhWE1QAz94cAAsAAAAAAEAAQBAAgJEAQA7") 0 100% repeat-x
}

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

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

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

.slide.cover:after,
.slide.shout:after {
    content:''
}

.slide.cover {
    background:#000
}

.slide.cover img,
.slide.cover svg,
.slide.cover video,
.slide.cover object,
.slide.cover canvas {
    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 {
    top:50%;
    width:100%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-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 {
    left:50%;
    height:100%;
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -o-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 {
    top:0;
    left:0;
    -webkit-transform:none;
    -moz-transform:none;
    -ms-transform:none;
    -o-transform:none;
    transform:none
}

.slide.cover h2 {
}

.slide.shout {
    background: url(../images/logo_weiss.png) bottom right no-repeat #0096d5
}

.slide.shout h2 {
    position:absolute;
    top:50%;
    left:128px;
    right:96px;
    color:#FFF;
    font-size:100px;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%)
}

.slide .place {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-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;
    -moz-transform:none;
    -ms-transform:none;
    -o-transform:none;
    transform:none
}

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

.slide .place.l,
.slide .place.r {
    -webkit-transform:translate(0, -50%);
    -moz-transform:translate(0, -50%);
    -ms-transform:translate(0, -50%);
    -o-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 96px 20px 128px;
    background:#fafac4;
    box-shadow:0 0 0 2px rgba(0,0,0,0.05);
    -webkit-transition:bottom 0.3s;
    -moz-transition:bottom 0.3s;
    -o-transition:bottom 0.3s;
    transition:bottom 0.3s
}

.slide:hover footer {
    bottom:0
}

@media screen {
    .list {
        position:absolute;
        clip:rect(0, auto, auto, 0);
        padding:50px 0 50px 50px;
        background:#e2e2e2 url(../images/mesh.png) 50% 0;
        text-align:center
    }

    .list .caption,.list .badge {
        display:block
    }

    .list .slide {
        position:relative;
        top:270px;
        display:inline-block;
        margin:-270px -462px 0 0;
        text-align:left;
        -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 0 1px #DDD;
        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 {
        top:100%;
        bottom:auto;
        padding-top:50px
    }

    .list .slide:hover:before {
        box-shadow:0 0 0 1px #eee,0 0 0 12px rgba(255,255,255,0.5)
    }

    .list .slide:target:before {
        box-shadow:0 0 10px 0 #3c96db,0 0 0 12px #0096d5
    }

    .list .slide:target:after {
        color:#0096d5
    }

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

    
    .list.pagenumbers .slide.cover:after,
    .list.pagenumbers .slide.shout:after {
        content:counter(slide)
    }
    

    .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 .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.right h2,
    .full .slide.shout.up h2 {
        opacity:0;
        -webkit-transition:all 0.4s ease-out;
        -moz-transition:all 0.4s ease-out;
        -o-transition:all 0.4s ease-out;
        transition:all 0.4s ease-out
    }

    .full .slide.shout.right:target h2,
    .full .slide.shout.up:target h2 {
        opacity:1;
        -webkit-transform:translateX(0) translateY(-50%);
        -moz-transform:translateX(0) translateY(-50%);
        -ms-transform:translateX(0) translateY(-50%);
        -o-transform:translateX(0) translateY(-50%);
        transform:translateX(0) translateY(-50%)
    }

    .full .slide.shout.right h2 {
        -webkit-transform:translateX(-100%) translateY(-50%);
        -moz-transform:translateX(-100%) translateY(-50%);
        -ms-transform:translateX(-100%) translateY(-50%);
        -o-transform:translateX(-100%) translateY(-50%);
        transform:translateX(-100%) translateY(-50%)
    }

    .full .slide.shout.up h2 {
        -webkit-transform:translateX(0) translateY(100%);
        -moz-transform:translateX(0) translateY(100%);
        -ms-transform:translateX(0) translateY(100%);
        -o-transform:translateX(0) translateY(100%);
        transform:translateX(0) translateY(100%)
    }

    .full .progress {
        position:absolute;
        right:0;
        bottom:0;
        left:0;
        z-index:1
    }

    .full .progress div {
        position:absolute;
        left:0;
        bottom:0;
        width:0;
        height:8px;
        background:#0096d5;
        -webkit-transition:width 0.2s linear;
        -moz-transition:width 0.2s linear;
        -o-transition:width 0.2s linear;
        transition:width 0.2s linear
    }
}

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

@media screen and (max-width: 1180px) {
    .list .slide {
        top:430px;
        margin:-430px -718px 0 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)
    }
}

@media screen and (max-width: 1180px) {
    .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)
    }
}

@media screen and (max-width: 1180px) {
    .list .slide:after {
        width:512px;
        -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)
    }
}

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