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


html, body {
	padding: 0px;
	margin: 0px;
}
img {
	border:none;
}
a {
	color:inherit;
	text-decoration:none;
}
header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

.main-header{
	position:relative;
	margin: 0px;
	padding: 0px;
	width:100%;
	height:55px;
	color:#000;
	background-color:#E9E9E9;
	box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
	-moz-box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
	-webkit-box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
	z-index:100;
	overflow:visible;
}

footer{
	position:relative;
	margin:0;
	padding:20px 0 20px 0;
	width:100%;
	height:100%;
	background-color:#E9E9E9;
	text-align:center;
	color:#000;
	box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
	-moz-box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
	-webkit-box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
	font-size:14px;
}

article{
	position:relative;
	margin: 0px;
	padding: 0px;
	width:100%;
	height:100%;
}

section {
	position:relative;
	display:block;
	margin:0 auto;
	height:100%;
	width:100%;
	max-width:1000px;
	overflow:auto;
}

/*Navigation*/
nav {
	position:relative;
	display:block;
	margin:0 auto;
	width:100%;
	max-height:100px;
	overflow:visitble;
	background-color:#999;
	display:table;
}

.nav-icon {
	display:none;
	position:relative;
	width:100%;
	height:100%;
	float:left;
	text-align:left;
	font-size:24px;
	background-color:#999;
	color:#fff;
}
.nav-pastry nav {
	background-color:#F09;
}
.nav-pastry .nav-icon {
	background-color:#F09;
}
.nav-pastry .nav-menu {
	background-color:#F09;
}
.nav-menu {
	position:relative;
	width:100%;
	margin:0;
	padding:0;
	text-align:left;
	float:left;
	border:none;
	background-color:#999;
	color:#fff;
}
.nav-menu ul{
	position:relative;
	float:left;
	width:100%;
	padding:0;
	margin:5px 0 0 0;
}
.nav-menu li{
	position:relative;
	display:block;
	float:left;
	width:16%;
	min-width:150px;
	color:#fff;
	text-align:center;
	list-style-type:none;
	font-size:15px;
	padding:auto;
	margin:2px;
	border-bottom:#666 thin solid;
	border-radius:10px;
}
.nav-menu li:hover{
	background-color:#CCC;
}



/*genearl divs*/
.image-display{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#333;
}
.wrapper{
	position:relative;
	display:block;
	margin:0 auto;
	height:100%;
	width:100%;
	max-width:1000px;
	overflow:hidden;
	color:#fff;
}

.holder-large {
	position:relative;
	display:block;
	margin:0 auto;
	height:100%;
	width:100%;
	max-width:1000px;
	overflow:visible;
}
.main-small-square{
	position:relative; 
	float:left;
	 width:30%;
	  height:100%;
	  background-color:#CCC;
	  margin-top:3px;
	  min-width:300px;
}


/*Home page*/
.home-side-column{
	position:relative;
	background:#CCC;
	display:block;
	float:left;
	width:20%;
	text-align:left;
	padding:0 0 14px 0;
	margin:5px 0 0 0;
}
.home-side-column ul{
	margin-left:-30px;
}
.home-side-column ul li{
	list-style-type:none;
	margin:2px 0 2px 0;
	background-color:rgba(0, 0, 0, 0.1);

}
.home-left-column{
	width:80%;
	float:left;
}
#like-div {
	position:fixed;
	background-color:rgba(0, 0, 0, 0.5);
	top:100px;
	height:120px;
	padding:5px;
	width:70px;
	z-index:250;
}



/*Subpage all pages*/
.main-left-column{
	position:relative;
	display:block;
	float:left;
	width:60%;
	height:100%;
	border:#CCC solid thin;
	color:#000;
	overflow:hidden;
}
.main-left-column h1{
	font-size:30px;
	text-align:center;
	text-transform:uppercase;
	margin-top:50px;
}
.main-left-column p{
	white-space:pre-wrap;
	padding:0 5px 0 15px;
}
.img-holder img{
	width:100%;
	border:none;
}
.main-right-column{
	position:relative;
	display:block;
	float:left;
	width:39.3%;
	height:100%;
	text-align:center;
	border:#CCC solid thin;
	color:#000;
	overflow:hidden;
}
.play-button{
	position:relative;
	width:108px;
	height:90px;
	text-align:center;
	margin-top:-150px;
	padding-bottom:20px;
	
}
#displaybox {
	position:absolute;
	top:50px;
	left:0px;
	width:100%;
	height:400px;
	text-align:center;
	vertical-align:top;
	z-index:10000;
	min-height:400px;
	background-color:rgba(0, 0, 0, 0.5);
	color:#FFF;
}
.calories{
	position:relative;
	 background:#CF0; 
	 width:100%; 
	 height:30px; 
	 text-align:center; 
	 font-size:22px;
	  padding-top:10px; 
	  margin-top:20px;
}

/*Youtube frame*/
.youtube-frame{
	width:560px;
	height:350px;
}





/*Recipe Menu bottom number selection Pages*/
.page-selection {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	margin:10px 0 10px 0;
	text-align:right;
	font-size:25px;
}
.page-selection a{
	padding:0 2px 0 2px;
}

.current-page {
	color:#C39;
}





/*Nutrition Section*/
.nutrition {
	position:relative;
	display:block;
	width:90%;
	height:100%;
	border-color:#000;
	border-width:1px;
	border-style:solid;
	color:#000;
	text-align:left;
	margin:5px;
	line-height:3px;
	font-weight:bold;
	padding-bottom:5px;
}
.nutrition h4{
	color:#000;
	text-align:center;
	font-family:"Arial Black", Gadget, sans-serif;
	text-transform:capitalize;
	font-size:25px;
}
.nutrition-row {
	position:relative;
	width:100%;
	height:100%;
	display:block;
	padding:10px 0 10px 0;
	margin-top:5px;
	border-bottom:#666 thin solid;
	font-size:13px;
}
.nutrition-element{
	position:relative;
	float:left;
	display:block;
	font-weight:bold;
	text-align:left;
	width:50%;
	height:100%;
}
.nutrition-value{
	position:relative;
	float:right;
	display:block;
	text-align:right;
	width:50%;
	height:100%;
}










/*images*/
.block-holder{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
}
.small-blocks{
	position:relative;
	font-family:Verdana, Geneva, sans-serif;
	color:#fff;
	width:16.65%;
	height:100%;
	float:left;
	text-align:center;
	margin:0;
	padding:0;
}
.small-blocks img{
	width:94%;
}
.small-blocks3 {
	position:relative;
	font-family:Verdana, Geneva, sans-serif;
	width:29%;
	background:#666;
	color:#fff;
	height:100%;
	float:left;
	border-radius: 5px;
	text-align:center;
	margin:0 2% 4px 2%;
	padding:0;
	overflow:hidden;
}
.small-blocks3 img{
	width:103%;
}
.small-blocks3 p {
	padding:0 15px 0 15px;
	margin:0;
	height:60px;
	white-space:pre-wrap;
	text-align:left;
	overflow: hidden !important;
    text-overflow: ellipsis;
}
.small-blocks-overlay{
	position:absolute;
	width:95%;
	vertical-align:top;
	text-align:center;
	background-color:rgba(0, 0, 0, 0.5);
	height:35%;
	bottom:5px;
	margin:0;
	padding:0;
	border-radius: 20px 2px 20px 10px;
	animation-name: comein; animation-duration: 2s; animation-iteration-count:1;
	-webkit-animation-name: comein; -webkit-animation-duration: 2s; -webkit-animation-iteration-count:1;
}
.small-blocks3-overlay{
	position:absolute;
	font-family:Verdana, Geneva, sans-serif;
	width:100%;
	color:#fff;
	vertical-align:top;
	text-align:center;
	background-color:rgba(0, 0, 0, 0.5);
	text-transform:uppercase;
	height:10%;
	top:0px;
	margin:0;
	padding:0;
	border-radius: 2px;
	animation-name: comein2; animation-duration: 2s; animation-iteration-count:1;
	-webkit-animation-name: comein2; -webkit-animation-duration: 2s; -webkit-animation-iteration-count:1;
}
.medium-blocks{
	position:relative;
	width:25%;
	height:100%;
	float:left;
	text-align:center;
	margin:0;
	padding:0;
}
.medium-blocks img{
	width:96%;
}

.large-blocks{
	position:relative;
	display:block;
	width:50%;
	height:100%;
	float:left;
	text-align:center;
	margin:0;
	padding:0;
}
.large-blocks img{
	width:96%;
}
.medium-blocks-overlay{
	position:absolute;
	width:96%;
	color:#fff;
	vertical-align:top;
	text-align:center;
	background-color:rgba(0, 0, 0, 0.5);
	height:25%;
	bottom:0px;
	margin:5px;
	padding:0;
	padding-top:10px;
	border-radius: 5px 5px 5px 5px;
	animation-name: comein; animation-duration: 2s; animation-iteration-count:1; 
	-webkit-animation-name: comein; -webkit-animation-duration: 2s; -webkit-animation-iteration-count:1;
}
@keyframes comein {
  0% {
    height:0;
  }
  100% {
    height:25%;
  }
}
@-webkit-keyframes comein {
  0% {
    height:0;
  }
  100% {
   height:25%;
  }
}
@keyframes comein2 {
  0% {
    height:0;
  }
  100% {
    height:10%;
  }
}
@-webkit-keyframes comein2 {
  0% {
    height:0;
  }
  100% {
   height:10%;
  }
}

.section-into-title-h{
	padding:0; 
	margin:0; 
	width:100%; 
	height:90%;
	margin:5px 0 0 0;
	font-size:40px; 
	text-align:center;
	background:#CCC;
	color:#fff;
}
.regular-image-div{
	position:relative;
	width:50%;
	float:left;
	height:100%;
}
.regular-image-div2{
	position:relative;
	width:25%;
	float:left;
	height:100%;
}
.regular-image-div img{
	border:none;
	width:100%;
}
.regular-image-div2 img{
	border:none;
	width:100%;
}


/*Carousel*/
.large-display-image{
	padding:0;
	margin:0;
	width:100%;
}
.large-display-image-overlay{
	position:absolute;
	background-color:rgba(0, 0, 0, 0.5);
	border-radius: 5px 5px 5px 5px;
	text-align:center;
	box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
	-moz-box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
	-webkit-box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
	width:200px;
	height:300px;
	color:#fff;
	padding:10px;
	display:block;
	overflow:hidden;
}

#carousel_inner {  
float:left; /* important for inline positioning */  
width:100%; /* important (this width = width of list item(including margin) * items shown */  
overflow: hidden;  /* important (hide the items outside the div) */  
/* non-important styling bellow */  
background: #F0F0F0;  
}  
  
#carousel_ul {  
position:relative;  
left:0; /* important (this should be negative number of list items width(including margin) */  
list-style-type: none; /* removing the default styling for unordered list items */  
margin: 0px;  
padding: 0px;  
width:9999px; /* important */  
/* non-important styling bellow */  
}  
  
#carousel_ul li{  
float: left; /* important for inline positioning of the list items */  
width:100%;  /* fixed width, important */  
/* just styling bellow*/  
max-width:1000px;
padding:0px; 
height:100%; 
max-height:400px;  
margin-left:0;  
margin-right:0;  
}  
  
#carousel_ul li img {  
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/  
/* styling */  
width: 100%;
cursor:pointer;  
cursor: hand;  
border:0px;  
}  

/*ad section*/
.google-ad-secResponsive{
	 position:relative;
	 text-align:center;
	 display:block;
	 overflow:hidden;
	 background-color:#CCC;
}