/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	background-color: #ffffff !important;
}

#wrapper {
	min-height: 80vh;
}

.clearfix {
	clear: both;
}

.hiddenElement {
	visibility: hidden;
	position: fixed;
}

/* MOBILE VIEW */

#fullscreenmenu ul li a {
	font-family: "Roboto";
	font-size: 30px;
	padding: 10px !important;
}

#recipeHeaderWrapper {
	width: 100%;
}

#contactform {
	width: 100%;
	text-align: center;
}

#contactform input, #contactform textarea {
	margin: 10px auto;
	width: 350px;
	border: 4px #547335 solid;
	padding: 20px;
	font-family: "Roboto";
}

#contactform input::placeholder, #contactform textarea::placeholder {
	color: grey;
	font-size: 16px;
	font-family: "Roboto";
}

.btnContact {
	font-family: "Roboto";
	color: #ffffff;
	font-size: 20px;
	background: #547335;
	padding: 15px 40px 15px 40px;
	text-decoration: none;
	margin-bottom: 50px;
  }
  
  .btnContact:hover {
	background: #3cb0fd;
	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	text-decoration: none;
  }

.slider {
	max-height: 40vh;
	width: 100vw;
	overflow: hidden;
	margin: 0;
	display: flex !important;
	align-items: center;
}


.flexslider {
	overflow: hidden !important;
	background:none !important;
	border:none !important;
	box-shadow:none !important;
	margin:0 !important;
}

.flexsliderheader {
}

.flexsliderheader > div > ul li img{
	width: auto !important;
	max-width: 100% !important;
	margin: auto !important;
}

.flexsliderheader {}

.slider img {
	height: 100% !important;
	margin: auto !important;
}

.endCard div {
	max-width: 100%;
	margin: 0 !important;
}

.desktopOnly {
	display: none;
}

#contactHeaderImage {

	width: 100%;
	height: auto;

}

.mobileOnly {
	display: block;
}

#contactHeader {

	font-size: 36px;
	color: #547107;
	font-family: "Roboto";
	font-weight: 500;
	text-align: center;
	margin: 50px 0;
}

.flex-direction-nav {
	display: none !important;
}

.contactText {
	font-size: 26px;
	color: #547335;
	font-family: "Roboto";
	text-align: center;
	padding: 15px;
}

#recipeWrapper {
	max-width: 100%;
	margin: 50px;
	text-align: center;
}



#recipeHeader {
	font-family: Roboto;
	font-weight: 400;
	width: 100%;
	background-color: #547335;
}

.recipeHeader {
	font-family: Roboto;
	font-weight: 400;
	width: 100%;
	background-color: #547107;
}

#recipeHeader h1 {
	text-align: center;
	font-size: 40px;
	color: #ffffff;
	font-family: "Roboto";
	margin: 10px 0;
}

#recipeHeader h2 {
	text-align: center;
	font-size: 26px;
	color: #ffffff;
	font-family: "Roboto";
	margin: 20px 0;
}

#recipeHeaderImage {
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

recipeheaderImageDetails {
	max-height: 400px;
	width: auto;
	margin: 0 auto;
}

#recipeHeaderImageParent {
	text-align: center;
	width: 100%;
}

.recipeCard {
	width: 80vw;
	height: 80vw;
	margin: 50px auto;
}

.recipeTextContainer {
	width: 100%;
	height: 100%;
	display: flex;
}

.recipeheader {
	text-align: center;
	margin: auto;
	padding: 20px 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	color: #ffffff;
}

.loader-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 10001;
 }

.loading-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 16px;
	color: #585757;
}

.loader-overlay-inner {
	position: relative;
	height: 100vh;
}

.loader-overlay-inner-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.loader {
	border: 7px solid #f3f3f3; /* Light grey */
	border-top: 7px solid #547107; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#contactComplete {
	display: none;
	text-align: center;
	width: 80%;
	background-color: #557435;
	padding: 40px 0;
	position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#contactComplete i {
	position: absolute;
	top: 0;
	left: 0;
	padding: 5px;
}

#contactComplete img {
	max-width: 60%;
	margin: 10px auto;
}

#contactComplete p {
	color: #ffffff;
	font-family: Roboto;
	font-weight: 400;
	font-size: 2rem;
	margin: 20px auto;
}

.card {
	max-width: 90vw;
	margin: 0 auto;
	-webkit-box-shadow: 0px 0px 56px 0px rgba(0,0,0,0.26);
	-moz-box-shadow: 0px 0px 56px 0px rgba(0,0,0,0.26);
	box-shadow: 0px 0px 56px 0px rgba(0,0,0,0.26);
	margin-top: 50px;
	margin-bottom: 50px;
	padding-bottom: 20px;
	height: auto;
}

#recipeWrapper {
	-webkit-box-shadow: 0px 0px 56px 0px rgba(0,0,0,0.26);
	-moz-box-shadow: 0px 0px 56px 0px rgba(0,0,0,0.26);
	box-shadow: 0px 0px 56px 0px rgba(0,0,0,0.26);
}

#galleryheader {
	font-family: "Roboto";
	color: #547335;
	font-size: 36px;
	text-align: center;
	padding: 30px 0;	
	font-weight: 500;
}

.galleryImage {
	min-width: 80vw;
	min-height: 80vw;
	margin: 2vw;
	width: auto;
	height: auto;
	display: inline-block;
}

.galleryCard {
	text-align: center;
}

.cardTextContainer {
	max-width: 80%;
	margin: 50px auto;
	padding: 20px;
}

.cardImage {
	max-width: 100%;
}

.cardHeader {
	margin: 0 auto;
	display: inline-block;
	color: #547107;
	font-size: 36px;
	padding: 10px 0;
	font-family: "Roboto";
	font-weight: 500;
}

.cardButtonGreen {
	font-family: Arial;
	color: #ffffff;
	font-size: 16px;
	background: #547335;
	padding: 15px 30px 15px 29px;
	text-decoration: none;
	margin: 10px auto 0 auto;
	display: inline-block;
	font-family: "roboto";`
	border: none;
	cursor: pointer;
}

.cardBodyText {
	padding: 10px 0;
	font-family: "roboto";
	font-weight: 400;
	white-space: pre-wrap;
	line-height: 20px;
}

.cardButtonYellow {
	font-family: Arial;
	color: #000000;
	font-size: 16px;
	background: #d8c967;
	padding: 15px 30px 15px 29px;
	text-decoration: none;
	margin: 10px auto 0 auto;
	display: inline-block;
	font-family: "roboto";
	border: none;
	cursor: pointer;
}
  
.cardButton:hover {
	text-decoration: none;
}

#footer {
	background-color: #231f20;
	padding: 20px;
	text-align: center;
}

#footer-nav-wrapper {
	width: auto;
	height: auto;
	margin: 0 auto;
	display: inline-block;
}

.footer-nav {
	display: inline-block;
	margin: 3px 5px;
	color: #ffffff;
	font-family: "roboto";
}

#footer-text-wrapper {
	padding: 20px 5px;
	text-align: left;
}

#footer-text-wrapper {
	line-height: 22px;
}

#social {
	position: fixed;
	top: 0;
	right: 0;
	padding: 20px;
	z-index: 1000;
}

.socialicon {
	margin: 0 5px;
	width: 30px;
	height: 30px;
	display: inline-block;
}

.socialiconfooter {
	margin: 0 5px;
	width: 30px;
	height: 30px;
	display: inline-block;
}

#footer-social {
	display: inline-block;
	width: 49%;
	text-align: left;
	padding-top: 20px;
}

#footer-logo {
	display: inline-block;
	width: 49%;
	text-align: right;
	padding-top: 20px;
}

.footerlogoimage {
	width: 200px;
}

#footer-text-wrapper p {
	color: #ffffff;
	font-family: "roboto";
}

.desktopCard {
	display: none;
}

.mobileCard {
	display: block;
	text-align: center;
}

.cardImageMobile {
	margin: 0 auto !important;
	max-width: 100%;

}

.productRangeCard {
	
}

/* DESKTOP VIEW */
@media only screen and (min-width: 800px) {

	#contactComplete {
		width: 50%;
	}
	
	#contactComplete i {

	}
	
	#contactComplete img {
		max-width: 40%;

	}
	
	#contactComplete p {
		margin: 0;
	}

	#recipeHeaderWrapper img{
		width: 40%;
		display: inline-block;
		float: left;
	}

	#recipeHeaderWrapper {
		overflow: hidden;
		position: relative;
		width: 100%;
		
	}

	.recipeHeaderDetails {
		width: 60% !important;
		display: inline-flex;
		float: right;
		background-color: #547335 !important;
		height: 100%;
		padding: 0 !important;
		margin: 0 !important;
		position: absolute;
		right: 0;
		top: 0;
		/* align-items items in column */
		flex-direction: column;
		/* center items horizontally */
		align-items: center;
		/* center items vertically */
		justify-content: center;
	}

	#contactDetails {
		width: 49%;
		display: inline-block;
	}
	
	#contactForm {
		width: 49%;
		display: inline-block;
	}

	#contactWrapper {
		display: flex;
	}

	#contactDetails {
		padding-top: 50px;
	}

	.recipeCard {
		width: 20vw;
		height: 20vw;
		margin: 1vw;
		display: inline-block;
	}

	.recipeLeft {
		float: left;
		margin-left: 250px !important;
	}

	.recipeRight {
		float: right;
		margin-right: 250px !important;
	}
	
	.recipeCardDetailsParent {
		width: 100%;
		height: auto;
	}

	.recipeCardDetails {
		max-width: 45%;
		display: inline-block;
		height: auto;
		position: relative;
		top: 0;
		margin: 20px;
	}

	.galleryImage {
		min-width: 24vw;
		min-height: 24vw;
		width: 24vw;
		height: 24vw;
		margin: 2vw;
	}

	#fullscreenmenu ul li a {
		font-size: 30px;
		padding: 15px !important;
	}

	.desktopCard {
		display: flex;
	}

	.mobileCard {
		display: none;
	}

	.card {
		padding: 0;
	}

	.recipeHeaderDetails {
		margin: 0 auto;
	}

	.mobileOnly {
		display: none;
	}

	.desktopOnly {
		display: block;
	}

	.cardImage {
		max-width: 100%;
		width: 100% !important;

		margin: auto;
		display: block;
	}

	.cardImageWrapper {
		width: 49%;
		text-align: center;
		display: block;
		-webkit-box-shadow: 0px 0px 56px 0px rgba(0,0,0,0.26);
		-moz-box-shadow: 0px 0px 56px 0px rgba(0,0,0,0.26);
		box-shadow: 0px 0px 56px 0px rgba(0,0,0,0.26);
	}

	.cardTextContainer {
		max-width: calc(49% - 40px);
		padding: 40px;
		max-height: 100%;
		margin: auto 0;
		width: 50%;
	}

	.floatleft {
		margin: auto auto auto 0;
	}

	.floatright {
		margin: auto 0 auto auto;
	}
}