/*
	CSS personalizado para Página/s 03 VEHÍCULOS
*/

/**************************************** GAMA DE COLORES ****************************************/

/*    Azul Oscuro: 005376 rgb(  0, 83,118) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Azul Medio: 8CA8C2 rgb(140,168,194) */
/*     Azul Claro: C8D8E8 rgb(200,216,232) */
/* Azul Muy Claro: E0F3FC rgb(224,243,252) */

/*        Verde 1: 90C254 rgb(144,194, 84) */
/*        Verde 2: C8DDAB rgb(200,221,171) */
/*        Verde 3: E6F0D7 rgb(230,240,215) */

/*      Naranja 1: FF7711 rgb(255,119, 17) */
/*      Naranja 2: FFEEDD rgb(255,238,221) */

/************************************ MODIFICADOS DE syle-home ***********************************/

/***************************************** #rowVehiculos *****************************************/

#rowVehiculos .divVehiculo                 { position: relative; margin-top: 30px; width: 100%; border: solid 2px var(--color-ver1-hex); }
#rowVehiculos .divVehiculo:first-of-type   { margin-top: 0px; }
#rowVehiculos .divVehiculo                 { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; cursor: default; }
#rowVehiculos .divVehiculo *               { font-family: var(--font-family-narrow); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#rowVehiculos .divFotoG                    { line-height: 0px; }
#rowVehiculos .divFotoP                    { line-height: 0px; width: 540px; }
#rowVehiculos .divModelo                   { margin-top: 20px; padding: 0px 20px; font-size: 48px; font-weight: 900; color: #000000; text-align: center; }
#rowVehiculos .divDatos                    { margin-top: 20px; }
#rowVehiculos .divDatos                    { display: flex; flex-wrap: wrap; justify-content: center; }
#rowVehiculos .divDatosIzda                { display: flex; flex-direction: column; align-items: flex-end; }
#rowVehiculos .divDatosCentro              { position: relative; margin: 0px 30px; }
#rowVehiculos .divDatosDcha                { display: flex; flex-direction: column; align-items: flex-start; }
#rowVehiculos .divDatosIzda .divDato div   { text-align: right; line-height: 100%; }
#rowVehiculos .divDatosDcha .divDato div   { text-align:  left; line-height: 100%; }
#rowVehiculos .divDato                     { margin-bottom: 10px; font-size: 20px; color: var(--color2-hex); display: flex; align-items: center; }
#rowVehiculos .divDato:last-of-type        { margin-bottom:  0px; }
#rowVehiculos .divDato .divIcono           { width: 32px; height: 32px; background: var(--color-nar1-hex); border-radius: 6px; }
#rowVehiculos .divDato .divIcono           { flex: 0 0 32px; display: flex; align-items: center; justify-content: center; }
#rowVehiculos .divDato i                   { margin: 0px !important; }
#rowVehiculos .divDatosIzda .divIcono      { margin-left: 10px !important; }
#rowVehiculos .divDatosDcha .divIcono      { margin-right: 10px !important; }
#rowVehiculos .divMarca                    { position: absolute; top: 0px; right: 0px; padding: 10px; width: 70px; height: 70px; }
#rowVehiculos .divMarca                    { background: rgba(var(--color1-rgb),0.2); border-radius: 50%; }
#rowVehiculos .divPrecioBoton              { display: flex; align-items: center; justify-content: center; }
#rowVehiculos .divPrecio                   { margin: 20px; width: 220px; height: 48px; font-size: 20px; font-weight: 400; background: var(--color-nar2-hex); }
#rowVehiculos .divPrecio                   { border-radius: 8px; display: flex; align-items: center; justify-content: center; }
#rowVehiculos .divPrecio .spanPrecio       { margin: 0px 5px; font-family: var(--font-family-normal); font-size: 28px; font-weight: 900; color: var(--color-nar1-hex); }
#rowVehiculos .divBotonReservar            { margin: 20px; }
#rowVehiculos .divBotonReservar .aReservar { width: 220px; height: 48px; font-size: 24px; color: #FFFFFF; font-weight: 600; text-decoration: none; }
#rowVehiculos .divBotonReservar .aReservar { background: var(--color-nar1-hex); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
#rowVehiculos .divBotonReservar .aReservar { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }

#rowVehiculos .divVehiculo.si-alquilable:hover {
	transform: scale(1.01);
	box-shadow:  0px  2px 15px rgba(var(--color2-rgb),0.2),
							 2px  0px 15px rgba(var(--color2-rgb),0.2),
							 0px -2px 15px rgba(var(--color2-rgb),0.2),
							-2px  0px 15px rgba(var(--color2-rgb),0.2);
}

#rowVehiculos .divSelloNoAlquilable     { position: absolute; top:  0px; left:  0px; width: 100%; height: 100%; background: rgb(255,255,255,0.7); z-index: 1; }
#rowVehiculos .divSelloNoAlquilable img { position: absolute; top: 30px; left: 10px; width: 300px; transform: rotate(-10deg); }

@media (max-width: 1180px) {
	#rowVehiculos .divVehiculos             { padding: 0px 20px; }
	#rowVehiculos .divFotoP                 { width: 500px; }
	#rowVehiculos .divSelloNoAlquilable img { width: 30%; }
}

@media (max-width: 1080px) {
	#rowVehiculos .divDatosCentro { margin: 0px 15px; }
	#rowVehiculos .divFotoP       { width: 480px; }
	#rowVehiculos .divDato        { font-size: 18px; }
}

@media (max-width:  980px) {
	#rowVehiculos .divModelo { font-size: 40px; }	
	#rowVehiculos .divFotoP  { width: 340px; }
	#rowVehiculos .divDato   { font-size: 16px; }
}

@media (max-width:  780px) {
	#rowVehiculos .divModelo                   { font-size: 32px; }
	#rowVehiculos .divDatos                    { position: relative; margin-top: 0px; }
	#rowVehiculos .divDatosIzda                { margin: 180px 20px 0px 0px; width: calc(50% - 20px); }
	#rowVehiculos .divDatosCentro              { position: absolute; margin: 0px; padding-right: 30px; }
	#rowVehiculos .divFotoP                    { width: 300px; }
	#rowVehiculos .divDatosDcha                { margin: 180px 0px 0px 20px; width: calc(50% - 20px); }	
	#rowVehiculos .divPrecio                   { width: 200px; height: 40px; font-size: 18px; }
	#rowVehiculos .divPrecio .spanPrecio       { font-size: 24px; }
	#rowVehiculos .divBotonReservar .aReservar { width: 200px; height: 40px; font-size: 20px; }
	#rowVehiculos .divSelloNoAlquilable img    { width: 35%; }
}

@media (max-width:  580px) {
	#rowVehiculos .divModelo                   { font-size: 28px; }
	#rowVehiculos .divDatosIzda                { margin: 160px 20px 0px 0px; }
	#rowVehiculos .divDatosCentro              { padding-top: 20px; }
	#rowVehiculos .divFotoP                    { width: 240px; }
	#rowVehiculos .divDatosDcha                { margin: 160px 0px 0px 20px; }
	#rowVehiculos .divDato                     { font-size: 14px; }
	#rowVehiculos .divDato .divIcono           { width: 28px; height: 28px; }
	#rowVehiculos .divDato .divIcono           { flex: 0 0 28px; }
	#rowVehiculos .divDato i                   { width: 16px !important; height: 16px !important; }
	#rowVehiculos .divPrecio                   { margin: 15px 10px; width: 160px; height: 36px; font-size: 16px; border-radius: 5px; }
	#rowVehiculos .divPrecio .spanPrecio       { font-size: 20px; }
	#rowVehiculos .divBotonReservar            { margin: 15px 10px; }
	#rowVehiculos .divBotonReservar .aReservar { width: 160px; height: 36px; font-size: 18px; border-radius: 5px; }
	#rowVehiculos .divSelloNoAlquilable img    { width: 45%; }
}

@media (max-width:  480px) {
	#rowVehiculos .divVehiculos                { padding: 0px 10px; }
	#rowVehiculos .divModelo                   { margin-top: 10px; font-size: 24px; }
	#rowVehiculos .divDatosIzda                { margin: 140px 10px 0px 0px; }
	#rowVehiculos .divDatosCentro              { padding-top: 20px; }
	#rowVehiculos .divFotoP                    { width: 200px; }
	#rowVehiculos .divDatosDcha                { margin: 140px 0px 0px 10px; }
	#rowVehiculos .divDato                     { margin-bottom: 5px; }
	#rowVehiculos .divPrecioBoton              { flex-direction: column; }	
	#rowVehiculos .divPrecio                   { margin: 20px 0px 10px 0px; width: 200px; }
	#rowVehiculos .divBotonReservar            { margin: 10px 0px 20px 0px; }
	#rowVehiculos .divBotonReservar .aReservar { width: 200px; }
}

@media (max-width:  380px) {
	#rowVehiculos .divDatosIzda             { margin: 140px 5px 0px 0px; }
	#rowVehiculos .divDatosDcha             { margin: 140px 0px 0px 5px; }
	#rowVehiculos .divPrecio                { margin: 20px 0px  5px 0px; }
	#rowVehiculos .divBotonReservar         { margin:  5px 0px 20px 0px; }
	#rowVehiculos .divSelloNoAlquilable img { width: 60%; }
}