#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:49;
	background-image:url(images/bubbles2.png);
}

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

#intro {
	width:80%;
	left:50%;
	top:1em;
	margin-left:-40%;
	padding:2em;
	background:#fff;
	text-align:center;
	border-radius:1em;

	-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-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

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





.movicon{
    right:50%;
	left:50%;
    width: 100px; 
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    .transform-origin(50%, 50%);
}
#slide2 {
	top:20%;
}
#slide3 {
	top:50%;
}
#slide4 {
	top:50%;
}
#slide5 {
	top:20%;
}
#slide6 {
	top:20%;
}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 80%;
  margin: 20px auto;
  transition: 1s all;
}
.popupimage img{ width: 600px;  }
.popupimage { width: 600px; margin-right: 20px; display: inline-block;  }
.popupcontent{ width: 300px; display: inline-block; vertical-align: top; font-size: 16px; color: #000; }
.popupcontent h3{ font-size: 30px; color: #000; line-height: 30px;}
.popupcontent h3 span{ font-size: 18px; color: #000; }

.gallerie{ bottom: 3%; position: absolute;  text-align: center; right: 5%}
.gallerie-item{ width: 120px; height: 120px; float: left; margin: 10px; border: 5px #fff solid; background-size: 150%; position: relative }






.movbar {
    width: 16px;
    background-color: #d3e6b1;
	.transform-origin(50%, 50%);
}
#bar2 {
    right:50%;
	left:50%;
    margin-left: -8px;
    bottom: 0;
}
#bar3 {
    top:50%;
	bottom:50%;
    height: 16px;
    left: 15%;
    margin-top: -8px
}
#bar3-2 {
    top:50%;
	bottom:50%;
    height: 16px;
    right: 15%;
    margin-top: -8px
}
#bar4 {
    right:50%;
	left:50%;
    margin-left: -8px;
    bottom: 0;
}
#bar4-2 {
    right:50%;
	left:50%;
    margin-left: -5px;
    top: 0;
}
#bar5 {
	left:33.4%;
    margin-left: -8px;
    top: 0;
}
#bar5-2 {
	left:67.3%;
    margin-left: -8px;
    bottom: 0;
}
#bar6 {
    right:50%;
	left:50%;
    margin-left: -4px;
    bottom: 0;
}


@media only screen and (max-width: 768px) {
    .movbar {display: none}
    .movicon {display: none}
}


#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;
}







.skrollable {

	position:fixed;

	z-index:202;
}

.skrollr-mobile .skrollable {
	/*
		May cause issues on Android default browser (see #331 on GitHub).
	*/
	position:absolute;
}

.skrollable .skrollable {
	/*
	 * Second-level skrollables are positioned relative their parent skrollable
	 */
	position:absolute;
}

.skrollable .skrollable .skrollable {
	/*
	 * Third-level (and below) skrollables are positioned static
	 */
	position:static;
}