html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: border-box; }

html, body {
	margin: 0;
	padding:0;
	height: 100%;
 }

html {
    overflow-y:scroll;
	font-size: 100%;
 }
body {
	position: relative;
	background-color: #f1f1f1;
 }
*    {
	margin:0;
	padding:0;
 }

/* 	clearfix ----------------------------------------------------------------------------------- 
	
	- Contain floats but not margins
   	- Does have issues but I can't remember what?
   
   	re-test: -- dp
   	-------------------------------------------------------- */

.cf::after, 
.v-align::after,
.wrap::after,
.col::after{
	content: " ";
	display: block;
	clear: both;
 }

/* 	wrap --------------------------------------------------------------------------------------- 
	
	- Common screen width is divided by scale to give wrapper width
	- Wrapper scales down at same percentage as font size to preserve line.

	desktop: 			8:5 	= 1920 X 1200	1920 / 1.5 = 1280
	desktop: 			16:9 	= 1920 X 1080	
	desktop monitor: 	8:5		= 1680 X 1050	1680 / 1.5 = 1120
	notebook 14in		16:9	= 1366 x 768	
	macbook air 13in: 	8:5		= 1440 x 900	1440 / 1.5 = 960
	ipad 3/4 			4:3		= 1024 x 768	
   	
   	-------------------------------------------------------- */

.wrap {
	margin: 0 auto;
	width: 60em;
	position:relative;
	z-index:2;
 }
@media (min-width: 0em)		{ .wrap { width: auto; 	   }}		
@media (min-width: 30em)	{ .wrap { max-width: 30em; }}
@media (min-width: 45em)	{ .wrap { max-width: 35em; }}
@media (min-width: 60em)	{ .wrap { max-width: 56em; }}
@media (min-width: 90em)	{ .wrap { max-width: 64em; }}
@media (min-width: 120em) 	{ .wrap { max-width: 72em; }}
@media (min-width: 150em) 	{ .wrap { max-width: 80em; }}

/* 	vertical positioning ----------------------------------------------------------------------- 
	
	scaffolding documentation here

	Calculating margins in percentages
	(Target / context) * 100 = percentage

	percentage margins calculate percentage from parent element
   	
   	-------------------------------------------------------- */

.v-align {
	margin-top:1.75em; /* 24px */
	margin-bottom:1.75em; /* 24px */
 }
.v-block {
	height:42px;
	height:3.5em;
 }
@media (min-width: 30em) {
	.v-align {
		margin-top: 11.66666666666667%;
		margin-bottom: 11.66666666666667%;
	 }
 }
@media (min-width: 60em) {
	.v-align {
		margin-top:7%; /*  */
		margin-bottom:9.375%; /* 84 */
		margin-bottom:7%; /*  */
	 }
	.v-block {
		height:113px;
		height:8em;
	 }
 }
@media (min-width: 75em) {
	.v-align {
		//margin-top:9.375%; 		/* 84 */
		//margin-bottom:9.375%; 	/* 84 */
		margin-top:7%; 		/* 84 */
		margin-bottom:7%; 	/* 84 */
	 }
	.v-block {
		height:113px;
		height:8em;
	 }
 }

/* 	grid --------------------------------------------------------------------------------------- 
	
	- Define .row and .col as block objects, mobile first
	- Attach the micro clearfix to framework elements that may contain floats

	- .row 		= by default is displayed as a block but can be modified to display table to change column layout
	- .col 		= any content wrapping container that acts as a column should be called a col. col does not have to be wrapped in a row
	- .box 		= used an alternative to col usually when a generic wrapper is needed or when inside a col itself
	- .frame 	= Used to wrap a frame like a google map

	Use percentages to calculate column width and gutters.

	1. get width in pixels of wrapper
	2. calculate desired gutter widths for between columns
	3. Check to see if column width can be divided evenly into wrapper inc gutters
	4. Use the following formula to calculate flexible widths
	5. target / context * 100 = percentage 


	wrapper = 1152px
	gutter 	= 24px 	(48px gutter)
	column	= 552px	(2 column)
	
	552 / 1152 * 100 = 47.91666666666667
	24 / 1152 * 100 = 2.083333333333333



	refactored: 21/4/15 -- dp
   	------------------------------------------------------- */

.row {
	display: block; /* default block but can be changed to table */
	table-layout: fixed; /* ensures explorer positions correctly */
	width:100%;
 }
.col {
	display: block; /* default block but can be changed to table-cell */
	position: relative;
	vertical-align: top;
 }
.box {
	display: block;
	position: relative;
	vertical-align: top;
 }

/* 	size --------------------------------------------------------------------------------------- 
	
	- The font size is tied directly to the width of wrapper
	- The wrapper will decrease by the same percentage as the font size
	- The numbers below provide the first divisable whole numbers
	- The division always results in whole number for font-size preventing pixel bluring
	- Numbers from each row represent the font-size relative to breakpoint
	- wrp width and font size have to be selected from same column to scale up evenly 

			 	 font size
	---------------------*------------------------		---------------- 
	bpt		150	135	120	105	90 	75	60	45	30	15		percentage
	---------------------*------------------------		---------------- 
	---		140	126	112	98	84	70 -56-	42	28	14		1.071428571428571
	---		130	117	104	91	78	65	52	39	26	13		1.076923076923077
	---		120	108	96	84	72	60	48	36	24	12		1.083333333333333
	---		110	99	88	77	66	55	44	33	22	11		1.090909090909091
	--- 	100 90	80	70	60 	50	40	30	20	10		1.1
	---		90	81	72	63	54	45	36	27	18	9		1.111111111111111
	wrp	   -80	72	64 -56-	48 	40	32	24	16	8		1.125
	---		70	63	56	49	42 	35	28	21	14	7		1.142857142857143
	max		60	54	48	42	36	30	24	18	12	6		1.166666666666667
	lrg		50	45	40	35	30	25	20	15	10	5		1.2
	---		40	36	32	28	24	20	16	12	8	4		1.25
	med		30	27	24	21	18	15	12	9	6	3		1.333333333333333
	sml	20	18	16	14	12	10	8	6	4	2			1.5				
	min		10	9 	8 	7 	6	5	4	3	2	1		
	--------------------*------------------------- 		----------------- 
			  	   	   sml

	- Use the collected scale as the base for all measurments
	- Wrapper and font size have to come from same colunm 

	xx-small, x-small, small, medium, large, x-large, xx-large
	A set of absolute size keywords smld on the user's default font size (which is medium). 
	
	The font size has to compromise with sizes availalbe from column above more research needed.
	the following font sizes have been selected based roughly on scale used below.
	
	- Perfect forth 1:1.333

	refactored: 21/5/15 -- dp
   	-------------------------------------------------------- */

.max, .lrg, .med, .sml, .min {
	font-size:1em;
	line-height:1.45;
 }

@media (min-width: 0em)   {
	.max { font-size:2.625em; 			} /* 42px 	 */
	.lrg { font-size:1.53125em; 		} /* 24.5px  */
	.med { font-size:1.09375em; 		} /* 17.5px  */
	.sml { font-size:0.875em; 			} /* 14px 	 */
	.min { font-size:0.65625em; 		} /* 10.5px  */

	.max { font-size:1.53125em; 		} /* 24.5px  */
	.lrg { font-size:1.3125em; 			} /* 21px 	 */
	.lrg { font-size:1.09375em; 		} /* 17.5px  - change due to shitness */
	.med { font-size:0.9375em; 			} /* 15px 	 */
	.sml { font-size:0.75em; 			} /* 12px 	 */
	.min { font-size:0.5625em; 			} /* 9px  	 */

	.logo-tt { font-size: 2.25em; line-height:.9; 		} /* 36px    */
	.logo-t  { font-size: 1.6875em;		} /* 27px    */
	.logo-b  { font-size: 1.03125em; 	} /* 16.5px  */

	.logo-t  { font-size: 1.96875em;	} /* 31.5px  */
	.logo-b  { font-size: 1.203125em; 	} /* 19.25px */
 }
@media (min-width: 30em)  {
	.max { font-size:2.625em; 			} /* 42px 	 */
	.lrg { font-size:1.53125em; 		} /* 24.5px  */
	.med { font-size:1.09375em; 		} /* 17.5px  */
	.sml { font-size:0.875em; 			} /* 14px 	 */
	.min { font-size:0.65625em; 		} /* 10.5px  */

	.max { font-size:2.25em; 			} /* 36px 	 */
	.lrg { font-size:1.3125em; 			} /* 21px 	 */
	.med { font-size:0.9375em; 			} /* 15px 	 */
	.sml { font-size:0.75em; 			} /* 12px 	 */
	.min { font-size:0.5625em; 			} /* 9px  	 */

	.logo-tt { font-size: 2.25em; 		} /* 36px    */
	.logo-t  { font-size: 1.6875em;		} /* 27px    */
	.logo-b  { font-size: 1.03125em; 	} /* 16.5px  */

	.logo-t  { font-size: 1.96875em;	} /* 31.5px  */
	.logo-b  { font-size: 1.203125em; 	} /* 19.25px */
 }
@media (min-width: 60em)  {
	.max { font-size:2.625em; 			} /* 42px 	 */
	.lrg { font-size:1.53125em; 		} /* 24.5px  */
	.med { font-size:1.09375em; 		} /* 17.5px  */
	.sml { font-size:0.875em; 			} /* 14px 	 */
	.min { font-size:0.65625em; 		} /* 10.5px  */

	.logo-tt { font-size: 2.625em; 		} /* 42px 	 */
	.logo-t  { font-size: 1.96875em;	} /* 31.5px  */
	.logo-b  { font-size: 1.203125em; 	} /* 19.25px */

 }
@media (min-width: 90em)  {
	.max { font-size:3em; 				} /* 48px 	 */
	.lrg { font-size:1.75em; 			} /* 28px 	 */
 // .lrg { font-size:1.6825em; 			} /* 27px 	 */
	.med { font-size:1.25em; 			} /* 20px 	 */
	.sml { font-size:1em; 				} /* 16px 	 */
	.min { font-size:0.75em; 			} /* 12px 	 */

	.logo-tt { font-size: 3em; 			} /* 48px 	 */
	.logo-t  { font-size: 2.25em; 		} /* 36px 	 */
	.logo-b  { font-size: 1.375em; 		} /* 22px 	 */
 }
@media (min-width: 120em) {
	.max { font-size:3.375em; 	 		} /* 54px 	 */
	.lrg { font-size:1.8em; 		} /* 31.5px  */
	.med { font-size:1.40625em; 		} /* 22.5px  */
	.sml { font-size:1.125em; 	 		} /* 18px 	 */
	.min { font-size:0.84375em; 		} /* 13.5px  */

	.logo-tt { font-size: 3.375em; 		} /* 54px 	 */
	.logo-t  { font-size: 2.53125em; 	} /* 40.5px  */
	.logo-b  { font-size: 1.546875em;	} /* 24.75px */
 }
@media (min-width: 150em) {
	.max { font-size:3.75em; 			} /* 60px 	 */
	.lrg { font-size:2.1875em; 			} /* 35px 	 */
	.med { font-size:1.5625em; 			} /* 25px 	 */
	.sml { font-size:1.25em;  			} /* 20px 	 */
	.min { font-size:0.9375em;			} /* 15px 	 */

	.logo-tt { font-size: 60px; 		} /* 60px 	 */
	.logo-t  { font-size: 45px; 		} /* 45px 	 */
	.logo-b  { font-size: 27.5px; 		} /* 27.5px  */
 }

/*	type --------------------------------------------------------------------------------------- 
	
	hierarchy documentation here

	.txt 	= set all defaults and fallbacks, needs to be researched 
	.btn 	= core requirements for a button are added and then use module scepific cases to color and position
	.img 	= default styling required if inline images stretching to edges of container
	.bmg 	= stands for background image used to set defaults for all background options
	.svg	= basically same as bmg but used to identify cases of svg files being used as background images
	.lnk 	= use on "a" tags only clense the link of default styling fresh and ready for use
	.ico 	= this class is used for icon fonts only use svg for icons in svg format

	background property

	background:; - shorthand use below vals in any order serarated by space
	background-attachment: scroll;
	background-image: none
	background-position: 0% 0%
	background-size: auto auto
	background-repeat: repeat
	background-origin: padding-box
	background-clip: border-box
	background-color: transparent

	https://developer.mozilla.org/en-US/docs/Web/CSS/background

	checked: 20/5/15 - core - candidate -- dp
   	-------------------------------------------------------- */

.txt  {
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-rendering: geometricPrecision;

	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
 }
.img  {
	display: block;
	height: auto !important;
	width: 100%;
 }
.bmg  {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: #202020;
	background-origin: border-box;
	background-position: center center;
	background-repeat: no-repeat;	
	display: block;
 }
.svg  {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: transparent;
	background-origin: border-box;
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
 }
.link {
	text-decoration: none !important;
	display:block;
 }
.icon {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
 }

/* 	buttons ------------------------------------------------------------------------------- 
	
	scaffolding documentation here

	checked: 31/10/15 - core - candidate -- dp
   	-------------------------------------------------------- */

/* bones */
.btn  {
	background-color: white;
	background-image: none;
	border: 1px solid transparent;
	color: #455657;
	cursor: pointer;
	display: inline-block;
	font-family: 'robotoregular';
	line-height: 1;
	padding: .625em .75em;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
	white-space: nowrap;

	outline: none;
	position: relative;

	-moz-user-select: none;
	box-sizing:border-box;

 }
.btn:before{
	content:'';
 }
.btn:after{
	content:'';
 }

/* 	hover states ------------------------------------------------------------------------------- 
	
	scaffolding documentation here

	checked: 20/5/15 - core - candidate -- dp
   	-------------------------------------------------------- */

.txt::selection {
  background: rgba(0,188,220,0.8);
  color:white;
 }
.txt::-moz-selection {
  background: rgba(0,188,220,0.8);
  color:white;
 }

/* 	content hierarchy -------------------------------------------------------------------------- 
	
	Vertical txt margins and default styling
   
	Interesting concept of relative positioning for controling line height
	Also the pseudo element :first-line is an option to align img with top of text ; 

	.heading    {
		position:relative;
		top:-0.1em;
	 }

	checked: 20/5/15 - core - candidate -- dp	
   	-------------------------------------------------------- */

.heading {
	display:block;
	margin-bottom: .25em;
	color: #455657;
 }
.para {
	display:block;
	margin-top: 0;
	margin-bottom: .75em;
 }
.sub {
	display:block;
	//margin-top: .25em;
	//margin-bottom: .625em;
 }
.statement {
	display: block;
	margin-top: .625em;
	margin-bottom: .625em;
 }
.bullet {
	display:inline-block;
  }

/* 	default font combinations ------------------------------------------------------------------ 
	
	Unique font styles for specific combinations 
   	Issues around changing font weight for light and dark backgrounds
	Good way to adstract out headings font selections 

	checked: 20/5/15 - candidate -- dp
   	-------------------------------------------------------- */

.max.heading {
	font-family: 'robotothin';
 }

.lrg.heading,
.med.heading,
.sml.heading {
	font-family: 'robotoregular';
 }

.max.sub {
	font-family: 'robotolight';
 }
.lrg.sub,
.med.sub,
.sml.sub {
	font-family: 'robotoregular';
 }

.max.para {
	font-family: 'robotolight';
 }
.lrg.para {
	font-family: 'robotobold';
 }
.med.para {
	font-family: 'robotolight';
 }
.sml.para {
	font-family: 'robotoregular';
 }
.sml.para.success,
.sml.para.error {
	font-family: 'robotolight';
 }

/* 	active states ------------------------------------------------------------------------------ 
	
	scaffolding documentation here

	checked: 20/5/15 - not completed -- dp
   	-------------------------------------------------------- */

.default {
	background-color: blue;
 }
.error {
	padding:.5em;
	text-align: center;
	border:1px solid rgb(255,9,0);
	background-color: rgb(255,81,58);
	color:rgb(178,7,0);
	margin-bottom: 1em;
 }
.success {
	padding:.5em;
	text-align: center;
	border:1px solid rgb(0,178,51);
	background-color: rgb(98,255,142);
	color:rgb(0,178,51);
	margin-bottom: 1em;
 }
.confirm {
	background-color: orange;
 }

/* 	txt modifiers ------------------------------------------------------------------------------ 
	
	scaffolding documentation here
   	
	checked: 20/5/15 - not completed -- dp
   	-------------------------------------------------------- */

.emphasize  {
	font-weight: strong;
	font-size: 150%;
	line-height: 1.2;
 }
.line-break {
	display: block;
 }
.solid-line {
	display: block;
	margin-top:2em;
	margin-bottom:2em;
	border: 0px solid rgba(0,0,0,0);
	border-top: 2px solid rgba(0,0,0,0.2);
	border-bottom: 0px solid transparent;
	clear:both;
 }

/* 	form bones --------------------------------------------------------------------------------- 
	
	- Generic form styling used in throughout website
	- Use this setup for all input field, text area fields, radio buttons, check boxes
	
	- .form 		= default browser font size as browsers have variable default font sizes for input fields
  					= .form class is used to identify the <form> element
  	
  	- .field		= form and field are not connected by child combinator this allows input fields to be wrapped in cols
  					= .field class is used to identify the <label> element 
  	
  	- .input		= set all the defaults and resets. Setup as a flexable element wrapped in the label element.
					= .input class is used to identify the <input> element
	
	- .textarea		=
	- .radio-btn	=
	- .check-box	= 
	- .select		=
	- .screen		=

	Honeypot field to capture spam

	checked: 20/5/15 - core - research -- dp
   	----------------------------------------------------------------------------------------- */

.form {
	font-size: 1rem;
	background-color: rgba(69,86,87,.8);
	padding:24px;
 }
.form .field {
	display: block;
	overflow: hidden;
	position: relative;
 }
.form .field > .input {
	display: block;
	background-color:rgba(255,255,255,.4);
	border: 1px solid rgba(0,0,0,0.3);
	color: rgba(0,0,0,0.7);
	cursor: text;
	font-family: 'robotoregular';
	line-height: inherit;
	letter-spacing: normal;
	outline: none;
	padding:.375em .75em;
	text-shadow:none;
	text-align: left; /* as backup */ text-align: start;
	text-indent: 0px;
	vertical-align: bottom;
	word-spacing: normal;
	white-space: nowrap;
	width: 100%;

	box-sizing: border-box;
	-webkit-appearance:none; 
	-webkit-border-radius:0;
 }
.form .field > .textarea {
	display: block;
	background-color:rgba(255,255,255,.4);
	border: 1px solid rgba(0,0,0,0.3);
	color: rgba(0,0,0,0.7);
	cursor: text;
	font-family: 'robotoregular';
	height:12em;
	line-height: inherit;
	letter-spacing: normal;
	outline: none;
	padding:.375em .75em;
	text-shadow:none;
	text-align: left; /* as backup */ text-align: start;
	text-indent: 0px;
	vertical-align: bottom;
	word-spacing: normal;
	white-space: nowrap;
	width: 100%;

	overflow: auto;
	word-wrap: break-word;
	resize: none;

	box-sizing: border-box;
	-webkit-appearance:none; 
	-webkit-border-radius:0;

 }
.form .field > .checkbox {

 }
.form .field > .radio-btn {

 }
.form .field > .select {

 }

.form .field > .input:focus {
	background-color:rgba(255,255,255,1);
	border:1px solid rgba(69,86,87,1);
	outline:0;
 }
.form .field > .textarea:focus {
	background-color:rgba(255,255,255,1);
	border:1px solid rgba(69,86,87,1);
	outline:0;
 }
.form .field > .checkbox:focus {

 }
.form .field > .radio-btn:focus {

 }
.form .field > .select:focus {

 }

/* homeypot class to trap spam */
.form .field > .input.specialised {
	display: none !important;
 }

/* use for screen readers */
.form .field > .screen {
	font-size: 0;
	float:left;
 }

/* 	form skins --------------------------------------------------------------------------------- 
	
	Skins allow you to individual style elements without changing overall structure   

	checked: 31/10/15 - core - research -- dp
   	----------------------------------------------------------------------------------------- */

.form .field > .input {
	margin-bottom: 1.125em;
	padding:.625em 1em;
	border:1px solid rgba(0,0,0,0.6);
	background-color:rgba(255,255,255,0.9);
 }
.form .field > .input.error {
	border:1px solid red;
 }
.form .field > .textarea {
	height:10.25;
	margin-bottom: 1.375em;
	border:1px solid rgba(0,0,0,0.7);
	background-color:rgba(255,255,255,0.9);
 }
.form .field > .textarea.error {
	border:1px solid red;
 }

@media (min-width: 60em) {
	.form {
		padding:2.25em;
		border:1px solid rgba(255,255,255,0.0875);
	 }
 }

/*  place holders ------------------------------------------------------------------------------ 
	
	form input placeholders - CSS3
   	
   	checked: 07/12/15 - core - candidate -- dp	
   	-------------------------------------------------------- */

.form .field > .input::-webkit-input-placeholder { color: rgba(0,0,0,0.5); }
.form .field > .input:-moz-placeholder { color: rgba(0,0,0,0.5); }
.form .field > .input::-moz-placeholder { color: rgba(0,0,0,0.5); }
.form .field > .input:-ms-input-placeholder { color: rgba(0,0,0,0.5); }

.form .field > .input:focus::-webkit-input-placeholder{ color: #000000; opacity: 0.8; }
.form .field > .input:focus:-moz-placeholder{ color: #000000; opacity: 0.8; }
.form .field > .input:focus::-moz-placeholder{ color: #000000; opacity: 0.8; }
.form .field > .input:focus:-ms-input-placeholder { color: #000000; opacity: 0.8; }

.form .field > .textarea::-webkit-input-placeholder { color: rgba(0,0,0,0.5); }
.form .field > .textarea:-moz-placeholder { color: rgba(0,0,0,0.5); }
.form .field > .textarea::-moz-placeholder { color: rgba(0,0,0,0.5); }
.form .field > .textarea:-ms-input-placeholder { color: rgba(0,0,0,0.5); }
.form .field > .textarea:focus::-webkit-input-placeholder{ color: #000000; opacity: 0.8; }
.form .field > .textarea:focus:-moz-placeholder{ color: #000000; opacity: 0.8; }
.form .field > .textarea:focus::-moz-placeholder{ color: #000000; opacity: 0.8; }
.form .field > .textarea:focus:-ms-input-placeholder { color: #000000; opacity: 0.8; }

.form > .box > .heading {
	color: white;
	font-family: "robotobold";
	margin-bottom:24px;
 } 
.form > .box > .svg {
	float:right;
	width:36px;
 }

/*  Individual style ------------------------------------------------------------------------------ 
	
   	-------------------------------------------------------- */

.phoneIcon-white {
	background-image: url('img/phone-icon_36x36-white.png');
	opacity: 1;
 }
.mailIcon-white  {
	background-image: url('img/email-icon_36x36-white.png');
	opacity: 1;
 }

.header > .col {
	display: block;
 }

.header > .col > .img {

 }
@media (min-width: 60em) {
	.header > .col > .img {
		width:70%;
		padding:24px;
	 }
 }


.header > .col + .col {
	text-align: center;
 }
.header > .col + .col > .box {
	margin:0;
	display:inline-block;
	background-color: #455657;
	border-radius: 1em;
	padding:.5em 1.5em;
 }
.header > .col + .col > .box > .para{
	margin-bottom:0;
	line-height:1.75em;
	text-align:left;
	overflow: hidden;
	font-family: "robotobold";
	color:white;
	letter-spacing: .05em;
 }
.header > .col + .col > .box > .svg{
	width:1.5em;
	height:2.25em;
	margin-right:.5em;
	float:left;
 }

.header {
	background-color: white;
 }
.header > .col{
	background-color: white;
	margin-bottom:1em;
 }
.header > .col + .col{
	padding:0;
	background-color: white;
 }

.row {
	display: block;
	overflow: hidden;
 }
.row > .col {
	// background-color: red;
 }
.row > .col + .col {
	// background-color: blue;
 }

.row.content {

 }
.row.content > .col > .para {
	color: #455657;
 }
.content a{
	color: #455657;
 }

.row.content > .col > .box > .img {
	float:left;
	height:2em;
	width:2em;
	margin-right:1em;
 }
.row.content > .col > .box > .para {
	line-height: 1.8em;
	overflow:hidden;
	margin-bottom:0em;
	color: #455657;
	font-family: "robotoregular";
 }

.row.pics {
	display:table;
	margin-top:2em;
 }
.row.pics > .col {
	display: table-cell;
 }
.row.pics > .col {
	padding-left:1em;
 }

.row.group {
	display: table;
 }
.row.group > .col {
	display: table-cell;
 }
.row.group > .col > .img {
	margin-top:1em;
 }
.row.group > .col:first-of-type {
	width:33%;
 }

.footer {
	display:block;
	margin-bottom:2em;
	margin-top:1em;
}
.footer > .link {
	display: block;
	overflow: hidden;
	color:#455657;
 }
.footer > .para:first-of-type {
	font-family: "robotobold";
	color:#455657;
 }
.footer .svg {
	background-size: 24px;
	background-color: #455657;
	background-position: center center;
	height: 2.5em;
	width: 2.5em;
	margin-right: 1em;
	margin-bottom: .5em;
	display: block;
	float:left;
	border-radius: 50%;
 }

.wrap {
	padding:1em;
}


.row.content > .para {
	padding-bottom: 2em;
 }

.surfmist {
	background-color:white;
}

.wrap {
	background-color: rgba(255,255,255,0.7);
 }

@media (min-width: 60em)  {

	.wrap {
		background-color: transparent;
		padding:0;
	}

	.header {
		display: table;
		width:100%;
	}

	.header > .col {
		display:table-cell;
	}
	.header > .col > .para{
		padding-top: .25em;
		color: #455657;
	}
	.header > .col + .col {
		padding-right:0;
		padding-top:1.5em;
		width:25%;
	}

	.header > .col + .col > .box {
		margin:.75emem 0 1.5em 0;
		display:inline-block;
		background-color: #455657;
		border-radius: 1em;
		padding:.5em 1.5em;
	 }

	.row.content {
		padding-top:2em;
		display: table;
	 }
	.row.content > .col {
		display: table-cell;
	 }
	.row.content > .col:last-of-type {
		padding-left: 2em;
		width:30em;
	 }
	.footer {
		// margin-left:2em;
	 }

 }

.thanks > .col {
	margin-top:2.5em;
 }
.thanks > .col {
	color: #455657;
 }

.row.gallery {
	display:table;
 }
.row.gallery:last-of-type {
	margin-bottom:2em;
 }
.row.gallery > .col {
	display: table-cell;
	border:5px solid transparent;
 }

 .banner {
 	background: url("img/DecoSplash-Brick.jpg");
 	background-position: top left;
 	background-repeat: repeat;
 	background-size: 1500px auto;
 	height:500px;
 }

.banner .heading {
	margin-left:50px;
	padding-top:3em;
	text-align: right;
	font-size:3em;
}

.banner .para {
	margin-left:50px;
}




@media (min-width: 60em)  {

.footer .col {
	width:30%;
	float:left;
}

 }