/* CSS For Lyndon Freighthouse */
/* Redesign April 2019 */
/*  * { outline: 1px solid red; }  for testing all elements */

  
  
/* Desktop */


/* UNIVERSAL STYLE ELEMENTS */


A:link { text-decoration: none; color:#8f4a02; font-weight: 900;}
A:visited { text-decoration: none; color:#8f4a02; font-weight: 900;}
A:hover { text-decoration: underline; color:#8f4a02; font-weight: 900;}

p { font-family: Arial, sans-serif; margin:0px 0px 15px 0px; font-size: medium; line-height: 125%;}

h1 { color:#45510f; font-size: 30px; font-family: "Fredoka One", Arial, sans-serif; padding:0px; margin:0px 0px 15px 0px; }

h2 { color:#45510f; font-size: 24px; font-family: "Fredoka One", Arial, sans-serif; padding:0px; margin:0px 0px 15px 0px; }

h3 { color:#45510f; font-size: 18px; font-family: "Fredoka One", Arial, sans-serif; padding:0px; margin:0px 0px 15px 0px; }
h3 a:hover {text-decoration: underline; }

h4 { color:#666666; font-size: 16px; font-family: "Fredoka One", Arial, sans-serif; padding:0px; margin:0px 0px 5px 0px; }


ul { font-family: Arial, sans-serif; margin:0px; }
li { font-family: Arial, sans-serif; margin:0px; }



.float-right { float:right; }
.float-left { float:left; }
.clear { clear: both; }


hr.light { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

hr.gray { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.7); }


.green { color:#45510f; font-size: 11px; }
.white { color:#ffffff; font-size: 11px; font-style:italic; }

#form p { margin: 0px; }

.gallery { margin: 0px 0px 20px 0px; position: relative; width: 100%; }

.top-spacing { margin: 40px; padding: 0;  }

hr {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #45510f;
    color: #45510f;
    text-align: center;
}
hr:after {
    content: "◆";
    display: inline-block;
    position: relative;
    top: -0.55em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: transparent;
}

.centertitle {text-align:center !important;}


/* CONTAINER */

#bodywrapper1 { position: relative; text-align: center; width: 100%; margin:0px; padding:0px; top: 0px; background:inherit; z-index: 2; }

#bodywrapper2 { width: 100%; top: 0px; text-align: center; margin-right: auto; margin-left: auto; position: relative; }

#bodywrapper3 { background:inherit; top: 0px; position: relative; margin-right: auto; margin-left: auto; width:100%; }

#bodywrapper4 { position: relative;  text-align: center; width: 100%; top: 0px; background: #inherit; margin: 0px auto; width:100%;}


body.mainbody { background: #fde28d; 
font-size: 15px;
font-family: Arial, 'Open Sans', sans-serif;
margin:0px;
z-index: 1;
width: 100%; 
height: auto !important; 
height: 100%; /* for older browsers */ 
min-height: 100%; 

}

.page-body {margin: 0 10%; }
.margin-text {margin: 20px 0px 0px 0px; }
.margin-text img {max-width: 100%; height:auto; margin: 2% 2%;}	
.margin-text li {line-height:150%; list-style: initial; text-align:left;}
.margin-text h1,h2,h3 {text-align:initial;}

.margin-text table, th, td { 
    margin: 0px auto; 
    text-align: left;
	padding:10px;
	max-width:100%;
}

.flavors { 
    margin: 0px auto; 
    text-align: center;
	padding:20px !important;
}


.commercewrap h2 {text-align:center;}


/* SEARCH BOX */

input[type=search] {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 10px;
  width: 150px;
  height: 12px; 
}

#cart { padding: 0; position: absolute; z-index: 99999; top: 14px;  right: 240px; }

.searchbox { color: black; font-size: 12pt; font-family: Arial, "Arial Narrow", san-serif; padding: 0; position: absolute; z-index: 99999; top: 15px; right: 50px; }


/* HEADER ELEMENTS */

#top-elements { width: 100%; margin-right: auto; margin-left: auto; position: relative; } 

#social { text-align: center; margin: 0px auto 20px auto; position: absolute; z-index: 100; width:23%; top: 10%; left:38.5%;}

.social { float:left; z-index: 90; margin: 0px; width:25%;}

.banner-wrap {
	margin: 40px auto 50px auto; 
	position: relative; 
	height: auto; 
	z-index: 90;
}

.juicebox-wrap {
	width:100%;
	margin: 0px auto; 
	text-align: center;
}
	
#juicebox-container {
	margin: 0px auto;
	border-radius: 20px; 
	border: 20px solid #ffffff; 
	background-color: #ffffff;
	box-shadow: 0px 0px 20px #333; 
}	
	

/* HOME PAGE BODY ELEMENTS */



#gift-shop-slider { margin: 0px auto 0px auto; position: relative; z-index: 1100; }

#gift-shop-slider p { color: #000000; font-size: 10px; font-family: Arial, sans-serif; font-weight: normal; line-height: 115%; }

.featuredproducts { 
	line-height: 125%;  
	margin: 10px 0px;
	vertical-align:top;
	width: inherit; 
}

.featured {
	width: 33%;
	vertical-align: top;
	margin: 0 auto;
	float: left;
}

.featured-cell {margin:0px auto; text-align:center;}
.featuredproductstext { 
	margin: 10px 15px 5px 15px; 
	color: #000000; 
	font-size: small; 
	font-family: Arial, sans-serif; 
	font-weight: normal; 
}

#home-boxes { text-align: left; width: 100%; position: relative; z-index: 10; margin-bottom: 60px; padding: 0; }

.boxcell {margin:0px auto; text-align:center;}

.box-title { position: relative; margin: auto; z-index: 90; }

.box-image { position: relative; margin: 3% auto; z-index: 90;}

.box-text { 
	font-size: medium; 
	font-family: Arial, sans-serif; 
	font-weight: 500; 
	line-height: 125%; 
	margin: 0; 
	padding: 0; 
	position: relative; 
	z-index: 300; 
}

.box-text h3 {text-align: center; }


#box { 
	position: relative; 
	z-index: 90; 
	margin: 0px auto; 
	width: 100%; 
	height: auto; 
}

#box-text { 
	margin: 30px 35px; 
	position: relative; 
	z-index: 90; 
}

.box-col { 	
	border-radius: 20px; 
	border: 10px solid #ffffff; 
	background-color: #ffffff;
	box-shadow: 0px 0px 20px #333;
}

.boxcol-wrap {
	float:left; 
	width: 28%; 
	margin-left: 2%; 
	margin-right:2%; 
	position: relative;
}

.two-boxcol-wrap {
	float:left; 
	width: 61%; 
	margin-left: 2%; 
	margin-right:2%; 
	position: relative;
}

.two-box-col { 	
	border-radius: 20px; 
	border: 10px solid #ffffff; 
	background-color: #ffffff;
	box-shadow: 0px 0px 20px #333;
}


#enews { position: relative; z-index: 90; }
.enews { margin: 40px auto 40px auto; text-align: center; }
.enews h3 {text-align:center;}


input[type=enews] {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 10px;
  width: 250px;
  height: 15px; 
}




/* INTERIOR PAGE BODY ELEMENTS */


.sm-banner { margin: 0px auto 20px auto; position: relative; z-index: 999; }


.sm-banner img {max-width:100%; }




/* FOOTER ELEMENTS */


footer {
	clear: both; 
	background: #fde28d url(../img/footer-image-new.jpg) 45% 100% no-repeat; 
	padding: 350px 0px 25px 0px !important;
}

footer .container100 {}

#bottom-nav { margin: 0px auto 0px auto; position: relative; z-index: 100; width:60%;}

.bottom-nav { 
	float:left; 
	z-index: 90; 
	width: 33%; 
	position: relative; 
	z-index: 100; 
	font-family: Arial; 
	color: #465318; 
	font-size: small; 
	font-weight: bold; 
	z-index: 100; 
	line-height: 150%;
	text-align:center; 
}



#bottom-logos { text-align: center; margin: 0px auto 20px auto; position: absolute; z-index: 100; width:30%; top: 25%; left:35%;}

.bottom-logo { float:left; z-index: 90; width: 33%;}


.footer-text {position: relative; text-align:center;}
.footer-text p {font-size:smaller; color:white; font-weight:900;}
.footer-text a:link {color:white}
.footer-text a:visited {color:white}
.footer-text a:hover {color:white}

.small-text p {font-size:small; font-weight:normal;}
.small-text a:link {color:white; font-weight:normal;}
.small-text a:visited {color:white; font-weight:normal;}
.small-text a:hover {color:white; font-weight:normal;}

.xsmall-text p {font-size:x-small; font-weight:normal;}
.xsmall-text a:link {color:white; font-weight:normal;}
.xsmall-text a:visited {color:white; font-weight:normal;}
.xsmall-text a:hover {color:white; font-weight:normal;}




/* PRODUCT DETAILS */

.store-product #juicebox-container {
	margin-bottom: 40px;
}

.inline-slash { float: left; z-index: 1000; margin: 0px 0px 0px 0px; padding: 0px; }
.container-title { position: relative; left: 66px; width: 479px; margin: 0px; }

.store-product { 
	z-index: 1000; 
	margin: 20px 0px 40px 0px; 
	padding: 0px; 
	position: relative; 
	width:100%;
	text-align: left; 
}

.store-product span { 
	color: #843218; 
	font-weight: bold; 
	margin: 0px; 
}

.product-title { color: #5d7b34; font-size: 27px; font-family: Arial, sans-serif; margin: 0px; left: -17px; }



/* SHOPPING CART DETAILS */

.commercewrap { margin: 50px auto; }

.cart-columns { text-align: center; margin: 0px auto 20px auto; position: relative; z-index: 100; width:50%; }

.cart-text { 
	float:left; 
	z-index: 90; 
	width: 25%;
	font-size: 12pt; 
	font-family: "Arial Narrow", Arial, sans-serif; 
	font-style: normal; 
	line-height: 125%; 
	margin: 0px auto 20px auto;  
	padding: 0; 
}


.hidden {visibility:hidden;}
.width100 {width:100% !important; float:none; }
.width70 {width:68% !important; }
.width50 {width:50% !important; }
.width30 {width:32% !important; }
.margin50 {margin-top: 50px; margin-bottom: 100px;}
.center {margin-left: auto; margin-right: auto; }

.right {text-align: right !important; }
.left {text-align: left !important; }

.paypal {margin: 0px 0px 50px 0px; }

a.button3{
display:inline-block;
padding:0.3em 1.2em;
margin:0 0.3em 0.3em 0;
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family:'Arial',sans-serif;
font-weight:300;
color:#FFFFFF;
background-color:#4c68d7;
text-align:center;
transition: all 0.2s;
}
a.button3:hover{
background-color:#324ebd;
}

#price {font-size: 12pt; font-family: "Arial Narrow", Arial, sans-serif; font-style: normal; line-height: 125%; margin-right: 0; margin-left: 0; padding: 0; }

.quantity {font-size: 12pt; font-family: "Arial Narrow", Arial, sans-serif; font-style: normal; line-height: 125%; margin-right: 0; margin-left: 0; padding: 0; }

.default {font-size: 12pt; font-family: "Arial Narrow", Arial, sans-serif; font-style: normal; line-height: 125%; margin-right: 0; margin-left: 0; padding: 0; }

.warning {color: #b00202; font-size: 12pt; font-family: "Arial Narrow", Arial, sans-serif; font-style: normal; line-height: 125%; margin-right: 0; margin-left: 30px; padding: 0; }


.shopping-title { 
	text-align: center; 
	color: #465318; 
	font-family: Tahoma, "Trebuchet MS", "MS Serif", Geneva; 
	font-size: x-large; 
	font-style: normal; 
	line-height: 125%;
	margin-bottom: 20px; 
}

#checkout { text-align: center; }





/* Mega-Screens */


@media screen 
  and (min-width: 1200px) 
  and (max-width: 1500px) {
	  


.page-body {margin: 0 5%; }
.margin-text {margin: 0px; }	

  }
  
  
 /* IPad Pro and Similar Large Tablets */
@media screen 
  and (min-width: 1024px) 
  and (max-width: 1199px) {


.page-body {margin: 0px 0px; }
.margin-text {margin: 0px 5%; }	
.sm-banner { margin: 0px auto 20px auto; }
.navik-header-container {border-bottom: 6px solid white;}

  } 
  
  
  

/* Tablets */
@media screen 
  and (min-width: 726px) 
  and (max-width: 1023px) {

#social { width:32%; left:34.5%;}

#bottom-logos {width:45%; left: 28%;}

#bottom-nav {width: 75%; }

.page-body {margin: 0px 0px; }

.margin-text {margin: 0px 5%; }

.boxcol-wrap { 	
	width: 100%;
	background-color:#ffffff;
	margin: 0px;
}

.box-col {	 
	border-radius: 0px; 
	border: 0; 
	background-color: #ffffff;
	box-shadow: none; 
	margin:0px;
	}
	
.boxcol-wrap H1 {margin-top: 20px; }
.boxcol-wrap H2 {margin-top: 20px; }
.boxcol-wrap H3 {margin-top: 20px; }

	.two-boxcol-wrap {
	width: 100%;
	background-color:#ffffff;
	margin: 0px;
}
.two-box-col {	 
	width:100%;
	margin:0px;
	border-radius: 0px; 
	border: 0; 
	background-color: #ffffff;
	box-shadow: none;
}


.two-boxcol-wrap H1 {margin-top: 20px; }
.two-boxcol-wrap H2 {margin-top: 20px; }
.two-boxcol-wrap H3 {margin-top: 20px; }

.sm-banner { margin: 0px auto 20px auto; }
.navik-header-container {border-bottom: 6px solid white;}


.cart-columns {width:65%;}

.commercewrap { margin: 50px 3%; }

  }
  
  
/* Phones */
@media screen and (max-width: 725px) {

.margin-text img {max-width: 100%; height:auto; margin: 2% 2%; float:none;}


#juicebox-container {
	margin: 0px auto;
	border-radius: 0px; 
	border: 0px solid #ffffff; 
	background-color: #ffffff;
	box-shadow: 0px;
	width: 300px !important;
	height: 400px !important; 
}

.store-product #juicebox-container {
	display: none;
}

footer {padding: 50px 0px 25px 0px !important;}
.margin-text {margin: 0px 5%; }	
.banner-wrap {display: none; }
.boxcol-wrap { 	
	width: 100%;
	background-color:#ffffff;
	margin: 0px;
}
.boxcol-wrap H1 {margin-top: 20px; }
.boxcol-wrap H2 {margin-top: 20px; }
.boxcol-wrap H3 {margin-top: 20px; }

.box-col {	 
	border-radius: 0px; 
	border: 0; 
	background-color: #ffffff;
	box-shadow: none; 
	margin:0px;
	}
#box { 
	width: 100%; 
	border-radius: 0px; 
	border: 0; 
	background-color: #ffffff;
	box-shadow: none;
}
#home-boxes { width:100%; margin: 20px auto;}

.two-boxcol-wrap {
	width: 100%;
	background-color:#ffffff;
	margin: 0px;
}
.two-box-col {	 
	width:100%;
	margin:0px;
	border-radius: 0px; 
	border: 0; 
	background-color: #ffffff;
	box-shadow: none;
}


.two-boxcol-wrap H1 {margin-top: 20px; }
.two-boxcol-wrap H2 {margin-top: 20px; }
.two-boxcol-wrap H3 {margin-top: 20px; }


.featured {width: 100%; }
.featured-cell { width:100%; margin: 20px auto;}

.page-body { width:100%; margin:0px;}
.box-image {margin:0px;}
#box-text {margin:0px; }
.box-text p {margin:0px; }

#bottom-nav {width: 75%; }
.bottom-nav {width:100%;}
.bottom-logo {width:100%;}

#bottom-logos { position: relative; margin: 0px auto 20px auto; width:100%; top: 5%; left:0;}

.bottom-logo { float:left; margin-bottom:15px; }

#social { width:70%; left:19%; margin: 0px 10% 0px 10%; position:relative;}
.social { margin: 0px auto 10% auto; width:15%;}

#cart {display:none;}
.searchbox {display:none;}

.sm-banner { margin: 0px auto 20px auto; }

.navik-header-container {border-bottom: 6px solid white;}

.cart-columns {width:95%;}

.commercewrap { margin: 50px 1%; }

}





/*END*/