/* ==========================================================================
GLOBAL
========================================================================== */

html, body {height: 100%;}
body {background: #f4cb13 url(../img/bg_homestyle.jpg) repeat; color: #2F292B; font-family: Helvetica, Arial, sans-serif; margin: 0; padding: 0;}

p {font-size: 0.938em;}

a { color: #EA4734; text-decoration: none; }
a:hover { color: #EA4734; text-decoration: none; }

h1,h2,h3,h4,h5, h6 {font-weight:normal; font-family:"Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Helvetica, Arial, sans-serif; }

.right{float:right;}
.left {float:left;}

.width-wrap{margin:0 auto; width:960px; position: relative;}

.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%;}

.orange {color:#EA4734;}
.black {color:#2F292B;}
.brown {color:#5E1F09;}

/* ==========================================================================
HEADER & NAVIGATION
========================================================================== */

.bgtop {height: 154px; width:100%; z-index: -99; position: absolute; top: 0;}

.nav {
    padding:15px 0 50px 0; 
    font-size: 1.063em; 
    font-family:"Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Helvetica, Arial, sans-serif; 
    z-index: 999;
}

.nav a {color:#2F292B;}
.nav a:hover {color:#EA4734;}

.logo {background: url(../img/logo.png) no-repeat transparent; width: 345px; height:70px;}
.nav-links {position:absolute; right:0; top:30px;}

/*Menu*/
ul#menu, ul#menu ul.sub-menu {padding:0; margin: 0;}
ul#menu li, ul#menu ul.sub-menu li {list-style-type: none; display: inline-block;}

/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {text-decoration: none; color: #2F292B; display:inline-block;}
ul#menu li a {padding:8px 20px;}
ul#menu li a:hover {color:#EA4734;}

/*Make the parent of sub-menu relative*/
ul#menu li {position: relative;}

/*sub menu*/
ul#menu li.dropdown ul.sub-menu {
    display:none; 
    position: absolute; 
    top: 36px; 
    left: 0; 
    min-width: 100%; 
    white-space: nowrap; 
    background-color: #6F2B15; 
    border: 1px solid #611D07;
    padding:4px 0;
}
ul#menu li.dropdown ul.sub-menu li {display: block;}
ul#menu li.dropdown:hover ul.sub-menu { display:block;}

ul#menu li.dropdown:hover { background-color: #6F2B15; color:#EA4734;}
ul#menu li.dropdown:hover a{color:#FFDA51;}

ul#menu li.dropdown ul.sub-menu li {padding:8px 20px; border-top: 1px solid #79351F; border-bottom: 1px solid #611D07;}
ul#menu li.dropdown ul.sub-menu li:first-child {border-top: none;}
ul#menu li.dropdown ul.sub-menu li:last-child {border-bottom: none;}

ul#menu li.dropdown ul.sub-menu li a {padding: 0; font-weight: 400; font-size: 15px; font-family:Helvetica, Arial, sans-serif; color:#E0CCA9; }
ul#menu li.dropdown ul.sub-menu li a:hover {color:#FFDA51; border: none; background:none; color:#FFDA51;}

/* ==========================================================================
SLIDER
========================================================================== */

#sequence {
    margin: 0 auto;
    position: absolute;
    left:50%;
    top: 0px;
    margin-left:-480px;
    height:100%;
    width: 960px;
    overflow: hidden;
}
#sequence > .sequence-canvas > li { 
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
}

#sequence > .sequence-canvas { 
    height: 100%; 
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

#sequence h1 {line-height: 35px;}
#sequence h2 {line-height: 28px;}
#sequence p {line-height: 20px;}

.sequence-menu {background: url(../img/footerbg.gif) repeat transparent; position: absolute; bottom: 0; z-index: 999; width:100%; text-align: center;}
.sequence-pagination {margin: 0 !important; padding: 0 !important;}
.sequence-menu li {padding:5px 5px; display: inline-block; cursor: pointer;}
.menu-h {background: url(../img/h_menu.png) no-repeat transparent -26px 0; width: 25px; height: 23px;}
.current .menu-h {background-position: 0 0;}
.sequence-menu li:hover .menu-h {background-position: 0 0;}
.sequence-menu li.current:hover .menu-h{background-position: 0 0;}

.sequence-pause{
    background: url(../img/pause.png) no-repeat transparent 0 0; 
    width:17px; 
    height:25px; 
    position: absolute;
    right:15px;
    top:5px;
    z-index: 9999; 
    cursor: pointer;
}
.sequence-pause:before{content: "pause"; position:absolute; right:25px; top:6px; font-size: 0.750em; color:#BA8663;}
.sequence-pause:hover{background-position: 0 -24px;}
.sequence-pause.paused{background-position: -18px 0;}
.sequence-pause.paused:hover{background-position: -18px -24px;}
.sequence-pause.paused:before{content: "play";}

.home-content {width:960px; position: absolute; bottom: 25px; left:50%; margin-left: -480px; z-index: 50;}
.home-content-box {
    opacity:.8;
    filter:alpha(opacity=80);
    width:300px; 
    height:80px; 
    background: #f5cb8a;
    background: -moz-linear-gradient(top,  #f5cb8a 0%, #f5cb8a 75%, #d8ac6e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5cb8a), color-stop(75%,#f5cb8a), color-stop(100%,#d8ac6e));
    background: -webkit-linear-gradient(top,  #f5cb8a 0%,#f5cb8a 75%,#d8ac6e 100%);
    background: -o-linear-gradient(top,  #f5cb8a 0%,#f5cb8a 75%,#d8ac6e 100%);
    background: -ms-linear-gradient(top,  #f5cb8a 0%,#f5cb8a 75%,#d8ac6e 100%);
    background: linear-gradient(to bottom,  #f5cb8a 0%,#f5cb8a 75%,#d8ac6e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5cb8a', endColorstr='#d8ac6e',GradientType=0 );
    float: left; 
    border-radius: 15px; 
    -mox-border-radius:15px; 
    -webkit-border-radius:15px;
    position: relative;
}
.home-content-box:hover {opacity: 1; filter:alpha(opacity=100);}
.home-content .cbox1 {border: 8px solid #E23028;}
.home-content .cbox2 {border: 8px solid #778237;}
.home-content .cbox3 {border: 8px solid #56190C;}

.h-bowl{background: url(../img/h-bowl.png) no-repeat transparent; width:183px; height:83px; position: absolute; right:0; bottom:0px;}
.h-maps{background: url(../img/h-maps.png) no-repeat transparent; width:144px; height:101px; position: absolute; right:0; bottom:0px;}
.h-facts{background: url(../img/h-facts.png) no-repeat transparent; width:149px; height:110px; position: absolute; right:0; bottom:0px;}
.h-info {padding:20px 0 20px 25px; font-size: 1.25em; color:#5E1F09; font-weight: bold;}
.h-info-alt {font-size: 0.800em; color:#56190C; font-weight: normal;}

/* ------  BOWL  -------- */

.bowl-block {opacity:0;}

.bowl-photo {
    opacity:inherit; 
    background: url(../img/bowl.gif) no-repeat transparent; 
    background-size: 100%; 
    width:800px; 
    height:540px; 
    position: absolute; 
    bottom: 250px; 
    right:-40px;
    background: none\9; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='_assets/img/bowl.gif', sizingMethod='scale');
}

.bowl-text {opacity:inherit; position:absolute; width: 300px; left:0; bottom:400px; letter-spacing: 0px; }

.animate-in  .bowl-block {
    opacity: 1;  
    -webkit-transition-duration: 2s;  
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s;  
    -ms-transition-duration: 2s;
    transition-duration: 2s;}

.animate-out .bowl-block {
    opacity: 0; 
    -webkit-transition-duration: 2s;  
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s;  
    -ms-transition-duration: 2s;
    transition-duration:2s;}


/* ------  FAMILY  -------- */

.family-block {opacity:0;}

.family-photo {
    opacity:inherit; 
    background: url(../img/family.gif) no-repeat transparent; 
    background-size: 100%; 
    width:700px; 
    height:433px; 
    position: absolute; 
    bottom: 300px; 
    right:0;
    background: none\9; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='_assets/img/family.gif', sizingMethod='scale');
}

.family-text {opacity:inherit; position:absolute; width: 250px; left:0; bottom:400px;}

.animate-in  .family-block {
    opacity:1; 
    -webkit-transition-duration: 2s;  
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s;  
    -ms-transition-duration: 2s;
    transition-duration: 2s;}

.animate-out .family-block {
    opacity:0; 
    -webkit-transition-duration: 2s;  
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s;  
    -ms-transition-duration: 2s;
    transition-duration:2s;}


/* ------  BOX -------- */

.box-block {opacity:0;}

.box-photo {
    opacity:inherit; 
    background: url(../img/box.gif) no-repeat transparent; 
    background-size: 100%; 
    width:850px; 
    height:477px; 
    position: absolute; 
    bottom: 300px; 
    right:-30px;
    background: none\9; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='_assets/img/box.gif', sizingMethod='scale');
}

.box-text {opacity:inherit; position:absolute; width: 350px; left:0; bottom:430px; letter-spacing: 0px;}

.animate-in  .box-block { 
    opacity:1; 
    -webkit-transition-duration: 2s;  
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s; 
     -ms-transition-duration: 2s;    
     transition-duration: 2s;
 }

.animate-out .box-block {
    opacity:0; 
    -webkit-transition-duration: 2s;  
    -moz-transition-duration: 2s;  
    -o-transition-duration: 2s;  
    -ms-transition-duration: 2s;    
    transition-duration:2s;
}

@media (max-height: 1000px) {
.bowl-photo {width:700px; height:506px; bottom:175px;}
.bowl-text {bottom:330px; left:35px;}
.family-photo {bottom: 175px;}
.family-text {bottom:300px;}
.box-photo {width:800px; height:550px; bottom:100px; right:-20px;}
.box-text {bottom:300px;}
}

@media (max-height: 750px) {
.bowl-photo {width:700px; height:506px; bottom:100px;}
.bowl-text {bottom:265px; left:35px;}
.family-photo {bottom: 100px;}
.family-text {bottom:200px;}
.box-photo {bottom:0;}
.box-text {bottom:200px;}
}


/* ==========================================================================
SECONDARY PAGES
========================================================================== */

.container-fade {
    background:#FBE260 url(../img/2bg.png) repeat transparent; 
    background: rgba(255,255,255,.3); 
    box-shadow: 0px 0px 30px #FBE260; 
    -moz-box-shadow:0px 0px 30px #FBE260;
    -webkit-box-shadow:0px 0px 30px #FBE260;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    padding:30px;
}


/* ==========================================================================
FOOTER
========================================================================== */

#sticky-wrap {clear: both; height: 100%; height: auto !important;  margin: 0 auto -200px; min-height: 100%;}
#sticky-push { clear: both; height: 200px; }

.footer {height:150px; width:100%; position: relative; margin-top: 50px;}
.bgbot {
    background: url(../img/bgbot.png) no-repeat; 
    height: 327px; 
    width: 1024px; 
    z-index: -99; 
    position: fixed; 
    bottom:0; 
    left:50%; 
    margin-left:-512px; 
    overflow: hidden;
}
.bgbot.secondary{position: absolute;}

.foot-retail {height:100px; width:100%; background: url(../img/footerbg.jpg) repeat-x; }

.foot-contact{
    float:right; 
    width: 270px; 
    height:65px; 
    margin:12px 0 0 0; 
    padding:5px 10px; 
    background: #EA4734; 
    text-align: center; 
    color:#fff;
    box-shadow: inset 0px 0px 5px #000; 

}
.foot-contact h4 {font-family:Arial, sans-serif; margin: 0; line-height: 30px; }
.foot-contact h1 {margin: 0; line-height: 30px;}

.copyright {margin-top:15px; float:left; color:#2F292B; font-size:0.875em;}

.footnav {margin-top:15px; float:right; color:#2F292B; font-size:0.875em;}
.footnav a{color:#2F292B;}
.footnav a:hover{color:#000;}
.footnav ul, li{list-style: none; display: inline;}
.footnav li {margin-left:20px;}

/* ==========================================================================
BUTTONS
========================================================================== */

.button-red {
color: #ffffff;
padding: 10px 20px;
background: #ea6b3d;
background: -moz-linear-gradient(top, #ea6b3d 0%, #e3453b 80%, #8a332d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea6b3d), color-stop(86%,#e3453b), color-stop(100%,#8a332d));
background: -webkit-linear-gradient(top, #ea6b3d 0%,#e3453b 86%,#8a332d 100%);
background: -o-linear-gradient(top, #ea6b3d 0%,#e3453b 80%,#8a332d 100%);
background: -ms-linear-gradient(top, #ea6b3d 0%,#e3453b 80%,#8a332d 100%);
background: linear-gradient(to bottom, #ea6b3d 0%,#e3453b 80%,#8a332d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea6b3d', endColorstr='#8a332d',GradientType=0 );
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #8a332d;
-moz-box-shadow: inset 0px 0px 1px rgba(255,255,255,0.7);
-webkit-box-shadow: inset 0px 0px 1px rgba(255,255,255,0.7);
box-shadow: inset 0px 0px 1px rgba(255,255,255,0.7);
text-shadow: 0px -1px 1px rgba(138,51,45,0.4)
}

.button-red:hover {
color: #ffffff;
padding: 10px 20px;
background: #ea6b3d;
background: -moz-linear-gradient(top, #ea6b3d 0%, #e3453b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea6b3d), color-stop(100%,#e3453b));
background: -webkit-linear-gradient(top, #ea6b3d 0%, #e3453b 100%);
background: -o-linear-gradient(top, #ea6b3d 0%, #e3453b 100%);
background: -ms-linear-gradient(top, #ea6b3d 0%, #e3453b 100%);
background: linear-gradient(to bottom, #ea6b3d 0%, #e3453b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea6b3d', endColorstr='#8a332d',GradientType=0 );
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #8a332d;
-moz-box-shadow: inset 0px 0px 1px rgba(255,255,255,0.7);
-webkit-box-shadow: inset 0px 0px 1px rgba(255,255,255,0.7);
box-shadow: inset 0px 0px 1px rgba(255,255,255,0.7)
}

.button-products {
color: #ffffff;
font-weight: bold;
padding: 10px 20px;
background: #ea6b3d;
background: -moz-linear-gradient(top, #ea6b3d 0%, #e3453b 80%, #8a332d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea6b3d), color-stop(86%,#e3453b), color-stop(100%,#8a332d));
background: -webkit-linear-gradient(top, #ea6b3d 0%,#e3453b 86%,#8a332d 100%);
background: -o-linear-gradient(top, #ea6b3d 0%,#e3453b 80%,#8a332d 100%);
background: -ms-linear-gradient(top, #ea6b3d 0%,#e3453b 80%,#8a332d 100%);
background: linear-gradient(to bottom, #ea6b3d 0%,#e3453b 80%,#8a332d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea6b3d', endColorstr='#8a332d',GradientType=0 );
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #8a332d;
-moz-box-shadow: inset 0px 0px 1px rgba(255,255,255,0.7);
-webkit-box-shadow: inset 0px 0px 1px rgba(255,255,255,0.7);
box-shadow: inset 0px 0px 1px rgba(255,255,255,0.7);
text-shadow: 0px -1px 1px rgba(138,51,45,0.4)
}

.button-products:hover {
color: #ffffff;
padding: 10px 20px;
background: #ea6b3d;
background: -moz-linear-gradient(top, #ea6b3d 0%, #e3453b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea6b3d), color-stop(100%,#e3453b));
background: -webkit-linear-gradient(top, #ea6b3d 0%, #e3453b 100%);
background: -o-linear-gradient(top, #ea6b3d 0%, #e3453b 100%);
background: -ms-linear-gradient(top, #ea6b3d 0%, #e3453b 100%);
background: linear-gradient(to bottom, #ea6b3d 0%, #e3453b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea6b3d', endColorstr='#8a332d',GradientType=0 );
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #8a332d;
-moz-box-shadow: inset 0px 0px 1px rgba(255,255,255,0.7);
-webkit-box-shadow: inset 0px 0px 1px rgba(255,255,255,0.7);
box-shadow: inset 0px 0px 1px rgba(255,255,255,0.7)
}

.faq {
color: #EF3D30;
font-weight: bold;
}

.contact-box {
font-size: 0.938em;
width: 240px;
float: right;
margin: 0 0 150px 100px;
background-color: #231F20;
padding: 20px;
color: #FFF;
}

.contact-head {
float:right;
font-size: 1.2em;
font-weight:bold;
margin: 22px 60px 0 0;
color: #FFF;
}

.contact-img {
float:left;
}

.contact-hr {
margin: 20px 0;
clear:both;
}

.product-text {
font-size: .75em;
}

.price {
font-size: .75em;
color: #EF3D30;
}

/* Wordpress CSS START */
#content {
width: 540px;
}

.nutrition-box {
font-size: 0.938em;
width: 240px;
float: right;
background-color: #231F20;
padding: 20px;
clear: both;
margin-bottom: 30px;
}

.nutrition-head {
float:right;
font-size: 1.2em;
font-weight:bold;
margin: 22px 60px 0 0;
}

.nutrition-img {
float:left;
}

.nutrition-hr {
margin: 20px 0;
clear:both;
}

.ingredients {
font-size: .75em;
color:#fff;
}

/* Wordpress CSS END */

/* MODAL WINDOW START */

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}
#go { margin: 0 auto; width: 200px; }

.modal_close { position: absolute; top: 12px; right: 32px; display: block; width: 14px; height: 14px; background: url(../_assets/img/modal_close.png); z-index: 2; }

#beefnut {
	width: 404px;
    padding-bottom: 2px;
    display:none;
    background: #FFF;
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);     
}

/* MODAL WINDOW END */