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

html {
    background: url("images/background3.png");
    background-size: cover;
    padding-top: 0px;
    padding-bottom: 0px;
    font-weight: 900;
    text-align: left;
}

body {
    max-width: auto;
    margin-left: auto;
    margin-right: auto;
    font-family: arial;
    /*padding-top: 48px;*/    
}

nav a {
	color: #2BA273;
}

ul {
    width: auto;
    box-sizing: content-box;
    color: #3c1518;
    font-style: normal;
    line-height: 19pt;
	
}

li {
    font-size: 30px;
    line-height: 30pt;
    list-style-position: outside;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
	}


/* adjust the jump scroll points */
a {
position: relative;
}

a span {
	position: absolute; top:-75px;
} 

.jumpscrollvideoadjust {
	position: relative;
}

.jumpscrollvideoadjust span {
	position: absolute; top: 5px;
}

/* end jump scroll points adjust */

.spanglerslogo {
    z-index: 15;
    width: 70px;
    display: inline-block;
    height: auto;
    float: left;
    margin-top: -8px;
}

.headerbox {
    width: 100%;
    height: 50px;
    background-color: white;
    top: 0px;
    overflow-y: visible;
    visibility: visible;
    margin-top: -10px;
    padding-bottom: 10px;
}


.hero-box {
    height: 350px;
    width: auto;
    background-color: #3C1518;
    background-image: url("images/Freshingredients2.png");
    background-size: cover;
	
}
	
.pagetitle {
    padding-top: 10px;
    padding-bottom: 16px;
    padding-left: 10px;
    color: #3c1518;
    font-weight: 900;
    font-size: 26pt;
    text-align: left;
    text-shadow: -2px 3px 0px #e3c567;
    background-color: #bc955c;
    font-family: cursive;
    height: 35px;
	vertical-align: baseline;
}

.videotitle {
    padding-top: 20px;
    padding-bottom: 6px;
    padding-left: 10px;
    color: #3c1518;
    font-weight: 900;
    font-size: 15pt;
    text-align: left;
    text-shadow: 1px 1px 0px white;
    background-color: #7ea172;
}

.logoimg {
	max-width: 60%;
    height: auto;
	transform: translate(0px, 130px);
	box-shadow: 0 20px 40px #3C1518;
	align-content: center;
	Width: auto;
	
}

.button {
    background-color: #3c1518;
    padding-top: 8px;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 8px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    border-radius: 8px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4), 0 4px 10px 0 rgba(0,0,0,0.19);
    position: static;
    margin-right: 12px;
}


.jumpnav {
    display: flex;
    position: fixed;
    justify-content: space-between;
    margin-top: 10px;
    padding-left: 10px;
    top: 0px;
    opacity: 0.8;
    color: #3c1518;
    max-width: 600px;
    scroll-behavior: smooth;
    height: 33px;
    z-index: 10;
    width: 100%;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.videonavlinks {
    display: inline-block;
    visibility: visible;
    max-width: 30%;
    padding-top: 0px;
    border: 5px solid #7ea172;
    margin-top: 26px;
    margin-bottom: 5px;
    -webkit-box-shadow: 10px -10px 20px -6px #3c1518;
    box-shadow: 10px -10px 20px -6px #3c1518;
    margin-left: 10px;
    margin-right: 10px;
    width: 95%;
    padding-left: 0px;
    left: 0px;
}


img {
	display: block;
	margin: auto;
}


h1 {
	color: #AF1719;
	padding-top: 150px;
	text-align: center;
	font-size: 55px;
	
}

h2 {
    color: #7ea172;
    text-align: left;
    font-size: 50px;
    text-indent: 10px;
    text-shadow: 4px 3px 4px #3c1518;
    margin-bottom: -16px;
    margin-top: -40px
}
	
p {
    margin-bottom: 20px; 
}

/*Responsive Adjustments*/

@media (max-width:1047px){		
	h1 {
		font-size: 40px;
		text-align: center;
		padding-left: 0;
		
		}
	.videonavlinks {
    max-width: 45%;
}

/*Mobile*/
@media (max-width:681px){
	.hero-box {
		height: 190px;
		width: auto;
		background-color: #3C1518;
		background-image: url("images/Freshingredients2small.png");
		background-size: cover; 
		background-position: center
	}
	.logoimg {
		max-width: 60%;
		height: auto;
		transform: translate(0px, 60px);
		box-shadow: 0 20px 40px #3C1518;
		align-content: center;
		Width: auto;
	
	}
	
	.videonavlinks {
    	display: inline-block;
    	max-width: 95%;
		margin-left: 5px;
    	margin-right: 5px;
	
	}
		
	/*adjust directions text*/
li {
    font-size: 20px;
    line-height: 20pt;
    }
}


	@media (max-width:549px) {
	.jumpnav {
    max-width: 500px;
}
		
	.button {
    font-size: 14px;

}
		
	}
	

.shoplist {
    bottom: 0px;
}
}