/*
 * 15/04/2010 
 * COMIENZO RESET PAGINAS Y REGLAS GENERALES FRAMEWORK CSS:
 * -sin bordes
 * -sin margenes ni paddings
 * -sin fondos ni estilo para listas
*/

* {margin: 0; padding: 0; font: 20px 'Yanone Kaffeesatz', sans-serif;font-weight:200;color:#333333;}
q:before,q:after {content: "";}
sup {font-size: 0.8em;}
sub {font-size: 0.8em;}
ul {list-style-type: none;}
a {border: none; text-decoration: none; }
a:link, a:visited, a:active {outline: none;}
strong{font-weight:400;}
a:hover {text-decoration: none;}
img {border: none; text-decoration: none;} 
acronym {border: 0;}

/* igualar las fuentes a todos los elementos */
h1, h2, h3, h4, h5, strong {font-size: 100%; }
h2,h2 *{font-weight:300;font-size:30px}

/* tablas */
table {width: 100%; border-collapse: collapse; border-spacing: 0;}

/* propociona altura a divs sin altura con contenido flotado */
/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

.b {border: 1px solid Yellow;} /*clase de uso rápido para destacar los bordes de un bloque*/

/* FIN RESET PAGINAS Y REGLAS GENERALES FRAMEWORK CSS */

/**********************************************
				ESTRUCTURA DE LA PAGINA
***********************************************/
body{background:#fff;}
h1{background:url(/images/comunes/interactivaclic.png) no-repeat 0 0;padding:0 0 0 82px;width:236px;font-size:18px;font-weight:200;text-align:justify;letter-spacing:2px;line-height:2px;height:70px;}
h1 span,h1 a span{font-weight:300;font-size:42px;letter-spacing:3px;}
h1 a {font-size:18px;font-weight:200;text-align:justify;letter-spacing:2px;line-height:2px;height:70px;}
h2,#sidebar h3{border-bottom:1px solid #e3e3e3;text-transform:uppercase;padding:20px 0;margin-bottom:25px;}
h2 strike,#sidebar strike{width:52px;}
.wrap{width:1020px;margin:0 auto;position:relative;}	
#wrap-cabecera{width:100%;margin:0;background:#ebebeb;height:552px;}	
#cabecera{padding-top:20px;}	
.menu{padding-top:30px;}	
.menu a{font-size:26px;color:#aeaeae;text-transform:uppercase;padding:6px 0;margin-left:54px;font-weight:300;}	
.menu a:first-child{margin-left:0;}	
.menu a:hover{color:#333;background:url(/images/comunes/menu-over.png) no-repeat center 4px;}

#nav-util{position:absolute;z-index:99;top:auto;width:100%;background:url(/images/comunes/menu-fixed.gif) repeat 0 0;padding:7px 0;height:36px;}	
#nav-util .wrap a img{display:none;position:absolute;left:auto;top:auto;}	
#nav-util .wrap .telefono{position:absolute;left:auto;top:auto;font-size:26px;color:#fff;font-weight:300;opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: opacity(alpha=0);}	
#nav-util .menu{padding-top:0;display:none;}	
#nav-util .menu a:hover{color:#fff;}	
#nav-util-space{height:50px;width:100%;}

#contenido{padding-top:20px;}	
#contenido p,#contenido ul{padding:0 40px 25px;}


/* CAROUSEL */
#carousel {
    width:1020px;
    height:445px;   
    margin:0 auto;
	position:relative;
}
 
#slides {
    overflow:hidden;
    position:relative;
    width:1020px;
    height:400px;
}
 
/* remove the list styles, width : item width * total items */ 
#slides #slides-wrapper{
    position:absolute;
    left:0;
    top:0;
    list-style:none;
    margin:0;
    padding:0;  
    width:9999px;            
}
 
/* width of the item, in this case I put 250x250x gif */
#slides .slide {
    width:1020px;
    height:400px;   
    float:left;
	position:relative;
}
#slides .slide .content{width:380px;padding-top:85px;padding-left:40px;}
#slides .slide h3{font-size:28px;text-transform:uppercase;font-weight:300;margin-bottom:20px;}
#slides p{}
#slides .slide img{position:absolute;top:0;right:0px;}

#slide-nav{text-align:center;padding-top:20px;}
#slide-nav span{margin:0 4px;display:inline-block;width:12px;height:12px;line-height:12px;background:url(/images/comunes/carousel/nav.png) no-repeat left top;}
#slide-nav .active{background-position:left bottom;}
 
/* Styling for prev and next buttons */

 
.buttons{
    display:block; 
    width:20px; 
    height:37px;
    text-indent:-999em;
    float:left;
    outline:0;
	position:absolute;
	background:url(/images/comunes/carousel/button.png) no-repeat left top;
	z-index:10;
}
 
a#prev {
	left:0;
	top:200px;
}
 
a#prev:hover {
	background-position: left bottom;
}
 
a#next {
	right:0;
	top:200px;
	background-position: right top;
}
 
a#next:hover {
	background-position: right bottom;
}

.gradient{width:20px;height:100%;background:url(/images/comunes/gradient.png) repeat-y left top;position:absolute;top:0;left:0;z-index:9;}
.gradient-right{background-position:right top;left:auto;right:0;}
/* */

#trabajos{}
#trabajos a{height:277px;float:left;display:inline;margin:0 8px 8px 0;position:relative;overflow:hidden;}
#trabajos .no-margin{margin-right:0;}
#trabajos .work_0{background:url(/images/trabajos/gran-cinema.jpg) no-repeat 0 0;width:314px;}
#trabajos .work_1{background:url(/images/trabajos/hotel-colegiata.jpg) no-repeat 0 0;width:236px;}
#trabajos .work_2{background:url(/images/trabajos/hotel-azul.jpg) no-repeat 0 0;width:454px;}
#trabajos .work_3{background:url(/images/trabajos/comillas.jpg) no-repeat 0 0;width:390px;}
#trabajos .work_4{background:url(/images/trabajos/tanet.jpg) no-repeat 0 0;width:370px;}
#trabajos .work_5{background:url(/images/trabajos/la-tienda-conexion.jpg) no-repeat 0 0;width:242px;}
#trabajos .work_6{background:url(/images/trabajos/piso-santander.jpg) no-repeat 0 0;width:236px;}
#trabajos .work_7{background:url(/images/trabajos/olanorte.jpg) no-repeat 0 0;width:421px;}
#trabajos .work_8{background:url(/images/trabajos/famtrip.jpg) no-repeat 0 0;width:345px;}
#trabajos .work_9{background:url(/images/trabajos/anticuarium.jpg) no-repeat 0 0;width:390px;}
#trabajos .work_10{background:url(/images/trabajos/anjoca.jpg) no-repeat 0 0;width:386px;}
#trabajos .work_11{background:url(/images/trabajos/nue-tec.jpg) no-repeat 0 0;width:226px;}
#trabajos a .on{display:none;z-index:1;position:absolute;background-position:left bottom;}
#trabajos a .off{display:block;}
#trabajos a span{height:100%;width:100%;}
#trabajos a .info{position:absolute;z-index:2;padding:5px 12px;height:75px;background:#000;background: rgba(0,0,0,0.8);bottom:10px;left:-100px;opacity:0;filter:opacity(alpha=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
#trabajos a .info h3{font-size:30px;line-height:30px;text-transform:uppercase;color:#fff;}
#trabajos a .info p{font-size:20px;line-height:20px;padding:0;}
#trabajos a .info *{color:#fff;}


#servicios ul {margin-top:7px;}
#servicios ul li{margin-bottom:57px;vertical-align:middle;font-weight:400;}
#servicios ul li:last-child{margin-bottom:0;}
#servicios ul img{vertical-align:middle;margin-right:25px;}
#servicios ul .float{margin-top:-7px;}
#servicios ul .green{text-transform:uppercase;font-size:30px;display:inline-block;width:240px;font-weight:300;}

#nosotros{}
#nosotros .about{width:300px;padding-right:10px;padding-left: 25px; overflow: visible !important;}
#nosotros .about .circle_holder{height: 340px;width: 320px;position:relative;}
#nosotros .circle{  background: none repeat scroll 0 0 #EEEEEE;
    height: 270px;
    left: 10px;
	z-index:0;
    overflow: hidden;
    position: relative;
    top: 10px;
    width: 270px;
	-webkit-border-radius:145px;
-moz-border-radius: 145px;
border-radius: 145px;}
#nosotros .inner{color: #FFFFFF;
    height: 250px;
	z-index:1;
    /*left: 10px;*/
    /*margin: 10px 0 0 10px;*/
    overflow: hidden;
    position: relative;
	position:absolute;
    text-align: center;
    /*top: 10px;*/
	left:50%;
	top:50%;
	margin:-150px 0 0 -140px;
    width: 250px;
	-webkit-border-radius:125px;
-moz-border-radius: 125px;
border-radius: 125px;}
#nosotros .seo{background:url(/images/comunes/seo-sem.jpg) no-repeat 0 0;}
#nosotros .marketing{background:url(/images/comunes/marketing.jpg) no-repeat 0 0;}
#nosotros .web{background:url(/images/comunes/web.jpg) no-repeat 0 0;}
#nosotros .inner span{display:none;width:100%;height:100%;background-position:0 -274px;-webkit-border-radius:125px;
-moz-border-radius: 125px;
border-radius: 125px;}



#contacto{margin-bottom:20px;}

#redes-sociales{}
#redes-sociales a{width:60px;height:60px;position:relative;margin-left:45px;}
#redes-sociales .over{width:100%;height:100%;position:relative;background:url(/images/comunes/redes-sociales.png) no-repeat 0 -60px;display:none;}
#redes-sociales .out{left:0;top:0;width:100%;height:100%;position:absolute;background:url(/images/comunes/redes-sociales.png) no-repeat 0 0;}
#redes-sociales #twitter{background-position:-60px 0;}
#redes-sociales #twitter .over{background-position:-60px -60px;}
#redes-sociales #twitter .out{background-position:-60px 0;}
#redes-sociales #linkedin{background-position:-120px 0;}
#redes-sociales #linkedin .over{background-position:-120px -60px;}
#redes-sociales #linkedin .out{background-position:-120px 0;}
#redes-sociales #rss{background-position:-180px 0;}
#redes-sociales #rss .over{background-position:-180px -60px;}
#redes-sociales #rss .out{background-position:-180px 0;}
#redes-sociales a .info{position:absolute;z-index:99;white-space:nowrap;left:-38px;top:-70px;width:128px;opacity:0;filter: opacity(alpha=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
#redes-sociales a .info strong{padding:9px 0;background:#e3e3e3;display:block;white-space:nowrap;text-align:center;display:block;font-size:20px;font-weight:200;}
#redes-sociales a .info span{display:block;height:13px;background:url(/images/comunes/tooltip.png) no-repeat center bottom;}

#formulario-contacto, #request{padding:0 40px 15px;}
#request p{text-align:center;}
#request p strong{color:#CBD300;font-size: 28px;text-transform: uppercase;font-weight:300;}
#formulario-contacto table{margin:0;text-align:left;}
#formulario-contacto th{padding-bottom:15px;}
#formulario-contacto td{vertical-align:top;}
#formulario-contacto td{vertical-align:top;}
input[type=text],textarea{border:none;background:#e3e3e3;color:#fff;padding:6px 9px;font-size:18px;}
#formulario-contacto #nombre{width:225px;margin-right:20px;}
#formulario-contacto #email{width:172px;margin-right:20px;}
#formulario-contacto #telefono{width:106px;margin-right:20px;}
#formulario-contacto #claim{padding-top:17px;width:106px;margin-right:20px;background:url(/images/comunes/green-triangle.gif) no-repeat 533px 4px;}
#formulario-contacto #claim *{background:#cbd300;display:block;padding:0 10px;margin-right:20px;color:#fff;text-shadow:0 1px #a2a900;font-weight:300;}
#formulario-contacto #claim h4{font-size:30px;text-transform:uppercase;height:30px;padding-top:5px;}
#formulario-contacto #claim p{padding-bottom:6px;}
textarea{height:105px;overflow:hidden;width:292px;}
button{background:none;border:0;padding:6px 0;position:relative;margin-right:20px;text-transform:lowercase;}
button span{font-size:30px;visibility:hidden;position: absolute;top:-3px;right:-10px;}
button:hover{background:url(/images/comunes/menu-over.png) no-repeat center 4px;cursor:pointer;}
button:hover span{visibility:visible;}

#datos-contacto strong{font-size:24px;}

#google-maps{width:603px;height:348px;border:1px solid #c8c8c8;margin:0 0 0 40px;overflow:hidden;}
#google-maps *{font-size:10px;}
#google-maps h3.empresa{font-size:18px;color:#CBD300;}
#google-maps p.datos{font-size:16px;margin:0;padding:0;}
/*#google-maps-mask{width:603px;height:348px;border:1px solid #c8c8c8;margin:0 0 0 40px;overflow:hidden;}
#google-maps{width:603px;height:388px;margin:0;}*/

#twitter{width:350px;}
#twitter h2{padding-top:0;}

#pie{padding-top:10px;border-top:1px solid #e8e8e8;}	
#pie p{text-align:center;}	

blockquote{display:block;padding:0 0 20px 36px;background:url(/images/comunes/quote.png) no-repeat 0 0;font-size:18px;line-height:18px;}
blockquote *{font-size:18px;}

blockquote .date{font-size:14px;color:#939393;display:block;}

.entity{color:#cbd300;}
a.entity:hover{text-decoration:underline;}
.green{color:#cbd300;}
.float{float:left;display:inline;}
.float-right{float:right;display:inline;}
.align-right{text-align:right;}
.br{clear:both;font-size:0;height:0;}			
.oculto{display:none;}