/* ------------------------------------------------------------------------------- 
	STYLE RESET
------------------------------------------------------------------------------- */
*{margin:0; padding:0; }
body{border:0; margin:0 0 80px 0; background-color:#000; font:.7em/.9 Arial,Helvetica,sans-serif; color:#000;}
body.loading{background:#333 url(img/loading.gif) no-repeat 30px 30px;}
a{outline:none; text-decoration:none; color:#000;}
a:hover{outline:none; text-decoration:underline;}
a img{border:0;}
ul{list-style:none; list-style-position:outside;}
iframe{ margin:0 0 25px;}

/* ------------------------------------------------------------------------------- 
	BASIC STYLES
------------------------------------------------------------------------------- */
.right{text-align:right;}
.left{text-align:left;}
.center{text-align:center;}

.fright{float:right;}
.fleft{float:left;}
.nofloat{float:none;}

.cleft{clear:left;}
.cright{clear:left;}
.cboth{clear:both;}

.structural{position:absolute;left:-9999px;}

.clearfix:after{content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display: block;}
* html .clearfix {height:1%;}

/* ------------------------------------------------------------------------------- 
	LAYOUT
------------------------------------------------------------------------------- */

/* =footer --------------------------------------------------- */
#footer{clear:both; width:100%; height:47px; background:#000;}
#footer .links{width:947px;}

#footer ul.langnav{float:left; margin:19px 0 0; width:250px; color:#fff; text-align:right;}
#footer ul.langnav li{display:inline; margin:0 7px 0 0; padding:0 8px 0 0; background:url(img/sep-footer.gif) no-repeat right 3px;}
#footer ul.langnav li.last{margin:0; padding:0; background:none;}
#footer ul.langnav a{color:#999;}

#footer ul.social{float:right; margin:14px 0 0 0;}
#footer ul.social li{float:left; margin:0 0 0 15px; display:inline;}
#footer ul.social a{float:left;}
#footer ul.social a:hover img{opacity:.7; filter:alpha(opacity=70);}

/* =container ----------------------------------------------- */
#container{width:948px; margin:0; padding:0; position:relative;}

/* =heading ------------------------------------------------ */
#heading{float:left; margin:88px 0 155px 0; padding:48px 0 0 0; width:283px; background:#000;}
#heading .logo a:hover img{opacity:.7; filter:alpha(opacity=70);}

/* =mainmenu --------------------------------------------------- */
#mainMenu{padding:48px 32px 32px 0; text-align:right;}
#mainMenu li{padding:20px 0 0;}
#mainMenu li ul{padding:5px 0 0;}
#mainMenu li li{padding:7px 0 0;}
#mainMenu li a{color:#fff;}
#mainMenu a.selected{font-weight:bold;}
#mainMenu a:hover{color:#bc0073; text-decoration:none;}
#mainMenu li li a{color:#999;}

/* =blog ------------------------------------------------ */
#blog{float:right;}
#blog a{display:block; width:190px; height:185px; position:relative; color:#000; font-size:3em; text-transform:lowercase; cursor:pointer;}
#blog a span{position:absolute; width:100%; height:100%; background:url(img/branding-blog.gif) no-repeat;}
#blog a:hover span{background-position:0 -185px;}

/* =content & textarea --------------------------------------------------- */
#content{width:570px; float:right; margin:94px 0 155px 0; background:#fff; font-size:1.1em; position:relative;}
#textarea{padding:43px 24px; text-align:right;}
#textarea h1{margin:0 0 20px 0; font: normal 2em/1 Georgia,"Times New Roman",Times,serif;}
#textarea h2{margin:0 0 20px 0; font: normal 1.5em/1 Georgia,"Times New Roman",Times,serif;}
#textarea p{margin:0 0 20px 0; line-height:1.3;}
#textarea p.center{padding:20px 0 30px 0;}
#textarea p.intro,#textarea blockquote{margin:0 0 20px 0; font: italic 1.3em/1.35 Georgia,"Times New Roman",Times,serif;}
#textarea blockquote{margin:25px 0;}

/* =home */
#home #content{margin-top:0; background:none; width:475px}
#home #quote{float:right; width:475px; height:279px; margin:0 0 189px 0; background:#000; color:#fff; text-align:right;}
#home #quote blockquote{padding:30px 42px 20px 42px; font:2em/1.1 Georgia,"Times New Roman",Times,serif;}
#home #quote blockquote span{color:#bc0073; padding:0 5px 0 0; font-weight:bold;}
#home #quote em{padding:0 42px 0 0; color:#bc0073; font:.9em Georgia,"Times New Roman",Times,serif;}
#home #blog{float:left;}

/* =asi somos */
#textarea .trabajador{width:238px; margin:0 0 15px;}
#textarea .trabajador h2{margin:30px 0 5px; font-size:.9em; color:#bc0073;}
#textarea .trabajador p.puesto{margin:0 0 15px; font-size:.9em;}
#textarea .trabajador p.note{font-size:.9em; line-height:1.4; margin:10px 0 0; padding:0;}
img.grupo{margin:0 0 15px;}

/* =como lo hacemos */
.categoriaFases{position:relative; text-align:left; margin:40px 0 0;}
.categoriaFases .fase{margin:0 0 35px 0;}
.categoriaFases .last{margin:0;}
#textarea .categoriaFases .fase h2{margin:0 0 25px 0; font:bold 1.5em Arial,Helvetica,sans-serif;}
#textarea .categoriaFases .fase h2 span{color:#bc0073; font-weight:normal;}
.categoriaFases .fase div.concepto{float:left; display:inline; margin:0 0 0 15px; width:170px; font:normal 1.2em Georgia,"Times New Roman",Times,serif; font-style:italic;}
#textarea .categoriaFases .fase div.concepto p{margin:0 0 3px;}
#textarea .categoriaFases .fase div.concepto strong{ font-size:1.1em;}
.categoriaFases .fase div.texto{float:right; width:290px;}
.categoriaFases .fase div.texto p{font-size:.9em;}
.categoriaFases .fase div.texto ul{font-size:.9em;}
.categoriaFases .fase div.texto li{line-height:1.3em;}

/* =colaboradores */
#colaboradores{float:right; padding:0 0 25px 0;}
#colaboradores li{margin:0 0 10px 0; font-size:.9em;}
#colaboradores ul a{color:#bc0073;}

/* =proyectos */
#proyectos .proyecto{width:130px; height:130px; overflow:hidden; float:left; position:relative;}
#proyectos .proyecto a{display:block; font-size:.9em;}
#proyectos .proyecto a span.masa{visibility:hidden; position:absolute; top:0; left:0; display:block; width:130px; height:130px; text-align:left;}
#proyectos .proyecto a.case_study span.masa{background:#bd0172;}
#proyectos .proyecto a.link span.masa{background:#000;}
#proyectos .proyecto a span.masa span{display:block; padding:10px;}
#proyectos .proyecto a.case_study span.masa span{color:#f7becd;}
#proyectos .proyecto a.link span.masa span{color:#9f9f9f;}
#proyectos .proyecto a span.masa span strong{display:block; margin:0 0 7px; font-size:1.3em; color:#fff; line-height:1.2;}
#proyectos .proyecto a em{position:absolute; bottom:10px; left:10px; font-style:normal; font-weight:bold;}
#proyectos .proyecto a:hover{text-decoration:none; cursor:pointer;}
#proyectos .proyecto a:hover span.masa{visibility:visible;}

/* =case-studies */
#case-study #container{min-height:688px; margin:0 0 70px; position:relative;}
#case-study #content{position:absolute; left:378px; bottom:0; float:none; margin:0; min-height:45px;}
#case-study #content #textarea{padding:10px 20px 35px;}

#case-study #content #textarea h1{margin:0; position:absolute; bottom:11px; right:10px;}

#case-study #tabs{position:absolute; bottom:9px; left:10px;}
#case-study #tabs li{float:left; display:inline; margin:0 5px 0 0;}
#case-study #tabs li a{float:left; padding:8px 10px; color:#333;}
#case-study #tabs li a:hover{text-decoration:none; color:#000;}
#case-study #tabs li a.selected{background:#000; color:#fff; font-weight:bold;}

#case-study #imgs{position:absolute; bottom:-38px; right:0;}
#case-study #imgs li{float:left; display:inline; margin:0 5px 0 0;}
#case-study #imgs li.last{margin:0;}
#case-study #imgs li a{float:left; padding:8px 10px; background:#000; color:#fff;}
#case-study #imgs li a:hover{background:#bc0073; text-decoration:none;}
#case-study #imgs li a.selected{background:#fff; color:#000; font-weight:bold;}

#case-study .tab{padding:15px 0 10px;}