/* HTML5 display definitions
---------------------------------------- */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog {
	display: block;
}

/* Corrects inline-block not defined in IE6/7/8 and FF3 */
audio, canvas, video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

audio:not([controls]) {
	display: none;
}

/* Ensures content is hidden from all presentations, including screenreaders */
[hidden] {
	display: none;
	visibility: hidden;
}

/* Base structure
---------------------------------------- */

/*
	* The body will work like a 'div#wrapper' (for this to work, the 'body' needs to have a set width)

	* To add a background to the PAGE, set it in the 'html' element
	* To add a background to the WRAPPER, set it in the 'body' element
*/
html {
	height: 100%;
	font-size: 100%;
	overflow-y: scroll; /* Force a scrollbar in non-IE */
	-webkit-text-size-adjust: 100%; /* Prevent iOS text size adjust on orientation change without disabling user zoom */
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0 auto;
	min-height: 100%;

	background-color: #505153;
}

/* Fonts settings based on the 100E2R standard: http://www.informationarchitects.jp/en/100e2r/ */
body, button, input, select, textarea {
	font: .875em/1.2857 Helvetica, Arial, sans-serif; /* 14px/18px */
  	color: #222;
}

/* Add and/or remove tags as your baseline grid needs */
blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, menu, figure, figcaption, button, hr {
	margin: 0 0 1.2857em;
}

/* Headings/small
---------------------------------------- */

h1,h2,h3,h4,h5 {
	margin-top: 0;
	font-weight: 400;
	font-style: normal;
	color: #222;
}

#sc_photos h1, #sc_albums h1, #sc_photos h3, #sc_albums h3 {
	color: #C3C3C3;
}

h1, h2, h3, h4, .alpha, .beta, .delta, .gamma, .epsilon {
	font-family: Georgia, serif;
}

#home .epsilon {
	font-family: Helvetica, Arial, sans-serif;
}


/* http://style.cleverchimp.com/font_size_intervals/altintervals.html */
/* http://drewish.com/tools/vertical-rhythm */

/* 24px */
h1, .alpha { font-size: 1.7143em; /* 24px */ line-height: 1.5em; /* 36px */ margin-bottom: 0.75em; margin-top: 0em; }
/* 22px */
h2, .beta { font-size: 1.5714em; /* 22px */ line-height: 1.6364em; /* 36px */ margin-bottom: 0.8182em; margin-top: 0em; }
/* 20px */
h3, .gamma { font-size: 1.4286em; /* 20px */ line-height: 1.8em; /* 36px */ margin-bottom: 0.9em; margin-top: 0em; }
/* 18px */
h4, .delta { font-size: 1.2857em; /* 18px */ line-height: 1em; /* 18px */ margin-bottom: 1em; margin-top: 0em; }
/* 16px */
h5, .epsilon { font-size: 1.1429em; /* 16px */ line-height: 1.125em; /* 18px */ margin-bottom: 1.125em; margin-top: 0em; }
/* 14px */
p { font-size: 1em; /* 14px */ line-height: 1.2857em; /* 18px */ margin-bottom: 1.2857em; margin-top: 0em; }

em {
	font-style: italic;
}

#header h1, #header .alpha {
	/* 20px - like .gamma */
	font-family: Georgia;
	font-size: 1.4286em; /* 20px */ line-height: 1.8em; /* 36px */ margin-bottom: 0.45em; margin-top: 0.45em;
}

/* image replacement from https://github.com/h5bp/html5-boilerplate */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

#header h1, #header .alpha a {
	background: url('/img/logo_sm.png') no-repeat;
	width: 164px;
	height: 34px;
	display: block;
}

h3.album-heading {
	margin: 0;
}

h3.album-heading a {
	display: inline-block;
	padding: 1em .5em;
	max-width: 128px; /* needed to get text to wrap in IE8 and IE9 */
	color: #E8E8E8;
	text-decoration: none;
}


/* Tables
---------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	text-align: left;
}

tr, th, td {
	padding-right: 1.625em;
}

/* Forms
---------------------------------------- */

form {
	margin: 0;
}

fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

legend {
	border: 0;
	*margin-left: -7px;
	font-weight: 700;
	margin-bottom: 1.375em;
}

button, input, select, textarea {
	vertical-align: baseline;
	*vertical-align: middle;
	margin-bottom: 1em;
}

button, input {
	line-height: normal;
	*overflow: visible;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 */
table button, table input {
	*overflow: auto;
}

label {
	display: block;
	font-weight: 700;
}

input.text, textarea {
	width: 95%;
}

::-webkit-input-placeholder  { color:#888; }
input:-moz-placeholder { color:#888; }

/* Form errors */

.error-message {
	margin-bottom: 1.375em;
	color: #FF4023;
}

.form-error {
	background-color: #FFCBC3;
}

/* Quotes
---------------------------------------- */

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

blockquote, q, cite {
	font-family: Georgia, serif;
	font-style: italic;
}

blockquote > p {
	padding: 0;
}

/* Lists
---------------------------------------- */

ul, ol {
	padding-left: 1.625em;
}

li ul, li ol {
	margin: 0 1.625em;
}

dl dd {
	margin-left: 1.625em;
}

/* Links
---------------------------------------- */
a:visited { color: #666666; }
a:focus,
a:hover     { color: #222; }
a           { color: #222; }

.img:hover {
	border-bottom: none;
}

a img { border:none; vertical-align:top; } /* http://konstruktors.com/blog/web-design/1122-remove-border-from-image-links/ */

a:focus {
	outline: thin dotted;
}

/* Better CSS outline suppression: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {
	outline: none;
}

/* Figures
---------------------------------------- */

figure, figcaption {
	margin: 0;
	padding: 0;
}

/* Embedded content
---------------------------------------- */

img, object, video {
	max-width: 100%; /* Automatically scales images larger than the container. Consider this first: http://unstoppablerobotninja.com/entry/fluid-images/ */
}

img {
	height: auto;
	-ms-interpolation-mode: bicubic; /* Improve IE's resizing of images: css-tricks.com/ie-fix-bicubic-scaling-for-images */
}

/* Corrects overflow displayed oddly in IE9 */
svg:not(:root) {
	overflow: hidden;
}

/* Abbreviations
---------------------------------------- */

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

/* Marked/inserted/deleted text
---------------------------------------- */

mark {
	background: #ff0;
}

ins {
	text-decoration: none;
	background: #ff9;
}

del {
	text-decoration: line-through;
}

/* Others
---------------------------------------- */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-bottom: 1px solid #ddd;
}

strong, b, dt {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

var, address {
	font-style: normal;
}

/* Position 'sub' and 'sup' without affecting line-height: gist.github.com/413930 */
sub, sup {
	font-size: 0.625em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* SPAM check - hidden form element */
.areyouhuman { display: none;}

/* Helper classes
---------------------------------------- */

/*
	* Micro clearfix hack, more semantically titled with 'group'
	* Source: nicolasgallagher.com/micro-clearfix-hack/
*/
.group:before, .group:after {
	content: "";
	display: table;
}

.group:after {
	clear: both;
}

.group {
	*zoom: 1;
}

/* Grid - adapted from The 1140px Grid V2 by Andy Taylor
---------------------------------------- */
body {
	margin: 0;
	padding: 0;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol, #content, .sidebar {
	padding-left: 1em;
	padding-right: 1em;
	min-height: 1px;
}

.row .last, .sidebar {
	margin-right: 0;
}

.row {
	padding: 1.2857em 0 1px 0;
}

.row .center {
	margin: 0 auto;
	float: none;
}

/* SPAM check - hidden form element */
.areyouhuman { display: none;}

#header .alpha a {
	text-decoration: none;
}

#header .alpha a:hover {
	color: #A8D700;
}

#header, #footer {
	background-color: #505153;
	color: #fff;
}

#header h1, #header a, #footer a {
	color: #E8E8E8;
}

#header .row {
	overflow: hidden;
	padding-top: 0;
}

/*.contact-details {
	float: left;
	width: 65%;
}*/

.social {
	margin-top: .5em;
	margin-bottom: .5em;
}

.nav .row {
	padding-top: 0;
	padding-bottom: 0;
	background-color: #99C300;
}

.primary-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	background-color: #A8D700;
	font-family: Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}

.primary-item a, .active {
	padding-left: 1em;
	border-bottom: 1px solid #8E8E8E;
}

.contact-nav a, .contact-nav.active {
	border-bottom: none;
}

.primary-item a {
	text-decoration: none;
	display: block;
	color: #222;
}

.active {
	background-color: #E8E8E8;
}

/*.nav-menu-narrow {
	background-color: #3D3D3D;
	padding-bottom: 1em;
}*/

/* Style the button (see http://www.456bereastreet.com/archive/201110/styling_button_elements_to_look_like_links/ for details) */
.nav-menu-narrow button {
	z-index: 10;
	overflow: visible;
	margin: 0;
	padding: 0;
	border: 0;
	color: #fff;
	background: #99C300;
	cursor:pointer;
	width: 100%;
	text-align: left;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.285714286em;
	line-height: 2;
}
/* Remove magical padding in Gecko browsers */
.nav-menu-narrow button::-moz-focus-inner {
	padding:0;
	border:0;
}
/* Hide some text visually but not from screen readers. See http://yaccessibilityblog.com/library/css-clip-hidden-content.html. */
.nav-menu-narrow button span {
	position:absolute;
	clip:rect(1px, 1px, 1px, 1px);
	padding:0;
	border:0;
	height:1px;
	width:1px;
	overflow:hidden;
}
/* Add a graphic to the button to clarify the functionality */
.nav-menu-narrow button:after {
	display:block;
	width:18px;
	height:12px;
	margin-top:10px;
	background:url(/img/icon-menu.svg) no-repeat;
	background-size:18px 12px;
	opacity:0.8;
	content:"";
	float: right;
}
.nav-menu-narrow button:focus {
	outline:1px solid rgba(0,0,0,0.5);
}
.nav-menu-narrow button:focus:after {
	opacity:1;
}
/* All li:s but the selected one hidden by default */
.nav-menu-narrow ul.primary-menu {display:none;}
.nav-menu-narrow ul.primary-menu li {display:none; font-size: 1.285714286em; line-height: 2}
.nav-menu-narrow.expanded  ul.primary-menu,
.nav-menu-narrow.expanded  ul.primary-menu  li {display:block;}

/* main */

#main {
	background-color: #E8E8E8;
}

/* content - full width */

.no-sidebar #content {
	width: 100%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}

/* footer */

#footer .row {
	overflow: hidden;
}

/* gallery */

#project-photos {
	margin: 2.25em 0;
}

.loading {
	text-align: center;
}

.gallery-list {
	list-style: none;
	padding: 0;
}

.gallery-list-item {
	margin-bottom: 1em;
	margin-right: 5px;
	display: inline-block;
	vertical-align: top;
	background-color: rgba(20,20,20,.7);
}

#albumThumbs li.hover { /* hover added with js */
	background-color: rgba(0,0,0,.7);
	cursor: pointer;
}

#albumThumbs li.hover h3 a {
	text-decoration: none;
}

#albumThumbs li.hover img {
	opacity: 0.3;
}

#sc_photos #main, #sc_photos #main a, #sc_albums #main, #sc_albums #main a {
	color: #C3C3C3;
}

#nextprev {
	overflow: hidden;
}



/* next/prev text removed with JavaScript, add some arrows to match magnific popup */

.js .gallery-arrow {
	position: relative;
	opacity: 0.65;
	margin: 0;
	padding: 0;
	width: 50px;
	height: 50px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.js .gallery-arrow:hover,
.js .gallery-arrow:focus {
  	opacity: 1;
}

.js .gallery-arrow:before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	top: 0;
	border: solid transparent;
}

.js .gallery-arrow:before {
	border-top-width: 20px;
	border-bottom-width: 20px;
}

.js .gallery-arrow-left {
	left: 30px; /* width of block - width of arrow = 50 - 20 */
	float: left;
}

.js .gallery-arrow-left:before {
	border-right: 20px solid white;
}

.js .gallery-arrow-right {
	right: 0;
	float: right;
}

.js .gallery-arrow-right:before {
    border-left: 20px solid white;
}

.photo-list {
    -moz-column-count: 1;
    -moz-column-width: 157px;
    -moz-column-gap: 0;
    -webkit-column-count: 1;
    -webkit-column-width: 157px;
    -webkit-column-gap: 0;
    column-count: 1;
    column-width: 157px;
    column-gap: 0;
    /*max-width: 162px;*/
	margin: 0 auto;
	display: block;
	overflow: hidden;
}

#magnific_gallery figcaption {
	padding: .5em;
	width: 136px; /* 150 - (1 * 16)  */
	color: #E8E8E8;
}

.touch .gallery a {
	text-decoration: none;
}

.project-list {
	list-style: none;
	margin: 0 0 2.5714em 0;
	padding: 0;
}

/* products on homepage */

.block {
	background-color: #f8f8f8;
	padding: 1em;
	margin-bottom: 1.2857em;
}

.certplans, .cb-link img {
	margin-bottom: 1.2857em;
}

.block.call-to-action {
	background-color: transparent;
	padding: 0;
}

.product-img, .project img {
	box-shadow: 2px 2px 2px #ADADAD;
	margin-bottom: 1.2857em;
}

.home-call-to-action {
	text-align: center;
	margin-bottom: 2.5714em;
}

.btn {
	border: 0;
	background-color: #A8D700;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #222;
    font-family: Helvetica, Arial, sans-serif;
    text-transform: uppercase;
}

/* call-to-action links */

.button {
	background-color: #A8D700;
    padding: .214285714em 1em; /* 3px 14px */
    text-decoration: none;
    display: inline-block;
    color: #222;
    font-family: Helvetica, Arial, sans-serif;
    text-transform: uppercase;
}

a.button:hover {
	background-color: #99C300;
}

a.enquire {
    padding: .5em 2em; /* 7px 28px */
}

/* larger target area for links */
.readmore {
	padding: 1em 1em 1em 0;
}

/* testimonials */

.author {
	margin-bottom: 0;
}

.author:before {
	content: '—';
}

.testimonial {
	margin-bottom: 2.571428571em; /* 36px */
	padding: 0;
}

/* responsive embedded YouTube video */

.video-wrapper {
	margin: 0 auto 3em;
	max-width: 853px;
}

.video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* covid-19 */
.covid19 {
	background-color: #f8f8f8;
	padding: 1em;
	margin-bottom: 2em;
	width: 95%;
	box-sizing: border-box;
}

#home .covid19 {
	width: auto;
	max-width: 853px;
	margin: 0 auto 2em;
}

@media screen and (min-width: 768px) {

	/*
	generated content that can be detected by JavaScript to add additional content
	http://adactio.com/journal/5429/
	*/
	body, button, input, select, textarea {
		font: 1em/1.375 Helvetica, Arial, sans-serif; /* 16px/22px */
	}

	body:after {
        content: 'mediumscreen';
        display: none;
    }

	.row {
		max-width: 1216px; /* = 1280 - 32 - 32 */
		margin: 0 auto;
		overflow: hidden;
		padding: 1.375em 1em 1px 1em;
	}

	.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, #content, .sidebar {
		padding: 0;
		margin-right: 3.8%;
		float: left;
	}

	.twelvecol {
		padding: 0;
	}

	.row .onecol {
		width: 4.85%;
	}

	.row .twocol {
		width: 13.45%;
	}

	.row .threecol {
		width: 22.05%;
	}

	.row .fourcol, .sidebar {
		width: 30.75%;
	}

	.sidebar {
		margin-right: 0;
	}

	.row .fivecol {
		width: 39.45%;
	}

	.row .sixcol {
		width: 48%;
	}

	.row .sevencol {
		width: 56.75%;
	}

	.row .eightcol, #content{
		width: 65.4%;
	}

	.row .ninecol {
		width: 74.05%;
	}

	.row .tencol {
		width: 82.7%;
	}

	.row .elevencol {
		width: 91.35%;
	}

	.row .twelvecol {
		width: 100%;
		float: left;
	}

	/* 36px */
	h1, .alpha { font-size: 2.25em; /* 36px */ line-height: 1.2222em; /* 44px */ margin-bottom: 0.6111em; margin-top: 0; }
	/* 24px */
	h2, .beta { font-size: 1.5em; /* 24px */ line-height: 1.8333em; /* 44px */ margin-bottom: 0.9167em; margin-top: 0em; }
	/* 22px */
	h3, .gamma { font-size: 1.375em; /* 22px */ line-height: 1em; /* 22px */ margin-bottom: 1em; margin-top: 0em; }
	/* 20px */
	h4, .delta{ font-size: 1.25em; /* 20px */ line-height: 1.1em; /* 22px */ margin-bottom: 1.1em; margin-top: 0em; }
	/* 18px */
	h5, .epsilon { font-size: 1.125em; /* 18px */ line-height: 1.2222em; /* 22px */ margin-bottom: 1.2222em; margin-top: 0em; }
	/* 16px */
	p { font-size: 1em; /* 16px */ line-height: 1.375em; /* 22px */ margin-bottom: 1.375em; margin-top: 0em; }

	/* header */

	#header {
		background: transparent url('/img/brand_top_back.png') no-repeat top right;
	}

	#header .row {
		background: #505153 url('/img/brand_top.png') no-repeat top right ;
	}

	#header h1, #header .alpha {
		margin-top: 0.3055em;
		text-shadow: 2px 2px 2px #000;
		text-shadow: 2px 2px 2px rgba(0,0,0,.5);
	}

	#header .alpha a {
		text-decoration: none;
	}

	#header h1, #header .alpha a {
		background: url('/img/logo.png') no-repeat;
		width: 280px;
		height: 47px;
		display: block;
	}



	/* nav */

	.nav .row {
		background-color: transparent;
		display: flex;
  		align-items: center;
		padding: 0.5rem 0;
	}

	.nav {
		background-color: #ADADAD;
		border: 1px solid;
		border-top-color: #fff;
		border-top-color: rgba(255,255,255,0.5);
		border-bottom-color: #fff;
		border-left: none;
		border-right: none;
	}

	.primary-menu {
		margin: 0;
		float: left;
	}

	.primary-item {
		float: left;
	    list-style: none;
	    padding-right: 5px;
	    padding: 0;
	    font-size: .875em;
		line-height: 1.285714286;
	}

	.contact-nav {
		padding-right: none;
	}

	.primary-item.active, .primary-item a {
    	color: #6B8900;
    	border-bottom: none;
	}

	.primary-item.active, .primary-item a {
		padding: 3px 1.28571em 1px;
	}

	.primary-item a {
    	text-decoration: none;
    	display: block;
    	background-color: #A8D700;
	}

	.primary-item a:hover,
	.primary-item.active,
	.primary-item a:focus {
		background-color: #99C300;
		border-left: none;
		border-right: none;
		color: #5C7500;
	}

	.social {
		margin: 0;
	}

	.social img {
		float: right;
	}

	#main .row {
		padding-bottom: 1.375em;
	}

	/* typography */
	/* Add and/or remove tags as your baseline grid needs */
	blockquote, q, pre, address, hr, code, samp, dl, ol, ul, table, fieldset, menu, button, hr {
		margin: 0 0 1.375em; /* match line-height */
	}

	#footer {
		background: transparent url('/img/brand_bottom_back.png') no-repeat bottom left;
	}

	#footer .row {
		background: #505153 url('/img/brand_bottom.png') no-repeat bottom left;
		font-size: .75em;
	}

	#footer p {
		text-align: right;
		margin-bottom: 1.33333333em;
		line-height: 1.333333333em;
	}


	/* blocks */


	.block {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		display: inline-block;
		width: 100%;
		margin-right: 0;
		vertical-align: top;
	}

	.block.call-to-action {
		padding: 2em 1em;
	}

	.product-img, .cb-link {
		float: right;
		margin: 1.375em 0 1.375em;
	}

	.cb-link {
		margin-left: 1.375em;
	}

	.product-copy {
		overflow: hidden;
		-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	padding-right: 1em;
	}

	.product-img {
		width: 200px;
		-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
	}

	.certplans {
		float: right;
		margin-bottom: 0;
	}

	.block.call-to-action .cb-link {
		margin-top: 0;
	}

	.block.call-to-action img {
		margin: 0;
	}

	.sidebar .block {
		background-color: #D2D2D2;
	}

	/* testimonials */

	.testimonial {
		margin-bottom: 2.75em; /* 44px */
		padding: 1em;
		background-color: #F8F8F8;
	}

	.sidebar .testimonial {
		background-color: transparent;
		border-left: 2px solid #D3D3D3;
		padding: 0 1em;
		margin-left: -1em;
	}

	/* projects */

	.project img {
		max-width: 33%;
	}

	/* gallery */

	#magnific_gallery {
		padding: 0;
	}


	.no-touch #magnific_gallery figure,  .no-touch #magnific_gallery figcaption{
		padding: 0;
	}

	.no-touch #magnific_gallery figure {

	}

	.no-touch #magnific_gallery a {
		display: block;
		position: relative;
	}

	.no-touch #magnific_gallery a:hover {
		background-color: rgba(20,20,20,.7);
		/*z-index: 300;*/
	}

	.no-touch #magnific_gallery figcaption {
		position: absolute;
		top: 0;
		font-size: .75em;
		margin: .5em .5em 0 .5em;
		visibility: hidden;
		text-shadow: 1px 1px 2px #000;
	}

	.no-touch #magnific_gallery a:hover figcaption {
		visibility: visible;
	}

	.no-touch #magnific_gallery a:hover img {
		opacity: .3;
	}

	.touch #magnific_gallery figcaption {
		font-size: .75em;
	}


		/* Magnific Popup CSS */
	.mfp-bg {
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 502;
	  overflow: hidden;
	  position: fixed;
	  background: #3D3D3D;
	  opacity: 0.9;
	  filter: alpha(opacity=90); }

	.mfp-wrap {
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 503;
	  position: fixed;
	  outline: none !important;
	  -webkit-backface-visibility: hidden; }

	.mfp-container {
	  height: 100%;
	  text-align: center;
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  top: 0;
	  padding: 0 6px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box; }

	.mfp-container:before {
	  content: '';
	  display: inline-block;
	  height: 100%;
	  vertical-align: middle; }

	.mfp-align-top .mfp-container:before {
	  display: none; }

	.mfp-content {
	  position: relative;
	  display: inline-block;
	  vertical-align: middle;
	  margin: 0 auto;
	  z-index: 505; }

	.mfp-inline-holder .mfp-content,
	.mfp-ajax-holder .mfp-content {
	  width: 100%;
	  cursor: auto; }

	.mfp-ajax-cur {
	  cursor: progress; }

	.mfp-zoom-out-cur,
	.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
	  cursor: -moz-zoom-out;
	  cursor: -webkit-zoom-out;
	  cursor: zoom-out; }

	.mfp-zoom {
	  cursor: pointer;
	  cursor: -webkit-zoom-in;
	  cursor: -moz-zoom-in;
	  cursor: zoom-in; }

	.mfp-auto-cursor .mfp-content {
	  cursor: auto; }

	.mfp-close,
	.mfp-arrow,
	.mfp-preloader,
	.mfp-counter {
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  user-select: none; }

	.mfp-loading.mfp-figure {
	  display: none; }

	.mfp-hide {
	  display: none !important; }

	.mfp-preloader {
	  color: #cccccc;
	  position: absolute;
	  top: 50%;
	  width: auto;
	  text-align: center;
	  margin-top: -0.8em;
	  left: 8px;
	  right: 8px;
	  z-index: 504; }

	.mfp-preloader a {
	  color: #cccccc; }

	.mfp-preloader a:hover {
	  color: white; }

	.mfp-s-ready .mfp-preloader {
	  display: none; }

	.mfp-s-error .mfp-content {
	  display: none; }

	button.mfp-close,
	button.mfp-arrow {
	  overflow: visible;
	  cursor: pointer;
	  background: transparent;
	  border: 0;
	  -webkit-appearance: none;
	  display: block;
	  padding: 0;
	  z-index: 506; }

	button::-moz-focus-inner {
	  padding: 0;
	  border: 0; }

	button.mfp-close {
	  width: 44px;
	  height: 44px;
	  line-height: 44px;
	  position: absolute;
	  right: 0;
	  top: 0;
	  text-decoration: none;
	  text-align: center;
	  opacity: 0.65;
	  padding: 0 0 18px 10px;
	  color: white!important;
	  font-style: normal;
	  font-size: 28px;
	  font-family: Arial, Baskerville, monospace; }
	  .mfp-close:hover, .mfp-close:focus {
	    opacity: 1; }
	  .mfp-close:active {
	    top: 1px; }

	.mfp-close-btn-in .mfp-close {
	  color: #333333; }

	.mfp-image-holder .mfp-close,
	.mfp-iframe-holder .mfp-close {
	  color: white;
	  right: -6px;
	  text-align: right;
	  padding-right: 6px;
	  width: 100%; }

	.mfp-counter {
	  position: absolute;
	  top: 0;
	  right: 0;
	  color: #cccccc;
	  font-size: 12px;
	  line-height: 18px; }

	.mfp-arrow {
	  position: absolute;
	  top: 0;
	  opacity: 0.65;
	  margin: 0;
	  top: 50%;
	  margin-top: -55px;
	  padding: 0;
	  width: 90px;
	  height: 110px;
	  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

	.mfp-arrow:active {
	  margin-top: -54px; }

	.mfp-arrow:hover,
	.mfp-arrow:focus {
	  opacity: 1; }

	.mfp-arrow:before,
	.mfp-arrow .mfp-b,
	.mfp-arrow .mfp-a {
	  content: '';
	  display: block;
	  width: 0;
	  height: 0;
	  position: absolute;
	  left: 0;
	  top: 0;
	  margin-top: 35px;
	  margin-left: 35px;
	  border: solid transparent; }
	/*.mfp-arrow:after,
	.mfp-arrow .mfp-a {
	  opacity: 0.8;
	  border-top-width: 12px;
	  border-bottom-width: 12px;
	  top: 8px; }*/
	.mfp-arrow:before,
	.mfp-arrow .mfp-b {
	  border-top-width: 20px;
	  border-bottom-width: 20px; }

	.mfp-arrow-left {
	  left: 0; }
	  .mfp-arrow-left:after,
	/*  .mfp-arrow-left .mfp-a {
	    border-right: 12px solid black;
	    left: 5px; }*/
	  .mfp-arrow-left:before,
	  .mfp-arrow-left .mfp-b {
	    border-right: 20px solid white; }

	.mfp-arrow-right {
	  right: 0; }
	  .mfp-arrow-right:after,
	/*  .mfp-arrow-right .mfp-a {
	    border-left: 12px solid black;
	    left: 3px; }*/
	  .mfp-arrow-right:before,
	  .mfp-arrow-right .mfp-b {
	    border-left: 20px solid white; }

	.mfp-iframe-holder {
	  padding-top: 40px;
	  padding-bottom: 40px; }

	.mfp-iframe-holder .mfp-content {
	  line-height: 0;
	  width: 100%;
	  max-width: 900px; }

	.mfp-iframe-scaler {
	  width: 100%;
	  height: 0;
	  overflow: hidden;
	  padding-top: 56.25%; }

	.mfp-iframe-scaler iframe {
	  position: absolute;
	  top: -3px;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
	  background: black; }

	.mfp-iframe-holder .mfp-close {
	  top: -43px; }

	/* Main image in popup */
	img.mfp-img {
	  width: auto;
	  max-width: 100%;
	  height: auto;
	  display: block;
	  line-height: 0;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  padding: 40px 0 40px;
	  margin: 0 auto; }

	/* The shadow behind the image */
	.mfp-figure:after {
	  content: '';
	  position: absolute;
	  left: 0;
	  top: 40px;
	  bottom: 40px;
	  display: block;
	  right: 0;
	  width: auto;
	  height: auto;
	  z-index: -1;
	  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }

	.mfp-figure {
	  line-height: 0; }

	.mfp-bottom-bar {
	  margin-top: -36px;
	  position: absolute;
	  top: 100%;
	  left: 0;
	  width: 100%;
	  cursor: auto; }

	.mfp-title {
	  text-align: left;
	  line-height: 18px;
	  color: #f3f3f3;
	  word-break: break-word;
	  padding-right: 36px; }

	.mfp-figure small {
	  color: #bdbdbd;
	  display: block;
	  font-size: 12px;
	  line-height: 14px; }

	.mfp-image-holder .mfp-content {
	  max-width: 100%; }

	.mfp-gallery .mfp-image-holder .mfp-figure {
	  cursor: pointer; }

	.mfp-content h3 {
	  color: #f3f3f3;
	}

	/* overwrite these in a larger viewport media query */
	.mfp-arrow {
		-webkit-transform: scale(0.75);
		transform: scale(0.75);
	}

	.mfp-arrow-left {
		-webkit-transform-origin: 0;
		transform-origin: 0;
	}

	.mfp-arrow-right {
		-webkit-transform-origin: 100%;
		transform-origin: 100%;
	}

	/* gallery */

	#project-photos {
		margin: 2.4444em 0;
	}

	#sc_photos #content, #sc_albums #content {
		padding-top: 0;
	}

	#sc_photos #photo-view {
		text-align: center;
		overflow-x: none;
	}

	.mfp-arrow {
		-webkit-transform: scale(1.3333);
		transform: scale(1.3333);
	}

	.mfp-arrow-left {
		-webkit-transform-origin: 0;
		transform-origin: 0;
	}

	.mfp-arrow-right {
		-webkit-transform-origin: 100%;
		transform-origin: 100%;
	}

	.mfp-container {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media only screen and (min-width: 1024px) {

	body:after {
        content: 'widescreen';
        display: none;
    }

    .row {
		padding: 1.375em 2em 1px 2em;
	}

	#header h1, #header .alpha {
		font-size: 2.25em; /* 36px */ line-height: 1.2222em; /* 44px */ margin-bottom: 0.305555556em; margin-top: 0.305555556em;
	}

	#header p {
		margin: 0;
	}

	#home .block {
		width: 49%;
		margin-right: 1.63%;
	}

	#home .even {
		margin-right: 0;
	}

	.product-copy {
		width: 60%;
	}

	.product-img {
		width: 40%;
	}

	/* projects */

	.project img {
		max-width: none;
	}

  .page-content {
    max-width: 70ch;
    margin: 0 auto;
  }

}

@media only screen and (min-width: 1280px) {


}

/* Print styles
---------------------------------------- */

/* Print styles inlined to avoid extra HTTP connection */

@media print {
	* {
		background: transparent !important;
		color: black !important; /* Black prints faster: sanbeiji.com/archives/953 */
		text-shadow: none !important;
		filter: none !important;
		-ms-filter: none !important;
	}

	a, a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/* Do not show javascript and internal links */
	a[href^="javascript:"]:after, a[href^="#"]:after {
		content: "";
	}

	/* Printing Tables: css-discuss.incutio.com/wiki/Printing_Tables */
	thead {
		display: table-header-group;
	}

	tr, img {
		page-break-inside: avoid;
	}

	@page {
		margin: 0.5cm;
	}

	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}

	h2, h3 {
		page-break-after: avoid;
	}
}