html, body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.wrapper
{
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #7e7333;
}

.gradient
{
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(5,42,42,1) 20%,rgba(5,42,42,0) 100%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}

.headlight
{
	filter: blur(5px);
	background: linear-gradient(to right, rgba(247,246,189,0.9) 0%,rgba(247,246,189,0) 100%);
	position: absolute;
	left: 50%;
	right: -30px;
	bottom: -5px;
	width: auto;
	height: 44px;
	z-index: 90;
	margin-left: 380px;
}

.taillight
{
	filter: blur(5px);
	opacity: 0.5;
	transform: rotate(-10deg);
	background-color: #ff3333;
	position: absolute;
	left: 50%;
	margin-left: -601px;
	bottom: 10px;
	width: 12px;
	height: 26px;
	border-radius: 50%;
	z-index: 110;
}

/*
.foreground
{ 
	will-change: transform; 
	background-image: url(../imgs/foreground.svg); 
}
*/

.midground
{
	will-change: transform;
	background-image: url(../imgs/mid.svg);
}

.background
{
	will-change: transform;
	background-image: url(../imgs/background-high.svg);
}

.mountain
{
	-webkit-transform-style: preserve-3d;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 300%;
	height: 60%;
	background-position: left bottom;
	background-size: 66.666%;
	background-repeat: repeat-x;
}

.renault
{
	background-image: url(../imgs/renault-lo-dark.png);
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1000px;
	height: 206px;
	z-index: 100;
	margin-left: -600px;
}

/*.foreground { animation: scene 11s linear infinite; }*/

.midground { 
	animation: scene 20s linear infinite;
}

.background { 
	animation: scene 100s linear infinite; 
}

@keyframes scene {
0%  { transform: translateX(0);}
100%  { transform: translateX(-66.666%);}
}

/*
.texture { width: 100%; height: 100%; background-image: url(../imgs/dark-denim-3.png); position: absolute; top: 0; left: 0; z-index: 600; background-size: 210px 163px; }

.mountain-grid { 
    position: absolute;
    bottom: -300px;
    width: 600px;
    height: 600px;
    transform: rotate(45deg);
    background-image: url(../grid.svg); background-size: 100px 100px;
    background-color: #4d9b9b;
    z-index: 0;
}

.mountain, .mountain-two, .mountain-three {
    position: absolute;
    bottom: 0px;
    left: 200px;
    border-left: 600px solid transparent;
    border-right: 600px solid transparent;
    border-bottom: 500px solid #4d9b9b;
    /*background-image: url(../grid.svg); background-size: 100px 100px;
    z-index: 1;
}
*/

/*.sun { background-color: #e1d48a; position: absolute; right: 100px; bottom: -50px; width: 600px; height: 600px; border-radius: 50%; filter: blur(40px); }*/
/*.sun { position: absolute; right: -100px; bottom: -100px; width: 800px; height: 800px; background-image: url(../imgs/glow-light.svg); background-size: contain; /*transform: scale(1.2); } */