html, body {
	height: 100%;
	margin: 0;
	padding: 0;
    color: white;
    font-family: Asap, helvetica, sans-serif;
    text-align: left;  
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: black; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../img/loading_spinner_04.gif); /* path to your loading animation */
    background-size: 64px 64px;
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}
 /* Preloader Ende */

p {
    margin: 0;
    padding: 1.3em 0 0 1.3em;
}

a {
    font-weight: 700;
    text-decoration: none;
    color: white;
}

a:hover {
    text-decoration: underline;
}

.slide h3 {
    padding: 0;
    margin: 0;
    font-size: 2em;
    font-weight: 700;
    position: absolute;
    top: 2em;
    left: 2em;
    text-shadow: 1px 2px 0px rgba(170,170,170,0.9);
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
}

.logo {
    position: fixed;
    top: 2em;
    right: 3.5em;
    z-index: 1;
}

p.logo img {
    width: 50px;
    height: 50px;
    -webkit-filter: brightness(100%);
  -webkit-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
       -o-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
          transition: all 0.2s ease;
    
}

p.logo img:hover {
    -webkit-filter: brightness(0%);
    -moz-filter: brightness(0%);
    filter: brightness(0%);
    
}

.tweetbutton {
    position: fixed;
    bottom: 2em;
    right: 0.5em;
    z-index: 1;
}

#landingwrapper {
    width: 80%;
    margin: 0 auto 0 auto;
    text-align: center;
}

#landingwrapper h1 {
    font-size: 3.7em;
    margin: 0;
    padding: 0;
    /*text-shadow: 2px 2px 4px #333;*/
    text-shadow: 0px 3px 0px rgba(170,170,170,0.9);
}


#landingwrapper p {
    font-size: 1.4em;
    text-shadow: 2px 2px 4px #333;
    line-height: 1.5em;
}

#animationwrapper {
    margin: 0 auto 0 auto;
    width: 800px;
    /*border: 1px solid rgba(255, 255, 255, 1);*/
}

#descwrapper {
    width: 50%;
    margin: 0 auto 0 auto;
    padding: 2em;
    background-color:rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0px 5px 20px 0px rgba(10, 10, 10, 0.4);
	-moz-box-shadow:    0px 5px 20px 0px rgba(10, 10, 10, 0.4);
	box-shadow:         0px 5px 20px 0px rgba(10, 10, 10, 0.4);
    line-height: 1.5em;
}

#descwrapper h2 {
    margin: 0;
    padding: 0 0 1em 0;
    text-shadow: 2px 2px 4px #333;
}

#descwrapper p {
    font-size: 1em;
    padding: 0;
    margin: 0;
    text-shadow: 1px 1px 2px #333;
    text-align: justify;
}

div#fullpage iframe {
	-webkit-box-shadow: 0px 5px 25px 0px rgba(10, 10, 10, 0.4);
	-moz-box-shadow:    0px 5px 25px 0px rgba(10, 10, 10, 0.4);
	box-shadow:         0px 5px 25px 0px rgba(10, 10, 10, 0.4);
    background-color: black;
    border: 1px solid white;
}

#iframerep {
    -webkit-box-shadow: 0px 10px 30px 0px rgba(10, 10, 10, 0.4);
	-moz-box-shadow:    0px 10px 30px 0px rgba(10, 10, 10, 0.4);
	box-shadow:         0px 10px 30px 0px rgba(10, 10, 10, 0.4);
    background-color: black;
}



/* BG Animation */
/*
#LandingPage, #DayOne, #DayTwo, #DayThree, #DayFour, #DayFive, #DaySix, #DaySeven, #DayEight, #DayNine, #DayTen, #DayEleven, #DayTwelve, #DayThirteen, #DayFourteen, #DayFifteen {

}
*/

@-webkit-keyframes animatedBg {
    0%   { 
        -webkit-transform: translateX(0);
    }    
    100% { 
        -webkit-transform: translateX(256px);
    }
}

@-moz-keyframes animatedBg {
    0%   { 
        -moz-transform: translateX(0);
    }    
    100% { 
        -moz-transform: translateX(256px);
    }
}

.landingbg, .bgd1, .bgd2, .bgd3, .bgd4, .bgd5, .bgd6, .bgd7, .bgd8, .bgd9, .bgd10, .bgd11, .bgd12, .bgd13, .bgd14, .bgd15 {
-webkit-animation: animatedBg 20s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
    
-moz-animation: animatedBg 20s linear infinite;
-moz-transform: translate3d(0, 0, 0);
/* Positioning */
position: absolute;
left: -256px;
right: 0;
top: -256px;
bottom: 0;
}


/* BG FOR BOXES */
#LandingPage {
background: url(../img/bg_radial.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.landingbg {
background: url(../img/landing_bg.png) 0% 0% repeat;
background-size: 256px 256px;
z-index: -1;
}

.bgd1 {
background-image: url(../img/bg_zoetrope.png);
background-size: 256px 256px;
z-index: -2;
}

.bgd2 {
background-image: url(../img/bg_scanimation.png);
background-size: 256px 256px;
z-index: -3;
}

.bgd3 {
background-image: url(../img/bg_digital2d.png);
background-size: 256px 256px;
z-index: -4;
}

.bgd4 {
background-image: url(../img/bg_chalk.png);
background-size: 256px 256px;
z-index: -5;
}

.bgd5 {
background-image: url(../img/bg_scissor.png);
background-size: 256px 256px;
z-index: -6;
}

.bgd6 {
background-image: url(../img/bg_sand.png);
background-size: 256px 256px;
z-index: -7;
}

.bgd7 {
background-image: url(../img/bg_pscope.png);
background-size: 256px 256px;
z-index: -8;
}

.bgd8 {
background-image: url(../img/bg_clay.png);
background-size: 256px 256px;
z-index: -9;
}

.bgd9 {
background-image: url(../img/bg_flipbook.png);
background-size: 256px 256px;
z-index: -10;
}

.bgd10 {
background-image: url(../img/bg_squiggle.png);
background-size: 256px 256px;
z-index: -11;
}

.bgd11 {
background-image: url(../img/bg_film.png);
background-size: 256px 256px;
z-index: -12;
}

.bgd12 {
background-image: url(../img/bg_lightpainting.png);
background-size: 256px 256px;
z-index: -13;
}

.bgd13 {
background-image: url(../img/bg_3d.png);
background-size: 256px 256px;
z-index: -14;
}

.bgd14 {
background-image: url(../img/bg_mocap.png);
background-size: 256px 256px;
z-index: -15;
}