@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
/*
Light orange ce602f
Dark orange 7f3b1e
Gold ab9160
*/
body, html {
	font-family: "Open Sans", sans-serif;
	background-color: #404045;
	font-size: 105%;
	margin: 0
}
img { margin-bottom: -4px; }
form { margin: 0 }
h1, h2, h3, h4, h5, h6 { color: #7f3b1e; text-transform: capitalize }
.skip { position: absolute; top: -1000px }
.spacer { display: block; }
.clear { clear: both }
.top { background-color: #ce602f; width: 100%; z-index: 10; position: fixed; top: 0 }
.top .logo { position: absolute; height: 80px; left: 20px; top: 48px; z-index: 15  }
.top .logo img { height: 100%; width: auto }
.flash { background-color: green; color: white; padding: 10px 20px 10px 20px; text-align: center }
.top_contact { padding: 10px 20px 10px 20px; background-color: #7f3b1e; text-align: center; color: orange }
.top_contact a, .top_contact a:visited { color: orange; text-decoration: none }
.top_contact a:hover { text-decoration: underline }
.menu { overflow: auto; font-size: 110% }
.menu div { display: table-cell; padding: 20px 20px 10px 180px; position: relative }
.menu ul { margin: 0; padding: 0; list-style: none }
.menu li { display: table-cell; padding-right: 15px }
.menu ul ul { display: none }
.menu a, .menu a:visited { color: white; text-decoration: none }
.menu a:hover { text-decoration: underline }
.banner { height: 500px; overflow: hidden; display: flex; position: relative; z-index: 9 }
.banner img { width: 100%; height: auto; display: block; margin: auto auto; }
.content { background-color: white; padding: 0 }
.box { padding: 20px; max-width: 1200px; margin: auto }
.footer { display: table; width: 100%; font-size: 85%; color: #cccccc }
.footer div { display: table-cell; vertical-align: top; padding-top: 20px; padding-bottom: 20px; width: 33.33% }
.footer div:nth-child(1) { padding-left: 20px; padding-right: 10px  }
.footer div:nth-child(3) { padding-right: 20px; padding-left: 10px  }
.footer div:nth-child(2) { padding-right: 10px; padding-left: 10px  }
.branding {
	text-align: center;
	padding: 0 20px 20px 20px;
}
.branding a, .branding a:visited,
.footer a, .footer a:visited { color: white; text-decoration: none }
.follow a, .follow a:visited {
	display: inline-block;
	background-position: center center;
	background-size: cover;
	height: 50px;
	width: 50px
}
.footer .follow a { height: 30px; width: 30px; margin-right: 10px }
.branding a:hover, .footer a:hover { text-decoration: underline }
.home_grid { padding: 7px; }
.home_grid a { transition: .5s }
.home_grid a:hover { transform: scale(0.9) }
.home_grid div { float: left; box-sizing: border-box; position: relative }
.home_grid div span {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	border: 7px solid white;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
	color: white;
	padding: 20px;
	font-size: 1.2vw
}
.home_grid div span img { width: 100%; height: auto; margin: auto }
.home_grid div span .home_grid_gold_border,
.home_grid_gold_back {
	display: block;
	position: absolute; top: -0; right: 0; bottom: -0;
	left: 0; border: 10px solid #ab9160;
	color: #ab9160; padding: 10px;
	text-decoration: none;
	text-align: center;
	font-size: 125%;
	font-weight: bold
}
.home_grid_gold_back { top: -15px; bottom: -15px; background-color: #ab9160; color: white; margin: 0 }
.home_grid div:nth-child(1) { width: 40%; padding-bottom: 40% }
.home_grid div:nth-child(2),
.home_grid div:nth-child(3) { width: 30%; padding-bottom: 20% }
.home_grid div:nth-child(4),
.home_grid div:nth-child(5),
.home_grid div:nth-child(6) { width: 20%; padding-bottom: 20% }
.home_grid div:nth-child(7) { width: 40%; padding-bottom: 40%; background-color: #ce602f }
.home_grid div:nth-child(8) { width: 60%; padding-bottom: 20% }
.home_grid div:nth-child(9),
.home_grid div:nth-child(10),
.home_grid div:nth-child(11) { width: 20%; padding-bottom: 20% }
.home_grid div:nth-child(10) img { margin-top: 20px }
.home_grid_gold_social img { height: auto !important; width: 70px !important; margin: 30px 0 30px 0 !important }
.home_grid_gold_link,
.home_grid_gold_link:visited {
	color: white;
	text-decoration: none;
	display: inline-block;
	border: 4px solid white;
	padding: 10px
}
.review { background-color: #bdbbb8; padding: 20px; text-align: center; margin-bottom: 10px }
.review p { margin: 0 }
.review p:first-child { font-style: italic }
.review p:last-child { font-weight: bold }
.box_grid {
	overflow: auto;
	text-align: center;
	box-sizing: border-box;
	padding: 0 10px 0 10px
}
.box_clear { clear: both }
.box_grid a, .box_grid a:visited {
	display: inline-block;
	box-sizing: border-box;
	width: 20%;
	border: 10px solid white;
	border-top: none;
	border-bottom: 20px solid white;
	color: grey;
	text-decoration: none;
	transition: .5s
}
.box_grid a:hover { transform: scale(0.9) }
.box_grid .box_title { display: block; padding: 10px 0 10px 0; text-transform: capitalize }
.box_grid .box_image {
	position: relative;
	width: 100%;
	display: block;
	padding-bottom: 75%;
	background-position: center center;
	background-size: cover;
}
.quote_button, .quote_button:visited {
	display: inline-block;
	background-color: #ce602f;
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	padding: 10px 15px 10px 15px;
	border-radius: 5px;
	text-align: center;
	transition: .5s;
	font-size: 120%
}
.quote_button:hover { transform: scale(1.1); background-color: orange }
.list .list_header,
.list .list_content {
	display: block;
	padding: 15px;
	background-color: #f2f2f2;
}
.list .list_content { display: none }
.list .list_header {
	background-color: #ce602f;
	color: white;
	cursor: pointer;
	border-bottom: 1px solid white;
	transition: .5s;
	font-weight: bold
}
.list .list_header:hover { background-color: #7f3b1e }
#quote { padding-top: 0 }
.table { display: table }
.row { display: table-row }
.cell { display: table-cell }
.full { width: 100% }
.nowrap { white-space: nowrap }
.form .cell { padding: 20px; box-sizing: border-box; vertical-align: middle }
.form .row .cell:last-child { padding-right: 0 }
.form .row .cell:first-child { padding-left: 0 }
.form .row:nth-child(odd) .cell { background-color: #f2f2f2 }
.product_images .row .cell:first-child {
	background-position: center center;
	background-size: cover;
	padding: 40px 65px 40px 65px
}
.product_images .row .cell:nth-child(2) { padding-right: 0 }
.product_images .row .cell:nth-child(3) { width: 100% }
.TCS {
	height: 300px;
	background-color: #f2f2f2;
	overflow-y: scroll;
	padding: 20px;
	font-family: monospace;
	border: 1px solid #cccccc;
	color: grey
}
.tick img { width: 20px; height: auto; cursor: pointer; transition: .5s }
.tick img:hover { transform: scale(0.9) }
input,
textarea,
.button {
	border: none;
	-webkit-appearance: none;
	border: 1px solid grey;
	padding: 12px;
	font-size: inherit;
	color: black;
	width: 50%;
	box-sizing: border-box;
	outline: none
}
.button,
.button:visited {
	background-color: green;
	color: white;
	text-decoration: none;
	line-height: 3em;
	text-align: center;
	text-transform: uppercase;
	border-color: green;
	transition: .5s;
}
.button:hover {
	background-color: #ce602f;
	border-color: #ce602f
}
.required {
	background-color: #c6baba;
	border-color: red
}
.mobile_menu_trigger,
.mobile_menu { display: none }
.alt_grid { display: table; width: 100% }
.alt_grid div {
	display: table-cell;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 60px;
	height: 500px;
	background-position: center center;
	background-size: cover
}
.alt_grid div h1:first-child,
.alt_grid div h2:first-child,
.alt_grid div h3:first-child,
.alt_grid div h4:first-child,
.alt_grid div h5:first-child,
.alt_grid div h6:first-child { margin-top: 0; font-size: 140%; color: inherit !important }
.alt_image { width: 50%; }
.alt_grid div p { margin: 0; }
.alt_colour_1 { background-color: #d2beb6 }
.alt_colour_2 { background-color: #888381; color: white !important }
.alt_colour_3 { background-color: #e4f0fb }
.alt_colour_4 { background-color: #d5ebaf }
.alt_colour_5 { background-color: #a0b0a6 }



.floating_free_quote {
	position: fixed;
	right: -10px;
	top: 230px;
	z-index: 100;
	transition: .5s
}
.floating_free_quote:hover { right: 0 }
.floating_free_quote img {
	height: 175px;
	width: auto;
}



@media screen and (max-width: 1200px) {
	.box_grid a { width: 33.33% }
}
@media screen and (max-width: 1000px) {
	h1, h2, h3, h4, h5, h6 { font-size: 135%; }
	.spacer { display: none }
	.top,
	.flash,
	.top_contact,
	.menu,
	.logo,
	.logo img {
		position: relative !important;
		padding: 0 !important;
		margin: 0 !important;
		top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important;
		clear: both !important
	}
	.logo { display: block; text-align: center; padding: 20px !important }
	.logo img { height: 75px !important; width: auto !important }
	.flash { padding: 20px !important }
	.top_contact { display: none !important }
	.menu { display: none }
	.top { background-color: #7f3b1e }
	.mobile_menu_trigger {
		display: block;
		position: absolute;
		right: 20px;
		top: 40px;
		z-index: 20;
		width: 40px;
		height: 40px;
		box-sizing: border-box;
		border: 6px solid white;
		border-right: none;
		border-left: none;
		transition: .5s
	}
	.mobile_menu_trigger_active { transform: rotate(90deg) }
	.mobile_menu { background-color: #38220E; }
	.mobile_menu ul { padding: 0; margin: 0; list-style: none }
	.mobile_menu a,
	.mobile_menu a:visited { padding: 10px 20px 10px 20px; display: block; color: white; text-decoration: none }
	.mobile_menu ul ul a { padding-left: 50px; }
	.banner { height: auto }
	.box_grid a { width: 50% }
	input,
	textarea,
	.button { width: 100% !important; }
	.footer { display: block; font-size: 100%; text-align: center }
	.footer div { display: block; width: 100%; box-sizing: border-box }
	.footer div:nth-child(1) { padding: 20px 20px 10px 20px  }
	.footer div:nth-child(3) { padding: 0 20px 10px 20px  }
	.footer div:nth-child(2) { padding: 0 20px 20px 20px  }
	.home_grid div { display: none; padding: 0 !important; margin: 0 !important }
	.alt_grid div { display: block; width: 100%; padding: 20px; height: auto; }
	.alt_image { height: 300px !important }
	.alt_image:nth-child(odd) { display: none !important }
}
@media screen and (max-width: 750px) {
	.box_grid a { width: 100% }
}