*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: square;
	font-size: 14px;
	font-weight: 1;
}

body{

}

header{
	background: #FB700D;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}


/*--------logo juntas---------*/
	header figure{
		background: #FB700D;
		height: 60px;
		padding: 5px;
		position: relative;
		margin: auto;
		text-align: center;
		z-index: 1000;
	}
		header figure img{
			height: 100%;
			position: relative;
		}


/*------------MENU----------*/

	header nav{
		display: inline-block;
		position: absolute;
		background: #fff;
		width: 100%;
		height: auto;
		text-align: right;
		z-index: 100;
		top: -102px;
		transition-duration: .6s;
	}
		header nav.abierto{
			top: 60px;
			transition-duration: .6s;
		}

		header nav.ocultar{
			top: -102px;
			transition-duration: .6s;
		}

/*--boton cerrar y abrir menu---*/
header nav #cerrar{
	position: absolute;
	background: #fff;
	width: 40px;
	height: 40px;
	right: 25px;
	bottom: -40px;
	border-radius: 0 0 5px 5px;
}
	header nav div#cerrar:after{
		background-image: url('../imagenes/menu.png');
		-webkit-background-size: 25px 25px;
		background-size: 25px 25px;
		display: inline-block;
		width: 25px;
		height: 25px;
		content: "";
		margin-top: 9px;
		margin-right: 7px;
	}
	header nav.abierto div#cerrar:after{
		background-image: url('../imagenes/cerrar.png');
		-webkit-background-size: 20px 20px;
		background-size: 20px 20px;
		display: inline-block;
		width: 20px;
		height: 20px;
		content: "";
		margin-top: 10px;
		margin-right: 9px;
	}

/*--botones menu----*/
		header nav a{
			text-decoration: none;
			color: #000;
			padding: 10px 25px 10px 0;
			display: block;
		}
			header nav a:hover{
				font-family: squareBold;
				color: #0B65AB;
				background: #E6E6E6;
			}
		header nav span{
			font-size: .7em;
			display: block;
		}
		
			

/*-------whatsapp----------*/
	header a#whatsapp{
		text-decoration: none;
		color: #000;
	}
	header #whatsapp{
		width: 50px;
		height: auto;
		right: 10%;
		bottom: 10%;
		z-index: 1000;
		position: fixed;
		cursor: pointer;
	}
		header #whatsapp img{
			width: 100%;border-radius: 50%;
			box-shadow: 2px 2px 15px; #000
		}




	/*-----------placa principal---------------*/

	main section#inicial{
		background: url(../imagenes/chapa.jpg) no-repeat center top;
		background-size: cover;
		width: 100%;
		height: 300px;
		display: block;
		position: relative;
		margin-top: 50px;
		overflow: hidden;
	}

		main section#inicial figure img{
			height:280px;
			position: absolute;	
			bottom: -30px; 
			left: 5%;
			-webkit-filter:drop-shadow(10px 10px 50px #000); /* Safari 6.0 - 9.0 */
    				filter:drop-shadow(10px 10px 50px #000);
		}

		main section#inicial div h3{
			text-align: right;
			width: 70%;
			position: absolute;
			right: 5%;
			bottom: 10px;
			color: #fff;
			font-size: 2em;
			text-shadow: 10px 10px 50px #000;
		}


	/*------------iconos circulares---------------*/

	main section#iconos{
		background: #0B65AB;
		width: 100%;
		height: auto;
		padding: 30px 0 10px 0;
		display: block;	
		position: relative;	
	}

		main section#iconos #icono{
			width: 80%;
			height: auto;
			margin: auto;
			overflow: hidden;
		}

			main section#iconos #icono figure{
				background: #fff;
				width:40%;
				height: auto;
				margin: 5px 5% 70px 5%;
				border-radius: 50%;
				border: 4px solid orange;
				position: relative;
				display: block;
				float: left;				
			}

				main section#iconos #icono figure img{
					width: 100%;
					padding: 20%;
					display: block;
				}

				main section#iconos #icono figure figcaption{
					position: absolute;
					display: block;
					height: auto;
					width: 100%;
					margin: 0%;
					margin-top: 10px;
					text-align: center;
					font-family: 'squareBold';
					color: #fff;
					font-size: .8em;
				}	


/*------recuadro de INFO de todas las secciones-------*/
main section .ficha{
	width: 60%;
	height: auto;
	position: absolute;
	top: 0;
	border-radius: 0 0 15px 15px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	max-width: 250px;
}
	
main section#varios .ficha#fichaVarios,
main section#electricidad .ficha#fichaElectricidad{
	right: 3%;
}
main section#marcas .ficha#fichaMarcas,
main section#tren .ficha#fichaTren,
main section#juntasImg .ficha#fichaJuntasImg{
	left: 3%;
}

	main section .ficha .titulo{
		background: #000;
		font-size: .65em;
		padding: 10px 15px;
		font-family: 'squareBold';
	}
		main section .ficha .titulo #secundario{
			font-size: 1em;
		}
	main section .ficha .texto{
		font-size: .7em;
		font-family: square;
		padding: 10px 10px 10px 10px;
		text-align: left;
		text-align: justify;
		min-height: 95px;	
	}
	main section .ficha#fichaMarcas .texto{
		padding-top: 20px;
	}
	
	main section .ficha#fichaTren .texto{
		padding-top: 25px;
	}
	
	main section .ficha#fichaElectricidad .texto{
		padding-top: 15px;
	}
		main section .ficha .texto h3{
			font-weight: 200;font-size: 1em;
		}
	main section#marcas .ficha .texto,
	main section#tren .ficha .texto,
	main section#juntasImg .ficha .texto{
		background: #0b65ab;
		border-radius: 0 0 15px 15px;
		text-align: center;
	}
	main section#marcas .ficha .texto{
		text-align: center;

	}

	main section#varios .ficha .texto,
	main section#electricidad .ficha .texto{
		text-align: center;
		background: #fb700d;
		border-radius: 0 0 15px 15px;
	}
	

	

	/*---------------placa de marcas----------------*/

main section#marcas{
	background: url(../imagenes/fondo1.jpg)no-repeat center center;
	background-size: cover;
	width: 100%;
	height: 300px;
	display: flex;
	position: relative;
}
	main section#marcas #contMarcas{
		right: 5%;
		width: 90%;
		height: 100%;
		display: flex;
    	justify-content: flex-end;
    	align-items: flex-end;
	}
	

/*----conjunto marcas derecha------*/

	main section#marcas figure#der{
		width: 25%;
		height: auto;
		position: relative;
		bottom: 7%;
		-webkit-order: 2;
		-moz-order: 2;
		-ms-order: 2;
		-o-order: 2;
		order: 2;
	}
		main section#marcas figure#der img{
			position: relative;
			display: inline-block;
			/*display: 	none;	*/
			width: 85%;
			margin-top: 15px;
		}

/*----conjunto marcas izquierda------*/

	main section#marcas figure#izq{
		width: 73%;
		height: auto;
		position: relative;
		bottom: 5%;
		-webkit-order: 1;
		-moz-order: 1;
		-ms-order: 1;
		-o-order: 1;
		order: 1;
	}
		main section#marcas figure#izq img{
			display: inline-block;
			position: relative;
			width: 25%;
			margin-right:0%;
			margin-top: 0%;		
		}
			main section#marcas figure#izq img:nth-child(3),
			main section#marcas figure#izq img:nth-child(4){
				width: 25%;
				padding: 3% 4%;		
			}
			main section#marcas figure#izq #inf img:nth-child(1){
				width: 25%;
				padding: 3% 2%;
				margin: 0 0px;
			}
		main section#marcas figure#izq .linea{
			overflow: hidden;
			display: block;
			width: 100%;
			height: 50%;
			-ms-display: flex;
				display: flex;
			align-items:  center;
		}
			main section#marcas figure#izq #sup img:nth-child(3),
			main section#marcas figure#izq #sup img:nth-child(4){
				padding: 3% 3%;
			}
					

/*--------------placa repuestos varios--------------*/

main section#varios{
	background: url(../imagenes/productos.jpg)no-repeat center center;
	background-size: cover;
	width: 100%;
	height: 300px;
	display: block;
	position: relative;

}
	main section#varios figure{
		position: relative;
		text-align: center;
	}
		main section#varios figure img{
		width:  100%;
		overflow: hidden;

	}


/*-------------placa tren delantero-------------*/

main section#tren{
	background: url(../imagenes/asfalto.jpg)no-repeat center center;
	background-size: cover;
	display: block;
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
}
	main section#tren figure{
		position: absolute;
		width: 50%;
		height: 50%;
		bottom: 0;
		right: 0;
	}
		main section#tren figure img{
			width:250px;
			transform: rotateY(180deg);
			position: absolute;
			bottom: -0px;
			right:0px;
			-webkit-filter:drop-shadow(5px 8px 10px #000); /* Safari 6.0 - 9.0 */
					filter:drop-shadow(5px 8px 10px #000);
		}


/*---------------placa electricidad--------------*/

main section#electricidad{
	background: url(../imagenes/fondo2.jpg)no-repeat center center;
	background-size: cover;
	display: block;
	position: relative;
	height: 300px;	
}
	main section#electricidad figure{
		position: absolute;
		height: 80%;
		width: 97%;
		bottom: 0;
		left: 10px;
		overflow: hidden;
	}
		main section#electricidad figure img{
			width: 350px;
			position: absolute;
			bottom: 0px;
			left: 0px;
			-webkit-filter:drop-shadow(5px 8px 10px #000); /* Safari 6.0 - 9.0 */
				filter:drop-shadow(5px 8px 10px #000);
		}


/*------------placa juntas especiales (foto)-----------*/

main section#juntasImg{
	background: url(../imagenes/junta-azul.jpg)no-repeat center center;
	background-size: cover;
	width: 100%;
	height: 300px;
	display: block;
	position: relative;
	
}
	main section#juntasImg figure{
		position: relative;
		text-align: center;
	}
		main section#juntasImg figure img{
		width:  100%;
		
	}


/*-------------placa juntas especiales--------------*/

main section#juntas{
	background: #d2d3d5;
	padding: 15px;
	text-align: center;
	width: 100%;	
	position: relative;
}
	main section#juntas h2{
		font-family: 'squareBold';
		width: 100%;
		font-size: 1.1em;
		color: #0b65ab;
		padding: 15px 0 0px 0;
	}
	main section#juntas h3{
		font-family: 'squareBold';
		width: 100%;
		font-size: 1.2em;
		color: #111;
		padding-bottom: 10px;

	}
	main section#juntas p{
		width: 100%;
		font-size: .9em;
		color: #111;
		padding: 5px 0 15px 0;
	}
	main section#juntas div#video{
		display: flex;
		align-items: center;
		position: relative;
		margin: 15px 0;
	}
		main section#juntas div#video a{
			text-decoration: none;
			background: #fb700d;
			color: #fff;
			padding: 10px 20px;
			border-radius: 5px;
			font-family: 'squareBold';
			font-size: .8em;
			width: 100%;
			display: inline-block;
			position: relative;
			
		}
			main section#juntas div#video a:hover{
				background: #E2660D;
			}
			main section#juntas div#video div{
				position: absolute;
				right: 5px;
				margin-top: 2px;
				border-width: 10px 0 10px 15px;
				border-color: transparent transparent transparent #fff ;
				border-style: solid;
			}

	/* ver proceso fabricación */

	main section#juntas div#fotos{
		display: none;
	}
		main section#juntas div#fotos.abierto{
			position: fixed;
			background: #fff;
			display: flex;
			width: 90%;
			top: 20%;
			height: auto;
			align-items: center;
			justify-content: center;
			padding-bottom: 20px;
			border-radius: 7px;
			z-index: 900;
			box-shadow: 0px 0px 20px #000;
			left: 5%;
		}
			main section#juntas div#fotos.abierto figure img{
				display: block;
				position: relative;
				width: 90%;
				height: auto;
				margin: auto;
				top: 10px;
				padding: 10px 0;
				
			}
		main section#juntas div#fotos figure #cerrar{
					position: absolute;
					background: #fff;
					top: -10px;
					right: -10px;
					width: 30px;
					height: 30px;
					border-radius: 30px;
					font-family: squareBold;
					font-size: 20px;
					padding-top: 3px;
					padding-right: 0px;
					box-shadow: 0px 0px 5px #000;
					color: #0b65ab;
				}

/*-----------placa contacto----------------*/

main section#contacto{
	background: #d2d3d5;
	width: 100%;
	padding: 15px;
}
	/*---titulo---*/
	main section#contacto h2{
		margin: auto;
		position: relative;
		display: block;
		width: 100%;
		text-align: center;
		padding: 15px;
		font-family: 'squareBold';
		font-size: 1.2em;
	}
	/*---texto---*/
	main section#contacto div h3{
		width: 100%;
		margin: auto;
		padding-bottom: 10px;
	}
		main section#contacto div#direc h3 span{
			font-family: 'squareBold';
			font-size: .9em;
		}
	/*---telefono--*/
	main section#contacto div#tel h3{
		margin-top: 15px;
		font-family: 'squareBold';
		font-size: 1.3em;
	}
	

/*----botones contacto-----*/
	main section#contacto div{
		width: 100%;
		margin: auto;
		margin-bottom: 5px;
		text-align: center;
		position: relative;
	}
	main section#contacto div div.botones{
		display: flex;
		-ms-display: flex;
		align-items: flex-start;
		justify-content: center;
	}

		main section#contacto div.botones a{
			text-decoration: none;
			background: #0b65ab;
			font-family: 'squareBold';
			border-radius: 5px;
			padding: 5px 8px;
			font-size: .8em;	
			position: relative;
			display: inline-block;
			color: #fff;
			justify-content: center;
		}

		/*---ventana de horarios---*/
			main section#contacto div#datosCont #horarios{
					display: none;
				}
			main section#contacto div#datosCont #horarios.abierto{
				position: absolute;
				background: #fff;
				display: block;
				width: 80%;
				left: 10%;
				padding-bottom: 20px;
				border-radius: 7px;
				z-index: 900;
				box-shadow: 0px 0px 20px #000;
				bottom: 0px;
			}
				main section#contacto div#datosCont #horarios h6{
					background: #fb700d;
					color: #fff;
					font-family: squareBold;
					padding: 15px 0 15px 0;
					border-radius: 5px 5px 0 0;
					margin-bottom: 15px;
				}
				main section#contacto div#datosCont #horarios p:nth-child(5){
					margin-top: 10px;
					font-family: squareBold;
					color: #0b65ab;
				}
				
				main section#contacto div#datosCont #horarios #ocultar{
					position: absolute;
					background: #fff;
					top: -10px;
					right: -10px;
					width: 30px;
					height: 30px;
					border-radius: 30px;
					font-family: squareBold;
					font-size: 20px;
					padding-top: 3px;
					padding-right: 0px;
					box-shadow: 0px 0px 5px #000;
					color: #0b65ab;
				}
					

			main section#contacto div a.info{
				display: flex;
				align-self: center;
				flex-direction: column;
				justify-content: center;
				width: 46%;
				margin: 2%;
				height: 40px;

			}
			main section#contacto div#tel a{
				display: inline-block;
				width: 97%;
				font-family: 'squareBold';
			}
/*---redes---*/
		main section#contacto div#redes{
			display: block;
			width: 95%;
			min-width: 240px;
			max-width: 200px;
		}
			main section#contacto div#redes a{
				text-decoration: none;
				position: relative;
				color: #000;
				text-align: right;
				padding: 20px 10px;
				display: block;
			}
				
				main section#contacto div#redes a p:nth-child(2){
					font-family: 'squareBold';
					font-size: .9em;
				}
				main section#contacto div#redes a p:nth-child(3){
					font-size: .54em;
				}
				main section#contacto div#redes img{
					width: 45px;
					float: left;
					top: -8px;
					position: relative;
				}



	/*------pie de pagina---------*/

footer{
	background: #fff;
	width: 100%;
	height: 50px;
	position: relative;
}
	footer a{
		text-decoration: none;
		color: #333333;
		font-size: .6em
	}

	/*---creditos imagenes----*/
		footer a#creditos{
			float: left;
			position: relative;
			top: 25px;	
			left: 7%;	
		}
			footer a#creditos:after{
				content: 'FREEPIK';
				font-family: 'square';
				position: relative;
				top: -15px;
				left: -62px;
				font-size: 1.2em;
			}
	/*----creditos diseño------*/
		footer a#timon{
			float: right;
			position: relative;
			top: 27px;	
			right: 7%;	
		}
			footer a#timon img{
				position: absolute;
				width: 100%;
				top: -20px;
				height: auto;
			}





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

/*----recuadro INFO todas las secciones-----*/
main section .ficha{
	min-height: 110px;
}
	main section#varios .ficha#fichaVarios,
	main section#electricidad .ficha#fichaElectricidad{
		right: 5%;
	}
	main section#marcas .ficha#fichaMarcas,
	main section#tren .ficha#fichaTren,
	main section#juntasImg .ficha#fichaJuntasImg{
		left: 5%;
	}
	/*------------marcas--------------*/

/*----conjunto marcas derecha------*/
main section#marcas figure#der{
	bottom: 5%;
}

/*----conjunto marcas izquierda----*/
main section#marcas figure#izq{
	width: 70%;
	bottom: 02%;
}

	main section#marcas figure#izq #sup{
		top: 15px;
	}

}








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

	/*-------placa principal----------*/

main section#inicial {
	height: 250px;
	position: relative;
}

	main section#inicial figure img{
		height:250px;
		position: absolute;	
		bottom: -30px; 
		left: 15%;
	}

	main section#inicial div h3{
		right: 15%;
		font-size: 1.5em;
	}


	/*--------iconos circulares------*/


	main section#iconos #icono figure{
		position: relative;
		width:20%;
		margin: 5px 2.5% 50px 2.5%;
	}

	main section#iconos #icono figure figcaption{
		font-size: .8em;
		width: 100%;
		margin: 10px 0 ;
		height: 40px;
	}

/*----conjunto marcas izquierda----*/
	main section#marcas figure#izq{
		max-height: 200px;
		width: 70%;
		bottom: 0%;
		left: 0;
	}
		main section#marcas figure#izq #sup{
			top: 30px;
		}

		main section#marcas figure#izq .linea#sup{
			position: relative;
			top: 25px;
		}

			main section#marcas figure#izq #inf img:nth-child(1) {
			    width: 25%;
			    padding: 5% 5%;
			    margin: 0 0px;
			}
				main section#marcas figure#izq #inf img:nth-child(4) {
			    width: 25%;
			    padding: 5% 5%;
			    margin: 0 0px;
			}

				main section#marcas figure#izq #sup img:nth-child(4) {
			    width: 25%;
			    padding: 6% 5%;
			    margin: 0 0px;
			}

	
/*----conjunto marcas derecha----*/
	main section#marcas figure#der{
		max-height: 290px;
		margin-bottom: 0%;
	}
		main section#marcas figure#der img{
			margin-top: 5%;	
		}	
		
/*---juntas especiales----*/
main section#juntas{
	padding-top: 50px;
	min-height: 350px;
}
	main section#juntas div#video{
		max-width: 350px;
		margin: auto;	
	}


/*----contacto----*/
main section#contacto div.botones{
	max-width: 440px;

}


}



@media only screen and (min-width: 600px) {
		
/*-----menu----*/
header{
	background: #000;
}
header figure{
	width: 140px;
	padding-left: 10px;
	position: relative;
	margin:0;
	left: 0;
	background: #fb700d;
}
	header figure .triangulos{
		height: 60px;
		width: 15px;
		position: absolute;
		top: 0px;
		border-width: 30px 0 30px 15px;
		border-color: transparent transparent transparent #fb700d ;
		border-style: solid;
		z-index: 1500
	}
		header figure .triangulos#t1{
			background: #9A9A9A;
			left: 140px;
		}
		header figure .triangulos#t2{
			background: #656565;
			left: 155px;
			width: 10px;
			border-color: transparent transparent transparent #9a9a9a ;
		}
		header figure .triangulos#t3{
			background: yellow;
			left: 170px;
			background: none;
			border-color: transparent transparent transparent #656565 ;
		}

header nav{
	background: #000;
	right: 0;
	width: 75%;
	top: 0px;
	padding-right: 10px;
	height: 60px;
	text-align: right;

}
header nav a{
	color: #fff;
	font-family: squareBold;
	float: right;
	position: relative;
	font-size: .6em;
	padding: 10px 5px;
	position: relative;
	border-radius: 5px;
	margin-top: 15px;
}
	header nav a:nth-child(1){
		padding: 10px 5px 4px 5px;
	}
	header nav a:hover{
		background:  #0b65ab;
		color: #fff;
	}
	header nav #cerrar{
		display: none;
	}

/*-------placa principal----------*/
main section#inicial{
	height: 400px;
}

	main section#inicial figure img{
		height:350px;
		left: 10%;
	}

	main section#inicial div h3{
		right: 12%;
		bottom: 20px;
		font-size: 1.90em;
	}


	/*------------iconos circulares---------------*/

	main section{
		overflow: auto; /* evita problemas con el float */
		text-align: center;
	}
		
		main section#iconos #icono {
			max-width: 800px;
			margin: 30px;
			display: inline-block;
			overflow: visible;
		}

			main section#iconos #icono figure{
				border-width: 6px;
				
			}

			main section#iconos #icono figure figcaption{
				font-size: 1.0em;
				width: 120%;
				margin: 10px -10%;
				padding: 10px 0;
			}


/*----secciones---*/ 

/*------recuadro de INFO de todas las secciones-------*/
main section .ficha{
	/*font-size: 17px;*/
	
}
	main section .ficha .titulo{
		font-size: .6em;
	}
	main section .ficha .texto{
		font-size: .7em;
		min-height: 85px;
	}

/*---marcas---*/
	main section#marcas{
		width: 50%;
		height: 250px;
		float: left;
		bottom: 0;
		position: relative;
		display: flex;
	}
		main section#marcas .titulo span{
			font-size: 1.1em;
		}
/*---marcas izquierdas---*/		
	main section#marcas figure#izq .linea#sup{
		position: static;
	}

/*---marcas derechas----*/
	main section#marcas figure#der img{
		width: 100%;
		margin-top: 8px;
	}

/*---varios---*/
	main section#varios{
		width: 50%;
		height: 250px;
		float: left;
	}

	main section#electricidad{
		width: 50%;
		height: 250px;
		float: left;
	}

	main section#tren{
		width: 50%;
		height: 250px;
		float: left;
	}

	main section#juntasImg{
		width: 100%;
		height: 300px;
	}
		main section .ficha#fichaJuntasImg .texto{
			padding-top: 15px;
		}

	main section#juntas{
		background: #d2d3d5;
		width: 100%;
		height: 300px;
		
	}

		main section#juntas #video a{
			margin-top: 20px;
		}

			main section#juntas div#video div{
				top: 25px;
			}

	/*---contacto--*/
	main section#contacto div#datosCont #horarios.abierto{
		width: 60%;
		left: 20%;
	}

}





@media only screen and (min-width: 700px){
	/*---menu----*/
header figure{
	width: 200px;
}
	header figure .triangulos{
		width: 20px;
		border-width: 30px 0 30px 20px;
	
	}
		header figure .triangulos#t1{
			background: #9A9A9A;
			left: 200px;
		}
		header figure .triangulos#t2{
			left: 220px;
	}
		header figure .triangulos#t3{
			left: 239px;
		}
header nav a{
	font-size: .65em;
}

/*-------placa principal----------*/
main section#inicial{
	height: 500px;
}

	main section#inicial figure img{
		height:450px;
		position: absolute;	
		bottom: -30px; 
		left: 10%;
	}

	main section#inicial div h3{
		right: 10%;
		bottom: 50px;
		font-size: 2.5em;
	}

/*--placa INFO todas las secciones--*/
main section .ficha{
	font-size: 18px;
}

/*--marcas--*/
	main section#marcas{
		height: 300px;
	}
	
/*--varios----*/		
	main section#varios{
		width: 50%;
		height: 300px;
		float: left;
	}

/*---electricidad---*/
	main section#electricidad{
		width: 50%;
		height: 300px;
		float: left;
	}
		main section .ficha#fichaElectricidad .texto{
			padding-top: 15px;
		}

/*---tren delantero----*/
	main section#tren{
		width: 50%;
		height: 300px;
		float: left;
	}
		
	main section .ficha#fichaTren .texto{
		padding-top: 25px;
	}

	/* ver proceso */
	main section#juntas div#fotos.abierto{
		top: 20%;
		width: 70%;
		left: 15%;
	}
	main section#juntas div#fotos.abierto figure{
		width: 100%;
		left: 15%;
	}

/*--juntas---*/
	main section#juntas{
		min-height: 300px;
		background: #d2d3d5;
		width: 100%;
		height: 300px;
		
	}

/*--juntas imagen---*/
	main section#juntasImg{
		width: 100%;
		height: 550px;
	}
		main section .ficha#fichaJuntasImg .texto{
			padding-top: 35px;
		}

	

}







@media only screen and (min-width: 830px){
	/*---menu---*/
header nav a{
	font-size: .7em;
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 12px;
}

	/*-------placa principal----------*/

main section#inicial{
	height: 500px;
}

	main section#inicial figure img{
		height:450px;
		position: absolute;	
		bottom: -30px; 
		left: 15%;
	}

	main section#inicial div h3{
		right: 15%;
		bottom: 50px;
		font-size: 3em;
	}


/*--secciones---*/

/*--recuadro INFO todas las secciones----*/
	main section .ficha .texto{
		min-height: 130px;
	}


/*---marcas---*/
	main section#marcas{
		height: 350px;
	}
		main section .ficha#fichaMarcas p.texto{
			padding-top: 38px;

		}
		
/*---repuestos varios---*/
	main section#varios{
		width: 50%;
		height: 350px;
		float: left;
	}

/*--electricidad---*/
	main section#electricidad{
		width: 50%;
		height: 350px;
		float: left;
	}
		main section .ficha#fichaElectricidad .texto{
			padding-top: 30px;
		}
/*---tren delantero---*/
	main section#tren{
		width: 50%;
		height: 350px;
		float: left;
	}
		main section .ficha#fichaTren .texto{
			padding-top: 35px;
		}

/*---juntas---*/
	main section#juntas{
		padding-top: 50px;
		min-height: 350px;
		background: #d2d3d5;
		width: 100%;
		height: 300px;
	}
		main section#juntas p{
			width: 70%;
			margin:auto;
		}

/*---juntas imagen----*/
	main section#juntasImg{
		width: 100%;
		height: 400px;
	}
		main section .ficha#fichaJuntasImg .texto{
			padding-top: 35px;
		}
	
/*---contacto----*/		
	main section#contacto{
		padding-top: 50px;
		min-height: 350px;
	}
		main section#contacto h2{
			margin-bottom: 40px;
		}
}




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

	/*---menu---*/

header nav{
	padding-right: 50px;
}
	header nav a{
		font-size: .8em;
		margin-top: 10px;
	}

	main section#varios .ficha#fichaVarios,
	main section#electricidad .ficha#fichaElectricidad{
		right: 20%;
	}

	main section#marcas .ficha#fichaMarcas,
	main section#tren .ficha#fichaTren,
	main section#juntasImg .ficha#fichaJuntasImg{
		left: 20%;
	}

/*--marcas---*/
	main section#marcas{
		justify-content: flex-end;
		padding-right: 1%;
	}
	main section#marcas #contMarcas{
		left: 10%;
	}
		main section#marcas #contMarcas .linea#sup{
			margin-bottom: -10px;
		}
		main section#marcas #contMarcas #der{
			max-height: 340px;
		}


/*----contacto---*/

	main section#contacto #direc,
	main section#contacto #tel{
		width: 250px;
		display: inline-block;
	}
	main section#contacto #tel{
		width: 170px;
	}
	main section#contacto #datosCont .botones a{
		width: 160px;
		height: 40px;
	}
	main section#contacto #datosCont #tel h3{
		margin-top: 0;
		margin-bottom: 4px;

	}

	/*--redes---*/
	main section#contacto #redes a{
		max-width: 250px;
	}
	

/*---creditos imagenes----*/
	footer a#creditos{
		left: 15%;	
	}
	
/*----creditos diseño------*/
	footer a#timon{
		right: 10%;	
	}


}



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

	/*---menu---*/
header nav{
	padding-right: 100px;
}
header figure{
	width: 300px;
}
	header figure .triangulos{
		width: 20px;
		border-width: 30px 0 30px 20px;
	
	}
		header figure .triangulos#t1{
			background: #9A9A9A;
			left: 299px;
		}
		header figure .triangulos#t2{
			left: 319px;
	}
		header figure .triangulos#t3{
			left: 338px;
		}
/*---ficha info todas las secciones---*/
main section .ficha{
	max-width: 300px;
}
	main section .ficha .titulo{
		font-size: 15px;
	}
	main section .ficha .texto{
		font-size: 16px;
		min-height: 110px;
		
	}
		main section .ficha#fichaMarcas p.texto {
			padding-top: 20px;
		} 
		main section .ficha .titulo span{
			padding: 0 5%;
		}
	main section#varios .ficha#fichaVarios,
	main section#electricidad .ficha#fichaElectricidad{
		right: 15%;
	}

	main section#marcas .ficha#fichaMarcas,
	main section#tren .ficha#fichaTren,
	main section#juntasImg .ficha#fichaJuntasImg{
		left: 15%;
	}

/*---marcas---*/
main section#marcas #contMarcas{
	width: 85%;
	justify-content: flex-start;
}
	main section#marcas figure#der{
		max-height: 340px;
		max-width: 130px;
	}	
		main section#marcas figure#der img{
			width: 80%;

		}
	main section#marcas figure#izq{
		max-height: 200px;
		width: 65%;
		max-width: 300px;
	}
		main section#marcas figure#izq img{

		}
	
/*--tren---*/
	main section .ficha#fichaTren .texto {
		padding-top: 20px;
	} 
	main section#tren figure img{
		width:300px;
		bottom: -0px;
		right:5%;
	}

/*---electricidad---*/

	main section .ficha#fichaElectricidad .texto {
		padding-top: 10px;
	}
	main section#electricidad figure img{
		width:400px;
		bottom: 10px;
	}

	/* proceso fabricación */
main section#juntas div#fotos.abierto{
	width: 60%;
	left: 20%;
}

/*---contacto--*/
main section#contacto div#datosCont #horarios.abierto{
	width: 50%;
	left: 25%;
}

/*--redes---*/
	main section#contacto div#redes{
		max-width: 290px;
		padding: 10px 0;
	}
		main section#contacto div#redes a:nth-child(1){
			font-size: 1.2em;
		}

	main section#contacto #redes a{
		max-width: 100%;
	}
	
}

@media only screen and (min-width: 1465px){
/*-- encabezado---*/
header{
	height: 80px;
}
	header nav{
		padding-top: 10px;
	}
		header nav a{
			font-size: 1em;
		}
	header figure{
		width: 350px;
		height: 80px;
		padding-left: 10px;
	}
		header figure .triangulos{
			height: 80px;
			border-width: 40px 0 40px 30px;
			
		}
			header figure .triangulos#t1{
				left: 350px;
				width: 30px;
			}
			header figure .triangulos#t2{
				left: 380px;
				width: 30px;
			}
			header figure .triangulos#t3{
				left: 409px;
				width: 30px;
			}
/*--placa principal---*/
main section#inicial div h3{
	font-size: 4em;
}

/*---iconos----*/
main section#iconos #icono{
	margin-top: 60px;
	margin-bottom: 120px;
}
main section#iconos #icono figure figcaption{
	font-size: 1.3em;
}


/*---fichas de seccion ---*/
main section#varios .ficha#fichaVarios,
main section#electricidad .ficha#fichaElectricidad{
	right: 25%;
}

main section#marcas .ficha#fichaMarcas,
main section#tren .ficha#fichaTren,
main section#juntasImg .ficha#fichaJuntasImg{
	left: 25%;
}

/*---marcas---*/
main section#marcas #contMarcas{
	width: 75%;
}	

	main section#marcas figure#der{
		max-height: 370px;
		max-width: 130px;
	}	
		main section#marcas figure#der img{
			width: 80%;

		}
	main section#marcas figure#izq{
		max-width: 350px;
	}

/*---tren---*/
main section#tren figure img{
	width:350px;
}	

/*---electricidad---*/
main section#electricidad figure{
	height: 100%;
}
	main section#electricidad figure img{
		width:450px;
		left: 5%;
	}

/*--juntas especiales---*/
main section#juntas{
	font-size: 18px;
	height: 400px;
}
	main section#juntas p{
		max-width: 60%;
	}
		main section#juntas div#video{
			max-width: 550px;
			margin: auto;
		}
			main section#juntas div#video a{
				padding: 10px 15px;
				font-size: 17px;
			}
			main section#juntas div#video div#flecha{
				top: 29px;
				right: 40px;
			}

/*--contacto---*/
main section#contacto h2{
	font-size: 24px;
}
main section#contacto #datosCont{
	width: 50%;
}
main section#contacto #direc{
	font-size: 17px;
	width: auto;
}
	main section#contacto #direc h3{
		font-size: 17px;
	}
main section#contacto #tel{
	display: inline;
	width: auto;
	margin-left: 0;
 	font-size: 17px;
}
	main section#contacto #tel h3{
		margin-bottom: 0px;
	}
main section#contacto .botones {
	font-size: 18px;
	max-width: 300px;
}
	main section#contacto #tel .botones{
		display: none;
	}

/*--redes--*/
header #whatsapp{
	width: 60px;
}

main section#contacto div#redes{
		max-width: 390px;
	}
	
main section#contacto #redes a{
	background: grey;
	border-radius: 10px;
	background: #BEBEBE;
}
	main section#contacto div#redes a:hover{
		background: #A5A5A5; 
	}

	main section#contacto #redes a img{
		margin-left: 10px;
		width: 60px;
		top: -15px;
	}
	main section#contacto div#redes a:nth-child(1){
		font-size: 1.5em;
		
	}

	main section#contacto div#redes a p{
		margin-right: 10px;
	}

}