@charset "utf-8";
/* CSS Choreograpies */

/* FONTS */

@import url(https://fonts.googleapis.com/css?family=Actor);

@import url(https://fonts.googleapis.com/css?family=Amaranth);

@import url(https://fonts.googleapis.com/css?family=Average+Sans);

@import url(https://fonts.googleapis.com/css?family=Federo);

@import url(https://fonts.googleapis.com/css?family=Montserrat+Subrayada);

@import url(https://fonts.googleapis.com/css?family=Special+Elite);



/* For all bodies in the dance */


body {
	background-color:#ffffff;
	font-family: 'Actor', sans-serif;
	height:100%;
}

.overlay {
	overflow:hidden!important;
}

.goog-te-banner-frame {
	display:none !important
}

#overlay{ position:absolute; top: 0; bottom: 0;
    left: 0; right: 0; background:#fcf8ff; z-index:11100; width:100vw; height: 100vh; } 
    
#enter {
	font-size: 100px;
	margin-top:20px;
	margin-left:20px;
	color:#4b0082;
}

#mobile-text {
	text-align: center;
	width:50%;
	margin:0 auto;
	padding-top:20%;
}
.fa-database {
	color:#4b0082;
}
.overlay-intro {
	font-size:80px;
	line-height:150px;
}
.overlay-intro-small {
	font-size:50px;
	line-height:80px;
}

#overlay-small {
	display:none;
	position:absolute; top: 0; bottom: 0;
    left: 0; right: 0; background:#fcf8ff; z-index:11100; width:500%; height: 380%;
    overflow:scroll;
}

#small-text {
	text-align: left;
	width:50%;
	padding-top:100px;
	padding-left:100px;
}

#skip-small {
	font-size:50px;
	text-align: left;
}

#dance-floor {
	width:100%;
	padding-right:20px;
	z-index:-1;
}

li {
	list-style-type: none;
}



.zoom {
	-moz-transform: scale(0.9, 0.9); /* Moz-browsers */
    zoom: 0.9; /* Other non-webkit browsers */
    zoom: 90%; /* Webkit browsers */
    overflow:hidden;
}

#jump {
	position:fixed;
	margin-left:10px;
	margin-top:10px;
	font-size:100px;
	z-index:10;
}

.jump {
	color:#4b0082;
}

.jump-to {
	color:#4b0082;
}

#skip {
	display:none;
	position: fixed !important;
	margin-left: 10px;
	margin-top: 120px;
	background-color: #fcf8ff;
	padding: 10px;
	width:100vw; 
	height: 93%;
	z-index: 11002 !important;
	overflow-y: scroll;
	font-size: 80px;
	padding-bottom:20px;
}

/*to accomdate Firefox body  */
@-moz-document url-prefix() {
#jump {
	position:fixed;
	margin-left:10px;
	margin-top:10px;
	font-size:20px;
}

#skip {
	display:none;
	position:fixed;
	margin-left:10px;
	margin-top:40px;
	background-color:#fcf8ff;
	padding:10px;
	height:450px;
	z-index:1001;
	overflow-y:scroll;
	max-width:50%;
}

}
.cuer {
	padding-bottom:10px;
	padding-top:10px;
}

.act {
	font-size:80px;
	padding-bottom:10px;
	padding-top:10px;
}

.jump-to {
	text-decoration:none;
}

.see-bio {
	margin-right:50px;
	
}

.bio {
	display:none;
	margin-left:30px;
	border: 1px dashed #4b0082;
	padding:10px;
}

.check {
	color:#000000;
	border: 1px dashed #4b0082;
	width:40%;
	height:60%;
	padding:10px;
	
}

.dance-piece {
	font-size: 20px;
	letter-spacing: 5px;
	word-wrap: break-word;
	transition:all 2s ease-in-out;
	perspective: 800px;
	perspective-origin: 50% 100px;
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
    
}

.hesitation {
	display:block;
	font-size: 20px;
	letter-spacing: 5px;
	direction:rtl;
}


.Cross-In-Front {
	color: #000000;
	text-decoration: none;
}

.rotate {
	-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.full-rotation {
	-webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

.slide {
	margin-left:749%;
}

.Cross-In-Front:hover {
	color:#fcf8ff;
}


/* For individual bodies in the dance floor */
#commence {
	margin-top: 50px!important;
	margin-left:150px;
}
/*ACT 1  */

#warm-up-1 {
	display:block;
	padding-top:10px;
}

#step-1 {
	margin-top:10%;
	margin-left:50%;
}

#warm-up-2 {
	display:block;
	margin-left:20px;
	
}

#step-2 {
	margin-left:10%;
	margin-top:10%;
}

#warm-up-3 {
	display:block;
	
}

#step-3 {
	margin-left:110%;
	margin-top:-35%;
	margin-right:10%;
	
}

#warm-up-4 {
	display:block;
}

#step-4 {
	margin-left:110%;
	margin-top:-95%;
	margin-right:10%;
}

/*ACT 2  */
#warm-up-4:visible + #cue4 + #body-code-1 {
	opacity:1;
}

#body-code-1 {
	display:block;
}

#step-5 {
	margin-left:200%;
	margin-top:-40%;
}

#body-code-2 {
	display:block;
}

#step-6 {
	margin-left:200%;
	margin-top:50%;
}


#body-code-3 {
	display:block;
}

#step-7 {
	margin-left:200%;
	margin-top:50%;
}

#body-code-4 {
	display:block;
}

#step-8 {
	margin-left:280%;
	margin-top:-10%;
}

#body-code-5 {
	display:block;
	margin-top:-800px;
}

#step-9 {
	margin-left:280%;
	margin-top:-100%;
}
	
#body-code-6 {
	display:block;
}

#step-10 {
	margin-left:340%;
	margin-top:-40%;
}

#body-code-7 {
	display:block;
}

#step-11 {
	margin-left:340%;
	margin-top:-150%;
}

#body-code-8 {
	display:block;
}

#step-12 {
	margin-left:405%;
	margin-top:-20%;
}

/*ACT 3  */

#darkness-1 {
	display:block;
}

#step-13 {
	margin-left:485%;
	margin-top:-30%;
}

#darkness-2 {
	display:block;
}

#step-14 {
	margin-left:485%;
	margin-top:50%;
}

#darkness-3 {
	display:block;
}

#step-15 {
	margin-left:400%;
	margin-top:30%;
}

#darkness-4 {
	display:block;
}

#step-16 {
	margin-left:460%;
	margin-top:70%;
}

#darkness-5 {
	display:block;
}

#step-17 {
	margin-left:550%;
	margin-top:-20%;
}

/*ACT 4  */

#culture-1 {
	display:block;
}

#step-18 {
	margin-left:550%;
	margin-top:-120%;
}

#culture-2 {
	display:block;
}

#step-19 {
	margin-left:595%;
	margin-top:-30%;
}

#culture-3 {
	display:block;
}

#step-20 {
	margin-left:643%;
	margin-top:-30%;
}

#culture-4 {
	display:block;
}

#step-21 {
	margin-left:691%;
	margin-top:-30%;
}

#culture-5 {
	display:block;
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

#step-22 {
	margin-left:691%;
	margin-top:-30%;
}

#misstep {
	display:block;
}

#cool-down {
	display:block;
}

#step-23 {
	margin-left:800%;
	margin-top:-30%;
}

/* CUES  */

#cue0 {
	position: absolute;
	margin-left:50%;
	margin-top:2%;
	font-size:40px;
}

#ah {
	width:100px;
	height:100px;
	border: 1px dashed #4b0082;
	margin-left:50px;
	margin-top:10px;
	-moz-transition-duration: 0.4s linear;
-o-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s linear;
transition-duration: 0.4s linear;
perspective-origin: 50% 100px;
display:none;
}

/*to accomdate Firefox body  */
@-moz-document url-prefix() {
#cue1 {
	display:block;
	position: absolute;
	margin-left:40%;
	margin-top:-50px;
	font-size:40px;
	width:300px;
	height:300px;
	overflow:scroll;
}

}

#cue1 {
	display:block;
	position: absolute;
	margin-left:40%;
	margin-top:-50px;
	font-size:40px;
	width:300px;
	height:300px;
	overflow:scroll;
}

.cue1 {
	font-size:20px!important;
	margin-top:-5%!important;
	margin-left:5%;
}

.break {
	height:300px;
	border:1px dotted #4b0082;
}

.here-down {
	font-size:12px;
 /* Apply animation to this element */	
 -moz-animation: fade-here 1s linear infinite;
 -webkit-animation: fade-here 1s linear infinite;
 animation: fade-here 1s linear infinite;
}

#cue2 {
	display:block;
	position: absolute;
	margin-left:56%;
	font-size:40px;
	width:100px;
	height:100px;
	margin-top:-100px;
	font-size:40px;
}

#cue3 {
	display:block;
	position: absolute;
	margin-left: 160%;
	width:100px;
	height:100px;
	margin-top:-60px;
	font-size:40px;
}

#cue4 {
	display:block;
	position: absolute;
	margin-left: 155%;
	width:100px;
	height:100px;
	font-size:12px;
	margin-top:-350px;
}

#cue5 {
	display:block;
	position: absolute;
	margin-left: 245%;
	width:100px;
	height:100px;
	font-size:12px;
	margin-top:-50px;
}

#cue6 {
	display:block;
	position: absolute;
	width:450px;
	height:100px;
	font-size:12px;
	margin-left:200%;
	margin-top:5%;
}

#cue7 {
	display:block;
	position: absolute;
	width:100px;
	height:100px;
	font-size:12px;
	margin-left:245%;
	margin-top:-20px;
}

#cue8 {
	display:block;
	position: absolute;
	width:100px;
	height:100px;
	font-size:12px;
	margin-left:295%;
	margin-top:-52%;
}

#cue9 {
	display:block;
	position: absolute;
	width:250px;
	height:100px;
	font-size:12px;
	margin-left:295%;
	margin-top:-50%;
}

#cue10 {
	display:block;
	position: absolute;
	width:250px;
	height:100px;
	font-size:12px;
	margin-left:340%;
	margin-top:-55%;
}
#cue11 {
	display:block;
	position: absolute;
	width:250px;
	height:100px;
	font-size:12px;
	margin-left:370%;
	margin-top:20px;
}

#cue12 {
	display:block;
	position: absolute;
	width:250px;
	height:100px;
	font-size:12px;
	margin-left:440%;
	margin-top:20px;
}

#cue13 {
	display:block;
	position: absolute;
	width:250px;
	height:100px;
	font-size:12px;
	margin-left:510%;
	margin-top:20px;
}

#cue14 {
	display:block;
	position: absolute;
	width:350px;
	height:100px;
	font-size:12px;
	margin-left:495%;
	margin-top:200px;
}

#cue15 {
	display:block;
	position: absolute;
	width:350px;
	height:100px;
	font-size:12px;
	margin-left:400%;
	margin-top:20px;
}

#cue16 {
	display:block;
	position: absolute;
	width:350px;
	height:100px;
	font-size:12px;
	margin-left:460%;
	margin-top:10px;
}

#cue17 {
	display:block;
	position: absolute;
	width:350px;
	height:100px;
	font-size:12px;
	margin-left:595%;
	margin-top:-50px;
}

#cue18 {
	display:block;
	position: absolute;
	width:350px;
	height:100px;
	font-size:12px;
	margin-left:560%;
	margin-top:20px;
}

#cue19 {
	display:block;
	position: absolute;
	width:350px;
	height:100px;
	font-size:12px;
	margin-left:610%;
	margin-top:20px;
}

#cue20 {
	display:block;
	position: absolute;
	width:350px;
	height:100px;
	font-size:12px;
	margin-left:645%;
	margin-top:20px;
}

#cue21 {
	display:block;
	position: absolute;
	width:350px;
	height:100px;
	font-size:12px;
	margin-left:710%;
	margin-top:20px;
}

#cue22 {
	display:block;
	position: absolute;
	width:350px;
	height:100px;
	font-size:12px;
	margin-left:770%;
	margin-top:20px;
}

#cue23 {
	display:block;
	position: absolute;
	width:350px;
	height:100px;
	font-size:12px;
	margin-left:850%;
	margin-top:20px;
}
#bow {
	display:block;
	position: absolute;
	width:350px;
	height:100px;
	font-size:12px;
	margin-left:850%;
	margin-top:-130%;
}

.bow-cue {
	
}
.bow-cue-vertical {
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}


/* heel turns AKA previews */

.heel-turn {
	margin-top:20px;
}

.lawrence {

}

/* cues individual styles */

.video-cues {
	width:90%;
}

.video-smaller {
	width:50%;
}

.video-tiny {
	width:30%;
}

.video-bigger {
	width:200%;
}

.video-cues-stretch {
	width:30%;
}

.reverse {
	opacity:0;
}

/* For individual dance pieces */


.stop-scrolling {
  overflow: hidden;
  height:100%;
}


#dances {
	z-index:1001;
	position:absolute;
	width:100%;
	height:100%;
	display:none;
	background-color:#fcf8ff;
	padding-bottom:20px;
}


.feet-close {
	color:#4b0082;
}

.feet-close:hover {
	color:#fcf8ff;
}


.dance-piece-play {
	font-size:10px;
	vertical-align: middle;

}

/* Lawrence */

#nicholas-lawrence {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:90%;
	padding:10px;
}

#nl {
	display:none;
	display:inline-block;
}

#passivity {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
	padding:10px;
	font-family: none;
	font-size:11px;
	white-space: pre-wrap;
	overflow-y:scroll;
}

#impassivity {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
	padding:10px;
	overflow-y:scroll;
}

.impassivity {
	width:100%;
}

#interactivity {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
	padding:10px;
	font-family: none;
	font-size:11px;
	white-space: pre-wrap;
	overflow-y:scroll;
}

/* Donovan */

#fd {
	display:none;
	display:inline-block;
}

#freya-field-donovan {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
	margin:0 auto;
	overflow-y:scroll;
	padding-bottom:0;
}

#macabre {
	position:absolute;
	width:20%;
	margin-left:-97px;
	margin-top:50px;
	z-index:100;
}

.macabre {
	color:#000;
	cursor:grabbing;
}

#shadow {
	z-index:1001;
	display:none;
	position:absolute;
	width:50%;
	margin-left:-50px;
	margin-top:60px;
}

.shadow {
	width:100%;
}

/* Harvey */

#sh {
	display:none;
	display:inline-block;
}

#samantha-harvey {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
	margin:0 auto;
	overflow-y:scroll;
	padding-bottom:0;
	padding-top:-20px;
}

#harvey {
	width:80%;
	margin-top:80px;
	margin-left:80px;
}

.arms {
	margin-top:80px;
	width:80%;
}

/* Lewis */

#ml {
	display:none;
	display:inline-block;
}

#matt-lewis {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
	margin:0 auto;
	overflow-y:scroll;
	padding-bottom:0;
}


#algorave {
	margin-top:25%;
}

.play {
	display:none;
}

.stop {
	display:none;
}

/* HASLAM */

#shh {
	display:none;
	display:inline-block;
}

#susannah-haslam {
	display:none;
	width:100%;
	height:100%;
	background-color:#ffffff;
	padding-bottom:20px!important;
}

.google-blink {
	display:block;
	width:100%;
	margin-top:20px;
}

/* GIRAUDEAU */ 

#mkg {
	display:none;
	display:inline-block;
}

#matthew-dk-giraudeau {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
	margin:0 auto;
	overflow-y:scroll;
}

/* VOSKOPOULUS */

#av {
	display:none;
	display:inline-block;
}

.voskopoulus {
	margin-left:-15%;	
}

.angelina {
	width:90%;
    -webkit-animation-name: Floatingx;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}


@-webkit-keyframes Floatingx{
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 15px);}
    to {-webkit-transform: translate(0, -0px);    }    
}
    
@-moz-keyframes Floating{
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 15px);}
    to {-moz-transform: translate(0, -0px);}    
}

.angelina-acts-left {font-size:10px;margin-left:20px;}
.angelina-acts-right {position:absolute;font-size:10px;margin-left:350px;display:inline;margin-top:-5px;width:10%;}
.angelina-acts-right-2 {position:absolute;font-size:10px;margin-left:400px;display:inline;width:10%;}

#angelina-voskopoulus {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
	margin:0 auto;
}

#video {
	display:none;
	width:100%;
	height:97%;
	background-color:#000000;
}

.synopsis {
	padding-top:20px;
	font-family: 'Amaranth', sans-serif;
	width:60%;
	margin: 0 auto;
	z-index:-1; 
}

.hover {
	display:none;
	position:absolute;
	background-color:#718f93;
	opacity:0.3;
	width:100%;
	height:100%;
	z-index:1001;
	margin-top:-22%; 
}

#main-piece-angelina {
	z-index:-1;
	margin-left: -9px; 
	background-color:#ffffff;
	overflow:hidden;
}

#main-piece-angelina:hover > .hover {
    display: block;
}

.play-video {
	font-size: 50px!important;
	margin-top:25%;
	margin-left:50%;
}

/* KASSNEL */
#ek {
	display:none;
	display:inline-block;
}

#eri-kassnel {
	display:none;
	background-color:#000;
	width:100%;
	height:100%;
	margin:0 auto;
	overflow-y:scroll;
	overflow-x:hidden;
}

.machine {
	width:45%;
}

.patterns {
	display: inline;
	width: 45%;
	float: right;
	margin-top: -30px;
}

.perpetuum-img {
	display:inline;
	width:45%;
	float:right;
}

    
/* CHICAU */

#jc {
	display:none;
	display:inline-block;
}

#joana-chicau {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
}

.chicau {
	margin:0 auto;
	background-color:#000;
	width:100%;
	height:90%;
	font-family: 'Federo', sans-serif;
	font-size:20px;
}

.chicau-p {
	margin:0 auto;
	width:70%;
	font-size:16px;
	padding-left:30px;
	padding-right:30px;
	padding-top:100px;
	color:#fff;	
	line-height: 25px;
}

.jc-preview {
	text-decoration: none;
	color:#fff;
}

.jc-preview:hover {
	color:#4b0082; 
}

/* DOYLE */

#od {
	display:none;
	display:inline-block;
}

#oona-doyle {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
}

.doyle {
	padding-top:30px;
}

.shake:hover,
.shake:focus {
	-webkit-animation-name: cold;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	
	-moz-animation-name: coldx;
	-moz-animation-duration: 0.8s;
	-moz-transform-origin:50% 50%;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
}

@-webkit-keyframes cold {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

@-moz-keyframes coldx {
	0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
	10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
	40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
	50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
	100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}


/* MAUBREY */

#bm {
	display:none;
	display:inline-block;
}

#benoit-maubrey {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
	overflow-y:scroll;
}

.benoit-preview {
	width:50%;
	margin-left:50%;
}


/* PAPAZOGLOU */

#ep {
	display:none;
	display:inline-block;
}

#eleni-papazoglou {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
}

.task1 {
	margin-left:50%;
}

.show-1 {
	display:none;
}

.show-2 {
	display:none;
}

.show-3 {
	display:none;
}
.right {
	float:right;
}

.bottom-right {
	float:right;
	margin-right:-30px;
	margin-top:50%;
	
}
.bottom-left {
	position:absolute;
	margin-left:-60px;
	margin-top:20%;
	
}

.task2 {
	-moz-animation: moving 5s infinite;
	-webkit-animation: moving 5s infinite;
    animation: moving 5s infinite;
}

@keyframes moving {
    from {transform: translateX(200px);}
    to {transform: translateX(0px);}
}

.task3 {
	-moz-animation: bigger 5s infinite;
	-webkit-animation: bigger 5s infinite;
    animation: bigger 5s infinite;
}

@keyframes bigger {
    0% {
    font-size: 10px;
  }
  100% {
    font-size: 30px;
  }
}

/* GILES */

#eg {
	display:none;
	display:inline-block;
}

#emilie-giles {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
	overflow-y:scroll;
}

.memory {
	padding-top:100px;
	font-family: 'Montserrat Subrayada', sans-serif;
	word-spacing: -50px;
	transition-property: word-spacing;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.memory:hover {
	 word-spacing:20px;
	 
}

/* MUSHTRIEVA */


#mm {
	display:none;
	display:inline-block;
}

#maru-mushtrieva {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
	overflow:scroll;
	margin-bottom:20px;
}

.scratch {
	display:inline-block;
	/* Starting position */
 -moz-transform:translateY(-100%);
 -webkit-transform:translateY(-100%);	
 transform:translateY(-100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-down 5s linear infinite;
 -webkit-animation: scroll-down 5s linear infinite;
 animation: scroll-down 5s linear infinite;
	
}

/* Move it (define the animation) */
@-moz-keyframes scroll-down {
 0%   { -moz-transform: translateY(-100%); }
 100% { -moz-transform: translateY(100%); }
}
@-webkit-keyframes scroll-down {
 0%   { -webkit-transform: translateY(-100%); }
 100% { -webkit-transform: translateY(100%); }
}
@keyframes scroll-down {
 0%   { 
 -moz-transform: translateY(-100%); /* Browser bug fix */
 -webkit-transform: translateY(-100%); /* Browser bug fix */
 transform: translateY(-100%); 		
 }
 100% { 
 -moz-transform: translateY(100%); /* Browser bug fix */
 -webkit-transform: translateY(100%); /* Browser bug fix */
 transform: translateY(100%); 
 }
}


/* HEISSMEYER */

#hh {
	display:none;
	display:inline-block;
}

#holger-heissmeyer {
	display:none;
	background-color:#ffffff;
	width:100%;
	height:100%;
}

/* HAMMETT */

#ch {
	display:none;
	display:inline-block;
}

#cliff-hammett {
	display:none;
	background-color:#000;
	width:100%;
	height:100%;
	overflow-y:scroll;
}
.wave-2 {
	margin-left:100px;
	animation: myAnimation 10s; 
    animation-direction: alternate;
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-delay: 0;
    animation-timing-function: 1;
    animation-direction: alternate;

    -webkit-animation: myAnimation 10s;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    -webkit-animation-timing-function: 1;
    -webkit-animation-direction: alternate;

    -moz-animation: myAnimation 10s;
    -moz-animation-direction: alternate;
    -moz-animation-play-state: running;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 0;
    -moz-animation-timing-function: 1;
    -moz-animation-direction: alternate;

    -o-animation: myAnimation 10s;
    -o-animation-direction: alternate;
    -o-animation-play-state: running;
    -o-animation-iteration-count: infinite;
    -o-animation-delay: 0;
    -o-animation-timing-function: 1;
    -o-animation-direction: alternate;
}

    @keyframes myAnimation {
        0%      { margin-left: 0px}
        25%     { margin-left: -5px }
        50%     { margin-left: -10px }
        75%     {  margin-left: -20px }
        100%    { margin-left: -100px }
    }
    @keyframes myAnimation {
       0%      { margin-left: 0px}
        25%     { margin-left: -5px }
        50%     { margin-left: -10px }
        75%     {  margin-left: -20px }
        100%    { margin-left: -100px }
    }
    @keyframes myAnimation {
       0%      { margin-left: 0px}
        25%     { margin-left: -5px }
        50%     { margin-left: -10px }
        75%     {  margin-left: -20px }
        100%    { margin-left: -100px }
    }
    @keyframes myAnimation {
        0%      { margin-left: 0px}
        25%     { margin-left: -5px }
        50%     { margin-left: -10px }
        75%     {  margin-left: -20px }
        100%    { margin-left: -100px }

    }

.poem-cliff {
	background-color:#000;
	color:#fff;
}

.line-2 {
	margin-left:30px;
}

.line-3 {
	margin-left:5px;
}

/* AEROBICS */ 

#lp {
	display:none;
	display:inline-block;
}

#aerobics {
	display:none;
	background-color:#fff;
	width:100%;
	height:100%;
	overflow-y:scroll;
	overflow-x:hidden;
}

.gestures {
	width:100%;
}

/* HERMANN */
#vh {
	display:none;
	display:inline-block;
}

#verena-hermann {
	display:none;
	background-color:#fff;
	width:100%;
	height:100%;
	overflow-y:scroll;
	overflow-x:hidden;
}

.pogo {
	width:50%;
	font-family: 'Special Elite', cursive;
 /* Apply animation to this element */	
 -moz-animation: pogo 0.5s  infinite;
 -webkit-animation: pogo 0.5s  infinite;
 animation: pogo 0.5s  infinite;
}

@-moz-keyframes pogo {
 0%   { -moz-transform: translateY(00%); }
 100% { -moz-transform: translateY(50%); }
}
@-webkit-keyframes pogo {
 0%   { -webkit-transform: translateY(0%); }
 100% { -webkit-transform: translateY(50%); }
}
@keyframes pogo {
 0%   { 
 -moz-transform: translateY(00%); /* Browser bug fix */
 -webkit-transform: translateY(00%); /* Browser bug fix */
 transform: translateY(00%); 		
 }
 100% { 
 -moz-transform: translateY(50%); /* Browser bug fix */
 -webkit-transform: translateY(50%); /* Browser bug fix */
 transform: translateY(50%); 
 }
}
 
/* GROß */

#sg {
	display:none;
	display:inline-block;
}

#stephan-groß {
	display:none;
	background-color:#000;
	width:100%;
	height:100%;
	overflow:hidden;
}

.gross {
	-webkit-animation: glow 1.0s infinite alternate;  
     -webkit-transition: border 1.0s linear, box-shadow 1.0s linear;
       -moz-transition: border 1.0s linear, box-shadow 1.0s linear;
            transition: border 1.0s linear, box-shadow 1.0s linear;
}

.fence {
	width:100%;
}



/*glow for webkit*/

@-webkit-keyframes glow {
    to {
         border-color: blue;
    -webkit-box-shadow: 0 0 25px blue;
       -moz-box-shadow: 0 0 25px blue;
            box-shadow: 0 0 25px blue;
    }
}

@-keyframes glow {
    to {
         border-color: blue;
    -webkit-box-shadow: 0 0 25px blue;
       -moz-box-shadow: 0 0 25px blue;
            box-shadow: 0 0 25px blue;
    }
}

@-moz-keyframes glow {
    to {
         border-color: blue;
    -webkit-box-shadow: 0 0 25px blue;
       -moz-box-shadow: 0 0 25px blue;
            box-shadow: 0 0 25px blue;
    }
}


/* OHLSEN */

#lo {
	display:none;
	display:inline-block;
}

#lai-ohlsen {
	display:none;
	background-color:#fff;
	width:100%;
	height:100%;
	overflow-y:scroll;
}

.ohlsen {  
  background-color: #CCCCFF;
  width:100%;
  height:50%;
  text-align: center;
}

.loader {
	margin-top:25%;
  color: #fff;
  font-family: Consolas, Menlo, Monaco, monospace;
  font-weight: bold;
  font-size: 50px;
  opacity: 0.8;
}

.pulse {
    display: inline-block;
    animation: pulse 0.4s alternate infinite ease-in-out;
    -webkit-animation: pulse 0.4s alternate infinite ease-in-out;
    -moz-animation: pulse 0.4s alternate infinite ease-in-out;
}

.pulse&:nth-child(odd) {
      animation-delay: 0.4s;
      -webkit-animation-delay: 0.4s;
      -moz-animation-delay: 0.4s;
}

@keyframes pulse {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}

@-webkit-keyframes pulse {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}

@-moz-keyframes pulse {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}



/* MACPHERSON */

#hm {
	display:none;
	display:inline-block;
}

#hamish-macpherson {
	display:none;
	background-color:#ffdbef;
	width:100%;
	height:100%;
	overflow-y:scroll;
}

.wiki {
	width:90%;
	z-index:-1;
}

#word, #word1, #word2 {
	font-size:100px;
}


.glitch_word_box {
				margin-top:-250px;
				margin-left:150px;
				height: 200px;
				line-height: 200px;
				position: relative;
				z-index:1;
				-webkit-animation: disappear 1s linear;
				-webkit-animation-iteration-count: infinite, infinite;
				-moz-animation: disappear 1s linear;
				-moz-animation-iteration-count: infinite, infinite;
				-o-animation: disappear 1s linear;
				-o-animation-iteration-count: infinite, infinite;
}
			
.glitch_word_box .glitch_word0 {
				position: absolute;
				width: 100%;
}
			
.glitch_word_box .glitch_word1 {
				color: #000;
				font-weight: bolder;
				left: -2px;
				position: absolute;
				top: -2px;
				width: 100%;
				z-index: -1;	
				
				-webkit-animation: animate_glitch_1 .2s linear;
				-webkit-animation-iteration-count: infinite;	
				-moz-animation: animate_glitch_1 .2s linear;
				-moz-animation-iteration-count: infinite;	
				-o-animation: animate_glitch_1 .2s linear;
				-o-animation-iteration-count: infinite;	
}
			
.glitch_word_box .glitch_word2 {
				color: #ffdbef;
				font-weight: bolder;
				left: 2px;
				position: absolute;
				top: 2px;
				width: 100%;
				z-index: -1;
				
				-webkit-animation: animate_glitch_2 .3s linear;
				-webkit-animation-iteration-count: infinite;
  		-moz-animation: animate_glitch_2 .3s linear;
				-moz-animation-iteration-count: infinite;
  		-o-animation: animate_glitch_2 .3s linear;
				-o-animation-iteration-count: infinite;
}
			
@-webkit-keyframes disappear {
				0% {	opacity: 0;	}
				2% { opacity: 1; }
}
						
@-webkit-keyframes animate_glitch_1 {
			  	0% { top: 1px; left: 1px; }
			 	25% { top: 3px; left: 2px;	 }
		 		50% { top: -1px; left: -4px;	}
			 	75% { top: 2px; left: 5px;	}
				100% {	top: 1px; left: -2px;	}			
}
			
@-webkit-keyframes animate_glitch_2 {
			  	0% { top: -1px; left: -1px;	}
 				25% { top: -3px; left: -2px;	}
 				50% { top: 1px; left: 4px; }
				100% { top: -1px; left: -1px; }			
}

@-moz-keyframes disappear {
				0% {	opacity: 0;	}
				2% { opacity: 1; }
}
						
@-moz-keyframes animate_glitch_1 {
			  	0% { top: 1px; left: 1px; }
			 	25% { top: 3px; left: 2px;	 }
		 		50% { top: -1px; left: -4px;	}
			 	75% { top: 2px; left: 5px;	}
				100% {	top: 1px; left: -2px;	}			
}
			
@-moz-keyframes animate_glitch_2 {
			  	0% { top: -1px; left: -1px;	}
 				25% { top: -3px; left: -2px;	}
 				50% { top: 1px; left: 4px; }
				100% { top: -1px; left: -1px; }			
}

@-o-keyframes disappear {
				0% {	opacity: 0;	}
				2% { opacity: 1; }
}
						
@-o-keyframes animate_glitch_1 {
			  	0% { top: 1px; left: 1px; }
			 	25% { top: 3px; left: 2px;	 }
		 		50% { top: -1px; left: -4px;	}
			 	75% { top: 2px; left: 5px;	}
				100% {	top: 1px; left: -2px;	}			
}
			
@-o-keyframes animate_glitch_2 {
			  	0% { top: -1px; left: -1px;	}
 				25% { top: -3px; left: -2px;	}
 				50% { top: 1px; left: 4px; }
				100% { top: -1px; left: -1px; }			
}


/* ERB */

#le {
	display:none;
	display:inline-block;
}

#lisa-erb {
	display:none;
	background-color:#fff;
	width:100%;
	height:100%;
	margin-left:5px;
	overflow-y:scroll;
}

.erb-grid {
	width:100%;
}

.ball {
	width:450px;
	height:300px;
	background: url('../img/previews/grid.png');
	background-size: 80px 60px;
	background-repeat:repeat;
}

.bouncing {
	font-size:30px;
	 animation: pulse2 0.4s alternate infinite ease-in-out;
    -webkit-animation: pulse2 0.4s alternate infinite ease-in-out;
    -moz-animation: pulse2 0.4s alternate infinite ease-in-out;
}

@keyframes pulse2 {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}

@-webkit-keyframes pulse2 {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}

@-moz-keyframes pulse2 {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}
 




/* MOVES  */

@keyframes fade-here {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
} 

@-webkit-keyframes fade-here {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fade-here {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
} 


/* breathing */

.breathing {
    animation: 3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s infinite alternate breathing;
}

@keyframes breathing {
0% {
    -moz-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
}
100% {
    -moz-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
    -webkit-transform: scale3d(1.2, 1.2, 1);

}

@keyframes breathing {
0% {
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
100% {
    -moz-transform: scale3d(1.2, 1.2, 1);
    -ms-transform: scale3d(1.2, 1.2, 1);
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
}