* {
	margin:				0;
	padding:			0;
	user-select:		none;
	user-drag:			none;
}
body {
	font-family:		"CeraProMedium", arial, verdana, sans-serif;
	overflow:			hidden;
}

div {
	position: 			absolute;
	width: 				100%;
	height: 			100%;
}

/* BG */

#bg {
	background-color:	#d7d6d7;
	transition-property: background-color;
	transition-duration: 1s;
}
#bg .gradradial.center {
	opacity:			.3;
	transform:			scale( 1.4, 1 );
}
#bg .gradradial.ground {
	opacity:			.3;
	top:				20%;
	transform:			scale( 2, .2 );
}

/* HEADER */

#header {
	top:				0;
	height:				15%;
	background-color:	white;
	overflow:			visible;
	background:			url("../global/pattern_collectionad.png") repeat left top;
	background-size:	25vw auto;
}
#header .bordershadow {
	height:				30%;
	top:				100%;
	opacity:			.6;
}
#header .home {
	background:			url( "../global/home.png" ) no-repeat center;
	background-size:	auto 60%;
}

/* FOOTER */

#footer {
	bottom:				0;
	height:				15vh;
	/*background-color:	white;*/
	overflow:			visible;
}
#footer .bordershadow {
	height:				40%;
	top:				-25%;
	opacity:			1;
	transform:			scaleY( -1 );
}
#footer .bg .left {
	width:				calc( 50% - 4.9vh );
	left:				0;
	background-color:	white;
}
#footer .bg .right {
	width:				calc( 50% - 4.9vh );
	right:				0;
	background-color:	white;
}
#footer .bg .mid {
	width:				10vh;
	right:				calc( 50% - 5vh );
	top:				0;
	background-image:	url( "../global/shopping.png" );
	background-size:	contain;
}
#footer .arrowsmall {
	width:				10%;
	left:				45%;
	bottom:				75%;
	transform:			rotate( 90deg );
}

/* TRACKPAD */

#trackpad {
	height:				70%;
	top:				15%;
	border:				1px solid rgba(0,0,0,0); /* ontouchmove not working everywhere on android without this shit!?!?!??! */
}

/* PRODUCTS */

#products {
	height:				70%;
	top:				15%;
	overflow:			hidden;
}
#products div {
	pointer-events:		none;
}
#products .arrow {
	width:				20%;
	height:				25%;
	top:				35%;
}
#products .arrow.left {
	left:				0;
}
#products .arrow.right {
	right:				0;
}
#products #item {
	display:			none;
}
#products .items {
	color:				white;
	text-align:			center;
}
#products .item>.id {
	font-size:			5vh;
	top:				10%;
	text-shadow:		0 .5vh 2vh rgba(0,0,0,.3);
	font-family:		"CeraProBlack", arial, verdana, sans-serif;
}
#products .item>.title {
	font-size:			3vh;
	top:				20%;
	text-shadow:		0 .5vh 2vh rgba(0,0,0,.3);
	letter-spacing:		.1vh;
}
#products .item>.image {
	width:				80%;
	height:				60%;
	top:				30%;
	left:				10%;
	background-position: center bottom;
	background-size:	contain;
	background-repeat:	no-repeat;
}

/* LOGIN */

#login {
	width:				300px;
	height:				230px;
	top:				0;
	bottom:				0;
	left:				0;
	right:				0;
	margin:				auto;
	background-color:	#b70010;
	box-shadow:			0px 5px 40px rgba( 0,0,0,.75 );
	border-radius:		10px;
	text-align:			center;
	font-size:			30px;
	background:			url("../global/pattern_primary.png") repeat left top;
	background-size:	25vw auto;
}
#login form {
	position:			absolute;
	display:			block;
	width:				100%;
	height:				60%;
	top:				0;
	bottom:				0;
	margin:				auto;
}
#login input, select, textarea {
	width:				60%;
	padding:			10px;
	border:				none;
	border-radius:		4px;
	box-sizing:			border-box;
	resize:				vertical;
	margin:				14px;
	font-family:		"CeraProMedium", arial, verdana, sans-serif;
}
::placeholder {
	color:				#b70010;
	font-size:			18px;
}
#login input {
	text-align:			center;
}
#login input:nth-child(1) {
	color:				#b70010;
	background-color:	white;
	box-shadow:			inset 0px 2px 10px rgba( 0,0,0,.5 );
	font-family:		"CeraProBlack", arial, verdana, sans-serif;
	font-size:			26px;
}
#login input:nth-child(2) {
	color:				white;
	background-color:	#ea5b0c;
	box-shadow:			0px 2px 10px rgba( 0,0,0,.5 );
	font-size:			18px;
}

/* DEBUG */

#debug {
	font:				10px Arial,Verdana,sans-serif;
	color:				black;
	margin:				50px;
	width:				calc( 100% - 100px );
	height:				calc( 100% - 100px );
	display:			none;
}

/* GLOBAL */

.gradradial {
	background:			url( "../global/grad_radial.png" ) no-repeat center;
	background-size:	100% 100%;
}
.bordershadow {
	background:			url( "../global/border_shadow.png" ) no-repeat center;
	background-size:	100% 100%;
	pointer-events:		none;
}
.arrow {
	background:			url( "../global/arrow.png" ) no-repeat center;
	background-size:	contain;
}
.arrow.left {
	transform:			rotate( 180deg );
}
.arrowsmall {
	background:			url( "../global/arrow_small.png" ) no-repeat center;
	background-size:	contain;
}

#border {
	width: 				calc( 100% - 8px );
	height: 			calc( 100% - 8px );
	border:				4px solid black;
	border-radius:		30px;
}
.noevents {
	pointer-events:		none;
}