@import "fonts.css";

/* ==========================================================================
   Author's custom styles
========================================================================== */
body{
	/*font-size:100%;*/
	color: #474747;
}
body,html{
	height: 100%
}
.green-span{
	color: #607436;
	font-weight: 700;
}
/******************************

TOP NAV

*******************************/

.navbar{
	display: none;
}
.navbar-inverse {
	background-color: #161616;
}
.navbar-brand{
	color: #E9E9E9 !important;
	font-family: 'Roboto Slab', serif;
}
.navbar-nav>li>a {
color: #999999;
  display: block;
  font-family: 'Century Gothic';
  font-size: 12px;
}

/******************************

SIDEBAR NAV

*******************************/


#sidebar-wrapper {
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #050808;
  overflow: hidden;
  position: fixed;
  height: 100%;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 50px;
}

.sidebar-nav li {
  line-height: 20px;
  text-indent: 20px;
  margin-right: -15px;
}
	.sidebar-nav li.active a {
	  color: white;
	}

.sidebar-nav li a {
  color: #999999;
  cursor: pointer;
  display: block;
  font-family: 'Century Gothic';
  font-size: 12px;
  text-decoration: none;
}

.sidebar-nav li a:hover {
  color: #fff;
  background-color: #050808;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none !important;
}

.sidebar-nav > .sidebar-brand {
  line-height: 60px;
  margin-bottom: 20px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999999;
  margin-top: 100px;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

.redes-sociales{
 	margin-top: 50px;
  	color: #E2E2E1;
}

	.redes-sociales > a > i{
		margin-left: 10px;
		transition: all 0.4s ease 0s;
	}

		.redes-sociales > a > i:hover{
			color: #fff;
		}

.info-general{
	color: #E2E2E1;
	margin-top: 12px;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 300;
}

#menu-toggle {
  display: none;
}

.inset {
  padding: 20px;
}

/****************************

PRINCIPAL WARPPER

*****************************/

#wrapper {
	height: 100%;
  	padding-left: 250px;
  	transition: all 0.4s ease 0s;
}

#page-content-wrapper {
  	width: 100%;
}

/***********************************

IMAGENES SECCION HEAD

************************************/

.nosotros > .full-width-image,
.servicios > .full-width-image,
.sustentabilidad > .full-width-image,
.trabajo > .full-width-image,
.contacto > .full-width-image {
	background-size: cover;
	padding-top: 4em;
	padding-bottom: 3em;
}

.nosotros > .full-width,
.servicios > .full-width,
.sustentabilidad > .full-width,
.trabajo > .full-width,
.contacto > .full-width{
	padding-top: 4em;
}

.nosotros > .full-width-image{
	background: url(../img/secciones-portadas/nosotros.jpg) no-repeat center center;
	background-size: cover;
}

.servicios > .full-width-image{
	background-color: rgba(23, 23, 23, 1);
}

.sustentabilidad > .full-width-image{

}

.trabajo > .full-width-image{
}

.contacto > .full-width-image{

}

	.nosotros > .full-width-image h1,
	.servicios > .full-width-image h1,
	.sustentabilidad > .full-width-image h1,
	.trabajo > .full-width-image h1,
	.contacto > .full-width-image h1{
		color: #fff;
		font-family: 'Roboto Slab', serif;
		font-size: 3em;
		font-weight: 300;
	}

		.nosotros > .full-width h1,
		.servicios > .full-width h1,
		.sustentabilidad > .full-width h1,
		.trabajo > .full-width h1,
		.contacto > .full-width h1{
			color: #2b2b2b;
			font-family: 'Roboto Slab', serif;
			font-size: 3em;
			font-weight: 300;
		}
			.trabajo > .full-width h1{
				color: #fff !important;
			}

	.nosotros > .full-width-image h2,
	.servicios > .full-width-image h2,
	.sustentabilidad > .full-width-image h2,
	.trabajo > .full-width-image h2,
	.contacto > .full-width-image h2 {
		font-family: 'Roboto Slab', serif;
		font-size: 1.7em;
		color: #DFDFDF;
		text-transform: uppercase;
	}
		
		.nosotros > .full-width h2,
		.servicios > .full-width h2,
		.sustentabilidad > .full-width h2,
		.trabajo > .full-width h2,
		.contacto > .full-width h2 {
			font-family: 'Roboto Slab', serif;
			font-size: 1.7em;
			color: #607436;
			text-transform: uppercase;
		}

			.trabajo > .full-width h2{
				color: #DFDFDF !important;
			}

	.servicios > .full-width-image p{
		font-family: 'Open Sans Condensed', sans-serif;
		color: #7a7a7a;
		font-size: 1.55em;
	}


/****************************

MESSAGE BANNER

*****************************/

	.banner-message {
		background: url(../img/secciones-portadas/sustentabilidad-fondo.jpg) center center;
		background-size: cover;
		text-align: center;
		padding: 10em 0;
	}

		.banner-message h1{
			font-family: 'Open Sans Condensed', sans-serif;
		}

		.banner-message h1 {
			color:  white;
			font-size: 3em;
			line-height: 110%;
		}

		.banner-message h2 {
			font-family: 'Roboto Slab', serif;
			font-size: 1.2em;
			color: #dadada;
		}
/**********************************

PORTADA

***********************************/

.portada{
	position: relative;
	height: 100%;
	width: 100%;
}
	.portada > #textfade > .page-content-home{
	  	position: absolute;
		top: 0;
		bottom: 0;
		margin-top: auto;
		margin-bottom: auto;
		width: auto;
		height: 150px;
		z-index: 1;
		right: 0;
		left: 0;
		/*right: 20px;
		left: 20px;*/
	}
		.portada > #textfade > .page-content-home >h1{
			color: #E9E9E9;
			font-family: 'Roboto Slab', serif;
			font-weight: 700;
			font-size: 6vw;
			letter-spacing: 3px;
  			line-height: 95%;
		}
		.portada > #textfade > .page-content-home >h2{
			font-family: 'Roboto Slab', serif;
			color: #B2B263;
		}

			.portada > #textfade > .page-content-home h2{
				font-family: 'Roboto Slab', serif;
				font-size: 2em;
				color: #fff;
				/*color: #B2B263;*/
				margin-top: 10px;
				text-align: center;
			}

		.portada > #textfade > .page-content-home >p{
			font-family: 'Open Sans Condensed', sans-serif;
			color: #ffffff;
			font-weight: 300;
		}
			.portada > #textfade > .page-content-home p{
				font-family: 'Open Sans Condensed', sans-serif;
				color: #ffffff;
				font-weight: 300;
				text-align: center;
			}
		
		.portada > #supersized-loader  { 
			height: 100px;
			width: 100px;
			position: fixed;
			background: #fff url(../img/loader.gif) no-repeat center center;
			width: 100%;
			height: 100%;
		}
  
		.portada > #supersized {
			display:block;
			position:absolute;
			padding: 0;
			left:0;
			top:0;
			overflow:hidden;
			z-index:-999;
			height:100%;
			width:100%; 
		}

		.portada > #supersized img { 
			width:auto;
			height:auto;
			position:relative;
			display:none;
			outline:none;
			border:none;
			max-width: inherit !important;
			margin: 0 auto !important; 
		}

		.portada > #supersized.speed img { 
			-ms-interpolation-mode:nearest-neighbor;
			image-rendering: -moz-crisp-edges; 
			} /*Speed*/

		.portada > #supersized.quality img { 
			-ms-interpolation-mode:bicubic; 
			image-rendering: optimizeQuality; 
		}     /*Quality*/

		.portada > #supersized li { 
			display:block;
			list-style:none;
			z-index:-30;
			/*position:fixed;*/
			position: absolute;
			overflow:hidden;
			top:0;
			width:100%;
			height:100%;
			background:#111
		}

		.portada > #supersized a { 
			width:100%;
			height:100%;
			display:block;
		}

		.portada > #supersized li.prevslide { 
			z-index:-20; 
		}

		.portada > #supersized li.activeslide { 
			z-index:-10; 
		}

		.portada > #supersized li.image-loading { 
			visibility:hidden;
		}

		.portada > #supersized li.image-loading img{ 
			visibility:hidden;
		}

		.portada > #supersized li.prevslide img, #supersized li.activeslide img{ 
			display:inline;
		}

/**********************************

SECCIONES GENERAL

***********************************/

.section-content {
	padding-top: 3em;
	padding-bottom: 4em;
}
	
	.section-content.sustentabilidad {
		display: inline-block;
	}

.nosotros .container,
.servicios .container,
.trabajo .container,
.sustentabilidad .container,
.contacto .container{
	padding-left: 2em;
	padding-right: 2em;

}

.servicios {
	background: url(../img/cream_pixels.png);
}

.nosotros, .sustentabilidad {
	background-color: white;
}

.trabajo {
	background: url(../img/pw_maze_black.png);
}

.contacto {
	background: url(../img/cream_pixels.png);
}

	/**********************************

	SECCIONES ESPECIFICAS

	***********************************/
	
	/* NOSOTROS */
	
	.nosotros .section-content > h1{
		font-family: 'Roboto Slab', serif;
		font-size: 28px;
		color: #4B622C;
	}

	.nosotros .section-content > p{
		font-family: 'Open Sans Condensed', sans-serif;
		color: #7a7a7a;
		font-size: 1.5em;
		padding-bottom: 25px;
		text-align: justify;
	}

	.nosotros .section-content > .logo-gris{
		/*opacity: 0.2;*/
	}

	/* SERVICIOS */

	.servicios .servicio{
		padding-bottom: 2em;
	}

		.servicios .servicio > .servicio-img{
			position: relative;
		}

		.servicios .servicio > .servicio-img > .servicio-tipo{
			background-color: rgba(0, 0 ,0 ,0.4);
			bottom: 0;
			color: #EDECEC;
			left: 0;
			padding: 10px;
			position: absolute;
		}

			.servicios .servicio > .servicio-img > .servicio-tipo h1,
			.servicios .servicio > .servicio-img > .servicio-tipo h2{
				font-family: 'Roboto Slab', serif;
				font-weight: 300;
				margin: 0;
			}

			.servicios .servicio > .servicio-img > .servicio-tipo h1{
				font-size: 20px;
			}

			.servicios .servicio > .servicio-img > .servicio-tipo h2{
				font-size: 15px;
				margin-bottom: 5px;
			}

			.servicios .servicio .servicio-explicacion > p {
				font-family: 'Open Sans Condensed', sans-serif;
				color: #474747;
				font-size: 1.2em;
				padding: 1em 1em 0em 1em;
				text-align: justify;
			}

			.servicios .servicio .servicio-explicacion .ejemplos > a.link-galeria{
				color: #B2B263;
				font-size: 1.3em;
				padding: 1em 1em 0em 1em;
				font-family: 'Open Sans Condensed', sans-serif;
				text-decoration: none;
			}
	
	/* SUSTENTABILIDAD */

	.sustentabilidad .section-content > div h1 { 
		font-family: 'Roboto Slab', serif;
		font-size:  1.7em;
		color: #4B622C;
	}

	.sustentabilidad .section-content > div p {
		font-family: 'Open Sans Condensed', sans-serif;
		color: #474747;
		font-size: 1.25em;
		text-align: justify;
	}
	
	/* TRABAJO */


	#container-trabajo {
	    margin-left: 13px;
	    margin-right: 13px;
	}

		#container-trabajo .item-trabajo.col-sm-4{
		    padding:0px 5px;
		}

	#container-trabajo > .trabajos {
	    margin: 0;
	    padding: 0;
	}
			#container-trabajo > .trabajos li {
			    margin-bottom: 20px;
			    list-style: none;
			}

	.trabajos > .item-trabajo {
	    position: relative;
	    overflow: hidden;
	}

		.trabajos > .item-trabajo .item-container {
/*			background-color: #323232;*/
		    padding: 10px 10px 20px 10px;
		}

		.trabajos > .item-trabajo .item-image {
		    position: relative;
		    overflow: hidden;
		    width: 100%;
		    height: 100%;
		}

			.trabajos > .item-trabajo .item-image .item-overlay {
			    display: block;
			    background-color: rgba(178, 178, 99, 0.8);
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0px;
				top: 0px;
				text-align: center;
				color: #FFF;
				line-height: 220px;
				opacity: 0;
				-webkit-backface-visibility: hidden;
				transition: opacity 0.4s;
				-webkit-transition: opacity 0.4s;
			}
				.trabajos > .item-trabajo .item-image .item-overlay i{
				    font-size: 45px;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					width: 45px;
					height: 45px;
					margin: auto;
				}

					.trabajos > .item-trabajo .item-image:hover .item-overlay {
				    	opacity: 1;
		  				filter: alpha(opacity=100);
					}

	.item-trabajo .item-image img {
	    position: relative;
	    width: 100%;
	}

	.trabajos > .item-trabajo .item-description {
	    text-align: center;
		width: 100%;
	}

	.item-trabajo .item-title h1 {
	    font-weight: 300;
	    font-family: 'Roboto Slab', serif;
	    font-size: 18px;
	    margin: 10px 0 0;
	    color: #E2E2E1 !important;
	    letter-spacing: 0;
	    text-transform: uppercase;
	}

	.item-trabajo .item-name h2 {
	    font-weight: 300;
	    font-family: 'Open Sans Condensed', sans-serif;
	    font-size: 16px;
	    margin: 10px 0 0;
	    color: #999;
	    letter-spacing: 0;
	}

	/* CONTACTO */
	
	.contact-info h1{
		color: #272727;
		font-weight: 500;
		font-family: 'Roboto Slab', serif;
		font-size: 25px;
	}

	.contact-info h3{
		color: #323232;
		font-weight: 700;
	    font-family: 'Open Sans Condensed', sans-serif;
		font-size: 16px;
		margin: 5px 0 0;
	}

	.contact-info p{
		color: #323232;
		font-weight: 500;
	    font-family: 'Open Sans Condensed', sans-serif;
		font-size: 16px;
		margin: 5px 0 0;
	}

	.contact-info i{
		color: #B2B263;
	}
	
	.form-control {
		background-color: #E4E4E4;
		border-radius: 0px;
		font-family: 'Open Sans Condensed', sans-serif;
	}

	textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {   
	border-color: #E4E4E4;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset, 0 0 8px rgba(0, 0, 0, 0);
	outline: 0 none;
	}

	.btn-outlined {
	    border-radius: 0;
	    -webkit-transition: all 0.4s;
	       -moz-transition: all 0.4s;
	            transition: all 0.4s;
	}

	.btn-outlined.btn-success {
	    background: #BBD387;
	    border: 3px solid #BBD387;
	    color: #FFF;
	}

	.btn-outlined.btn-success:hover,
	.btn-outlined.btn-success:active {
	    color: #FFF;
	    background: #BBD387;
	}

/****************************

RESPONSIVE

*****************************/

@media (max-width:767px) {
	
	body{
	font-size:100%;
	}
	

	.navbar{
		display: block;
	}

	#wrapper {
	  padding-left: 0;
	}

	#sidebar-wrapper {
	  left: 0;
	}

	#wrapper.active {
	  position: relative;
	  left: 250px;
	}

	#wrapper.active #sidebar-wrapper {
	  left: 250px;
	  width: 250px;
	  transition: all 0.4s ease 0s;
	}

	#menu-toggle {
	  display: inline-block;
	}

	.nosotros .container,
	.servicios .container,
	.trabajo .container,
	.sustentabilidad .container,
	.contacto .container{
		padding-left: 3em;
		padding-right: 3em;
	}

	.nosotros > .full-width-image h1,
	.servicios > .full-width-image h1,
	.sustentabilidad > .full-width-image h1,
	.trabajo > .full-width-image h1,
	.contacto > .full-width-image h1{
		font-size: 2.5em;
	}

		.nosotros > .full-width h1,
		.servicios > .full-width h1,
		.sustentabilidad > .full-width h1,
		.trabajo > .full-width h1,
		.contacto > .full-width h1{
			font-size: 2.5em;
		}
			.trabajo > .full-width h1{
				color: #fff !important;
			}
	.servicios .servicio .servicio-explicacion > p {
		font-size: 1.45em;
	}

	.sustentabilidad .section-content > div p {
		font-size: 1.45em;
	}

}