@charset "utf-8";
/* CSS Document */
@import url('reset.css');
@import url(http://fonts.googleapis.com/css?family=Open+Sans:200,400,600,300,700);
@import url(http://fonts.googleapis.com/css?family=Merriweather:400,700);
@font-face {
    font-family: 'bebas';
    src: url('../resources/fonts/bebasneue-webfont.eot');
    src: url('../resources/fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../resources/fonts/bebasneue-webfont.woff') format('woff'),
         url('../resources/fonts/bebasneue-webfont.ttf') format('truetype'),
         url('../resources/fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {font-family:"Open Sans", Lucida Sans Unicode, Lucida Grande, sans-serif; font-size:12px; color:#82858e; font-weight:600;}

/* Anchors
---------------------------------------------------*/
h1 {font-family:"Open Sans"; font-weight:200; color:#82858e; margin:0 0 15px 0; font-size:30px; line-height:28px;}
h2 {font-family:"bebas"; color:#d8d9dc; margin:0 0 20px 0; font-size:24px; font-weight:normal; text-transform:uppercase;}
h3 {}
p {margin:0 0 10px 0; line-height:16px; font-size:13px;}
a:focus { outline:none;}
a{text-decoration:none; color:#82858e;}
a:hover {}
.nopadding { padding:0!important;}
.trans {
-moz-transition: all .3s ease .1s;
-webkit-transition: all .3s ease .1s;
-o-transition: all .3s ease .1s;
transition: all .3s ease .1s;
}

/* Wrapper
---------------------------------------------------*/
.page_load { position:absolute; z-index:300; width:100%; height:100%; background:url(../images/loading.gif) no-repeat center center #FFF; 
opacity:0.5;
-moz-opacity:0.5;
-o-opacity:0.5;
-khtml-opacity:0.5;
filter:alpha(opacity=50);
}
#wrapper {}
#quienes, #historias, #eventos, #productos, #formatos, #porque, #unete, #contacto { padding:0 0 70px 0;}
.container { width:1000px; margin:0 auto;}
#top {}
#top span.line { height:7px; background-color:#82858e; display:block;}
div#top .container {}
.navtop { text-align:right; padding:10px 0 0 0; float:right;}
.social { float:right; height:32px; margin:0 0 0 20px;}
.social span { display:inline-block; background-color:#82858e; color:#FFF; float:left; margin:0 1px 0 0; line-height:32px; padding:0 10px;}
.social span a { display:block; width:28px; height:32px;}
.social span a#f { background:url(../images/icons/f.png) no-repeat center center; }
.social span a#t { background:url(../images/icons/t.png) no-repeat center center; }

#banner { width:1000px; margin:0 auto;}
#bannerint { overflow:hidden; text-align:center; height:149px; width:1000px; margin:0 auto 20px;}
#bannerint.productos { background:url(../images/banners/productos.jpg) no-repeat center top;}
#bannerint.quienes { background:url(../images/banners/quienes-somos.jpg) no-repeat center top;}
#bannerint.historias { background:url(../images/banners/historias-de-vida.jpg) no-repeat center top;}
#bannerint.formatos { background:url(../images/banners/formatos.jpg) no-repeat center top;}
#bannerint.porque { background:url(../images/banners/por-que.jpg) no-repeat center top;}
#bannerint.unete { background:url(../images/banners/unete.jpg) no-repeat center top;}
#bannerint.eventos { background:url(../images/banners/eventos.jpg) no-repeat center top;}
#bannerint.contacto { background:url(../images/banners/contacto.jpg) no-repeat center top;}
#bannerint.aviso { background:url(../images/banners/aviso.jpg) no-repeat center top;}

#header { background-color:#FFF; position:relative; z-index:200;
-moz-box-shadow:0 3px 4px #c8c9cd;
-webkit-box-shadow:0 3px 4px #c8c9cd;
box-shadow:0 3px 4px #c8c9cd;
}
div#header .container { position:relative;}
#logo { width:204px; height:123px; float:left; position:absolute; top:-25px; left:0;}
#logo a { display:block; width:204px; height:123px; background:url(../images/logo.png) no-repeat left top; text-indent:-99999px;}
#menu { float:left; margin:50px 0 0 201px; font-weight:100 !important;}
#menu ul li { font-family:"bebas"; float:left; margin:0 0 0 25px; position:relative; height: 68px; text-align:center; width:89px; }
#menu ul li a {color:#072b9e; font-size:18px; display:block; position:relative; height:68px;}
#menu ul li a span {display:none; position:absolute; bottom:0px; left:0; width:100%; height:3px; background-color:#b20063;}
#menu ul li a span b { position:absolute; top:-5px; left:45%; width:9px; height:5px; background:url(../images/icons/current.png) no-repeat left top;}
#menu ul li a:hover { text-decoration:none;}
#menu ul li a:hover span, #menu ul li.current a span { display:block;}

.left, .right { float:left;}
.w340 { width:340px;}
.m20 { margin-right:20px;}
.w640 { width:640px;}

/* Nosotros */
ul.lateral li { display:block; height:55px; line-height:55px; font-size:18px; color:#b20063;}
ul.lateral li a {font-family:"Open Sans"; font-weight:400; background:url(../images/icons/promenu.png) no-repeat -60px top #FFF; display:block; color:#b20063; height: 42px; line-height: 16px; padding:13px 15px 0 20px; position: relative;}
ul.lateral li a:hover, ul.lateral li.current a {background:url(../images/icons/promenu.png) no-repeat -50px top #e8e8e8;}

/* Historias */
#historias {}
div#historias .left, div#historias .right { width:465px;}
div#historias .left { margin:0 30px 0 0;}
div#historias .item { padding:15px; background-color:#e8e8e8; font-style:italic; color:#494c4f; position:relative; float:left; width:435px; margin:0 15px 60px; font-size:16px; font-weight:400;}
div.item .who { position:absolute; height:40px; width:auto; background:url(../images/piquito.png) no-repeat left top; padding:0 0 0 45px; bottom:-40px; left:0; line-height:40px; font-style:normal; font-size:13px; font-weight:600;}

/* Formatos */
#formatos {}
#formatos ul {}
#formatos ul li { float:left;}
.formatos a{ display:block; padding-left:15px; }

/* Productos */
#productos {}
.promenu { display:block; height:55px; line-height:55px; font-size:18px; color:#b20063;}
.promenu a {font-family:"Open Sans"; font-weight:400; background:url(../images/icons/promenu.png) no-repeat -60px top #FFF; display:block; color:#b20063; height: 55px; line-height: 16px; padding:13px 15px 0 68px; position: relative;}
.promenu a:hover, .promenu a.current {background:url(../images/icons/promenu.png) no-repeat 0 top #e8e8e8;}
div.promenu .im { float:left; width:55px; height:55px; overflow:hidden; position:relative; margin: 0 15px 0 0; display:inline-block; position:absolute; top:0; left:0;}
div.promenu .im img {left: -8%; position: absolute; top: 12%; width: 120%;}
.description { padding:25px; background-color:#e8e8e8;}
.himage { display:block;}
.himage img {border:solid 1px #FFF;}
div.description .left, div.description .right { padding:30px 0;}
div.description .left  {position:relative; width:296px;}
div.description .pegadora {font-family:"Open Sans"; font-weight:200; font-size:24px; width:240px; padding: 0 0 0 45px; line-height:28px;}
div.description .pegadora span { display:inline-block; width:32px; height:25px;}
div.description .pegadora span.start {position:absolute;  top:32px; left:0; background:url(../images/icons/open.png) no-repeat left top;}
div.description .pegadora span.close { margin:3px 0 0 0; background:url(../images/icons/close.png) no-repeat left top;}
div.description .right { background:url(../images/prod-separate.jpg) no-repeat left top; font-family:"Open Sans"; font-weight:600; font-size:14px; line-height:20px; width:294px; height:140px;}
.pa { padding:0 0 0 25px;}

/* Por que */
ul.lista1 {}
ul.lista1 li { display:block; margin:0 0 5px 0; background:url(../images/arrow.png) no-repeat left 3px; padding:0 0 0 13px;}

/*Eventos */
.even { display:block; padding:0 0 10px 0; margin:0 0 10px 0; border-bottom:solid 1px #CCC;}
.even h1 { margin:0 0 5px 0;}
div.even .fecha { display:block; font-weight:bold; font-size:12px; margin:0 0 3px 0;}

#razones { background-color:#e8e8e8; padding:23px 0 30px 0;}
#razones h1 { display:block; text-align:center; margin:0 0 35px 0;}
#razones ul {}
#razones ul li { float:left; width:153px; height:203px; padding:0 6px; background:url(../images/separate-raz.png) no-repeat right top; text-align:center; font-family:"bebas"; color:#82858e; font-size:18px; font-weight:normal;}
#razones ul li img { display:block;}


#bottom { background-color:#82858e; padding:24px 0; color:#FFF; position:relative;}
#bottom a {color:#FFF;}
#bottom span.mountain { background:url(../images/mountain.png) no-repeat left top; width:65px; height:39px; position:absolute; top:-39px; left:48%;}
a.facebook { background:url(../images/icons/f.png) no-repeat left center; padding:0 0 0 25px; display:block; color:#FFF;}
a.twitter { background:url(../images/icons/t.png) no-repeat left center; padding:0 0 0 25px; display:block; color:#FFF;}
.col-a, .col-b, .col-c, .col-d { float:left;}
.col-a { width:230px; margin:0 55px 0 0;}
.col-b { width:270px; margin:0 55px 0 0;}
.col-c { width:125px; margin:0 60px 0 0;}
.col-d { width:205px;}

/* Footer
---------------------------------------------------*/
#footer { background-color:#b20063; padding:11px 0; color:#FFF;}
#cont-footer { width:1000px; margin:auto; }
#footer span{ display:block; float:right; color:#FFF; text-decoration:none; }
#footer span a:hover{ color:#d8d9dc; }
.white { color: #ffffff;}


/* CLEARING
---------------------------------------------------*/
.clearfix:after {content: "."; display:block; height: 0; clear: both; visibility: hidden;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.clear {clear: both;}