html,
body {
    height: 100%;
    width: 100%
}

body {
    height: 100%;
    background: #000
}

#space {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 1
}

.top-bar-container,
.tab-bar {
    margin-bottom: 0;
    position: absolute;
    z-index: 99999
}

.reveal {
    z-index: 9999;
    font-family: "Open Sans";
    font-size: 36px;
    font-weight: normal;
    letter-spacing: -0.02em;
    color: #eee
}

::selection {
    color: #fff;
    background: #ff5e99;
    text-shadow: none
}

.reveal a:not(.image) {
    color: #13daec;
    text-decoration: none;
    -webkit-transition: color .15s ease;
    -moz-transition: color .15s ease;
    -ms-transition: color .15s ease;
    -o-transition: color .15s ease;
    transition: color .15s ease
}

.reveal a:not(.image):hover {
    color: #71e9f4;
    text-shadow: none;
    border: none
}

.reveal .roll span:after {
    color: #fff;
    background: #0d99a5
}

.reveal section {
    height: 960px;
    background: url(../assets/slides/tv.svg) no-repeat center center;
    padding: 150px
}

.reveal section img.overlay {
    margin-top: 95px
}

.reveal section .wrapper {
    position: absolute;
    margin: auto;
    height: 675px;
    width: 850px;
    left: 0;
    right: 0;
    bottom: 0;
    top: -1px;
    padding-top: 40px;
    background-size: contain !important
}

.reveal section .blue-frame {
    background: url(../assets/slides/blue-frame.png) no-repeat
}

.reveal section .green-frame {
    background: url(../assets/slides/green-frame.png) no-repeat
}

.reveal section .yellow-frame {
    background: url(../assets/slides/yellow-frame.png) no-repeat
}

.reveal section .park-frame {
    background: url(../assets/slides/park-frame.svg) no-repeat
}

.reveal section .desert-frame {
    background: url(../assets/slides/desert-frame.svg) no-repeat
}

.reveal section .slide-title {
    margin-top: 20px
}

.reveal section .slide-title .badge {
    margin-bottom: 10px
}

.reveal section .slide-title h2 {
    font-family: "Melbourne";
    font-weight: bold;
    font-size: 50px;
    text-transform: uppercase;
    color: #333
}

.reveal section .slide-title span.byline {
    font-family: "Melbourne";
    font-size: 37px;
    color: #333
}

.reveal section .slide-content {
    position: relative;
    margin-top: 80px;
    text-align: center;
    margin: 80px auto 0 auto
}

.reveal section p.text {
    color: #333;
    font-size: 17px;
    font-weight: bold
}

section.slide-01 .logo {
    display: block;
    margin: 165px 0 35px
}

section.slide-01 .characters {
    margin-bottom: 20px
}

section.slide-01 .characters span {
    width: 215px;
    margin: 0 10px;
    display: inline-block;
    text-align: center;
    vertical-align: bottom
}

section.slide-01 a.next-inline {
    color: #8a8a8a;
    font-size: 20px;
    font-family: "Melbourne";
    text-transform: uppercase;
    border: 1px solid #ccc;
    padding: 8px 10px 3px 10px
}

section.slide-01 a.next-inline:hover {
    color: #8a8a8a;
    border: 1px solid #8a8a8a
}

section.slide-01 a.next-inline img {
    width: 20px;
    margin: 0 7px
}

section.slide-02 .caption {
    position: absolute;
    top: -25px;
    left: 160px
}

section.slide-02 .characters {
    margin: 85px 0 0 250px
}

section.slide-03 .slide-content {
    margin-top: 30px
}

section.slide-03 .bubbles {
    display: block;
    position: relative;
    width: 400px;
    height: 300px;
    margin: 0 auto
}

section.slide-03 .bubbles img {
    position: absolute
}

section.slide-03 .bubbles img.computer {
    top: 15px;
    left: 150px
}

section.slide-03 .bubbles img.clock {
    top: 120px;
    left: 85px
}

section.slide-03 .bubbles img.happy {
    left: 0px
}

section.slide-03 .bubbles img.chairman {
    top: 100px
}

section.slide-04 .slide-content {
    width: 550px;
    margin: 30px auto 0 auto
}

section.slide-04 .icon {
    position: absolute
}

section.slide-04 .icon-chef {
    left: 0;
    top: 40px
}

section.slide-04 .icon-you {
    left: 180px;
    z-index: 20
}

section.slide-04 .icon-doctor {
    right: 0;
    top: 40px
}

section.slide-04 .icon-police {
    top: 200px;
    left: 115px
}

section.slide-04 .icon-tradesman {
    top: 200px;
    right: 115px
}

section.slide-05 .slide-content {
    margin-top: 50px;
    width: 650px;
    height: 300px
}

section.slide-05 .slide-content img {
    position: absolute
}

section.slide-05 .simple {
    top: 10px;
    left: 200px;
    z-index: 14
}

section.slide-05 .night {
    top: 10px;
    left: 355px;
    z-index: 15
}

section.slide-05 .serif {
    left: 0;
    bottom: 0;
    z-index: 10
}

section.slide-05 .sky {
    left: 150px;
    bottom: 0;
    z-index: 11
}

section.slide-05 .default {
    left: 300px;
    bottom: 0;
    z-index: 12
}

section.slide-05 .beige {
    left: 450px;
    bottom: 0;
    z-index: 13
}

section.slide-06 .slide-content {
    margin-top: 50px
}

section.slide-06 .slide-content span {
    display: inline-block;
    width: 230px;
    height: 160px
}

section.slide-06 p.text {
    margin-top: 10px;
    font-weight: normal;
    font-size: 26px
}

section.slide-07 .slide-content img {
    position: absolute;
    top: 250px;
    left: 0;
    margin: auto;
    right: 0;
    bottom: 0
}

section.slide-07 img.first {
    z-index: 10;
    top: 150px
}

section.slide-07 .second {
    z-index: 21
}

section.slide-07 .third {
    z-index: 22
}

section.slide-08 .slide-content {
    margin-top: 20px
}

section.slide-08 .slide-content img {
    position: absolute
}

section.slide-08 .slide-content .create {
    top: 10px;
    left: 125px
}

section.slide-08 .slide-content .feature {
    top: 10px;
    right: 60px
}

section.slide-08 .slide-content .mobile {
    top: 140px;
    left: 320px
}

section.slide-09 .slide-content a.documentation,
section.slide-09 .slide-content a.examples,
section.slide-09 .slide-content a.contact,
section.slide-09 .slide-content a.buynow {
    position: absolute
}

section.slide-09 .slide-content a.buynow {
    left: 270px
}

section.slide-09 .slide-content a.buynow:hover {
    transform: rotate(5deg)
}

section.slide-09 .slide-content a.documentation {
    top: 220px;
    left: 300px
}

section.slide-09 .slide-content a.documentation:hover {
    transform: rotate(-2deg)
}

section.slide-09 .slide-content a.examples {
    top: 100px;
    left: 280px
}

section.slide-09 .slide-content a.examples:hover {
    transform: rotate(2deg)
}

section.slide-09 .slide-content a.contact {
    right: 70px;
    top: 230px
}

section.slide-09 .slide-content a.contact:hover {
    transform: rotate(-2deg)
}

.reveal section img {
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    max-width: inherit;
    max-height: inherit
}

.parallax-viewport {
    position: fixed;
    overflow: hidden
}

.layer {
    position: absolute
}

.pres-layer {
    width: 100%;
    height: 100%
}

.pres-layer .pres {
    width: 100%;
    height: 100%
}

.earth {
    z-index: 99999
}

.moon {
    position: absolute;
    left: -30px;
    top: 10%;
    z-index: 20
}

.saturn {
    z-index: 20
}

.aliens {
    position: absolute;
    bottom: 150px;
    left: 100px;
    z-index: 99999
}

.reveal .navigate-next,
.reveal .navigate-prev {
    position: absolute;
    z-index: 999;
    top: 50%;
    margin-top: -69px
}

.reveal .navigate-next {
    margin-left: 440px;
    transform: rotate(180deg)
}

.reveal .navigate-next:hover #next #Fill-1 {
    fill: #c73557
}

.reveal .navigate-prev {
    margin-left: -500px
}

.reveal .navigate-prev:hover #prev #Fill-1 {
    fill: #c73557
}

.reveal .progress {
    background: rgba(206, 72, 103, .2)
}

.reveal .progress span {
    background: #13daec;
    -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
    -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
    -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
    -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
    transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985)
}

.reveal .slide-number {
    color: #13daec
}