* {font-family: inherit, arial, sans-serif !important;
	transition:all 0.4s 0s ease;
	-webkit-transition:all 0.4s 0s ease;
	-moz-transition:all 0.4s 0s ease;
	box-sizing: border-box;
	-ms-transition:none }



input, select {padding: 5px 10px;font-size: 18px !important;}

/*#cargando { background:#fff url(/imagenes/Loading/generico.gif) no-repeat center; min-height: 125px !important; }*/

#preloader{position:absolute; top: 50%; left: 50%;margin-left: -11%; }

#preloader span{
    display:block;
    bottom:0px;
    width: 9px;
    height: 5px;
    background:#dbdbdb;
    position:absolute;
    animation: preloader 1.5s  infinite ease-in-out;
}
 
#preloader span:nth-child(2){
left:11px;
animation-delay: .2s;
 
}
#preloader span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader {
    0% {height:5px;transform:translateY(0px);background:#dbdbdb;}
    25% {height:30px;transform:translateY(15px);background:#b1aeae;}
    50% {height:5px;transform:translateY(0px);background:#dbdbdb;}
    100% {height:5px;transform:translateY(0px);background:#dbdbdb;}
}

input[type="number"]{height: 30px}
input#ley {vertical-align: middle;
    margin: 0px 15px 0px 0px;
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    height: auto !important;
    -moz-appearance:normal !important;
    }

.paso {
	display: none; 
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box !important;
	background-color: #eaeaea;
	color: black;
	border-radius: 3px;
	border:1px solid #f6f6f6;
	position: relative;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
}


.paso h2 { margin-bottom: 50px; }

.paso > div:first-child { 
	min-height: 400px;
}

.paso ul { 
	list-style: none;
	text-align: left;
	padding: 0;
	margin: 0;
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}

.paso li { 
	padding: 5px;
	margin: 5px;
	
}

.paso li:hover { opacity: 0.6; }



.botones{
	display: flex;
	flex-wrap:wrap;
	justify-content: center !important;
	margin: 5px 10px 15px !important;
}
.botones li {width: 25%; max-width: 200px; padding: 10px}

.atras, .avanza {transition: opacity 0.2s linear !important; -webkit-transition: opacity 0.2s linear !important; -moz-transition:opacity 0.2s linear !important; -ms-transition:opacity 0.2s linear !important;}

.atras { background-color: silver !important; border-bottom: 2px solid #969696 !important }
.avanza { background-color: darkorange !important; border-bottom: 2px solid #eb5424 !important}
.atras:hover, .avanza:hover {opacity: 0.6;}

.atras, .avanza {
	color: white !important;
	border-radius: 8px;
	margin-top: 20px;
	text-transform: uppercase;
	text-align: center;
}

.encima {
	background-color: #eaeaea;
	color: #000;
	cursor: pointer;
}

#BarraProgreso{
	height: 10px;
	border-radius: 4px;
	background-color: #d9e9fa;
	border-bottom: 2px solid #cbdbed;
	max-width: 1000px;
	margin: 10px auto;
}

#BarraProgresoRelleno{
	height: 10px;
	background: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d9e9fa+0,162f83+100 */
background: #d9e9fa; /* Old browsers */
background: -moz-linear-gradient(left,  #d9e9fa 0%, #162f83 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #d9e9fa 0%,#162f83 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #d9e9fa 0%,#162f83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9e9fa', endColorstr='#162f83',GradientType=1 ); /* IE6-9 */

	width:0px;
	border-radius: 4px;
}



#Div_1 ul{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}
#Div_1 li{
width: 65%; 
margin-bottom: 12px;
padding: 38px;
border-radius: 5px;
color: #fff;
border-bottom: 2px solid #eb5424
}

#Div_2 ul{
	justify-content: center;
	text-align: center;

}

#tipo-1 {background: url(/imagenes/motor.png) no-repeat 7% #f00;}
#tipo-2 {background: url(/imagenes/velero.png) no-repeat 7% #f00;}
#tipo-3 {background: url(/imagenes/neumatica.png) no-repeat 7% #f00;}
#tipo-4 {background: url(/imagenes/motodeagua.png) no-repeat 7% #f00;}
#tipo-1, #tipo-2, #tipo-3, #tipo-4 {font-size: 19px}

#Div_2 li, #Div_3 li, #Div_4 li, #Div_5 li, #Div_6 li, #Div_7 li, #Div_8 li, #Div_9 li, #Div_10 li, #Div_11 li, #Div_13 li {background: #fff;
	border-bottom: 2px solid #ddd; }

#Div_2 li{padding: 10px; min-width: 70px;}

#Div_3 ul{
	justify-content: center;
	text-align: center;

}
#Div_3 li{
	min-width: 70px;
	padding: 10px;
}


#Div_4 ul{
	justify-content: center;
	text-align: center;

}
#Div_4 li{
	min-width: 59px;
	padding: 10px;
}

#Div_5 ul{
	justify-content: center;
	text-align: center;

}
#Div_5 li{
	min-width: 100px;
	padding: 10px;
}


#Div_6 li{
	width: 100px;
	padding: 10px;
	text-align: center;
	
}


#Div_7 ul{
	flex-direction: column;
	justify-content: center;
	text-align: center;

}
#Div_7 li{
	width: 50%;
	min-width: 225px;
	padding: 10px;
	margin: 10px auto;
	box-sizing: border-box;
}

#Div_11 > div:nth-child(1) > div > ul li{
	width: 600px; padding: 10px
}

#Div_13 ul{
	justify-content: center;
	text-align: center;

}
#Div_13 li{
	min-width: 100px;
	padding: 10px;
}


#Div_14 > div:nth-child(1) > div{
	display: flex;
	flex-direction: column;

}

#telefono, #email, #nombre{
	width:50%;	
	min-width: 350px;
	margin: 10px auto;
	box-sizing: border-box;
	height: 40px;


}

#avanzafinal{ margin: 0 auto; }


#contenedor_datos_tarificados{
	max-width: 750px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

}


.contenido_datos_tarificados{
	display: flex;
}

.contenido_datos_tarificados div{
	width: 175px;
	margin: 1px 0px;
	padding: 10px 5px;
	text-align: center;

}

.contenido_datos_tarificados div:nth-child(1){
	background: #162f83;
	color:white;
}

.contenido_datos_tarificados div:nth-child(2){
	background: #DEE8FB;
	color: #162f83;
}

.Boton_rojo{
	padding: 5px;
	color:white;
	background: #AE0202;
	border-bottom: 3px solid #930404;
	font-size: 20px;
	border-radius: 7px;
	max-width: 220px;
	margin:15px auto;
	text-align: center;

}

.Boton_rojo a{
	text-decoration: none;
	color:white;
}

.Boton_rojo:hover{
	opacity: 0.5;
}


#contenedor_precios{
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border:1px solid #d9e9fa;

}

.contenido_precios{
	width: 25%;
}


.TariBarcosProducto{ 
	font-size: 22px;
	font-weight: bold;
	background: #162f83;
	color:white;
	height: 65px;
	padding: 5px;
	border-right: 1px solid #d9e9fa;
}
.TariBarcosProducto:last-child {border-right: none;}

.TariBarcosPrecio{ font-size: 35px; color:#AE0202;padding: 5px; border-bottom: 2px solid #162f83; font-weight: bold;}
.TariBarcosNoPrecio{ font-size: 16px; color:gray;height: 50px;	padding: 5px; line-height: 200%; text-align: center;}



.linea_comparativa{ display: flex; align-items: center; padding: 0px 10px }
.linea_comparativa div:nth-child(1){ margin: 0 10px; }
.linea_comparativa div:nth-child(2){ font-size: 15px; color: #162f83; }
.check{ color:green;font-size: 30px; }
.cross{ color:darkorange;font-size: 30px; }


#contenedor_precios > div:nth-child(1),#contenedor_precios > div:nth-child(3){
background: #d9e9fa;}






.llamada { margin-top:10px;}
.llamada p { font-size:20px;text-align:center;}
.llamada span { font-size:40px; font-weight: bold;}
.llamada button { text-transform:uppercase;}


.mensaje {
width:100%;
padding:10px;
font-weight:bold;
text-align:center;
background:#fdec3f;
box-sizing:border-box;
font-size:135%;
max-width: 1200px;
border-bottom: 5px solid #ecdc3d;
margin:0px auto;
border-radius: 5px

}

#llamada_abajo {
	font-size:18px;
	padding: 10px;
	color:white;
	background: #AE0202;
	border-bottom: border-bottom: 3px solid #930404;;
	text-align: center;
	border-radius: 5px;
	width: 275px;
	margin: 0px auto 20px;
}




#llamada_abajo:hover{
	opacity: 0.5;
}

#Div_14 label {font-size: 15px; font-weight: normal; vertical-align: middle;}

#ley {margin-right: 12px;}
#Div_14 label a {color:#000;}
#Div_14 label a:hover {text-decoration: none;}
#email {margin-bottom: 30px;}

li#subtipo-1, li#subtipo-2 {min-width: 150px}

.TariBarcosProducto, .TariBarcosPrecio {text-align: center;}
label {display: inline-block;}
.TariBarcosSubProducto {font-size:60%;}
.TariBarcosProducto {line-height: 75%;padding: 20px;}

#g-navigation {display: none}

div#lopd{display:flex; justify-content:center}
div#lopd label{text-align:left}



div.tercer_bloque{padding:15px}
div.tercer_bloque #agradecimiento{margin: 15px auto; padding: 35px; background-color: #d9e9fa; max-width: 600px;position: relative}
span.span_gracias{font-weight: bold;font-size: 30px;}
div.tercer_bloque #agradecimiento::after{content: url('../img/timon.png');position: absolute;bottom: 25px;right: 25px;}

/******* ESTILO NUEVO LOPD ******************************/
#tariBarcos #lopd{margin:15px auto}
#tariBarcos #lopd label{font-size:11px; margin-left:8px}
#tariBarcos #lopd label a{font-weight:bold; text-decoration:underline}
#tariBarcos #lopd input#idprotecciondatos{width:70px !important;margin-top:-10px;min-width:25px}
#tariBarcos #lopd{align-items: start}
#tariBarcos #lopd label p {margin-top: -15px !important;font-size: 11px;}
#tariBarcos #lopd label p > *{font-size: 11px;}




/*******************************************************  MÓVIL **************************************************************/
@media only screen and (max-width: 576px) {

	.paso > div:first-child {padding: 20px;}
	#Div_1 li {width: 100%; padding: 25px}
	#tipo-1, #tipo-2, #tipo-3, #tipo-4 {background-image: none;}
	#Div_2 li {min-width: 80px;}
	#Div_5 li {min-width: 62px;}
    input, select {padding:10px;}
    .botones li {width: 39%;}
    .paso h2 {margin-bottom: 20px;}
    #avanzaFinal {width: 100% !important}
    #telefono, #email, #nombre{width:100%; min-width: 100%; box-sizing: border-box;}
    #tipo-1, #tipo-2, #tipo-3, #tipo-4 {font-size: 17px;}

    .contenido_datos_tarificados {width: 100%;}
	.contenido_datos_tarificados div {width: 50%;}
	.contenido_precios {width: 100%;}

	input#ley {
	-moz-appearance: normal;
    appearance: normal;
    width: 20px !important;
    height: 20px !important;
    }
    
    div.tercer_bloque{padding:0px}
    div.tercer_bloque #agradecimiento {padding: 15px;}
    div.tercer_bloque #agradecimiento::after{content:''}





}


/*********************************************** TABLET ******************************************************************/

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

	.paso > div:first-child {padding: 30px;}
	#Div_1 li {width: 90%; max-width: 350px}
	#avanzaFinal {width: 100%}
	#contenedor_datos_tarificados {width: 100%;}
	.contenido_datos_tarificados {width: 100%;}
	.contenido_datos_tarificados div {width: 50%;}
	.contenido_precios {width: 50%;}

	input#ley {
	-moz-appearance: normal;
    appearance: normal;
    width: 20px !important;
    height: 20px !important;
    }
    div.tercer_bloque #agradecimiento::after{bottom: 25px;right: -25px;}






	}



/***************************** LAPTOP **************************************/

@media only screen and (min-width: 769px) and (max-width: 1024px) {

	.paso > div:first-child {padding: 40px;}
	#Div_1 li {width: 48%;}
	#tipo-1, #tipo-2, #tipo-3, #tipo-4 {background-position: 1.5% center;}
	.TariBarcosProducto {font-size: 17px;}



}




/***************************** ORDENADOR **************************************/

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

	.paso > div:first-child {padding: 50px;}
	#Div_1 li{width: 40%;}
	


}