/* generales */

body, h2
{
	font-family: 'Lato', sans-serif;
}

h1
{
	color:#f78e1d;
	font-size:4em;
	font-weight:bold;
	
}

p
{
	color:#717174;
	font-size:1.2em;
	line-height:1.5em;
}

.logo
{
	margin:15px 25px 15px 25px;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.achicarLogo
{
	margin:0;
	max-width:70%;
}

.achicar
{
	padding:0;
}




/*slider*/

.slider
{
	padding:0;
	margin-top:106px;
}




/*quienes somos*/

#quienes-somos
{
	margin:70px 0 70px 0;
}

#quienes-somos h1
{
	margin-bottom:40px;
}


/*que hacemos*/

.que-hacemos
{
	background:#f78e1d;
	height:250px;
	width:100%;
}

.que-hacemos h1
{
	color:#fff;
	font-weight:bold;
	padding:60px 10px 10px 20px;
}

.diseno
{
	background:#717174;
	height:250px;
	margin-top:30px;
	width:100%;
}

.diseno h1, .interactive h1, .arquitectura h1, .activaciones h1, .eventos h1
{
	font-size:2.8em;
	padding:10px 10px 10px 20px;
	font-weight:normal;
}

.diseno p
{
	color:#fff;
	font-size:1em;
	padding-left:20px;
}

.interactive, .arquitectura
{
	border:1px solid #717174;
	height:250px;
	margin-top:30px;
	width:100%;
}

.interactive p, .arquitectura p, .activaciones p, .eventos p
{
	font-size:1em;
	padding-left:20px;
}

.activaciones, .eventos
{
	background:#dcddde;
	height:250px;
	margin-top:30px;
	width:100%;
}



/*trabajos*/

#trabajos
{
	margin-top:70px;
	margin-bottom:50px;
}

.trabajos
{
	margin:20px 0 0 0;
}

.trabajoItem
{
	margin-bottom:20px;
}


.trabajoItem img
{
	max-width:100%;
}



/*hover effect*/
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
border:1px solid #f78e1d;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(223,141,46,0.5);
-webkit-transition:all .4s ease;
transition:all .4s ease;
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s ease;
transition:all .4s ease;
}

.hovereffect h2 {
color:#fff;
text-align:center;
position:relative;
font-size:1.3em;
background:rgba(223,141,46,1);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s;
transition:all .2s;
padding:10px;
}

.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect:hover h2 {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}



/* galeria */
/* box sizing */

*,
*::before,
*::after,
input[type='search'] /* see normalize.css */
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* killing 300ms touch delay */

html
{
	-ms-touch-action: manipulation;
	touch-action: manipulation;
}


button,
input[type='submit']
{
	border: none;
	background-color: transparent;
}

		/* IMAGE LIGHTBOX SELECTOR */

		#imagelightbox
		{
			cursor: pointer;
			position: fixed;
			z-index: 10000;

			-ms-touch-action: none;
			touch-action: none;

			
		}


		/* ACTIVITY INDICATION */

		#imagelightbox-loading,
		#imagelightbox-loading div
		{
			border-radius: 50%;
		}
		#imagelightbox-loading
		{
			width: 2.5em; /* 40 */
			height: 2.5em; /* 40 */
			background-color: #444;
			background-color: rgba( 0, 0, 0, .5 );
			position: fixed;
			z-index: 10003;
			top: 50%;
			left: 50%;
			padding: 0.625em; /* 10 */
			margin: -1.25em 0 0 -1.25em; /* 20 */

		}
			#imagelightbox-loading div
			{
				width: 1.25em; /* 20 */
				height: 1.25em; /* 20 */
				background-color: #fff;

				-webkit-animation: imagelightbox-loading .5s ease infinite;
				animation: imagelightbox-loading .5s ease infinite;
			}

			@-webkit-keyframes imagelightbox-loading
			{
				from { opacity: .5;	-webkit-transform: scale( .75 ); }
				50%	 { opacity: 1;	-webkit-transform: scale( 1 ); }
				to	 { opacity: .5;	-webkit-transform: scale( .75 ); }
			}
			@keyframes imagelightbox-loading
			{
				from { opacity: .5;	transform: scale( .75 ); }
				50%	 { opacity: 1;	transform: scale( 1 ); }
				to	 { opacity: .5;	transform: scale( .75 ); }
			}


		/* OVERLAY */

		#imagelightbox-overlay
		{
			background-color: #df8d2e;
			background-color: rgba( 223, 141, 46, .9 );
			position: fixed;
			z-index: 9998;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}


		/* "CLOSE" BUTTON */

		#imagelightbox-close
		{
			width: 2.5em; /* 40 */
			height: 2.5em; /* 40 */
			text-align: left;
			background-color: #706f72;
			border-radius: 50%;
			position: fixed;
			z-index: 10002;
			top: 2.5em; /* 40 */
			right: 2.5em; /* 40 */
			cursor:pointer;

			-webkit-transition: background-color .5s;
			transition: background-color .5s;
		}
		#imagelightbox-close:hover,
		#imagelightbox-close:focus { background-color: #898b8c; -webkit-transition: background-color .5s;
			transition: background-color .5s;}

			#imagelightbox-close:before,
			#imagelightbox-close:after
			{
				width: 2px;
				background-color: #fff;
				content: '';
				position: absolute;
				top: 20%;
				bottom: 20%;
				left: 50%;
				margin-left: -1px;
			}
			#imagelightbox-close:before
			{
				-webkit-transform: rotate( 45deg );
				-ms-transform: rotate( 45deg );
				transform: rotate( 45deg );
			}
			#imagelightbox-close:after
			{
				-webkit-transform: rotate( -45deg );
				-ms-transform: rotate( -45deg );
				transform: rotate( -45deg );
			}


		/* CAPTION */

		#imagelightbox-caption
		{
			text-align: center;
			color: #fff;
			background-color: #706f72;
			position: fixed;
			z-index: 10001;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0.625em; /* 10 */
		}


		/* NAVIGATION */

		#imagelightbox-nav
		{
			background-color: #444;
			background-color: rgba( 0, 0, 0, .5 );
			border-radius: 20px;
			position: fixed;
			z-index: 10001;
			left: 50%;
			bottom: 3.75em; /* 60 */
			padding: 0.313em; /* 5 */

			-webkit-transform: translateX( -50% );
			-ms-transform: translateX( -50% );
			transform: translateX( -50% );
		}
			#imagelightbox-nav button
			{
				width: 1em; /* 20 */
				height: 1em; /* 20 */
				background-color: transparent;
				border: 1px solid #fff;
				border-radius: 50%;
				display: inline-block;
				margin: 0 0.313em; /* 5 */
			}
			#imagelightbox-nav button.active
			{
				background-color: #fff;
			}


		/* ARROWS */

		.imagelightbox-arrow
		{
			width: 3.75em; /* 60 */
			height: 7.5em; /* 120 */
			background-color: #706f72;
			background-color: rgba( 112, 111, 114, .75 );
			vertical-align: middle;
			display: none;
			position: fixed;
			z-index: 10001;
			top: 50%;
			margin-top: -3.75em; /* 60 */
			cursor:pointer;
			-webkit-transition: background-color .5s;
			transition: background-color .5s;
		}
		.imagelightbox-arrow:hover,
		.imagelightbox-arrow:focus	{ background-color: rgba( 112, 111, 114, 1 ); }
		.imagelightbox-arrow:active { background-color: #898b8c; -webkit-transition: background-color .5s;
			transition: background-color .5s; }

			.imagelightbox-arrow-left	{ left: 2.5em; /* 40 */ }
			.imagelightbox-arrow-right	{ right: 2.5em; /* 40 */ }

			.imagelightbox-arrow:before
			{
				width: 0;
				height: 0;
				border: 1em solid transparent;
				content: '';
				display: inline-block;
				margin-bottom: -0.125em; /* 2 */
			}
				.imagelightbox-arrow-left:before
				{
					border-left: none;
					border-right-color: #fff;
					margin-left: -0.313em; /* 5 */
				}
				.imagelightbox-arrow-right:before
				{
					border-right: none;
					border-left-color: #fff;
					margin-right: -0.313em; /* 5 */
				}

		#imagelightbox-loading,
		#imagelightbox-overlay,
		#imagelightbox-close,
		#imagelightbox-caption,
		#imagelightbox-nav,
		.imagelightbox-arrow
		{
			-webkit-animation: fade-in .25s linear;
			animation: fade-in .25s linear;
		}
			@-webkit-keyframes fade-in
			{
				from	{ opacity: 0; }
				to		{ opacity: 1; }
			}
			@keyframes fade-in
			{
				from	{ opacity: 0; }
				to		{ opacity: 1; }
			}

		@media only screen and (max-width: 41.250em) /* 660 */
		{
			#container
			{
				width: 100%;
			}
			#imagelightbox-close
			{
				top: 1.25em; /* 20 */
				right: 1.25em; /* 20 */
			}
			#imagelightbox-nav
			{
				bottom: 1.25em; /* 20 */
			}

			.imagelightbox-arrow
			{
				width: 2.5em; /* 40 */
				height: 3.75em; /* 60 */
				margin-top: -2.75em; /* 30 */
			}
			.imagelightbox-arrow-left	{ left: 1.25em; /* 20 */ }
			.imagelightbox-arrow-right	{ right: 1.25em; /* 20 */ }
		}

		@media only screen and (max-width: 20em) /* 320 */
		{
			.imagelightbox-arrow-left	{ left: 0; }
			.imagelightbox-arrow-right	{ right: 0; }
		}



/*clientes*/

#clientes
{
	margin-top:50px;
	margin-bottom:30px;
}

.clientes div
{
	margin-bottom:20px;
}

.clientes div img
{
	max-width:100%;
}

.clientesIzquierda, .clientesCentro, .clientesDerecha
{
	text-align:center;
}


/*contacto*/

#contacto
{
	margin:30px 0 30px 0;
}

.contactoInfo, div.contactomail
{
	background:#717174;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

.contactoInfo p
{
	color:#fff;
	font-size:2.3em;
}

div.contactomail:hover
{
	background:#f78e1d;
	text-decoration:none;
}

.contactoInfo p a:link, .contactoInfo p a:visited 
{
	color:#fff;
	display:block;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

.contactoInfo p a:hover
{
	text-decoration:none;
}

.redesSociales
{
	margin-top:10px;
	padding-left:15px;
}

.redesSociales img
{
	background:#717174;
	margin-right:10px;
	-webkit-transition: background 0.4s;
	transition: background 0.4s;

}

.redesSociales img:hover, .redesSociales img:focus
{
	background:#f78e1d;
}



@media (min-width: 576px) { ... }


@media (min-width: 768px) { ... }


@media (min-width: 992px) {
	
	/*menu*/
	#mainNavbar li a
	{
		border-right:1px solid #df8d2e;
		color:#717174;
	}

	.primerLink
	{
		border-left:1px solid #df8d2e;
	}

	.nav-fill .nav-item
	{
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	/*que hacemos*/

	.que-hacemos
	{
		float:left;
		margin-right:3.5%;
		width:31%;
	}

	.diseno
	{
		float:left;
		margin-right:3.5%;
		margin-top:0;
		width:31%;
	}

	.interactiveArquitectura
	{
		border:1px solid #717174;
		float:right;
		width:31%;
	}

	.interactive, .arquitectura{
		border:none;
		margin-top:0;
	}

	.activaciones, .eventos
	{
		float:left;
		width:32.75%;
	}

	.eventos p, .eventos h1
	{
		padding-left:10%;
	}



	/*clientes*/

	.clientesIzquierda
	{
		text-align:left;
	}
	.clientesCentro
	{
		text-align:center;
	}

	.clientesDerecha
	{
		text-align:right;
	}
}


@media (min-width: 1200px) { ... }