h1, h2, h3, h4, h5, label, input, textarea {margin:0; padding:0;}

/*COLOUR*/
/*White*/
#contact form input[type="submit"], .button, .hero h1, .hero small a, .pagination a {color:#FFF;}
/*Offwhite*/
body, .pagination a:hover {background:#F1F1F1;}
/*Grey*/
h2, header .lead, #biome {color:#7A7878;}
#services {background-color:#7A7878;}
/*Grey Dark*/
body, a:hover, textarea, #contact form input {color:#222;}
/*Blue*/
a, blockquote, .pagination a:hover {color:#0097aa;}
.pagination a {background:#0097aa;}
.pagination a {border:1px solid #0097aa;}
aside {border-left:1px dotted #0097aa;}
/*Green-yellow*/
h3 {color:#90AB2D;}
nav {background-color:#90AB2D;}

/*TYPOGRAPHY*/
h1, h3, h4, .alert {font-family: 'Quando', serif;}
aside, h2, h4, h5, label, input, nav, textarea, #biome, .button, .card, .hero small, .pagination, .summary  {font-family: 'Open Sans', sans-serif;}
html {font-size:17px; line-height:30px;}
body {font-family: Quando, serif; text-align:center; font-size:100%; line-height:150%;}
a {text-decoration:none;}
aside {padding: 0px 15px;}
blockquote {font-style:italic; font-size:200%; line-height:200%; padding-left:40px;}
form {display: inline-block; width:100%;}
h1 {font-size: 300%; 
	line-height: 90%;
	text-shadow: 0px 1px 1px #4A4A4A;
	color: #473f3e;
	}
	@media (min-width: 550px) {h1 {font-size: 600%; margin-bottom:50px;} }
h2 {font-size: 150%; line-height: 160%; margin-bottom:8px; text-transform:uppercase;}
	@media (min-width: 550px) {h2 {font-size: 160%; line-height: 130%;} }
h3 {font-size: 130%; line-height: 130%; margin-top:15px; margin-bottom:7px;}
	@media (min-width: 550px) { h3 {font-size: 150%;} }
h4 {text-transform:uppercase; font-size:70%;  line-height: 125%; margin-bottom:10px; color:#CCC;}
	@media (min-width: 550px) {h5 {font-size: 100%;} }
h5 {text-transform:uppercase; font-size:70%; border-bottom: 1px solid #CCC; padding:3px; width:auto;}
li {padding: 0px 0px 10px 15px;}
p {margin-bottom: 1em;}
small {color:#CCC; font-size:70%; display:block; margin-top:15px;}

header {
	/*background-image: url(/site/templates/assets/tree_bark.png);
  	background-image: url(/site/templates/assets/tree_bark.png), linear-gradient(#78776b, #333837);
	background-blend-mode: overlay;
	background-attachment:fixed;*/
	height:160px; 
	overflow:hidden !important;
	padding-top:90px;
	}
	@media (min-width: 770px) {header {height:200px; padding-top:100px;} }
header img {width:250px;}
	@media (min-width: 770px) { header img {width:400px;} }
header .lead {font-size:90%; padding-bottom:20px;}
	@media (min-width: 550px) {header .lead {font-size:100%;} }
	@media (min-width: 770px) {header .lead {font-size:150%; line-height:100%; padding:0px 140px;} }
	
nav {
	padding:10px 0px; 	
	border-top:1px solid #222; 
	margin:0px; 
	position:fixed; 
	top:0;
	width:100%; 
	z-index:1000;
	}
	@media (min-width: 550px) { nav {font-size:120%;}}
nav a {padding: 10px; top:15px; color:#FFF; text-decoration:none;}
nav.fixed {	 
	position: fixed; 
	left: 50%; 
	top: 0%; 
	transform: translateX(-50%); 
	width:2000px; 
	z-index:100; 
	}
	
section {margin-bottom:50px;}

#biome { background-image: url('/site/templates/assets/pentagon-grey.png'); background-attachment:fixed; }
#biome .container p { font-size:120%; line-height:140%; padding:30px; }
	@media (min-width: 770px) {#biome .container p { padding:50px 140px; }}
#services {background: linear-gradient(#7A7878, #222); color:#FFF; padding: 50px 0px; margin-top:20px;}
#services h2 {color:#FFF;}
#services h3 {line-height:90%; margin-top:20px;}
#services ul, #services li {list-style-type:none; padding:0;}
#services li {margin-bottom:15px;}
#services .row {margin-bottom:0px; text-align:left;}

#contact {padding: 15px; margin-bottom: 30px; text-align:left;}
	@media (min-width: 750px) {#contact {padding: 25px;}}
#contact form input, textarea {
	padding:10px; margin-bottom: 15px; background:none; border:1px solid #222; display: block; width:90%;
	}
#contact form input[type="submit"], .button {-webkit-appearance: none; padding:15px; display: inline-block; cursor:pointer; background:#90AB2D; border:2px solid #90AB2D; border-radius:5px; text-align: center; width:95%; font-weight:bold; font-size:120%;}
#contact form input[type="submit"]:hover, .button:hover {background:none; color:#90AB2D;}
#contact form input.check {display:none;}
#contact form label {display:block;}

#work {margin-top:60px; text-align:left;}
#work .pagination {padding:15px 0px;}
@media (max-width: 770px) {#work .pagination a {display:block; margin-bottom: 5px;} }
#work .summary ul {padding:0px; margin:0px;}
#work .summary li {padding: 8px 0px 8px 0px; margin:0px; border-top:1px solid #CCC; list-style-type:none;}
#work .summary li strong {display:block;}
#work #bigthumb img {border:1px solid #CCC;}

footer {background-image: url('/site/templates/assets/pentagon-grey.png');}

/*STRUCTURE*/
.container { 
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box; 
	}
	@media (min-width: 550px) {.container {width: 80%; padding:0}}
	.columns {box-sizing: border-box; float:left; margin-bottom:2%; width:100%;}
	.columns img {box-sizing: border-box; display: block; width: 100%;}
	@media (min-width: 550px) {
	.columns {margin-right:2%;}
	.twelve.columns	{width:100%; margin-right:0%;}
	.eight.columns	{width:64.66666%}
	.six.columns 	{width:48%;}
	.five.columns	{width: 39.3333333333%;}
	.four.columns 	{width:31.3333%;}
	.three.columns 	{width:48%;}     
	.two.columns  	{width:31.3333%;}   
	.one.columns	{width: 4.66666666667%; }
	}
	@media (min-width: 770px) {              
	.three.columns 	{width:23%;} 
	.two.columns  	{width:14.66666666666667%;}   
	}
.row {clear:both; overflow: auto;}
/*cards*/
.card {position:relative;}
.card .columns {position:relative; border:1px solid #CCC;}
	@media (max-width: 770px) {.card .columns {width:100%; margin-right:0%;}} /*cards don't get too small*/
.card .columns:hover {border:3px solid #90AB2D; transition: border, .2s;}
.card img {z-index:-1;}
.card span {z-index:50; position:absolute; top:0;}
/*Fancy hover card*/
.card.fancy span {background:rgba(74, 74, 74, 0.85); color:#FFF; font-size:70%; height:75px; text-align:center; top:auto; bottom:0; transition: height, .2s; width:100%;}
.card.fancy span p {padding:10px;}
.card.fancy span small {display:none;}
.card.fancy .columns:hover span {background:#90AB2D; height:90px; overflow:hidden; transition: height, .2s;}
.card.fancy .columns:hover span small {display:block;}
.pagination a {border-radius:5px; margin-right:7px; padding:7px;}

/*USEFUL*/
.alert {width:100%; background:#D4E188; padding:15px; position:absolute; top:0; left:0;}
.bb {height:100px;}
.center {text-align:center;}
.hero {height:350px; position:relative;}
.hero h1 {font-size:150%; margin:30px 20px; position:absolute; bottom:0; left:20;}
	@media (min-width: 550px) {.hero h1 {font-size:400%;}}
.hero small a {position:absolute; top: 0; right:0; margin:10px 20px;}