@charset "utf-8";


html{height: 100%;}

body{
	font-family: Arial, Helvetica, sans-serif;background-color: #ccc;
	background-position: center top;background-repeat: no-repeat;background-image: url(../images/fondo.jpg);
	background-size: 260%;
	overflow-x:hidden;
}


#logo{
	position: absolute;left: 50%;transform: translate(-50%);-webkit-transform: translate(-50%);top: 20px;
	width: 270px;height: 90px;
	background-size: 70%;
}

.zoom {
    transition: transform .2s; /* Animation */
}

.zoom:hover {
    transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

#autito{
	position: absolute;left: 20%;transform: translate(-50%);-webkit-transform: translate(-50%);top: 40px;
	width: 140px;height: 98px;
	background: url(../images/autito.png) center no-repeat;
	background-size: 40%;
}

#rueda{
	position: absolute;left: 85%;transform: translate(-50%);-webkit-transform: translate(-50%);top: 30px;
	width: 106px;height: 113px;
	background: url(../images/rueda.png) center no-repeat;
	background-size: 40%;
}

#titulo{position: absolute;left: 50%;transform: translate(-50%);-webkit-transform: translate(-50%);top: 110px;width: 60%;}

#faro{opacity: 0;position: absolute;left: 50%;transform: translate(-600px);-webkit-transform: translate(-600px);top: 212px;z-index: -20;}

.auto{position: absolute;left: 50%;transition: 0.5s;}
.auto img{width: 100%;}

.principal-0{transform: translate(-50%);-webkit-transform: translate(-50%);top: 60vw;z-index: 10;width: 70%;}

.principal-1 {transform: translate(-90%);-webkit-transform: translate(-90%);top: 245vw;width: 150px;z-index: 5;}
.principal-2 	{transform: translate(-90%);-webkit-transform: translate(-90%);top: 290vw;width: 150px;}
.principal-3 	{transform: translate(-95%);-webkit-transform: translate(-95%);top: 335vw;width: 150px;z-index: -10;}
.principal-4 			{transform: translate(-95%);-webkit-transform: translate(-95%);top: 380vw;width: 150px;z-index: -10;}
.principal-5 		{transform: translate(-90%);-webkit-transform: translate(-90%);top: 425vw;width: 150px;}





h1{
	font-family: 'Roboto', Arial, Helvetica, sans-serif;color: #ec034a;font-size: 16px;font-weight: 700;
	line-height: 1.1;text-transform: uppercase;margin: 0 0 0.6em;
}



.info{position: absolute;top: -10%;right: -5%;transform: translate(110%);-webkit-transform: translate(110%);}

.info p{font-family: 'Roboto', Arial, Helvetica, sans-serif;line-height: 1.1;text-shadow: 1px 1px 8px #888;}

.info .blanco 	{color: white;}
.info .negro 	{color: black;}
.info .azul 	{color: #343194;}
.info .light 	{font-weight: 400;font-size: 20px;}
.info .bold 	{font-weight: 700;font-size: 31px;}
.info .chico 	{font-weight: 700;font-size: 28px;}
.info .grande 	{font-weight: 700;font-size: 38px;}

.info p span.siglas{font-weight: 700;font-size: 12px;}

.principal-0 .info {transform: none;-webkit-transform: none;left: -3%;top: 56%;}
.principal-0 .bold {font-size: 70px;line-height: 0.8;}






.linea 				{width: 80%;margin: 0 10%;height: 1px;background-color: #bbb;position: absolute;}
.linea.uno 		{top: 281vw;}
.linea.dos 		{top: 324vw;}
.linea.tres		{top: 370vw;}
.linea.cuatro	{top: 414vw;}



#frase{
	font-family: 'Roboto', Arial, Helvetica, sans-serif;color: #ec0048;text-align: center;
	font-weight: 400;font-size: 20px;opacity: 1;position: relative;top: 460vw;width: 80%;margin: 0 auto;
}
#frase .tabs .tab {display:none}
#frase .tabs .tab .fa{font-size:2em;text-align:center;margin-bottom: 0.5em;display: block;}




/* FORMULARIO */

#cuadro_form {
	position: absolute;left: 50%;transform: translate(-50%);-webkit-transform: translate(-50%);top: 130vw;
	width: 350px;max-width:100%;text-align: center;/*z-index: -30;*/padding: 10px;box-sizing: border-box;
}



input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"],
select, textarea {
	box-sizing: border-box;border-radius: 3px;box-shadow: none;
	color: #666666;background: white;font: 11px/14px Arial;
	height: 28px;margin-bottom: 7px;padding: 4px 4%;
	resize: none;border: 1px solid #c8c8c8;width: 100%;
}
textarea {
	height: 50px;
}
textarea:focus {
	outline: medium none;
}


button[type="submit"]{
	background-color: #ec0048;color: #fff;display: block;font: 700 12px 'Roboto', Arial;
	position: relative;border-radius: 3px;
	border: 1px solid white;box-shadow: none;height: 30px;margin: 0;
	width: 100%;padding: 0;text-transform: uppercase;text-align: center;
	transition: 0.25s ease;
	opacity: 0.8;cursor: pointer;
}

button[type="submit"]:hover {opacity: 1;}
input.error,
select.error, textarea.error {
	border:1px solid #EC0048;
}
a.consultar {
	background-color: #ec0048;color: #fff;font: 700 12px 'Roboto', Arial;
	position: relative;border-radius: 3px;
	border: 1px solid white;box-shadow: none;height: 30px;
	width: 60%;padding: 0;text-transform: uppercase;text-align: center;
	transition: 0.25s ease;
	opacity: 0.8;cursor: pointer;
	margin-left: auto;margin-right: auto;vertical-align: middle;text-align: center;line-height: 30px;
	display: block;top: 465vw;max-width: 150px;
}

.agradecimiento {padding:5em 2em;}
.agradecimiento.error {color: #E00000;}

.errors{}
.errors li{display:block;}



footer {
	margin-top: 480vw;color: black;width: 100%;background: #ccc;padding: 7px;box-sizing: border-box;
	font-size: 12px;font-family: Arial, Helvetica, sans-serif;line-height: 100%;text-align: center;
}
footer a {display:block}
footer a:before {margin-left:10px;margin-right:10px}
footer a {text-decoration: none;color: black;}
footer a:hover, footer a:focus{text-decoration: underline;}















/* RESPONSIVE */



@media only screen and (min-width : 480px) {
	body{background-size: 220%;}

	#logo{background-size: 100%;}

	.principal-0{top: 50vw;}

	.principal-1 {top: 170vw;width: 170px;}
	.principal-2 	{top: 200vw;width: 170px;}
	.principal-3 	{top: 230vw;width: 170px;}
	.principal-4 			{top: 260vw;width: 170px;}
	.principal-5 		{top: 290vw;width: 170px;}

	.linea.uno 		{top: 194vw;}
	.linea.dos 		{top: 225vw;}
	.linea.tres		{top: 253vw;}
	.linea.cuatro	{top: 286vw;}

	#cuadro_form{top: 100vw;}

	#frase{top: 315vw;}
	a.consultar {display:block;top: 320vw;}


	footer{margin-top: 330vw;}
	footer a {display:inline-block}
	footer a:before {content: "|";margin-left:10px;margin-right:10px}
	footer a:first-child:before {content:"" !important}
}



@media only screen and (min-width : 768px) {

	body{background-size: initial;}

	#autito{
		left: 20%;top: 40px;
		background-size: 60%;
	}

	#rueda{
		left: 85%;top: 30px;
		background-size: 60%;
	}

	#titulo{top: 60px;width: auto;}

	.auto{width: 250px;}
	.principal-0{top: 350px;width: 377px;}

	.principal-1 {top: 1130px;}
	.principal-2 	{top: 1400px;}
	.principal-3 	{top: 1640px;}
	.principal-4 			{top: 1890px;}
	.principal-5 		{top: 2140px;}

	.info 			{top: -5%;right: -5%;}
	.info p 		{line-height: 0.9;}
	.info .light 	{font-size: 30px;}
	.info .bold 	{font-size: 52px;}
	.info .chico 	{font-size: 26px;}
	.info .grande 	{font-size: 56px;}

	.linea.uno 		{top: 1340px;}
	.linea.dos 		{top: 1590px;}
	.linea.tres		{top: 1840px;}
	.linea.cuatro	{top: 2090px;}

	#cuadro_form {top: 700px;}

	#frase{top: 2350px;}
	a.consultar {display:block;top: 2380px;}
	footer{margin-top: 2440px;}

}



@media only screen and (min-width : 990px) {

	body{background-position: center 5%;}

	#logo{
		transform: translate(-495px);-webkit-transform: translate(-495px);
		width: 330px;background-image: url(../images/fiat/logo.png);
	}

	#autito{
		left: 17%;top: 110px;
		background-size: 100%;
	}

	#rueda{
		left: 52%;top: 5px;
		background-size: 100%;
	}

	#faro{opacity: 1;}


	.principal-0 	{transform: translate(-28%);-webkit-transform: translate(-28%);top: 360px;}
	.principal-1 	{transform: translate(-270px);-webkit-transform: translate(-270px);top: 380px;}
	.principal-2 		{transform: translate(170px);-webkit-transform: translate(170px);top: 355px;}
	.principal-3 		{transform: translate(-580px);-webkit-transform: translate(-580px);top: 354px;}
	.principal-4 				{transform: translate(340px);-webkit-transform: translate(340px);top: 340px;}
	.principal-5 			{transform: translate(-435px);-webkit-transform: translate(-435px);top: 382px;}

	.info 		{transform: none;-webkit-transform: none;right: initial;top: 140px;}
	.info p 	{text-align: center;}

	.principal-0 .info 	{left: 3%;top: 63%;}
	.principal-0 .info p 	{text-align: left;}

	.info .light 				{font-size: 22.5px;}
	.info .bold 				{font-size: 39px;}
	.info .chico 				{font-size: 19.5px;}
	.info .grande 			{font-size: 42px;}
	.info p span.siglas {font-size: 16px;line-height: 1.3;}

	.principal-0 .bold 	{font-size: 70px;}

	.principal-3    .info {left: -10%;}
	.principal-5     .info {left: 0%;}
	.principal-2    .info {right: 0%;}
	.principal-4       .info {right: -10%;}

	.linea{display: none;}

	#cuadro_form {
		transform: translate(240px);-webkit-transform: translate(240px);top: 0;
		background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
		background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d000000', endColorstr='#00000000',GradientType=0 );
		width:250px;
	}

	#frase{top: 720px;}
	a.consultar {display:none}

	footer{/*margin-top: 730px;*/ position:fixed;bottom:0;margin-top:0}
}

@media only screen and (min-width : 1150px) {
	#cuadro_form {width:300px; }
}

@media only screen and (min-width : 1200px) {

	#autito{left: 25%;}
}