@charset "utf-8";
/* Author: Danny Yataco */

header,nav,section,aside,article,figure,footer{
	display:block;
}

.cajatexto{
	font-family: 'Ubuntu Condensed', sans-serif;
	font-size:16px;
	color:#FFFFFF;
	text-align:justify;
}

h2{
	font-family: 'Oswald', serif;
	font-size:24px;
	font-weight:bold;
	color:#FF00FF;
}

body{
	margin:0;
	background:url(../imagenes/fondo.jpg) top  center fixed;
}

#contenedorquienessomos{
	width:920px;
	background:url(../imagenes/pie-index-2.png);
	margin:0 auto;
	padding-bottom:20px;
}

#contenedorlargo{
	width:920px;
	background:url(../imagenes/pie-index-2.png);
	margin:0 auto;
	padding-bottom:20px;
}

#contenedorproyectos{
	width:920px;
	background:url(../imagenes/pie-index-2.png);
	margin:0 auto;
	padding-bottom:20px;
}

#pie{
	width:100%;
	height:98px;
	background:#94BB10;
	margin:0 auto;
	padding-top:10px;
}

#cabecera{
	width:100%;
	height:210px;
	margin:0 auto;
}

#logo-ana{
	width:186px;
	height:200px;
	margin:0 auto;
	display:block;
	padding:0;
}

#banner{
	width:920px;
	height:295px;
	margin:0 auto;
	margin-top:20px;
	display:block;
	padding:0;
}

#titulo{
	width:840px;
	height:40px;
	margin:0 auto;
	margin-top:30px;
	display:block;
	padding:0;
}

#caja{
	width:840px;
	height:220px;
	margin:0 auto;
	margin-top:10px;
	margin-bottom:70px;
	display:block;
	padding-top:20px;
}

#caja-quienes{
	width:840px;
	height:370px;
	margin:0 auto;
	margin-top:10px;
	margin-bottom:70px;
	display:block;
	padding-top:20px;
}

#caja-texto{
	width:500px;
	height:160px;
	margin:0 auto;
	float:left;
	display:block;
	padding:0;
}

#caja-texto-quienes{
	width:500px;
	height:360px;
	margin:0 auto;
	float:left;
	display:block;
	padding:0;
}

#caja-imagen{
	width:270px;
	height:200px;
	margin:0 auto;
	float:right;
	display:block;
	padding:0;
}

#caja-imagen-quienes{
	width:270px;
	height:200px;
	margin:0 auto;
	margin-top:60px;
	float:right;
	display:block;
	padding:0;
}

#fotosgrandes{
	display:none;
}


#caja-pie{
	width:880px;
	height:80px;
	margin:0 auto;
	display:block;
	padding:0;
}

#pie-izq{
	width:450px;
	height:80px;
	margin:0 auto;
	display:block;
	padding:0;
	float:left;
}

#pie-der{
	width:190px;
	height:70px;
	margin:0 auto;
	display:block;
	padding-top:12px;
	padding-left:40px;
	float:right;
}

#pie-der ul{
	margin:0;
	padding:0;
	list-style:none;
}

#pie-der li a{
	width:139px;
	height:45px;
	text-indent:-8000px;
	display:block;
	background:url(../imagenes/megusta.png);
}

#pie-der li a:hover{
	background-position:-139px;
}

#logos-empresas{
	width:852px;
	height:380px;
	display:block;
	margin:0 auto;
}

#texto-proyectos{
	width:840px;
	height:120px;
	margin:0 auto;
}

#proyecto-visor{
	width:852px;
	height:330px;
	display:block;
	margin:0 auto;
}

#proyecto-visor ul{
	margin:0;
	padding:0;
	list-style:none;
}

#proyecto-visor li{
	width:150px;
	height:130px;
	margin:10px;
	display:inline;
	float:left;
}
#empresas{
	
}

#celulares{
	display:none;
}

#loslogos{
	width:600px;
	height:90px;
	margin:0 auto;
	padding:0;
	display:block;
}

#logos-chicos{
	display:none;
}

#logosarriba{
	width:560px;
	height:40px;
	margin:0 auto;
	margin-bottom:4px;
	padding:0;
	display:block;
}

#logosarriba ul{
	margin:0;
	padding:0;
	list-style:none;
}

#logosarriba li a.magdalena{
	width:55px;
	height:38px;
	float:left;
	text-indent:-8000px;
	background:url(../imagenes/magdalena1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosarriba li a:hover.magdalena{
	background:url(../imagenes/magdalena2.svg);
}

#logosarriba li a.rambla{
	width:76px;
	height:38px;
	float:left;
	text-indent:-8000px;
	margin-left:15px;
	background:url(../imagenes/rambla1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosarriba li a:hover.rambla{
	background:url(../imagenes/rambla2.svg);
}

#logosarriba li a.lap{
	width:72px;
	height:38px;
	float:left;
	text-indent:-8000px;
	margin-left:15px;
	background:url(../imagenes/lap1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosarriba li a:hover.lap{
	background:url(../imagenes/lap2.svg);
}

#logosarriba li a.megaplaza{
	width:98px;
	height:38px;
	float:left;
	text-indent:-8000px;
	margin-left:15px;
	background:url(../imagenes/megaplaza1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosarriba li a:hover.megaplaza{
	background:url(../imagenes/megaplaza2.svg);
}

#logosarriba li a.realplaza{
	width:58px;
	height:38px;
	float:left;
	text-indent:-8000px;
	margin-left:15px;
	background:url(../imagenes/realplaza1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosarriba li a:hover.realplaza{
	background:url(../imagenes/realplaza2.svg);
}

#logosarriba li a.sanmiguel{
	width:58px;
	height:38px;
	float:left;
	text-indent:-8000px;
	margin-left:15px;
	background:url(../imagenes/sanmiguel1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosarriba li a:hover.sanmiguel{
	background:url(../imagenes/sanmiguel2.svg);
}

#logosarriba li a.elquinde{
	width:48px;
	height:38px;
	float:left;
	text-indent:-8000px;
	margin-left:15px;
	background:url(../imagenes/quinde1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosarriba li a:hover.elquinde{
	background:url(../imagenes/quinde2.svg);
}

#logosabajo{
	width:560px;
	height:40px;
	margin:0 auto;
	padding:0;
	display:block;
}

#logosabajo ul{
	margin:0;
	padding:0;
	list-style:none;
}

#logosabajo li a.open{
	width:80px;
	height:38px;
	float:left;
	text-indent:-8000px;
	background:url(../imagenes/open1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosabajo li a:hover.open{
	background:url(../imagenes/open2.svg);
}

#logosabajo li a.plazasanmiguel{
	width:80px;
	height:38px;
	float:left;
	text-indent:-8000px;
	margin-left:5px;
	background:url(../imagenes/plazasanmiguel1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosabajo li a:hover.plazasanmiguel{
	background:url(../imagenes/plazasanmiguel2.svg);
}

#logosabajo li a.map{
	width:80px;
	height:38px;
	float:left;
	text-indent:-8000px;
	margin-left:5px;
	background:url(../imagenes/map1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosabajo li a:hover.map{
	background:url(../imagenes/map2.svg);
}

#logosabajo li a.protisa{
	width:34px;
	height:38px;
	float:left;
	text-indent:-8000px;
	margin-left:10px;
	background:url(../imagenes/protisa1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosabajo li a:hover.protisa{
	background:url(../imagenes/protisa2.svg);
}

#logosabajo li a.lambramani{
	width:160px;
	height:38px;
	float:left;
	text-indent:-8000px;
	margin-left:5px;
	background:url(../imagenes/lambramani1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosabajo li a:hover.lambramani{
	background:url(../imagenes/lambramani2.svg);
}

#logosabajo li a.larcomar{
	width:96px;
	height:38px;
	float:left;
	text-indent:-8000px;
	background:url(../imagenes/larcomar1.svg);
	-webkit-transition:background 0.5s ease 0s;
     -moz-transition:background 0.5s ease 0s;
          transition:background 0.5s ease 0s;
}

#logosabajo li a:hover.larcomar{
	background:url(../imagenes/larcomar2.svg);
}

@media only screen and (max-width: 800px){

#contenedorquienessomos{
	width:780px;
	margin:0 auto;
	padding:0;
}

#contenedorlargo{
	width:780px;
	height:auto;
	margin:0 auto;
	padding:0;
}

#contenedorproyectos{
	width:780px;
	margin:0 auto;
	padding:0;
}

#pie{
	width:780px;
}

#banner{
	width:760px;
	height:260px;
}

#titulo{
	width:780px;
	height:40px;
	text-align:center;
}

#caja{
	width:780px;
	height:400px;
	margin-bottom:20px;
}

#caja-quienes{
	width:780px;
	height:680px;
}

#caja-texto{
	float:none;
	margin-bottom:20px;
}

#caja-texto-quienes{
	float:none;
	margin-bottom:20px;
}

#caja-imagen{
	float:none;
}

#caja-imagen-quienes{
	float:none;
}

#caja-pie{
	width:700px;
}

#empresas{
	width:120px;
	height:104px;
}

#texto-proyectos{
	width:680px;
	height:120px;
	margin:0 auto;
}

#logos-empresas{
	width:710px;
	height:400px;
}

#proyecto-visor{
	display:none;
}

#fotosgrandes{
	display:block;
	width:85%;
	margin: 0 auto;
}

}


@media only screen and (max-width: 720px){

#contenedorquienessomos{
	width:700px;
	margin:0 auto;
	padding:0;
}

#contenedorlargo{
	width:700px;
	margin:0 auto;
	padding:0;
}

#contenedorproyectos{
	width:700px;
}

#logos-empresas{
	display:none;
}

#titulo{
	width:680px;
}

#pie-der{
	display:none;
}


#pie{
	width:700px;
	height:200px;
}

#banner{
	width:680px;
	height:240px;
}

#texto-proyectos{
	width:640px;
	height:120px;
	margin:0 auto;
}

#caja{
	width:680px;
	height:400px;
}

#caja-quienes{
	width:680px;
	height:680px;
}

#caja-pie{
	width:680px;
	height:170px;
}

#pie-izq{
	width:450px;
	height:100px;
	text-align:center;
	padding:0;
	float:none;
}

#celulares{
	width:450px;
	height:70px;
	margin:0 auto;
	display:block;
}

#celulares ul{
	margin:0;
	padding:0;
	list-style:none;
}

#celulares li a.ana{
	width:200px;
	height:70px;
	float:left;
	margin-right:30px;
	background:url(../imagenes/cel-ana.png);
	text-indent:-8000px;
	display:block;
}

#celulares li a.ana:hover{
	background-position:-200px;
}

#celulares li a.gabriela{
	width:200px;
	height:70px;
	float:left;
	background:url(../imagenes/cel-gabriela.png);
	text-indent:-8000px;
	display:block;
}

#celulares li a.gabriela:hover{
	background-position:-200px;
}

}


@media only screen and (max-width: 600px){

#loslogos{
	display:none;
}

#logos-chicos{
	width:380px;
	height:57px;
	margin:0 auto;
	margin-top:20px;
	margin-bottom:20px;
	padding:0;
	display:block;
}

#contenedorquienessomos{
	width:580px;
	margin:0 auto;
	padding:0;
}

#contenedorproyectos{
	width:580px;
}

#pie{
	width:580px;
}

#titulo{
	width:580px;
}

#caja{
	width:580px;
}

#caja-quienes{
	width:580px;
}

#banner{
	width:580px;
	height:190px;
}

#caja-pie{
	width:100%;
}



#contenedorlargo{
	width:580px;
}

#texto-proyectos{
	width:540px;
}

}


@media only screen and (max-width: 480px){

h2{
	font-size:20px;
}


#contenedorquienessomos{
	width:460px;
}

#contenedorproyectos{
	width:460px;
}

#contenedorlargo{
	width:460px;
}

#pie{
	width:460px;
}

#titulo{
	width:460px;
}

#banner{
	width:440px;
	height:150px;
}

#texto-proyectos{
	width:400px;
}


#logos-empresas{
	width:430px;
	height:330px;
}

#caja{
	width:450px;
	height:450px;
}

#caja-quienes{
	width:450px;
}

#caja-texto{
	width:410px;
	height:180px;
}

#caja-texto-quienes{
	width:410px;
	height:360px;
}

#logos-chicos{
	width:305px;
	height:46px;
}

}


@media only screen and (max-width: 400px){

#contenedorquienessomos{
	width:380px;
}

#contenedorproyectos{
	width:380px;
}

#contenedorlargo{
	width:380px;
}

#texto-proyectos{
	width:330px;
	height:174px;
}

#titulo{
	width:340px;
}

#logos-empresas{
	width:286px;
	height:400px;
}

#pie{
	width:380px;
	height:280px;
}

#banner{
	width:380px;
	height:120px;
}

#caja-pie{
	width:100%;
	height:270px;
}

#pie-izq{
	width:380px;
}


#caja{
	width:380px;
	height:490px;
}

#caja-quienes{
	width:380px;
	height:750px;
}

#caja-texto{
	width:330px;
	height:240px;
}

#caja-texto-quienes{
	width:330px;
	height:440px;
}

#celulares li a.ana{
	width:200px;
	height:70px;
	float:none;
	margin:0 auto;
	margin-bottom:10px;
}

#celulares li a.gabriela{
	width:200px;
	height:70px;
	float:none;
	margin:0 auto;
}

#celulares{
	width:330px;
	height:160px;
}

#logos-chicos{
	display:none;
}

}

@media only screen and (max-width: 320px){


#contenedorlargo{
	width:300px;
}

#contenedorquienessomos{
	width:300px;
}

#contenedorproyectos{
	width:300px;
}

#texto-proyectos{
	width:300px;
	height:174px;
}

#titulo{
	width:300px;
}

#pie{
	width:300px;
	height:300px;
}

#caja-pie{
	width:100%;
	height:300px;
}

#pie-izq{
	width:300px;
	height:150px;
}

#banner{
	width:300px;
	height:100px;
}

#celulares{
	width:300px;
}

#caja-texto{
	width:280px;
	height:250px;
}

#caja{
	width:290px;
	height:490px;
}

#caja-texto-quienes{
	width:290px;
	height:480px;
}

#caja-quienes{
	width:290px;
	height:750px;
}
}