@charset "UTF-8";
/* CSS Document 


#img_responsiva{
	width:3000px;
	max-width: 100%;
	max-height: auto;
}
*/
.labor{
display: flex;
    margin-top: -120px;
    margin-left: 84%;
    color: black;
    text-decoration: underline;
}
body{
	background-color: #1A1A1A;
}
#negro{
	position:relative;
	top:-30%;
}


.parallax-container {
 width: 100%;
    display: block;
  height: 400px !important;
}

/* Asegura que el contenedor del logo abarque el 100% del ancho */
.logo-container {
    display: flex;
    justify-content: center; /* Centra el logo horizontalmente */
    align-items: center;     /* Opcional: centra el logo verticalmente si es necesario */
    width: 100%;             /* Asegura que el contenedor ocupe el 100% del ancho del elemento padre */
    padding: 20px 0;        /* Añade algo de espaciado vertical si es necesario */
    box-sizing: border-box; /* Incluye el padding en el ancho total del contenedor */
}
.row.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo {
    margin: 0 auto;
}

/* Ajusta el tamaño del logo según sea necesario */
#logo {
    width: 280px;            /* Ajusta el tamaño del logo */
    height: auto;            /* Mantiene la relación de aspecto del logo */
}

#bandera{
	width:48px;
	height:48px;
    display: flex;
    margin-top: 10px;
    margin-left: 72%;
}
#iso{
	width:128px;
	height:128px;
    display: flex;
    margin-top: -48px;
    margin-left: 10px;
}
#partner{
	width:128px;
	height:98px;
    display: flex;
    position:relative;
 top:100px;
    margin-left: 10px;
}


#imgbg{
	width:100%;
	height: auto;
}
#plecas{
	width:100%;
	height:auto;
}

h4{
	color:#FFF;
}



@font-face{
	font-family: Century Gothic;
	src:url(../fonts/Century%20Gothic);
}

@font-face{
	font-family: "Helveticaneue";
	src:url(../fonts/HelveticaNeue-UltraLight.otf);
	}
	
	@font-face{
	font-family: "HelveticaBold";
	src:url(../fonts/HelveticaNeueLTStd-XBlkCn.otf);
	}

#ofrece{
	font-family: "Helveticaneue";
	letter-spacing: 1px;
	font-size:40px;
	margin-top:-2%;
	
}

#somos{
	font-family: "HelveticaBold";
	letter-spacing: 5px;
}

.fondoNegro{
	background-image:url(../img/fondoNegro.png);
	height:325px;
	width:214px;
	margin-bottom:25%;
}

.todo{
	margin-top:25%;
}

 body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }
  
.llamanos{
	font-family: "Helveticaneue";
	letter-spacing: 1px;
	font-size:30px;
	color:#FFF;
}

  
.historia{
	font-family: "Helveticaneue";
	letter-spacing: 1px;
	font-size:40px;
	color:#FFF;
}

  
.historiatxt{
	font-family: "Helveticaneue";
	letter-spacing: 1px;
	font-size:20px;
	color:#FFF;
}

.numero{
	font-family: "HelveticaBold";
	letter-spacing: 1px;
	font-size:40px;
	color:#FFF;
	margin-left:5%;
}

footer{
	background-color:#000 !important;
}
/*.coso{
	margin-left:20%;
}*/


#orycoImg {
  
  -webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-o-filter: blur(0px);
	-webkit-opacity:1;
	-moz-opacity:1;
	-o-opacity:1;
		  
	
}

#orycoImg:hover {
	border-radius:2% 2% 0 0;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
		  -webkit-filter: blur(3px);
		  -moz-filter: blur(3px);
		  -o-filter: blur(3px);
		  -webkit-opacity:.2;
		  -moz-opacity:.2;
		  -o-opacity:.2;
}

.visitaWeb{
	z-index:9999;
	font-family: "Helveticaneue";
	letter-spacing: 1px;
	font-size:30px;
	color:#FFF;
	position:relative;
	top:-40%;
}

#espacio{
	height:200px;
}

#imagenF{
	height:300px;
}

#ideasyOle{
	margin-left:0%;
	

}

.logoItelect{
	margin-top:-10%;
}

/* Ajustar el contenedor de las tarjetas para usar flexbox */
.row {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; /* Espacio uniforme entre tarjetas */
  }
  
  /* Asegurar que las columnas ocupen el 100% del espacio */
  .col {
	flex: 1 1 calc(33.333% - 20px); /* Tres tarjetas por fila con espacio */
	margin-bottom: 20px; /* Espacio entre filas */
	max-width: calc(33.333% - 20px); /* Limitar ancho para 3 tarjetas */
  }
  
  /* Asegurar que las imágenes dentro de las tarjetas sean responsivas */
  .fondoNegro img.responsive-img {
	width: 100%;
	height: auto;
  }
  
  /* Si el espacio es menor, ajustar a una tarjeta por fila en pantallas pequeñas */
  @media (max-width: 768px) {
	.col {
	  flex: 1 1 calc(50% - 20px); /* Dos tarjetas por fila en pantallas medianas */
	  max-width: calc(50% - 20px);
	}
  }
  
  @media (max-width: 600px) {
	.col {
	  flex: 1 1 100%; /* Una tarjeta por fila en pantallas pequeñas */
	  max-width: 100%;
	}
  }