/*
Theme Name: 	CleverBoi
Description: 	CleverBoi Custom Theme - version 2!
Version: 	2.0
Author: 	Stu Hodgson
*/

/*
===========================
CONTENTS:

01 Reset
02 Sensible defaults
03 Typography
04 Forms 
05 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Reset ---------------------------------------------------------------------------------------------------- 
---------------------------------------------------------------------------------------------------------- */
/* Included here rather than seperate stylesheet to reduce server calls */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, 
code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, 
figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video  { 
	margin:0; padding:0; border:0; outline:0; font-size:16px; vertical-align:baseline; background:transparent; 
}        
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section  { display: block; }
audio, canvas, video  { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { 
	font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; 
}
body { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; }          
a { color:blue; }
a:focus { outline: thin dotted; }
li { list-style:none; }
abbr[title] { border-bottom:none; }
b, strong { font-weight: 700; }
i, em, dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins  { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
label { cursor: pointer; }
input, 
select, 
textarea { font-size: 100%; margin: 0; }
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; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

/* ---------------------------------------------------------------------------------------------------------- 
03 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea  { /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ 
	font-family: 'proxima_nova_softregular',"Helvetica Neue", Helvetica, Arial, sans-serif;;
	font-size: 14px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #333;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

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

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid #ccc;
    border-color: #ccc #ccc #bbb #ccc;
    border-radius: 3px;
    background: #e6e6e6;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
    color: rgba(0,0,0,.8);
    cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
    -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
    font-size: 12px;
	font-size: 0.75rem;
    line-height: 1;
    padding: 0.4em 1.4em 0.5em;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
button:hover, 
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa #bbb;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
}
input[type=text],
input[type=email],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
	resize: vertical;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
    color: #111;
}
input[type=text],
input[type=email] {
    padding: 3px;
}
textarea {
    overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
    padding-left: 3px;
    vertical-align: top; /* Improves readability and alignment in all browsers */
    width: 98%;
}

/* ---------------------------------------------------------------------------------------------------------- 
03 Fonts ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
@font-face {
    font-family: 'proxima_nova_softbold';
    src: url('fonts/proximanovasoft-bold-webfont.woff2') format('woff2'),
         url('fonts/proximanovasoft-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'proxima_nova_softregular';
    src: url('fonts/proximanovasoft-regular-webfont.woff2') format('woff2'),
         url('fonts/proximanovasoft-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'proxima_nova_softsemibold';
    src: url('fonts/proximanovasoft-semibold-webfont.woff2') format('woff2'),
         url('fonts/proximanovasoft-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
h1 {
	color: #fff;
	font-size: 32px;
	padding: 20px 0 30px 0;
	margin-bottom: 10px;
	border-bottom: 2px dashed #fff;
	display: inline-block;
	font-family: 'proxima_nova_softsemibold';
}
h2 {
	font-family: 'proxima_nova_softsemibold';
	color: #000;
	font-size: 28px;
	padding: 5px 0 10px 0;
}
h3 {
	padding-bottom: 20px;
	/*border-bottom: 1px solid #fff;*/
	font-size: 42px;
	font-family: 'proxima_nova_softregular';
}
h3::after {
	content: " ";
    border-bottom: 2px solid #fff;
    display: block;
    width: 5%;
    text-align: center;
    margin: 25px auto 0;
}
h4 {
	padding-bottom: 20px;
	border-bottom: 3px dashed #fff;
	font-size: 22px;
	margin-bottom: 20px;
	font-family: 'proxima_nova_softsemibold';
}
h5 {
	color: #8cbd22;
	font-family: 'proxima_nova_softregular';
	font-size: 20px;
}
/* ---------------------------------------------------------------------------------------------------------- 
04 General Stying ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
body {
	background-color: #8cbd22;
}
body.page-template-page_home {
	background-color: #fff;
}
img {
	max-width: 100%;
}
.flex {
	display: flex;
}
.flex-center {
	display: flex;
	align-items: center;
}
li {
	list-style-type: disc;
}
.center_text {
	text-align: center;
}
button {
	background-color: #fff;
	box-shadow: none;
}
/* HEADER */
header {
	padding: 12px 0;
	background-color: #fff;
	min-height: 62px;
	position: fixed;
	z-index: 1000;
	top: 0;
	width: 100%;
}
#header_fixed {
	margin-top: 62px;
}
header .logo .mobile {
	display: none;
}
header .logo img {
	max-width: 180px;
}
header .call_us {
	color: #248491;
	font-size: 20px;
	font-family: 'proxima_nova_softsemibold';
	text-align: center;
	width: 100%;
	display: inline-block;
}
header .phone_mobile {
	display: none;
}
header #ext_contact {
	position: absolute;
	top: 0;
	right: 72px;
	display: flex;
	z-index: 10;
	height: 100%;
}
header #ext_contact .header_email {
	padding: 19px 15px 19px 15px;
    display: inline-block;
    background-color: #fff;

}
header #ext_contact .header_find_boiler {
	background-color: #8cbd22;
	display: flex;
	font-size: 16px;
}
header #ext_contact .header_find_boiler:hover {
	background-color: #fff;
}
header #ext_contact .header_find_boiler a {
	align-self: center;
	color: #fff;
	padding: 0 30px;
}
header #ext_contact .header_find_boiler:hover a {
	color: #8cbd22;
	text-decoration: none;
}
.mob-menu-header-holder {
	width: auto !important;
}
.content {
	background-color: #fff;
	padding-top: 30px;
	padding-bottom: 30px;
}
.find_boiler button, .boiler button, section#contact_us button {
	color: #8cbd22;
	text-shadow: none;
	box-shadow: none;
	padding: 15px 40px 15px 40px;
	border-radius: 30px;
	border-width: 3px;
	border-color: #8cbd22;
	text-align: center;
	background-color: #fff;
	/*background-image: url('images/icon_search.png');*/
	background-repeat: no-repeat;
	background-position: 95% 50%;
	background-size: 27px;
	font-size: 18px;
	font-family: 'proxima_nova_softsemibold';
	margin-bottom: 30px;
	margin-top: 30px;
}
.find_boiler button:hover {
	color: #fff;
	background-color: #8cbd22;
	border-color: #fff;
}
.find_boiler.right {
	text-align: right;
}
#find_boiler_block .find_boiler button {
	/*font-size: 26px;*/
}
/* HOME SLIDER */
.slider_padding {
	padding: 40px;
}


/* HOME SECTION: ABOUT US */
section#about {
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 5px 0;
}
section#about .content {
	padding: 80px 60px;
	color: #fff;
	background-color: rgba(49,49,49,0.4);
}
section#about .content button {
	border-radius: 20px;
	padding: 10px 50px;
	font-size: 14px;
}
/* HOME SECTION: SERVICES */
section#section_two .row {
	margin: 10px 0;
	padding: 40px 0;
	border-bottom: 1px dotted #8cbd22;
}
section#section_two .brands {
	border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.services .service {
	text-align: center;

}
.services .service img {
	border-bottom: 2px solid #8cbd22;
    width: auto;
    padding: 10px 0 20px 0;
    margin-bottom: 20px;
    max-height: 105px;
}
.services .service .content {
	padding: 20px 22%;
	font-size: 22px;
}
.services .service:nth-child(2) {
	border-right: 1px dotted #8cbd22;
	border-left: 1px dotted #8cbd22;
}
.brands {
	text-align: center;
}
.brands .brand {
	padding: 0px 0;
}
.brands .brand img {
	max-width: 35%;
}
/* HOME SECTION: WHY US */
section#why_us {
	background-color: #8cbd22;
	text-align: center;
	color: #fff;
	z-index: 100;
}
section#why_us img {
	max-width: 120px;
	margin-bottom: 15px;
}
section#why_us button {
	color: #8cbd22;
	background-color: #fff;
	border-radius: 20px;
	margin: 20px 0 30px 0;
}
section#why_us p {
	padding: 10px 15%;
	min-height: 260px;
	text-align: left;
}
section#why_us .why_intro {
	padding-top: 30px;
	padding-bottom: 380px;
}
section#why_us .why_us_content {
	text-align: left;
	font-size: 20px;
}
section#why_us .why_us_content ul {
	padding: 0 18%;
}	
section#why_us .why_us_content li, .content li {
	list-style-type: none;
	background-image: url('images/icon_star.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px;
	padding: 5px 0 5px 30px;
}
.content ul {
	padding: 0 25%;
}
.content li {
	background-image: url('images/icon_star_green.png');
}
.service .content li {
	background-image: url('images/icon_star_teal.png');
}
section#why_us .why_blocks {
	margin: 30px 0 0 0 ;
	position: absolute;
	bottom: -230px;
}
section#why_us .why_blocks .block {
	background-color: #fff;
	color: #000;
	box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
section#why_us .why_blocks h5 {
	padding-top: 20px;
}
section#why_us .why_blocks .block img {
    padding: 20px 0 0;
    height: 120px;
}
section#why_us .why_blocks .block .line {
	content: " ";
	display: block;
	width: 10%;
	border-bottom: 2px solid #2597a0;
	margin: 0 auto;
}	
section#why_us .why_blocks .block button {
	background: none;
	border-top: 1px solid #2597a0;
	border-bottom: 1px solid #2597a0;
	border-left: none;
	border-right: none;
	text-transform: uppercase;
	color: #2597a0;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 20px;
	width: 95%;
    text-align: left;
    padding: 10px 0;
    background-image: url('images/arrow.png');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 35px;
}
section#contact_us {
	padding-top: 30px;
	text-align: center;
	color: #8cbd22;
	background-color: #fff;
}
section#contact_us.service {
	color: #2597a0;
}
.page-template-page_home section#contact_us {
	padding-top: 280px;
}
section#contact_us h3 {
	color: #8cbd22;
	border-bottom-color: #8cbd22;
}
section#contact_us.service h3 {
	color: #2597a0;
}
section#contact_us h3::after {
	border-color: #8cbd22
}
section#contact_us.service h3::after {
	border-color: #2597a0
}
section#contact_us button {
	border-radius: 20px;
	padding: 12px 70px;
	font-size: 18px;
	background-color: #8cbd22;
	color: #fff;
	box-shadow: none;
	margin: 30px 0;
	text-shadow: none;
}
section#contact_us.service button {
	background-color: #2597a0;
	border-color: #2597a0;
}
/* HOME BANNER */

#home_banner, #internal_banner {
	position: relative;
	padding: 40px 0;
	color: #fff;
    background-color: #8cbd22;
    width: 100%;
}
#internal_banner {
	
}
#home_banner .shift, #internal_banner .shift {
	margin-left: 95px;
}
#home_banner .logo, #internal_banner .logo {
	max-width: 300px;
	margin-left: -95px;
}
#home_banner .icon_block, #internal_banner .icon_block {
	margin-bottom: 140px;
	display: inline-block;
}
#home_banner .icon_block::after, #internal_banner .icon_block::after {
	border-bottom: 3px dashed #fff;
	content: " ";
	display: inline-block;
	width: 100%;
}
#home_banner .icon, #internal_banner .icon {
	float: right;
	max-width: 75%;
    margin: 20px 60px 0 0;
}
#internal_banner .icon {
	max-width: 50%;
}
#internal_banner .find_boiler button {
	color: #2597a0;
	border-color: #2597a0;
}
#internal_banner .find_boiler button:hover {
	background-color: #2597a0;
	color: #fff;
	border-color: #fff;
}
#home_banner h2, #internal_banner h2 {
	color: #fff;
	font-size: 40px;
	margin: 50px 0 20px 0;
	font-family: 'proxima_nova_softregular';
	width: 80%;
}
#home_banner .line, #internal_banner .line {
	content: " ";
	display: block;
	width: 37%;
	border-bottom: 2px dashed #fff;
	margin: 10px 0 0 0;
	margin: 20px 0 0 0;
    width: 50%;
}
#home_banner p, #internal_banner p {
	font-size: 16px;
}
#home_banner .gas_safe, #internal_banner .gas_safe {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 120px;
}
/* FIND YOUR BOILER */
#find_boiler_block {
	position: relative;
	height: 600px;
	padding: 80px 0;
	color: #fff; 
}
#find_boiler_block .shift {
	margin-left: 95px;
}
#find_boiler_block .logo {
	max-width: 300px;
	margin-left: -95px;
}
#find_boiler_block .icon {
	float: right;
	max-width: 250px;
    margin: 20px 0px 0 0;
}
#find_boiler_block h2 {
	color: #fff;
	font-size: 40px;
	margin: 20px 0;
	font-family: 'proxima_nova_softregular';
	width: 60%;
}
#find_boiler_block .line, #header .line {
	content: " ";
	display: block;
	width: 37%;
	border-bottom: 2px dashed #fff;
	margin: 10px 0 0 0;
}
#header .line {
    margin: 20px 0 20px 0;
    width: 50%;
}
#header p {
	font-size: 16px;
}
#find_boiler_block .gas_safe {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 120px;
}
#find_1 {
	padding-top: 20px;
}

.questions {
	min-height: 600px;
	position: absolute;
	background-color: #8cbd22;
	width: 100%;
}
.questions h1, #header h1 {
	background-image: url('images/logo_icon.png');
    background-repeat: no-repeat;
    background-size: 80px;
    background-position: left top;
    padding-left: 90px;
    font-size: 40px;
    font-family: 'proxima_nova_softregular';
    min-height: 110px;
    padding-bottom: 20px;
    line-height: 1.9;
    border: none;
    margin-bottom: 0;
}
.questions h1 span {
	background-color: #fff;
    color: #8cbd22;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    font-size: 40px;
    text-align: center;
    display: inline-block;
    background-position: 12px 6px;
    vertical-align: baseline;
    line-height: 1.1;
}
#find_boiler_block .questions .line {
	margin: 20px 0 0 0;
	width: 30%;
}
.questions p.tagline {
	color: #fff;
	font-size: 40px;
	margin-top: 20px;
}
#question_1, #question_2, #question_3, #question_4 {
	left: 100%;
	transition: 1s;
}
#question_1.active, #question_2.active, #question_3.active, #question_4.active {
	left: 0;
	transition: 1s;
}
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}
.options {
	margin-top: 30px;
}
.option {
	background-color: #fff;
	text-align: center;
	padding: 20px 0;
	height: 230px;
}
.option img {
	margin-bottom: 20px;
	margin-top: 20px;
}
.option .center_bottom {
	position: absolute;
	left: 50%;
	bottom: 20px;
	width: 100%;
}
.option button {
    background-color: #8cbd22;
    border-radius: 20px;
    border: none;
    color: #fff;
    box-shadow: none;
    text-shadow: none;
    padding: 10px 30px;
    display: block;
    margin: 0 auto;
    position: relative;
    left: -50%;
    font-size: 16px;
}
.option button:hover {
	background-color: #248491;
}	
.option .lg_number {
	font-size: 140px;
	color: #8cbd22;
	margin-bottom: 20px;
	line-height: 1.1;
}
#question_1 .col-md-5ths:nth-child(1) .option img {
	float: right;
}
#question_1 .col-md-5ths:nth-child(3) .option img {
	float: right;
	width: 100%;
}
/* BOILER RESULTS */
#header.boiler_results {
	padding-bottom: 0;
}
.boiler_results img.header_icon {
	position: absolute;
	bottom: 0;
	right: 15px;
	max-height: 120px;
}
.boiler_results h1 {
	background-image: url('images/logo_icon.png');
    background-repeat: no-repeat;
    background-size: 80px;
    background-position: left top;
    padding-left: 90px;
    font-size: 40px;
    font-family: 'proxima_nova_softregular';
    min-height: 110px;
    padding-bottom: 20px;
    line-height: 1.9;
    border: none;
    margin-bottom: 0;
}
.boiler_results .line {
	content: " ";
	display: block;
	width: 37%;
	border-bottom: 2px dashed #fff;
	margin: 10px 0 0 0;
}
.header_tagline {
	font-size: 40px;
	margin-top: 30px;
	margin-bottom: 30px;
	line-height: 1.3;
	width: 80%;
}
#boilers {
	
}
.boiler {
	padding-top: 30px;
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: 4px dashed #8cbd22;
	color: #8cbd22;
}
.boiler .tagline {
	color: #2597a0;
	font-size: 18px;
	margin-bottom: 10px;
	font-family: 'proxima_nova_softsemibold';
}
.boiler li {
	list-style-type: none;
	list-style-position: inside;
	color: #8cbd22;
}
.boiler h2 {
	color: #8cbd22;
}
.boiler .price {
	color: #8cbd22;
	border-top: 1px solid #8cbd22;
	border-bottom: 1px solid #8cbd22;
	font-size: 38px;
	padding: 10px 0;
	margin: 10px 0;
	font-size: 18px;
}
.boiler button {
	border-radius: 20px;
	border: none;
	color: #fff;
	margin-top: 10px;
	margin-bottom: 0;
	background-color: #2597a0;
}
.boiler p.flow_rate {
	border-radius: 50%;
	background-color: #2597a0;
	color: #fff;
	text-align: center;
	padding: 20px;
	float: right;
	height: 120px;
	width: 120px;
}
.boiler .flow_rate span {
	font-size: 26px;
	font-family: 'proxima_nova_softsemibold';
}
.boiler ul {
	padding: 0;
}
/* CONTACT PAGE */
#header {
	padding: 50px 0;
	color: #fff;
}
#map > div {
	padding-left: 0;
	padding-right: 0;
}
#content .wpcf7 input[type=text], #content .wpcf7 input[type=email], #content .wpcf7 textarea {
	width: 100%;
	border: 1px solid #8cbd22;
	padding: 15px 8px;
	margin-bottom: 10px;
}
#content .wpcf7 input::placeholder, #content .wpcf7 textarea::placeholder {
	color: #8cbd22;
}
#content .wpcf7 input[type=submit] {
	border-radius: 20px;
	background-color: #8cbd22;
	color: #fff;
	padding: 10px 80px;
	box-shadow: none;
	text-shadow: none;
	font-size: 18px;
	margin-top: 20px;
}
#content div.image img {
	width: 100%;
	height: auto;
}
#content div.testimonial {
	background-color: #424242;
	color: #8cbd22;
	text-align: center;
	padding: 30px 20%;
}
#content.service div.testimonial {
	color: #2597a0;
}
#content div.testimonial .testimonial_text {
	padding: 20px 0;
	font-size: 18px;
}
#content div.testimonial img {
	display: inline-block;
}
#content div.testimonial p.name {
	color: #fff;
	font-family: 'proxima_nova_softsemibold';
}
#content .image, #content .testimonial, #content .col_2 {
	margin-top: 30px;
	margin-bottom: 30px;
}
#contact_details h4 {
	margin-bottom: 0;
}
#contact_details p {
	color: #a6a6a6;
}
.col_2_text {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  text-align: left;
}
.col_2_text p {
  margin: 0;
}
.col_2_text p + p {
  text-indent: 1em;
}
.col_2_text li {
	margin-left: 12px;
}
/*FOOTER*/
footer {
	background-color: #424242;
	text-align: center;
	padding: 20px 0;
	color: #fff;
	font-size: 12px;
}
footer a {
	color: #fff;
}
footer a:hover {
	color: #8cbd22;
	text-decoration: none;
}
footer ul#menu-footer-navigation {
	display: inline-block;
}
footer ul#menu-footer-navigation li  {
	float: left;
	font-size: 16px;
	list-style-type: none;
}
footer ul#menu-footer-navigation li a {
	padding: 0 8px;
	text-decoration: underline; 
}
footer .copyright {
	color: #8c8c8c;
	font-size: 12px;
}
/* ---------------------------------------------------------------------------------------------------------- 
05 Page Specific Styling ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------------------- 
06 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* 400 and up */
@media screen and (max-width:768px) {
	.flex {display: inherit;}
	header {min-height: 55px;height: 55px;}
	header .logo .desktop {display: none;}
	header .logo .mobile {display: block;}
	header .call_us {display: none;}
	header .phone_mobile {display: block; margin-top: 5px;}
	header #ext_contact .header_find_boiler {font-size: 14px;}
	header #ext_contact .header_email {padding-top: 17px;}
	#header .line {margin-top: 0;}
	#header_fixed { margin-top: 55px;}
	.header_tagline {margin-bottom: 10px;}
	section#about .content {margin: 20px;text-align: center;}
	.services .service {border: none !important;}
	section#why_us .why_blocks {position: relative; bottom: -250px;margin-top: -210px;}
	section#why_us .why_intro {padding-bottom: 0;}
	header .logo img {max-width: 100%;max-height: 40px;}
	header #ext_contact .header_find_boiler a {padding: 0 10px;}
	header {padding: 9px 0 9px 0;}
	.page-template-page_home section#contact_us {padding:250px 0 0;}
	section#why_us p {padding: 10px 20px;}
	#find_boiler_block {padding: 0;height: 650px;}
	#find_boiler_block .icon {max-height: 80px;}
	.options .option {margin-bottom: 20px;}
	#question_1, #question_2 {height: 1100px;}
	#header.boiler_results {padding-top: 0;}
	.boiler_results img.header_icon {right: auto;max-width: 100px;}
	.boiler img {width: 100%;}
	.boiler h2 {margin-top: 20px;}
	.boiler p.flow_rate { padding: 4px; height: 75px; width: 70px;border-radius: 20px;top:-50px;position: relative;}
	.boiler .flow_rate span {font-size: 18px;}
	section#contact_us {padding-top: 0;}
	.content { padding-top: 15px;padding-bottom:15px;}
	.mobmenur-container {height: 55px !important;padding-top: 12px !important;}
	h3 {font-size: 38px;}
	h3::after {width:15%;}
	h4 {font-family: 'proxima_nova_softregular';}
	section#about .content {padding: 40px 60px;}
	.brands .brand img {max-width: 75%;}
	section#why_us .why_us_content ul {padding: 0;}
	section#why_us .why_blocks .block {margin-bottom: 30px;}
	footer ul#menu-footer-navigation li {float: none;padding-bottom: 10px;}
	.mob-menu-header-holder {z-index: 10000000 !important;}
	#find_boiler_block .shift {margin-left: inherit;}
	#find_boiler_block .logo {margin-left: inherit;max-width: 100%;}
	.questions h1, #header h1 {background-size: 60px;margin-top: 20px;padding-left: 70px;line-height: 1;}
	#find_boiler_block .icon {margin-top: 80px;}
	.questions p.tagline {line-height: 1;}
	.option .center_bottom {width: 90%;}
	#home_banner .line, #home_banner .line {display: none;}
	#home_banner .shift, #internal_banner .shift {margin-left: inherit;}
	#home_banner .logo, #internal_banner .logo {margin-left: inherit;max-width: 100%;padding: 0 15%;}
	#home_banner h2, #internal_banner h2 {width: 100%;text-align: center;font-size: 30px;margin-bottom: 0;}
	#home_banner .find_boiler, #internal_banner .find_boiler {text-align: center;}
	#home_banner .icon_block, #internal_banner .icon_block {margin-bottom: 20px;}
	#home_banner .icon, #internal_banner .icon {float: none;max-width: 70%;}
	#home_banner .icon_block::after, #internal_banner .icon_block::after {width: 100%;}
	#home_banner .gas_safe, #internal_banner .gas_safe {right: 20px;max-width: 90px;bottom: 16px;right: 6px;}
	}
}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {

					{ /* Place your styles here for all 'Retina' screens */ }

}