/*
Website Design/Build:
Kevin Snell
Formulate Communicative Design
www.formulate.ca
*/


/* GLOBAL */

html,body { margin:0; padding:0; color:#687586; font-size:15px; }

input:focus { outline: none; }

h1 { margin-bottom:40px; color:#000; line-height:1.2em; font-weight:300; font-family: "Roboto Slab", serif; font-optical-sizing: auto; font-weight: 800; font-style: normal; }

h3 { margin:30px 0 -10px 0; }

a { color:#378ECC; }
a:hover { text-decoration:none; color:#f20; }

em { color:#687586; }

.uk-button { min-width:220px; margin:5px 0; background:#000; color:#fff; font-weight:400; font-size:16px; letter-spacing:1px; text-transform:uppercase; height:44px; line-height:42px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.uk-button:hover { background: #834a46; color: #fcc88d; }

#editpage { position: fixed; top: 6px; left: 49%;  z-index:9999; }
#editpage a { float:left; padding: 3px 6px 5px 6px; background: #db1174; color: #FFB8DB; display: block; font-weight: normal; font-size:14px; z-index:9999; margin:0 1px; text-decoration:none; line-height:1em; stroke-width:2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#editpage a:hover { background: #ffffcc; color: #000; text-decoration:none; }


/* STYLES */

.padded { padding:10px; }

#header { padding:0 20px 0 30px; background:rgba(45,8,8,.9); }
#header .logo { height:80px; }

.menu { text-align:right; }
.menu ul { margin:0; padding:0; list-style:none; }
.menu ul li { display:inline; padding:0 15px; }
.menu ul li a { font-size:18px; color:#fff; }
.menu ul li a:hover { color:#fcc88d; }
.menu .uk-icon { position:relative; top:-1px; }

.uk-offcanvas-bar .uk-nav-primary>li { padding:5px 0; line-height:1.2em; }
.uk-offcanvas-bar .uk-nav-primary>li>a { font-size:18px; color:#fff; }
.uk-offcanvas-bar .uk-nav-primary>li>a:hover { color:#fcc88d; }

#hero { position:relative; z-index:-1; background:#000; }
#hero img { width:100%; }

#spacer { height:58px; }

#content { position:relative; background:#fff; width:100%; max-width:1180px; margin:0 auto; min-height:500px; font-size:18px; }

.tagline { display:block; width:100%; max-width:1100px; margin:0 auto; }

#ctas { margin-top:30px; }
#ctas div { position:relative; border:10px solid #fff; overflow:hidden; max-width:500px; margin:0 auto; }
#ctas h3 { position:absolute; bottom:0; left:0; margin:0; padding:6px 0 7px 0; width:100%; font-size:16px; letter-spacing:1px; color:#fff; text-transform:uppercase; text-align:center; background:rgba(107,30,30,.8); font-family: "Roboto Slab", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
#ctas a:hover h3 { color:#fcc88d; }

#bowl { margin:50px 0; }
#bowl .image { text-align:center; }
#bowl .image img { width:90%; max-width:400px; position:relative; margin-bottom:20px; }
#bowl .text { padding:0 10px; text-align:justify; color:#552424; font-size:16px; font-weight:500; line-height:1.6em; }
#bowl .text p.buttons { text-align:center; }
#bowl .text p.buttons a { margin:5px 15px; }

.gallery img { margin-bottom:10px; width:100%; padding:5px; background:#fff; }

#footer { padding:40px 30px 20px 30px; min-height:200px; text-align:center; background:#000 url('../images/footer.jpg') no-repeat center center; background-size:cover; font-size:18px; color:#987878; }
#footer a { color:#fff; }
#footer a:hover { color:#fcc88d; }
#footer p.links { letter-spacing:1px; }
#footer p.links a { padding:0 20px; }
#footer p.serving { color:#bbb; font-size:15px; }
#footer ul { margin:0; padding:0; list-style:none; font-size:16px; }
#footer ul li { display:inline; }
#footer ul li::after { content:' •'; }
#footer ul li.last::after { content:''; }
#footer ul li a { color:#DCB0B0; padding:0 3px; }
#footer p.copyright { font-size:13px; }
#footer p.copyright span { padding:0 10px; }
#footer p.copyright img { position:relative; top:-1px; width:15px; height:15px; margin-right:5px; opacity:.5; }
#footer p.copyright a { color:#987878; }
#footer p.copyright a:hover { color:#fcc88d; }

.page1 h1 { font-size:28px; margin:0 0 -5px 0; text-align:center;  }


/* MEDIA QUERIES */

@media only screen and (min-width: 640px) { 

	.padded { padding:30px; }

	#hero { top:-80px; margin-bottom:-80px; }
	
	.uk-offcanvas-bar .uk-nav-primary>li>a { font-size:20px; }
	  
}

@media only screen and (min-width: 960px) { 
	
	#bowl .image img { margin-bottom:0; }
	
}

@media only screen and (min-width: 1024px) { 	
}

@media only screen and (min-width: 1200px) {  	
	
	#content { top:-57px; margin-bottom:-20px; }
	.page1 #content { margin-bottom:-57px; }
	
	#bowl .image img { left:-35px; }
	#bowl .text { font-size:18px; line-height:1.8em; }
	
}

@media only screen and (min-width: 1400px) {   
}

@media only screen and (min-width: 1600px) { 
}