@charset "UTF-8";

body {
	margin: 0 auto;
	width: 1224px;
	font-family: raleway, Helvetica, Arial, sans-serif;
}


li a {
	color: #EEEEEE;
	text-decoration: none;
	font-family: Raleway, Helvetica, "arial narrow",;
	font-size: 18px;p
}

section {
	background-color: white;
	clear: both;
	font-size: 22px;
	text-align: left;
	display: block;
	padding: 5px;
	margin: 0 auto;
}


article, aside, footer, header, nav, section {
	display: block;
}

*{
	padding: 0;
	margin: 0 auto;
	box-sizing: border-box;
	list-style-type: none;
}

h1, h2 {
	
	font-weight:normal;
}

.large {font-size:1.9em;}
.xlarge {font-size: 2.8em;}

/*------Navigation---------------------------------------------------------------------------------------------------------------------------*/

.navbar-custom .navbar-brand img{
  	margin-top: -8px;
        }  
      
.navbar-custom .navbar-brand {
  	color: #ffc800;
  	font-family: adolphusv, raleway, "pea_alexis", "over the rainbow", sans-serif;
	padding: 20px;
	padding-top: 15px;
	padding-left: 5px;
	font-size: 36px;
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
  color: #3f3d3d;
  background-color: transparent;
}

.navbar-custom .navbar-nav > li > a {
  color: #3f3d3d;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
  color: #ffc800;
  background-color: transparent;
}
.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
  color: #009300;
 }
.navbar-custom .navbar-nav > .disabled > a,
.navbar-custom .navbar-nav > .disabled > a:hover,
.navbar-custom .navbar-nav > .disabled > a:focus {
  color: #cccccc;
  background-color: transparent;
}
.navbar-custom .navbar-toggle {
  border-color: #ffc800;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: #dddddd;
}
.navbar-custom .navbar-toggle .icon-bar {
  background-color: #3f3d3d;
}

.navbar-custom .navbar-collapse {padding-left:0px;}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
  border-color: #ffc800;
}

.navbar-custom .navbar-form {
 margin-top: 12px;
}

.navbar-custom .navbar-nav > .dropdown > a:hover .caret,
.navbar-custom .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #3f3d3d;
  border-bottom-color: #3f3d3d;
}
.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
  background-color: #deae00;
  color: #3f3d3d;
}
.navbar-custom .navbar-nav > .open > a .caret,
.navbar-custom .navbar-nav > .open > a:hover .caret,
.navbar-custom .navbar-nav > .open > a:focus .caret {
  border-top-color: #3f3d3d;
  border-bottom-color: #3f3d3d;
}
.navbar-custom .navbar-nav > .dropdown > a .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

@media (max-width: 767) {
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #3f3d3d;
    background-color: transparent;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #3f3d3d;
    background-color: #deae00;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
  }
}
.navbar-custom .navbar-link {
  color: #ffffff;
}
.navbar-custom .navbar-link:hover {
  color: #3f3d3d;
}

/*------Home------------------------------------------------------------------------------------------------------------*/

#home{
	background-image: url("images/happy2.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 20px;
	height: 620px;
	position: relative;
}


.image_statement{
	/*font-family: "over the rainbow";*/
	right: 3%;
	top: 30%;
	color: #FFFFFF;
	position: absolute;
}

/*------About----------------------------------------------------------------------------------------------------------*/

#about {
	background-color: #ffc800;
	height: 1800px;
}


#about ul { 
	float: left;
    	padding:0;
    	margin:20px 0;
    	width: 410px;
}
.ca-about li{
	margin: 18px;
   	width: 400px;
   	height: 400px;
   	border: 10px solid #f1f1f1;
   	overflow: hidden;
  	position: relative;
  	float:left;
    	background: #fff;
    
    	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    	-webkit-border-radius: 210px;
    	-moz-border-radius: 210px;
    	border-radius: 210px;
    	-webkit-transition: all 400ms linear;
    	-moz-transition: all 400ms linear;
    	-o-transition: all 400ms linear;
    	-ms-transition: all 400ms linear;
    	transition: all 400ms linear;
}

.ca-about li:last-child{
    margin-right: 0px;
}

/*.ca-about li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
   -moz-box-shadow:0px 0px 3px #000000;
   -webkit-box-shadow:0px 0px 3px #000000;
   box-shadow:0px 0px 3px #000000;

}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 40px;
    color: #f6f6f6;;
    line-height: 60px;
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0px;
    top: 100px;
    text-align: center;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
*/
.ca-main{
	font-family: "pea_alexis",raleway, cursive;
	font-size: 10em;
    	color: #ffc800;
    	position: absolute;
    	top: 33%;
    	height: 400px;
    	width: 400px;
    	left: 18%;
    	margin-left: -85px;
    	opacity: 0.8;
    	text-align: center;
}

.ca-sub .large {font-size: 2em; color: #ffc800;}

.ca-sub{
    text-align:center;
    color: #3f3d3d;
    font-size: 2em;
    position: absolute;
    height: 300px;
    width: 300px;
    left: 35%;
    margin-left: -85px;
    top: 30px;
    opacity: 0;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}

.ca-about li:hover{
    background: #f7f7f7;
    border-color: #fff;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 45px 60px -50px #000000;
}
.ca-about li:hover .ca-icon{
    color: #555;
    font-size: 60px;
}
.ca-about li:hover .ca-main{
    display: none;
}
.ca-about li:hover .ca-sub{
    opacity: 0.8;
}

.about {
	padding: 18px;
	display: inline-block; 
	color: #3f3d3d; 
	width: calc(100% - 400px - 18px - 18px);
	font-size: 2em;
	float: right;
}

/*#about .delicious_art {
	background-image: url("images/chalk_background.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	width: 620px;
	height: 530px;
	border: 5px #3f3d3d double;
	border-radius: 5px;
	padding: 25px;
	font-size: 2.5em;
	color: white;
	display: inline-block;
	float: right;
	font-family:'Chalk Line Outline';
	word-break: break-all;
}
*/

/*------Catering Menu----------------------------------------------------------------------------------------------*/

#catering_menu {width: 100%;
	background-color: grey;
	padding: 10px 0px 15px 0px;
	margin: 0 auto;
	display: block;
}

#catering_menu h2 {padding: 0px;
	padding-bottom: 10px;
	text-align: center;
}

.gallery {width: calc(100% - 60px); margin: 0 auto; display: block; font-size:0;}
.menu {	padding: 0;
	margin: 0px 15px 15px 0px;
	position: relative;
	width: calc(100%/3 - 10px);
	height: 400px;
	display: inline-block;
	font-size: 22px;
}

.menu:nth-of-type(3n) {
  margin-right: 0;
}

.menu img {
	border-radius: 10px;
	width: 100%;
	height: 400px;
}

.menu_item {
	background-image: url("images/chalk_background.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	height: 70px;
	border-radius: 0 0 10px 10px;
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
	transition: height 0.5s ease-in-out;
}

.menu:hover .menu_item {
	height: 400px;
}

.menu_item:hover {
	height: 400px;
	border-radius: 10px;
}

.menu_item h3 {
	padding: 5px;
	font-family: "pea_alexis", "over the rainbow", cursive;
	font-size: 0.75em;
	text-align: center;
	color: white;
}

.menu_item p {
	font-family: raleway,Tahoma, sans-serif;
	font-size: .75em;
	color: white;
	text-align: left;
	padding: 15px;
}

.menu_item form{
	font-size: 0.5em;
	}
	
.menu_item .paypal {margin-left: 15px;}

/*-----Recipes-------------------------------------------------------------------------------------------------*/

#recipes {border: 3px solid #ffc800;}


#recipes h2 {color:#ffc800;padding-left:25px;}
#recipes h3 {padding:30px 0px 0px 30px;}

#recipes .underline {
	font-size: .9em;
	margin-left:30px;
    padding:0px;
    border-bottom: 1.5px solid #ffc800;
}

#recipes p {padding:0px; margin-left:30px;}

.recipes .col2 {width: 100%; height: 370px;}
.recipes .empty {background-image: url("images/artichoke_iced_tea3.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 5px;
	width: 320px; 
	height: 320px;
	float: left;
	padding: 0;
	margin: 25px 30px;}

.recipes .introduction {margin:0;
	display: inline-block;
	margin-bottom: 20px;
	float: left;
	width: calc(100% - 320px - 90px);
	position: relative;
	right: 30px;
	top: 20%;
}

.recipes .recipe-details {padding-right: 20px;}

#artichoke-iced-tea {
	padding:0px -5px 0px -5px;
	margin:0px -5px 0px -5px;
	}
	
.recipes .fb-like {padding-left:30px;}

.ig-b- { display: inline-block; }
/*.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } 
.ig-b-:active { background-position: 0 -120px; }
.ig-b-24 { width: 24px; height: 24px; padding-bottom: -16px;
	background: url(images/instagram.png) no-repeat; } */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-24@2x.png); background-size: 60px 178px; } }

.ig-b- img {
	margin-bottom: -4px;
	padding-left: 5px;
	padding-right: 5px;
}

/*-------Comments-------------------------------------------------------------------------------------------------------------*/
	
.comments {padding-left:30px;}

/*-------Contact--------------------------------------------------------------------------------------------------------------*/

#contact{
	background-color: white;
}

#contact h2 {
	text-align:left; 
	padding-left:18px; 
	padding-top:15px; 
	padding-right:160px
}

.contact_image {
	background-image: url("images/Special_Events.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 5px;
	width: calc(100% - 316px - 30px); 
	height: 500px;
	float: right;
	display: inline-block;
	padding: 0;
	margin-top: 38px;
	}

#social, footer {
	clear: both; 
    	background-color: #3f3d3d;
	padding: 10px 20px;
	text-align: center;
	font-size: 16px;
	color: #ffffff;
}

#social { background-color: #cccccc;}

/*----------------------Responsive---------------------------*/

@media screen and (max-width : 1223px) {
	body{width: 1024px;}
	#home {height: 540px;}

	#about {
		height: 1080px;
	}
	
	#about ul { 
		margin:20px 20px 20px 0;
    	width: 360px;
	}
	.ca-about li{
		margin: 18px;
		margin-left: 40px;
    	width: 300px;
    	height: 300px;
    	-webkit-border-radius: 160px;
    	-moz-border-radius: 160px;
    	border-radius: 160px;
	}

	.ca-main{
		font-size: 7em;
        top: 33%;
    	height: 300px;
    	width: 300px;
    	left: 25%;
    }
	.ca-sub .large {font-size: 1.5em;}
	.ca-sub{
    	font-size: 1.5em;
   		height: 300px;
    	width: 300px;
    	left: 28%;
	}
	
	.ca-about li:first-child{display:none;}

	.about {
	padding: 20px
	padding-left: 0;
	display: inline-block; 
	color: #3f3d3d; 
	width: 630px;
	font-size: 1.1em;
	margin: 0px;
}
}

@media screen and (max-width : 1023px) {
	body{width: 960px;}
	.navbar-custom .navbar-nav > li > a {
  		font-size: 1em;
  		color: black;
		}
	#home {height: 540px;}
	
	
	#about {
		height: 1400px;
	}

	#about ul { 
		margin:20px 20px 20px 0;
    	width: 320px;
	}
	.ca-about li{
		margin: 18px;
    	width: 300px;
    	height: 300px;
    	-webkit-border-radius: 160px;
    	-moz-border-radius: 160px;
    	border-radius: 160px;
	}

	.ca-main{
		font-size: 7em;
        top: 33%;
    	height: 300px;
    	width: 300px;
    	left: 25%;
    }
	.ca-sub .large {font-size: 1.5em;}
	.ca-sub{
    	font-size: 1.5em;
   		height: 300px;
    	width: 300px;
    	left: 28%;
	}
	.ca-about li:first-child{display: block;}
	.about {
	padding: 18px;
	display: inline-block; 
	color: #3f3d3d; 
	width: 600px;
	font-size: 1.25em;
	margin: 0;
}

	.about .intro {
	font-size: 1.18em;
	}
	
	#contact h2 {padding-right: 80px;}
	
/*	#about .delicious_art { 
		width: 400px; height: 410px;
		overflow: hidden; font-size: 2em;
		padding-top: 15px; 
		}	*/
	.menu_item h3 {font-size: 0.65em;}
}

@media screen and (max-width: 899px) {
	body {width: 640px;}
	
	#about {height: 1910px;}
	
	#about ul {
		margin:20px auto;
    		width: 100%;
    		display: inline-block;
	}
	
	#about ul li { 
		margin: 12px;
    	width: 280px;
    	height: 280px;
    	-webkit-border-radius: 150px;
    	-moz-border-radius: 150px;
    	border-radius: 150px;
    	display: inline-block;
	}
	
	#about ul li:nth-of-type(2n) {
 		 margin-right: 0;
	}
	
	.ca-main{
		font-size: 7em;
        top: 33%;
    	height: 280px;
    	width: 280px;
    	left: 25%;
    }
	.ca-sub .large {font-size: 1.5em;}
	.ca-sub{
    	font-size: 1.25em;
   		height: 280px;
    	width: 250px;
    	left: 35%;
	}
	.about {margin: 0; width: 100%; padding: 0 20px;}
	
	.menu {margin-right: 10px; margin-bottom: 10px;
		width: calc(100%/2 - 5px);
		}
	.menu:nth-of-type(3n) {
 		 margin-right: 10px;
	}
	.menu:nth-of-type(2n) {
 		 margin-right: 0;
	}
	
	.menu_item h3 {font-size: 0.65em;}
	
	.recipes .empty {margin-bottom: 0px;}
	
	.recipes .introduction {
	display: block;
	padding-bottom: 20px;
	margin-top:-30px 30px 20px 0px;
	width: calc(100% - 50px);
	position: static;
	}
	
	.contact_image { display: none;}
}

@media screen and (max-width: 480px) {

	body{width: 360px;}
	.xlarge {font-size: 2em;}
	.navbar-custom .navbar-brand{font-size: 1.8em;}
	.image_statement{
		font-size: 1em;
		top: 80%;
		background-color: rgba(0,0,0,.6);
		padding: 5px;
		border: 1px solid rgba(0,0,0,.6);
		border-radius: 3px;
		}
	#home {height: 480px;}

	#about {font-size: 1.25em;
		height: 2518px;
	}

	#about ul { 
		padding-left: 20px;
   	 	margin:20px auto;
    	width: 360px;
	}
	#about ul li:nth-of-type(2n) {
 		 margin-right: 12px;
	}
	.about {width:100%; padding: 0 15px;}
	
	.about .intro {
		font-size: 1.1em;
	}

	.ca-about li{
		margin-left: -10px;
	
    	}
    	
    	.gallery {width: 92%;}
    	.menu {margin-right: 0px;
    		
    		width: 100%;
	}
   	#recipes h2{margin-top: 20px; padding-left: 20px;}
   	#recipes h3{margin-top: 0px; padding-left: 28px;}
    	#recipes p {font-size:.75em;}
	.recipes .empty {width: 300px; height: 300px;margin-left: 25px;}
	
	#contact h2 {text-align: left; font-size: 1.75em;}
	.contact_image { display: none;}
	#contact iframe {float: left;}
}