/* app.css - for Foundation Version 6.2.4 */


/** Define general page layout **/

body {
	background: #D3D3D3;
	/* background: red;  /* Uncomment to check for color leaks */
}

.row {
	max-width: none;
}

/** Specify an initial height for the sticky menu until it is calculated by javascript.   **/ 
/** This initialization minimizes the vertical jumping of the page contents when the page **/ 
/** is first loaded.  These values may need to be tweated whenever a menu change is made. **/

@media only screen and (max-width: 639px) {                           /* Small size screen */
	#menu-container.sticky-container {height: 63px;}
}

@media only screen and (min-width: 640px) and (max-width: 1023px) {   /* Medium size screen */
	#menu-container.sticky-container {height: 53px;}
}

@media only screen and (min-width: 1024px) {                          /* Large size screen */
	#menu-container.sticky-container {height: 55px;}
}


/** Define image-logo layout **/

.image-logo {
	background-size: 100%;
	background-attachment: fixed;
	padding: 0 0;
	margin-bottom: 0px;
	background-repeat: no-repeat;
}

.image-logo h1 {
	color: #000;
	text-align: center;
	margin-bottom: 15px;
	font-size: 3em;
	/* text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); */
}

@media only screen and (max-width: 800px) {
	.image-logo {
		margin-bottom: 0;
		padding: 0;
	}
	.image-logo h1 {
		font-size: 1.8em;
	}
}

@media only screen and (max-width: 480px) {
	.image-logo h1 {
		font-size: 1.0em;
	}
}

@media only screen and (max-width: 360px) {
	.image-logo h1 {
		font-size: .6em;
	}
}


/** Define sections layouts **/

#top-image {
	background-color: #DFD8AC;
}

#intro {
	background-color: #DFD8AC;
}

#products {
	background-color: #00B9CE;
}

#portfolio {
	background-color: #F47933;
}

#specials {
	background-color: #A9B35D;
}

#contact {
	background: #FFFF99;
	padding-bottom: 30px;
}

#products h2 {
	color: white;
	text-align: center;
}

#products h4 {
	color: black;
	text-align: center;
}

#portfolio h2 {
	color: #FFF;
	text-align: center;
}

#portfolio h4 {
	color: black;
	margin-bottom: 30px;
}

#portfolio img, #about img {
	display: block;
	margin: 0 auto;
}

#specials h2, specials h4 {
	color: white;
	text-align: center;
}


/** Define the color break division between sections */

section {
	padding-top: 40px;
	padding-bottom: 40px;
}


/** Define menu layout **/

#menu-container {
	background: transparent;
}

.title-bar {
	background: rgba(211, 211, 211, .95);
}

.title-bar-title, .title-bar-left, .title-bar-right {
	color: #EA421E;
	background: transparent;
}

.title-bar-title {
	color: black;
	line-height: 1.0;
	padding: 0.7rem 0 0.7rem 0.5rem;
}

.title-bar-right {
	padding-right: 0rem;
	padding-left: 0rem;
}

.show-for-large .menu>li>a {
	padding: 0.7rem 1.5rem;
}

.show-for-medium .menu>li>a {
	padding: 0.7rem 0.5rem;
}

.show-for-small .menu>li>a {
	padding: 0.6rem 0.5rem 0.4rem;
}

@media only screen and (max-width: 359px) {
	.show-for-small .menu>li>a {
		padding-left: 0.25rem; padding-right: 0.25rem;
	}
}

a:focus {
	color: #258FAF;
	text-decoration: underline;
}

a:hover {
	color: #000;
}


/** Define misc items **/

h1, h2, h3, h5, h6, a {
	color: #EA421E;
}

h2 {
	font-size: 1.75rem;
}

ul, ol, dl {
	list-style: none;
}

.baskerville {
	font-family: 'Libre Baskerville', serif;
}

#contact li>ul>li {
	padding: 5px 0;
}

.thumb {
	border: none;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
	border-radius: 150px;
}

.copy {
	background: lightgray;
	padding: 6px 0;
}

.copy p {
	font-size: 0.8rem;
	color: #EA421E;
	margin-bottom: 0;
}


/**  Fix to Orbit heights not changing on resize as described in entry by ooksanen  **/
/**  on Jul 22 2016 in https://github.com/zurb/foundation-sites/issues/7815         **/

ul.orbit-container {
	height: auto !important;
}
li.orbit-slide {
	max-height: none !important;
}