/* CSS */

	html {
		background-color: #FCF7A4;
	}
	
	body {
		margin: 0;
	}
	
/* HEADER / NAV BAR */

	header {
		position: fixed;
		top: 0vh;

		width : 100vw;
		height: 20vh;
		text-align: center;
		
		justify-content: center;
		align-items: center;
		
		font-family: "Corinthia", cursive;
		font-weight: bold;
		font-style: normal;
		font-size: 1.5vw;
		
		background-color: #E3DE96;
	}
	
	header nav {
		font-family: "Roboto Flex", sans-serif;
		
		position: fixed;
		left: 5vw;
		text-align: center;
		align-content: center;
		width: auto;
		max-width: 60vw;
		height: 20vh;
		
		background-color: #E3DE96;
	}
	
	header nav a {
		padding-top: 2vh;
		padding-bottom: 2vh;
		padding-right: 2vw;
		padding-left: 2vw;
		
		border-radius: 2vw;
		margin-left: 1vw;
		margin-right: 1vw;
		
		text-decoration: none;
		color: #403D3B;
		
		background-color: #E6E6D3;
		
		cursor: pointer;
	}
	
	header nav a:hover {
		color: #403D3B;		
		background-color: #ccccba;
		transition: 0.4s;
	}
	
	header img {
		position: fixed;
		right: 10vw;
		
		width: auto;
		max-width: 30vw;
		height: 20vh;
	}
	
/* HOME MAIN CONTENT */
	
	.home {
		margin-top: 22vh;
		margin-left: 6vw;
		margin-right: 6vw;
		
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
	}
	
	.home h1 {
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.75vw;
		font-weight: 500;
	}
	
	.home .main p {
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
	}
	
	.home .mission p {
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
		font-weight: 500;
	}
	
	.home dt {
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
		font-weight: 500;
	}
	
	.home dd {
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
	}
	
	.home .main {
		float: left;
		width: 55vw;
	}
	
	.home .mission {
		margin-top: 5vh;
		
		width: 25vw;
		float: right;
		
		border-style: solid;
		border-color: #000000;
		padding-right: 1vw;
		padding-left: 1vw;
	}
	
/* PRODUCTS PAGE */

	.products {
		margin-top: 20vh;
		margin-left: 10vw;
		margin-right: 10vw;
		margin-bottom: 5vh;
		
		text-align: center;
		
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
	}
	
	.products .accordion {
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
		font-weight: bold;
		
		background-color: #E6E6D3;
		color: #403D3B;
		cursor: pointer;
		
		padding: 18px;
		width: 60vw;
		border: none;
		outline: none;
		transition: 0.4s;
		display: inline-flex;
		
		text-align: center;
		justify-content: space-between;
		align-items: center;
		margin-top: 5vh;
	}
	
	.products .accordion p {
		font-family: "Roboto Flex", sans-serif;
		font-size: 5vw;
		font-weight: bold;
		
		margin: auto;
	}
	
	.products .accordion img {
		max-width: 20vw;
		align-self: left;
	}
	
	.products .accordion:hover {
		background-color: #ccccba;
	}
	
	.products .panel {
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
		color: #403D3B;
		
		background-color: #E6E6D3;
		
		width: 60vw;
		display: none;
		overflow: hidden;
		
		margin: auto;
	}
	
	.products .panel p {
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
		color: #403D3B;
		
		text-align: left;
		margin-left: 2.5%;
	}
	
	.products .panel li {
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
		color: #403D3B;
		
		text-align: left;
		margin-left: 5%;
	}
	
/* 	.products .accordion:after {
	  content: '\02795';
	  font-size: 13px;
	  color: #777;
	  float: right;
	  margin-left: 5px;
	}

	.products .active:after {
	  content: "\2796";
	} */
	
/* CONTACT PAGE */

	.formlayout {
		margin: auto;
		margin-top: 27vh;
		margin-bottom: 5vh;
		width: 65vw;
	}

	.contactform {
		font-family: "Roboto Flex", sans-serif;
		font-size: 1vw;
	}
	
	.contactform label {
		
	}
	
	.contactform input[type=text], input[type=email], textarea {
		margin-bottom: 2vh;
		padding-top: 1vh;
		padding-bottom: 1vh;
		
		font-family: "Roboto Flex", sans-serif;
		font-size: 1vw;
	}
	
	.contactform input[type=submit] {
		width: 15vw;
		margin-top: 1vh;
		margin-bottom: 1vh;
		padding-top: 1vh;
		padding-bottom: 1vh;
		
		font-family: "Roboto Flex", sans-serif;
		font-size: 1vw;
		font-weight: bold;
	}
	
	#fninput {
		width: 30vw;
	}
	
	#lninput {
		width: 30vw;
	}
	
	#emailinput {
		width: 30vw;
	}
	
	#pninput {
		width: 30vw;
	}
	
	#msginput {
		width: 60vw;
		height: 20vh;
	}
	
	.g-recaptcha div {
		margin: auto;
	}
	
/* FAQ PAGE */

	.faq {
		margin: auto;
		margin-top: 27vh;
		
		width: 70vw;
		
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
	}

	.faq .accordion {
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
		font-weight: bold;
		
		background-color: #E6E6D3;
		color: #403D3B;
		cursor: pointer;
		padding: 18px;
		width: 100%;
		text-align: left;
		border: none;
		outline: none;
		transition: 0.4s;
	}
	
	.faq .accordion:hover {
		background-color: #ccccba;
	}
	
	.faq .panel {
		font-family: "Roboto Flex", sans-serif;
		font-size: 1.5vw;
		color: #403D3B;
		
		padding: 0 18px;
		background-color: #E6E6D3;
		display: none;
		overflow: hidden;
	}
	
	.faq .accordion:after {
	  content: '\02795'; /* Unicode character for "plus" sign (+) */
	  font-size: 13px;
	  color: #777;
	  float: right;
	  margin-left: 5px;
	}

	.faq .active:after {
	  content: "\2796"; /* Unicode character for "minus" sign (-) */
	}
	
/* VISION PAGE */

	.vslides {
		width: 55vw;
		margin: auto;
		margin-top: 27vh;
	}
	
	.vslidescontent {
		display: none;
	}
	
	.slideprev, .slidenext {
		cursor: pointer;
		position: absolute;
		top: 50%;
		width: auto;
		margin-top: -22px;
		padding: 16px;
		color: white;
		font-weight: bold;
		font-size: 18px;
		transition: 0.6s ease;
		border-radius: 0 3px 3px 0;
		user-select: none;
	}
	
	.slideprev {
		left: 0;
		margin-left: 15vw;
		border-radius: 3px 0 0 3px;
	}
	
	.slidenext {
		right: 0;
		margin-right: 15vw;
		border-radius: 3px 0 0 3px;
	}
	
	.slideprev:hover, .slidenext:hover {
		background-color: rgba(0,0,0,0.8);
	}
	
	.numbertext {
		color: #f2f2f2;
		font-size: 12px;
		padding: 8px 12px;
		position: absolute;
		top: 0;
	}
	
	.fade {
		animation-name: fade;
		animation-duration: 1.5s;
	}
		
	@keyframes fade {
		from {opacity: .4}
		to {opacity: 1}
	}