@import url("reset.css");
@import url("fonts.css");
@import url(http://fonts.googleapis.com/css?family=Exo+2:300,400,600,700);

/*FONTS*/

body{ padding:0px; margin:0px; font-size:12px; font-family:"Exo 2", Lucida Sans Unicode, Lucida Grande, sans-serif; font-weight:300; background:url(../images/background.png) repeat center center;}
html, .h100 {height: 100%;}

/* Anchors
---------------------------------------------------*/
h1 {}
h2 {font-family:"Exo 2"; font-size:15px; font-weight:600; margin:0 0 10px;}
h3 {font-family:"Exo 2"; font-size:24px; font-weight:700; margin:0 0 10px; color:#656464;}
h4 {font-family:"Exo 2"; font-size:14px; font-weight:600; margin:0 0 10px; color:#656464;}
p { line-height:17px; margin:0 0 15px 0;}
a:focus { outline:none;}
a{ text-decoration:none; color:#000;}
a:hover { text-decoration:none;}

/* Font Hacks
---------------------------------------------------*/
.font-09{ font-size:9px; } .font-10{ font-size:10px; } .font-11{ font-size:11px; } .font-12{ font-size:12px; } .font-14{ font-size:14px; } .font-16{ font-size:16px; } .font-18{ font-size:18px; } .font-20{ font-size:20px; } .font-21{ font-size:21px; } .font-22{ font-size:22px; } .font-24{ font-size:24px; } .font-25 { font-size:25px;} .font-26{ font-size:26px; } .font-27{ font-size:27px;} .font-28{ font-size:28px; } .font-30{ font-size:30px; } .font-31{ font-size:31px; } .font-32{ font-size:32px; } .font-34{ font-size:34px; } .font-36{ font-size:36px; } .font-48{ font-size:48px; } .font-72{ font-size:72px; } .font-80{ font-size:80px; } .font-48{ font-size:48px;}

.text-left { text-align:left;}
.text-center { text-align:center;}
.text-rigt { text-align:right;}
.text-justify { text-align:justify;}

/* Button
---------------------------------------------------*/
.btn {}
.btn-primary { }
.btn-warning {}
.btn-xs {}


/* Wrapper
--------------------------------------------------*/
#loading { width:100%; height:100%; background-color:#999; position:absolute; top:0; left:0; z-index:499;}
#wrapper { padding-bottom:45px;}
.content { width:960px; margin:0 auto;}
.header.fixed { width:365px; position:fixed; top:0; left:50%; margin-left:-182px; z-index: 400; background: #FFF;}
.logo { width:200px; height:70px; display:block; margin:10px auto; position:relative;}
#menu { width:365px; margin:0 auto; padding:0; position:relative; z-index:300;}
#menu > li { background-color:#69bf3c; padding:5px 3px; float:left; list-style:none; position:relative;}
#menu > li > a { display:block; background-color:#69bf3c; color:#FFF; font-weight:600; font-size:14px; border-right:solid 1px #FFF; padding:3px 20px;}
#menu > li:last-child a { border:none;}
.submenu { position:absolute; top:34px; left:-5px;  margin:0; padding:0 0 0 30px; background:url(../images/sub-menu.png) no-repeat left top; display:none;}
.submenu li {list-style:none; display:block; text-align:left;}
.submenu li a { padding:2px 0; display:block;}
.submenu li a:hover {color:#6CBD45;}

a.prev, a.next { display:block; position:relative; width:167px; height:63px;}
a.next { background:url(../images/icons/next.png) no-repeat left top; padding: 23px 45px 0 0;}
a.prev { background:url(../images/icons/prev.png) no-repeat left top; padding: 23px 0 0 45px;}


.scroll {position: fixed; bottom:50%; left: 0; margin-bottom: -291px;}
.img-home { z-index: 1; width:2500px; padding:0; text-align:center;}
.img-home img { margin:auto;}

#contacto { background-color:#000; position:fixed; right:0; bottom:0; padding:20px 20px 50px; z-index:310; color:#FFF; text-align:left;}
#contacto a {color:#FFF;}
#contacto div { font-size:15px; font-weight:400;}
.cerrar {color:#FFF; text-align:left; font-size:17px;}
.social { display:inline-block; color:#FFF; margin:0 5px;}
.social i { font-size:35px;}
#contactform {}
#contactform input[type="text"], #contactform textarea { border:none; color:#4D4D4D; font-style:italic; font-weight:300; display:block; margin:0 0 10px 0; padding:3px 5px; }
#contactform textarea { margin-top:27px; height:125px;}
.boton-contacto{ margin-top: 70px !important; background-color: #69bf3c !important; color: #fff !important; font-weight: bold !important; }
label.error{ display:none !important; }
input.error, textarea.error, select.error{ border:solid 1px #F00 !important; -moz-box-shadow: 0 0 10px #990000 !important; -webkit-box-shadow: 0 0 10px #990000 !important; box-shadow: 0 0 10px #990000 !important; }
#texto-mensaje{ text-align: center; font-size: 14px; width: 500px; margin-left: -75px; }


#nosotros { background:url(../images/nosotros-center.png) no-repeat left top; width:380px; height:382px; margin:30px auto 0 auto; position:relative;}
.vision, .nosotros, .mision { position:absolute;}
.vision { top:120px; left:-245px; width:245px;}
.nosotros { top:0; right:-250px; width:245px;}
.mision { bottom:-140px; left:150px; width:470px;}
.mision img { position:absolute; top:20px; left:-70px;}
.item { margin-bottom:30px;}
.item a { display:block; font-size:15px; text-align:center; position:relative;}
.item a img { display:block; margin:0 auto 10px; text-transform:uppercase;}
.item a b { display:block; height:2px; width:100%; position:absolute; text-align:center;}
.item a b.top { top:-10px; left:0;}
.item a b.bottom { bottom:-10px; left:0;}
span.name { display:block; position:relative;}
.producto { position:relative;}
.complemento { position:absolute; width:320px; height:170px; bottom:0; left:185px; z-index:100;}
.regresar { background:url(../images/mas-producto.png) no-repeat left top; width:76px; height:75px; position:absolute; top:0; right:0; display:block;}

.box { border-bottom:solid 1px #f1e57e; padding:0 0 15px 0; margin:0 0 10px 0;}
.relative { position:relative;}
.tl { background:url(../images/titulo-line.png) no-repeat left top; width:233px; height:68px; font-family:"Exo 2"; font-size:14px; font-weight:600; margin:0 0 10px; color:#656464; padding: 50px 0 0 0;}
.energetico-esnacks { position:relative; left:65px; }


/* FOOTER
---------------------------------------------------*/
#footer { height:56px; background:url(../images/footer.png) repeat center top; position:fixed; bottom:0; left:0; width:100%; z-index:400;}

/* RESPONSIVE
---------------------------------------------------*/
/* Large desktop */
@media (min-width: 1200px) {
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {	
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

}

/* Landscape phones and down */
@media (max-width: 480px) {
	
}

/* start hover effect
---------------------------------------------------*/
.trans {
-webkit-transition: all 0.3s ease 0s; 
-o-transition: all 0.3s ease 0s; 	
transition: all 0.3s ease 0s;
}

/*rotate*/
.rotate{
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.rotate:hover {
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
li.active a img.rotate {
  -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
       -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
/*rotate*/

/*expand*/
.expand
{
	-webkit-transition:all 100ms;
	-o-transition:all 100ms;
	transition:all 100ms;
}

.expand:hover, .circle.active
{
	-webkit-transform:scale(1.05, 1.05);
	-o-transform:scale(1.05, 1.05);
	transform:scale(1.05, 1.05);
}
/*expand*/

/*opacity*/
.opacity{
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
.opacity:hover{
opacity: 0.8;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
/*opacity*/
/*end hover effect*/



/* CLEARING
---------------------------------------------------*/
.clear5px{clear:both;height:5px;}
.clear7px{clear:both;height:7px;}
.clear10px{clear:both;height:10px;}
.clear15px{clear:both;height:15px;}

.clear { clear:both;}
.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 */