/*
——————————————————————
Fonts
——————————————————————
*/
@font-face {
	font-family:'fa-solid';
	src:url('fonts/fa-solid-900.woff') format('woff'),
		url('fonts/fa-solid-900.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}

/*
——————————————————————
Global
——————————————————————
*/
html {
	background:#fff;
	font:20px/1.75 Roboto, sans-serif;
}
body {
	color:#171616;
}
h1 {
	font:900 3.2em/1 Raleway;
	text-transform:uppercase;
	margin-bottom:1em;
}
h1 em {
	font-weight:inherit;
	color:#f24400;
}
h2 {
	font:900 1.2em/1.2 Raleway;
	margin:2.2em 0 1em 0;
	text-transform:uppercase;
}
h2:first-child {
	margin-top:0;
}
strong {
	font-weight:bold;
}
p, address {
	margin-bottom:1.5em;
}
p:last-child {
	margin-bottom:0;
}
a {
	color:#f24400;
}
* {
	-webkit-text-size-adjust:none;
}
.slash {
	margin:0 -0.2em;
}
.hero-image {
	display:block;
	width:100%;
	margin-bottom:2em;
}

/*
——————————————————————
Header
——————————————————————
*/
#logo {
	position:absolute;
	top:2em; left:2em;
	width:12em;
	height:6.93em;
	background:url(../images/logo-cridge.png) no-repeat;
	background-size:100%;
}
#logo span {
	display:none;
}
#header {
	height:7em;
}

/*
——————————————————————
Navigation
——————————————————————
*/
#menu, #close-nav {
	width:45px;
	height:40px;
	background:url(/Images/menu.png) center no-repeat;
	background-size:25px 20px;
	position:absolute;
	top:1.6em; right:1.3em;
	cursor:pointer;
	display:none;
	z-index:3;
}
#close-nav {
	background-image:url(/Images/close.png);
	background-size:25px 25px;
}
#nav {
	font-family:Raleway;
	font-weight:900;
	text-transform:uppercase;
	text-align:right;
	position:absolute;
	top:3em; right:2em;
	z-index:2;
}
#nav li.top {
	float:left;
	position:relative;
	margin-left:1em;
	width:14.5em;
}
#nav li.active {
	box-shadow:8px 8px 8px rgba(0,0,0,0.03);
}
#nav li ul {
	display:none;
}
#nav li.active ul {
	display:block;
}
#nav a {
	display:block;
	text-decoration:none;
	padding:1.3em 1em;
	line-height:1;
}
#nav li li a {
	border:2px solid #e2e2e2;
	border-top:0;
	color:#f24400;
	background:#fff;
}
#nav li li a:hover {
	background:#f5f5f5;
}
#nav li li a:active {
	background:#f2f2f2;
}
#nav a.trigger {
	color:inherit;
}
#nav a.trigger:after {
	display:inline-block;
	content:'\f078';
	font-family:fa-solid;
	font-weight:bold;
	margin-left:0.4em;
	transition:transform linear 100ms;
}
#nav li.active a.trigger:after {
	transform:rotate(180deg);
}
#nav li.selected a.trigger {
	color:#f24400;
}
#nav li.active a.trigger {
	color:#fff;
	background:#f24400;
}
.home #nav li:first-child.selected a.trigger {
	color:#fff;
}

/*
——————————————————————
Content
——————————————————————
*/
#content {
	width:920px;
	max-width:80%;
	margin:auto;
	padding:3em 0;
	box-sizing:border-box;
	min-height:calc(100vh - 7em - 46px);
}
#content a {
	font-weight:bold;
}
.about-photo {
	float:left;
	max-width:10em;
	margin:0.7em 2em 2em 0;
}

/*
——————————————————————
Home
——————————————————————
*/
body.home {
	background:#e3e5d9 url(/Images/ute.jpg) top right no-repeat fixed;
	background-size:cover;
}
body.home #content {
	width:auto;
	max-width:100%;
	margin:0 5em 0 0;
	padding:3em 0 9em 0;
	overflow:hidden;
}
body.home #content h1 {
	float:right;
	text-align:right;
	font-size:3.7em;
	max-width:8em;
	margin:0 0.2em 0.5em 0;
}
#hero-home {
	display:none;
}
.intro {
	float:right;
	clear:right;
	max-width:20em;
	position:relative;
	z-index:1;
	padding:1.5em 1.5em 2.5em 1.5em;
	font-weight:bold;
	color:#fff;
	color:#000;
}
.intro h2 {
	font-size:1.4em;
	xfont-weight:700;
	text-transform:none;
	color:#f24400;
}
.intro p, .intro ul {
	font-size:0.85em;
}
.intro strong {
	font-family:Raleway;
}
.intro:after {
	content:'';
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	background:#3f9663;
	background:rgba(255,255,255,0.85);
	z-index:-1;
}
.intro ul.bulleted li:before {
	color:#f24400;
}
.intro .button {
	position:absolute;
	color:#f24400;
	color:#fff;
	margin-top:0.5em;
	z-index:1;
}
.intro .button:before {
	background:#fff;
	background:#f24400;
}

/*
——————————————————————
Lists
——————————————————————
*/
ul.bulleted {
	padding-left:1.2em;
	margin:0 0 1.75em 1.5em;
}
ul.bulleted li {
	list-style-type:none;
	font-weight:bold;
}
ul.bulleted li:before {
	display:inline-block;
	font-family:Arial,sans-serif;
    content: "●";
    color:#f24400;
    font-size:0.8em;
	width:1.5em;
	margin-left:-1.5em;
	position:relative;
	top:-0.15em;
}

/*
——————————————————————
Pricing
——————————————————————
*/
#prices {
	padding-bottom:1em;
}
#prices h2 {
	color:#f24400;
	margin-bottom:0.4em;
}
dl {
	border-bottom:1px solid #ddd;
	margin-bottom:1.8em;
}
dl.headers, dl.headers dt, dl.headers dd {
	border:0;
	line-height:1.1;
	margin-bottom:0;
}
dt, dd {
	float:left;
	padding:0.15em 0;
	border-top:1px solid #ddd;
	box-sizing:border-box;
}
dt {
	width:70%;
	clear:left;
}
dl.double-price dt {
	width:calc(100% - 13em);
}
dt.own {
	font-weight:bold;
}
dd {
	width:30%;
	text-align:right;
	white-space:nowrap;
}
dl.double-price dd {
	width:6.5em;
}
dd small {
	font-size:0.75em;
}
dt.total, dd.total {
	font-weight:bold;
	background:#feede6;
	padding-left:0.3em;
	padding-right:0.3em;
	border-top-color:#f9a280;
}
dl.mix {
	border-bottom-color:#f9a280;
}
.outstanding {
	float:left;
	width:calc(40% - 2em);
}
.outstanding img {
	display:block;
	width:100%;
}
.outstanding-text {
	float:right;
	width:60%;
}
.outstanding-text ul.bulleted {
	margin:0;
}

/*
——————————————————————
Global
——————————————————————
*/
.product {
	background:#f5f5f5;
	padding:1.5em;
	border-radius:0.4em;
	margin-bottom:2em;
}
.product h2 {
	font-size:1.5em;
	text-transform:none;
}
.product h2 em {
	font-weight:inherit;
	color:#f24400;
}
p.price {
	line-height:1.3;
	margin-top:-1em;
}
.product p.price small {
	font-size:0.8em;
}
.product ul.bulleted li {
	font-weight:normal;
}

/*
——————————————————————
Promoted Mix
——————————————————————
*/
.mix-promoted {
	background:#feede6;
	padding:1.8em;
	margin-bottom:2em;
}
.mix-promoted h2 {
	color:#fff;
	background:#f24400;
	padding:0.8rem 1.8rem;
	margin:-1.8rem -1.8rem 1.8rem -1.8rem;
}
.mix-promoted li {
	line-height:1.5;
	font-size:0.9em;
}
.mix-promoted p {
	margin:0;
}
.mix-promoted p.note {
	margin-top:0.7em;
	font-size:0.9em;
}
.mix-promoted .bulleted:last-child {
	margin-bottom:0;
}
.mix-promoted .bulleted li {
	margin-top:0.5em;
	font-weight:normal;
}
.mix-promoted p span {
	display:block;
	font-weight:bold;
}
.mix-promoted p strong {
	font-size:1.8em;
}
.mix-promoted p small {
	font-size:0.8em;
}
.mix-promoted p small b {
	font-size:1.4em;
}
.mix-text {
	float:right;
	width:60%;
}
.mix-promoted img {
	float:left;
	width:calc(40% - 2em);
}

/*
——————————————————————
Steps Chart
——————————————————————
*/
.steps li.step {
	background:#f3f3f4;
	padding:1.8em;
	margin-bottom:2.5em;
	position:relative;
}
.steps li.step:after {
	content:'\f078';
	font-family:fa-solid;
	font-weight:bold;
	color:#3f9663;
	position:absolute;
	text-align:center;
	width:2em;
	top:calc(100% + 0.5em);
	left:calc(50% - 1em);
}
.steps li.step:last-child:after {
	display:none;
}
.steps h3 {
	display:table;
	width:100%;
	color:#fff;
	background:#3f9663;
	padding:0.6em 1.8em;
	overflow:hidden;
	margin:-1.8em -1.8em 2em -1.8em;
	font-weight:bold;
}
.steps h3 strong {
	display:table-cell;
	text-transform:uppercase;
	padding-right:2em;
}
.steps h3 span {
	display:table-cell;
	text-align:right;
	white-space:nowrap;
}
.steps ul.bulleted li {
	font-weight:normal;
}

/*
——————————————————————
Contacts
——————————————————————
*/
.contact {
	margin-top:2.5em;
	padding-top:2.5em;
	border-top:1px solid #eff0f1;
}
.contact li {
	border-bottom:1px solid #eff0f1;
	padding-bottom:2.5em;
	margin-bottom:2.5em;
}
.contact span {
	display:block;
}
.contact em {
	font-style:italic;
}

/*
——————————————————————
Selectors
——————————————————————
*/
#selectors {
	position:absolute;
	top:0; right:2.5em;
}
#selectors select {
	float:left;
	font-size:0.6em;
	margin-left:1em;
	border:2px solid #e3e4e4;
	border-radius:0;
	border-top:0;
	padding:5px 28px 5px 7px;
	outline:0;
	-webkit-appearance:none;
	background:#fff url(../images/chevron-down.svg) 95% 11px no-repeat;
    background-size:10px 6px;
}
#selectors select:focus {
	border-color:#3f9663;
}

/*
——————————————————————
Buttons
——————————————————————
*/
.button {
	display:inline-block;
	font:1.1em/1 Raleway;
	font-weight:900 !important;
	text-transform:uppercase;
	color:#fff;
	text-decoration:none;
	padding:0.7em 0.9em 0.7em 1.2em;
	position:relative;
	margin-top:2em;
}
.button:before {
	content:'';
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	background:#3f9663;
	z-index:-1;
}
.button:after {
	content:'\f054';
	font-family:fa-solid;
	font-weight:bold;
	margin-left:0.7em;
	font-size:0.9em;
	white-space:nowrap;
}

/*
——————————————————————
Gallery
——————————————————————
*/
.gallery {
	width:calc(100% + 0.7em);
	margin:0 -0.7em 1.5em 0;
}
.gallery:last-child {
	margin-bottom:0;
}
.gallery li {
	float:left;
	width:calc(33.333% - 0.7em);
	margin:0 0.7em 0.7em 0;
}
.gallery a {
	display:block;
	width:0;
	height:0;
	padding:33.33% 50%;
	background:#eee;
	position:relative;
}
.gallery img {
	position:absolute;
	top:0; left:0;
	width:100%;
}
.gallery span {
	background:#000;
	color:#fff;
	position:absolute;
	top:0; left:0;
	z-index:1;
	width:2em;
	text-align:center;
}

/*
——————————————————————
Footer
——————————————————————
*/
#footer {
	height:2em;
	padding:1em;
	background:#fff;
	position:relative;
	z-index:1;
	border-top:3px solid #ddd;
}
#fineprint {
	line-height:2em;
}
#fineprint span {
	float:left;
	font-size:0.7em;
}

/*
——————————————————————
About Colours
——————————————————————
*/
.about a,
.about ul.bulleted li:before,
.about .steps li.step:after {
	color:#f24400;
}
.about h1 em,
.about .button {
	color:#fff;
}
.about h1 em:after,
.about .button:before {
	background:#f24400;
}
.about .steps h3 {
	color:#fff;
	background:#f24400;
}

/*
——————————————————————
Contact Page
——————————————————————
*/
.contact-details dt,
.contact-details dd {
	width:50%;
}
.form {
	margin-top:2em;
}
.form p {
	margin-bottom:1em;
}
.form label {
	display:block;
	font-size:0.85em;
}
.form input.text,
.form textarea {
	display:block;
	padding:0.2em;
	border:1px solid #ccc;
	border-radius:5px;
	width:100%;
	max-width:20em;
	box-sizing:border-box;
}
.form input.button {
	display:block;
	color:#fff;
	background:#f24400;
	border:0;
	padding:0.7em 0;
	width:8em;
	outline:0;
	cursor:pointer;
}
.validation-container {
	color:#fff;
	background:#e00;
	padding:1em 1.2em;
	line-height:1.4;
	margin-bottom:2em;
}
.validation-title, .confirm-send h3 {
	text-transform:uppercase;
	font:900 1em/1 Raleway;
	margin-bottom:0.4em;
}
.confirm-send {
	color:#fff;
	background:#3f9663;
	padding:1em 1.2em;
	line-height:1.4;
	margin-bottom:2em;
}
#map {
	height:22em;
	background:#f5f5f5;
	margin-bottom:3em;
}

/*
——————————————————————
Responsive
——————————————————————
*/
@media only screen and (min-width:1800px) {
	#logo {
		position:fixed;
		width:15em;
		height:8.66em;
		left:3em;
	}
}
@media only screen and (max-width:1580px) {
	#content {
		padding-top:6em;
	}
}
@media only screen and (max-width:1300px) {
	html {
		font-size:20px;
	}
}
@media only screen and (max-width:1100px) {
	html {
		font-size:18px;
	}
	#selectors select {
		font-size:12px;
	}
}
@media only screen and (max-width:1024px) {
	body.home {
		background-position:77% top;
	}
}
@media only screen and (max-width:950px) {
	html {
		font-size:16px;
		line-height:1.6;
	}
}
@media only screen and (max-width:820px) {
	#logo  {
		width:9.5em;
		height:5.48em;
	}
}

/*
——————————————————————
Mobile
——————————————————————
*/
@media only screen and (max-width:750px) {
	html {
		font-size:15px;
	}
	body.home {
		background:none;
	}
	body.nav-active {
		padding-left:0;
	}
	body.nav-active:before {
		display:none;
	}
	body.nav-active:after {
		display:none;
	}
	h1 {
		font-size:2.3em;
	}
	#header {
		height:4em;
	}
	#logo {
		top:1.5em;
	}
	#content {
		padding-bottom:4em;
		min-height:calc(100vh - 4em - 46px);
	}
	#menu,
	.nav-active #close-nav,
	.nav-active #nav,
	.nav-active #selectors {
		display:block;
	}
	#nav, #selectors,
	.nav-active #menu,
	.nav-active #content,
	.nav-active #footer {
		display:none;
	}
	.nav#active #header {
		height:100%;
	}
	#nav {
		position:static;
		margin-top:6.75em;
		margin-top:8em;
		border-top:2px solid #e2e2e2;
	}
	#nav li.active {
		box-shadow:none;
	}
	#nav a {
		text-align:left;
		font-size:1.5em;
		padding:1.7em;
	}
	#nav a.trigger {
		background:#fff;
		border-bottom:2px solid #e2e2e2;
	}
	#nav a.trigger:after {
		float:right;
	}
	#nav li.active a.trigger {
		border-bottom:0;
		padding-top:calc(1.7em + 2px);
		padding-bottom:calc(1.7em + 2px);
		margin-top:-2px;
	}
	.home #nav li:first-child.selected a.trigger {
		color:#f24400;
	}
	#nav li li a {
		border:0;
		border-bottom:2px solid #e2e2e2;
	}
	#nav li li a:hover,
	#nav li li a:active {
		background:inherit;
	}
	#selectors {
		position:static;
		padding:2em;
		overflow:hidden;
	}
	#selectors select {
		margin:0 1.2em 1.2em 0;
		border:2px solid #e2e2e2 !important;
		background-color:#fff !important;
	}
	#selectors select:last-child {
		margin-right:0;
	}
	#nav li.top {
		float:none;
		width:auto;
		margin:0;
	}
	ul.bulleted {
		margin-left:1.2em;
	}
	p, address {
		margin-bottom:1.25em;
	}
	.button {
		margin-top:1em;
	}
	#fineprint span, #fineprint a {
		font-size:10px;
	}
	#hero-home {
		display:block;
		width:100%;
	}
	body.home #content {
		margin:0;
		padding-top:4em;
		padding-bottom:4em;
	}
	body.home #content h1 {
		font-size:2.5em;
		float:none;
		text-align:center;
	    max-width:90%;
	    margin:-0.5em auto 0.5em auto;
	}
	.intro {
		float:none;
		width:100%;
		box-sizing:border-box;
		max-width:100%;
		padding:2em;
		margin:0;
	}
	.intro .button {
		color:#fff;
	}
	.intro .button:before {
		background:#f24400;
	}
}

@media only screen and (max-width:480px) {
	html {
		font-size:13px;
	}
	#logo {
		left:2em;
		width:8em; height:4.62em;
	}
	#content {
		max-width:86%;
	}
	.intro p, .intro ul {
		font-size:1em;
	}
	.steps li.step {
		padding:1.5em;
	}
	.steps h3 {
		padding:0.75em 1.5em;
		line-height:1.3;
		margin:-1.5em -1.5em 1.5em -1.5em;
	}
	.contact {
		margin-top:1.75em;
		padding-top:1.75em;
	}
	.contact li {
		padding-bottom:1.75em;
		margin-bottom:1.75em;
	}
	.contact-details dd span {
		display:none;
	}
	.mix-promoted {
		padding:1.2em;
	}
	.mix-promoted h2 {
		padding:0.8rem 1.2rem;
		margin:-1.2rem -1.2rem 1.2rem -1.2rem;
	}
	.mix-text {
		float:none;
		width:auto;
	}
	.mix-promoted img {
		display:block;
		float:none;
		width:100%;
		margin-bottom:1.2em;
	}
	.outstanding {
		display:none;
	}
	.outstanding-text {
		float:none;
		width:auto;
	}
}