/*
Colours:green
* #9ada5a	Conifer
* #8de16b	Light Pastel Green
* #83cf73	Mid Pastel Green
* #72cd6d	Dark Pastel Green
* #7eca6e	Mantis
* #98ce72	Gossip
* #8dc76e	Olivine
* #2f5819	Dark Green
*/
/*------ Reset ------*/
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}
html, body{height:100%;padding:0;margin:0}

/*------ Main Styles ------*/
body{font-family:'Montserrat',sans-serif}
.subtitle{font-family:'Montserrat',sans-serif}

/*------ Curved page borders  ------*/
.wavy{width:100%;height:100px;position:relative;overflow:hidden}
.wavy:before{content:"";display:block;width:50.1%;height:50px;background:rgba(106,203,106,1.0);border-radius:100% 0 0 0;position:absolute;left:0;bottom:0}
.wavy:after{content:"";display:block;width:50.1%;height:50px;background:transparent;border-radius:0 0 100% 0;border:200px solid rgba(106,203,106,1.0);border-width:0 200px 200px 0;position:absolute;left:50%;top:0}
.wavy.top{top:-1px;/*------ for IE ------*/
-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}
.wavy.right{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.wavy.top.right{top:-1px;/*------ for IE ------*/
-webkit-transform:rotateY(180deg) rotateX(180deg);transform:rotateY(180deg) rotateX(180deg)}
.wavy.or:before{background:rgba(106,203,106,1.0)}
.wavy.or:after{border-color:rgba(106,203,106,1.0)}
.wavy.gn:before{background:#4d1}
.wavy.gn:after{border-color:#4d1}
.wavy.bottom{position:absolute;bottom:0}

/*------ Header ------*/
header ul li{border-radius:6px 0}
header{width:100%;background:rgba(0,0,0,0.3);position:fixed;left:0;top:0;z-index:10;color:#fff;padding:20px 0 30px 0}
header h1{padding:0 0 0 50px;margin:0;font:normal 40px/60px 'Fredericka the Great', 'Montserrat',sans-serif;color:rgba(238,188,39,1);text-shadow:0 1px 1px rgba(0,0,0,1.0)}
header h2{padding:0 0 0 50px;margin:0;font:normal 16px/16px 'Fredericka the Great', 'Montserrat',sans-serif;color:rgba(238,188,39,1);text-shadow:0 1px 1px rgba(0,0,0,1.0)}
header h1.SiteTitle a{text-decoration:none;color:rgba(238,188,39,1);-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in}
header h1.SiteTitle a:hover{color:rgba(106,203,106,1.0);text-shadow:0 1px 1px rgba(0,0,0,1.0)}
header ul{padding:0;margin:0;list-style:none;width:100%;position:absolute;left:0;bottom:5px;text-align:right}
header ul li{display:inline-block;margin:1px 2px;position:relative;text-align:center}
header li:nth-of-type(1){background:transparent}
header li:nth-of-type(2){background:transparent}
header li:nth-of-type(3){background:transparent;margin-right:20px;padding:0 10px 0 0}
.left{float:left}

/*------ Footer ------*/
footer{width:100%;background:rgba(106,203,106,1.0);padding:30px 0;color:#000;text-shadow:none!important}
#FooterCopyright{float:left}
#FooterMenu{float:right;margin-right:20px}
footer h2{padding:0 0 0 50px;margin:0;font:normal 15px/15px 'Montserrat',sans-serif}

/*------ nav ------*/
/*------ Menus ------*/
.menu ul{padding:0;margin:0;border:0px solid #aaa;background:transparent}
.menu ul li{display:inline-block;position:relative}
.menu ul li{*display:inline}
.menu ul li a{display:block;width:6.0vw;height:3.0vh;text-decoration:none;font:normal 2.0vw/60px 'Fredericka the Great',arial,sans-serif;color:rgba(238,188,39,1);text-shadow:0 1px 1px rgba(0,0,0,1.0);-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in}
.menu ul li a:hover{color:rgba(106,203,106,1.0)}
.menu.right{text-align:right}

/*------ Layout ------*/
section{display:block;width:100%;position:relative;opacity:1 !important;filter:alpha(opacity=100) !important}
section article{width:90%;max-width:1300px;min-width:300px;min-height:600px;margin:0 auto;text-align:center;padding:0 0 100px 0}
section article h1{padding:0;margin:0 0 .5em 0;font:normal 3.6vw/80px 'Fredericka the Great', 'Montserrat',sans-serif;text-shadow:0 1px 1px rgba(0,0,0,1.0);color:rgba(238,188,39,1)}
section article h2{padding:0;margin:0 0 .5em 0;font:normal 2.0vw/50px 'Montserrat',sans-serif;text-shadow:0 1px 1px rgba(0,0,0,1.0)}
section article p{padding:0;margin:0;font:bold 20px/30px 'Montserrat',sans-serif}
section article .column{display:inline-block;width:40%;margin:50px 5%;vertical-align:top;text-align:left}
section article .column h3{color:#2f5819;padding:0;margin:0;font:normal 30px/60px 'Fredericka the Great', 'Montserrat',sans-serif;text-shadow:0 1px 1px rgba(0,0,0,1.0)}
section article .column p{padding:0;margin:0;font:normal 16px/24px 'Montserrat',sans-serif;color:#333}

.pad{height:160px}
.bottom{position:absolute;bottom:0;left:0}

/*------ Page backgrounds ------*/
#a1{min-height:100%;color:#fff}
#a1::after {background:url(../images/04.jpg) no-repeat center center fixed;background-size:cover;content:"";opacity:1;filter:alpha(opacity=100);top:0; left:0;bottom:0;right:0;position:absolute;z-index:-1}
#a2{background:rgba(106,203,106,1.0)}
#a3{background:url(../images/02.jpg) no-repeat center center fixed;background-size:cover}
#a4{background:#9aDa5a;color:#fff}
#a5{background:url(../images/03.jpg) no-repeat center center fixed;background-size:cover}
#a6{background:rgba(106,203,106,1.0)}

/*------ Responsive @media queries ------*/
@media only screen and (max-width:768px){
	header h1{padding:0 0 0 30px;margin:0;font:normal 30px/50px 'Fredericka the Great', 'Montserrat',sans-serif}
	header h2{padding:0 0 0 30px;margin:0;font:normal 13px/13px 'Fredericka the Great', 'Montserrat',sans-serif}
	section article h1{padding:0;margin:0;font:normal 50px/60px 'Fredericka the Great', 'Montserrat',sans-serif}
	section article h2{padding:0;margin:0;font:normal 30px/40px 'Fredericka the Great', 'Montserrat',sans-serif}
	section article p{padding:0;margin:0;font:normal 15px/20px 'Montserrat',sans-serif}
	.pad{height:80px}
	section article .column{width:80%;margin:20px auto 0 auto;vertical-align:top;text-align:left}
}
@media only screen and (max-width:480px){
	header h1{padding:0 0 0 20px;margin:0;font:normal 25px/40px 'Fredericka the Great', 'Montserrat',sans-serif}
	header h2{padding:0 0 0 20px;margin:0;font:normal 12px/12px 'Fredericka the Great', 'Montserrat',sans-serif}
	section article h1{padding:0;margin:0;font:normal 40px/50px 'Fredericka the Great', 'Montserrat',sans-serif}
	section article h2{padding:0;margin:0;font:normal 25px/30px 'Fredericka the Great', 'Montserrat',sans-serif}
	section article p{padding:0;margin:0;font:normal 13px/18px 'Montserrat',sans-serif}
	.pad{height:70px}
	header a{width:20px}
}
@media only screen and (max-width:320px){
	header h1{padding:0 0 0 10px;margin:0;font:normal 22px/30px 'Fredericka the Great', 'Montserrat',sans-serif}
	header h2{padding:0 0 0 10px;margin:0;font:normal 12px/12px 'Fredericka the Great', 'Montserrat',sans-serif}
	section article h1{padding:0;margin:0;font:normal 40px/50px 'Fredericka the Great', 'Montserrat',sans-serif}
	section article h2{padding:0;margin:0;font:normal 25px/30px 'Fredericka the Great', 'Montserrat',sans-serif}
	section article p{padding:0;margin:0;font:normal 13px/18px 'Montserrat',sans-serif}
	.pad{height:60px}
}

@media (min-device-width:320px) and (max-device-width:768px){
	section#a1,
	section#a3,
	section#a5,
	section#a7,
	section#a9
	{background-attachment:scroll}
}
/*------ Forms ------*/
form.prompts{padding:0;width:80%;min-width:300px;margin:25px auto}
form.prompts input.prompt{width:calc(100% - 22px);height:50px;font:normal 16px/40px 'Montserrat',sans-serif;color:#333;padding:5px 10px;margin:5px 0;border:1px solid #ddd;border-radius:8px}
form.prompts textarea.prompt{display:block;width:calc(100% - 22px);height:200px;padding:15px 10px;margin:5px 0;font:normal 16px/25px 'Montserrat',sans-serif;color:#666;overflow:auto;border:1px solid #ddd;border-radius:8px}
form.prompts div.check{position:relative;width:30%;height:55px;margin:5px 0}
form.prompts div.check label{display:block;margin-left:30px;margin-top:-15px;font:normal 16px/20px 'Montserrat',sans-serif;color:#888;cursor:pointer}
/*
 * form.prompts div.check label span.yes{color:#080}
form.prompts div.check label span.no{color:#f00;display:none}
form.prompts div.check label:before{content:"YES\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0NO";display:block;width:100px;height:40px;border-radius:5px;border:5px solid #999;font:bold 12px/40px 'Montserrat',sans-serif;color:#fff;text-align:center;position:absolute;left:0;top:0;box-shadow:inset 0 0 10px rgba(0,0,0,0.8);
background:linear-gradient(to right, #080 50%, #f00 50%)} 
form.prompts div.check label:after{content:"";display:block;width:51px;height:40px;background:rgba(0,0,0,0.8);position:absolute;left:54px;top:5px;box-shadow:0 0 10px rgba(0,0,0,1.0);-webkit-transition:0.5s;transition:0.5s}
 ------*/
form.prompts div.check #maillist:checked ~ label:after{left:5px}
form.prompts div.check #maillist:checked ~ label span.yes{display:none}
form.prompts div.check #maillist:checked ~ label span.no{display:inline}
form.prompts #submit{width:50%;height:60px;margin:0;background:#c00;color:#fff;border:0;border-radius:5px;cursor:pointer;font:normal 16px/25px  'Montserrat',sans-serif;-webkit-transition:0.5s;transition:0.5s}
datalist select option{width:50%;height:50px;border:1px solid #ddd}
form.prompts *::-webkit-input-placeholder{color:#45a !important;text-overflow:ellipsis}
form.prompts *:-moz-placeholder{color:#45a !important;text-overflow:ellipsis}
form.prompts *::-moz-placeholder{color:#45a !important;text-overflow:ellipsis}
form.prompts *:-ms-input-placeholder{color:#45a !important;text-overflow:ellipsis}
form.prompts *:input-placeholder{color:#45a !important;text-overflow:ellipsis}
form.prompts *:focus{outline:0}
form.prompts *:invalid{box-shadow:none;border:0;outline:0}
form.prompts *:required:invalid, form.prompts *:focus:invalid{background:#fff url(tutorial4/invalid.png) no-repeat right 5px top 5px} 
form.prompts *:required:valid{background:#fff url(tutorial4/valid.png) no-repeat right 5px top 5px;color:#080 !important}
form.prompts *:-moz-ui-invalid{box-shadow:0 0 3px rgba(0,0,0,0.4);background:#fff url(tutorial4/fail.png) no-repeat right 5px top 5px !important}
form.prompts #name:valid ~ #email:valid ~ #url:valid ~ #comment:valid ~ #submit{background:#080}
form.prompts p{padding:10px 0;margin:0}
form.prompts p:before{content:"All fields are required - form waiting completion";font:normal 16px/25px  'Montserrat',sans-serif;color:#c00}
form.prompts #name:valid ~ #email:valid ~ #url:valid ~ #comment:valid ~ p:before{content:"All fields are required - form complete";color:#080}


/*------ Buttons ------*/
a.OrderNow{display:block;width:30.0vw;height:8.0vw;text-decoration:none;font:normal 6.0vw/8.0vw 'Fredericka the Great',arial,sans-serif;color:rgba(238,188,39,1);text-shadow:0 1px 1px rgba(0,0,0,1.0);margin:100px auto;background:none;padding:10px 15px 10px 5px;background:rgba(0,0,0,0.7);border:1px solid rgba(0,0,0,0.9);-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in}
a.OrderNow:hover{color:rgba(106,203,106,1.0);background:rgba(0,0,0,1.0);border:1px solid rgba(0,0,0,0.7)}