/*————————————————————————————————————————————————————————
Title:			Bottled
Description:	Parallax styled story of bottled water
Version:		1.0.0 beta
Author:			Adrian Kinas
Author-Website:	http://adriankinas.de	
————————————————————————————————————————————————————————*/

/* ===== GENERAL SETTINGS ===== */

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-size: 16px;
	background: #fff;
	color: rgb(25,25,25);
}

/* ===== TEXT ELEMENTS ===== */

h1, h2, h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 3em;
	color: #fff;
	cursor: default;
}

h1 {
	text-transform: uppercase;
}

h2 {
	font-size: 1.5em;
	font-weight: 400;
}

/* ===== LOADINGPAGE ===== */

#loadingpage {
	position: fixed;
	z-index: 9998;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: #fff;
}

#pageloader, #pageloader #logo, #pageloader #background {
	position: absolute;
	z-index: 9999;
	left: 0; right: 0;
	margin: 0 auto;
	width: 350px;
	height: 60px;
}

#pageloader {
	bottom: 25%;
}

#pageloader #logo {
	background-image: url(images/logo.svg);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

@-webkit-keyframes animatedBackground {
	from { background-position: 0 top; }
	to { background-position: 2000px top; }
}

@keyframes animatedBackground {
	from { background-position: 0 top; }
	to { background-position: 2000px top; }
}

#pageloader #background {
	height: 0;
	bottom: 0;
	background-image: url(images/water.svg);
	background-size: 100%;
	background-repeat: repeat-x;
	-webkit-animation: animatedBackground 20s linear infinite;
	animation: animatedBackground 20s linear infinite;
}

#bottles {
}

.parallax_collection {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 120%;
	background-size: cover;
	text-align: center;
}

.parallax_collection .text {
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	width: 100%;
}

.parallax_collection .text h1 {
	position: relative;
	left: 0;
	width: 45%;
	right: 0;
	margin: 0 auto;
	text-align: right;
	transform: translateX(-60%);
}

.parallax_collection .text h2 {
	position: relative;
	left: 0px;
	width: 35%;
	right: 0px;
	margin: 0px auto;
	text-align: left;
	transform: translateX(70%);
}

.bottle_wrapper {
	position: relative;
	height: 100%;
	margin: 0 auto;
}

.bottle {
	position: absolute;
	z-index: 20;
	max-width: 400px;
	width: 25%;
	height: 80%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin: 0 auto;
	left: 0; right: 0;
}

#environment {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-perspective: 500px;
	perspective: 500px;
	-webkit-perspective-origin: center center;
	perspective-origin: center center;
}

#scene {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.scene_title {
	position: absolute;
	top: 40%; left: 50%;
	display: inline-block;
	transform: translate(-50%,-50%);
	padding: 0.5em;
	border: 0.1em solid #fff;
	display: none;
}

.scene_text {
	position: absolute;
	top: 55%; left: 50%;
	width: 50%;
	display: inline-block;
	transform: translate(-50%,-50%);
	padding: 0.25em;
	text-align: center;
	font-size: 1em;
	display: none;
}

.scene, .layer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

#bottle_name {
	position: absolute;
	top: 40%; left: 0; right: 0;
	text-align: center;
}

#environment .text {
}

#bottle_text {
	position: absolute;
	z-index: 10001;
	left: 60%;
	width: 200px;
	-webkit-transform: translateY(50%);
	transform: translateY(25%);
}

.blured {
	opacity: 0;
}

#depth_reference {
	height: 6000px;
}

#scrollbutton {
	position: fixed;
	bottom: 25px; left: 0; right: 0;
	margin: 0 auto;
	z-index: 9997;
	width: 150px;
	height: 50px;
	background: url(images/scrollarrow.svg);
	cursor: pointer;
	-webkit-transition: .5s ease-out;
	transition: .5s ease-out;
}

#waste {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 200%;
	background-size: cover;
	text-align: center;
}

#waste_front {
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: cover;
}

#tapped {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#awards {
	width
}

#scrollbutton:hover {
	bottom: 20px;
	cursor: pointer;
}

#debug {
	position: fixed;
	z-index: 10000;
	bottom: 0;
	left: 0; right: 0;
	background: #fff;
	color: #000;
	font-size: 1em;
	line-height: 1.5em;
	padding: 0 1em;
}