/* ==========================================================================
   CSS by Meiji Valmont
   ========================================================================== */

body {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	padding-top: 0px;
	padding-bottom: 0px;
	background-color: #fff;
}

	body > nav {
		margin-bottom: 0px;
		width: 100%;
		z-index: 9999;
	}

	body > nav > div div.navbar-header {
		padding-left: 50px;
	}

	.navbar {
		position: fixed;
	}

div.before-header {
	font-weight: 400;
	text-align: right;
	vertical-align: middle;
	margin-left: -15px;
	margin-right: -15px;
	padding: 20px 50px;
	border-bottom: 1px #58585a solid;
}

	div.before-header a {
		color: #58585a;
	}

	div.before-header a:last-child {
		margin-left: 10px;
	}

		div.before-header a img {
			margin-right: 3px;
		}

div.navbar-header {

}

	div.navbar-header h1 {
		margin: 0px;
	}

	div ul.nav {
		font-weight: 400;
		text-transform: uppercase;
		padding-top: 40px;
		padding-right: 50px;
	}

		div ul.nav > li:last-child > a {
			padding-right: 0px;
		}

		.navbar-default .navbar-nav > li > a:hover,
		.navbar-default .navbar-nav > li > a:focus {
			color: #0a618a;
		}


		/*
		 The shrink class is added with jQuery,
		 it's used to shrink the navigation when scrolling down
		 *******************************************************/
		nav.shrink > div > .before-header {
			padding: 5px 50px;
		}

		nav.shrink .navbar-brand {
			height: 50px;
		}

			nav.shrink .navbar-brand > img {
				width: 60%;
				height: auto;
			}

		nav.shrink .navbar-nav > li > a {
			padding-top: 15px;
			padding-bottom: 15px;
		}

		nav.shrink > div > div ul.nav {
			padding-top: 20px;
		}


/*
 Intro
 *************************************************************************************/

section.intro {
	padding-top: 230px;
	padding-bottom: 100px;
	text-align: center;
	background-color: #0a2a40;
	background-image: url('../img/parallax/imagen1.jpg');
	background-size: 100%;
	background-position: top center;
	background-attachment: fixed;
}

	section.intro > div {
		color: #fff;
		width: 50%;
		text-align: left;
		margin: 0 auto;
		margin-top: 20px;
		padding: 5px 50px 20px;
		background-color: rgba(7, 30, 43, .5);
	}



		section.intro > div h2 {
			font-weight: 700;
		}

		section.intro > div p {
			font-size: 18px;
		}

/*
 Nosotros
 *************************************************************************************/

section.nosotros {
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
	border-bottom: 1px #d1d2d4 solid;
}

	section.nosotros > div div div div{
		margin: 0px;
		padding: 20px;
		height: 250px;
		background-color: #f4f4f4;
	}

		section.nosotros div > h4 {
			color: #185e80;
			font-size: 28px;
			font-weight: 700;
		}

		section.nosotros div > p {
			margin-bottom: 0px;
		}

		section.nosotros div > p:nth-child(3) {
			color: #185e80;
			font-weight: 700;
		}



/*
 Nosotros Telefónica
 *************************************************************************************/

section.nosotros-telefonica {
	text-align: center;
	padding: 50px;
}

	section.nosotros-telefonica img {
		margin: 0 auto;
		padding: 25px;
	}

	section.nosotros-telefonica ul {
		color: #186082;
		list-style-type: none;
		text-transform: uppercase;
		padding: 0 200px;
	}

		section.nosotros-telefonica ul li {
			display: inline-block;
			margin-right: -4px;
			vertical-align: top;
			width: 240px;
			font-size: 22px;
			text-align: center;
		}



/*
 Nuestro Alcance
 *************************************************************************************/

section.alcance {
	color: #fff;
	padding: 50px 0px;
	text-align: center;
	background-color: #195476;
	background-image: url('../img/parallax/imagen2.jpg');
	background-size: 100%;
	background-position: center bottom;
	background-attachment: fixed;
}

	section.alcance div > h3 {
		font-size: 40px;
		font-weight: bold;
		text-transform: uppercase;
		margin: 0px;
	}

	section.alcance div > p {
		font-size: 14px;
		font-weight: bold;
		margin: 5px 0px 30px;
	}

		section.alcance img {
			padding: 10px 0px;
		}

	section.alcance div > p:last-child {
		font-size: 20px;
		font-weight: 300;
		margin: 35px 0px 0px;
	}



/*
 Nuestros Servicios
 *************************************************************************************/

section.servicio {
	padding: 50px 0px;
	text-align: center;
}

	section.servicio div > h3 {
		color: #186081;
		font-size: 40px;
		font-weight: bold;
		text-transform: uppercase;
	}

	section.servicio div > p {
		font-size: 14px;
		font-weight: bold;
		margin: 5px 0px 30px;
	}

	section.servicio div > h4 {
		color: #a7a9ac;
		font-size: 24px;
		text-transform: uppercase;
		margin-bottom: 50px;
	}

		section.servicio div > h4 > span {
			font-weight: 700;
		}

			section.servicio div > div > div > div {
				border-left: 3px #d1d2d4 solid;
				border-right: 3px #d1d2d4 solid;
			}

			section.servicio div > h5 {
				font-size: 28px;
				font-weight: 700;
				text-transform: uppercase;
				margin-top: 40px;
			}

				section.servicio > div > div:nth-child(4) {
					color: #58585a;
				}

				section.servicio > div > div:nth-child(4) > div:nth-child(odd) {
					color: #186082;
				}

				section.servicio > div > div:last-child {
					color: #186082;
				}

				section.servicio > div > div:last-child > div:nth-child(odd) {
					color: #58585a;
				}

			section.servicio > div > div > div p {
				font-size: 18px;
				margin-bottom: 70px;
			}



/*
 Información Segura y Accesible
 *************************************************************************************/

section.info-segura {
	color: #fff;
	padding: 50px 0px;
	text-align: center;
	background-color: #db8e0c;
	background-image: url('../img/parallax/imagen3.jpg');
	background-size: 100%;
	background-position: center bottom;
	background-attachment: fixed;
}

	section.info-segura > h3 {
		font-size: 40px;
		font-weight: bold;
		text-transform: uppercase;
		margin: 0px;
	}

	section.info-segura > p {
		font-size: 14px;
		font-weight: bold;
		margin: 5px 0px 20px;
	}

	section.info-segura > h4 {
		font-size: 24px;
		font-weight: 300;
		line-height: 36px;
		margin: 0px;
	}

		section.info-segura > h4 > span {
			font-weight: 700;
		}



/*
 Nuestra Plataforma
 *************************************************************************************/

section.plataforma {
	color: #186082;
	text-align: center;
	padding: 50px 0px;
}

	section.plataforma > div > h3 {
		font-size: 32px;
		font-weight: bold;
		text-transform: uppercase;
	}

	section.plataforma > div > p {
		font-size: 14px;
		font-weight: bold;
		margin: 5px 0px 50px;
	}

		section.plataforma > div > div {
			text-align: left;
		}

			section.plataforma > div > div > div {
				font-size: 22px;
			}

				section.plataforma > div img {
					margin: 100px 0 0 50px;
				}

				section.plataforma > div ul {
					list-style-type: none;
					padding-left: 0px;
				}

					section.plataforma > div ul li {
						padding: 12px 20px;
						margin-bottom: 5px;
						border-radius: 6px;
					}

						section.plataforma > div ul li span {
							font-weight: 700;
						}

					section.plataforma > div ul li:nth-child(odd) {
						background-color: #f3f3f4;
					}

					section.plataforma > div ul li:nth-child(even) {
						background-color: #e1e6ec;
					}



/*
 Aplicaciones
 *************************************************************************************/

section.aplicaciones {
	color: #fff;
	padding: 50px 0px;
	text-align: center;
	background-color: #636464;
	background-image: url('../img/parallax/imagen4.jpg');
	background-size: 100%;
	background-position: center;
	background-attachment: fixed;
}

	section.aplicaciones > div > h3 {
		font-size: 40px;
		font-weight: bold;
		text-transform: uppercase;
		margin: 0px;
	}

	section.aplicaciones > div > p {
		font-size: 14px;
		font-weight: bold;
		margin: 5px 0px 50px;
	}

		section.aplicaciones div > ul {
			list-style-type: none;
			padding-left: 0px;
		}

		section.aplicaciones div:last-child > ul {
			text-align: left;
		}

			section.aplicaciones div > ul li {
				padding: 5px 0px;
			}

				section.aplicaciones div > ul li > h4 {
					font-size: 30px;
					font-weight: 700;
				}

				section.aplicaciones div > ul li > p {
					font-size: 20px;
				}



/*
 Footer
 *************************************************************************************/

footer {
	color: #fff;
	background-color: #134c70;
	padding: 50px;
}

	footer div > h3 {
		font-size: 32px;
		font-weight: bold;
		text-transform: uppercase;
		margin: 0px;
	}

	footer div > p {
		font-size: 20px;
		font-weight: 700;
		padding: 5px 0px;
	}

	footer div > img {
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 40px;
	}



/*
 Formulario de contacto
 *************************************************************************************/

form {
	margin-top: 15px;
}

	form > input,
	form > textarea {
		display: block;
		color: #a7a9ac;
		font-size: 20px;
		font-weight: 700;
		width: 100%;
		padding: 7px 10px;
		margin-bottom: 20px;
		border: 0px;
		border-radius: 7px;
	}

	form > textarea {
		height: 120px;
		line-height: 150%;
	}

	form > input.enviar {
		color: #134c70;
		text-transform: uppercase;
		width: 150px;
		margin-top: 20px;
		margin-left: auto;
		margin-right: 0px;
	}

	form > input.correo {
		position: absolute;
		width: 1px;
		height: 1px;
		right: 1px;
		border: 0;
		padding: 0;
		background-color: #134c70;
	}



/*
 Media Queries
 *************************************************************************************/

@media only screen and (max-width : 1200px) {
	section.nosotros-telefonica ul {
		padding: 0 12%;
	}

		section.nosotros-telefonica ul li {
			width: 33.3%;
		}
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1064px) {
	div ul.nav {
		padding-right: 0px;
	}

	section.intro > div {
		width: 80%;
	}
}

	@media only screen and (max-width : 1024px) {
	
		.navbar-default .navbar-nav > li > a {
			padding-left: 10px;
			padding-right: 10px;
		}
	}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	body > nav > div div.navbar-header {
		padding-left: 0px;
	}

	div ul.nav {
		font-size: 12px;
	}

	.navbar-default .navbar-nav > li > a {
		padding-left: 7px;
		padding-right: 7px;
	}

	section.nosotros > div div div div {
		height: auto;
	}

	section.aplicaciones div > ul li {
		display: inline-block;
		padding-left: 20px;
		padding-right: 20px;
		margin-right: -4px;
		vertical-align: top;
	}

	section.plataforma > div img {
		margin-left: 0px;
	}
}

	@media only screen and (max-width : 827px) {
		.navbar-default .navbar-nav > li > a {
			padding-left: 5px;
			padding-right: 5px;
		}
	}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	nav.shrink .navbar-brand {
		height: 65px;
	}

	section.nosotros-telefonica {
		padding: 10px;
	}

		section.nosotros-telefonica ul {
			padding: 0;
		}

			section.nosotros-telefonica ul li {
				font-size: 18px;
			}

	section.servicio div > div > div > div {
		border-left: 0px;
		border-right: 0px;
	}

	section.plataforma > div img {
		margin: 0px 0 50px 0px;
	}

	section.aplicaciones div > ul li {
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	section.intro > div {
		padding: 5px 20px 20px;
	}

	section.nosotros-telefonica ul li {
		font-size: 12px;
	}

	footer {
		padding: 50px 5px;
	}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
	
}