@charset "utf-8";
/* CSS Document */

/* ----------------------- General ----------------------- */
body{background: #fefefe url(../images/fnd-footer.jpg) repeat-x bottom left; padding: 0; margin: 0;}
*{font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333; line-height: 20px;}
#fnd-top{ padding: 0 ; margin: 0; width: 100%; background: url(../images/fnd-body-home.jpg) repeat-x top left;}
#fnd-top #fnd-home{ padding: 0 ; margin: 0; width: 100%; background: url(../images/fnd-content.jpg) repeat-x 0 466px;}
#fnd-top #fnd-home #top-home{ padding: 0 ; margin: 0; width: 100%; background: url(../images/top-inicio.jpg) no-repeat top center;}
#content{width: 880px; margin: 0 auto; padding: 18px 0 0 7px; position: relative;}  
#bg-inner{ padding: 0 ; margin: 0; width: 100%; background: url(../images/fnd-body-inner.png) repeat-x top left;}
#bg-inner #top-inner{ padding: 0 ; margin: 0; width: 100%; background: url(../images/top-interna.png) no-repeat top center;}

/* ----------------------- Top ----------------------- */
#info{width: 880px; margin: 0 0 35px; padding: 0; float: left;} 
#top{width: 880px; margin: 0 0 20px; padding: 0; float: left;} 
#logo{width: 125px; padding: 0 0 0 33px; float: left; height: 100px; margin: 0;} 

#menu{width: 720px; float: right; margin: 0; padding: 20px 0 0; height: 59px; background: url(../images/fnd-menu.png) no-repeat bottom right;} 
#menu .inicio{ width:75px; padding: 11px 0 0 13px; float: right; height: 48px;}
#menu .inicio a{display: block;  padding: 0 0 0 10px; color: #acacac; font-size: 9px; text-transform: uppercase; background: url(../images/vinieta-menu.gif) no-repeat 0 -12px; text-decoration: none;}
#menu .inicio a:hover, #menu .inicio a.select{ color: #d5412e; background-position: 0 5px}
#menu ul{width: 610px; float: right;} 
#menu ul li{ background: url(../images/separador-menu.gif) no-repeat top right; padding: 0 11px 0 10px; float: right; height: 59px;}
#menu ul li a{ display: block; float: left; height: 40px; margin: 10px 0 0 0;}
#menu ul li a span{ display: none;}
#menu ul li a.btn-contact{ background: url(../images/btn-contacto.png) no-repeat 0 0; width: 113px;}
#menu ul li a.btn-play{ background: url(../images/btn-play.png) no-repeat 0 0; width: 107px;}
#menu ul li a.btn-portfolio{ background: url(../images/btn-portfolio.png) no-repeat 0 0; width: 107px;}
#menu ul li a.btn-services{ background: url(../images/btn-servicios.png) no-repeat 0 0; width: 113px;}
#menu ul li a:hover, #menu ul li a.select{ background-position: 0 -40px;}


#banner{height: 297px; padding: 0;width: 880px; margin: 6px 0 0 0; float: left; position: relative;}
#banner .middle{ position: absolute; top: 4px; left: 0; z-index: 0; background: url(../images/fnd-resumen-middle.jpg) repeat-x top left; height: 292px; padding: 0; margin: 0; width: 873px;}
#banner .middle .left{ float: left; background: url(../images/fnd-resumen-left.jpg) no-repeat top left; height: 292px; padding: 0; margin: 0; width: 873px;}
#banner .middle .left .right{ float: left; background: url(../images/fnd-resumen.jpg) no-repeat top right; height: 277px; padding: 0 0 15px 31px; margin: 0; width: 842px;}
#banner .middle .left .right .banner-left{width: 390px; float: left; padding: 23px 0 0 0;}
#banner .middle .left .right .banner-left .title{width: 380px; margin: 0 0 5px 0;}
#banner .middle .left .right .banner-left ul{margin: 10px 0 0 0;}
#banner .middle .left .right .banner-left ul li{ background: url(../images/vinieta-top.jpg) no-repeat 0 2px; padding: 0 0 10px 20px; font-size: 13px; font-weight: bold; color: #c34834;}
#banner .middle .left .right .banner-right{width: 416px; float: right; background: url(../images/fnd-resumen-separador.jpg) no-repeat top left; padding: 6px 0 0 17px; position: relative;}
#banner .middle .left .right .banner-right span{padding: 2px 0 3px 7px; text-transform: uppercase; font-weight: bold; font-size: 16px; color: #666; margin: 0; letter-spacing: 0; display: block;}
#banner .middle .left .right .banner-right .images{float: left; width: 405px; position: relative; height: 255px;overflow:hidden;}
#banner .middle .left .right .banner-right .images #image-cont{position:absolute;overflow:hidden;width:1215px;left:7px;top:0px;}
#banner .middle .left .right .banner-right .images #image-cont .image{width: 390px; float:left;margin:0 10px 0 0;}
#banner .middle .left .right .banner-right .images #image-cont .image img{ background: #FFF; border: 1px solid #b4b4b4; padding: 7px;}
#banner .middle .left .right .banner-right .images .flecha-izq{width: 23px; height:23px; position: absolute; left: 0px; top: 95px; background: url(../images/icon-atras.png) no-repeat 0 0; cursor: pointer; z-index: 2;}
#banner .middle .left .right .banner-right .images .flecha-der{width: 23px; height:23px; position: absolute; right: 3px; top: 95px; background: url(../images/icon-adelante.png) no-repeat 0 0; cursor: pointer; z-index: 2;}
#banner .middle .left .right .banner-right .images .flecha-der:hover, #banner .middle .left .right .banner-right .images .flecha-izq:hover{ background-position: 0 -23px;}
#banner .middle .left .right .banner-right .images .flecha{width: 345px; position: absolute; left: 0; top: 190px; background: url(../images/icon-flecha.png) no-repeat 10px 0; height: 24px; padding: 31px 0 0 60px; color: #999; font-weight: bold; text-transform: uppercase; z-index: 2;}
#banner .portfolio{ position: absolute; top: 0; right: 2px; z-index: 3; height: 77px; width: 77px; background: url(../images/icon-portfolio.png) no-repeat 0 0; cursor: pointer;}
#banner .portfolio:hover{ background-position: 0 -77px;}
#banner .portfolio span,#box-home .top .down a.more span, #box-home .top .down a.mas span, .btn-back span{ display: none;}

/* ----------------------- Homepage ----------------------- */  
#box-home{width: 874px; margin: 0; padding: 0; float: left; background: url(../images/box-inicio-middle.jpg) repeat-y top left;}
#box-home .top{width: 874px; margin: 0; padding: 0; float: left; background: url(../images/box-inicio-top.jpg) no-repeat top left;}
#box-home .top .down{width: 816px; margin: 0; padding: 18px 29px 15px 29px; float: left; background: url(../images/box-inicio-down.jpg) no-repeat bottom left;}
#box-home .top .down .side{width:218px; float: left;}
#box-home .top .down .middle{width:220px; float: left; padding: 0 80px;}
#box-home .top .down h2{padding: 2px 0 20px 45px; text-transform: uppercase; font-weight: bold; font-size: 14px; color: #333; margin: 0; letter-spacing: 0;}
#box-home .top .down a.mas{ background: url(../images/btn-masinfo.gif) no-repeat 0 0; padding: 0; margin: 10px 0 0 0; height: 26px; width: 92px; display: block;}
#box-home .top .down a.more{ background: url(../images/btn-more.gif) no-repeat 0 0; padding: 0; margin: 10px 0 0 0; height: 26px; width: 73px; display: block;}
#box-home .top .down a.more:hover, #box-home .top .down a.mas:hover, .btn-back:hover{ background-position: 0 -26px;}
.row{width: 880px; margin: 0; padding: 25px 0 0 0; float: left;} 
.btn-back{ background: url(../images/btn-back-to-top.gif) no-repeat 0 0; width: 102px; height: 26px; float: left; margin: 75px 0 0 0;}
.casos, .cases{ background: url(../images/casos-es.gif) no-repeat top left; width: 436px; height: 114px; float: left; padding: 5px 105px 0 58px; color: #FFF;}
.cases{ background: url(../images/casos-en.gif) no-repeat top left;}
.casos span, .cases span{padding: 2px 0 8px; font-weight: bold; font-size: 18px; color: #FFF; margin: 0; letter-spacing: 0; display: block;}

/* ----------------------- Servicios ----------------------- */
#box-info{width: 872px; background: #FFF url(../images/sombra-submenu.png) repeat-y 196px 0; border: 1px solid #d4d4d4; float: left; position: relative; padding: 0; z-index: 1; min-height: 548px;}
.tit-servicio{position: absolute; top: 138px; left: 20px; z-index: 2; height: 78px; width: 540px; background: url(../images/tit-servicios.png) no-repeat bottom left;}
.tit-services{position: absolute; top: 138px; left: 20px; z-index: 2; height: 78px; width: 540px; background: url(../images/tit-servicios.png) no-repeat bottom left;}
.migajas{width: 320px; float: right; height: 24px; padding: 0 5px 0 0; margin: 35px 0 0 0; text-align:right;}
.migajas a{ text-align: right; color: #FFF; font-size: 11px; background: url(../images/vinieta-migajas.png) no-repeat bottom right; padding: 0 14px 0 7px; text-decoration: none;}
.migajas a:hover{ color: #CCC; text-decoration: none;}
.migajas span.select{ text-align: right; color: #f7c944; font-size: 11px; background: none; padding: 0 14px 0 7px; text-decoration: none;}

/*Left*/
#column-left{float: left; width: 182px; padding: 40px 21px 0 15px;}

#submenu{ margin: 0 0 15px 0; width: 182px; float: left}
#submenu ul li{width: 182px;}
#submenu ul li a{width: 166px; background: url(../images/fnd-submenu.gif) no-repeat 0 0; height: 24px; padding: 5px 0 0 16px; text-transform: uppercase; font-size: 11px; color: #666; font-weight: bold; display: block;}
#submenu ul li a:hover, #submenu ul li a.select{ background-position: 0 -29px; color: #d23e2d; text-decoration: none;}
#submenu ul li.last{ border-bottom: 1px solid #e2e2e2;}

.box-ultimos{ background: url(../images/box-ultimos-middle.gif) repeat-y top left; width: 180px; float: left; margin-bottom: 10px;}
.box-ultimos .top{ background: url(../images/box-ultimos-top.gif) no-repeat top left; width: 180px;}
.box-ultimos .top .down{ background: url(../images/box-ultimos-down.gif) no-repeat bottom left; width: 180px; padding: 40px 0 0 0;}
.box-ultimos .top .down img{ display:block; border: 1px solid #FFF; margin: 0 auto 4px;}
.box-ultimos .top .down p{margin: 0; padding: 0 0 0 12px; text-transform: uppercase; font-size: 11px; color: #333; line-height: 17px;}
.box-ultimos .top .down a{ text-transform: none; text-decoration: underline; color: #333;}
.box-ultimos .top .down p strong{ color: #b8302b;}
.box-ultimos .top .down a.ver{ display: block; padding: 0 0 0 28px; text-transform: uppercase; text-decoration: none; font-size: 11px; margin: 7px 0 0 0;}
.box-ultimos .top .down a:hover{ color: #666;}

/*Right*/
#column-right{float: right; width: 615px; padding: 27px 20px 35px 0;}
ul.ul{width: 615px;}
ul.ul li{width: 280px; margin: 0 0 12px 0; float: left; padding: 0 7px 0 20px; background: url(../images/vinieta-servicios.gif) no-repeat bottom left; font-size: 14px;}
ul.ul li a{ font-size: 14px; color: #333;}
.box-color{width: 569px; float: left; margin: 0 0 20px; padding: 15px 23px; font-size: 13px; background: #eceae1;}

/* ----------------------- Portfolio ----------------------- */
#box-info2{width: 820px; background: #FFF; border: 1px solid #d4d4d4; float: left; position: relative; padding: 34px 26px 10px; z-index: 1; min-height: 548px;}
.tit-portfolio{position: absolute; top: 138px; left: 15px; z-index: 2; height: 78px; width: 540px; background: url(../images/tit-portfolio.png) no-repeat bottom left;}
.tit-play{position: absolute; top: 138px; left: 10px; z-index: 2; height: 78px; width: 540px; background: url(../images/tit-play.png) no-repeat bottom left;}
.paginator{ background: url(../images/sombra-portfoliio.gif) no-repeat bottom center; width: 820px; padding: 0 0 15px; margin: 0 0 14px 0;}
.paginator2{ width: 820px; padding: 0; margin: 0;}
#box-info2 .left{width: 678px; float: left; font-size: 13px;}
#box-info2 .left strong{ font-size: 12px; color: #333; margin: 0 15px 0 0;}
#box-info2 .left a{ font-size: 12px; color: #333; text-decoration: underline;}
#box-info2 .left a:hover, #box-info2 .right a:hover{ color: #CCC;}
#box-info2 .right{width: 130px; float: right; text-align: right;}
#box-info2 .right a{ text-decoration: underline; font-size: 12px; color: #333; font-weight: bold; text-align: right;}

#portfolio{ background: url(../images/sombra-portfoliio.gif) no-repeat bottom center; width: 820px; padding: 0 0 15px; margin: 0 0 7px 0;}
#portfolio .trabajos{width: 820px; padding: 0; margin: 0 0 20px 0; float: left;}
#portfolio .trabajos2{width: 820px; padding: 0; margin: 0; float: left;}
#portfolio .column{width: 260px; padding: 0; margin: 0; float: left;}
#portfolio .column-middle{width: 260px; padding: 0; margin: 0 20px; float: left;}
#portfolio img{border: 1px solid #c5c5c5; padding: 4px; margin: 0;}
#portfolio .text{width: 255px; padding: 5px 0 5px 5px; margin: 0; border-bottom: 1px solid #e2e2e2; margin: 0;}
#portfolio .text a{ text-decoration: none; font-size: 15px; font-weight: bold; color: #666; line-height: normal;}
#portfolio .text a:hover{ text-decoration: none; font-size: 15px; font-weight: bold; color: #666;}
#portfolio .text strong{ margin: 0 10px 0 0; color:#666;}
#portfolio a.btn-ver{ display: inline-block; background: url(../images/btn-versitio.png) no-repeat 0 0; width: 79px; height: 18px; margin: 0 10px 0 0; padding: 0; line-height: normal;}
#portfolio a.btn-ver:hover, #portfolio a.btn-que:hover, #portfolio a.btn-jugar:hover{ background-position: 0 -18px;}
#portfolio a.btn-que{ display: inline-block; background: url(../images/btn-quehicimosaqui.png) no-repeat 0 0; width: 129px; height: 18px; margin: 0 10px 0 0; padding: 0; line-height: normal;cursor:default;}
#portfolio a.btn-jugar{ display: inline-block; background: url(../images/btn-versitio-playwithus.png) no-repeat 0 0; width: 79px; height: 18px; margin: 0 10px 0 0; padding: 0; line-height: normal;}

/* ----------------------- Contacto ----------------------- */
.tit-contacto{position: absolute; top: 138px; left: 17px; z-index: 2; height: 78px; width: 540px; background: url(../images/tit-contacto.png) no-repeat bottom left;}
.contact-left{width: 346px; float: left; border-right: 1px dashed #d4d4d4; padding: 10px 0 0 10px; min-height: 415px;}
.contact-left .talk{ border-bottom: 1px solid #d4d4d4; width: 283px; background: url(../images/icon-talk.gif) no-repeat 0 0; padding: 3px 0 8px 55px;font-size: 15px; font-weight: bold; color: #999;}
.contact-left .talk a, .contact-left .msn a{ font-size: 15px; font-weight: bold; color: #666;}
.contact-left .talk a:hover, .contact-left .msn a:hover{ color:#CCC; text-decoration: none;}
.contact-left .msn{ border-bottom: 1px solid #d4d4d4; width: 283px; background: url(../images/icon-msn.gif) no-repeat 0 0; padding: 9px 0 8px 55px;font-size: 15px; font-weight: bold; color: #999; margin: 8px 0 0 0;}
.contact-right{width: 435px; float: right; padding: 10px 10px 0 0; min-height: 415px;}
.contact-right .fila{ float: left; width: 435px; font-weight: bold; color:#666; margin: 0 0 12px;}
.contact-right .fila .input{ float: left; width: 425px; font-weight: bold; color:#666; margin: 2px 0 0; font-size: 12px; color: #666; padding: 2px 5px; border: 1px solid #c5c5c5;}
.contact-right .fila textarea{ float: left; width: 425px; font-weight: bold; color:#666; margin: 2px 0 0; font-size: 12px; color: #666; padding: 2px 5px; height: 68px;border: 1px solid #c5c5c5;}
.contact-right .fila .col1{width: 110px; float: left; padding: 9px 0 0 0;}
.contact-right .fila .col1 img{ border: 1px solid #c5c5c5;}
.contact-right .fila .col2{width: 265px; float: left; font-weight: bold; color:#666; }
.contact-right .fila .col2 .input{ float: left; width: 245px; font-weight: bold; color:#666; margin: 0; font-size: 12px; color: #666; padding: 2px 5px; border: 1px solid #c5c5c5;}
.contact-right .fila .col3{width: 60px; float: left; font-weight: bold; color:#666; padding: 20px 0 0 0; }
.contact-right .fila .col3 img{ cursor: pointer; cursor: hand;}

/* ----------------------- Text ----------------------- */
p{margin: 0 0 15px 0; padding :0; text-align: left; line-height: 20px; font-size: 13px;}
a{text-decoration: none; font-size: inherit;color: #b12b2b;}
a:hover{text-decoration: underline;}
textarea{width:260px;font-size:11px;color:#666;margin:0 0 7px 0;height:150px; background: #FFFFFF; outline: none; border: #999999 1px solid;}
strong{font-size: inherit;}
h1{color: #b12b2b; font-size: 36px; padding: 3px 0 25px 0; font-weight: bold; margin: 0;}
h2{ font-size: 12px; font-weight: bold; color: #f5b63d; padding: 2px 0 10px 8px; margin: 0; text-transform: uppercase; }
h3{ font-size: 13px; color: #333; margin: 0 0 25px 0; padding: 1px 0 1px 0; font-weight: bold; }
span.red{font-weight: bold; color: #F00; font-size: 13px;}

/* ----------------------- Footer ----------------------- */
#footer{padding: 15px 0 0 0; width: 880px; margin: 0; float: left; height: 259px }
#footer .column-contact{padding: 13px 0 0 0; width: 236px; margin: 0; float: left; height: 210px; background: url(../images/logo-footer.jpg) no-repeat top left; }
#footer .column-contact span{display: block; float: left; padding: 10px 7px 0 0; color: #838383; font-weight: bold;}
#footer .column-contact a.a{display: block; float: left; padding: 12px 7px 0 0;}
#footer .column-contact a.am{display: block; float: left; width: 236px;}
#footer .column-contact .iso{width:107px; height: 80px; float: left; padding: 0 120px 12px 0;}
#footer .column-services{padding: 12px 0 0 33px; width: 235px; margin: 0; float: left; height: 208px; background: url(../images/separador-footer-vertical.jpg) no-repeat 0 4px; }
#footer .column-form{padding: 12px 0 0 33px; width: 335px; margin: 0; float: left; height: 208px; background: url(../images/separador-footer-vertical.jpg) no-repeat 0 4px; }
#footer .column-form .form, #footer .column-form .form .row{padding: 0; width: 335px; margin: 0; float: left; }
#footer .column-form .form .row{ padding: 0 0 3px 0; font-weight: bold; color: #ccc;}
#footer .column-form .form .row .left{ padding: 0 12px 0 0; font-weight: bold; color: #ccc; float: left; width: 155px;}
#footer .column-form .form .row .left input{width: 151px; padding: 2px; margin: 0 0 0 0; border: none; outline: none; background: #0f0b06; color:#CCC; font-size: 11px;}
#footer .column-form .form .row textarea{width: 320px; padding: 2px; margin: 2px 0 0 0; border: none; outline: none; background: #0f0b06; color:#CCC; font-size: 11px; height: 50px;}
#footer .column-form .form .row .btn{ background: #0f0b06; color: #727272; font-weight: bold; border: none; padding: 2px 8px; margin: 2px 0 0 0; height: 22px}
#footer a{color: #ccc; font-weight: bold; text-decoration: none; text-align: left;}
#footer a:hover{ text-decoration: underline;}
#footer h1{padding: 2px 0 10px; font-weight: bold; font-size: 18px; color: #a0a0a1; margin: 0; letter-spacing: 0;}
#footer ul{ margin: 3px 0 0 0;}
#footer ul li{ background: url(../images/vinieta-footer.gif) no-repeat 0 3px; padding: 0 0 10px 24px; color: #cccc; font-size:12px; font-weight: bold;}
#footer .large{padding: 0; width: 880px; margin: 0; float: left;}
#footer .large .left{padding: 0; width: 480px; margin: 0; float: left; text-align: left;color: #ccc; font-weight: bold; font-size: 11px;}
#footer .large .right{padding: 0; width: 400px; margin: 0; float: left; text-align: right;color: #ccc; font-weight: bold;}
#footer .large .right a{color: #ccc; font-weight: bold; text-decoration: none; text-align: left; text-transform: uppercase; text-align: right; font-size: 11px;}
#footer .large .right a:hover{ color: #666;}


/* ----------------------- Clearfix ----------------------- */ 
/* slightly enhanced, universal clearfix hack */
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;line-height: 0; }
.clearfix {display: inline-block;}

/* start commented backslash hack \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* close commented backslash hack */