html,
body,
div,
span,
p,
a,
del,
em,
img,
ol,
ul,
li,
fieldset,
form,
label {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    color: #fff;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

html,
body {
    line-height: 1;
    min-height: 100%;
	height: 100%!important;
}
body {
    background: #000;
    /*background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%);
	background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%);
	background: -o-linear-gradient(top, #eeeeee, #cccccc 100%);
	background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%);
	background: linear-gradient(top, #eeeeee, #cccccc 100%);*/
    background-attachment: fixed;
}

ol,
ul {
    list-style: none;
}

p {
    line-height: 1.5em;
}

q {
    font-style: italic;
    color: #333;
}


#progress {
    height: 2%;
    background: #444;
    bottom: 0;
    z-index: 200;
}

#scrollbar {
    position: fixed;
    right: 2px;
    height: 50px;
    width: 6px;
    background: #444;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.6);
    z-index: 300;
    border-radius: 3px;
}

.skrollr-desktop #scrollbar {
    display: none;
}

#bg1,
#bg2,
#bg3 {
    z-index: 50;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/bubbles.png) repeat 0 0;
}

#bg2 {
    z-index: -1;
    background-image: url(../images/stars-2.png);
}

#bg3 {
    z-index: -2;
    background-image: url(../images/stars.png);
}

#landing {
    width: 100%;
    height: 100vh;
}

#landing .arrows {
    font-size: 2em;
    color: #09f;
}

#clouds-left {
    -moz-animation: floating-left 5s infinite;
    -webkit-animation: floating-left 5s infinite;
    -o-animation: floating-left 5s infinite;
    animation: floating-left 5s infinite;
}

#clouds-right {
    -moz-animation: floating-right 5s infinite;
    -webkit-animation: floating-right 5s infinite;
    -o-animation: floating-right 5s infinite;
    animation: floating-right 5s infinite;
}

@keyframes floating-left {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-2%, 5%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes floating-right {
    0% {
        transform: translate(-2%, 5%);
    }

    50% {
        transform: translate(0);
    }

    100% {
        transform: translate(-2%, 5%);
    }
}

#ufo-holder {
    top: 0;
    width: 35%;
}

#ufo {
    -moz-animation: ufo-hover 2s infinite;
    -webkit-animation: ufo-hover 2s infinite;
    -o-animation: ufo-hover 2s infinite;
    animation: ufo-hover 2s infinite;
}

@keyframes ufo-hover {
    0% {
        transform: rotateZ(-5deg);
    }

    50% {
        transform: rotateZ(5deg);
    }

    100% {
        transform: rotateZ(-5deg);
    }
}

.cloud-bg-1 {
    background: url(../images/cloud-bg-1.png) top center no-repeat;
    background-size: 100%;
}

.banner {
    background: url(../images/banner-bg.png) center center no-repeat;
    background-size: contain;
    width: 28em;
    margin-top: 2em;
}

.banner > div {
    padding: 0.5em 6em 4em 6em;
}

#transform {
    width: 70%;
    left: 50%;
    top: 20%;
    margin-left: -35%;
    text-align: center;
    font-size: 150%;

    transform-origin(50%, 50%);
}

#properties {
    width: 100%;
    height: 100%;
    padding-top: 10%;
    text-align: center;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#easing_wrapper {
    width: 100%;
    height: 100%;
}

#easing {
    top: 10%;
    width: 50%;
    z-index: 101;
}

.drop {
    background: #09f;
    font-weight: bold;
    padding: 1em;
}

#download {
    width: 80%;
    left: 10%;
    height: 80%;
    padding: 3em;
    border: 0 solid #222;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.twitter-share-button,
.twitter-follow-button {
    vertical-align: middle;
}

/*
.custom {
    padding-bottom: 2em;
}*/