/* CSS COMMENTS */


/* GOOGLE FONT - Norican - SCRIPT FONT */
.norican-regular {
  font-family: "Norican", cursive;
  font-weight: 400;
  font-style: normal;
}


/*--------- START INTERMEDIATE PAGE HEADER WITH SHOP BUTTON ------*/
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 15px 0px 20px;
	height: 140px;
	background-image: url(img/LettuceFieldTall.jpg); 
	background-size: cover; 
	background-position: center; 
	background-repeat: no-repeat;
}


.header button {
	padding: 10px 15px;
	font-weight: bold;
	font-size: small;
	color: #ffffff;
	background-color: rgb(238, 7, 7);
	border: none;
	border-radius: 30px;
	cursor: pointer;
	text-align: center;
}
.header button:hover {
	background-color: #ac0e0e;
}

headerTitle {
	margin-right: 15px;
	margin-left:30px;
	font-family: Norican;
	font-size: 46px;
	line-height: 2.6rem;
	
	color: rgb(255, 255, 255);	
	text-shadow:
		2px 2px 5px rgb(25, 77, 55),
		-2px -1px 5px rgb(25, 77, 55);		
}
/*--------- END INTERMEDIATE PAGE HEADER WITH SHOP BUTTON ------*/








/*  TO PREVENT HREF-LOCATION SCROLLING UNDERNEATH THE TOP NAVBAR */
html {
	scroll-padding-top: 56px
	}
	
BODY {
		MARGIN: 0px;
		FONT-SIZE: 12pt;
		FONT-FAMILY: Verdana,Helvetica;
		COLOR: #000000;
		/*---------  PROVIDE TOP SPACE FOR FIXED-NAVBAR ON ALL PAGES -----------*/
		padding-top: 56px;
		height: 100% !important;
	}
	
	
	/*-------------------  START HEADER BANNER STYLING --------------------*/
.hero {
		background-color: #616161;
		background-image: url(img/LettuceFieldTall.jpg);
	
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;
		padding-bottom: 10px;
	}
	/*-------------------  START HEADER BANNER STYLING --------------------*/
	
	
	
/*---------- NAVBAR STYLING ---------*/

.navbar .navbar-nav .nav-link {
		color: #cdd1ce;
		/* font-size: 1em; */
		/* font-size:medium; */
		font-size:small;
		padding-top: 1px;
		padding-bottom: 3px;
	}
	
.navbar .navbar-nav .nav-link:hover{
		color: #ffffff;
	}

		
.nav-link:hover{
		color: #ffffff;
	}
	
.sm-icons {
		flex-direction: row;
	  }
	  
@media only screen and (max-width: 960px) {
		.sm-icons .nav-item {
		  padding-right: 1em;
		}
	  }

/******* ccarr custom navbar color and toggler *************/
	.bg-company-grn {
		background-color: rgb(11, 68, 32);
	}


	.navbar-toggler {
		width: 15px;
		height: 15px;
		position: relative;
		transition: .5s ease-in-out;
	}

	.navbar-toggler,
	.navbar-toggler:focus,
	.navbar-toggler:active,
	.navbar-toggler-icon:focus {
		outline: none;
		box-shadow: none;
		border: 0;
	}

	.navbar-toggler span {
		margin: 0;
		padding: 0;
	}

	.toggler-icon {
		display:block;
		position: absolute;
		height: 4px;
		width: 100%;
		background: #ffffff;
		border-radius: 1px;
		opacity: 1;
		left: 0;
		transform: rotate(0deg);
		transition: .25s ease-in-out;
	}

	.middle-bar {
		margin-top: 0px;
	}

	/******** when navigation is clicked **********/

	.navbar-toggler .top-bar {
		margin-top: 0px;
		transform: rotate(135deg);
	}

	.navbar-toggler .middle-bar {
		opacity: 0;
		filter: alpha(opacity=0);
	}

	.navbar-toggler .bottom-bar {
		margin-top: 0px;
		transform: rotate(-135deg);
	}

	/* State when the navbar is collapsed */
	.navbar-toggler.collapsed .top-bar {
		margin-top: -20px;
		transform: rotate(0deg);
	}

	.navbar-toggler.collapsed .middle-bar {
		opacity: 1;
		filter: alpha(opacity=100)
	}

	.navbar-toggler.collapsed .bottom-bar {
		margin-top: 20px;
		transform: rotate(0deg);
	}

	/* Color of 3 lines */
	.navbar-toggler.collapsed .toggler-icon {
		background: linear-gradient(90deg, rgba(252,251,255,1) 0%, rgba(255,255,255,1) 30%, rgb(185, 103, 117) 100%);
	}

/*---------- END NAVBAR STYLING ---------*/
	
	
	
	
	/*----------  START SHOPPING PICTURE/LINK STYLING ----------------*/
	.image-container {
		position: relative;
		display: inline-block;
		}
	.overlay-bottom-text-left {
		position: absolute;
		bottom: 0;
		left: 0;
		}
	.overlay-top-text-left {
		position: absolute;
		top: 0;
		left: 0;
		}
	.img-logo {
		display: block;
		margin-left: auto;
		margin-right: auto; 
	}
	/*----------  END SHOPPING PICTURE/LINK STYLING ----------------*/
	
	
	button {
		all: unset;
		cursor: pointer;
	  }
	  
	
	
	P {
		FONT-SIZE: 12pt;
		COLOR: #000000;
		FONT-FAMILY: verdana;
		padding-left: 13px;
		padding-right: 13px;
	}
		
	
	 H1 {
		FONT-SIZE: 20pt; 
		PADDING-TOP: 10px; 
		PADDING-BOTTOM: 1px; 
		PADDING-RIGHT: 13px; 
		PADDING-LEFT: 13px; 
		FONT-WEIGHT: bold; 
		MARGIN: 0px; 
		COLOR: #1b6939; 
		
		FONT-FAMILY: Trebuchet, Arial, Veranda
	}
	
	H2 {
		PADDING-RIGHT: 13px; 
		PADDING-LEFT: 13px; 
		FONT-SIZE: 16pt;
		PADDING-BOTTOM: 10px;
		MARGIN: 0px;
		PADDING-TOP: 10px;
	}
	
	H3 {
		PADDING-RIGHT: 13px; 
		PADDING-LEFT: 36px; 
		PADDING-BOTTOM: 10px;
		MARGIN: 0px;
	}
		
	
	ul {
		display: block;
		list-style-type: disc;
		margin-top: 1em;
		margin-bottom: 1em;
		margin-left: 0;
		margin-right: 0;
		padding-left: 40px;
	  }
	
	
	
	  .first-word-uppercase-p::first-letter {
		font-size: 40px;
		color: #20663b;
		font-weight: bold;
		font-style: italic;
		/* line-height: .75; */
		initial-letter: 2;
	  }
	
	
	/***************************** START JayBird CSS FOR MEDIA SIZE *************************************
	/* MEDIA QUERIES AT BOTTOM OF CSS */
	/* FROM JayBird TUTORIAL */
	/* BOOTSTRAP 5 BREAKPOINTS */
	/* X-Small devices (portrait phones, less than 576px) */
	/* No media query for `xs` since this is the default in Bootstrap */
	#breakpoints::before {
		content: "Extra Small mobile screens (<576px Portrait phones)";
		font-family: arial;
		color: #8B12FC;
		font-size: 20px;
	}
	
	/************************ FROM JayBird *************************************************/
	/* Small devices (landscape phones, 576px and up) */
	@media (min-width: 576px) {
		#breakpoints::before {
			content: "Small screens and up (>576px Landscape phones) - 'sm'";
		}
	}
	
	/* Medium devices (tablets, 768px and up) */
	@media (min-width: 768px) {
		#breakpoints::before {
			content: "Medium screens and up (>768px Tablets) - 'md'";
		}
	}
	
	/* Large devices (desktops, 992px and up) */
	@media (min-width: 992px) {
		#breakpoints::before {
			content: "Large screens and up (>992px Desktops) - 'lg'";
		}
	}
	
	/* X-Large devices (large desktops, 1200px and up) */
	@media (min-width: 1200px) {
		#breakpoints::before {
			content: "Extra Large screens and up (>1200px Large Desktops) - 'xl'";
		}
	}
	
	/* XX-Large devices (larger desktops, 1400px and up) */
	@media (min-width: 1400px) {
		#breakpoints::before {
			content: "Extra Extra Large screens and up (>1400px Larger Desktops) - 'xxl'";
		}
	}
	/***************************** END JayBird CSS FOR MEDIA SIZE **************************************/