/*
** Foundation Reset hey
*/

* {
    letter-spacing: .07em;
    -moz-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	
	-webkit-font-smoothing: antialiased;
	
	font-family: 'Merriweather', serif;
	font-weight: 400;
}

.row {
    max-width: none;
}
 
body {
    color: #111;
    position: static;
}

body, html {
	/*height: auto;*/
}

a {
    color: darkgreen;
    text-decoration: underline;
}

a:hover {
    color: #003300;
	background: #EEFFEE;
}

h1, h2, h3, h4 {
	font-family: 'Merriweather', serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #5e5044;
    margin: .1em;
}


img {
	border: none;
	margin: 0;
	padding: 0;
}


#wrapper {
	position: relative;
    width: 100%;
    min-height: 100%;
    background: white url("../img/background.jpg");
    background-size: auto;
}


/*
** homepageCanvas
*/

#canvasContainer {
    width: 100%;
    height: 100%;
}

#homepage001 {
    width: 100%;
    height: 100%;
}


/*
** topNav
*/

#topNav {
    z-index: 100;
    position: relative;
    top: 0;
    left: 0;
    color: #111;
    font-size: 20px;
    background: #010 url("../img/veggieHeader.jpg") no-repeat;
    background-size: cover;
    background-position: center center; 
    height: 272px;
	-webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.5);
	box-shadow: 0 5px 10px 0 rgba(0,0,0,.5);
}

#topNav #logo {
    display: block;
    width: 100%;
    height: 194px;
    background: transparent url("../img/localRoots_logo.png") no-repeat;
    background-size: auto;
    background-position: center center; 
}

#headerRibbon {
	position: absolute;
	right: 0;
	top: 0;
	width: 164px;
	height: 150px;
    background: transparent url("../img/cornerRibbon.png") no-repeat;
    background-size: contain;
    background-position: top right; 
}

#headerRibbon:hover {
	background: transparent url("../img/cornerRibbonHover.png") no-repeat;
}


@media only screen and (max-width: 768px) {
    #topNav #logo { font-size: 26px; }
}

#mobileNavBtn {
	height: 40px;
	padding: 0 5px;
	margin: 0;
	font-size: 36px;
	text-align: right;
	cursor: pointer;
    border-bottom: 1px solid #EEE;
    background: white;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 70%; 
    background-image: url(../img/icon-menu.svg);
}

#headerMainMenu {
    background: white;
    width: 100%;
	height: 40px;
	overflow: hidden;
    padding: 10px 0;

    border-top: 1px solid #04351e;
    border-bottom: 1px solid #04351e;
    
    border-top: 1px solid rgba(11,44,22,.5 );
    border-bottom: 1px solid rgba(11,44,22,.5 );
        
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#headerSecondaryMenu ul, #headerMainMenu ul { /* wp reset */
	margin: 0;
	line-height: 1em;
    text-align: center;
    white-space:nowrap;
}

#headerMainMenu ul li {
    display: inline-block;
    padding: 0 7px;
    border-left: #444 1px solid;
    cursor: pointer;
}

#headerMainMenu ul li:first-child{
    border-left: none;
}

#headerMainMenu ul li a {
	text-decoration: none;
    font-size: 20px;
    line-height: 20px;
    color: #444;
    font-weight: 700;
    text-transform: uppercase;
}

#headerMainMenu ul li a:hover {
    background: transparent;
}

#headerMainMenu ul li.current-menu-item {
    text-decoration: underline;
}

#headerSecondaryMenu{
	height: 28px;
	width: 100%;
	background: white;
	background: rgba(255,255,255, .77);
	overflow: hidden;
	margin-top: 10px;
	padding: 9px 0;
	
    font-size: 14px;
    line-height: 14px;
}

#headerSecondaryMenu ul li{
	list-style-type: none;
	display: inline-block;
	width: auto;
}

#headerSecondaryMenu ul li:after {
	content: ' -';
}

#headerSecondaryMenu ul li:last-child:after {
	content: none;
}

#headerSecondaryMenu ul li a {
	text-decoration: none;
    color: #444;
    font-weight: 700;
    text-transform: uppercase;
}
#headerSecondaryMenu ul li a:hover, #headerSecondaryMenu ul li.current-menu-item a{
    background: transparent;
}

@media only screen and (max-width: 40em) {  /* small screens */
	#topNav{ height: 150px; }
	#topNav #logo {
		height: 97px;
		background-size: auto 116px;
	}
	
	#headerRibbon { width: 90px; height: 90px;}
	
	#headerMainMenu { height: 30px; padding: 5px; }
	#headerMainMenu ul li { padding: 0 0 0 4px; }
	#headerMainMenu ul li a {font-size: 13px; line-height: 12px;}
	
	#headerSecondaryMenu{ height: 23px; margin-top: 0; padding: 3px; }
	#headerSecondaryMenu ul li a {font-size: 11px; line-height: 12px;}
	#headerSecondaryMenu ul li:after{font-size: .5em;}
}


/*
**	HomeSlide
*/
#homeSlideContainer{
	text-align: center;
	padding: 0 20%;
}

#homeSlide{
	display: inline-block;
	overflow: hidden;
	width: 100%;
	height: 360px; 
	border: 1px solid white;
	background: #030;
	position: relative;
	margin: 0 auto;
	-webkit-box-shadow: 0 0 14px 1px rgba(0,0,0,.44);
	box-shadow: 0 0 14px 1px rgba(0,0,0,.44);
}

#homeSlideLeft, #homeSlideRight{
	position: absolute;
	top: 50%;
	margin-top: -32px;
	width: 40px;
	height: 64px;
	background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center; 
    cursor: pointer;
}

#homeSlideLeft{ background-image: url("../img/homeSlideLeft.png"); left: 10px; }
#homeSlideRight{ background-image: url("../img/homeSlideRight.png"); right: 10px; }

#homeSlideLeft:hover{ background-image: url("../img/homeSlideLeftHover.png"); opacity: .5;}
#homeSlideRight:hover{ background-image: url("../img/homeSlideRightHover.png"); opacity: .5;}

#homeSlide .image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background-size: cover;
    background-position: center center; 
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) { /* medium screens */
	#homeSlideContainer{ padding: 0 10%; }
}

@media only screen and (max-width: 40em) {  /* small screens */
	#homeSlideContainer{ padding: 0; }
	#homeSlide{ 
		height: 240px;
		border: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
}


/*
**	Content
*/

#content{
	padding: 50px 0 100px 0;
}

@media only screen and (max-width: 40em) {  /* small screens */
	#content{
		padding: 0 0 100px 0;
	}
}

#the_images{
	padding-left: 20%;
}

#the_images img{
	width: 100%;
	height: auto;
	margin: 0 20px 10px 20px;
	border: 1px solid white;
	-webkit-box-shadow: 0 0 7px 1px rgba(0,0,0,.44);
	box-shadow: 0 0 7px 1px rgba(0,0,0,.44);
}

#the_images i {
	font-size: .9em;
	margin: 0 20px 10px 20px;
	display: inline-block;
}


#the_content *{
	-webkit-user-select: all;
	-khtml-user-select: all;
	-moz-user-select: all;
	-ms-user-select: all;
	user-select: all;
}

#the_content{ padding: 0 20% 0 3%; }

#the_content.home{padding: 0 20%; }

@media only screen and (min-width: 40.063em) and (max-width: 64em) { /* medium screens */
	#the_images{ padding-left: 10%; }
	#the_content{ padding: 0 10% 0 3%; }
	#the_content.home{padding: 0 10%; }
}


@media only screen and (max-width: 40em) {  /* small screens */
	#the_images{ padding: 4%; text-align: center; }
	#the_images a, #the_images i{ display: none; }
	#the_images a:first-child{ display: inline; }
	#the_images img{ margin: 0; max-width: 100%; width: auto; max-height: 160px;}
	
	#the_content{ padding: 4%; }
	#the_content.home{padding: 4%; }
}


/*
**	Footer
*/

#footer {
	position: relative;
    text-align: center;
    height: 630px;

    padding: 1% 5% 1% 5%;
}

#footerField{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 428px;
    background: transparent url("../img/footerField.png") no-repeat;
    background-size: cover;
    background-position: center top; 
    text-align: center;
}



#footerLogo {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    background-image:url('../img/localroots_logo-footer.png');
	width: 100%;
	height: 160px;
}

#footerMainMenu {
    width: 100%;
	height: 40px;
	overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px solid #5e5044;
}

#footerMainMenu ul, #footerSecondaryMenu ul { /* wp reset */
	margin: 0;
	line-height: 1em;
    text-align: center;
    white-space:nowrap;
}


#footerMainMenu ul li, #footerSecondaryMenu ul li {
    display: inline-block;
    cursor: pointer;
	list-style-type: none;
	display: inline-block;
	width: auto;
}

#footerMainMenu ul li{
    border-left: #EEE 1px solid;
    padding: 0 7px;
}

#footerMainMenu ul li a {
	text-decoration: none;
    font-size: 20px;
    line-height: 20px;
    color: #444;
    font-weight: 400;
    text-transform: uppercase;
}

#footerMainMenu ul li a:hover, #footerMainMenu ul li.current-menu-item {
    text-decoration: underline;
}

#footerSecondaryMenu{
	height: 28px;
	width: 100%;
	overflow: hidden;
	padding: 10px 0;
	
    font-size: 14px;
    line-height: 14px;
}

#footerSecondaryMenu ul li:after { content: ' -'; }
#footerSecondaryMenu ul li:last-child:after { content: none; }

#footerSecondaryMenu ul li a {
	text-decoration: none;
    color: #444;
    font-weight: 700;
    text-transform: uppercase;
}
#footerSecondaryMenu ul li a:hover, #headerSecondaryMenu ul li.current-menu-item a{
	text-decoration: underline;
}

@media only screen and (max-width: 40em) {  /* small screens */
	#footer{padding: 2% 5px; height: 294px;}
	#footerField{height: 214px;}	
	#footerLogo {height:80px;}

	
	#footerMainMenu { height: 30px; padding: 5px; }
	#footerMainMenu ul li a {font-size: 12px; line-height: 12px;}
	
	#footerSecondaryMenu{ height: 23px; margin-top: 0; padding: 3px; }
	#footerSecondaryMenu ul li a {font-size: 10px; line-height: 12px;}
	#footerSecondaryMenu ul li:after{font-size: .5em;}
}