style.less

#inputCanvas,#headtrackerMessageDiv,#threshold{
	display:none;
}

#threshold{
	position:absolute;
	bottom:0;
	right:0;
	background:rgba(0,0,0,0.5);
	padding:10px;
	font-size: 20px;
	color:#fff;
}

body{
	margin:0;
	padding:0;
	font-family: "Helvetica Neue", sans-serif;
	overflow: hidden;
}

.debug{
	#headtrackerMessageDiv,#threshold{
		display:block;
		opacity:0.5;
		z-index:999;
		position:absolute;
	}
}

.advert-1{
	>*{
		-webkit-transform:translateZ(0);
	}
	.vid-container{
		width: 50%;
		-webkit-filter: grayscale(1);
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:50%;
		z-index:10;
		-webkit-transition: all 1.5s;
		overflow: hidden;
	}
	.left,.right{
		-webkit-transition: all 1.5s;
		position:absolute;
		top:0;
		bottom:0;
		background-repeat: no-repeat;
		z-index:10;
	}
	.left{
		left:0;
		right:50%;
		background-image:url('../img/ad-1-left.png');
		background-size:60% auto;
		background-position: center center;
	}
	.right{
		left:50%;
		right:0;
		background-color:#F4F8FB;
		background-image:url('../img/ad-1-right.jpg');
		background-size:100% auto;
		background-position: center right;
	}
}

.advert-2{
	>*{
		-webkit-transform:translateZ(0);
	}
	.food-image{
		z-index:2;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background-image: url('../img/food.jpg');
		background-size:cover;
		background-position: center center;
		background-repeat: no-repeat;
		-webkit-filter: grayscale(1) blur(10px);
	}
	.overlay{
		z-index:2;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,0)), color-stop(100%,rgba(51,51,51,1)));
	}
	.logo{
		position:absolute;
		top:40px;
		left:0;
		right:0;
		z-index:9;
		background-image:url('../img/ad-1-left.png');
		background-size:auto 100%;
		height:150px;
		background-position: center center;
		background-repeat: no-repeat;
		-webkit-transition: all 1.5s;	
	}
	.bundle-header{
		position:absolute;
		top:50%;
		left:0;
		right:0;
		z-index:9;
		margin-top:-100px;
		height:200px;
		background:rgba(183,229,0,0.5) url('../img/header.png');
		background-size:50% auto;
		background-position: center center;
		background-repeat: no-repeat;
		-webkit-transition: all 1.5s;
	}
	
	.bundle-header.alt{
		top:0;
		margin-top: 0;
		background:rgba(183,229,0,1) url('../img/header.png');
		background-size:50% auto;
		background-position: 10% center;
		background-repeat: no-repeat;
	}
	
	.price{
		position: absolute;
		bottom: 50%;
		right: 25%;
		margin: 0 0 -200px;
		z-index: 7;
		color: #fff;
		font-size: 30px;
		text-align: right;
		width: 50%;
		padding: 15px;
		-webkit-transition: all 1.5s;
			
		span{
			display: block;
			text-decoration: line-through;
		}
	}
	
	.price.alt{
		position: absolute;
		bottom:0;
		right:0;
		margin: 100px 0 0;
		z-index: 7;
		color: #fff;
		font-size: 30px;
		text-align: right;
		width: 50%;
		padding: 15px;
		width:50%;
		background:#333;
		
	}
}

.advert-3{
	>*{
		-webkit-transform:translateZ(0);
	}
	.product-video{
		position:absolute;
		top:200px;
		right:100%;
		bottom:102px;
		z-index: 10;
		-webkit-transition: all 1.5s;
	}
	.bundlar{
		position:absolute;
		right:100%;
		bottom:0;
		z-index: 10;
		width:50%;
		background: #F7766B  url('../img/bundlar.png');
		background-size:auto 60%;
		background-position: 10% center;
		background-repeat: no-repeat;
		-webkit-transition: all 1.5s;
		height: 102px;
	}
	.list{
		list-style: none;
		margin:0;
		padding:0;
		position:absolute;
		left:100%;
		bottom:102px;
		z-index: 10;
		width:50%;
		background: #FFF;
		z-index:4;
		-webkit-transition: all 1.5s;
		
		li{
			border-bottom: 1px solid #eee;
			padding: 0 10%;
			font-size: 14px;
		}
	}
}


.door-left{
	-webkit-transform: perspective(500) rotateY(-90deg) translateX(-50%);
    -webkit-transform-origin: 0% 50%;
    opacity: 0;
}

.door-right{
	-webkit-transform: perspective(500) rotateY(90deg) translateX(50%);
	-webkit-transform-origin: 100% 50%;
	opacity: 0;
}

.fade-up{
	-webkit-transform: translateY(-50%);
	opacity: 0;
}

.slide-in-left{
	right:50%!important;
}

.slide-in-right{
	left:50%!important;
}