/*
Theme Name: bevp-theme
Description: Beverley Plumbing Theme
Author: sandyfootprints
Theme URI: https://www.sandyfootprints.co.uk
Author URI: https://www.sandyfootprints.co.uk
Version: 1
Text Domain: beverley plumbing
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.3;
	background: #b0bfcb;
	color: #4a4a4a;
font-family: nimbus-sans, sans-serif;
font-weight: 300;
font-style: normal;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
footer { color: #FFF; }
footer a { color: #FFF; text-decoration: none; }
footer a:hover { color: #FFF; text-decoration: underline; }
.wrapper { width: 970px; max-width: 100%; display: block; margin: 0 auto; background: #FFF; }
.container { padding: 20px; }
footer { background: #4a6b89; }
#clients { background: #e4e4e4; padding: 30px; }
#accreditations { background: #000; padding: 30px; color: #FFF !important; }
#accreditations h2 { color: #FFF !important; }
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}



.headertop { margin-bottom: 30px; font-size: 14px; text-align: right; }
.headertop li { list-style: none; display: inline; margin: 10px; }
.tel::before { content: url("img/tel-icon.png"); margin-right: 4px; position: relative; bottom: -5px; }
.email::before { content: url("img/email-icon.png"); margin-right: 4px; position: relative; bottom: -5px; }
li.linkedin img { position: relative; bottom: -3px; }
header a { color: #4a4a4a; text-decoration: none; }
header a:hover { color: #4a6b89; }

nav, .footernav { list-style:  none; }
nav li, .footernav li { display: inline; margin: 10px 0; }
header nav li { border-right: 2px solid #4a6b89; padding: 0 10px; text-transform: uppercase;  }
header nav li.current-menu-item a { font-weight: bold; color: #4a6b89; }
header nav li:last-child { border-right: none; }
footer .footernav { text-align: center; font-size: 13px; margin-top: 40px;  }
header nav { text-align: right; }
footer img { margin-top: 0 !important; }
footer .footernav li { border-right: 1px solid #FFF; padding: 0 10px; }
footer .footernav li:last-child { border-right: none; }
.slidecontainer { width: 100% !important; }
.slide { background-size: cover; background-position: center; min-height: 380px; }
.slidetext { background-color: rgba(0,0,0,0.5); color: #FFF; width: 250px; padding: 20px; position: absolute; right: 30px; bottom: 50px; }
.toptext { background-color: #000; color: #FFF; text-align: center; text-transform: uppercase; padding: 8px 0; font-size: 1.35em; }

h2:not(.toptextline) { font-weight: bold; text-align: center; text-transform: uppercase; font-size: 1.2em; margin-bottom: 15px; }

h3 { font-weight: bold; text-align: center; text-transform: uppercase; font-size: 1em; margin-bottom: 15px; }
.teaminfo { padding: 0 10px 0 5px; border-right: 2px solid #4a6b89; min-height: 540px; }
.teaminfo h3 { margin-bottom: 3px; }
.teaminfo p { font-size: 0.9em}
.bluetext { color: #4a6b89; }
.noborder { border-right: none !important; }
.clientlogos, .accreditationlogos, .flexgrid { max-width: 100% !important; display: flex; align-items: center; flex-direction:row;}
.clientlogos > div, .accreditationlogos > div, .flexgrid >div { flex-basis: 100%; flex: 1; display: flex;
text-align: center; min-height: 100px; align-items: center;
}
.accreditationlogos { width: auto !important; max-width: 60% !important; margin:auto; }
.accreditationlogos > div{ flex-basis: auto }
.clientlogos > div > div, .accreditationlogos > div > div, .flexgrid > div > div { flex-basis: auto; background: #FFF; width: 100%; height: 100%; margin: 4px; display: flex; min-height: 80px; text-align: center; }
.clientlogos img, .accreditationlogos img { max-width: 84%; height: auto; align-self: center; max-height: 100%; width: auto;}
.clientlogos > div > div > a, .accreditationlogos img, .flexgrid img { align-self: center; text-align: center; width: 100%; }
.accreditationlogos img { width: auto; margin:auto;}
.flexgrid { flex-wrap: wrap;}
.flexgrid > div { flex-basis: 18%; }

#team img, .servbox, #currentprojects .project img {  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
.serviceb { border-right: 2px solid #4a6b89; }
.servbox { padding-right: 4px; width: 210px; height: 180px; background-size: cover; position: relative;  }
.blackblock { background: #000; color: #FFF; position: absolute; bottom: 0; width: 100%; }
.servbox h3.blackblock  { color: #fff; text-align: center; margin-bottom: 0 !important; }
.servbox a { width: 100%;
height: 100%;
display: block;}
#currentprojects .flexgrid > div, #previousprojects .flexgrid > div  { flex-basis: 25%; max-width:230px; min-width: 150px;  }
.project { text-align: left; min-height: 340px; max-width: 211px; }
#currentprojects  .flexgrid > div > div , #previousprojects  .flexgrid > div > div { background: none; }
#previousprojects { background: #000; color: #FFF !important; padding: 30px 0; }
#previousprojects .project { min-height: 380px; }
#previousprojects h2 { color: #FFF; }
#previousprojects .project img { border: 1px solid #FFF; }
.smallpad { padding: 0 6px 0 4px; }
.textleft { text-align: left; }
/* wordpress core */
.alignnone {
    margin: 5px 20px 20px 0;
}
.accreditationstop, .prevprojtop {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  margin-top: -30px; margin-left: auto; margin-right:auto; margin-bottom: 20px; 
  border-top: 20px solid #fff;
}
.flexgrid.itemtop { align-items: flex-start; }

.topbanner { min-height: 400px; background-size: cover; background-position: center; }
.overlay { background-color: rgba(0,0,0,0.5); color: #FFF; }
.darkover { background-color: rgba(0,0,0,0.8); color: #FFF; }
.overhalf { width: 50%; height: 100%; }
.inner { padding: 20px 30px; }

.pagetop { background: #000; color: #FFF; padding: 15px; }
.pagetop h2 { margin-bottom: 0; }
#cmplz-document { max-width: 100%; }
p { margin-bottom: 15px; }
strong, .bold { font-weight: 600; }


.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* wordpress gallery */

.gallery:after {content:"";display:table;clear:both;}


img.aligncenter, div.aligncenter, figure.aligncenter, img.wp-post-image {display:block; margin:1em auto;}
img.alignright, div.alignright, figure.alignright {float:right; margin:1em 0 1em 2em;}
img.alignleft, div.alignleft, figure.alignleft, img.wp-post-image.attachment-thumb {float:left; margin:1em 1em 2em 0;}
figure {max-width: 100%; height: auto; margin:1em 0;}
p img.alignright, p img.alignleft {margin-top:0;}

.gallery figure img {max-width:100%; height:auto; margin:0 auto; display:block;}

.gallery figure {float:left; margin:0 2% 1em 0;}

.gallery.gallery-columns-1 figure {width:100%; margin:0 0 1em 0; float:none;}

.gallery.gallery-columns-3 figure {width:32%;}
.gallery.gallery-columns-3 figure:nth-of-type(3n+3) {margin-right:0;}
.gallery.gallery-columns-3 figure:nth-of-type(3n+4) {clear:left;}

.gallery.gallery-columns-2 figure {width:49%;}
.gallery.gallery-columns-2 figure:nth-of-type(even) {margin-right:0;}
.gallery.gallery-columns-2 figure:nth-of-type(odd) {clear:left;}

.gallery.gallery-columns-4 figure {width:23.25%;}
.gallery.gallery-columns-4 figure:nth-of-type(4n+4) {margin-right:0;}
.gallery.gallery-columns-4 figure:nth-of-type(4n+5) {clear:left;}

.gallery.gallery-columns-5 figure {width:18%;}
.gallery.gallery-columns-5 figure:nth-of-type(5n+5) {margin-right:0;}
.gallery.gallery-columns-5 figure:nth-of-type(5n+6) {clear:left;}

.gallery.gallery-columns-6 figure {width:14.2%;}
.gallery.gallery-columns-6 figure:nth-of-type(6n+6) {margin-right:0;}
.gallery.gallery-columns-6 figure:nth-of-type(6n+7) {clear:left;}

.gallery.gallery-columns-7 figure {width:12%;}
.gallery.gallery-columns-7 figure:nth-of-type(7n+7) {margin-right:0;}
.gallery.gallery-columns-7 figure:nth-of-type(7n+8) {clear:left;}

.gallery.gallery-columns-8 figure {width:10.2%;}
.gallery.gallery-columns-8 figure:nth-of-type(8n+8) {margin-right:0;}
.gallery.gallery-columns-8 figure:nth-of-type(8n+9) {clear:left;}

.gallery.gallery-columns-9 figure {width:8.85%;}
.gallery.gallery-columns-9 figure:nth-of-type(9n+9) {margin-right:0;}
.gallery.gallery-columns-9 figure:nth-of-type(9n+10) {clear:left;}

@media (max-width:810px) {
	img.alignright, div.alignright, figure.alignright, img.alignleft, div.alignleft, figure.alignleft, img.wp-post-image.attachment-thumb {display:block; margin:1em auto; float:none;}
	.gallery.gallery-columns-4 figure, .gallery.gallery-columns-5 figure, .gallery.gallery-columns-6 figure, .gallery.gallery-columns-7 figure, .gallery.gallery-columns-8 figure, .gallery.gallery-columns-9 figure {width:100%; margin:0 0 1em 0; float:none;}
	.flexgrid > div { flex-basis: 30%; max-width: 200px; }
	.services .flexgrid > div { flex-basis: 25%; max-width: 200px; }
	.servbox { width: 165px; }
}

@media only screen and (max-width: 480px) {
	.servebox { width: 210px; }
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
	.clientlogos { flex-wrap: wrap; flex:auto; }
	.overhalf { width: 100%; }
	footer .col { text-align: center; }
	footer div.footernav li { display: block; border-right: none; }
	header .container { padding: 0; }
	.headertop { position: absolute; top: 0; padding-bottom: 10px }
	.logo { margin-top: 60px; text-align: center; }
	.clientlogos > div, .accreditationlogos > div, .flexgrid > div { flex: auto; flex-basis: 25%;  }
	.accreditationlogos { max-width: 100% !important; }
	.toptext { font-size: 1em; }
	.headertop { font-size: 12px; width: 100%;  }
	.mob-icon-menu::before { color: #4a6b89; }
	.mob-menu-header-holder { top: 40px; }
	.headertop li { display: block; text-align: right; margin: 0; }
	.serviceb, .teaminfo { border-right: none; }
	.teaminfo { max-width: 150px; }
	.flexgrid.itemtop { justify-content: center; }
	.flexgrid.itemtop > div { margin-bottom: 15px; }
}