html, body{
	padding: 0;
	margin: 0;
	font-size: 15px;
}

/*CUSTOM FONTS*/
@font-face{
	font-family: "Heebo";
	src: url(../fonts/Heebo-ExtraBold.ttf);
}

@font-face{
	font-family: "Beth";
	src: url(../fonts/BethEllen-Regular.ttf);
}

@font-face{
	font-family: "Overpass";
	src: url(../fonts/Overpass-ExtraBold.ttf);
}

/*BACKGROUND*/

body{
	background-color: #e8e8e8;
	background-image: url(../images/eastvillage-01.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: local;
	background-size: cover;
	animation: bounce 0.2s infinite ease-in-out forwards alternate;
}

/*TRUCK BODY*/
.truck-back{
	background-image: linear-gradient(70deg, #192a72 45%, #e5ad36 45%);
	border-radius: 15px 15px 0px 0px;
	width: 33vw;
	height: 15vw;
	position: relative;
	margin: 0 auto;
	margin-top: 60vh;
}


.truck-door{
	background-color: #192a72;
	border-radius: 0px 10px 0px 0px;
	width: 7vw;
	height: 65%;
	position: absolute;
	bottom: 0%;
	border-top: solid #ffffff 1px;
	border-right: solid #ffffff 1px;;
}

.truck-door-v2{
	position: absolute;
	border-bottom: 5vw solid #192a72;
    border-left: 2vw solid transparent;
    height: 0;
    width: 7.2vw;
    top: 0%;
    right: 0%;
    border-radius: 0px 10px 0px 0px;
    }

.truck-window{
	border-bottom: 5vw solid #000000;
    border-left: 2vw solid transparent;
    height: 0;
    width: 7vw;
    position: absolute;
    bottom: 57%;
    right: 11%;
    transform: scale(.5);
    border-radius: 0% 15% 0% 0%;
}

.truck-bumper{
	background-color: #192a72;
	border-radius: 20% 0% 0% 0%;
	width: 8vw;
	height: 45%;
	position: absolute;
	bottom: 0px;
	right: 90%;
}

 .truck-door-handle{
	background-color: #0a102a;
	border-radius: 10px 10px 10px 10px;
	width: 2vw;
	height: 4%;
	position: absolute;
	bottom: 35%;
	right: 88%;
 }

.wheel-front{
	background-color: #1c1c1e;
	background-image: radial-gradient(#1c1c1e 12%, #b9b8b3 12%, #b9b8b3 40%, #1c1c1e 40%, #1c1c1e);
	border-radius: 50%;
	width: 18%;
	height: 39%;
	position: absolute;
	top: 80%;
	right: 90%;
	animation-name: spin;
	animation-delay: 1s;
	animation-duration: 0.4s;
	animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: reverse;
}

.wheel-back{
	background-color: #1c1c1e;
	background-image: radial-gradient(#1c1c1e 12%, #b9b8b3 12%, #b9b8b3 40%, #1c1c1e 40%, #1c1c1e);
	border-radius: 50%;
	width: 18%;
	height: 39%;
	position: absolute;
	top: 80%;
	left: 70%;
	animation-name: spin;
	animation-delay: 1s;
	animation-duration: 0.4s;
	animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: reverse;
}

/*TRUCK DETAILS*/

.light-left{
	background-color: #c91737;
	border-radius: 50%;
	width: 3%;
	height: 6%;
	position: absolute;
	bottom: 5%;
	left: 23%;
	border: .1vw solid #000000;
}

.light-middle{
	background-color: #26261c;
	border-radius: 50%;
	width: 3%;
	height: 6%;
	position: absolute;
	bottom: 15%;
	right: 32%;
	border: .1vw solid #000000;
}

.light-right{
	background-color: #c91737;
	border-radius: 50%;
	width: 3%;
	height: 6%;
	position: absolute;
	bottom: 5%;
	right: 5%;
	border: .1vw solid #000000;
}

.white-box-left{
	width: 7%;
	height: 6%;
	background: #ece8df;
	position: absolute;
	left: 23%;
	bottom: 45%;
}

.white-box-right{
	width: 7%;
	height: 6%;
	background: #ece8df;
	position: absolute;
	right: 4%;
	bottom: 34%;
}

/*TRUCK TEXT*/
.transporte-text{
	font-family: "Heebo";
	font-size: 1.8vw;
	color: #1d1e20;
	line-height: 100%;
	position: absolute;
	margin-left: 6.3vw;
	margin-top: .3vw;
}

.mudanzas-text{
	font-family: "Heebo";
	font-size: 1.8vw;
	color: #1d1e20;
	line-height: 100%;
	position: absolute;
	margin-left: 11.6vw;
	margin-top: 2.2vw;
}

.nicho-text{
	font-family: "Beth";
	font-size: 2.5vw;
	color:#1d1e20;
	position: absolute;
	margin-left: 13.8vw;
	margin-top: 3vw;
}

.big-numbers{
	font-family: "Overpass";
	font-size: 2.4vw;
	color:#1d1e20;
	position: absolute;
	margin-left: 16.8vw;
	margin-top: 7.2vw;
}

.small-numbers{
	font-family: "Overpass";
	font-size: 1.2vw;
	color:#1d1e20;
	position: absolute;
	margin-left: 23.1vw;
	margin-top: 8.1vw;
	line-height: 1vw;
}

.servicio-text{
	font-family: "Heebo";
	font-size: .9vw;
	color: #1d1e20;
	position: absolute;
	margin-left: 16.3vw;
	margin-top: 10.5vw;

}

/*ANIMATIONS*/
@keyframes spin{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}

@keyframes bounce{
    0%{
        transform: rotate(0) translateY(0);
    }
    100%{
        transform: rotate(0.1deg) translateY(2%);
    }
}

/*MEDIA QUIERIES*/
@media(max-width: 768px), (max-width: 1024px){
	.truck-back{
		transform: scale(1.7);
		margin-bottom: 10vh;
		margin-right: 28vw;
		border-radius: 7px 7px 0px 0px;

	}

	.truck-door{
		border-radius: 0px 2px 0px 0px;
		border-top: solid #ffffff .5px;
		border-right: solid #ffffff .5px;

	}

	.truck-door-v2{
		top: 1%;
		right: 1%;
    	border-radius: 0px 5px 0px 0px;
    }

}