@import url(reset.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);

body {
	color: #444444;
	font-family: 'Roboto', sans-serif;
}

a,
a:visited,
a:hover {
	color: #139ebd;
	text-decoration: none;
}

b {
	font-weight: 600;
}

.container {
	height: 100%;
	margin: 0 auto;
	max-width: 960px;
}


.right {
	float: right;
	display: inline-block;
	width: 50%;
}

.left {
	float: left;
	display: inline-block;
	width: 49%;
}

.right,
.left {
	height: 100%;
}

.svg-image {
	max-width: 500px;
	display: block;
	width: 100%;
	margin: auto;
}

strong {
	font-weight: 500;
}

	#header {
		background-color: white;
		text-align: center;
	}
		#header .container {
			align-items: center;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			padding: 0 20px;
		}
			#header .logo {
				/*flex-grow: 1;*/
				/*display: inline-block;*/
				padding: 20px;
			}
				#header .logo img {
					display: block;
				}

			.nav-expand {
				display: none;
			}

			#nav {
				flex-grow: 1;
				background-color: white;
			}
				#nav .nav-wrap {

				}

					#nav .nav-wrap {
						padding: 2rem 0;
						display: grid;
						grid-template-columns: 1fr 1fr 1fr 1fr;
					}
						#nav .nav-wrap a{
							display: grid;
							align-items: center;
							color: #444444;
							border-right: 1px solid #ddd;
							padding: .5rem;
						}

						#nav .nav-wrap a:last-child {
							border-right: none;
						}

	#intro {
		padding: 5rem 1rem 0;
		background-image: url('../images/hero-bg.jpg');
		background-repeat: no-repeat;
		background-size: cover;
	}

		#intro .container .right img{
			display: block;
			width: 100%;
			max-width: 500px;
			margin: 0 auto;
		}

			#intro .container div:first-child {
				text-align: right;
			}
				#intro .container div:first-child h1 {
				}
					#intro .container div:first-child h1 span {
						display: block;
					}
						#intro .container div:first-child h1 span:nth-child(1) {
							color: #9eca00;
							text-align: left;
							font-size: 2.5rem;
							padding: 20px 0 3px;
						}
						#intro .container div:first-child h1 span:nth-child(2),
						#intro .container div:first-child h1 span:nth-child(3) {
							color: white;
							font-size: 1.2em;
							font-weight: 300;
							line-height: 1.2;
						}
	.section {
	
		line-height: 1.2;
		padding: 0 1rem 2rem;

	}


		.section p {
			font-size: 1em;
			font-weight: 300;
			margin-bottom: 20px;
		}

	#quienes-somos {
		min-height: 650px;
		position: relative;
		text-align: center;
		background-color: #f7f7f7;
	}

		#quienes-somos .container {
			
		}
			#quienes-somos .container .quienes-somos-image {
				margin-bottom: 1rem;
			}
			
			#quienes-somos h2 {
				color: #444444;
				font-size: 2.3em;
				font-weight: 600;
				padding: 40px 0;
				text-transform: uppercase;
			}

			.graph-quienes-somos-2 {
				background: transparent url('../images/graph-quienes-somos-2.png') no-repeat center bottom;
				bottom: 50px;
				height: 54px;
				left: 50%;
				margin-left: -12px;
				position: absolute;
				width: 24px;
			}

	#servicios {

		text-align: center;
	}

		.graph-puntos {
			background: transparent url('../images/graph-puntos.png') no-repeat center top;
			height: 73px;
			margin: 15px 0;
			/*left: 50%;
			margin-left: -20px;
			width: 40px;*/
		}

		#servicios > p:last-child {
			margin-bottom: 0;
		}

			#servicios .servicios-box-1 {
				margin-bottom: 90px;
				margin-top: 150px;
			}
			#servicios .servicios-box-1,
			#servicios .servicios-box-2 {
				margin-left: 260px;
				position: relative;
				text-align: left;
				width: 60%;
				z-index: 100;
			}

			#servicios .servicios-box-2 {
				
			}

		.graph-servicios {
			background: transparent url('../images/graph-servicios.png') no-repeat;
			height: 524px;
			left: 50%;
			margin-left: -410px;
			position: absolute;
			top: 220px;
			width: 433px;
			z-index: 1;
		}

	#que-es-un-eflyer {
		position: relative;
		text-align: center;
	}
		#que-es-un-eflyer .container {
			width: 100%;
		}
			#que-es-un-eflyer p {
				margin-bottom: 0;
			}

			#que-es-un-eflyer h4 {
				font-size: 1.5em;
				font-weight: bold;
			}

		.graph-que-es-un-eflyer {
			background: transparent url('../images/graph-que-es-un-eflyer.png') no-repeat;
			height: 479px;
			left: 50%;
			margin-left: -495px;
			position: absolute;
			width: 968px;
		}

	#beneficios {
		position: relative;
	}

	#alcance {
		position: relative;
	}
		#alcance .container p strong {
			font-size: 1.2em;
		}

	#clientes {
		position: relative;
		text-align: center;
	}
		#clientes > .container {
			padding-top: 40px;
		}

		#clientes .section-carousel {
			background-color: #fff;
			overflow: hidden;
			padding-bottom: 40px;
			padding-top: 20px;
		}

	#contacto {
		background-image: url('../images/contact-bg.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		text-align: center;
	}
		#contacto .graph-contacto {
			height: 160px;
			margin: 15px auto 30px;
			width: 110px;
		}

	#footer {
		color: #fff;
		text-align: center;
		padding: 2rem 0;
	}
		#footer .separator p {
			font-size: 0.875em;
			margin-bottom: 0;
			padding-top: 15px;
		}

.text-color-green {
	color: #9ECA00;
}

/*
 * Carousel.
 */
 .nbs-flexisel-container {
			position: relative;
			max-width: 100%;
		}

			.nbs-flexisel-inner {
				overflow: hidden;
				float: left;
				width: 100%;
			}

				.nbs-flexisel-ul {
					position: relative;
					width: 99999px;
					margin: 0px;
					padding: 0px;
					list-style-type: none;   
					text-align: center;  
				}

					.nbs-flexisel-item {
						float: left;
						margin: 0px;
						padding: 0px;
						cursor: pointer;
						position: relative;
						line-height: 0px;
					}

						.nbs-flexisel-item img {
							width: 100%;
							cursor: pointer;
							position: relative;
							margin-top: 10px;
							margin-bottom: 10px;
							/*max-width: 220px;
							max-height: 110px;*/
							max-width: 160px;
							max-height: 80px;
						}

			.nbs-flexisel-nav-left, .nbs-flexisel-nav-right {
				width: 22px;
				height: 22px; 
				position: absolute;
				cursor: pointer;
				z-index: 100;
				opacity: 1;
			}

			.nbs-flexisel-nav-left {
				top: 45px !important;
				left: 10px;
				background: transparent url(../images/button-previous.png) no-repeat;
			}

			.nbs-flexisel-nav-right {
				top: 45px !important;
				right: 5px;
				background: transparent url(../images/button-next.png) no-repeat;
			}

.content-responsive {
	display: none;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/*
 * Responsive.
 */
@media only screen and (max-width : 768px) {
	.right,
	.left {
		float: none;
		display: block;
		width: 100%;
	}


	#header .container {
		flex-direction: column;
	}

	.logo {
		width: 100%;
		padding: 10px!important;
	}

	#nav {
		width: 100%;
	}

	.logo a,
	.logo a img {
		display: block;
		margin: auto;
		max-width: 150px;
	}

	.nav-expand {
		display: block;
		width: 100%;
		padding: 10px;
		color: #999;
	}

	#nav {
		display: none;
	}

	#nav .nav-wrap {
		padding: 0;
		display: flex;
		flex-direction: column;
	}
		#nav .nav-wrap a{
			border-right: none;
			border-bottom: solid 1px #444444;
			padding: 1rem 0;
		}

	#nav {
		background-color: transparent;
		padding: 20px 30px;
	}
		#nav ul {
			display: block;
		}
			#nav ul li {
				border: none;
				float: none;
				margin-bottom: 15px;
				width: 100%;
			}
				#nav ul li a {
					border-radius: 8px;
					padding: 10px;
				}
				#nav ul li:nth-child(odd) a {
					background-color: #349dc0;
				}
				#nav ul li:nth-child(even) a {
					background-color: #aad000;
				}

		#intro .container .flowers {
			bottom: 0;
			height: 139px;
			left: 50%;
			margin-left: -120px;
			position: absolute;
			width: 240px;
		}

			#intro .container .left {
				margin-bottom: 2rem;
			}

			#intro .container .right img {
				max-width: 300px;
			}

				#intro .container div:first-child h1 span:nth-child(1) {
					text-align: center;
				}
				#intro .container div:first-child h1 span:nth-child(2),
				#intro .container div:first-child h1 span:nth-child(3) {
					text-align: center;
				}

	#quienes-somos {
		min-height: 450px;
	}

		#quienes-somos .container .quienes-somos-image .svg-image {
			max-width: 300px;
		}
			#quienes-somos h2 {
				font-size: 1.6em;
			}

			.content-responsive {
				padding-left: 30px;
				padding-right: 30px;
			}

			.graph-quienes-somos-2 {
				background: transparent url('../images/mobile/graph-quienes-somos-2.png') no-repeat center bottom;
				bottom: 40px;
				height: 102px;
				left: 50%;
				margin-left: -10px;
				position: absolute;
				width: 20px;
			}

	.content-responsive {
		display: block;
	}

	.content-responsive-hide {
		display: none!important;
	}

	#servicios {

	}
		.graph-servicios {
			background: transparent url('../images/mobile/graph-servicios-1.png') no-repeat;
			height: 621px;
			margin-left: -127px;
			top: 98px;
			width: 254px;
		}

		#servicios .content-responsive p:nth-child(1) {
			margin-top: 100px;
		}

		#servicios .content-responsive p:nth-child(2) {
			margin-top: 135px;
		}

		#servicios .content-responsive p:nth-child(3) {
			margin-top: 140px;
		}

		#servicios .content-responsive p:nth-child(4) {
			margin-bottom: 10px;
			margin-top: 140px;
		}

		#servicios .content-responsive .graph-puntos {
			margin: 0;
		}

		#servicios .content-responsive h2 {
			color: #444444;
			font-size: 1.6em;
			font-weight: 300;
			padding-bottom: 130px;
			padding-top: 0;
			text-transform: uppercase;
		}

		.head-leaf {
			height: 30px;
			position: relative;
		}
			.leaf {
				background: transparent url('../images/mobile/leaf.png') no-repeat 0 0;
				left: 50%;
				height: 26px;
				margin-left: 10px;
				position: absolute;
				top: -30px;
				width: 32px;
			}

		.graph-servicios-2 {
			background: transparent url('../images/mobile/graph-servicios-2.png') no-repeat center top;
			height: 296px;
			width: 100%;
		}

		
	#servicios .content-responsive h3 {
			color: #349dc0;
			font-size: 1.2em;
			font-weight: bold;
			text-transform: uppercase;
		}
		.graph-servicios-3 {
			background: transparent url('../images/mobile/graph-servicios-3.png') no-repeat center top;
			height: 207px;
			margin-bottom: 20px;
			width: 100%;
		}

		.text-green {
			color: #acd400;
		}

		.graph-servicios-4 {
			background: transparent url('../images/mobile/graph-servicios-4.png') no-repeat center top;
			height: 183px;
			margin-bottom: 40px;
			width: 100%;
		}

	#clientes .graph-clientes-1 {
		background: transparent url('../images/mobile/graph-clientes-1.png') no-repeat center top;
		height: 65px;
		margin-bottom: 10px;
		margin-top: -20px;
		width: 100%;
	}

	/*#clientes .section-carousel {
		background-color: transparent;
		border-top: none;
		padding-bottom: 60px;
		padding-top: 0;
	}*/

	#contacto .graph-contacto {
		background: transparent url('../images/mobile/graph-contacto-1.png') no-repeat center top;
		height: 160px;
		margin-bottom: 40px;
		width: 100%;
	}

	#footer .separator {
		background: #574f40 url('../images/mobile/bg-footer.jpg') repeat-x 0 0;
		height: auto;
	}
		#footer .separator p {
			padding-bottom: 20px;
			padding-top: 20px;
		}

}


/*general classes*/
/*general classes*/

.section-title {
	text-align: center;
	font-size: 2.3em;
	font-weight: 600;
	padding: 40px 0;
	text-transform: uppercase;
}


.f-w-image {
	display: block;
	margin: auto;
	width: 100%;
}

.centerded-grid-item {
	justify-self: center;
	align-self: center;
}


.max-200 {
	max-width: 200px;
}

.max-300 {
	max-width: 300px;
}

.max-600 {
	max-width: 600px;
}

.algn-left-responsive,
.algn-left-responsive * {
	text-align: left;
}



/*colors*//*colors*/

.white-text {
	color: white;
}

.red-text {
	color: #E9272F;
}

.blue-text {
	color: #3C96D3;
}





/*margins*//*margins*/
.m-b-1 {
	margin-bottom: 1rem;
}

.m-t-1 {
	margin-top: 1rem;
}

.m-t-2 {
	margin-top: 2rem;
}

.m-b-2 {
	margin-bottom: 2rem;
}




.subtitle {
	font-size: 1.5em;
	font-weight: 500;
}



.black-bg {
	background-color: #333333;
}

/*grids*//*grids*//*grids*/

.servicios-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	justify-content: center;
	align-items: center;
}

.grid-halfs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	align-items: center;
}

.g-gap-1 {
	grid-gap: 1rem;
}



@media only screen and (max-width : 768px) {
	
	.servicios-grid {
		grid-template-columns: 100%;
		grid-template-rows: 50% 50%;

		justify-content: center;
		align-items: center;
	}

	.subtitle {
		font-size: 1.35em;
	}


	/*general classes*/
	/*general classes*/

	.section-title {
		font-size: 1.6em;
	}

	.algn-left-responsive,
	.algn-left-responsive * {
		text-align: center;
	}

	/*grids*//*grids*//*grids*/
	.grid-halfs.responsive {
		grid-template-columns: 100%;
		grid-template-rows: 50% 50%;
	}

}


.fixed_header_hidden {
	transition: all .25s ease;
	position: fixed;
	width: 100%;
	z-index: 999;
	transform: translateY(-100%);
}

.fixed_header_show {
	transform: translateY(0);
}




/*for transitions*//*for transitions*//*for transitions*//*for transitions*/
.transitioned {
	transition: all .5s cubic-bezier(1,-0.02, 1, 1);
}

.transparent {
	opacity: 0;
}

.show-transparent {
	opacity: 1;
}



#to_top {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	color: white;
	z-index: 9999;
}

.active_link {
	background-color: #eee;	
}