/* Layout CSS
--------------------------------------------------------------------------------------------
ABOUT:					Contiene estilos para la estrucutura de la pagina, su layout
						y presentacion en pantalla
	
CREATED ON/By:			20/11/2010 by Guillermo Avalos - KDS
CONTACT INFO:			Email at guillermo@kdsarg.com
LAST MODIFICATION:		10/03/2019
----------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------------------
   Tipografias base
----------------------------------------------------------------------------------------- */

body, p {
	font-family: Helvetica, Sans-Serif;
	/*font-family: 'Roboto', sans-serif;*/
	font-size: 15px;
	line-height: 19px;
	letter-spacing: -0.1px;
	font-weight: 400;
	font-style: normal;
	color: #333;
	
	-webkit-font-smoothing: antialiased; 
	-moz-osx-font-smoothing: grayscale;
}

		/* Agrandamos un poco el texto para mobile */
		@media only screen and (max-width: 767px) {
			body, p { font-size: 16px; line-height: 22px; }
		}

		/* Negrita */
		em {
			font-weight: 700;
			font-style: normal;
		}

h1, h2, h3, h4, h5, h6 {
	font-family: Helvetica, Sans-Serif;
	/*font-family: 'Roboto', sans-serif;*/
	font-weight: 700;
	font-style: normal;
	color: #333;
	line-height: normal;	
}
		
		/* Los H5 son en mayúsculas */
		h5 {
			text-transform: uppercase;
			margin-bottom: 8px;
		}
		
		/* Negrita en titulos */
		h1 em,
		h2 em,
		h3 em,
		h4 em,
		h5 em {
			font-weight: 400;
			font-style: normal;
		}

sub {vertical-align: sub; font-size: smaller;}	
sup {vertical-align: super; font-size: smaller;}		


/* Color por default para links
----------------------------------------------------------------------------------------- */
a {
	color: #007dc3;
	text-decoration: none;
}
		a:hover { color: #00a1f1; }
		
		a:visited { outline: none; }

		/* Imagenes dentro de links siempre deberan estar alineadas al medio */
		a img { vertical-align: middle; }










/* -----------------------------------------------------------------------------------------
   Formularios
----------------------------------------------------------------------------------------- */

/* Campos predeterminados, salvo los checkboxes */
input:not([type=checkbox]), textarea, select {
	touch-action: manipulation;
	text-overflow: ellipsis;
	
	width: 96%;
	margin: 8px 0 4px 0;
	padding: 12px 2% 12px 2%;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	font-size: 14px;
}
		/* Dejamos márgen para los checkboxes */
		input[type=checkbox] {
			margin: 6px 4px 12px 0;
		}
		
		/* Removemos la sombra interna en iOS de todos los campos menos los checkbox y radios */
		input:not([type=checkbox]):not([type=radio]) {
			-webkit-appearance: none;
		}

		/* Resize vertical para el campos textare */
		textarea {
			resize: vertical;
			-webkit-appearance: none;
		}
		
		/* Menus drop-down */
		select {
			appearance: button;
			-webkit-appearance: button;
			text-overflow: ellipsis;
			
			border-radius: 4px;
			width: 100%;
		}
		
		/* Cuando hay un error de validación los coloreamos */
		input.error,
		textarea.error,
		select.error {
			border: 1px solid #f2c7c7;
			background-color: #fee;
		}
		
		/* Placeholders: Pseudo clase para colorearlos */
		input::placeholder, textarea::placeholder, select::placeholder {
			color: #c7c7c7;
		}

#form-submit-wrapper {
	border-top: 1px solid #ddd;
	padding: 20px 0 0 0;
}

		
		/* Botones submit: No deben ocupar todo el ancho */
		button[type=submit] {	
			width: 100%;
			cursor: pointer;
			
			padding: 12px 22px 12px 22px;
			display: block; 
			
			text-align: center;
			font-weight: 900;
			font-size: 14px;
			color: #fff;
			
			background-color: #007dc3;
			border-top: 1px solid #f7f7f7;
			border-left: 1px solid #f7f7f7;
			border-right: 1px solid #f7f7f7;
			border-bottom: 1px solid #dedddd;
			
			box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -2px;
			border-radius: 4px;
		
		}
		
				/* Tablet - Ajustes visuales */
				@media only screen and (min-width: 768px) and (max-width: 959px) {
					textarea {width: 100% !important;}
				}
				
				/* Mobile - Ajustes visuales */
				@media only screen and (max-width: 767px) {
					input:not([type=checkbox]), textarea, select {font-size: 16px; padding: 10px !important; margin-top: 8px !important; width: 96% !important;}
					input[type=checkbox] { margin: 30px 6px 20px 0;}
					select {width: 102% !important;}
					button[type=submit] {margin: 10px 0 0 0; width: 100%;}
				}

label {
	font-weight: 900;
}
		
		/* Labels de error debajo de los campos */
		label.error {
			font-weight: normal !important;
			color: #f08b8b;
			font-size: 13px !important;
			padding: 12px 0 0 8px !important;
		}
		
				/* Agregamos una felchita*/
				label.error:before {
					content: "\f106";
					font-family: 'Font Awesome 5 Free';
					font-weight: 900;
					padding-right: 4px;
					display: inline-block;
					
				}

		
/* Mensaje cuando el formulario se envió correctamente */
p.form-success {
	background-color: #effff0;
	padding: 10px;
	border: 1px solid #aaf388;
	border-radius: 2px;
}
	p.form-success:before {
		content: "\f058";
		font-family: 'Font Awesome 5 Free';
		font-size: 17px;
		font-weight: 900;
		padding-right: 8px;
		color: #61c234;
		display: inline-block;
	}
		
/* Mensaje cuando ocurre un error al enviar el formulario */
p.form-error {
	background-color: #fff3ec;
	padding: 10px;
	border: 1px solid #f99a71;
	border-radius: 2px;
}
	p.form-error:before {
		content: "\f071";
		font-family: 'Font Awesome 5 Free';
		font-size: 17px;
		font-weight: 900;
		padding-right: 8px;
		color: #f3471c;
		display: inline-block;
	}

	
	
	
	
	
	
	
	
	
/* -----------------------------------------------------------------------------------------
   Encabezados. Varios estilos son identicos para las tres versiones
----------------------------------------------------------------------------------------- */

/* Wrapper para contener todo el encabezado  */
#header-wrapper {
	background-color: #ffffff;
	width: 100%;
	position: sticky;
		position: -webkit-sticky;
		position: -moz-sticky;
		position: -ms-sticky;
		position: -o-sticky;

	left: 0;
	top: 0;
	z-index: 1000;
}

		/* Desktop - Escondemos tablet y mobile */
		#header-tablet, #header-mobile, #header-mobile-menu {
			display: none;
			transition: all 100ms ease-in-out;
				-webkit-transition: all 100ms ease-in-out;
				-moz-transition: all 100ms ease-in-out;
				-o-transition: all 100ms ease-in-out;
		}				
						
		/* Tablet - Escondemos desktop y mobile */
		@media only screen and (min-width: 768px) and (max-width: 959px) {
			#header-desktop, #header-mobile, #header-mobile-menu { display: none; }
			#header-tablet {display: block;}
		}
		
		/* Mobile - Escondemos desktop, tablet y el menu mobile desplegable */
		@media only screen and (max-width: 767px) {
			#header-desktop, #header-tablet, #header-mobile-menu { display: none; }
			#header-mobile {display: block;}

		}	


/* Encabezado Desktop
----------------------------------------------------------------------------------------- */
header {
	height: 88px;
	overflow: hidden; 
}

		/* Contenedor para el logo */
		header div.header-logo {
			height: 78px;
			padding-top: 10px;
		}
			/* Logo */
			header div.header-logo img {
				height: 30px;
				margin-top: 20px;
			}
		
		/* Navegacion */
		 nav {	
			height: 58px;
			padding-top: 40px;	
			text-align: right;
		}
				/* Items en la lista de links */
				nav ul li  {
					display: inline;
					padding: 30px 10px 30px 10px;
					/*font-family: Helvetica, Sans-Serif;*/
					font-family: 'Roboto', sans-serif;
					font-size: 12px;
					font-weight: bold;
					text-transform: uppercase;
					color: #0180c1;
				}
						
						/* Links en encabezado Desktop */
						#header-desktop nav ul li a, #header-tablet nav ul li a { color: #007dc3; }
						
								/* Hover en los links */ 
								#header-desktop nav ul li a:hover {
									color: black;
								}
								/* Link activo */ 
								#header-desktop nav ul li a.active {
									color: black;
									padding-bottom: 6px;
									border-bottom: 4px solid #007dc3;
								}
										
						nav ul li:last-child { padding-right: 0px; }
						
		/* Al Hacer scroll escondemos el encabezado en vista Desktop y Mobile */
		#header-desktop.header-desktop-hide { display: none; }
		
		/* En mobile lo ocultamos porque usamos el header de mobile estático */
		@media only screen and (max-width: 767px) {
			#header-desktop.header-desktop-hide { display: none; }
		}

				/* Pero si lo mostramos en el home ("body id='home'") */
				body#home #header-desktop.header-desktop-hide { display: block !important; }
				
				/* En este caso, como hicimos un override para mostrarlo en la instrucción anterior, debemos declararlo de nuevo para ocultarlo en la vista mobile del home ("body id='home'") */
				@media only screen and (max-width: 767px) {
				body#home #header-desktop.header-desktop-hide { display: none !important; }
				}
		
/* Encabezado Tablet
----------------------------------------------------------------------------------------- */

/* Al Hacer scroll escondemos el encabezado en vista Tablet */
#header-tablet.header-tablet-small {
			display: none !important;
			transition: all 100ms ease-in-out;
				-webkit-transition: all 100ms ease-in-out;
				-moz-transition: all 100ms ease-in-out;
				-o-transition: all 100ms ease-in-out;
}

				/* Hover en los links */ 
				#header-tablet nav ul li a:hover {
					color: black;
				}
				/* Link activo */ 
				#header-tablet nav ul li a.active {
					color: black;
					padding-bottom: 6px;
					border-bottom: 4px solid #007dc3;
				}

		

/* Encabezado Mobile
----------------------------------------------------------------------------------------- */
#header-mobile { height: 60px;}

		/* Contenedor para el logo */
		#header-mobile div.header-logo {
			height: 50px;
			padding-top: 10px;
		}
		
				/* Logo */
				#header-mobile div.header-logo img {
					height: 20px;
					margin-top: 12px;
				}

							
				/* Toggle del menu mobile */
				#mobile-nav-toggle {
					width: 30px;
					height: 30px;
					display: block;
					float: right;
					cursor: pointer;
					position: relative;
					top: 20px;
				}
				
						#mobile-nav-toggle span,
						#mobile-nav-toggle span:before,
						#mobile-nav-toggle span:after {
							cursor: pointer;
							border-radius: 1px;
							height: 3px;
							width: 30px;
							position: absolute;
							display: block;
							content: '';
							background-color: #2e75bc;
							
						}
						
						#mobile-nav-toggle span:before { top: -6px;}
						#mobile-nav-toggle span:after { bottom: -6px;}
						
						#mobile-nav-toggle span,
						#mobile-nav-toggle span:before,
						#mobile-nav-toggle span:after {
							-webkit-transition: all 300ms ease-in-out;
							-moz-transition: all 300ms ease-in-out;
							-o-transition: all 300ms ease-in-out;
							transition: all 300ms ease-in-out;
						}
						
								#mobile-nav-toggle.active span { background-color: transparent;}
								
								#mobile-nav-toggle.active span:before,
								#mobile-nav-toggle.active span:after { top: 0; }
								
								#mobile-nav-toggle.active span:before {
									-webkit-transform: rotate(45deg);
									-moz-transform: rotate(45deg);
									-o-transform: rotate(45deg);
									transform: rotate(45deg);
								}
								
								#mobile-nav-toggle.active span:after {
									-webkit-transform: rotate(-45deg);
									-moz-transform: rotate(-45deg);
									-o-transform: rotate(-45deg);
									transform: rotate(-45deg);
								}

				/* Menu desplegable para la version mobile */
				#header-mobile-menu {
					height: 230px;
				}
						
						#header-mobile-menu nav {
							height: 210px;
							padding-top: 20px;
							text-align: left;
						}
						
								#header-mobile-menu nav ul { list-style: none;}
				
										#header-mobile-menu nav ul li {
											display: list-item;
											padding: 0 0 20px 0;
											font-size: 14px;
											
										}
				
												#header-mobile-menu nav ul li a { color: #2e75bc; }
												
												/* Link activo */ 
												#header-mobile-menu nav ul li a.active {
												color: black;
												/*padding-bottom: 6px;
												border-bottom: 4px solid #0180c1;*/
												}

	
	
	
	
	
	
	
	
	
/* -----------------------------------------------------------------------------------------
/* Breadcrumbs
----------------------------------------------------------------------------------------- */

#wrapper-breadcrumbs {
	background: #fff;
	border-top: 1px solid #f7f7f7;
	border-bottom: 1px solid #dedddd;
	overflow: auto;
	box-shadow: rgba(0, 0, 0, 0.14902) 0px 2px 5px -2px;
	
	width: 100%;
	position: -webkit-sticky;
		  position: -moz-sticky;
		  position: -ms-sticky;
		  position: -o-sticky;
		  position: sticky;
	left: 0;
	top: 88px;
	z-index: 999;
}

		/* Movemos hacia arriba el contenedor de los breadcrumbs al hacer scroll */
		/* Aplicamos la clase small al contenedor */
		#wrapper-breadcrumbs.breadcrumbs-desktop-small {top: 0px;}
				
				/* Agregamos el logo de EK */
				#wrapper-breadcrumbs.breadcrumbs-desktop-small ul:before {
						content: url(/_assets/logos/logo-ekroboter-breadcrumbs.png);
						vertical-align: middle;
						padding: 4px 4px 4px 0;
						display: inline-block;
					}
										
						/* Mobile - Pero no en la vista mobile */
						@media only screen and (max-width: 767px) {
							#wrapper-breadcrumbs.breadcrumbs-desktop-small ul:before {content: none !important;}
							#wrapper-breadcrumbs.breadcrumbs-desktop-small ul li a i.fa-home:before {content: none !important;}
							
							/* Al hacer scroll ocultamos todos los items de la lista de breadcrumbs salvo el último */
							#wrapper-breadcrumbs.breadcrumbs-desktop-small ul li:not(:last-child) {display: none;}
						}

		
		/* Lista de links */
		#breadcrumbs ul {
			padding: 10px 0 10px 0px;
			white-space: nowrap; 
			overflow: hidden;
			text-overflow: ellipsis;	
		}
		
			#breadcrumbs ul li {
				display: inline;
				font-size: 12px;
				}
					
					/* Agreagamos una flechita luego de cada item */
					#breadcrumbs ul li:after {
						content: "\f105";
						font-family: 'Font Awesome 5 Free';
						font-weight: 900;
						padding: 0 2px 0 6px;
						display: inline-block;
					}
					
					/* El ultimo item es en negrita */
					#breadcrumbs ul li:last-child { font-weight: 900; }
					
					/* y no lleva flechita al final  */
					#breadcrumbs ul li:last-child:after { content: none; }
					
					#breadcrumbs ul li a { color: #333 }
					#breadcrumbs ul li a:hover { color: #1f82e6; }
							
			/* Agrandamos el texto y quitamos el icono de Home y la flechia del primer item al hacer scroll */
			#wrapper-breadcrumbs.breadcrumbs-desktop-small ul li {font-size: 16px;}
			#wrapper-breadcrumbs.breadcrumbs-desktop-small ul li a i.fa-home:before {content: none !important;}
			#wrapper-breadcrumbs.breadcrumbs-desktop-small ul li:first-child:after {content: none !important;}
			
				
							
		/* Mobile - Ajustes visuales */					
		@media only screen and (max-width: 767px) {
			#wrapper-breadcrumbs { top: 60px !important; }	
			#breadcrumbs ul { list-style-type: none;}
			#breadcrumbs ul li { display: list-item; font-size: 14px !important; padding: 5px 0 5px 0; }
			#breadcrumbs ul li:after { content: "\f107";}
			#breadcrumbs ul li:first-child { display: none;}
			#breadcrumbs ul li:last-child { padding-bottom: 0;}
		}










/* -----------------------------------------------------------------------------------------
   Contenido del Home
----------------------------------------------------------------------------------------- */

/* Colocamos la sombra en el header del Home porque no hay hero ni breadcrumbs debajo */
body#home #header-wrapper {
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px -2px;
	z-index: 1000;
}

/* Similar al de las páginas internas, pero solo se usa en el home, para evitar que se aplique la clase 'small' */
#wrapper-content-intro-home {
	background-color: #fff; 
	border-top: 1px solid #f7f7f7;
	border-bottom: 1px solid #dedddd;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px -2px;
	width: 100%;
}

		#content-intro-home {
			padding: 50px 0 30px 0;
			overflow: auto;
				
		}
				
				/* Cada item de servicios principales*/
				.content-intro-home-item {
					margin: 0;
				}
				
						.content-intro-home-item i {
							float: left;
							font-size: 30px;
							color: #dfdfdf;
							margin: 0 10px 60px 0;
							padding: 20px 0 0 0;
							
						}
								/* Mobile */
								@media only screen and (max-width: 767px) {
									.content-intro-home-item i {display: none}
								}
				
				/* Títulos para los cuatro servicios principales */
				#content-intro-home h1 {
					font-size: 26px;
					font-weight: 600;
					letter-spacing: -0.8px;
					color: #333;
					margin: 20px 0 5px 0;
				}
				
						/* Cambiamos el color de los títulos */
						#content-intro-home a h1 { color: #333;}						
						#content-intro-home a:hover h1 {
							color: #007dc3;
							}
						
						/* Y de los íconos, con una pequeña animación */
						#content-intro-home a:hover i {
							color: #007dc3;
							-webkit-transform: scale(1.1);
							transform: scale(1.1);
							-webkit-transition: 0.2s ease-in-out;
							transition: 0.2s ease-in-out;
							}
				
						
						/* Corregimos los espacios para mobile y centramos los cuatro párrafo principales en el home */
						@media only screen and (max-width: 767px) {
							#content-intro-home {text-align: center;}
							#content-intro-home h1 {margin-top: 30px;}
						}
						
				#content-intro-home p {
					font-size: 14px;
					color: #333;
					line-height: 20px;
				}
				
				
/* Logos Representadas 
----------------------------------------------------------------------------------------- */

#home-representaciones {margin: 20px 0 40px 0;}

		/* Mobile */
		@media only screen and (max-width: 767px) {
			#home-representaciones {margin-top: 45px;}
		}
		
		#home-representaciones ul { text-align: center; }
			
			#home-representaciones ul li {
				display: inline-block;
				width: 160px;
				height: 30px;
				padding: 0px 20px 10px 0px;
				
				line-height: 50px;
			}
			
			/* Para mobile los mostramos en dos columnas */
			@media only screen and (max-width: 767px) {
				#home-representaciones ul li {width: 100px;}
			}	
			
			#home-representaciones ul li img {
				height: 30px;
				width: auto;
				vertical-align: middle;
				webkit-filter: grayscale(100%);
				filter: gray;
				filter: grayscale(100%);
			}
			
					#home-representaciones ul li img:hover {
						-webkit-filter: none;
						filter: none;
					}


/* Wrapper para el slideshow en el Home
----------------------------------------------------------------------------------------------------  */
#wrapper-hero-home {
	overflow: hidden;
	height: 500px;
	width: 100%;
	position: relative;
	background-image: radial-gradient(50% 100%, rgba(0,125,195,0.61) 0%, #0071B3 100%);
	}

			/* Tablet - Ajustamos el alto  */
			@media only screen and (min-width: 768px) and (max-width: 959px) {
				#wrapper-hero-home {height: auto;}
			}
		
			/* Mobile - Ajustamos el alto */
			@media only screen and (max-width: 767px) {
				#wrapper-hero-home {height: auto;}
			}


/* Slideshow en el Home. Especificar el alto para todos los contenedores para mostrar el Control Nav
------------------------------------------------------------------------------------------------------  */
#home-slideshow, #slider-home, #slider-home .flex-viewport {
	height: 500px;
	position: relative;
	z-index: 3;
}


		/* Tablet -  Modificamos la altura */
		@media only screen and (min-width: 768px) and (max-width: 959px) {
			#home-slideshow, #slider-home, #slider-home .flex-viewport {height: 320px;}
		}
	
		/* Mobile - Modificamos la altura */
		@media only screen and (max-width: 767px) {
			#home-slideshow, #slider-home, #slider-home .flex-viewport {height: 580px;}
		}

		/* Override de Flexslider para que se vea el Control Nav en el Home */
		#slider-home .flex-control-nav {		
			position: relative !important;
			z-index: 3;
			bottom: 0 !important;
			/* Lo movemos hacia arriba para que quede dentro del wrapper principal */
			margin-top: -30px;
		}
		
				/* Cambiamos el color de los bullets del Control Nav */
				#slider-home .flex-control-paging li a.flex-active {
					background-color: #fff;
				}

			
/* Contenedores para el texto destacado en los slides del Home
----------------------------------------------------------------------------------------------------  */
.hero-overlay-text-home {
	background-color: rgba(255,  255,  255, 1.0);
	background-image: url(/_assets/images/backgrounds/header-overlay-backg.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	padding: 40px;
	margin: 60px auto;
	border-radius: 6px;
	position: relative;
	width: 860px;
	top: 55px;
	z-index: 3;
}

		/* Títulos. H1 y H2 son identicos para optmizar SEO */
		.hero-overlay-text-home h1, .hero-overlay-text-home h2  {font-size: 28px; font-weight: 700; letter-spacing: -0.8px; margin-bottom: 10px; max-width: 80%}
		
		/* Texto*/
		.hero-overlay-text-home p {font-size: 20px; line-height: 24px; font-weight: 300; max-width: 75%}
		.hero-overlay-text-home p em {font-weight: 700;}
					
				/* Tablet -  */
				@media only screen and (min-width: 768px) and (max-width: 959px) {
					/* Ajustamos el ancho y el margen en el slide del Home */
					.hero-overlay-text-home {width: 660px; margin: auto; top: 20px;}
				}
				
				/* Mobile -  */
				@media only screen and (max-width: 767px) {
					/* Ajustamos el ancho y el margen en los heroes y el Home */
					.hero-overlay-text-home {width: 80%; min-height: 460px; padding: 20px; margin: auto auto; top: 20px; text-align: center;}
					
					.hero-overlay-text-home h1, .hero-overlay-text-home h2 {font-size: 22px; line-height: 24px; max-width: 100%}
					.hero-overlay-text-home p {font-size: 18px; line-height: 22px; max-width: 100%}
				}

		/* Contenedor para la imágen destacada del slide en el home. Valores generales para todos */		
		.hero-overlay-img-home {
			position: absolute;
			z-index: 4;
			display: block;
		}
		
				/* Posición de la imágen del slide Integración de Soluciones */
				.img-home-integracion {width: 400px; top: -120px; left: 560px;}
				
				/* Posición de la imágen del slide Pelltizado */
				.img-home-palletizado {width: 540px; top: 90px; left: 500px;}
				
				/* Posición de la imágen del slide AGVs */
				.img-home-agvs {width: 580px; top: 100px; left: 450px;}
				
				/* Posición de la imágen del slide Zenjet */
				.img-home-zenjet {width: 320px; top: -10px; left: 720px;}
				
				/* Posición de la imágen del slide Corte Láser y Plegado CNC */
				.img-home-corte-laser {width: 330px; top: 10px; left: 690px;}

				/* La imágen destacada de cada slide ocupa el 100% del ancho de su contenedor */
				.hero-overlay-img-home img {width: 100%; image-rendering: crisp-edges;}
				
						/* Tablet - Posicionamos y achicamos un poco las imágenes  */
						@media only screen and (min-width: 768px) and (max-width: 959px) {
							.hero-overlay-img-home {position: absolute; z-index: 4; display: block;}
							
							/* Posición de la imágen del slide Integración de Soluciones */
							.img-home-integracion {width: 240px; top: 0px; left: 480px;}
							
							/* Posición de la imágen del slide Palletizado */
							.img-home-palletizado {width: 400px; top: 100px; left: 460px;}
							
							/* Posición de la imágen del slide AGVs */
							.img-home-agvs {width: 380px; top: 100px; left: 380px;}
							
							/* Posición de la imágen del slide Zenjet */
							.img-home-zenjet {width: 250px; top: 30px; left: 515px;}
							
							/* Posición de la imágen del slide Corte Láser y Plegado CNC */
							.img-home-corte-laser {width: 240px; top: 20px; left: 530px;}
						}	
						
						/* Mobile - La imágen se muestra arriba del texto */
						@media only screen and (max-width: 767px) {
							.hero-overlay-img-home { 
								position: relative;
								z-index: 4;
								display: block;
								width: 90%;
								top: 0;
								left: 0;
								margin: 0 auto 20px auto;
							}
									
									/* Esto es para que las imágenes muy altas no ocupen todo el espacio disponible */
									.hero-overlay-img-home img {							
										  width: auto;
										  max-width: 280px;
										  height: auto;
										  max-height: 220px;
										
									}
						}		


	
	
	
	
	
	
	
	
/* -----------------------------------------------------------------------------------------
   Contenido de paginas internas
----------------------------------------------------------------------------------------- */

/* Estilos para el encabezado de las secciones principales */
#wrapper-content-intro {
	background-color: #fff; 
	/*border-top: 1px solid #f7f7f7;*/
	/*border-bottom: 1px solid #dedddd;*/
	margin-bottom: 40px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px -2px;

	background-image: url(/_assets/images/backgrounds/header-overlay-backg.svg);
	background-repeat: no-repeat;
	background-size: cover;

	width: 100%;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;
	left: 0;
	top: 88px;
	z-index: 999;

}
		/* Sólo para los Landings, quitamos el margen inferior del encabezado para poner un Hero */
		body#landing #wrapper-content-intro {
			margin-bottom: 0px;
		}

				/* Movemos hacia arriba el contenedor de la intro al hacer scroll para ocupar el espacio del encabezado principal */
				/* Aplicamos la clase small al contenedor */
				#wrapper-content-intro.wrapper-content-small {
					top: 0px;
					-webkit-transition: all 100ms ease-in-out;
					-moz-transition: all 100ms ease-in-out;
					-o-transition: all 100ms ease-in-out;
					transition: all 100ms ease-in-out;
					background-image: none;
				}
						
						/* Al hacer scroll y aplicar la clase "small", achicamos un poco el tamaño de los títulos */
						#wrapper-content-intro.wrapper-content-small h1 { font-size: 20px;}
				
								/* Mobile - En esta vista la intro tiene que quedar por debajo del encabezado que es fijo */
								@media only screen and (max-width: 767px) {
									#wrapper-content-intro.wrapper-content-small {top: 60px; border-top: 1px solid #f7f7f7}
									/* El h1 en mobile tiene un margin-top, pero al hacer scroll tenemos que quitarlo para que no quede pegado arriba. También lo achicamos */
									#wrapper-content-intro.wrapper-content-small h1 { margin-top: 0; font-size: 15px !important;}
								}
				
						
						/* Agregamos el logo de EK antes de los títulos */
						#wrapper-content-intro.wrapper-content-small h1:before {
							content: url(/_assets/logos/logo-ekroboter-breadcrumbs.png);
							vertical-align: middle;
							padding: 4px 4px 4px 0;
							display: inline-block;
						}
														
								/* Mobile - Pero no en la vista mobile */
								@media only screen and (max-width: 767px) {
									#wrapper-content-intro.wrapper-content-small h1:before {content: none !important;}
								}
						
								/* Tampoco queremos el logo de EK en los encabezados del home ("body id='home'") */
								body#home #wrapper-content-intro.wrapper-content-small h1:before {
									content: none !important;
									padding: 0px !important;
								}
				
				/* Corregimos la posición para mobile */
				@media only screen and (max-width: 767px) {
					#wrapper-content-intro { top: 20px; }
				}

		#content-intro {
			padding: 30px 0 30px 0;
			overflow: auto;
				
		}
			
				/* Achica el encabezado al hacer scroll */			
				.content-intro-small { padding: 8px 0 0 8px !important; }
	
				#content-intro h1 {
					font-size: 26px;
					font-weight: 600;
					letter-spacing: -0.8px;
					color: #333;
					margin: 0 0 10px 0;
				}
				
						
						/* Corregimos los espacios para mobile y centramos los cuatro párrafo principales en el home */
						@media only screen and (max-width: 767px) {
							#content-intro {padding: 0 0 20px 0;}
							.content-intro-small {padding: 0;}
							#content-intro h1 {margin-top: 20px;}
		
						}
						
				#content-intro p {
					font-size: 16px;
					color: #333;
					line-height: 20px;
				}
		


		
		
		/* CTA de Contacto en el encabezado achicado al hacer scroll
		----------------------------------------------------------------------------------------- */
		#content-intro-contacto {
			display: none;
			margin-top: 4px;
			text-align: right;
		}
		
		/* En los breadcrumbs tenemos que incrementar el margen superior */
		#wrapper-breadcrumbs #content-intro-contacto {
			margin-top: 16px;
		}
		
				#content-intro-contacto a {
					font-size: 11px !important;
					color: #0180c1;
					font-weight: 700;
					text-transform: uppercase;
					padding: 8px 16px 8px 16px;
					border: 2px solid #0180c1;
					border-radius: 8px;
					background: #fff;			
				}
				
				#content-intro-contacto i {
					padding: 0 0 0 6px;
				}
				
		/* No lo mostramos en mobile por falta de espacio */
		@media only screen and (max-width: 767px) {
			#content-intro-contacto { display: none !important;}
		}


/* Contenedor para todo el contenido de páginas internas. */
.content {
	margin-top: 40px;
	margin-bottom: 100px;
}

/* Variante del mismo contenedor pero con menor márgen inferior. */
.content-b {
	margin-top: 40px;
	margin-bottom: 60px;
}

		
		.content-column-1 p { margin-bottom: 15px; }
		
		/* Párrafos destacados */
		.content-column-1 p.highlight {
			background-color: #fafafa;
			border-top: 1px dotted #e2e2e2;
			border-bottom: 1px dotted #e2e2e2;
			margin: 30px 0 30px 0;
			padding: 20px 10px 20px 10px;
		}
		
		/* Avisos para los formularios. Similares a los figcaptions. */
		.content-column-1 p.notice {
				margin: 10px 0 0 0;
				font-size: 12px;
				line-height: 14px;
				color: #727272;
		}
					/* Agregamos un icono antes */
					.content-column-1 p.notice:before {
					content: "\f05a";
					font-family: 'Font Awesome 5 Free';
					font-size: 13px;
					font-weight: 900;
					color: #cdcdcd;
					padding-right: 6px;
				}
				
						/* Lo centramos en mobile */
						@media only screen and (max-width: 767px) {
							.content-column-1 p.notice { text-align: center;}
						}
		

		
		.content-column-1 h1 {
			font-size: 24px;
			color: #007dc3;
			margin-bottom: 10px;
		}

		.content-column-1 h2 {
			font-size: 20px;
			color: #007dc3;
			margin: 0 0 15px 0;
			padding-bottom: 5px;
			border-bottom: 1px solid #e9e9e9;
		}
		
		.content-column-1 h3 {
			font-size: 20px;
			color: #007dc3;
			margin-bottom: 10px;
		}		
		
		.content-column-1 h4 {
			font-size: 18px;
			line-height: 22px;
			color: #333;
			margin: 30px 0 15px 0;
			padding-bottom: 5px;
			border-bottom: 1px solid #e9e9e9;
		}
		
		.content-column-1 h5 {
			color: #007dc3;
		}

		.content-column-1 h6 {
			font-size: 15px;
			line-height: 18px;
			font-weight: 900;
			/*margin: 30px 0 5px 0;*/
			padding-bottom: 5px;
			border-bottom: 1px solid #e9e9e9;
		}
				
				/* Mobile - Eliminamos el margen superior del 1er. titulo */
				.content-column-1 h4:first-child { margin-top: 0px;}
				
				@media only screen and (max-width: 767px) {
				.content-column-1 h4:first-child { margin-top: 20px;}
				}

				/* Si el H4 esta dentro de un link, lo coloreamos en el hover */
				.content-column-1 a:hover h4 {
					color: #1f82e6;
				}
				
		/* Listas de preguntas y definiciones */
		.content-column-1 dt {
			font-size: 16px;
			font-weight: 900;
			padding: 0 0 5px 0;
		}
		
				.content-column-1 dd { padding: 0 0 40px 0; }
				
						
						/* Mobile - Corregimos los espacios para mobile */
						@media only screen and (max-width: 767px) {
							.content-column-1 h4 { margin-top: 40px;}
						}
				
		/* El primera parrafo luego del H3 tiene un margen inferior y tamaño mayor.
	  	   Tambien cuando luego del H3 hay una imagen, como en el caso del logo de Fanuc Authorized Integrator */
		.content-column-1 h1 + p {
			font-size: 18px;
			color: #6e6e6e;
			line-height: 22px;
			margin: 10px 0 40px 0;
		}
		
				/* Mobile */
				@media only screen and (max-width: 767px) {
					.content-column-1 h1 + p  {line-height: 24px;}
				}
		
		/* Logos en el contenido, como el logo ISO y FANUC
		----------------------------------------------------------------------------------------- */	
		img.logo { width: 100%;}
		
				/* Mobile */
				@media only screen and (max-width: 767px) {
					img.logo { width: 50%; margin: 0 0 40px 25%;}
				}
				
		
		/* Listas
		----------------------------------------------------------------------------------------- */
		.content-column-1 ul, .content-column-1 ol { margin-left: 18px; }
		
				.content-column-1 ul li, .content-column-1 ol li { margin-bottom: 4px; } { margin-bottom: 4px; }
				
		
		/* Iframe que contiene al mapa de Google Maps en Contactenos
		----------------------------------------------------------------------------------------- */
		iframe#mapa { border: 1px solid #ddd; }
		
		
		/* Links a PDFs (leyenda PDF despues)
		----------------------------------------------------------------------------------------- */
		a[href$="pdf"]:after {
			content: "(PDF)";
			color: #999;
			margin: 0 0 0 5px;
			font-size: 13px;
			vertical-align: middle
		}
		
		/* Links a Prsentaciones (leyenda PPS despues)
		----------------------------------------------------------------------------------------- */
		a[href$="pps"]:after {
			content: "(PPS)";
			color: #999;
			margin: 0 0 0 5px;
			font-size: 13px;
			vertical-align: middle
		}

				
		/* Lista de Catálogos
		----------------------------------------------------------------------------------------- */
		ul.lista-catalogos {
			list-style-type: none;
			margin-left: 0px !important;
		}
						
				ul.lista-catalogos li:before {
					content: "\f1c1";
					font-family: 'Font Awesome 5 Free';
					font-size: 16px;
					font-weight: 900;
					color: #000;
					padding-right: 6px;
				}
		
						ul.lista-catalogos li:hover:before { color: red; }
						
						/* Mobile - Corregimos los márgenes de los links en las listas */
						@media only screen and (max-width: 767px) {
							ul.lista-catalogos li { margin: 15px 0 15px 0;}
						}
		
		
		/* Lista de Presentaciones
		----------------------------------------------------------------------------------------- */
		ul.lista-presentaciones {
			list-style-type: none;
			margin-left: 0px !important;
		}
						
				ul.lista-presentaciones li:before {
					content: "\f1c4";
					font-family: 'Font Awesome 5 Free';
					font-size: 16px;
					font-weight: 900;
					color: #000;
					padding-right: 6px;
				}
		
						ul.lista-presentaciones li:hover:before { color: red; }
						
						/* Mobile - Corregimos los márgenes de los links en las listas */
						@media only screen and (max-width: 767px) {
							ul.lista-presentaciones li { margin: 15px 0 15px 0;}
						}
		
		
		/* Lista de Videos
		----------------------------------------------------------------------------------------- */				
		ul.lista-videos {
			list-style-type: none;
			margin-left: 0px !important;
		}
		
				ul.lista-videos li:before {
					font-family: 'Font Awesome 5 Free';
					font-size: 16px;
					font-weight: 900;
					color: #000;
					content: "\f144";
					padding-right: 6px;
				}
		
						ul.lista-videos li:hover:before { color: red; }
						
						/* Mobile - Corregimos los márgenes de los links en las listas */
						@media only screen and (max-width: 767px) {
							ul.lista-videos li { margin: 15px 0 15px 0;}
						}
		
		
		/* Embed de videos de YouTube
		----------------------------------------------------------------------------------------- */	
		.youtube-embed {
			position: relative;
			padding-bottom: 56.25%;
			padding-top: 30px; height: 0; overflow: hidden;
		}
			
		.youtube-embed iframe,
		.youtube-embed object,
		.youtube-embed embed {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
																	
		
		/* Icono para links externos
		----------------------------------------------------------------------------------------- */	
		a[target="_blank"]:after {
			content: "\f35d";
			font-family: 'Font Awesome 5 Free';
			font-size: 14px;
			font-weight: 900;
			padding-left: 4px;
			display: inline-block;
		}
		
				/* No cuando el link especifica que no quiere un icono */
				a[data-link="no-blank-target"]:after {
						content: none;
						padding: 0;
				}		
				
		
		/* Botones CTA
		----------------------------------------------------------------------------------------- */				
		/* Contenedores globales para los botones. El DIV se ajusta al tamaño de su contenido */
		.btn-wrapper,
		.btn-hero-wrapper, 
		.btn-hero-slide-wrapper {
			width: -webkit-fit-content;
			width: -moz-fit-content;
			width: fit-content;
		}
				
				/* Mobile - En mobile agrandamos todos los botones agrandando el wrapper */
				@media only screen and (max-width: 767px) {
					
					/* Los botones ocupan todo el ancho */
					.btn-wrapper {width: 100%}
					.btn-wrapper-half {width: 48%; float: left;}
					.btn-hero-wrapper {width: 100%;}
					
					/* Los botones CTA del slider del home deben pegarse al fondo del contenedor */
					.btn-hero-slide-wrapper {position: absolute; bottom: 3%; left: 5%; width: 90%;}
				}
		
		
		/* Botones standard de contacto via mail, teléfono, submits, etc.
		----------------------------------------------------------------------------------------- */
		.btn-cta {
			padding: 12px 22px 12px 22px;
			display: block; 
			width: intrinsic;
			
			text-align: center;
			font-weight: 900;
			font-size: 14px;
			color: #fff;
			
			background-color: #007dc3;
			border-top: 1px solid #f7f7f7;
			border-left: 1px solid #f7f7f7;
			border-right: 1px solid #f7f7f7;
			border-bottom: 1px solid #dedddd;

			box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -2px;
			border-radius: 4px;
		}
				
				/* No deben cambiar de color en el hover */
				.btn-cta:hover {color: #fff;}
		
		/* CTA color blanco */		
		.btn-cta-b {
			padding: 12px 22px 12px 22px;
			display: block; 
			width: intrinsic;
			
			text-align: center;
			font-weight: 900;
			font-size: 14px;
			color: #007dc3;
			
			background-color: #fff;
			border-top: 1px solid #eeeeee;
			border-left: 1px solid #eeeeee;
			border-right: 1px solid #eeeeee;
			border-bottom: 1px solid #dedddd;

			box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -2px;
			border-radius: 4px;
		}
				
				/* No deben cambiar de color en el hover */
				.btn-cta-b:hover {color: #007dc3;}
						
		
		/* Botones CTA para los heroes y slides del home
		----------------------------------------------------------------------------------------- */
		.btn-cta-hero {
			padding: 15px 30px 15px 30px;
			margin-top: 20px;
			display: block; 
			width: auto;
			
			text-align: center;
			font-weight: 900;
			font-size: 16px;
			color: #fff;
			
			background-color: #007dc3;

			box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -2px;
			border-radius: 4px;
		}
				
				/* No deben cambiar de color en el hover */
				.btn-cta-hero:hover {color: #fff; }

		
		/* Botón CTA para contacto via WhatsApp
		----------------------------------------------------------------------------------------- */
		.btn-cta-wpp {
			padding: 10px 0px 10px 0px;
		    display: block; 
			width: 100%;
			
			background-color: #25d366;
			text-align: center;
			font-weight: 900;
			font-size: 14px;
			color: #fff;
			
			/* Usamos border-box para que el borde sea interno y no agrande el botón */
			box-sizing: border-box;
			border-radius: 4px;
		}
				
				/* No deben cambiar de color en el hover */
				a.btn-cta-wpp:hover {color: #fff;}
				
		
		/* Botón CTA para contacto via Facebook Messenger
		----------------------------------------------------------------------------------------- */
		.btn-cta-fbm {
			padding: 10px 0px 10px 0px;
		    display: block; 
			width: 100%;

			background-color: #0084ff;
			text-align: center;
			font-weight: 900;
			font-size: 14px;
			color: #fff;
			
			/* Usamos border-box para que el borde sea interno y no agrande el botón */
			box-sizing: border-box;
			border-radius: 4px;
		}
				
				/* No deben cambiar de color en el hover */
				a.btn-cta-fbm:hover {color: #fff;}

				
		/* Botón CTA para link a YouTube
		----------------------------------------------------------------------------------------- */
		.btn-cta-youtube {
			padding: 12px 22px 12px 22px;
			display: block; 
			width: intrinsic;
			
			text-align: center;
			font-weight: 900;
			font-size: 14px;
			color: #282828;
			
			background-color: #fff;
			border-top: 1px solid #eeeeee;
			border-left: 1px solid #eeeeee;
			border-right: 1px solid #eeeeee;
			border-bottom: 1px solid #dedddd;

			box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -2px;
			border-radius: 4px;
		}
				
				/* El icono siempre es rojo */
				.btn-cta-youtube i {color:  #ff0000; padding: 0 0 0 8px;}
				
				/* No deben cambiar de color en el hover */
				a.btn-cta-youtube:hover {color:  #282828;}


		/* Botón CTA para Twitter
		----------------------------------------------------------------------------------------- */
		.btn-cta-twitter {
			padding: 12px 22px 12px 22px;
			display: block; 
			width: intrinsic;
			
			text-align: center;
			font-weight: 900;
			font-size: 14px;
			color: #282828;
			
			background-color: #fff;
			border-top: 1px solid #eeeeee;
			border-left: 1px solid #eeeeee;
			border-right: 1px solid #eeeeee;
			border-bottom: 1px solid #dedddd;

			box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -2px;
			border-radius: 4px;
		}
				
				/* El icono siempre es rojo */
				.btn-cta-twitter i {color:  #00aced; padding: 0 0 0 8px;}
				
				/* No deben cambiar de color en el hover */
				a.btn-cta-twitter:hover {color:  #00aced;}

		
		/* Ajustes para los íconos en los CTAs
		----------------------------------------------------------------------------------------- */
		.btn-cta i, .btn-cta-b i, .btn-cta-wpp i, .btn-cta-fbm i, .btn-cta-youtube i, .btn-cta-hero i, button[type="submit"] i { 
			padding: 0 0 0 10px;
		}
			
				/* Mobile - Ajustes para los CTAs */
				@media only screen and (max-width: 767px) {
					
					/* Incrementamos el padding */
					.btn-cta, .btn-cta-b, .btn-cta-hero, .btn-cta-wpp, .btn-cta-fbm, .btn-cta-youtube, button[type="submit"] {width: 100%; padding: 12px 0px 12px 0px !important;}
					
					/* Agrandamos lo íconos. Por algún motivo en mobile necesitamos alinearlos verticalmente */
					.btn-cta i, .btn-cta-b i, .btn-cta-hero i {font-size: 18px !important; vertical-align: middle}
					.btn-cta-wpp i {font-size: 24px !important; vertical-align: middle}
					.btn-cta-fbm i {font-size: 24px !important; vertical-align: middle}
					.btn-cta-youtube i {font-size: 24px !important; vertical-align: middle}
				}
		
		
		/* Iconos de redes sociales
		----------------------------------------------------------------------------------------- */
		#social-share i {
			font-size: 50px;
			color: #cecece;
			padding: 0 4px 0 0;
		}
		
		#social-share i:hover {
			color: #007dc3;
			-webkit-transition: 0.2s ease-in-out;
			transition: 0.2s ease-in-out;
		}
				
				/* Agrandamos los iconos en la version mobile */
				@media only screen and (max-width: 767px) {
				#social-share {margin: auto auto;}
				#social-share i {font-size: 60px; padding: 0 8px 0 0;}	
				}
														
		
		/* Grilla de Categorias de productos 
		----------------------------------------------------------------------------------------- */				
		.prod-grilla-secciones { margin-bottom: 20px;}
		
				.prod-grilla-secciones h4 {
					margin: 10px 0 10px 0 !important;
					max-width: 95%;
					font-size: 16px !important;
					line-height: 18px !important;
					text-transform: uppercase
				}
				
				/* Que no se colpasen los parrafos, especialmente en mobiles */
				.prod-grilla-secciones p { max-width: 300px; overflow: hidden; }

		
				/* Sombra en el hover de los thumbnails */
				.prod-grilla-secciones a:hover img {
					-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
					-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
					box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
					
					-webkit-transform: scale(1.1);
					transform: scale(1.1);
					-webkit-transition: 0.2s ease-in-out;
					transition: 0.2s ease-in-out;

				}
				
				.product-hero-thumb-small {
					float: left;
					margin: 0 15px 40px 0;	
					
					border-radius: 6px;
					-moz-border-radius: 6px;
					image-rendering: crisp-edges;
				}
						
						/* Tablet - Achicamos las celdas */
						@media only screen and (min-width: 768px) and (max-width: 959px) {
							.prod-grilla-secciones p { width: 60%; overflow: hidden }
						}
						
						/* Mobile - Achicamos los thumbnails para dejar más lugar para el texto */
						@media only screen and (max-width: 767px) {
							.prod-grilla-secciones p { max-width: 100%; overflow: hidden }
							.product-hero-thumb-small { float: none; margin: 20px auto 10px auto;}
						}
				
		
		/* Fotos de productos
		----------------------------------------------------------------------------------------- */			
		/* Slider: Esto es necesario para eliminar el espacio entre las fotos en los sliders internos, no en el home */		
		ul.slides > li img { margin-left: -18px; border-radius: 4px; image-rendering: crisp-edges;}
		
		/* Fotos Individuales: Hacemos que ocupen el 95% del contenedor en Desktop */
		.prod-caracteristicas img { width: 95%; border-radius: 4px; image-rendering: crisp-edges;}
		
		/* Fotos Hero: Hacemos que ocupen el 95% del contenedor en Desktop */
		.prod-caracteristicas-hero img { width: 100%; border-radius: 4px; image-rendering: crisp-edges;}
		
		/* Agregamos captions */
		figcaption {
				margin: 10px 0 20px 0;
				font-size: 12px;
				line-height: 14px;
				color: #727272;
				display: block;
		}
					/* y un icono antes */
					figcaption:before {
					content: "\f05a";
					font-family: 'Font Awesome 5 Free';
					font-size: 13px;
					font-weight: 900;
					color: #cdcdcd;
					padding-right: 6px;
				}

		
				/* Mobile - Ocupan el 100% */
				@media only screen and (max-width: 767px) {.prod-caracteristicas img { width: 100%;}}
		
		
		/* Celdas Interactivas
		----------------------------------------------------------------------------------------- */
		#wrapper-celda {
			position: relative;
			display: block;
		}
		
				#celda { 
					width: 100%;
					height: 646px;
				}
					
				/* Tablet - Achicamos las celdas */
				/*@media only screen and (min-width: 768px) and (max-width: 959px) { #celda {height: 500px;}}*/
				@media only screen and (min-width: 768px) and (max-width: 959px) {  #wrapper-celda { display: none}}
				
				/* Mobile - Achicamos las celdas */
				/*@media only screen and (max-width: 767px) { #celda { height: 280px; margin-bottom: 40px}}*/
				@media only screen and (max-width: 767px) { #wrapper-celda { display: none}}
					
						/* Contenedor de Controles */
						#celda-controles {
							position: absolute;
							top: -10px;
							left: 0px;
							width: 160px;
							
							padding: 10px 15px 10px 15px;					
							background: #f5f5f5;
							border: 1px solid #d9d9d9;					
							border-radius: 6px;
						}
						
								/* Titulos y Texto */
								#celda-controles h5 {
									margin-top: 0px;
									color: #000;
								}
								
								#celda-controles p {
									margin-bottom: 4px;
								}
								
								/* Informacion Adicional */
								#celda-controles a {
									color: #333;
									
									display: block;
									text-align: center;
									font-size: 12px;
									font-weight: 700;
									padding: 6px;
									margin-top: 12px;
									
									background: #FEFEFE;
									background: -moz-linear-gradient(top, #FEFEFE 0%, #E0E0E0 100%); /* firefox */
									background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FEFEFE), color-stop(100%,#E0E0E0)); /* webkit */
									
									border: 1px solid #d5d5d5;
									border-bottom: 1px solid #9c9c9c;
									
									border-radius: 4px;
								}
								
										/* Inset al clickearlos */
										#celda-controles a:active {
											border: 1px solid #d5d5d5;
											border-bottom: 1px solid #d5d5d5;
											border-top: 1px solid #9c9c9c;
										}
		
				
						/* Items en el grafico
						-----------------------------------------------------------------------------------------  */				
						div.celda-item {
							position: absolute;
							background-color: #2e75bc;
							
							width: 30px;
							height: 30px;
							border-radius: 50%;
							border: 3px solid #fff;
							
							text-align: center;
							font-size: 14px;
							line-height: 30px;
							color: #fff;
							font-weight: bold;
						}
		
								div.celda-item:hover {
									background-color: #000;
								}		
				
						
						/* Tooltips
						-----------------------------------------------------------------------------------------  */
						[data-tooltip] {
							  position: relative;
							  z-index: 900;
							  cursor: pointer;
						}
						
						/* Escondemos el tooltip */
						[data-tooltip]:before,
						[data-tooltip]:after {
							  visibility: hidden;
							  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
							  opacity: 0;
							  pointer-events: none;
						}
						
						/* Lo posicionamos sobre el elementos */
						[data-tooltip]:before {
							  position: absolute;
							  bottom: 150%;
							  left: 50%;
							  margin-bottom: 5px;
							  margin-left: -120px;
							  padding: 7px;
							  width: 240px;
							  border-radius: 6px;
							  background-color: #000;
							  color: #fff;
							  content: attr(data-tooltip);
							  text-align: center;
							  font-size: 14px;
							  line-height: 1.2;
						}
						
						/* Agregamos un triangulo */
						[data-tooltip]:after {
							  position: absolute;
							  bottom: 150%;
							  left: 50%;
							  margin-left: -5px;
							  width: 0;
							  border-top: 5px solid #000;
							  border-right: 5px solid transparent;
							  border-left: 5px solid transparent;
							  content: " ";
							  font-size: 0;
							  line-height: 0;
						}
						
						/* Lo mostramos en el hover */
						[data-tooltip]:hover:before,
						[data-tooltip]:hover:after {
							  visibility: visible;
							  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
							  opacity: 1;
						}
						
				/* Tablet - Ocultamos los items para tablets */
				/*@media only screen and (min-width: 768px) and (max-width: 959px) {
					#celda-item-wrapper, #celda-controles {display: none;}
				}*/
				/* Mobile - y en mobile tambien */
				/*@media only screen and (max-width: 767px) {
					#celda-item-wrapper, #celda-controles {display: none;}
				}*/	
					

/* Wrapper para el Hero en páginas tipo Landing
----------------------------------------------------------------------------------------------------  */
#wrapper-hero {
	overflow: hidden;
	height: 420px;
	width: 100%;
	position: relative;	
	/* Display: Flex permite centrar verticalmente el conenido */
	display: flex;
	background-image: radial-gradient(50% 100%, rgba(0,125,195,0.61) 0%, #0071B3 100%);
	}

			/* Tablet - Ajustamos el alto  */
			@media only screen and (min-width: 768px) and (max-width: 959px) {
				#wrapper-hero {height: auto; padding-bottom: 40px;}
			}
		
			/* Mobile - Ajustamos el alto */
			@media only screen and (max-width: 767px) {
				#wrapper-hero {height: auto; padding-bottom: 40px;}
			}
			
				
/* Overlay con gradiente azul para colorizar videos e imágenes de fondo en los Heroes
----------------------------------------------------------------------------------------------------  */
.hero-overlay-backg {
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	
	opacity: 0.80;
	background-image: url(/_assets/images/backgrounds/hero-overlay-backg.svg), radial-gradient(50% 100%, rgba(0,125,195,0.61) 0%, #0071B3 100%);
	background-position: center bottom;
	background-size: cover;
	z-index: 2;
}

		/* Contenedor de imágen o video de fondo */
		.hero-overlay-backg-img {
			overflow: hidden;
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
			
				/* Si es una imágen de fondo que ocupe todo el ancho y alto */
				.hero-overlay-backg-img img {
					min-width: 100%;
					min-height: 100%;
				}
				
				/* Si es un video de fondo, que ocupe todo el ancho */
				.hero-overlay-backg-img video {
					min-width: 100%;
					min-height: 100%;
				}

/* Contenedores para el texto destacado en los heroes
----------------------------------------------------------------------------------------------------  */
.hero-overlay-text  {
	background-color: #fff;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	padding: 40px;
	margin: auto auto;
	border-radius: 6px;
	position: relative;
	width: 860px;
	z-index: 3;
	height: auto;
}

		/* Títulos */
		.hero-overlay-text h2 {font-size: 22px; font-weight: 700; color: #007dc3; letter-spacing: -0.8px; margin-bottom: 10px;}
		
		/* Texto */
		.hero-overlay-text p {font-size: 18px; line-height: 24px; font-weight: 300;}
		.hero-overlay-text p em {font-weight: 700;}
		
		/* Texto cuando hay una imágen el hero. Achicamos el ancho del párrafo para que no se tape */
		.hero-overlay-text p.hero-img {font-size: 18px; line-height: 24px; font-weight: 300; max-width: 70%}
		
				/* Tablet -  */
				@media only screen and (min-width: 768px) and (max-width: 959px) {
					/*.hero-overlay-text {width: 90%; margin: 0; top: 40px; min-height: 140px;}*/
					.hero-overlay-text {width: 660px; margin: auto; top: 20px; min-height: auto;}
				}
				
				/* Mobile -  */
				@media only screen and (max-width: 767px) {
					/* Ajustamos el ancho y el margen en los Heroes */
					/*.hero-overlay-text {width: 90%; padding: 20px; margin: 0; top: 20px; min-height: 260px;}*/
					.hero-overlay-text {width: 80%; padding: 20px; margin: auto; top: 20px; min-height: auto; text-align: center;}
					
					.hero-overlay-text h1, .hero-overlay-text h2 {font-size: 22px; line-height: 24px;}
					.hero-overlay-text p {font-size: 18px; line-height: 22px;}
					.hero-overlay-text p.hero-img {font-size: 18px; line-height: 24px; max-width: 100%}
				}

		/* Contenedor para la imágen destacada en el hero. Valores generales para todos */		
		.hero-overlay-img {
			position: absolute;
			z-index: 4;
			display: block;
		}
				
				/* Posición de la imágen del hero Integración */
				.img-integracion {width: 330px; top: -95px; left: 610px; }
				
				/* Posición de la imágen del hero AGVs */
				.img-agvs {width: 360px; top: -30px; left: 640px;}
				
				/* Posición de la imágen del hero Zenjet */
				.img-zenjet {width: 320px; top: -30px; left: 660px;}
				
				/* Posición de la imágen del hero Corte Láser y Plegado CNC */
				.img-corte-laser {width: 320px; top: -20px; left: 660px; }
				
				/* La imágen destacada de cada hero */
				.hero-overlay-img img {width: 100%; image-rendering: crisp-edges;}
				
						/* Tablet - Posicionamos y achicamos un poco las imágenes  */
						@media only screen and (min-width: 768px) and (max-width: 959px) {
							.hero-overlay-img  {position: absolute; z-index: 4; display: block;}
							
							/* Posición de la imágen del hero Integración */
							.img-integracion {width: 200px; top: -15px; left: 540px; }
							
							/* Posición de la imágen del hero AGVs */
							.img-agvs {width: 240px; top: 0px; left: 510px;}
							
							/* Posición de la imágen del hero Zenjet */
							.img-zenjet {width: 230px; top: 30px; left: 540px;}
							
							/* Posición de la imágen del hero Corte Láser y Plegado CNC */
							.img-corte-laser {width: 240px; top: 0px; left: 540px;}
						}
						
						/* Mobile - La imágen se muestra arriba del texto */
						@media only screen and (max-width: 767px) {
							.hero-overlay-img { 
								position: relative;
								z-index: 4;
								display: block;
								/*height: 50%;*/
								width: 50%;
								top: 0;
								left: 0;
								margin: 0 auto 20px auto;
							}
						}		

	
/* Wrapper con fondo con imágen para Corte Láser CNC
-----------------------------------------------------------------------------------------  */
.wrapper-content-faq {
	overflow: auto;
	background-color: #000;
	
	background-image: url(/_assets/images/backgrounds/faq-corte-y-plegado-cnc-backg.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	color: #fff;	
	}
	
			/* Overrides para los tíulos. Color blanco y corrección de márgenes */
			.wrapper-content-faq  .content-column-1 h4 {
				color: #fff;
				margin: 0 0 15px 0;
				border-bottom: 1px solid rgba(255, 255, 255, 0.5);
			}

	
			/* Tablet -  */
			@media only screen and (min-width: 768px) and (max-width: 959px) {
				.wrapper-content-faq  { }
			}
			
			/* Mobile - Ocultamos la imágen de fondo  */
			@media only screen and (max-width: 767px) {
				.wrapper-content-faq  {background-image: none;}
			}

/* Wrapper con fondo con imágen para Energía Solar Industrial
-----------------------------------------------------------------------------------------  */
.wrapper-content-energia-solar {
	overflow: auto;
	padding: 100px 0 100px 0;
		
	background-image: url(/_assets/images/backgrounds/energia-solar-backg.png), -webkit-linear-gradient(top, #1e528e 0%, #2d91c2 100%);
	background-repeat: no-repeat;
	background-position: top left;
	}
	
			/* Overrides para los tíulos. Color blanco y corrección de márgenes */
			.wrapper-content-energia-solar .content-column-1 h2 {
				color: #fff;
				border-color: rgba(255, 255, 255, 0.2);
			}
			.wrapper-content-energia-solar .content-column-1 p {
				color: #fff;
			}

	
			/* Tablet -  */
			@media only screen and (min-width: 768px) and (max-width: 959px) {
				.wrapper-content-energia-solar {
					background-image: url(/_assets/images/backgrounds/nubes-backg.png), -webkit-linear-gradient(top, #1e528e 0%, #2d91c2 100%);
					background-position: top center;
					}
			}
			
			/* Mobile - Cambiamos la imágen de fondo  */
			@media only screen and (max-width: 767px) {
				.wrapper-content-energia-solar {
					background-image: url(/_assets/images/backgrounds/nubes-backg.png), -webkit-linear-gradient(top, #1e528e 0%, #2d91c2 100%);
					background-position: top center;
					}
			}


/* Wrapper con fondo color whitesmoke y padding superior e inferior
----------------------------------------------------------------------------------------- */		
.wrapper-content-small-whitesmoke {
	padding: 20px 0 50px 0;
	background-color: whitesmoke;
}


/* Wrapper con fondo color slate y padding superior e inferior
----------------------------------------------------------------------------------------- */		
.wrapper-content-small-slate {
	padding: 20px 0 50px 0;
	background-color: LightSlateGrey ;
	color: #fff !important;
}
		/* Los textos deben cambiarse blanco para que se vean*/
		.wrapper-content-small-slate p,
		.wrapper-content-small-slate h2,
		.wrapper-content-small-slate h3,
		.wrapper-content-small-slate h4 { color: #fff !important;}


/* Wrapper con fondo color whitesmoke + imágen y padding superior e inferior
----------------------------------------------------------------------------------------- */		
.wrapper-content-large-image-whitesmoke {
	padding: 100px 0 100px 0;
	background-color: whitesmoke;
	background-image: url(/_assets/images/backgrounds/overlay-backg.svg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
}

				/* Centramos todos los textos */
				@media only screen and (max-width: 767px) {
					.wrapper-content-large-image-whitesmoke h3 {text-align: center;}
					.wrapper-content-large-image-whitesmoke p {text-align: center;}
				}


/* Wrapper grande sin fondo y border inferior
----------------------------------------------------------------------------------------- */		
.wrapper-content-large-border-white {
	padding: 100px 0 100px 0;
	border-bottom: 1px solid #e9e9e9;
}

	
/* Tabla comparativa de productos
-----------------------------------------------------------------------------------------  */
table.comparativa-items {
	width: 100%;
	margin-bottom: 60px;
	
	-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);

	border-radius: 10px;	
}

		/* Mobile */
		@media only screen and (max-width: 767px) {
			table.comparativa-items {
				border: 1px solid #dbdbdb;
				
				-moz-box-shadow: none;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
		}	

		table.comparativa-items caption { margin-bottom: 20px; }
		
		table.comparativa-items tr:first-child td { border: none; }
		
		/* La ultima fila de la tabla no posee borde inferior */
		table.comparativa-items tr:last-child td { border-bottom: none; }
				
				table.comparativa-items tr:last-child td:last-child { border-right: none;}
		
		/* Encabezado */
		table.comparativa-items thead {
		
		}

				table.comparativa-items thead th {
					border: none;
					padding-top: 20px;
				}

		/* Items en la tabla */
		table.comparativa-items tr td {
			padding: 12px;
			vertical-align: middle;
			text-align: center;
			
			border-collapse: collapse;
			border: 1px solid #dbdbdb;
			border-left: none;
		}
		
		/* Mobile */
		@media only screen and (max-width: 767px) {
			table.comparativa-items tr td { padding: 8px;}
		}
				
				table.comparativa-items tr td img { width: 100% }

				#table.comparativa-items tr td.colspan { background-color: #f5f5f5; }
		
				/* Primer td de cada tr (Titulos) */
				table.comparativa-items tr td:first-child {
					text-align: left;
					font-weight: bold;
				}
				
				/* Mobile */
				@media only screen and (max-width: 767px) {
					table.comparativa-items tr td:first-child { max-width: 100px; font-size: 10px}
				}	

	
				table.comparativa-items tr td ul {
					margin-left: 20px;
					text-align: left;	
				}
		

/*  Paneles Info
----------------------------------------------------------------------------------------- */
#info-panels div {
	padding: 20px;
	background: #f5f5f5;
	border-right: 1px solid #D9D9D9;
	border-bottom: 1px solid #e4e4e4;
	border-left: 1px solid #d9d9d9;
	word-wrap: break-word;
}

#info-panels h3 {
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 10px;
}

		#info-panels h3 a { color: #333; }
				
				#info-panels h3 a:hover { color: #1f82e6; }
				
#info-panels h4 {
	font-size: 12px;
	line-height: 16px;
	margin-bottom: 2px;
}
	

#info-panels p {
	font-size: 12px;
	line-height: 15px;
	margin-bottom: 10px;
}


		/* Paneles
		----------------------------------------------------------------------------------------- */
		#info-panels div { border-top: 1px solid #fff; }
						
		
		/* Panel Final
		----------------------------------------------------------------------------------------- */
		#info-panels div:last-child {
			border-bottom-left-radius: 6px;
			border-bottom-right-radius: 6px;
		}
		
		
		/* Panel Inicial (lo ponemos ultimo para que el border-top tome prioridad)
		----------------------------------------------------------------------------------------- */
		#info-panels div:first-child {
			border-top: 1px solid #d9d9d9;
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
		}


		/* Para mobiles agrandamos el texto y los separamos del contenido cuando se colapsan */
		@media only screen and (max-width: 767px) {
			#info-panels { margin-top: 40px;}
			
			#info-panels div {
			padding: 0px;
			background: #fff;
			border-right: none;
			border-bottom: none;
			border-left: none;
			word-wrap: break-word;
			}
			
			#info-panels div:first-child {
			border-top: none;
			}
			
			#info-panels div:last-child {
			border-bottom: none;
			}
			
			/* El H3 del aside es igual al H4 del contenido general */
			#info-panels h3 {
				font-size: 18px;
				line-height: 22px;
				color: #333;
				margin: 30px 0 15px 0;
				padding-bottom: 5px;
				border-bottom: 1px solid #e9e9e9;
			}
			
			#info-panels h4 { font-size: 16px; line-height: 22px; }
			#info-panels p { font-size: 15px; line-height: 19px; }
		}	










/* -----------------------------------------------------------------------------------------
   Footer
----------------------------------------------------------------------------------------- */
#footer-wrapper {
	background: #2e75bc;
	background-image: url(/_assets/images/backgrounds/hero-overlay-backg.svg), radial-gradient(50% 100%, rgba(0,125,195,0.61) 0%, #0071B3 100%);
	background-position: center bottom;
	background-size: cover;
	
	width: 100%;
}

		#footer-intro {
			padding: 20px 0 10px 0;
			overflow: auto;
		}

		#footer-content {
			padding: 0px 0 40px 0;
			overflow: auto;
		}
			
				
				/* Secciones superiores
				----------------------------------------------------------------------------------------- */
				.footer-secciones h4 {
					margin: 10px 0 0 0;
					padding-bottom: 10px;						
					font-size: 16px;
					color: #fff;
					/*border-bottom: 1px solid #286bae;*/
				}
				
						/* Mobile - Dejamos más márgen superior */
						@media only screen and (max-width: 767px) {
							.footer-secciones h4 {margin: 30px 0 10px 0;}	
						}
				
				.footer-secciones p, .footer-secciones a {
					font-size: 14px;
					line-height: 16px;
					color: #fff;
				}
				
						/* Mobile - Agrandamos el texto en vista Mobile */
						@media only screen and (max-width: 767px) {
						.footer-secciones p, .footer-secciones a {font-size: 18px; line-height: 22px;}	
						}
						
				
				/* Iconos para los links
				----------------------------------------------------------------------------------------- */
				.footer-secciones i {
					font-size: 16px;
					color: #fff;
					padding: 6px 6px 10px 0;
					vertical-align: middle;
				}
				
				
				/* Iconos de redes sociales en el pie
				----------------------------------------------------------------------------------------- */
				#footer-content-social i { font-size: 32px;}
				#footer-content-social i:hover {
					color: #000;
					-webkit-transition: 0.2s ease-in-out;
					transition: 0.2s ease-in-out;
				}
						
						/* Agrandamos los iconos en la version mobile */
						@media only screen and (max-width: 767px) {
						#footer-content-social i {font-size: 44px}	
						}
				
		
		/* Copyright EK roboter
		----------------------------------------------------------------------------------------- */
		#footer-copy-wrapper {
			padding: 20px 0 20px 0;
			background: #000;
			overflow: auto;
		}
		
		
		#footer-copy p {
			font-size: 10px;
			color: #fff;
		}
		
		
		/* Logos
		----------------------------------------------------------------------------------------- */
		#footer-made-by img { width: 65%; margin-top: 10px}
		
		@media only screen and (max-width: 767px) {
			#footer-made-by img { width: 30%; margin-top: 20px}
			#footer-seal img { margin-top: 20px}
		}

	
	
	
	
	
	
	

		
/* -----------------------------------------------------------------------------------------
   Estilos globales, como floats, bordes y clears
----------------------------------------------------------------------------------------- */

.mrg-top-s { margin-top: 15px !important; }
.mrg-top-m { margin-top: 30px !important; }
.mrg-top-l { margin-top: 45px !important; }
.mrg-top-xl { margin-top: 120px !important; }

.mrg-bt-s { margin-bottom: 15px !important; }
.mrg-bt-m { margin-bottom: 30px !important; }
.mrg-bt-l { margin-bottom: 45px !important; }

.mrg-r-s { margin-right: 15px !important; }
.mrg-r-m { margin-right: 30px !important; }
.mrg-r-l { margin-right: 45px !important; }

.mrg-l-s { margin-left: 15px !important; }
.mrg-l-m { margin-left: 30px !important; }
.mrg-l-l { margin-left: 45px !important; }
.mrg-l-xl { margin-left: 120px !important; }

		/* Mobile */
		@media only screen and (max-width: 767px) {
			.mrg-l-s, .mrg-l-m, .mrg-l-l, .mrg-l-xl {margin-left: 0 !important;}
		}

.mrg-center { display: flex; justify-content: center; align-items: center;}

.no-border { border: none !important; }

.float-left { float: left; margin-right: 10px;}

/* Solo para mostrar elementos en vista Mobile */
.mobile-only {display: none}			
		
		/* Mobile */
		@media only screen and (max-width: 767px) {
			.mobile-only {display: block}
		}
		
/* Solo para mostrar elementos en vista Desktop y Tablet */
.desktop-only {display: block}			
				
		/* Mobile */
		@media only screen and (max-width: 767px) {
			.desktop-only {display: none}
		}