@charset "UTF-8";
@import "inicializadores.css";

::selection { background: #FFF466; color: #000;}
::-moz-selection { background: #FFF466; color: #000;}
::-webkit-selection { background: #FFF466; color: #000;}

::-webkit-input-placeholder { color: #000;}
::-moz-placeholder { color: #000; opacity: 1;}
:-ms-input-placeholder { color: #000;}

body { font-family: 'Proxima N W01 At Reg', sans-serif; background-color: #F2F2F2; font-size: 14px; animation: fadein 2s; -moz-animation: fadein 2s; -webkit-animation: fadein 2s; -o-animation: fadein 2s;}

h1, h2, h3, h4, h5, h6, p, ul { line-height: 1.22em;}

h1 { font-size: 1.428em; /*word-break: break-all; word-wrap: break-word;*/}
h1.title { font-size: 2.4em; line-height: 1em; margin-bottom: .2em; font-family: 'Proxima N W01 At Bold', sans-serif; text-transform: uppercase;}
h2 { font-size: 1em;}
h2.title { font-size: 1.428em;}
ul, p { font-size: 1em; margin: 0 0 1.22em 0; list-style: none;}
a, a img { text-decoration: none; color: #000; /*transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in;*/}
em { font-family:'Proxima N W01 At Reg It', sans-serif; font-weight: normal; font-style: normal;}
strong { font-family: 'Proxima N W01 At Bold', sans-serif; font-weight: normal; font-style: normal;}

.mainBox.onSearch { -webkit-filter: blur(20px); -moz-filter: blur(20px); filter: blur(20px);}

.boxSearch { position: absolute; width: 100%; height: 100%; z-index: 500; display: none; opacity: 0;}
	.boxSearch .content { position: relative; z-index: 1;}
	.boxSearch input { display: block; float: left; width: 98%; height: 1.2em; padding-bottom: .2em; margin-bottom: .5em; border-bottom: 5px solid #000; font-size: 5.4em; font-family: 'Proxima N W01 At Reg', sans-serif; color: #000; background: transparent; -webkit-appearance: none;}
	.bgSearch { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #F2F2F2; opacity: .80; z-index: 0; cursor: pointer;}
	.btnClose { position: absolute; top: 10em; right: 2%; width: 1.8em; height: 1.8em; text-indent: -9999px; background-image: url(../img/btnX.png); background-size: 100%; background-repeat: no-repeat; z-index: 100; cursor: pointer;}
.boxSearch.onSearch { display: block; opacity: 1; animation: fadein 0.2s; -moz-animation: fadein 0.2s; -webkit-animation: fadein 0.2s; -o-animation: fadein 0.2s;}
.boxSearch h2.titBlock { text-transform: uppercase;}
	.colSearchFiles, .colSearchNews, .colSearchPeople, .colSearchProjects, .searchLoading { display: none; opacity: 0;}
	.colSearchFiles.on , .colSearchNews.on, .colSearchPeople.on, .colSearchProjects.on, .searchLoading.on { display: block; opacity: 1; animation: fadein 0.2s; -moz-animation: fadein 0.2s; -webkit-animation: fadein 0.2s; -o-animation: fadein 0.2s;}
	.searchLoading { float: right; width: 32px; height: 32px; font-size: 5.4em; margin-top: -1.8em; margin-right: 2%;}

.header, .footer, .info { right: 0; width: 19%; margin: 0 3%;} /* 25% */
.header { position: fixed; z-index: 10; top: 0; height: 0; padding: 4em 0 11% 0; overflow: visible; text-transform: uppercase;}
	.contentHeader { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
	#logo { float: left; display: block; width: 100%; font-size: 1em; margin: 4em 0 1.22em 0; font-family: 'Proxima N W01 At Bold', sans-serif;}
	#logo a { margin: 0 0 0 -5px; padding: 0 5px .04em 5px; background-color: #FFF466;}
	.menu ul { float: left; width: 100%; list-style: none; margin: 0 0 1.22em 0;}
	.menu ul li { float: left; margin-right: 10%;}
	.menu ul li:last-child { margin-right: 0;}
	.menu a { padding-bottom: .2em; border-bottom: 2px solid #F2F2F2;}
	.menu a.on { border-bottom: 2px solid #000;}
	.btnSearch { position: absolute; top: 10em; left: 0; width: 1.8em; height: 1.8em; text-indent: -9999px; background-image: url(../img/lupa.png); background-size: 100%; background-repeat: no-repeat; cursor: pointer;}
	.btnMenu { display: none;}
.info { position: fixed; z-index: 9; top: 20%; height: 100%; overflow: auto;}
	.infoBox { float: left; padding: 0 1em 0 0;}
		.infoBoxTxt { float: left; width: 100%; margin-bottom: 1em;}
		.infoBoxList h3 strong { text-transform: uppercase; font-family: 'Proxima N W01 At Bold', sans-serif;}
		.infoBoxList ul h3 { margin-bottom: .2em;}
		.infoBoxList ul  { margin-right: 5%; margin-bottom: 0;}
.footer { position: fixed; z-index: 10; bottom: 0; height: 5em;}
	.footer ul { float: left; list-style: none; margin-top: 1.8em;}
	.footer ul li { float: left; margin-right: 1em;}
	.footer li a { display: block; width: 1.6em; height: 1.6em; text-indent: -9999px; background-size: 100%; background-repeat: no-repeat;}
	.footer li a.f { background-image: url(../img/btnFacebook.png);}
	.footer li a.i { background-image: url(../img/btnInstagram.png);}
	.footer li a.t { background-image: url(../img/btnTwitter.png);}
	.footer li a.g { background-image: url(../img/btnGoogle.png);}
    .footer li a.l { background-image: url(../img/btnLinkedin.png);}


/* Contenido */

.content { position: relative; float: right; width: 73%; margin-right: 25%; padding: 4em 0 3em 0; z-index: 1; /*transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; */} /* 75% */
.contentBox { position: relative; float: left; width: 100%;}
.contentBoxMargin { float: left; position: relative; width: 100%; height: 0; padding-bottom: 15%; font-size: 1em;}
.contentBoxMargin span { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.boxRight { float: right; max-width: 98%; margin-right: 2%;}
.boxRight img { max-width: 100%; max-height: 100%;}
.boxPictures .boxCont { position: absolute; bottom: 1.6em; right: 2%; font-size: .8em;}
.boxPicture { width: 93%; height: inherit; text-align: right; float: right;}
.boxPicture .contentBoxMargin { padding-bottom: 0; height: 3em;}
.btnPictures { position: absolute; width: 5%; height: 100px; left: 0; top: 20%;}
	.btnPictures .btnL, .btnPictures .btnR { position: absolute; left: 0; width: 1.8em; height: 1.8em; text-indent: -9999px; background-size: 100%; background-repeat: no-repeat; cursor: pointer;}
	.btnPictures .btnL { background-image: url(../img/arrowL.png); top: 0;}
	.btnPictures .btnR { background-image: url(../img/arrowR.png); top: 2.6em;}

h1.module, h2.module { margin: 0;}
h2.module strong { text-transform: uppercase;}
.news h1.module span.titleTxt { padding: .8em .6em 0em .6em;}
.news h1.module strong { text-transform: uppercase; font-size: 1.6em; line-height: 1em; font-family: 'Proxima N W01 At Bold', sans-serif;}

.txtContModule, .titleTxt, .titleTxt strong, .pTxt, .imgContModule { display: block;}
.txtContModule { position: absolute; width: 100%; height: 100%; z-index: 2; background-color: #FFF; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease;}
	span.titleTxt, span.pTxt { float: left; padding: .8em .6em;}
	span.titleTxt span.pTxt { float: left; padding: .8em 0em;}
	span.titleTxt a, span.pTxt { font-size: .875em;}
	.module2x1 .txtContModule { left: 62%; top: 0;}
	.module1x2 .txtContModule { left: 0; top: 70%;}
	.module1x2.moduleTeam .txtContModule { left: 0; top: 63%;}

.imgContModule { display: block; position: absolute; width: 100%; height: 100%; z-index: 1; overflow: hidden;}
	.module2x1 .imgContModule img, .module3x2 .imgContModule img, .module1x1 .imgContModule img { height: 100%;}
	.module1x2 .imgContModule img { width: 100%;}

.txtTeam {font-size: 0.82em;}
	span.txtTeam { display: block;}
	span.txtCity { text-transform: uppercase;}
	.module2x1 .txtContModule span.titleTxt { width: 34%;} 
	.module2x1 .txtContModule span.pTxt { width: 40%; margin-left: 13%;}
	.module2x1 .txtContModule span.pTxt, 
	.module1x2 .txtContModule span.pTxt { opacity: 0; filter: alpha(opacity=40); transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease;}

.news .txtContModule { background-color: #FFF466;}
	.news .module2x1 .txtContModule { left: 0; top: 0; width: 49%;}
		.news .module2x1 .txtContModule span.titleTxt { width: 90%;} 
		.news .module2x1 span.pTxt { width: 42%; margin-left: 50%;}

.col50 .module3x2 .contModule.boxMap,
.col50 .module3x2 .contModule.boxMap iframe { width: 100%; height: 100%;}
.col50 .module3x2 .contModule.boxMap img{ width: 100%;}
	.txtMap	{ float: left; width: 100%;} 
	.txtMap .pTxt { float: left; padding: .8em .6em;}
	.txtMap .pTxt h2 strong, .txtMap .pTxt h3 strong, h3.boxDownload strong { font-family: 'Proxima N W01 At Bold', sans-serif; text-transform: uppercase;}
	.txtMap .pTxt h2 { margin-bottom: .5em;}
	.txtMap	.pTxtMail .pTxt { padding-left: 0;}
 	.txtMap .pTxt h3 { margin-bottom: .61em;}
	.txtMap	.pTxtMail .h3Direccion { height: 4.88em; margin-bottom: .61em;}

h3.boxDownload { margin-bottom: .8em;}	
.boxDownload a { width: 97%; margin: 0 3% 0 0;}
	.boxDownload a { display: block; float: left; background-color: #FFF466;}
	.boxDownload span.ext { float: left; width: 15%; text-align: center; padding: 2.7em 0 0 0; text-transform: uppercase; font-family: 'Proxima N W01 At Bold', sans-serif; font-size: .9em; background-image: url(../img/iconDownload.png); background-size: 30px auto; background-position: center 1em; background-repeat: no-repeat;}
	.boxDownload span.titleTxt { float: right; width: 78%; padding: .8em 4% 1em 3%; min-height: 2.2em; background: #FFFFFF;}
a.btnLocate { font-size: 14px; margin-left: 10px; background: #FFF; padding: 0 5px;}
a.btnLocate:hover { background-color: #000; color: #FFF;}


/* Filtros */

.boxFiltro { width: 100%; text-transform: uppercase;}
.boxFiltro h1 { float: left; width: 100%;}
.boxFiltro h2 { margin-bottom: .2em; font-family: 'Proxima N W01 At Bold', sans-serif;}
.boxFiltro h1 span { float: left; display: block; width: 35%; padding-right: 2em; background-image: url(../img/arrowB.png); background-size: auto 70%; background-repeat: no-repeat; background-position: right; cursor: pointer;}
.boxFiltro h1 span:hover, .boxFiltro h1 span.on { background-image: url(../img/arrowT.png); }
.boxFiltro .infoBox { display: none;}


/* Grid */

.col { float: left;}
.col.fRight { float: right;}
	.col100 { width: 99%;}
	.col75 { width: 74.25%;}
	.col50 { width: 49.6%;}
	.col25 { width: 24.75%;}
	.col20 { width: 20%;}
	.col66 { width: 66%;}
	.col67 { width: 67%;}
	.col33 { width: 33%;}
	.col16 { width: 16.5%;}
	.col50 .col33 { width: 32.7%;}

.module { float: left; position: relative; width: 100%; height: 0;}
	.module1x1 { padding-bottom: 90%;}
	.module2x1 { padding-bottom: 45%;}
	.module3x2 { padding-bottom: 60%;}
	.module1x2 { padding-bottom: 180%;}
		.contModule { display: block; position: absolute; top: 0; left: 0; background: #FEFEFE; overflow: hidden;}
		.col50 .module3x2 .contModule,
		.col50 .module1x1 .contModule { width: 97.8%; height: 96.8%;}
		.col33 .module1x1 .contModule { width: 96.8%; height: 96.8%;}
		.col33 .module2x1 .contModule, 
		.col50 .module2x1 .contModule { width: 96.8%; height: 93%;}
		.col16 .module1x1 .contModule { width: 94%; height: 93%;}
		.col16 .module1x2 .contModule, 
		.col33 .module1x2 .contModule { width: 94%; height: 96.6%;}	


/* Fixing masonry dinamico trabajos */

.seccion { transition: height 0.3s ease; -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; -o-transition: height 0.3s ease; -ms-transition: height 0.3s ease; }
.moduleCategoria { padding-bottom: 450%;}
.seccion { overflow: hidden; }
.seccion .moduleCategoria { background-color: white; width: 94%; height: 100%;}
.seccion .margenGris { position: absolute; bottom: 0; left: 0; z-index: 3; /* padding-bottom: 5.1%; width: 100%; */  padding-bottom: 6%; width: 94%; background-color: #F2F2F2;}
.separador { height: 1em;}


/* Galeria Trabajo */

.boxPicture { position: absolute; right: 0px; display: none; opacity: 0; /*transition: opacity 0.7s ease; -webkit-transition: opacity 0.7s ease; -moz-transition: opacity 0.7s ease; -o-transition: opacity 0.7s ease; -ms-transition: opacity 0.7s ease; */}
.boxPicture.on { display: block;  opacity: 1; animation: fadein 0.7s; -moz-animation: fadein 0.7s; -webkit-animation: fadein 0.7s; -o-animation: fadein 0.7s;}


/* Animaciones */

@keyframes fadein { from { opacity:0;} to { opacity:1;} }
@-moz-keyframes fadein { from { opacity:0;} to { opacity:1;} }
@-webkit-keyframes fadein { from { opacity:0;} to { opacity:1;} }
@-o-keyframes fadein { from { opacity:0;} to { opacity: 1;} }