/*
color guide:

dark grey hsl(34, 14%, 3%)
med dark grey hsl(0, 0%, 20%)
med light grey hsl(210, 3%, 47%)
light grey hsl(210, 3%, 87%)
logo grey hsl(0, 0%, 32%);

blue hsl(191, 100%, 41%)
red hsl(347, 72%, 44%)
green hsl(116, 40%, 59%)

typographic scale:
major 3rd | base: 1.5em
*/

/*---------- Globals ----------*/

	/*body, html, #main-wrapper {
		width: 100%;
		height: 100%;
		min-width: 320px;
	}*/
	html {
		font-family: 'melbourne regular', 'helvetica neue', sans-serif;
		color: hsl(210, 3%, 87%);
		-webkit-font-smoothing: antialiased;
    	-moz-osx-font-smoothing: grayscale;
	}
	body {
		margin: 12px 12px 12px 0;
		font-size: 1.5em;
	}
	h1, h2, h3 {
		text-align: center;
	}
	h1 {
		margin-top: 0;
		font-size: 2.441em;
	}
	h2 {
		font-size: 1.953em;
		margin-top: 0em;
		margin-bottom: 20px;
	}
	h3 {font-size: 1.563em;}
	h4 {
		font-size: 1.25em;
		font-weight: normal;
	}
	small, .font-small {
		font-size: 0.7em;
		color: hsl(210, 3%, 47%);
	}
	.italics {
		font-style: italic;
	}
	.has-included {
		margin-bottom: 0;
	}
	/*.fnt-adj {
		font-weight: 100;
	}*/
	a {
		color: hsl(191, 100%, 41%);
		text-decoration: none;
		cursor: pointer;
		-webkit-transition: color 0.3s, background-color 0.3s;
		-moz-transition: color 0.3s, background-color 0.3s;
		transition: color 0.3s, background-color 0.3s;
	}
	a:hover,
	a:active {
		color: hsl(210, 3%, 47%);
	}
	a.cta {
		display: block;
		padding: 0px 7px 5px 0px;
		width:110px;
	}
	/*a.cta:hover,
	a.cta:active {
		color: hsl(198, 50%, 85%);
	}*/
	.at {
		font-family: tahoma;
		font-size: 80%;
	}
	::selection {
		background: hsl(191, 100%, 41%);
	}
	.content {
		/*margin-left: 10%;*/
		position: relative;
		top: 0;
		/*min-width: 620px;*/
		/*height: 100%;*/
		padding: 0 3em 0 11em;
	}
	.row {
		width: 100%;
		margin: 0 auto 2em auto;
		/*padding-left: 5%;*/
		max-width: 800px;
	}
	.row > p:first-child {
		margin-top: 0;
	}
	.row .sixty {
		padding-left: 3%;
	}
	.text-bg {
		/*background: url('../img/text-bg.svg') no-repeat;*/
		/*width: 670px;*/
		width: 60%;
		height: 475px;
		/*padding: 14px 60px;*/
	}
	.text-bg h3 {
		margin-top: 0;
	}
	.text-bg p:first-child {
		margin-top: 0;
	}
	.centerXY {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.centerX {
		position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.centerY {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.fa::before,
	.fa::after {
		font: normal normal normal 14px/1 FontAwesome;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		transform: translate(0, 0);
	}
	.fa-angle-right::after {
		content: "\f105";
		position: relative;
		top: 1px;
		left: 13px;
	}
	.close {
		text-align: right;
		margin: 0;
		padding: 0;
		color: hsl(210, 3%, 47%);
		-webkit-transition: color 0.3s;
		-moz-transition: color 0.3s;
		transition: color 0.3s;
	}
	.close:active,
	.close:hover {
		cursor: pointer;
		color: hsl(191, 100%, 41%);
	}
	.overlay {
		position: fixed;
		/*z-index: 1;*/
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: hsla(0, 0%, 0%, 0.75);
		opacity: 0;
	}
	.hide {
		display: none;
		visibility: hidden;
	}
	#logo-clip {
		position: fixed;
		right: 0;
		top: 0;
		height: 100%;
		width: 127px;
		background: url('../img/logo-clip.svg') no-repeat;
		background-position: center center;
		background-size: 100%;
		opacity: 0;
		/*z-index: 1;*/
	}

/*---------- Background Gradients ----------*/

	.bg-dk-gradient {
		background: hsl(34, 14%, 3%) !important;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(30,14%,3%)), color-stop(45%, hsl(0,0%,20%)), color-stop(55%,hsl(0,0%,20%)), color-stop(100%,hsl(30,14%,3%))) !important;
		background: -webkit-linear-gradient(top, hsl(30,14%,3%) 0%, hsl(0,0%,20%) 45%, hsl(0,0%,20%) 55%,hsl(30,14%,3%) 100%) !important;
		background: -moz-linear-gradient(top, hsl(30,14%,3%) 0%, hsl(0,0%,20%) 45%, hsl(0,0%,20%) 55%, hsl(30,14%,3%) 100%) !important;
		background: -ms-linear-gradient(top, hsl(30,14%,3%) 0%, hsl(0,0%,20%) 45%, hsl(0,0%,20%) 55%,hsl(30,14%,3%) 100%) !important;
		background: -o-linear-gradient(top, hsl(30,14%,3%) 0%, hsl(0,0%,20%) 45%, hsl(0,0%,20%) 55%,hsl(30,14%,3%) 100%) !important;
		background: linear-gradient(to bottom, hsl(30,14%,3%) 0%, hsl(0,0%,20%) 45%, hsl(0,0%,20%) 55%,hsl(30,14%,3%) 100%) !important;
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#080706', endColorstr='#080706',GradientType=0 ) !important;
	}

/*---------- Animations ----------*/

	.led::after {
		animation: blink linear 2s;
		animation-iteration-count: infinite;
		transform-origin: 50% 50%;
		-webkit-animation: blink linear 2s;
		-webkit-animation-iteration-count: infinite;
		-webkit-transform-origin: 50% 50%;
		-moz-animation: blink linear 2s;
		-moz-animation-iteration-count: infinite;
		-moz-transform-origin: 50% 50%;
		-o-animation: blink linear 2s;
		-o-animation-iteration-count: infinite;
		-o-transform-origin: 50% 50%;
		-ms-animation: blink linear 2s;
		-ms-animation-iteration-count: infinite;
		-ms-transform-origin: 50% 50%;
	}
	.led-secondary::after {
		-webkit-animation-delay: .3s;
		animation-delay: .5s;
		-webkit-animation: blink linear 1.5s;
		-webkit-animation-iteration-count: infinite;
		-webkit-transform-origin: 50% 50%;
		-moz-animation: blink linear 1.5s;
		-moz-animation-iteration-count: infinite;
		-moz-transform-origin: 50% 50%;
		-o-animation: blink linear 1.5s;
		-o-animation-iteration-count: infinite;
		-o-transform-origin: 50% 50%;
		-ms-animation: blink linear 1.5s;
		-ms-animation-iteration-count: infinite;
		-ms-transform-origin: 50% 50%;
	}
	@keyframes "blink" {
		0% {opacity:1;}
		50% {opacity:.4;}
		100% {opacity:1;}
	}
	@-moz-keyframes "blink" {
		0% {opacity:1;}
		50% {opacity:.4;}
		100% {opacity:1;}
	}
	@-webkit-keyframes "blink" {
		0% {opacity:1;}
		50% {opacity:.4;}
		100% {opacity:1;}
	}
	@-o-keyframes blink {
		0% {opacity:1;}
		50% {opacity:.4;}
		100% {opacity:1;}
	}
	@-ms-keyframes blink {
		0% {opacity:1;}
		50% {opacity:.4;}
		100% {opacity:1;}
	}

/*---------- Desktop Navigation ----------*/

	#navigation {
		position: fixed;
		top: 0;
		left: -20px;
		z-index: 1;
		overflow: hidden;
		height: 632px;
		/*height: 0px;*/
	}
	#desktop-nav-wrapper {
		background: url('../img/nav-bg.svg') no-repeat;
		width: 285px;
		/*height: 0px;*/
		height: 632px;
		background-size: 100%;
	}
	#logo-sm {
		background: url('../img/logo.svg') no-repeat;
		width: 460px;
		height: 313px;
		background-size: 100%;
		position: fixed;
		width: 190px;
		height: 130px;
		left: 60px;
		top: 12px;
		z-index: 3;
		opacity: 1;
	}
	#home-link {
		display: block;
		width: 100%;
		height: 100%;
	}
	nav#desktop-nav {
		width: 128px;
		position: absolute;
		left: 27px;
		top: 28%;
		/*top: 35%;*/
	}
	nav > ul {
		margin: 0;
		padding: 0;
	}
	nav > ul > li {
		position: relative;
		list-style: none;
	}
	nav#desktop-nav > ul > li {
		text-align: right;
	}
	.led {
		text-shadow: 2px 2px 5px hsla(0, 0%, 0%, .5);
	}
	.led::before {
		content: "";
		position: absolute;
		top: 8px;
		right: -26px;
		/*z-index: 1;*/
		width: 14px;
		height: 14px;
		border-radius: 50%;
		border: 1px solid hsl(0, 0%, 40%);
		box-shadow: 1px 2px 5px hsla(0, 0%, 0%, 1);
		cursor: initial;
	}
	.led::after {
		content: "";
		position: absolute;
		width: 14px;
		height: 14px;
		border-radius: 50%;
	}
	.led::before,
	.led::after {
		cursor: initial;
	}
	.led-primary::after {
		margin-left: 12px;
		margin-top: 8px;
	}
	nav > ul > li > a {
		color: hsl(210, 3%, 87%);
		/*font-size: 24px;*/
	}
	nav > ul > li > a:hover,
	nav > ul > li > a:active {
		/*color: hsl(210, 3%, 87%);*/
		color: hsl(210, 3%, 47%);
	}
	.fa-envelope-o::after {
		content: "\f003";
		position: relative;
		top: 30px;
		left: 32px;
	}
	.fa-facebook-official::after {
		content: "\f230";
		position: relative;
		top: 40px;
		left: 30px;
	}
	.icon-link > a {
		color: hsl(0, 0%, 40%);
	}

/*---------- Mobile Navigation ----------*/

	#mobile-nav-header {
		display: none;
		visibility: hidden;
		position: fixed;
		top: 0;
		width: 100%;
		height: 100px;
		background: -moz-linear-gradient(top,  hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,1) 1%, hsla(0,0%,0%,0.85) 73%, hsla(0,0%,0%,0.45) 91%, hsla(0,0%,0%,0) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,0%,1)), color-stop(1%,hsla(0,0%,0%,1)), color-stop(73%,hsla(0,0%,0%,0.85)), color-stop(91%,hsla(0,0%,0%,0.45)), color-stop(100%,hsla(0,0%,0%,0)));
		background: -webkit-linear-gradient(top,  hsla(0,0%,0%,1) 0%,hsla(0,0%,0%,1) 1%,hsla(0,0%,0%,0.85) 73%,hsla(0,0%,0%,0.45) 91%,hsla(0,0%,0%,0) 100%);
		background: -o-linear-gradient(top,  hsla(0,0%,0%,1) 0%,hsla(0,0%,0%,1) 1%,hsla(0,0%,0%,0.85) 73%,hsla(0,0%,0%,0.45) 91%,hsla(0,0%,0%,0) 100%);
		background: -ms-linear-gradient(top,  hsla(0,0%,0%,1) 0%,hsla(0,0%,0%,1) 1%,hsla(0,0%,0%,0.85) 73%,hsla(0,0%,0%,0.45) 91%,hsla(0,0%,0%,0) 100%);
		background: linear-gradient(to bottom,  hsla(0,0%,0%,1) 0%,hsla(0,0%,0%,1) 1%,hsla(0,0%,0%,0.85) 73%,hsla(0,0%,0%,0.45) 91%,hsla(0,0%,0%,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
	}
	#mobile-nav {
		position: fixed;
		width: 100%;
		height: 100%;
		/*background-color: hsla(0, 0%, 0%, 0.9);*/
		background-color: hsla(0, 0%, 20%, .99);
		top: 0;
		right: 100%;
		text-align: center;
		opacity: 1;
		z-index: 2;
	}
	#mobile-nav-link {
		display: none;
		visibility: hidden;
		position: fixed;
		top: 35px;
		right: 20px;
		/*width: 128px;
		text-align: center;*/
	}
	#mobile-nav-link a,
	#mobile-nav-link span::before {
		color: hsl(210, 3%, 87%);
	}
	.fa-bars::after {
		content: "\f0c9";
		font-size: .7em;
		padding-right: 5px;
	}
	#mobile-nav ul {
		margin-top: 20%;
	}
	#mobile-nav li a {
		font-size: 2em;
	}
	#mobile-nav > ul > li:nth-child(7) > a::after,
	#mobile-nav > ul > li:nth-child(8) > a::after {
		left: 0px;
	}
	#mobile-nav-close {
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: 2em;
		cursor: pointer;
	}

/*---------- Secondary Navigation ----------*/

	.slide-nav {
		margin: 0 auto;
		/*border-bottom: 1px solid hsl(210, 3%, 47%);*/
		padding-bottom: 5px;
		margin-bottom: 58px;
		/*margin-bottom: 6%;*/
		text-align: center;
	}
	.slide-nav nav > ul > li {
		display: inline-block;
		cursor: pointer;
	}
	.slide-nav a:active,
	.slide-nav a:hover {
		color: hsl(210, 3%, 87%);
	}
	.led-secondary::before,
	.led-secondary::after {
		/*top: -20px;*/
		top: 35px;
	}
	/*.sub-nav-active::before {
		content: "";
		display: block;
		position: absolute;
		width: 0;
		bottom: -5px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		border-bottom: 1px solid transparent;
	}
	.sub-nav-active:hover::before {
		border-bottom: 1px solid hsl(0, 0%, 80%);
		width: 100%;
	}*/

/*---------- LED Gradients ----------*/

	.green-led::after {
		background: hsl(103,100%,55%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(10%, hsl(0,0%,100%)), color-stop(100%, hsl(103,100%,55%)));
		background: -webkit-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(103,100%,55%) 100%);
		background: -moz-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(103,100%,55%) 100%);
		background: -ms-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(103,100%,55%) 100%);
		background: -o-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(103,100%,55%) 100%);
		background: radial-gradient(ellipse at center, hsl(0,0%,100%) 10%, hsl(103,100%,55%) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#5bff1a',GradientType=1 );
	}
	.red-led::after {
		background: hsl(0,100%,50%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(10%, hsl(0,0%,100%)), color-stop(100%, hsl(0,100%,50%)));
		background: -webkit-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(0,100%,50%) 100%);
		background: -moz-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(0,100%,50%) 100%);
		background: -ms-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(0,100%,50%) 100%);
		background: -o-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(0,100%,50%) 100%);
		background: radial-gradient(ellipse at center,  hsl(0,0%,100%) 10%, hsl(0,100%,50%) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fd0000',GradientType=1 );
	}
	.blue-led::after {
		background: hsl(248,100%,58%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(10%, hsl(0,0%,100%)), color-stop(100%, hsl(248,100%,58%)));
		background: -webkit-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(248,100%,58%) 100%);
		background: -moz-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(248,100%,58%) 100%);
		background: -ms-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(248,100%,58%) 100%);
		background: -o-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(248,100%,58%) 100%);
		background: radial-gradient(ellipse at center,  hsl(0,0%,100%) 10%, hsl(248,100%,58%) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#462aff',GradientType=1 );
	}
	.yellow-led::after {
		background: hsl(54,100%,64%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(10%, hsl(0,0%,100%)), color-stop(100%, hsl(54,100%,64%)));
		background: -webkit-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(54,100%,64%) 100%);
		background: -moz-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(54,100%,64%) 100%);
		background: -ms-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(54,100%,64%) 100%);
		background: -o-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(54,100%,64%) 100%);
		background: radial-gradient(ellipse at center,  hsl(0,0%,100%) 10%, hsl(54,100%,64%) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffee48',GradientType=1 );
	}
	.purple-led::after {
		background: hsl(285,100%,42%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(10%, hsl(0,0%,100%)), color-stop(100%, hsl(285,100%,42%)));
		background: -webkit-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(285,100%,42%) 100%);
		background: -moz-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(285,100%,42%) 100%);
		background: -ms-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(285,100%,42%) 100%);
		background: -o-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(285,100%,42%) 100%);
		background: radial-gradient(ellipse at center,  hsl(0,0%,100%) 10%, hsl(285,100%,42%) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a000d5',GradientType=1 );
	}
	.orange-led::after {
		background: hsl(21,100%,53%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(10%, hsl(0,0%,100%)), color-stop(100%, hsl(21,100%,53%)));
		background: -webkit-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(21,100%,53%) 100%);
		background: -moz-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(21,100%,53%) 100%);
		background: -ms-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(21,100%,53%) 100%);
		background: -o-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(21,100%,53%) 100%);
		background: radial-gradient(ellipse at center,  hsl(0,0%,100%) 10%, hsl(21,100%,53%) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ff610c',GradientType=1 );
	}
	.teal-led::after {
		background: hsl(184,100%,32%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(10%, hsl(0,0%,100%)), color-stop(100%, hsl(184,100%,32%)));
		background: -webkit-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(184,100%,32%) 100%);
		background: -moz-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(184,100%,32%) 100%);
		background: -ms-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(184,100%,32%) 100%);
		background: -o-radial-gradient(center, ellipse cover, hsl(0,0%,100%) 10%, hsl(184,100%,32%) 100%);
		background: radial-gradient(ellipse at center,  hsl(0,0%,100%) 10%, hsl(184,100%,32%) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0097a1',GradientType=1 );
	}

/*---------- Home Section ----------*/

	.hero-bg {
		/*background-image: url('../img/kraken-bg-full.svg');*/
		background-image: url('../img/cp-front-hero.jpg');
		width:  100%;
		height: 100%;
		background-position: 35% 50%;
		background-size: cover;
		background-repeat: no-repeat;
	}
	#home-section .fifty {
		float: right;
	}
	#intro {
		text-align: left;
		margin-top: 180px;
	}
	#intro h1 {
		font-family: 'melbourne bold';
		margin: 0;
		text-align: left;
	}
	#intro h4 {
		/*font-family: 'melbourne regular';*/
		max-width: 450px;
	}
	.main-cta {
		display: block;
		width: 140px;
		padding: 5px 14px;
		background-color: red;
		border-radius: 5px;
		text-align: center;
		color: hsl(0, 100%, 100%);
		background-color: hsl(191, 100%, 41%);
	}
	.main-cta:hover,
	.main-cta:active {
		background-color: hsl(210, 3%, 47%);
		color: hsl(0, 100%, 100%);
	}
	#logo-lg {
		background: url('../img/logo.svg') no-repeat;
		width: 460px;
		height: 313px;
		background-size: 100%;
		margin: 0 auto 5% auto;
		opacity: 1;
	}
	#state {
		font-family: 'melbourne light', 'helvetica neue', sans-serif;
		color: hsl(0, 0%, 20%);
		text-transform: uppercase;
		margin: 0 auto;
	}

/*---------- Colour Palette Section ----------*/

	.kraken-bg-arm-1 {
		background: url('../img/kraken-bg-arm-1.svg') no-repeat;
		background-position: center;
		background-size: cover;
	}
	.carousel-wrap {
		position: relative;
	}
	#cp-nav {
		width: 375px;
	}
	#cp-nav nav > ul > li {
		margin: 0 15px;
	}
	.cp-photos-led::before,
	.cp-photos-led::after {
		left: 25px;
	}
	.cp-overview-led::before,
	.cp-overview-led::after {
		left: 34px;
	}
	.cp-features-led::before,
	.cp-features-led::after {
		left: 30px;
	}
	.cp-colours-led::before,
	.cp-colours-led::after {
		left: 24px;
	}
	.cp-diy-led::before,
	.cp-diy-led::after {
		left: 6px;
	}
	a.cp-cta {
		text-align: center;
		position: absolute;
		top: 0px;
		right: 26px;
	}
	#colour-palette-section p.font-small {
		margin: 0 0 0 1em;
	}
	#cp-illustration {
		background: url('../img/cp-illustration.png') no-repeat;
		width: 220px;
		height: 240px;
		float: left;
		margin-left: 10%;
		background-size: 100%;
	}
	.cp-photo-front {
		background: url('../img/cp-front.png') no-repeat;
	}
	.cp-photo-front-angle {
		background: url('../img/cp-front-angle.png') no-repeat;
	}
	.cp-photo-back {
		background: url('../img/cp-back.png') no-repeat;
	}
	.cp-photo-back-angle {
		background: url('../img/cp-back-angle.png') no-repeat;
	}
	.cp-photo-left {
		background: url('../img/cp-left.png') no-repeat;
	}
	#cp-features-wrap {
		position: relative;
		width: 800px;
		margin: 0 auto;
	}
	#cp-features-wrap .cp-photo-front {
		background-size: 100%;
		width: 250px;
		height: 360px;
	}
	.cp-feature {
		width: 250px;
		position: absolute;
	}
	#cp-feature1 {
		top: 44px;
	}
	#cp-feature1::after {
		content: "";
		display: block;
		position: absolute;
		background: url('../img/cp-feature1.svg') no-repeat;
		width: 252px;
		height: 58px;
		top: -5px;
		left: 224px;
	}
	#cp-feature2 {
		top: 100px;
		left: 570px;
	}
	#cp-feature2::after {
		content: "";
		display: block;
		position: absolute;
		background: url('../img/cp-feature2.svg') no-repeat;
		width: 253px;
		height: 70px;
		top: -5px;
		left: -261px;
	}
	#cp-feature3 {
		top: 230px;
	}
	#cp-feature3::after {
		content: "";
		display: block;
		position: absolute;
		background: url('../img/cp-feature3.svg') no-repeat;
		width: 253px;
		height: 56px;
		top: -5px;
		left: 224px;
	}
	#cp-feature4 {
		top: 292px;
		left: 570px;
	}
	#cp-feature4::after {
		content: "";
		display: block;
		position: absolute;
		background: url('../img/cp-feature4.svg') no-repeat;
		width: 81px;
		height: 27px;
		top: -5px;
		left: -90px;
	}
	.cp-feature > h4,
	.cp-feature > p {
		font-size: .7em;
	}
	.cp-feature > h4 {
		color: hsl(347, 72%, 44%);
		margin-top: 0;
		margin-bottom: .3em;
	}
	.cp-feature > p {
		margin-top: 0;
	}
	#cp-diy h3 {
		color: hsl(210, 3%, 47%);
	}
	.diy-icon {
		height: 150px;
		margin-top: 0px;
	}
	#diy-icon {
		background: url('../img/diy-icon.svg') no-repeat;
		/*background-size: 50%;*/
		background-position: center;
	}
	#design-icon {
		background: url('../img/design-icon.svg') no-repeat;
		/*background-size: 50%;*/
		background-position: center;
	}
	#distribute-icon {
		background: url('../img/distribute-icon.svg') no-repeat;
		/*background-size: 50%;*/
		background-position: center;
	}
	#cp-diy .third > p {
		text-align: center;
		font-weight: bold;
		margin-top: 0;
	}

/*---------- Colours Section ----------*/

	.wood-bg {
		background-image: url('../img/wood-bg.jpg');
		background-size: cover;
		background-position: center 72%;
		background-repeat: no-repeat;
	}
	#colours-nav {
		width: 466px;
	}
	#colours-nav nav > ul > li {
		margin: 0 18px;
	}
	.colours-bm-led::before,
	.colours-bm-led::after {
		left: 52px;
	}
	.colours-dtk-led::before,
	.colours-dtk-led::after {
		left: 74px;
	}
	.colours-tp-led::before,
	.colours-tp-led::after {
		left: 32px;
	}
	.bm-product {
		font-size: 75%;
		position: relative;
	}
	.bm-product > div {
		/*display: inline-block;*/
	}

	/*---------- bmm colours styles ----------*/

		#colours-bm .row > p {
			/*margin: 0 auto 1.5em auto;*/
			margin: 0 0 1.5em 0;
			/*text-align: center;*/
			width: 90%;
		}
		#colours-bm p {
			margin-top: 0;
			margin-bottom: 15px;
		}
		#colours-bm .row .fifty p:first-child {
			margin-bottom: 0px;
		}
		.bmm-item {
			height: 160px;
		}
		.row .sixty > p > span{
			margin-left: 10%;
		}
		.bmm-item img {
			max-width: 100%;
			height: auto;
		}
		/*#woof-pic {
			background: url('../img/bmm-woof-front.png') no-repeat;
			background-size: cover;
			background-position: center;
			padding-top: 56.25%;
		}
		#tweet-pic {
			background: url('../img/bmm-tweet-front.png') no-repeat;
			background-size: cover;
			background-position: center;
			padding-top: 56.25%;
		}
		#adptr-pic {
			background: url('../img/bmm-adptr-front.png') no-repeat;
			background-size: cover;
			background-position: center;
			padding-top: 56.25%;
		}
		#pcb-pic {
			background: url('../img/bmm-pcb.png') no-repeat;
			background-size: cover;
			background-position: center;
			padding-top: 56.25%;
		}*/
		.bmm-item p.modal-open {
			font-size: .65em;
			width: 105px;
			margin-top: 3px !important;
		}

	/*---------- designer's toolkit styles ----------*/

		#tabs {
			/*width: 80%;*/
			max-width: 800px;
			margin: 0 auto;
			position: relative;
			padding-left: 5%;
		}
		#tabs > div > ul {
			font-size: .85em;
		}
		#tabs > div ul > li {
			margin: 4px 0px;
		}
		#tabs > ul {
			background-color:hsla(209, 18%, 30%, 0.68);
			box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.7);
			border-radius: 5px;
			padding: .2em;
			margin-top: 0;
		}
		#tabs > ul > li {
			display: inline-block;
			border-radius: 3px;
			margin: 4px 0px;
			font-size: .8em;
		}
		#tabs > ul > li > a {
			padding: 0 28px;
		}
		.ui-tabs-active {
			transition: color 0.7s, background-color 0.7s;
		}
		.ui-tabs-active a {
			color: hsl(0, 0%, 90%);
		}
		.ui-state-active a,
		.ui-state-hover a {
			outline: none;
		}
		#tabs p {
			/*font-size: .9em;*/
		}
		#tabs-4 > div.cf > div:nth-child(1) > p {
			margin-top: 0;
			margin-bottom: 0;
		}
		#tabs-1 ul {
			width: 100%;
		}
		#tabs-3 ol {
			margin: 0 70px 0 10%;
			font-size: .68em;
		}
		.dimensions {
			width: 450px;
			left: 40%;
			top: 36%;
		}
		.pinout {
			width: 450px;
			top: 195px;
		}
		.connector {
			width: 300px;
			top: 130px;
			left: 380px;
		}
		.colouring {
			width: 320px;
			/*top: 290px;*/
		}
		#tabs-1 img,
		#tabs-2 img,
		#tabs-3 img,
		#tabs-4 img,
		#tabs-5 img {
			max-width: 100%;
			height: auto;
			display: block;
			margin: auto;
		}
		#tabs-4 img {
			/*padding: 0 20px;*/
		}
		#tabs-4 > p:nth-child(2) {
			width: 360px;
			/*float: left;*/
			padding-right: 30px;
		}
		#toolkit-dl-btn {
			position: absolute;
			right: 28px;
			top: 22px;
			padding: 0px 7px 5px 0px;
			opacity: 0;
			z-index: 1;
		}
		.fa-download::after {
			content: "\f019";
			position: relative;
			top: 1px;
			left: 13px;
			color: hsl(210, 3%, 47%);
		}
		#dtk-notes-link {
			color: hsl(191, 100%, 41%);
			-webkit-transition: color 0.3s;
			-moz-transition: color 0.3s;
			transition: color 0.3s;
			cursor: pointer;
			width: auto;
		}
		#dtk-notes-link:active,
		#dtk-notes-link:hover {
			color: hsl(198, 50%, 85%);
		}
		#pcb-img {
			background-image: url('../img/pcb-assembled.png');
			width: 200px;
			height: 100px;
			background-size: 100%;
			background-repeat: no-repeat;
			border: 1px solid #333;
			border-radius: 5px;
			background-color: hsla(0, 0%, 0%, .4);
		}

	/*---------- 3rd party styles ----------*/

		#logo-diyre {
			background: url('../img/logo-diyre.svg') no-repeat;
			background-size: 80%;
			background-position: center;
		}
		#logo-wmd {
			background: url('../img/logo-wmd.svg') no-repeat;
			background-size: 80%;
			background-position: center;
		}
		#logo-louderthanliftoff {
			background: url('../img/logo-louderthanliftoff.svg') no-repeat;
			background-size: 100%;
			background-position: center;
		}
		#logo-tb {
			background: url('../img/logo-tb.svg') no-repeat;
			background-size: 95%;
			background-position: center;
		}
		#logo-eisen {
			background: url('../img/logo-eisen.svg') no-repeat;
			background-size: 95%;
			background-position: center;
		}
		.vend-logo {
			height: 110px;
		}
		.vend-logo a {
			display: block;
			width: 100%;
			height: 100%;
		}
		.vend-logo a:hover {
			background-color: hsla(0, 0%, 80%, 0.2);
		}

/*---------- Cases Section ----------*/

	.kraken-bg-arm-2 {
		background: url('../img/kraken-bg-arm-2.svg') no-repeat;
		background-position: center;
		background-size: cover;
	}
	#cases-nav {
		width: 300px;
	}
	#cases-nav nav > ul > li {
		margin: 0 18px;
	}
	.cases-overview-led::before,
	.cases-overview-led::after {
		left: 34px;
	}
	.cases-photos-led::before,
	.cases-photos-led::after {
		left: 24px;
	}
	.cases-all {
		background: url('../img/cases-all.png') no-repeat;
	}
	.cases-6u-open-side {
		background: url('../img/cases-6u-open-side.png') no-repeat;
	}
	.cases-6u-closed-side {
		background: url('../img/cases-6u-closed-side.png') no-repeat;
	}
	.cases-6u-open {
		background: url('../img/cases-6u-open.png') no-repeat;
	}
	.cases-3u-open-side {
		background: url('../img/cases-3u-open-side.png') no-repeat;
	}

/*---------- Cables Section ----------*/

	.kraken-bg-face {
		background: url('../img/kraken-bg-face.svg') no-repeat;
		/*background-position: center;*/
		background-size: cover;
	}
	#cables-nav {
		width: 300px;
	}
	#cables-nav nav > ul > li {
		margin: 0 18px;
	}
	.cables-overview-led::before,
	.cables-overview-led::after {
		left: 34px;
	}
	.cables-photos-led::before,
	.cables-photos-led::after {
		left: 24px;
	}
	#cables-ov .row > h4 {
		margin-top: 0;
		margin-bottom: .2em;
		color: hsl(347, 72%, 44%);
	}
	#cables-ov .row > h4 + p {
		margin-top: 0;
	}
	.cables-1 {
		background: url('../img/cables-4.png') no-repeat;
	}
	.cables-2 {
		background: url('../img/cables-3.png') no-repeat;
	}
	.cables-3 {
		background: url('../img/mult-scatter.jpg') no-repeat;
	}
	.cables-4 {
		background: url('../img/mult-patched.jpg') no-repeat;
	}



/*------------ Dealers Section ----------*/

	#dealers-section > div > div > h2 {
		margin-bottom: 115px;
	}
	#dealers-section h4 {
		margin-bottom: 0;
	}
	#dealers-section ul {
		margin-top: 10px;
	}
	#north-america {
		background: url('../img/map-na.svg') no-repeat;
		background-position: center;
		background-size: contain;
		min-height: 358px;
	}
	#north-america h4:nth-child(1) {
		margin-top: 0;
	}
	#europe {
		background: url('../img/map-eu.svg') no-repeat;
		background-position: center;
		background-size: contain;
		min-height: 358px;
	}
	#europe > p {
		margin-bottom: .6em;
	}
	#europe > a > span::after {
		position: static;
		font-size: .8em;
		color: hsl(210, 3%, 47%);
	}
	#europe span::after {
		margin-right: 10px;
	}
	#europe p:nth-child(1) {
		margin-top: 0;
	}
	#europe > p:nth-child(3) {
		margin-top: 2.3em;
	}

/*---------- Modals ----------*/

	.modal {
		width: 60%;
		margin-left: 75px;
		background-color: hsl(150, 1%, 26%);
		color: hsl(210, 3%, 61%);
		padding: 1em;
		border-radius: 5px;
		z-index: 1;
		position: fixed;
		opacity: 0;
	}
	.modal ul {
		margin: 0;
	}
	.modal li {
		margin: 10px 0;
	}
	.modal h4 {
		margin-top: 0;
		margin-bottom: .5em;
	}
	.modal h4 span {
		color: hsl(210, 3%, 87%);
	}
	p.modal-open {
		width: 120px;
		margin: 0 auto;
		-webkit-transition: color 0.3s;
		-moz-transition: color 0.3s;
		transition: color 0.3s;
	}
	p.modal-open:hover {
		cursor: pointer;
		color: hsl(191, 100%, 41%);
	}
	#dtk-dimensions {
		background: url(../img/dtk-dimensions.svg) no-repeat;
		width: 100%;
		background-size: 100%;
		height: 380px;
	}
	#dtk-pinouts {
		background: url(../img/dtk-pinouts.svg) no-repeat;
		width: 100%;
		background-size: 100%;
		height: 310px;
	}
	#dtk-connectors {
		background: url(../img/dtk-connectors.svg) no-repeat;
		width: 100%;
		background-size: 100%;
		height: 330px;
	}
	#dtk-colouring {
		background: url(../img/dtk-colouring.svg) no-repeat;
		width: 100%;
		background-size: 100%;
		height: 330px;
	}
	#woof-front-modal-pic,
	#woof-back-modal-pic,
	#tweet-front-modal-pic,
	#tweet-back-modal-pic,
	#adptr-front-modal-pic,
	#adptr-back-modal-pic,
	#pcb-modal-pic,
	#pcb-kit-modal-pic {
		display: block;
		margin: 0 auto;
		height: auto;
		width: 60%;
		max-width: 100%;
	}

.fp-section.fp-table, .fp-slide.fp-table {
	overflow: hidden;
}