@import url("https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic");


/* Generales */

html {
	scroll-behavior: smooth;
}

body, input, select, textarea {
	color: #ffffff;
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: 16.5pt;
	font-weight: 300;
	line-height: 1.65;
}

body {
	background-color: #2e3141;
	background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/background.jpg");
	background-size: auto, cover;
	background-attachment: fixed, fixed;
	background-position: center, center;
}

ol, ul, li {
	list-style: none;
}

a {
	transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	color: #ffffff;
	text-decoration: none;
}

	a:hover {
		border-bottom-color: transparent;
		color: #ffffff !important;
	}

p {
	margin: 0 0 2em 0;
}

h1, h2, h3, h4, h5, h6 {
	color: #ffffff;
	font-family: Raleway, Helvetica, sans-serif;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 1em 0;
	text-transform: uppercase;
}

h2 {
	font-size: 1.2em;
}

h3 {
	font-size: 0.9em;
}

h4 {
	font-size: 0.7em;
}

h5 {
	font-size: 0.7em;
}

h6 {
	font-size: 0.7em;
}


/* Botones */

.boton {
	appearance: none;
	transition: background-color 0.2s ease-in-out;
	background-color: transparent;
	border-radius: 5px;
	border: 0;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125);
	color: #ffffff !important;
	display: inline-block;
	font-family: Raleway, Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: 700;
	height: 3.75em;
	letter-spacing: 0.1em;
	line-height: 3.75em;
	padding: 0 2.25em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

	.boton:hover {
		background-color: rgba(255, 255, 255, 0.025);
	}

	.boton:active {
		background-color: rgba(255, 255, 255, 0.075);
	}

	.boton.destacado {
		background-color: #4c5c96;
		box-shadow: none;
	}

		.boton.destacado:hover {
			background-color: #53639e;
		}

		.boton.destacado:active {
			background-color: #45558d;
		}

	.siguiente {
		bottom: 0;
		height: 4em;
		left: 50%;
		/* Resto la mitad del ancho de la imagen para que quede centrada */
		margin-left: -2em;
		overflow: hidden;
		position: absolute;
		width: 4em;
		background-image: url("../../images/arrow.svg");
		background-repeat: no-repeat;
		background-position: center center;
	}
		




/* Iconos */

.icono {
	text-decoration: none;
	border-bottom: none;
	position: relative;
	font-family: 'Font Awesome 5 Brands';
	font-weight: 900;
	padding: 0 1em;
	color: white;
}


/* Formularios */

.formulario {
	display: flex;
	flex-wrap: wrap;
}

	.formulario .campo {
		width: calc(100% - 1em);
		padding-bottom: 1em;
	}

	.formulario label {
		color: #ffffff;
		display: block;
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 0.8em;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		padding-bottom: 0.25em;
	}

	.formulario input[type="text"],
	.formulario input[type="password"],
	.formulario input[type="email"],
	.formulario select,
	.formulario textarea {
		appearance: none;
		background: rgba(255, 255, 255, 0.025);
		border-radius: 5px;
		border: solid 2px rgba(255, 255, 255, 0.125);
		color: inherit;
		display: block;
		outline: 0;
		padding-left: 1em;
		text-decoration: none;
		width: 100%;
	}

	.formulario input[type="text"]:invalid,
	.formulario input[type="password"]:invalid,
	.formulario input[type="email"]:invalid,
	.formulario select:invalid,
	.formulario textarea:invalid {
		box-shadow: none;
	}

	.formulario input[type="text"]:focus,
	.formulario input[type="password"]:focus,
	.formulario input[type="email"]:focus,
	.formulario select:focus,
	.formulario textarea:focus {
		border-color: #5b6ba6;
	}

	.formulario select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.125)' /%3E%3C/svg%3E");
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		padding-right: 2.75em;
		text-overflow: ellipsis;
		width: calc(100% + 1.25em);
	}

	.formulario select option {
		color: #ffffff;
		background: #2e3141;
	}

	.formulario select:focus::-ms-value {
		background-color: transparent;
	}

	.formulario select::-ms-expand {
		display: none;
	}

	.formulario input[type="text"],
	.formulario input[type="password"],
	.formulario input[type="email"],
	.formulario select {
		height: 2.5em;
	}

	.formulario textarea {
		padding: 0.75em 1em 0 0;
		padding-left: 1em;
		width: calc(100% - 1em);
	}




/* Secciones de Pagina */

/* Div principal contenedor de pagina */

#contenedor-pagina {
	-moz-transition: -moz-filter 0.25s ease;
	-webkit-transition: -webkit-filter 0.25s ease;
	-ms-transition: -ms-filter 0.25s ease;
	transition: filter 0.25s ease;
}


/* Barra superior para menu */

.barra-menu {
	/* transition: background-color 0.2s ease-in-out; */
	background-color: rgba(53, 56, 73, 0.95);
	top: 0;
	position: sticky;
	width: 100%;
	z-index: 1000;
	transition: transform 0.3s ease-in-out;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.contenedor-menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

	.contenedor-menu li a {
		-webkit-filter: brightness(80%);
		filter: brightness(80%);
	}

		.contenedor-menu li a:hover {
			-webkit-filter: brightness(100%);
			filter: brightness(100%);
		}
	/* .barra-menu.alt {
		background-color: transparent;
	} */


/* Menu */

.menu {
	display: flex;
	align-items: center;
}

	.menu li a {
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 0.8em;
		letter-spacing: 0.1em;
		font-weight: 500;
		/* line-height: 1em; */
		text-transform: uppercase;
		margin-right: 3em;
		transition: color 0.3s;
	}

		/* .menu li a:hover {
			background: #45558d;
			color: #00c9c8
		} */

.contacto {
	display: flex;
	padding-right: 1em;
}

	.contacto .icono {
		font-size: 0.8em;
	}
			

/* Banner Bienvenida */

.banner-bienvenida {
	padding-top: 5em;
	min-height: 100vh;
}

	.banner-bienvenida .contenedor-interno {
		margin: 0 auto;
		text-align: center;
		display: block;
	}

		.banner-bienvenida .contenedor-interno .logo {
			display: inline-flex;
			vertical-align: middle;
			transition: opacity 2s ease, transform 1s ease;
			transform: translateY(0);
			width: 65em;
			/* content: url("../../images/Overflow\ -\ Logotipo\ Color\ Letra\ Blanca.png"); */
		}

	.banner-bienvenida h1 {
		transition: opacity 0.5s ease, transform 0.5s ease, filter 0.25s ease;
		transform: translateX(0);
		transition-delay: 0.8s;
		filter: blur(0);
		opacity: 1;
		font-family: Raleway, Helvetica, sans-serif;
		font-size: 1em;
		font-weight: 200;
		letter-spacing: 0.1em;
		line-height: 2;
		text-transform: uppercase;
	}

body.is-preload .banner-bienvenida .logo {
	transform: translateY(0.5em);
	opacity: 0;
}

body.is-preload .banner-bienvenida p {
	opacity: 0;
	transform: translateX(0.5em);
	filter: blur(2px);
}



/* Secciones */

.seccion {
	background-color: rgba(46, 49, 65, 0.5);
	position: relative;
	text-align: center;
	/* min-height: 90vh; */
	display: block;
	font-size: large;
	margin-top: 3em;
}

	.seccion .contenedor {
		padding: 2em 7em;
	}

		.seccion .contenedor .titulo {
			font-size: xx-large;
		}

			.seccion .contenedor .introduccion h2 {
				border: 0;
			}

		.seccion .contenedor .contenido {
			width: 100%;
			padding: 2em;
		}

	.seccion h2 {
		border-bottom: solid 2px rgba(255, 255, 255, 0.125);
		padding-bottom: 0.4em;
	}

	.seccion .imagen {
		width: 60%;
		overflow: hidden;
	}

	.seccion .contenedor .imagen-radio {
		border-radius: 100%;
		margin-right: 2em;
		width: 22em;
		overflow: hidden;
	}




/* Seccion principal */

.seccion.clara {
	background-color: rgba(76, 92, 150, 0.5);
}

	.seccion.clara .contenedor {
		display: flex;
		align-items: center;
		text-align: right;
	}

		.seccion.clara .contenedor .imagen-radio {
			content: url("../../images/sobre_nosotros.jpg");
		}


/* Seccion dividida */

.seccion.dividida {
	display: flex;
	flex-wrap: wrap;
	background-color: transparent;
	padding: 2em 2em;
	text-align: center;
}

	/* .seccion.dividida .data-management {
		content: url("../../images/data-management.jpg");
	}

	.seccion.dividida .datawarehousing {
		content: url("../../images/datawarehousing.jpg");
	}

	.seccion.dividida .business-intelligence {
		content: url("../../images/business-intelligence.jpg");
	}

	.seccion.dividida .machine-learning {
		content: url("../../images/machine-learning.jpg");
	} */

	.seccion.dividida article {
		padding: 2em;
		background-color: rgba(76, 92, 150, 0.5);
		border-radius: 5px;
		margin: 1em;
		width: calc(50% - 6em);
	}

		.seccion.dividida article img {
			border-radius: 5px 5px 0 0;
			display: block;
			/* se resta el padding de la seccion article */
			margin-left: -2em;
			margin-top: -2em;
			position: relative;
			width: calc(100% + 4em);
			padding-bottom: 1.5em;
		}

		.seccion.dividida article h3 {
			padding-bottom: 1em;
			border-bottom: solid 2px rgba(255, 255, 255, 0.125);
			font-size: medium;
		}

		.seccion.dividida article p {
			font-size: medium;
		}

	.seccion.dividida .member {
		padding: 3em 0;
		width: 50%;
	}

		.seccion.dividida .member a img {
			height: 15em;
			margin: 1vw 0;
			border: double 12px transparent;
			border-radius: 50%;
			background-image: linear-gradient(white, white), radial-gradient(circle at top left, #F4A945,#EB5D00);
			background-clip: content-box, border-box;
			-webkit-filter: brightness(80%);
			filter: brightness(80%);
		}

		/*Efecto de brillo al posar el mouse en la imagen*/
		.seccion.dividida .member a img:hover {
			-webkit-filter: brightness(100%);
			filter: brightness(100%);
		}

		.seccion.dividida .member h1 {
			margin: 0 0 0 0;
			/* color: #EB5D00; */
			font-family: Raleway, Helvetica, sans-serif;
			font-weight: 700;
			letter-spacing: 0em;
			text-transform: uppercase;
		}

		.seccion.dividida .member p {
			margin: 0 0 0.5 0;
		}
	
	.seccion.dividida .contenedor {
		display: flex;
		align-items: center;
	}

		.seccion.dividida .contenedor .imagen {
			height: 150px;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			border-radius: 10px;
			background-color: transparent;
		}

			/* .seccion.dividida .contenedor .imagen.saludo {
				background-image: url("../../images/Handshake.jpg");
			}

			.seccion.dividida .contenedor .imagen.grafico {
				background-image: url("../../images/corporate.jpg");
			} */

		.seccion.dividida .contenedor p {
			text-align: justify;
			padding-left: 1em;
			/* width: 50vw; */
		}

/* Seccion para logos de clientes */

.seccion.clientes {
	background-color: rgba(76, 92, 150, 0.5);
}

	.seccion.clientes .contenedor {
		text-align: left;
	}

	.seccion.clientes .seccion-logos {
		display: grid;
		grid-template-columns: calc(25% - 2em) calc(25% - 2em) calc(25% - 2em) calc(25% - 2em);
		grid-gap: 1em;
	}

		.seccion.clientes .seccion-logos .logo {
			transition: background-color 0.2s ease-in-out;
			display: inline-block;
			padding: 1em;
			height: 6em;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
			background-color: rgba(255, 255, 255, 0.05);
			border-radius: 10px;
		}

			.seccion.clientes .seccion-logos .logo:hover {
				background-color: rgb(255, 255, 255);
			}

			.seccion.clientes .seccion-logos .logo.mailpips {
				background-image: url("../../images/Logo\ Cliente\ -\ Mailpips.png");
			}

			.seccion.clientes .seccion-logos .logo.sullair {
				background-image: url("../../images/Logo\ Cliente\ -\ Sullair.png");
			}




/* Seccion para servicios */

.seccion.servicios {
	display: flex;
	flex-wrap: wrap;
	border-radius: 0.25em;
	border: solid 1px rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.05);
	margin: 0 7em 2em 7em;
}

	.seccion.servicios .servicio {
		/* 50% de la pagina menos los dos bordes */
		width: calc(50% - 2px);
		height: 17em;
		border: solid 1px rgba(255, 255, 255, 0.15);
		display: flex;
		flex-wrap: nowrap;
		text-align: center;
		align-items: center;
	}

		.seccion.servicios .servicio .contenido {
			display: block;
			text-align: justify;
			padding-right: 2em;
		}

		.seccion.servicios .servicio i {
			font-size: 5em;
			margin: 0 -0.5em;
			width: 0;
			padding-right: 2em;
		}

/* Pie de pagina */

.pie {
    background: rgba(53, 56, 73, 0.95);
    padding: 1em 0;
    text-align: center;
	display: block;
}

	.pie .logo {
		display: inline-flex;
		width: 20em;
		margin-bottom: -1em;
		/* content: url("../../images/Overflow\ -\ Logotipo\ Color\ Letra\ Blanca.png"); */
	}

    .pie .copyright {
        font-size: 0.8em;
        text-align: center;
    }

	.pie .copyright li {
		border-left: solid 1px rgba(255, 255, 255, 0.3);
		display: inline-block;
		margin-left: 1.5em;
		padding-left: 1.5em;
	}

		.pie .copyright li:first-child {
			border-left: 0;
			margin-left: 0;
			padding-left: 0;
		}

		.pie .copyright li a {
			color: inherit;
		}

	.pie.menu {
		background: transparent;
		padding: 0;
	}


.datos-contacto {
	display: flex;
	list-style: none;
	font-size: 4em;
	justify-content: center;
}

	.datos-contacto.navegacion {
		font-size: large;
	}


/* Cortes de pantalla */

@media screen and (max-width: 1400px) {
	.barra-menu nav a[href="#menu"] {
		/* background-color: cyan; */
	}

	.banner-bienvenida .contenedor-interno .logo {
		width: 55em;
		margin-top: 3em;
	}
}

@media screen and (max-width: 1200px) {
	.barra-menu nav a[href="#menu"] {
		/* background-color: red; */
	}

	.banner-bienvenida .contenedor-interno .logo {
		width: 50em;
	}


		.seccion .contenedor {
			padding: 5em 6em;
		}
	
}

@media screen and (max-width: 1100px) {
	.barra-menu nav a[href="#menu"] {
		/* background-color: green; */
	}
	
	.banner-bienvenida .contenedor-interno .logo {
		width: 32em;
		margin-top: 0;
		content: url("../../images/Overflow\ -\ Logotipo\ Color\ Letra\ Blanca\ -\ Vertical.png");
	}
	
	.banner-bienvenida p {
		font-size: 0.8em;
	}

	.seccion .contenedor {
		padding: 5em 2em;
		font-size: large;
	}

	.seccion h2 {
		font-size: large;
	}

	.seccion p {
		font-size: medium;
	}

	.seccion .contenedor .imagen {
		padding-left: 1em;
		width: 25em;
	}

}

/* @media screen and (max-width: 750px) { */
@media screen and (max-width: 900px) {
	.barra-menu nav a[href="#menu"] {
		/* background-color: yellow; */
	}

	.banner-bienvenida .contenedor-interno .logo {
		width: 27em;
	}

	.banner-bienvenida p {
		font-size: 0.7em;
		padding: 0 2em;
	}

	.seccion .contenedor {
		padding-top: 2em;
	}

	.seccion .contenido {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.seccion .contenedor .imagen {
		margin: 0;
	}

	.seccion.principal .contenedor {
		display: block;
		text-align: center;
	}

	.seccion.dividida {
		display: inline-block;
		padding-left: 0;
		padding-right: 0;
	}
		
		.seccion.dividida article {
			display: inline-block;
			margin: 0.5em;
			width: 80%;
			text-align: center;
		}
	
			.seccion.dividida article img {
				display: inline-block;
				margin: 0;
				width: 50%;
				padding-bottom: 1.5em;
			}

	.seccion.clientes .seccion-logos {
		grid-template-columns: calc(33% - 1.5em) calc(33% - 1.5em) calc(33% - 1.5em);
		grid-gap: 2em;
	}

	.seccion.contacto {
		background-image: none;
	}
	
		.seccion.contacto .contenedor {
			background-color: rgba(0, 0, 0, 0.1);
		}
	
			.seccion.contacto .contenedor-formulario .formulario-contacto {
				margin: 0 2em 0 0;
				width: 100%;
			}




				.formulario label {
					font-size: 0.7em;
				}
									
				.formulario input[type="text"],
				.formulario input[type="password"],
				.formulario input[type="email"],
				.formulario select {
					height: 2.5em;
					font-size: medium;
				}
			
				.formulario textarea {
					padding-left: 1em;
					font-size: medium;
				}



}


@media screen and (max-width: 600px) {
	.barra-menu nav a[href="#menu"] {
		/* background-color: blue	; */
	}

	.banner-bienvenida .contenedor-interno .logo {
		width: 22em;
		padding: 1em 0;
	}


}

@media screen and (max-width: 450px) {
	.barra-menu nav a[href="#menu"] {
		/* background-color: white; */
	}
}