/* 	-------------------------------------------------------------------------------------------- */
/* 	------------------------------------- HEADER STYLING --------------------------------------- */
/* 	-------------------------------------------------------------------------------------------- */

/* 	header ------------------------------------------------------------------------------------- 
	
	Using flexbox to position end to end (space between) for mobile view
	internal div acts as header for mobile view
	
   	last updated: 16/04/17 - admin - candidate -- dp
   	-------------------------------------------------------- */

.header {
	display: block;
	background-color: #342E2E;
	border-bottom: 1px solid rgba(0,0,0,0.25);
 }
.header > .wrap {
	display: flex;
	flex-direction: column;
 }
.header > .wrap > .div {
	display: flex;
	justify-content: space-between;
	// background-color: rgba(32,32,32,1);

	padding: .75em 1.25em .5em 1em;
 }
.header > .wrap > .div > .link.menu {
	padding-left: 1em;
	line-height: 1.75;
	color: white;
 }

.header > .wrap > .div > .link.logo {
	display: block;
	display: flex;
	flex-direction: row;
 }
.header > .wrap > .div > .link.logo > .div.glyph {
	margin-top: -.125em;
 }
.header > .wrap > .div > .link.logo > .div.glyph > .icon {
	font-size: 50px;
	display: block;
	width: 1em;
	height: 1em;
	margin: 0 auto;
	stroke-width: 0;
	stroke: currentColor;
	fill: rgb(0,168,156);
 }

.header > .wrap > .div > .link.logo > .div.glyph_txt {
	margin-left: .25em;
 }
.header > .wrap > .div > .link.logo > .div.glyph_txt > .span {
	display: block;
	letter-spacing: .125em;
	line-height: 1;
	// text-shadow: 0px 0px 6px rgb(0,0,0);
 }
.header > .wrap > .div > .link.logo > .div.glyph_txt > .span:first-of-type {
	color: white;
	margin-top: .25em;
	margin-bottom: .125em;
 }
.header > .wrap > .div > .link.logo > .div.glyph_txt > .span:last-of-type {
	color: rgb(0,168,156);
 }

@media (min-width: 33.75em) {
	.header > .wrap > .div,
	.header > .wrap > .nav {
		// border-left: 1px solid rgba(0,0,0,1);
		// border-right: 1px solid rgba(0,0,0,1);
	 }
 }
@media (min-width: 45em) {
	.header {
		background-color: rgba(255,255,255,0.8);
		border-bottom: 1px solid rgba(0,0,0,0.2);
	 }
	.header > .wrap {
		display: block;
	 }
	.header > .wrap > .div {
		padding: 0 1.25em .5em 1.25em;
		border: 0px solid transparent;
		background-color: #342E2E;
		z-index: 1000;
		position: absolute;
		top: 0;
		left: 0;

		-webkit-box-shadow: inset 0px 0px 0px 5px rgba(0,0,0,0.125);
		-moz-box-shadow: inset 0px 0px 0px 5px rgba(0,0,0,0.125);
		box-shadow: inset 0px 0px 0px 5px rgba(0,0,0,0.125);
	 }
	.header > .wrap > .div,
	.header > .wrap > .nav {
		border-left: 0 solid transparent;
		border-right: 0 solid transparent;
	 }

	.header > .wrap > .div > .link.logo {
		background-color: rgba(32,32,32,1);

		background-image: url('../graphics/textures/img-noise-1.png'),
							repeating-linear-gradient( 0deg, rgba(255,255,255,0.03) 0, transparent 100%),
							repeating-linear-gradient( 180deg, rgba(0,0,0,.6) 0, transparent 100%);

		flex-direction: column;
		text-align: center;
		width: 175px;
	 }
	.header > .wrap > .div > .link.logo > .div.glyph {
		margin-top: 0;
		margin-bottom: .125em;
	 }
	.header > .wrap > .div > .link.logo > .span {
		display: block;
	 }
	.header > .wrap > .div > .link.logo > .div.glyph_txt {
		margin-left: 0;
	 }
	.header > .wrap > .div > .link.logo > .div.glyph_txt > .span:first-of-type {
		color: white;
		margin-top: .25em;
		margin-bottom: .375em;
	 }
	.header > .wrap > .div > .link:last-of-type {
		display: none;
	 }
 }
@media (min-width: 60em) {

 }

/* 	header nav --------------------------------------------------------------------------------- 

	scaffolding documentation here

	last updated: 16/04/17 - admin - candidate -- dp
   	-------------------------------------------------------- */

.header > .wrap > .nav > .list {
	display: none;
 }
.header > .wrap > .nav > .list.active {
	display: block;
 }
.header > .wrap > .nav > .list > .item {
	border-bottom: 1px solid rgba(0,0,0,0.4);
	// background-color: rgba(32,32,32,.9);
	background-image: linear-gradient(to right, rgba(32,32,32,.9), rgba(32,32,32,.9)), url('../graphics/textures/img-noise-1.png');
 }
.header > .wrap > .nav > .list > .item > .link {
	display:block;
	color: rgb(0,168,156);
	padding: 1.25em 1.5em;
	text-transform: uppercase;
	letter-spacing: .125em;
	text-decoration: none;
	line-height: 1;
 }
.header > .wrap > .nav > .list > .item > .link:hover,
.header > .wrap > .nav > .list > .item > .link:focus,
.header > .wrap > .nav > .list > .item > .link.active {
    color: rgba(0,168,156,1);
 }
.header > .wrap > .nav > .list > .item:first-of-type {
	border-top: 1px solid rgba(0,0,0,0.7);
 }
.header > .wrap > .nav > .list > .item:last-of-type {
	border-bottom: 0px solid transparent;
 }

@media (min-width: 45em) {
	.header > .wrap > .nav {
		display: flex;
		flex-flow: column nowrap;
		margin-right: 1.25em;
	 }
	.header > .wrap > .nav > .list,
	.header > .wrap > .nav > .list.active {
		flex-grow: 1;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
	 }
	.header > .wrap > .nav > .list > .item {
		border-bottom: 0px solid transparent;
		padding: 1.25em 0 1.25em;
		background: transparent;
	 }
	.header > .wrap > .nav > .list > .item > .link {
		display:block;
		color: OrangeRed;
		padding: 0 0 0 1.25em;
	 }

	.header > .wrap > .nav > .list > .item:first-of-type {
		border-top: 0px solid transparent;
	 }

 }

.header > .wrap > .nav > .list > .item > .form > .link {
	background: none;
	outline: none;
	border: none;
	color: LightSeaGreen;
	padding: .75em 1.25em .75em 1.5em;
 }
.header > .wrap > .nav > .list > .item > .form > .link:hover,
.header > .wrap > .nav > .list > .item > .form > .link:focus,
.header > .wrap > .nav > .list > .item > .form > .link:active {
	color: LightSeaGreen;
	text-decoration: underline;
 }
.header > .wrap > .nav > .list > .item > .form > .link.active {
	color: LightSeaGreen;
	text-decoration: underline;
 }
@media (min-width: 60em) {
	.header > .wrap > .nav {
		margin-right: 0;
	 }
 }


@media (min-width: 45em) {
	.header > .wrap > .nav > .list > .item > .form > .link {
		padding: 0 0 0 1.25em;
	 }
 }

.hero_slider {

	background-image:	url('../graphics/textures/img-noise-1.png'),
						repeating-linear-gradient( 180deg, rgba(32,32,32,0.3) 0, transparent 100%),
						repeating-linear-gradient( 45deg, rgba(0,67,78,0.8) 0, transparent 100%),
						repeating-linear-gradient( 225deg, rgba(0,0,0,0.05) 0, transparent 100%),
						repeating-linear-gradient( 0deg, rgba(0,0,0,.6) 0, transparent 100%),
						radial-gradient(circle,  rgba(0,67,78,1) 0, rgba(0,67,78,1) 25%, rgba(0,0,0,0.9) 100%);

 }
.hero {
	display: flex;
	flex-flow: row nowrap;
	margin: 0;
 }
.hero > .div:first-of-type {
	display: none;
 }
.hero > .div:last-of-type {
	flex-basis: 100%;
 }

.hero > .div.wrapImg > .img {
	background: transparent;
 }
.hero > .div.wrapTxt > .heading {
	font-size: 1.25em;
	padding: 0;
	line-height: 1;
	color: rgba(0,168,156,1);
	text-transform: uppercase;
	letter-spacing: .125em;
 }
.hero > .div.wrapTxt {
	margin-left: 1em;
 }
.hero > .div.wrapTxt > .para:first-of-type {
	margin-top: 1em;
	font-size: 1em;
	padding: 0;
	line-height: 1;
	color: rgba(255,255,255,0.6);
 }
.hero > .div.wrapTxt > .para:last-of-type {
	display: none;
 }
.hero > .div.wrapTxt > .link {
	color: rgba(0,168,156,1);
 }

@media (min-width: 45em) {

	.hero {
		margin: 0 0 0 -1.25em;
	 }
	.hero > .div:first-of-type {
		flex-basis: 45%;
	 }
	.hero > .div:last-of-type {
		flex-basis: 55%;
	 }

	.hero > .div.wrapImg > .img {
		background: transparent;
	 }
	.hero > .div.wrapTxt {
		display: block;
	 }
	.hero > .div.wrapTxt > .heading {
		font-size: 2.5em;
	 }
	.hero > .div.wrapTxt > .para:first-of-type {
		margin-top: 6.5em;
		font-size: 1em;
	 }

 }
@media (min-width: 60em) {

	.hero {
		margin: 0 0px;
	 }
	.hero > .div:first-of-type {
		flex-basis: 50%;
	 }
	.hero > .div:last-of-type {
		flex-basis: 50%;
	 }

	.hero > .div.wrapImg > .img {
		background: transparent;
	 }
	.hero > .div.wrapTxt {
		margin: 0;
		display: block;
	 }
	.hero > .div.wrapTxt > .heading {
		font-size: 2.5em;
		padding: 0;
		line-height: 1;
		color: rgba(0,168,156,1);
		text-transform: uppercase;
		letter-spacing: .125em;
	 }
	.hero > .div.wrapTxt > .para:first-of-type {
		margin-top: 5.5em;
		font-size: 1.25em;
		padding: 0;
		line-height: 1;
		color: rgba(255,255,255,0.6);
	 }
	.hero > .div.wrapTxt> .para:last-of-type {
		display: block;
		font-size: 1em;
		color: rgba(255,255,255,0.6);
	 }

 }
@media (min-width: 90em) {

	.hero {
		margin: 0 -100px;
	 }
	.hero > .div.wrapTxt {
		display: block;
	 }
	.hero > .div.wrapTxt > .heading {
		font-size: 3.75em;
		padding: 0;
		line-height: 1;
		color: rgba(0,168,156,1);
		text-transform: uppercase;
		letter-spacing: .125em;
	 }
	.hero > .div.wrapTxt > .para:first-of-type {
		margin-top: 6em;
		font-size: 1.5em;
		padding: 0;
		line-height: 1;
		color: rgba(255,255,255,0.6);
	 }
	.hero > .div.wrapTxt> .para:last-of-type {
		display: block;
		font-size: 1.125em;
		color: rgba(255,255,255,0.6);
	 }

 }



/* 	Product Slider ------------------------------------------------------------------------------ 
	
	- 
   	
   	-------------------------------------------------------- */


.product_slider {
	display: block;
	background-color: rgba(255,255,255,0.075);
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.125);
	margin-bottom: .75em;
 }
.product_slider > .div:first-of-type {
	
 }
.product_slider > .div:last-of-type {
	padding: 2em .75em .75em;
 }
.product_slider > .div:last-of-type > .heading {
	color: rgba(0,168,156,1);
 }
.product_slider > .div:last-of-type > .para {
	color: rgba(255,255,255,0.8);
 }


.product_slider > .div > .flexslider > .flex-control-nav {
	width: 100%;
	padding-right: .5em;
	position: absolute;
	bottom: -20px;
	text-align: right;
	z-index: 10;
 }
.product_slider > .div > .flex-control-nav li {
	margin: 0 3px;
	display: inline-block;
	zoom: 1;
	*display: inline;
 }

.product_slider > .div .flex-control-paging li a {
	width: 9px;
	height: 9px;
	display: block;
	font-size: 0;
	cursor: pointer;
	padding: .25em .5em;
	color: transparent;
	border: 0px solid transparent;
	background-color: rgba(255,255,255,0.8);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
 }
.product_slider > .div .flex-control-paging li a:hover {
	background: rgba(0,168,156,1);
 }
.product_slider > .div .flex-control-paging li a.flex-active {
	background: rgba(0,168,156,1);
 }

.product_slider > .flexslider.loading {
	min-height: 165px;
	height: 165px;
 }

@media (min-width: 45em) {

	.product_slider {
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
	 }
	.product_slider > .div:first-of-type {
		flex-basis: 60%;
	 }
	.product_slider > .div:last-of-type {
		flex-basis: 40%;
		padding: .75em .75em .75em;
	 }

	.product_slider > .div > .flexslider > .flex-control-nav {
		bottom: auto;
		top: .75em;
	 }
	.product_slider > .div .flex-control-paging li {
		display: block;
		margin: 0 0 .5em .75em;
	 }


 }
@media (min-width: 60em) {

	.product_slider {
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.125);
		margin-bottom: 1.25em;
	 }
	.product_slider > .div:first-of-type {
		flex-basis: 70%;
		align-self: flex-start;
	 }
	.product_slider > .div:last-of-type {
		flex-basis: 30%;
	 }
	.product_slider > .div:last-of-type > .para {
		color: rgba(255,255,255,0.8);
	 }

 }



.gallery_slider {
	background-color: rgba(255,255,255,0.075);
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.125);
	margin-bottom: 1.25em;
 }
.gallery_slider > .carousel {
	padding: .75em;
 }
.gallery_slider > .carousel > .flexslider .para {
	color: rgba(255,255,255,0.8);
 }
.gallery_slider > .carousel > .flexslider .item { 
	// margin-right: .75em;
	// width: 20%;
 }
.gallery_slider > .carousel > .flexslider .item > .wrapImg > .img { 
	opacity: 0.2;
 }
.gallery_slider > .carousel > .flexslider .item.flex-active-slide > .wrapImg > .img { 
	opacity: 1;
 }

@media (min-width: 60em) {

 }


/* 	landing intro ------------------------------------------------------------------------------ 
	
	- 
   	
   	-------------------------------------------------------- */

.charcoal {
	background-color: #323232;
	background-image:	
						repeating-linear-gradient( 180deg, rgba(194,181,155,0.8) 0, transparent 100%),
						repeating-linear-gradient( 0deg, rgba(194,181,155,0.8) 0, transparent 100%),
						url('../graphics/textures/gradient-squares.png'),
						repeating-linear-gradient( 0deg, rgba(0,0,0,.9) 0, transparent 100%),
						radial-gradient(circle,  rgba(194,181,155,.5) 0, rgba(194,181,155,.5) 25%, rgba(0,0,0,0.9) 100%);
						
 }

.marble {
	background-color: #323232;
	background-image:	
						repeating-linear-gradient( 180deg, rgba(0,0,0,0.8) 0, transparent 100%),
						repeating-linear-gradient( 135deg, rgba(255,255,255,0.5) 0, transparent 100%),
						repeating-linear-gradient( 225deg, rgba(255,255,255,0.5) 0, transparent 100%),
						repeating-linear-gradient( 0deg, rgba(0,0,0,.9) 0, transparent 100%),
						url('../graphics/textures/rocky-wall.png'),
						radial-gradient(circle,  rgba(32,32,32,1) 0, rgba(32,32,32,1) 25%, rgba(0,0,0,0.9) 100%);
						
 }



.div.intro {
	z-index: 10;
 }
.div.intro::after {
	content: " ";
	display: block;
	clear: both;
 }

.div.intro > .div {

 }
.div.intro > .div > .div.wrapImg {
	margin: 0 0 1.25em;
 }
.div.intro > .div > .div.wrapImg > .link {
	display: none;
	color: rgba(255,255,255,0.7);
 }
.div.intro > .div > .div.wrapImg > .link > .span {
	color: #EC3334;
 }
.div.intro > .div > .div.wrapImg > .img {
	margin: 0 0 1.25em;
	box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.125);
 }

.div.intro > .div > .div.wrapImg > .div {
	position: absolute;
	top: 1em;
	left: 1em;
 }
.div.intro > .div > .div.wrapImg > .div > .span {
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
 }
.div.intro > .div > .div.wrapImg > .div > .span.lato-thin {
	line-height: 1;
	text-transform: uppercase;
	font-size: 6.25vw;
	padding-right: .125em;
 }
.div.intro > .div > .div.wrapImg > .div > .span.tk-relation-two {
	color: #EC3334;
	font-size: 7.5vw;
 }
.div.intro > .div > .div.wrapImg > .div > .hr {
	margin: .5em 0 .25em;
 }

.div.intro > .div > .para {
	color: rgba(255,255,255,0.7);
	text-align: center;
	margin-bottom: 1.75em;
 }
.div.intro > .div > .heading.tk-relation-two {
	font-size: 2.5em;
	padding: .5em 0 .5em;
	color: white;
	text-align: center;
	margin-bottom: 0;
 }
.div.intro > .div > .heading.lato-thin {
	font-size: 1.5em;
	color: rgba(0,168,156,1);
	text-transform: uppercase;
	letter-spacing: .125em;
	text-align: center;
	margin: 0;
 }

.div.intro > .div > .list > .item > .heading {
	color: rgba(0,168,156,0.8);
 }
.div.intro > .div > .list > .item > .para {
	color: rgba(255,255,255,0.7);
	margin-bottom: 1.25em;
 }

@media (min-width: 33.75em) {

	.div.intro > .div > .heading.tk-relation-two {
		padding: .375em 0 .5em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .span.lato-thin {
		 font-size: 2.2em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .span.tk-relation-two {
		 font-size: 2.5em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .hr {
		margin: .375em 0 .125em;
	 }

 }
@media (min-width: 45em) {

	.div.intro > .div > .div.wrapImg {
		float: left;
		width: 57.5%;
		margin: 0 1.75em 0 0;
	 }
	.div.intro > .div > .div.wrapImg > .link {
		display: inline;
	 }
	.div.intro > .div > .list {
		overflow: hidden;
	 }
	.div.intro > .div > .div.wrapImg > .div {
		top: 1.25em;
		left: 1.25em;
	 }
	.div.intro > .div > .heading.tk-relation-two {
		text-align: left;
	 }

	.div.intro > .div > .div.wrapImg > .div > .span.lato-thin {
		font-size: 1.625em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .span.tk-relation-two {
		 font-size: 1.875em;
	 }
	.div.intro > .div > .heading.lato-thin {
		font-size: 2em;
		text-align: left;
	 }
	.div.intro > .div > .para {
		width: 57.5%;
		text-align: left;
		float: left;
		margin: 0;
		padding: 0 0 1.25em 0;
	 }

 }
@media (min-width: 60em) {

.div.intro > .div {
	padding-top: 1.25em;
 }
	.div.intro > .div > .para {
		padding-right: .5em;
		width: 61.8%;
	 }
	.div.intro > .div > .heading.lato-thin {
		float: left;
		width: 61.8%;
		margin-right: 1.125em;
		text-align: right;
		font-size: 2em;
	 }
	.div.intro > .div > .heading.tk-relation-two {
		padding: 0 0 .75em;
		line-height: .875;
	 }
	.div.intro > .div > .div.wrapImg {
		width: 61.8%;
		margin: 0 2em 0 0;
	 }
	.div.intro > .div > .div.wrapImg > .div {
		top: 1.75em;
		left: 1.75em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .span.lato-thin {
		 font-size: 2.5em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .span.tk-relation-two {
		 font-size: 2.75em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .hr {
		margin: .375em 0 .125em;
	 }

 }

@media (min-width: 90em) {

	.div.intro > .div > .div.wrapImg {
		margin: 0 2.5em 0 0;
	 }
	.div.intro > .div > .heading.lato-thin {
		font-size: 2.25em;
		margin-right: 1.25em;
	 }
	.div.intro > .div > .heading.tk-relation-two {
		font-size: 2.75em;
		margin-right: .75em;
	 }

	.div.intro > .div > .div.wrapImg > .div {
		top: 2em;
		left: 2em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .span.lato-thin {
		 font-size: 2.875em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .span.tk-relation-two {
		 font-size: 3.125em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .hr {
		margin: .375em 0 .125em;
	 }

 }
@media (min-width: 120em) {

	.div.intro > .div > .div.wrapImg {
		margin: 0 3em 0 0;
	 }
	.div.intro > .div > .heading.lato-thin {
		font-size: 2.5em;
		margin: 0 1.25em 0 0;
	 }
	.div.intro > .div > .heading.tk-relation-two {
		font-size: 3em;
	 }

	.div.intro > .div > .div.wrapImg > .div {
		top: 2.25em;
		left: 2.25em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .span.lato-thin {
		 font-size: 3.25em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .span.tk-relation-two {
		 font-size: 3.5em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .hr {
		margin: .5em 0 .125em;
	 }

 }
@media (min-width: 150em) {

	.div.intro > .div > .div.wrapImg {
		margin: 0 3.25em 0 0;
	 }
	.div.intro > .div > .heading.lato-thin {
		font-size: 2.75em;
		margin: 0 1.5em 0 0;
	 }
	.div.intro > .div > .heading.tk-relation-two {
		font-size: 3.25em;
	 }

	.div.intro > .div > .div.wrapImg > .div {
		top: 2.25em;
		left: 2.25em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .span.lato-thin {
		 font-size: 3.5em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .span.tk-relation-two {
		 font-size: 3.75em;
	 }
	.div.intro > .div > .div.wrapImg > .div > .hr {
		margin: .75em 0 .5em;
	 }

 }

.flexslider > .slides > .list > .wrapImg {
	width: 600px;
	overflow: hidden;
	float: right;
 }
.flexslider > .slides > .list > .wrapImg > .img {
	background-color: transparent;
 }
.flexslider > .slides > .list > .div > .heading {
	color: rgba(0,168,156,1);
	font-size: 4em;
	margin-bottom: 0;
 }
.flexslider > .slides > .list > .div > .para {
	color: white;
	margin-top: 12%;
	font-size: 2em;
	margin-bottom: 0;
 }
.flexslider > .slides > .list > .div > .para:last-of-type {
	font-size: 1em;
	margin-top: 0;
	margin-bottom: 0;
	color: rgba(255,255,255,0.6);
 }

/* 	landing scaffolding ------------------------------------------------------------------------ 
	
	first items is the column stretch so buttons fit perfectly in space on mobile
   	
   	-------------------------------------------------------- */

.personal-shapes {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+82 */
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 82%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 82%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 82%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
 
 }
.personal-shapes > .wrap > .div {
	text-align: center;
 }
.personal-shapes > .wrap > .div > .heading.tk-relation-two {
	text-align: center;
	font-size: 1.5em;
	color: rgba(0,67,78,1);
 }
.personal-shapes > .wrap > .div > .para.lato-lgt {
	text-align: center;
	text-transform: uppercase;
	font-size: 1em;
	margin-bottom: .75em;
	color: rgba(0,0,0,0.8);
	letter-spacing: .1em;
 }

.personal-shapes > .wrap > .div > .link {
	display: inline-block;
	padding: .25em .75em .25em;
	margin-bottom: .75em;
 }
.personal-shapes > .wrap > .div > .list {
	margin-bottom: .75em;
 } 
.personal-shapes > .wrap > .div > .list > .item > .para {
	text-align: center;
	color: rgba(0,0,0,0.4);
 }
.personal-shapes > .wrap > .div > .list > .item > .img {
	background: transparent;	
 } 

@media (min-width: 33.75em) {
	.personal-shapes > .wrap > .div > .link {
		margin-bottom: 0;
	 }
	.personal-shapes > .wrap > .div > .list {
		margin-bottom: 2em;
	 } 
	.personal-shapes > .wrap > .div > .heading.tk-relation-two {
		font-size: 2em;
		margin-bottom: 1em;
	 }
	.personal-shapes > .wrap > .div > .para.lato-lgt {
		font-size: 1.5em;
	 }
 }
@media (min-width: 45em) {
	.personal-shapes > .wrap > .div > .list {
		margin-bottom: 2.75em;
	 } 
	.personal-shapes > .wrap > .div > .heading.tk-relation-two {
		font-size: 2.5em;
	 }
	.personal-shapes > .wrap > .div > .para.lato-lgt {
		font-size: 2em;
	 }
 }
@media (min-width: 90em) {
	.personal-shapes > .wrap > .div > .heading.tk-relation-two {
		font-size: 3em;
	 }
	.personal-shapes > .wrap > .div > .para.lato-lgt {
		font-size: 3em;
	 }
	.personal-shapes > .wrap > .div > .list {
		margin-bottom: 3em;
	 } 
 }
@media (min-width: 150em) {
	.personal-shapes > .wrap > .div > .heading.tk-relation-two {
		font-size: 3em;
	 }
	.personal-shapes > .wrap > .div > .para.lato-lgt {
		font-size: 3em;
	 }
	.personal-shapes > .wrap > .div > .list {
		margin-bottom: 4em;
	 } 
 }

/* 	Contact ---------------------------------------------------------------------------------- 

	- Contact styling
   	
   	-------------------------------------------------------- */

.contact {
	background-color: rgba(255,255,255,0.075);
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 6px 6px 6px 0px rgba(0,0,0,0.125);
	border-radius: 6px;
	margin-bottom: 1.25em;
 }
.contact > .div:last-of-type {
	padding: 1.25em;
 }
.contact .submitBar .btn {
	box-shadow: 0px 0px 0px 0px transparent;
 }

@media (min-width: 60em) {
	.contact {
		display: flex;
		flex-flow: row wrap;
	}
	.contact > .div:first-of-type {
		flex-basis: 60%;
	}
	.contact > .div:last-of-type {
		flex-basis: 40%;
	}
	.contact > .heading {
		flex-basis: 100%;
	}
 }

.related {
	background-color: rgba(255,255,255,0.075);
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.125);
	margin-bottom: 1.25em;
 }
.related > .div {
	padding: 1.25em;
 }
.related .submitBar .btn {
	box-shadow: 0px 0px 0px 0px transparent;
 }

@media (min-width: 60em) {
	.related {
		display: flex;
		flex-flow: row wrap;
	}
	.related > .div:first-of-type {
		flex-basis: 50%;
	}
	.related > .div:last-of-type {
		flex-basis: 50%;
	}
	.related > .heading {
		flex-basis: 100%;
	}
 }

.footer {
	background-color: #212121;
		display: flex;
		flex-flow: row nowrap;
		flex: 1;
 }
.footer > .div {

 }
.footer > .div > .para {
	color: rgba(255,255,255,0.2);
 }

@media (min-width: 60em) {
	.footer {

	}
 }

/* 	Products ---------------------------------------------------------------------------------- 

	- landing page for gallery
   	
   	-------------------------------------------------------- */

.list.products {
	flex: 1;
	display: flex;
	flex-flow: column nowrap;
	margin: 0 -0.625em;
 }
.list.products > .item {
	border-style: none;
	border-color: rgba(0,0,0,0.2);
	padding: 0.625em;
	flex-basis: 50%;
	display: flex;
	flex-direction: column;
 }
.list.products > .item > .link > .img {
	background: transparent;
 }
.list.products > .item > .div > .link:last-of-type {
	padding: 0 .75em .75em;
	color: rgba(0,168,156,0.8);
	position: absolute;
	right: 0;
	bottom: 0;
 }
.list.products > .item > .div {
	flex-basis: 100%;
	display: block;
	position: relative;
	overflow: hidden;
	background-color: rgba(255,255,255,0.075);
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 6px 6px 6px 0px rgba(0,0,0,0.125);
	border-radius: 6px
 }
.list.products > .item > .div > .para {
	padding: .75em;
	margin-bottom: 2em;
	text-align: left;
	color: rgba(255,255,255,0.7);
 }

.list.products > .item > .div > .span {
	display: block;
	padding: 0 .75em .75em;
	position: absolute;
	left: 0;
	bottom: 0;
	color: rgba(255,255,255,0.8);
 }
.list.products > .item > .div > .div {

 }

@media (min-width: 20em) {

	.list.products {
		flex: 1;
		display: flex;
		flex-flow: row wrap;
		margin: -0.625em;
	 }
	.list.products > .item {
		flex-direction: row;
		flex-basis: 50%;
	 }

 }
@media (min-width: 45em) {
	.list.products {
		flex: 1;
		display: flex;
		flex-flow: row wrap;
		margin: -0.625em;
	 }
	.list.products > .item {
		flex-direction: row;

	 }
	.list.products.quad > .item {
		flex-basis: 25%;
	 }
	.list.products.third > .item {
		flex-basis: 33.33333333333333%;
	 }
	.list.products.half > .item {
		flex-basis: 50%;
	 }
 }
@media (min-width: 60em) {
	.list.products > .item {
		flex-basis: 33.33333333333333%;
	 }
 }

/* 	Attributes ---------------------------------------------------------------------------------- 

	- landing page for gallery
   	
   	-------------------------------------------------------- */

.list.attributes {
	display: block;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	margin-bottom: .75em;
 }
.list.attributes > .item  {
	display: flex;
	flex-flow: row wrap;
	border-top: 1px solid rgba(0,0,0,0.1);
 }
.list.attributes > .item > .para {
	color: rgba(255,255,255,0.8);
	margin: .5em 0;
 }
.list.attributes > .item > .para:first-of-type {
	flex-basis: 35%;
 }
.list.attributes > .item > .para:last-of-type {
	flex-basis: 65%;
 }

/* 	Landing ? page -------------------------------------------------------------------------------- 

	- 
   	
   	-------------------------------------------------------- */

.list.landing {
	flex: 1;
	display: flex;
	flex-flow: row wrap;
	margin: -0.625em;
 }
.list.landing > .item {
	flex-basis: 50%;
	display: block;
 }

@media (min-width: 45em) {

	.list.landing {
		flex: 1;
		display: flex;
		flex-flow: row wrap;
		margin: -0.625em;
	 }
	.list.landing > .item {
		display: flex;
		flex-direction: column;

	 }
	.list.landing > .item > .link > .para {
		margin-bottom: 2em;
	 }

	.list.landing.quad > .item {
		flex-basis: 25%;
	 }
	.list.landing.third > .item {
		flex-basis: 33.33333333333333%;
	 }
	.list.landing.half > .item {
		flex-basis: 50%;
	 }

 }

/* 	glyph icon landing ------------------------------------------------------------------------- 
	
	specific to glyph pages
   	
   	-------------------------------------------------------- */

.list.landing > .item > .link > .para {
	color: rgba(0,0,0,0.7);
	margin-bottom: 0;
	flex-basis: 100%;
 }
.list.landing > .item > .link > .glyph {
	border-radius: 50%;
	display: inline-block;
	padding: 16px;
	margin-bottom: 8px;
 }
.list.landing > .item > .link > .glyph > .icon {
	font-size: 32px;
	display: block;
	width: 1em;
	height: 1em;
	stroke-width: 0;
	stroke: currentColor;
	fill: white;
 }

.list.landing > .item > .link:hover {
	background-color: rgba(255,255,255,0.7);	
 }
.list.landing > .item > .link:hover > .glyph {
	background-color: DarkTurquoise;
 }
.list.landing > .item > .link:hover > .glyph > .icon {
	fill: white;
 }

/* 	Filter items -------------------------------------------------------------------------------- 

	- Used in the Gallery and Products Page
   	
   	-------------------------------------------------------- */

.list.filter {
	display: block;
	text-align: center;
	padding: .5em 0 .5em;
 }
.list.filter > .item {
	display: inline-block;
	padding: .125em .5em;
 }
.list.filter > .item > .link {
	color: rgba(255,255,255,0.6);
 }

@media (min-width: 20em) {
	.list.filter {
		padding: .5em 0 .75em;
	 }
 }
@media (min-width: 33.75em) {
	.list.filter {
		display: block;
		text-align: center;
		padding: .5em 0 1.25em;
	 }
 }
@media (min-width: 45em) {
	.list.filter {
		padding: 0 0 1.25em;
		overflow: hidden;
	 }
	.list.filter > .item {
		float: right;
	 }
	.list.filter > .item > .link {
		text-align: center;
	 }
 }
@media (min-width: 60em) {
	.list.filter {
		padding: 0 0 1.5em 0;
		overflow: hidden;
	 }
	.list.filter > .item {
		float: right;
	 }
	.list.filter > .item > .link {
		text-align: center;
	 }
 }

/* 	Gallery page -------------------------------------------------------------------------------- 

	- landing page for gallery
   	
   	-------------------------------------------------------- */

.list.gallery {
	flex: 1;
	display: flex;
	flex-flow: column nowrap;
	margin: 0 -0.625em;
 }
.list.gallery > .item {
	border-style: none;
	border-color: rgba(0,0,0,0.2);
	padding: 0.625em;
	flex-basis: 50%;
	display: flex;
	flex-direction: column;
 }
.list.gallery > .item > .div {
	flex-basis: 100%;
	display: block;
	position: relative;
	overflow: hidden;
	background-color: rgba(255,255,255,0.075);
	border: 1px solid rgba(0,0,0,0.2);
	display: flex;
	flex-flow: row wrap;
	box-shadow: 6px 6px 6px 0px rgba(0,0,0,0.125);
	border-radius: 6px;
 }
.list.gallery > .item > .div > .para {
	flex-basis: 80%;
	align-self: flex-start;
	padding: .75em;
	margin-top: auto;
	margin-bottom: 0;
	text-align: left;
	color: rgba(255,255,255,0.7);
 }
.list.gallery > .item > .div > .link {
	flex-basis: 20%;
	padding: 0;
	color: rgba(0,168,156,1);
	align-self: flex-end;
	padding: .75em;
 }
.list.gallery > .item > .div > .wrapImg {
	flex-basis: 100%;
	align-self: flex-start;
 }

@media (min-width: 20em) {

	.list.gallery {
		flex-flow: row wrap;
	 }
	.list.gallery > .item {
		flex-direction: row;
		flex-basis: 50%;
	 }

 }
@media (min-width: 45em) {
	.list.gallery {
		flex: 1;
		display: flex;
		flex-flow: row wrap;
		margin: -0.625em;
	 }
	.list.gallery > .item {
		flex-direction: row;

	 }
	.list.gallery > .item > .link > .para {
		margin-bottom: 2em;
	 }

	.list.gallery.quad > .item {
		flex-basis: 25%;
	 }
	.list.gallery.third > .item {
		flex-basis: 33.33333333333333%;
	 }
	.list.gallery.half > .item {
		flex-basis: 50%;
	 }
 }
@media (min-width: 60em) {
	.list.gallery > .item {
		flex-basis: 33.33333333333333%;
	 }
 }

/*	THE THREE WRAPPERS -------------------------------------------------------------------------- 
	
	this is the core frame - hard core

	THE THREE WRAPPERS

	.main		- this element/class can only be used once per page
	 			- adjacent to aside this is primary content column created with media object technique
				- this class should not be modified only used as container for section elements

	.div		- this element/class must be used as the first sibling of the main element/class
				- the single or split option is defined by how many divs are the imediate siblings of the main element  
				- if used on it's own it will only inherit padding if used as pair second div will have additional styling
				- only a width is required in the second div element, add content specific class to main to set variable widths to second div 

	Last of type flex 1 is very important for stretching on bottom div element 

	adjacent selector inherit the properties of predecessor
	in this case the first div set properties for both divs and second div is refined
	the a layout is required to produce two columns of equal height regardless of which column has more content
	this two coloun solution is pretty tight, slick and neat... i think?
	
	made by me...

   	last updated: 11/05/17 - admin - candidate -- dp
   	-------------------------------------------------------- */

.section {
	display: block;
 }
.wrap > .div {
	padding: 1.25em .75em .75em;
 }

@media (min-width: 33.75em) {
	.wrap > .div {
		padding: 1.75em 0;
	 }
 }
@media (min-width: 45em) {
	.wrap > .div {
		padding: 1.5em 0;
	 }
 }
@media (min-width: 60em) {
	.wrap > .div {
		padding: 1.75em 0;
	 }
 }
@media (min-width: 90em) {
	.wrap > .div {
		padding: 2em 0;
	 }
 }
@media (min-width: 120em) {
	.wrap > .div {
		padding: 1.5em 0;
	 }
 }
@media (min-width: 150em) {
	.wrap > .div {
		padding: 1.75em 0;
	 }
 }

/* 	New Colour ---------------------------------------------------------------------------------- 

	- landing page for gallery
   	
   	-------------------------------------------------------- */

.hr {
	border-top: none;
	border-bottom: 1px solid rgba(0,0,0,0.2);
 }

/* 	New Colour ---------------------------------------------------------------------------------- 

	- landing page for gallery
   	
   	-------------------------------------------------------- */

.section > .wrap > .div > .heading.lato-hvy {
	font-size: 1.5em;
	color: white;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	text-shadow: 4px 4px 4px rgba(0,0,0,0.4);
 }
.section > .wrap > .div > .para.lato-med {
	text-align: center;
	color: #342E2E;
	margin-bottom: .125em;
	font-style: itilic;
 }
.section > .wrap > .div > .para.lato-thin {
	text-align: center;
	color: rgba(255,255,255,.7);
 }
.section > .wrap > .div > .para.lato-thin > .span.lato-med {
	text-align: center;

 }

@media (min-width: 33.75em) {
	.section > .wrap > .div > .heading.lato-hvy {
		 font-size: 2.25em;
	 }
 }
@media (min-width: 60em) {
	.section > .wrap > .div > .heading.lato-hvy {
		margin-bottom: .125em;
		text-align: right;
		font-size: 2.5em;
	 }
	.section > .wrap > .div > .para.lato-med {
		text-align: right;
	 }
	.section > .wrap > .div > .para.lato-thin {
		text-align: right;
		margin-bottom: 1em;
	 }
 }
@media (min-width: 90em) {
	.section > .wrap > .div > .heading.lato-hvy {
		font-size: 2.75em;
		margin-bottom: .125em;
	 }
 }
@media (min-width: 120em) {
	.section > .wrap > .div > .heading.lato-hvy {
		font-size: 2.5em;
		margin-bottom: .125em;
	 }
 }
@media (min-width: 150em) {
	.section > .wrap > .heading.lato-thin {
		font-size: 2.75em;
		margin-bottom: .125em;
	 }
 }

/* 	New Colour ---------------------------------------------------------------------------------- 

	- landing page for gallery
   	
   	-------------------------------------------------------- */

.new-colour {
	background-image:	url('graphics/textures/img-noise-1.png'),
		repeating-linear-gradient( 180deg, rgba(32,32,32,0.3) 0, transparent 100%),
		repeating-linear-gradient( 45deg, rgba(0,67,78,0.8) 0, transparent 100%),
		repeating-linear-gradient( 225deg, rgba(0,0,0,0.05) 0, transparent 100%),
		repeating-linear-gradient( 0deg, rgba(0,0,0,.6) 0, transparent 100%),
		radial-gradient(circle,  rgba(0,67,78,1) 0, rgba(0,67,78,1) 25%, rgba(0,0,0,0.9) 100%);
 }

.hero-colour {
	background-image:	
	repeating-linear-gradient( 180deg, rgba(32,32,32,0.3) 0, transparent 100%),
	repeating-linear-gradient( 315deg, rgba(35,65,90,0.8) 0, transparent 100%),
	repeating-linear-gradient( 135deg, rgba(35,65,90,0.5) 0, transparent 100%),
	url('../graphics/textures/city-scape.png'),
	repeating-linear-gradient( 0deg, rgba(35,65,90,0.6) 0, transparent 100%),
	url('../graphics/textures/light-aluminum.png'),
	radial-gradient(circle,  rgba(196,191,206,.5) 0, rgba(35,65,90,1) 100%, rgba(0,0,0,0.9) 100%);
	background-size: cover, cover, cover, cover, cover, auto, cover;
 }

@media (min-width: 60em) {
	.hero-colour {
		background-size: cover, cover, cover, contain, cover, auto, cover;
	 }
 }

.hero-2 {
	display: flex;
	flex-flow: row nowrap;
 }
.hero-2 > .div {
	display: flex;
	flex-flow: row nowrap;
 }
.hero-2 > .div > .div:first-of-type {
	flex-basis: 30%;
	margin-bottom: 1.25em;
 }
.hero-2 > .div > .div:last-of-type  {
	flex-basis:70%;
 }
.hero-2 > .div > .wrapImg > .img {
	background-color: transparent;
 }


.new-colour > .wrap > .div > .heading.lato-thin {
	font-size: 1.5em;
	color: rgba(0,168,156,1);
	text-transform: uppercase;
	letter-spacing: .125em;
	text-align: center;
	margin: 0;
 }
.new-colour > .wrap > .div > .para.lato-thin {
	color: rgba(255,255,255,0.8);
	text-align: center;
	margin-top:.25em;
 }

@media (min-width: 33.75em) {
	.new-colour > .wrap > .div > .heading.lato-thin {
		font-size: 2.2em;
	 }
 }
@media (min-width: 45em) {
	.new-colour > .wrap > .div > .heading.lato-thin {
		margin-bottom: .125em;
		text-align: right;
		font-size: 2em;
	 }
	.new-colour > .wrap > .div > .para.lato-thin {
		text-align: right;
	 }
 }
@media (min-width: 60em) {
	.new-colour > .wrap > .div > .heading.lato-thin {
		font-size: 2em;
	 }
 }
@media (min-width: 90em) {
	.new-colour > .wrap > .div > .heading.lato-thin {
		font-size: 2.2em;
	 }
 }

/* 	-------------------------------------------------------------------------------------------- */

.submitBar {
	margin: 1.25em 0 0;
 }
.submitBar::after {
	content: " ";
	display: block;
	clear: both;
 }
.submitBar .btn {
	box-shadow: 6px 6px 6px 0px rgba(0,0,0,0.125);
 }
.submitBar > .btn.toggle {
	float: left;
 }
.submitBar > .div > .btn.next {
	float: right;
	margin-left: 1.25em;
 }
.submitBar > .btn.cancel {
	float: left;
	margin-right: 1.25em;
 }
.submitBar > .para {
	clear: both;
	text-align: center;
	color: rgba(255,255,255,0.6);
	padding-top: 1.25em;
 }
.submitBar > .para > .span {
	text-align: center;
 }

@media (min-width: 33.75em) {
	.submitBar > .para > .span {
		text-align: right;
		display: block;
	 }
	.submitBar > .para {
		clear: none;
		text-align: right;
		color: rgba(255,255,255,0.6);
		padding-top: .2em;
	 }
 }

/* 	button bones ------------------------------------------------------------------------------- 
	
	** Needs review and documentation update **

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

.btn {
	background-image: none;
	border: 1px solid transparent;
	cursor: pointer;
	display: inline-block;
	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:'';
 }

/* 	button skins ------------------------------------------------------------------------------- 

	** Needs review and documentation update **

	- Copy this section when styling a unique button
	- Default styling above

	checked: 11/5/16 - core - concept stage -- dp	
   	-------------------------------------------------------- */

.btn {
	padding: .75em 1em;
	background-color: rgba(255,255,255,0.075);
	border: 1px solid rgba(0,0,0,0.2);
	color: rgba(255,255,255,0.6);
	line-height: 1;
	border-radius: 3px;
 }
.btn:hover {
//	box-shadow: inset 0 0 0 1px #fff;
	border: 1px solid rgba(0,168,156,1);
	color: white;
 }
.btn:active {
//	box-shadow: inset 0 0 0 1px #fff;
	border: 1px solid rgba(0,0,0,0.4);
	color: rgba(0,0,0,0.6);
 }
.btn:focus {
	box-shadow: inset 0 0 0 1px #fff;
	color:white;
 }

.btn.cancel {
	// box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.125);
 }
.btn.cancel:hover,
.btn.cancel:active,
.btn.cancel:focus {
	border: 1px solid rgba(0,168,156,1);
 }

.btn.delete {
	background-color: OrangeRed;
 }
.btn.delete:hover,
.btn.delete:active,
.btn.delete:focus {
	background-color: LightSeaGreen;
 }







/* 	typekit fonts ------------------------------------------------------------------------------ 
	
	
   	
   	-------------------------------------------------------- */

.h1--glight {
	font-family: 'geometria_light', sans-serif;
	font-weight: bolder;
 }
.h2--glight {
	font-family: 'geometria_light', sans-serif;
 }
.h3--glight {
	font-family: 'geometria_light', sans-serif;
 }
.h4--glight {
	font-family: 'geometria_light', sans-serif;
 }
.h5--glight {
	font-family: 'geometria_light', sans-serif;
 }
.h6--glight {
	font-family: 'geometria_light', sans-serif;
 }
 .p--glight {
	font-family: 'geometria_light', sans-serif;
 }

.lato-blk {
	font-family: 'latoblack', sans-serif;
 }
.lato-hvy {
	font-family: 'latoheavy', sans-serif;
 }
.lato-bld {
	font-family: 'latobold', sans-serif;
 }
.lato-sembld {
	font-family: 'latosemibold', sans-serif;
 }
.lato-med {
	font-family: 'latomedium', sans-serif;
 }
.lato-reg {
	font-family: 'latoregular', sans-serif;
 }
.lato-lgt {
	font-family: 'latolight', sans-serif;
 }
.lato-thin {
	font-family: 'latothin', sans-serif;
 }
.lato-hair {
	font-family: 'latohairline', sans-serif;
 }

.alex-script {
	font-family: 'alex_brushregular', sans-serif;
 }
.personal-shapes .alex-script {
	text-align: center;
	font-size: 4em;
 }

/* 	typekit fonts ------------------------------------------------------------------------------ 
	
	
   	
   	-------------------------------------------------------- */

.dagny-blk {
	font-weight: 900;
 }
.dagny-bld {
	font-weight: 700;
 }
.dagny-reg {
	font-weight: 400;
 }
.dagny-thin {
	font-weight: 200;
 }

.azo-blk {
	font-weight: 900;
 }
.azo-bld {
	font-weight: 700;
 }
.azo-med {
	font-weight: 500;
 }
.azo-reg {
	font-weight: 400;
 }
.azo-lgt {
	font-weight: 300;
 }
.azo-thin {
	font-weight: 200;
 }

.trajan-blk {
	font-weight: 900;
 }
.trajan-bld {
	font-weight: 700;
 }
.trajan-semi {
	font-weight: 600;
 }
.trajan-reg {
	font-weight: 400;
 }
.trajan-lgt {
	font-weight: 300;
 }

.tk-relation-two {

 }
.relation-reg {
	font-weight: 400;
 }
.relation-bold {
	font-weight: 700;	
 }

/* 	backgrounds --------------------------------------------------------------------------------- 

	$sourceSet = array('thb' => '400',
					'rd1' => '320',
					'rd2' => '480',
					'rd3' => '640',
					'rd4' => '720',
					'rd5' => '960',
					'rd6' => '1080',
					'rd7' => '1440',
					'rd8' => '1620',
					'rd9' => '2160' );
   	
   	-------------------------------------------------------- */

.bg-1 {
	background-color: rgba(0,0,0,0.08);
 }
.bg-2 {
	background-color: rgba(32,32,32,1);
 }




/* 	-------------------------------------------------------------------------------------------- */
/* 	--------------------------------------- FORM STYLING --------------------------------------- */
/* 	-------------------------------------------------------------------------------------------- */



/*	all input field styling -------------------------------------------------------------------- 
	
	*** Documentation goes here ***

   	last updated: 17/04/17 - admin - candidate -- dp
   	-------------------------------------------------------- */

.form .fieldset .field > .input,
.form .fieldset .field > .textarea,
.form .fieldset .field > .select {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid rgba(255,255,255,0.8);
	color: rgba(0,0,0,0.6);
	padding: .75em 1em;
 }
.form .fieldset .field > .textarea {
	height: 9em;
 }
.form .fieldset .field > .input:focus,
.form .fieldset .field > .textarea:focus,
.form .fieldset .field > .select:focus {
	background-color: rgba(255,255,255,0.8);
	border: 1px solid rgba(0,168,156,1);
	color: rgba(0,0,0,0.7);
 }

/*	nonspecific -------------------------------------------------------------------------------- 
	
	scaffolding documentation here
   	
   	-------------------------------------------------------- */

.form > .fieldset.imgQuality > .field {
	display: none;
	overflow: hidden;
 }
.form > .fieldset.imgQuality > .div {
	margin-bottom: .75em;
 }
.form > .fieldset.imgQuality > .field > .para.note {
	clear: both;
 }
.form > .fieldset.imgQuality > .field > .range {
	margin:0 0 .75em 0;
 }

/* 	radio button colour picker ----------------------------------------------------------------- 
	
	- colourPicker unique radio button styling

	- now using additional swatch element as difficulties with pseudo elements & backgrounds colours
	- remove background from parent element but retain on pseudo element dynamically, can't be done i think
	- pseudo elements can provide out of focus icons if font size set on parent does not equal whole number
	- pseudo elements can produce warped bullets again if the font size effects size of pseudo element
	- using a bullet in it's own element ensures font size will not impact overall size
	- you can change background colours by adding classes without messy pseudo solutions
	- down side, an empty element is required, does it scale with existing fonts?

	- colour picker is a simple square with no text so no swatch element was needed

	checked: 11/05/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.form > .fieldset.colourPicker > .div {
	background-color:rgba(255,255,255,.4);
	border: 1px solid rgba(0,0,0,0.3);
	padding: .25em;
 }
.form > .fieldset.colourPicker > .div > .field {
	display: inline-block;
	width: 12.5%;
	padding: .25em .25em 0;
	margin: 0;
 }
.form > .fieldset.colourPicker > .div > .field .radiobtn {
	width:100%;
	height: 1.75em;
	top: .25em;
 }
.form > .fieldset.colourPicker > .div > .field .radiobtn + .label {
	border: 1px solid rgba(0,0,0,0.3);
	height: 1.75em;
 }
.form > .fieldset.colourPicker > .div > .field .radiobtn:focus + .label {
	box-shadow: inset 0 0 0 3px #fff;
	border: 1px solid rgba(0,0,0,0.4);
 }
.form > .fieldset.colourPicker > .div > .field .radiobtn:checked + .label {
	box-shadow: inset 0 0 0 2px #fff;
	border: 1px solid rgba(0,0,0,0.4);
 }

/* 	checkbox labels ---------------------------------------------------------------------------- 
	
	- checkbox must be placed inside a field div as it requires absolute positioning

	- swatch adopted for more accurate check boxes, icons, radio buttons 
	- txt size can have impact on consistancy of pseudo elements blurring can occur when not whole pixels
	- use label to get max coverage for clickable area including type 
	- use swatch element and attach to label using "+" adjacent selector
	- although entire label activates checkbox set checkbox size to mirror swatch swatch for consistancy, might change
	- core checkbox properties are set in forms style sheet

	- swatch is by default a absolutely positioned element
	- target style and position in each unique case of checkbox

	checked: 17/04/2016 - core - candidate -- dp
   	-------------------------------------------------------- */

.form > .fieldset.checkLabel {
	border: 1px solid rgba(0,0,0,0.2);
 }
.form > .fieldset.checkLabel > .div {
	background-color:rgba(255,255,255,.7);
	border: 1px solid rgba(0,0,0,0.2);
	padding: 0 1em;
	height: 12.5em;
	overflow: auto;
 }
.form > .fieldset.checkLabel .field {
	border-bottom: 1px dashed rgba(0,0,0,0.2);
	margin-bottom: 0;
 }
.form > .fieldset.checkLabel .field:last-of-type {
	border-bottom: 0px solid transparent;
 }

.form > .fieldset.checkLabel .field .checkbox {
	height: .5em;
	margin-top: -0.25em;
	width: 1.25em;
	top: 50%;
 }
.form > .fieldset.checkLabel .field .checkbox + .label {
	color: rgba(0,0,0,0.6);
	padding: .5em 0 .5em 2em;
 }
.form > .fieldset.checkLabel .field .checkbox + .label + .swatch {
	border: 1px solid rgba(0,0,0,0.3);
	margin-top: -0.25em;
	height: .5em;
	width: 1.25em;
 }

.form > .fieldset.checkLabel .field:hover .checkbox + .label,
.form > .fieldset.checkLabel .field .checkbox:focus + .label {
	color: rgba(0,0,0,0.7);
 } 

.form > .fieldset.checkLabel .field:hover .checkbox + .label + .swatch,
.form > .fieldset.checkLabel .field .checkbox:focus + .label + .swatch {
	border: 1px solid rgba(0,0,0,0.4);
	box-shadow: inset 0 0 0 1px #fff;
 }

.form > .fieldset.checkLabel .field .checkbox:checked + .label {
	color: rgba(0,0,0,0.7);
 } 
.form > .fieldset.checkLabel .field .checkbox:checked + .label::after {
	content: 'selected';
	float: right;
 }
.form > .fieldset.checkLabel .field .checkbox:checked + .label + .swatch {
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: inset 0 0 0 1px #fff;
 }
.form > .fieldset.checkLabel .field .checkbox:checked:focus + .label {
	color: rgba(0,0,0,0.8);
 } 
.form > .fieldset.checkLabel .field .checkbox:checked:focus + .label + .swatch {
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: inset 0 0 0 1px #fff;
 }

/* 	radio button user privileges --------------------------------------------------------------- 

	- user privileges unipue radio button styling, bullet option...
	- use pseudo element on label to style button and make text area clickable
	- absolute positioning for vertically centring radio button
	- background clip to create active button

	- refer to bones--forms.css for core radio button defaults and usage guidelines

	checked: 09/05/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.form > .fieldset .field.bullet {
	float: left;
	padding-right: .75em;
	margin-bottom: .8em;
 }
.form > .fieldset .field.bullet > .radiobtn {
	height: 1.125em;
	width: 1.125em;
	top: 50%;
	margin: -0.5625em 0 0 0;
 }

.form > .fieldset .field.bullet > .radiobtn + .label {
	color: rgba(0,0,0,0.6);
	padding-left: 1.75em;
 }
.form > .fieldset .field.bullet > .radiobtn + .label::before {
	background-clip: padding-box;
	background-color: transparent;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.4);
	content: '';
	cursor: pointer;
	width: 1.125em;
	height: 1.125em;
	margin-top: -0.5625em;
	position: absolute;
	top: 50%;
	left: 0;
 }

.form > .fieldset .field.bullet > .radiobtn:focus + .label {
	color: rgba(0,0,0,0.7);
 }
.form > .fieldset .field.bullet > .radiobtn:focus + .label::before {
	border: 1px solid LightSeaGreen;
	box-shadow: inset 0 0 0 .2em #fff;
 }

.form > .fieldset .field.bullet > .radiobtn:checked + .label {
	color: rgba(0,0,0,0.7);
 }
.form > .fieldset .field.bullet > .radiobtn:checked + .label::before {
	background-color: LightSeaGreen;
	background-clip: content-box;
	padding: .2em;
 }

/* 	radio button user privileges --------------------------------------------------------------- 

	- refer to svg icon used at top of the page

	checked: 09/05/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.form > .fieldset .field.star {
	overflow: hidden;
	float: left;
	position: relative;
 }
.form > .fieldset .field.star > .radiobtn {
	height: 24px;
	width: 24px;
	float:left;
 }
.form > .fieldset .field.star > .radiobtn + .label {
	position: relative;
	height: 24px;
	width: 24px;
	float:left;
 }
.form > .fieldset .field.star > .radiobtn + .label > .icon {
	height: 24px;
	width: 24px;

	stroke-width: 0;
	stroke: currentColor;
	fill: rgba(255,255,255,0.4);
 }
.form > .fieldset .field.star > .radiobtn + .label > .icon + .icon {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	stroke-width: 0;
	stroke: currentColor;
	fill: rgba(0,0,0,0.4);
 }

.form > .fieldset .field.star > .radiobtn:checked + .label > .icon {
	fill: #FFD700;
 }
.form > .fieldset .field.star > .radiobtn:checked + .label > .icon + .icon {
	fill: rgba(0,0,0,0.4);
 }

/* 	Extention Selection ------------------------------------------------------------------------ 
	
	- could be quite rock solid example here

	- Example of substitute form element using a label for focus includes select dropdown, quite nifty
	- because some form elements render differently use a label as substitute
	- select button is basically hidden except for text which has padding on left
	- select button is a fixed width as we want to offset the txt field by exeactly same amount
	- text in select has small amount of breathing room on right side with no padding included
	- if selections options change in length select element can contain; jpeg, jpg
	- cannot use text align with select padding required on left only
	- very happy with this tested across multiple old browsers
	- tested across major browsers and old windows safari and all pretty tight.
	- IE internal shadow on focus is a little blurry???
	- combined label with table to make a label table!
	- appears to work the same without all the table properties?
	- need to check how dispaly table-cell work on it's own, what effect does display table have?

	- providing total substitute for form elements that behave differently accross browsers
	- best bet is to hide element and use a table to create a equal height multi col form field 

	- Need to research how tables behave across browser 100% width fluid columns
	- Have set a cell to 1% width and on the other cell no width
	- use cell as with 1% as wrapper for dynamic content, cell expands to take content
	- something about 1% of column in comparision to 
	
	checked: 19/05/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.form > .fieldset .field.imgExt {
	display: flex;
	flex-direction: row;
 }
.form > .fieldset .field.imgExt > .input {
	text-align: right;
	border-right-width: 0px;
	padding: .75em 1em;
	color: rgba(0,0,0,0.6);
	flex: 1;
 }
.form > .fieldset .field.imgExt > .select {
	background-color: LightSeaGreen;
	width: auto;
 }
.form > .fieldset .field.imgExt > .span {
	padding: .75em 1em;
	color: rgba(0,0,0,0.6);
	background-color: rgba(255,255,255,0.7);
	border: 1px solid rgba(0,0,0,0.2);
 }

.form > .fieldset .field.imgExt > .select:hover,
.form > .fieldset .field.imgExt > .select:active {
	box-shadow: inset 0 0 0 1px #fff;
	border: 1px solid rgba(0,0,0,0.4);
	color: rgba(0,0,0,0.6);
 }
.form > .fieldset .field.imgExt > .select:focus {
	box-shadow: inset 0 0 0 1px #fff;
	color:white;
 }

/* 	Label Table -------------------------------------------------------------------------------- 
	
	- combined label with table to make a label table!
	- appears to work the same without all the table properties?
	- need to check how dispaly table-cell work on it's own, what effect does display table have?

	- providing total substitute for form elements that behave differently accross browsers
	- best bet is to hide element and use a table to create a equal height multi col form field 

	- Need to research how tables behave across browser 100% width fluid columns
	- Have set a cell to 1% width and on the other cell no width
	- use cell as with 1% as wrapper for dynamic content, cell expands to take content
	- something about 1% of column in comparision to 
	
	checked: 19/05/2017 - core - candidate -- dp
   	-------------------------------------------------------- */

.form > .fieldset .field.uploadBar {
	
 }
.form > .fieldset .field.uploadBar > .file {
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	width: 0.1px;
	z-index: -1;
 }

.form > .fieldset .field.uploadBar > .label {
	display: flex;
	flex-direction: row;
 }
.form > .fieldset .field.uploadBar > .label > .div {
	border: 1px solid rgba(0,0,0,0.2);
	background-color: rgba(255,255,255,0.7);
	border-right-width: 0px;
	flex: 1;
 }
.form > .fieldset .field.uploadBar > .label > .div > .span{
	display: block;
	padding: .75em 1em;
	color: rgba(0,0,0,0.6);
 }
.form > .fieldset .field.uploadBar > .label > .btn {
	display: block;
 }
.form > .fieldset .field.uploadBar > .label:hover > .div {
	border-color: LightSeaGreen;
	background-color: rgba(255,255,255,0.9);
	color: rgba(0,0,0,0.6);
 }
.form > .fieldset .field.uploadBar > .label:hover > .btn {
	box-shadow: inset 0 0 0 1px #fff;
 }

.form > .fieldset .field.uploadBar > .file + .label.table {
	width: auto;
	table-layout: auto;
	border-collapse: separate;
 }
.form > .fieldset .field.uploadBar > .file + .label.table > .table-cell {
	border: 1px solid rgba(0,0,0,0.2);
 }
.form > .fieldset .field.uploadBar > .file + .label.table > .table-cell:first-of-type {
	background-color: rgba(255,255,255,0.7);
	border-right: none;
	color: rgba(0,0,0,0.6);
	padding: .75em 1em;
 }
.form > .fieldset .field.uploadBar > .file + .label.table > .table-cell:last-of-type {
	width:1%;
	background-color: LightSeaGreen;
 }
.form > .fieldset .field.uploadBar > .file + .label.table > .table-cell.somelabel{
	background-color: transparent;
 }

.form > .fieldset .field.uploadBar > .file + .label.table:hover > .table-cell:first-of-type {
	border-color: LightSeaGreen;
	background-color: rgba(255,255,255,0.9);
	color: rgba(0,0,0,0.6);
 }
.form > .fieldset .field.uploadBar > .file + .label.table:hover > .table-cell:last-of-type {
	box-shadow: inset 0 0 0 1px #fff;
 }

/*	submit bar --------------------------------------------------------------------------------- 
	
	- submitBar is usually last element which has extra margin on top for button room
	- submitBar is designed to hold buttons only, mods could be made for links
	- two versions of submitBar available, fieldset option with child combinator included
	- specificity required as selector is overwritten by other combined selectors

   	last updated: 16/04/17 - admin - candidate -- dp
   	-------------------------------------------------------- */

.form > .fieldset > .wrapActive {
	border-top: 1px solid rgba(0,0,0,0.15);
	padding-top: .75em;
	overflow: hidden;
	margin-bottom: 1.25em;
 }
.form > .fieldset > .wrapActive > .field.bullet {
	margin-bottom: 0;
 }

/* 	-------------------------------------------------------------------------------------------- */

.submitBar {
	margin: 1.25em 0 0;
	// overflow: hidden;
 }
.submitBar::after {
	content: " ";
	display: block;
	clear: both;
 }


.submitBar .btn {
	float: left;
 }
.submitBar .btn + .btn {
	float: right;
 }

/* 	-------------------------------------------------------------------------------------------- */
/* 	-------------------------------------------------------------------------------------------- */
/* 	-------------------------------------------------------------------------------------------- */










/* 	New Colour ---------------------------------------------------------------------------------- 

	- landing page for gallery
   	
   	-------------------------------------------------------- */

.section.maps > .wrap > .div > .heading.lato-hvy {
	font-size: 1.5em;
	color: OrangeRed;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	text-shadow: 4px 4px 4px rgba(0,0,0,0.1);
 }
.section.maps > .wrap > .div > .para.lato-med {
	text-align: center;
	color: #342E2E;
	margin-bottom: 2em;
 }
.section.maps > .wrap > .div > .para.lato-thin {
	text-align: center;
	color: rgba(255,255,255,.7);
 }
.section.maps > .wrap > .div > .para.lato-thin > .span.lato-med {
	text-align: center;

 }

@media (min-width: 33.75em) {
	.section.maps > .wrap > .div > .heading.lato-hvy {
		 font-size: 2.25em;
	 }
 }
@media (min-width: 60em) {
	.section.maps > .wrap > .div > .heading.lato-hvy {
		margin-bottom: .125em;
		font-size: 2.5em;
	 }
	.section.maps > .wrap > .div > .para.lato-med {

	 }
	.section.maps > .wrap > .div > .para.lato-thin {
		margin-bottom: 1em;
	 }
 }
@media (min-width: 90em) {
	.section.maps > .wrap > .div > .heading.lato-hvy {
		font-size: 2.75em;
		margin-bottom: .125em;
	 }
 }
@media (min-width: 120em) {
	.section.maps > .wrap > .div > .heading.lato-hvy {
		font-size: 2.5em;
		margin-bottom: .125em;
	 }
 }
@media (min-width: 150em) {
	.section.maps > .wrap > .div > .heading.lato-thin {
		font-size: 3em;
		margin-bottom: .125em;
	 }
 }




	.hero-3 {
		display: block;
		flex-flow: row nowrap;
	 }
	.hero-3 > .div > .wrapImg > .img {
		background-color: transparent;
	 }



@media (min-width: 60em) {

	.hero-3 {
		display: flex;
		flex-flow: row nowrap;
	 }
	.hero-3 > .div {
		display: flex;
		flex-flow: row nowrap;
	 }
	.hero-3 > .div:last-of-type {
		padding-left: 2em;
	 }
	.hero-3 > .div:first-of-type {
		flex-basis: 40%;
		margin-bottom: 1.25em;
	 }
	.hero-3 > .div:last-of-type  {
		flex-basis: 60%;
	 }
	.hero-3 > .div > .wrapImg > .img {
		background-color: transparent;
	 }

}