/* ----------------------------------------------------------------
Variables
---------------------------------------------------------------- */

:root { --brand-colour: #00b0b9; }

/*
00aec7
00bfb3
*/



/* ----------------------------------------------------------------
Main Container
---------------------------------------------------------------- */

.main .container {
	display: flex;
	flex-direction: column;
	padding-top: 0;
	padding-bottom: 0;
}



/* ----------------------------------------------------------------
Nav Sub
---------------------------------------------------------------- */

.nav-sub  {
	padding-top: 1.5rem;
}

.nav-sub .nav-list {
	display: block;
	margin: 0 -.125rem;
	padding: 0;
	list-style: none;
	font-size: 0;
	text-align: center;
}

.nav-sub .nav-list + .nav-list {
	position: relative;
	margin: 1.25rem 0 0 0;
	height: calc(2.875rem + 2px);
	overflow-y: hidden;
}

.nav-sub .nav-list-item {
	display: inline-block;
	margin: 0 .125rem .25rem .125rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid #212322;
	border-right: 1px solid #212322;
	border-bottom: 1px solid #212322;
	border-left: 1px solid #212322;
	line-height: 1;
	border-radius: 999px;
}

.nav-sub  .nav-list + .nav-list .nav-list-item {
	border-top: 0;
	border-right: 0;
	border-left: 0;
	display: block;
	margin: 0;
	border-radius: 0;
}

.nav-sub  .nav-list + .nav-list .nav-list-item.nav-active {
	position: absolute;
	left: calc(.5rem + 1px);
	top: calc(.5rem + 1px);
	border-bottom: 0;
}

.nav-sub .nav-list-link {
	display: block;
	color: #212322;
	white-space: nowrap;
	text-align: center;
	line-height: 1;
	padding: 1rem 1.5rem;
	font-size: .875rem;
	border-radius: 999px;
}

.nav-sub  .nav-list + .nav-list .nav-list-link {
	border-radius: 0;
	text-align: left;
	padding: .5rem .75rem;
}

.nav-sub .nav-list-link:hover {
	color: #212322;
	background-color: #dfe5e6;
	border-radius: 999px;
}

.nav-sub .nav-active .nav-list-link {
	color: #fff;
	background-color: #212322;
	border-radius: 999px;
}

.nav-sub .nav-list + .nav-list .nav-list-link:hover {
	border-radius: 0;
}

.nav-sub .nav-list + .nav-list .nav-active .nav-list-link,
.nav-sub .nav-list + .nav-list .nav-active .nav-list-link:hover {
	display: inline-block;
	border-radius: 999px;
}

.nav-sub .nav-text {
	display: block;
	line-height: 1;
}

.nav-sub .nav-list + .nav-list.dropdown-open {
	height: auto;
	overflow-y: visible;
}

.nav-sub .nav-dropdown {
	position: relative;
	border: 1px solid #212322;
	border-radius: 999px;
	margin: 0;
	padding-top: 0;
	padding-right: calc(2.875rem + 1px);
	padding-bottom: 0;
	padding-left: 0;
	height: calc(2.875rem + 2px);
}

.nav-sub .dropdown-click {
	position: absolute;
	right: 0;
	top: 0;
	border-left: 1px solid #212322;
	display: block;
	height: 2.875rem;
	width: calc(2.875rem + 1px);
}

.nav-sub .nav-dropdown .nav-icon {
	display: block;
	padding: 1rem;
}

.nav-sub .nav-dropdown .icon-open,
.nav-sub .nav-dropdown .icon-close {
	vertical-align: top;
	width: .875rem;
	height: .875rem;
	color: #212322;
	fill: #212322;
}

.nav-sub .nav-dropdown .icon-open {
	display: inline-block;
}

.nav-sub .nav-dropdown .icon-close,
.nav-sub .dropdown-open .nav-dropdown .icon-open {
	display: none;
}

.nav-sub .dropdown-open .nav-dropdown .icon-close {
	display: inline-block;
}



/* ----------------------------------------------------------------
Article
---------------------------------------------------------------- */

.article {
	padding-top: 3rem;
}

.nav-sub + .article {
	padding-top: 2.75rem;
}

.article h1:first-child {
	margin-top: 0;
}

.article a {
	color: var(--brand-colour);
}

.article a:hover {
	text-decoration: underline;
	color: var(--brand-colour);
}

.article hr {
	border: none;
	height: 2px;
	background: #212322;
	margin: calc(3rem - 1px) 0;
}

.article img {
	display: inline-block;
	vertical-align: top;
}

.article h3 {
	line-height: 1.35;
}



/* ----------------------------------------------------------------
Flex
---------------------------------------------------------------- */

.flex {
	display: flex;
	flex-direction: column;
	margin-left: -1.5rem;
	margin-right: -1.5rem;
}

.flex > div {
	flex: 1 1 0;
	padding-top: .75rem;
	padding-right: 1.5rem; 
	padding-bottom: .75rem;
	padding-left: 1.5rem;
}

.flex:not(.project-data) > div:first-child {
	padding-top: 1.5rem;
}

.flex:not(.project-data) > div:last-child {
	padding-bottom: 1.5rem;
}

.flex > div.flex-auto { flex: 1 1 auto; }
.flex > div.flex-0 { flex: 1 1 0; }
.flex-1 { min-width: 8.3333333%; }
.flex-2 { min-width: 8.6666667%; }
.flex-3 { min-width: 25%; }
.flex-4 { min-width: 33.3333333%; }
.flex-5 { min-width: 41.6666667%; }
.flex-6 { min-width: 50%; }
.flex-7 { min-width: 58.3333333%; }
.flex-8 { min-width: 66.6666667%; }
.flex-9 { min-width: 75%; }
.flex-10 { min-width: 83.3333333%; }
.flex-11 { min-width: 91.6666667%; }
.flex-12 { min-width: 100%; }

.flex h1:first-child,
.flex h2:first-child,
.flex h3:first-child,
.flex h4:first-child,
.flex h5:first-child,
.flex h6:first-child { 
	margin-top: 0;
}

.flex p:first-child { 
	margin-top: 0;
}

.flex p:last-child { 
	margin-bottom: 0;
}


/* ----------------------------------------------------------------
Project Data
---------------------------------------------------------------- */

.project-data {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.project-data > div {
	padding-top: 0;
	padding-bottom: 0;
}

.project-data span {
	display: inline-block;
}

.project-data .label {
	min-width: 120px;
}
.project-data div:last-child {
	display: none;
}



/* ----------------------------------------------------------------
Screenshot
---------------------------------------------------------------- */

.screenshot {
	margin: 3rem 0;
	position: relative;
}

.screenshot.zoom {
	margin: 0;
	padding: 1.5rem;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

.screenshot-image {
	text-align: center;
}

.zoom .screenshot-image {
	overflow: auto;
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	bottom: 1.5rem;
	left: 1.5rem;
}

.screenshot-toggle {
	position: absolute;
	right: 0;
	top: 0;
}

.zoom .screenshot-toggle {
	right: 1.5rem;
	top: 1.5rem;
}

.article a.screenshot-click,
.article a.screenshot-click:hover {
	display: inline-block;
	vertical-align: top;
	text-transform: uppercase;
	margin: 0;
	padding: .5rem .75rem;
	color: #fff;
	background-color: #212322;
	text-decoration: none;
	font-size: 1rem;
	line-height: 1;
}

.screenshot-icon {
	display: inline-block;
	height: 1rem;
	width: 1.25rem;
	vertical-align: top;
	line-height: 1;
}

.screenshot-icon svg {
	height: 1rem;
	max-width: 1.25rem;
	color: #fff;
	fill: #fff;
}

.screenshot-click .screenshot-text,
.screenshot-click .screenshot-close {
	vertical-align: top;
	line-height: 1;
}

.screenshot-click .icon-open,
.screenshot-click .screenshot-text {
	display: inline-block;
}

.screenshot-click .icon-close,
.screenshot-click .screenshot-close,
.zoom .screenshot-click .icon-open,
.zoom .screenshot-click .screenshot-text {
	display: none;
}

.zoom .screenshot-click .icon-close,
.zoom .screenshot-click .screenshot-close {
	display: inline-block;
}

.ssw {
	display: inline-block;
}

.screenshot:not(.zoom) div.ssw {
	width: 100% !important;
	height: auto !important;
}

.sst, .ssr, .ssb, .ssl {
	position: absolute;
	background-color: #dfe5e6;
}

.sst { top: 0; left: 0; right: 0; height: 1px; }
.ssr { top: 0; right: 0; bottom: 0; width: 1px; }
.ssb { bottom: 0; left: 0; right: 0; height: 1px; }
.ssl { top: 0; left: 0; bottom: 0; width: 1px; }

.zoom .sst { top: 1.5rem; left: 1.5rem; right: 1.5rem; }
.zoom .ssr { top: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
.zoom .ssb { bottom: 1.5rem; left: 1.5rem; right: 1.5rem; }
.zoom .ssl { top: 1.5rem; left: 1.5rem; bottom: 1.5rem; }



/* ----------------------------------------------------------------
CTA
---------------------------------------------------------------- */

.cta {
	margin-top: 3rem;
	margin-left: -1.5rem;
	margin-right: -1.5rem;
	padding-top: 2.5rem;
	padding-right: 1.5rem;
	padding-bottom: 3rem;
	padding-left: 1.5rem;
	text-align: center;
	background-color: #dfe5e6;
}

.cta h2,
.cta h3 {
	margin: 0 0 1.5rem 0;
	text-align: center;
}

.cta a {
	padding: 1.5rem 2.5rem;
	line-height: 1;
	display: inline-block;
	vertical-align: top;
	border-radius: 999px;
	color: #fff;
	background-color: var(--brand-colour);
	cursor: pointer;
	-webkit-box-shadow: 0 0 1rem 0 rgba(255,255,255,0.5); 
	box-shadow: 0 0 1rem 0 rgba(255,255,255,0.5);
}

.cta a:hover {
	color: var(--brand-colour);
	background-color: #212322;
	text-decoration: none;
}

.enquiry-open .cta a,
.enquiry-open .cta a:hover {
	background-color: #fff;
	color: #dfe5e6;
	cursor: default;
}

.cta-message {
	padding: 1.5rem 2.5rem;
	line-height: 1;
	display: none;
	vertical-align: top;
	border-radius: 999px;
	color: #212322;
	background-color: #dfe5e6;
}



/* ----------------------------------------------------------------
Service Plans
---------------------------------------------------------------- */

.service-plan {
	border-right: 2px solid #212322;
	border-bottom: 2px solid #212322;
	border-left: 2px solid #212322;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

h3.service-plan-title {
	margin: 0;
	padding: 1.5rem;
	background: #212322;
	color: #fff;
	line-height: 1;
}

.service-plan-content {
	padding: 1.5rem;
}

.service-plan-content p {
	font-size: .875em;
	margin-top: 0;
}

.service-plan-content ul {
	margin-top: 0;
	margin-bottom: 0;
	font-size: .875em;
}

.service-plan-content h3 {
	margin: 1.5rem 0 0 0;
}



/* ----------------------------------------------------------------
Pagination
---------------------------------------------------------------- */

.pagination {
	display: flex;
}

.pagination a {
	line-height: 1;
}

.pagination-next,
.pagination-prev {
	padding-top: 3rem;
	padding-bottom: 3rem;
	flex: 1 1 0;
}

.pagination-prev {
	justify-content: flex-start;
	text-align: left;
}

.pagination-next {
	justify-content: flex-end;
	text-align: right;
}



/* ----------------------------------------------------------------
Swatches
---------------------------------------------------------------- */

.swatches {
	display: flex;
	margin: 1.5rem -.25rem;
}

.swatch {
	flex: 1 1 0;
	font-size: 0;
	padding: 0 .25rem;
}

.swatches-2 .swatch {
	min-width: 50%;
	max-width: 50%;
}

.swatches-3 .swatch {
	min-width: 33.333333%;
	max-width: 33.333333%;
}

.swatches-4 .swatch {
	min-width: 25%;
	max-width: 25%;
}

.swatches-3 {
	margin-bottom: .5rem;
}

.swatches-3 + .swatches-3 {
	margin-top: .5rem;
	margin-bottom: 1.5rem;
}

.swatch-block {
	display: inline-block;
}

.swatch-white .swatch-block {
	border: 1px solid rgba(0,0,0,0.15);
	background-color: #fff;
}

.swatch-black .swatch-block {
	border: 1px solid #212322;
	background-color: #212322;
}

.swatch-blue .swatch-block {
	border: 1px solid var(--brand-colour);
	background-color: var(--brand-colour);
}

.swatch-grey .swatch-block {
	border: 1px solid #dfe5e6;
	background-color: #dfe5e6;
}

.swatch-image {
	padding: 1rem;
}

.swatch-icon {
	padding: 20%;
	border-radius: .5rem;
}

.swatch-color {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	min-height: 123px;
	border-radius: .5rem;
}

.swatch-details {
	padding: .5rem 0 0 0;
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
}




/* ----------------------------------------------------------------
Tabs
---------------------------------------------------------------- */

.tab {
	border-bottom: 1px solid #212322;
}

.tab-title {
	display: flex;
	padding: .5rem 0;
	align-items: center;
	cursor: pointer;
}

.tab-title h3 {
	display: flex;
	margin: 0;
	flex: 1 1 0;
	font-size: 1rem;
}

.tab-title .icon {
	display: flex;
	flex: 0 1 0;
	width: 1.5rem;
	height: 1.5rem;
	min-width: 1.5rem;
	justify-content: center;
	border-radius: 999px;
	background-color: #dfe5e6;
	padding: .375rem;
}

.tab-title .icon svg {
	color: #212322;
	fill: #212322;
}

.tab-title .icon-close {
	display: none;
}

.tab-active .tab-title .icon-close {
	display: inline-block;
}

.tab-active .tab-title .icon-open {
	display: none;
}

.tab-content {
	height: 0;
	overflow: hidden;
}

.tab-active .tab-content {
	height: auto;
}





/* ----------------------------------------------------------------
Other
---------------------------------------------------------------- */

sup { 
	vertical-align: top;
	font-size: .75em;
	display: inline-block;
	padding-top: .375em;
	line-height: 1;
}

h1 sup,
h2 sup,
h3 sup { 
	font-size: .6666667em;
	padding-top: .7em;
}


.quote {
	margin: 1.5rem 0;
	border-left: .25rem solid #212322;
	padding: 0 0 0 1.25rem;
	line-height: 1.5;
	font-style: italic;
}

.button a {
	display: inline-block;
	padding: .75rem 1.5rem;
	border-radius: 999px;
	background: var(--brand-colour);
	color: #fff;
	font-size: 1rem;
	margin-right: .75rem;
}

.button a:hover {
	background: #212322;
	color: #fff;
	text-decoration: none;
}

.button span {
	display: inline-block;
	padding-top: .75rem;
	font-size: 1rem;
	font-style: italic;
}

.list {
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	list-style: none;
	border-top: 1px solid #dfe5e6;
}

.list li {
	padding: .5rem 0;
	margin: 0;
	list-style: none;
	border-bottom: 1px solid #dfe5e6;
	display: block;
}

.icon {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
}

table {
	margin: 0;
	padding: 0;
	border-top: 1px solid #212322;
	border-left: 1px solid #212322;
	border-right: 0;
	border-bottom: 0;
	width: 100%;
	border-collapse: collapse;
}

table th {
	background: #212322;
	color: #fff;
	margin: 0;
	padding: .5rem;
	font-size: 1rem;
	text-align: left;
}

table td {
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #212322;
	border-bottom: 1px solid #212322;
	margin: 0;
	padding: .5rem;
	font-size: 1rem;
	text-align: left;
}

table .icon  {
	margin-top: .25rem;
}

table.custom-field {
	border: 0;
}

table.custom-field th {
	background: none;
	color: #212322;
	border-bottom: 1px solid #212322;
	padding: .5rem 0;
}

table.custom-field td {
	border-left: 1px solid #212322;
}

table.custom-field tr:nth-child(3) td {
	border: 0;
}



/* ----------------------------------------------------------------
CASE STUDIES
---------------------------------------------------------------- */

.page-case-studies.page-parent .article,
.page-bigcommerce-case-studies.page-parent .article,
.page-branding-case-studies.page-parent .article,
.page-wordpress-case-studies.page-parent .article {
	text-align: center;
	padding-bottom: 1.5rem;
}



/* ----------------------------------------------------------------
CONTACT
---------------------------------------------------------------- */

.page-contact .article {
	padding-bottom: 3rem;
}



/* ----------------------------------------------------------------
ERROR
---------------------------------------------------------------- */

.page-error .article {
	text-align: center;
	padding-bottom: 3rem;
}



/* ----------------------------------------------------------------
FEEDBACK
---------------------------------------------------------------- */

.page-feedback.page-positive .article,
.page-feedback.page-negative .article {
	text-align: center;
	padding-bottom: 3rem;
}

.page-feedback.page-positive .article h3,
.page-feedback.page-negative .article h3 {
	margin: 0;
}



/* ----------------------------------------------------------------
HOME
---------------------------------------------------------------- */

.page-home .article {
	text-align: center;
}

.page-home .article h2.font-body {
	margin: 0;
	font-size: 1.5rem;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	line-height: 1.5;
}



/* ----------------------------------------------------------------
PARTNER
---------------------------------------------------------------- */

.partner {
	font-size: 16px;
}

.partner a {
	display: block;
}

.partner a:hover img {
	opacity: 0.75;
}

.partner-logo {
	border: 1px solid rgba(0,0,0,0.15);
	display: block;
	padding: .75rem 1.5rem;
}

.partner p {
	margin: 0;
	padding: .75rem 0;
}


/* ----------------------------------------------------------------
MONTHLY ENHANCEMENT
---------------------------------------------------------------- */

.list-enhancement-bc li {
	font-size: 14px;
}

.list-enhancement-aylis li {
	font-size: 16px;
}



/* ----------------------------------------------------------------
< 480
---------------------------------------------------------------- */

@media (max-width:480px) {
	
	.swatches-colors {
		flex-direction: column;
	}

	.swatches-colors .swatch {
		min-width: 100%;
		max-width: 100%;
		display: flex;
		margin-bottom: .5rem;
	}

	.swatches-colors .swatch-block,
	.swatches-colors .swatch-details {
		width: 50%;
	}

	.swatches-colors .swatch-details {
		padding-left: 1rem;
	}

}


/* ----------------------------------------------------------------
481 > 
---------------------------------------------------------------- */

@media (min-width:481px) {
	
	.cta a {
		font-size: 1.25rem;
		border-radius: 999px;
	}
	
	.swatch-image {
		padding: 2rem;
	}

}



/* ----------------------------------------------------------------
768 >
---------------------------------------------------------------- */

@media (min-width:768px) {
	
	.nav-sub .nav-list + .nav-list {
		margin: 1.25rem -.125rem 0 -.125rem;
		height: auto;
		overflow-y: visible;
	}

	.nav-sub  .nav-list + .nav-list .nav-list-item {
		display: inline-block;
		margin: 0 .125rem .25rem .125rem;
		border-top: 1px solid #212322;
		border-right: 1px solid #212322;
		border-left: 1px solid #212322;
		border-radius: 999px;
	}
	
	.nav-sub  .nav-list + .nav-list .nav-list-item.nav-active {
		position: static;
		border-bottom: 1px solid #212322;
	}

	.nav-sub  .nav-list + .nav-list .nav-list-link {
		text-align: center;
		border-radius: 999px;
	}

	.nav-sub .nav-list + .nav-list .nav-list-link:hover,
	.nav-sub .nav-list + .nav-list .nav-active .nav-list-link {
		border-radius: 999px;
	}
	
	.nav-sub .nav-dropdown {
		display: none;
	}
	
	.flex {
		flex-direction: row;
	}
	
	.flex:not(.project-data) > div {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	
	.project-data span {
		display: block;
	}
	
}



/* ----------------------------------------------------------------
1024 >
---------------------------------------------------------------- */

@media (min-width:1024px) {

	.nav-sub {
		padding-top: 3rem;
	}
	
	.article {
		font-size: 1.25rem;
	}
	
	.article .list-enhancement-bc li {
		font-size: 14px;
	}

	.article .list-enhancement-aylis li {
		font-size: 16px;
	}
	
	.quote {
		padding: 0 0 0 2.75rem;
	}
	
	body.nav-open .flex,
	body.enquiry-open .flex,
	.nav-sub + .article .flex {
		flex-direction: column;
	}
	
	body.nav-open .flex:not(.project-data) > div,
	body.enquiry-open .flex:not(.project-data) > div,
	.nav-sub + .article .flex:not(.project-data) > div {
		padding-top: .75rem;
		padding-bottom: .75rem;
	}
	
	body.nav-open .flex:not(.project-data) > div:first-child,
	body.enquiry-open .flex:not(.project-data) > div:first-child,
	.nav-sub + .article .flex:not(.project-data) > div:first-child {
		padding-top: 1.5rem;
	}
	
	body.nav-open .flex:not(.project-data) > div:last-child,
	body.enquiry-open .flex:not(.project-data) > div:last-child,
	.nav-sub + .article .flex:not(.project-data) > div:last-child {
		padding-bottom: 1.5rem;
	}
	
	body.nav-open .project-data span,
	body.enquiry-open .project-data span,
	.nav-sub + .article .project-data span {
		display: inline-block;
	}
	
	.screenshot.zoom {
		padding: 3rem;
	}
	
	.zoom .screenshot-image {
		top: 3rem;
		right: 3rem;
		bottom: 3rem;
		left: 3rem;
	}
	
	.zoom .sst { top: 3rem; left: 3rem; right: 3rem; }
	.zoom .ssr { top: 3rem; right: 3rem; bottom: 3rem; }
	.zoom .ssb { bottom: 3rem; left: 3rem; right: 3rem; }
	.zoom .ssl { top: 3rem; left: 3rem; bottom: 3rem; }
	
	.screenshot.zoom .screenshot-toggle {
		right: 3rem;
		top: 3rem;
	}
	
	.cta {
		padding-left: 3rem;
		padding-right: 3rem;
		margin-left: -3rem;
		margin-right: -3rem;
	}
	
	body:not(.nav-open):not(.enquiry-open) .swatch-color,
	div:not(.nav-sub) + .article .swatch-color {
		width: 50%;
	}

	body:not(.nav-open):not(.enquiry-open) .swatch-details,
	div:not(.nav-sub) + .article .swatch-details {
		padding: 0 0 0 1.5rem;
		min-height: 123px;
		width: 50%;
	}
	
	.swatch-image {
		padding: 3rem;
	}
	
}



/* ----------------------------------------------------------------
1024 > 1919
---------------------------------------------------------------- */

@media (min-width:1024px) and (max-width:1919px) {
	
	body:not(.nav-open):not(.enquiry-open) .main .container {
		flex-direction: row;
	}
	
	body:not(.nav-open):not(.enquiry-open) .nav-sub {
		flex: 0 1 0;
		padding-right: 3rem;
		padding-bottom: 3rem;
		-webkit-box-shadow: 1px 0px 0px 0px rgba(0,0,0,0.15); 
		box-shadow: 1px 0px 0px 0px rgba(0,0,0,0.15);
	}

	body:not(.nav-open):not(.enquiry-open) .article {
		flex: 1 1 0;
	}
	
	body:not(.nav-open):not(.enquiry-open) .nav-sub + .article {
		padding-top: 3rem;
		padding-left: 3rem;
	}
	
	body:not(.nav-open):not(.enquiry-open) .nav-sub .nav-list {
		display: block;
		margin: 0;
	}
	
	body:not(.nav-open):not(.enquiry-open) .nav-sub .nav-list + .nav-list {
		margin: 3rem 0 0 0;
	}
	
	body:not(.nav-open):not(.enquiry-open) .nav-sub .nav-list-item,
	body:not(.nav-open):not(.enquiry-open) .nav-sub  .nav-list + .nav-list .nav-list-item, 
	body:not(.nav-open):not(.enquiry-open) .nav-sub  .nav-list + .nav-list .nav-list-item.nav-active {
		display: block;
		margin: 0;
		border: 0;
	}
	
	body:not(.nav-open):not(.enquiry-open) .nav-sub .nav-list-link {
		text-align: left;
		min-width: calc(35vw - 6rem);
		font-size: 18px;
		padding: 1rem 0;
	}
	
	body:not(.nav-open):not(.enquiry-open) .nav-sub .nav-list + .nav-list .nav-list-link {
		padding: .5rem 0;
	}
	
	body:not(.nav-open):not(.enquiry-open) .nav-sub .nav-list-link:hover,
	body:not(.nav-open):not(.enquiry-open) .nav-sub .nav-active .nav-list-link {
		padding: 1rem 0 1rem 1rem;
	}
	
	body:not(.nav-open):not(.enquiry-open) .nav-sub .nav-list + .nav-list .nav-list-link:hover,
	body:not(.nav-open):not(.enquiry-open) .nav-sub .nav-list + .nav-list .nav-active .nav-list-link {
		padding: .5rem 0 .5rem .5rem;
	}	
	
}



/* ----------------------------------------------------------------
1280 >
---------------------------------------------------------------- */

@media (min-width:1280px) {
	
	body:not(.nav-open):not(.enquiry-open) .nav-sub .nav-list-link {
		min-width: calc(30vw - 6rem);
	}
	
	.nav-sub .nav-list-link {
		font-size: 18px;
	}
	
	body.nav-open .flex,
	body.enquiry-open .flex,
	.nav-sub + .article .flex  {
		flex-direction: row;
	}
	
	body.nav-open .flex:not(.project-data) > div,
	body.enquiry-open .flex:not(.project-data) > div,
	.nav-sub + .article .flex:not(.project-data) > div {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	
	body.nav-open .project-data span,
	body.enquiry-open .project-data span,
	.nav-sub + .article .project-data span {
		display: block;
	}
	
	body.nav-open .swatch-color,
	body.enquiry-open .swatch-color,
	div.nav-sub + .article .swatch-color {
		width: 50%;
	}

	body.nav-open .swatch-details,
	body.enquiry-open .swatch-details,
	div.nav-sub + .article .swatch-details {
		padding: 0 0 0 1.5rem;
		min-height: 123px;
		width: 50%;
	}

}



/* ----------------------------------------------------------------
1920 >
---------------------------------------------------------------- */

@media (min-width:1920px) {
	
	.main .container {
		flex-direction: row;
	}
	
	.nav-sub {
		flex: 0 1 0;
		padding-right: 3rem;
		padding-bottom: 3rem;
		-webkit-box-shadow: 1px 0px 0px 0px rgba(0,0,0,0.15); 
		box-shadow: 1px 0px 0px 0px rgba(0,0,0,0.15);
	}

	.article {
		flex: 1 1 0;
	}
	
	.nav-sub + .article {
		padding-top: 3rem;
		padding-left: 3rem;
	}
	
	.nav-sub .nav-list {
		display: block;
		margin: 0;
		border-top: 1px solid #212322;
	}
	
	.nav-sub .nav-list + .nav-list {
		margin: 3rem 0 0 0;
	}
	
	.nav-sub .nav-list-item,
	.nav-sub  .nav-list + .nav-list .nav-list-item,
	.nav-sub  .nav-list + .nav-list .nav-list-item.nav-active {
		display: block;
		margin: 0;
		border-top: 0;
		border-right: 0;
		border-bottom: 1px solid #212322;
		border-left: 0;
		border-radius: 0;
	}
	
	.nav-sub .nav-list + .nav-list .nav-list-item {
		border-radius: 0;
	}
	
	body .nav-sub .nav-list-link,
	body.nav-open .nav-sub .nav-list-link,
	body.enquiry-open .nav-sub .nav-list-link {
		min-width: calc(20vw - 6rem) !important;
	}
	
	.nav-sub .nav-list-link {
		text-align: left;
		font-size: 18px;
		padding: 1rem 0;
		border-radius: 0;
	}
	
	.nav-sub .nav-list + .nav-list .nav-list-link {
		padding: .5rem 0;
		border-radius: 0;
		text-align: left;
	}
	
	.nav-sub .nav-list-link:hover,
	.nav-sub .nav-active .nav-list-link {
		padding: 1rem 0 1rem 1rem;
		border-radius: 0;
	}

	.nav-sub .nav-list + .nav-list .nav-list-link:hover,
	.nav-sub .nav-list + .nav-list .nav-active .nav-list-link,
	.nav-sub .nav-list + .nav-list .nav-active .nav-list-link:hover {
		padding: .5rem 0 .5rem .5rem;
		border-radius: 0;
	}
	
	.cta a {
		display: none;
	}
	
	.cta-message {
		display: inline-block;
	}

}