html,
body
{
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  background:#212121;
}

/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */
body
{
  overflow-x: hidden;
  background: url('../images/bg.jpg') repeat top left;
}


/**
  * important: keep position fixed, you can however use top:0 instead of bottom:0
  * if you want to make it stick to the top of the browser
  */
.scroll,.scroll-indicator{
	position: fixed;
	left: 0;
	bottom: 60px;
	top:60px;
}


.scroll-indicator{
	width:300px;
	background:red;
	z-index:9999;
	pointer-events:none;
	left:auto;
	right:100%;
	
	background: linear-gradient(to right, rgba(0,0,0,0.9) 0%,rgba(0,0,0,.4) 50%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
	//background: linear-gradient(to right, rgba(189,150,100,0.9) 0%,rgba(189,150,100,.4) 50%,rgba(189,150,100,0) 100%); 
}

.scroll-indicator:last-child{
	right:0;
	transform:rotate(180deg);
}
.touchevents .scroll-indicator{
	display:none !important;
}

@media screen and (min-height: 800px) {
.scroll,.scroll-indicator{
			bottom: 100px; 
			top:100px;		
	}
}  
@media screen and (min-height: 1000px) {
.scroll,.scroll-indicator{
		bottom: 160px;
		top:160px;		
	}
} 
@media screen and (min-height: 1200px) {
.scroll,.scroll-indicator{
		bottom: 200px;
		top:200px;		
	}
}  

/**
  * z-index ordering of the different layers, do this for your layers,
  * also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
  */
.horizon
{
  z-index: 1;
  width: 3000px;
}

.middle
{
  z-index: 500;
  width: 4000px;
}

.front
{
  	z-index: 1000;
	width: 16000px;  
	background:#fff;
}



/*
========================================================
*/