/*  
Theme Name: Tradesman
Author: tradesman
Author URI: https://tradesman.co.uk/
Description: Showcase portfolio theme for tradespeople
Version: 1.2
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, grid-layout, custom-background,custom-colors, custom-header, custom-menu, editor-style, featured-images, footer-widgets, theme-options, threaded-comments
Theme URI: http://onepage.tradesman.co.uk/
Text Domain: tradesman

This theme, like WordPress, is licensed under the GPL. Play with it and discover the flexibility of WordPress themes.
*/

/***** RESET EVERYTHING *****/

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, font, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 1em;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

.clearfix:after, .navigation:after, #maincontent:before, #footercontent:after, .navbar:after,#headercontent:after, .tradesman-form:after, .entry:after, .testimonial:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

input:focus,select:focus,textarea:focus,button:focus {
	outline: none;
}

li.widget { list-style-type: none; }

/***** ACCESSIBILITY *****/

.screen-reader-text {display:none;}

/***** TYPOGRAPHY AND LINKS *****/

html {
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body {
	text-align: left;
	font-family: Arial, sans-serif;
	font-size:1rem;
}

h1 {
	font-size: 2rem;
	font-weight: 900;
	text-align: left;
	text-decoration: none;
	padding: 0;
	margin: 12px 0 24px 0;
}

h1 a:link,h1 a:hover ,h1 a:visited {
	text-decoration: none;
}

h2 {
	font-size: 1.6rem;
	font-weight: 300;
	text-align: left;
	padding: 0;
	margin-bottom: 6px;
}

h2 a:link,h2 a:hover,  h2 a:visited {
	text-decoration: none;
}

h3{
	font-size: 1.4rem;
	font-weight: 300;
	text-align: left;
	padding: 6px 0 6px 0;
	margin-bottom: 6px;
}

h3 a:link, h3 a:visited{
	text-decoration: none;
}

h4 {
	font-size: 1.1rem;
	font-weight: 300;
	text-align: left;
	padding: 6px 0 6px 0;
	margin-bottom: 6px;
}

h4 a {
	text-decoration:none;
	padding:7px 12px 7px 12px;
	margin: 0;
	white-space: nowrap;
	line-height: 45px;
}

h5, h6 {
	font-weight: bold;
	margin: 0 0 6px 0;
	clear: both;
}

code, pre {
	font-family: courier;
	padding: 4px 0;
}

blockquote {
	font-style: italic;
	padding: 0 6px 0 6px
}

cite, strong {
	font-weight: bold;
}

q {
	font-style: italic;
}

input {
	font-family: sans-serif;
}


/***** COLOURS *****/

body, .cloned, .hometopcta {
	background-color: transparent;
}

body, h1, h1 a:link, h1 a:visited, nav a, nav a:visited, nav li a, p.postmetadata, .date, .tags, p.postmetadata a, p#crumbs a, p#crumbs a:visited, #searchform input, #logo a, #logo-title a, .comment-content b, .box a h2, .box p,  .hometopcta, .entry, .telephone {
	color:#343848;
} 

h4 a, #submit, .tradesman-form #submit, .hometopcta .button a{
	background:#1abc9c;
}

.hometop, .hometop h1, .hometop p, .hometop h2, .hometop a, .hometop a:visited, .signoff, .signoff p, .signoff h2, .signoff a, .signoff a:visited {
	color: #ffffff;
}

.hometopcta, .hometopcta a, .hometopcta a:hover, .hometopcta p, .hometopcta h2 {
	color:#343848;
}

h4 a:hover, #submit:hover, .entry a.more-link:visited, .entry a.more-link:hover, .hometopcta .button a:hover {
	background: #505050;
} 

h1 a:hover, p#crumbs a:hover, #logo-tagline, .entry p a, p a:link, .entry p a:visited, .entry li a, .entry li a:visited {
	color:#505050;
} 

h4 a, h4 a:hover, #submit, #footercontent, #footercontent a, #footercontent p, #footercontent p a, #footercontent .textwidget, .hometopcontent p a:link, .hometopcontent p a:hover, .entry a.more-link, .entry a.more-link:visited, .entry a.more-link:hover {
	color:#FFFFFF;
}

.navigation a {
	color: #FFFFFF;background: #1abc9c;
}

.navigation a:hover{
	color: #FFFFFF;background:#505050;
}

.hometop-background {
	background:#1abc9c;
}

.signoff {
	background: #1abc9c;
}

nav a:hover {
	border-bottom-color:#1abc9c;
}
nav a:focus, nav .current-menu-item > a, nav .current-menu-ancestor > a, nav .current_page_item > a, nav .current_page_ancestor > a {
	border-bottom: 2px solid #1abc9c;
}

footer {
	background:#474B59;
}

li.hometopcta {list-style: none;}
.hometopcta a {text-decoration: none;}

/***** PAGE STRUCTURE *****/

#maincontent, #footercontent {
	max-width: 1250px;
	margin: 0 auto;
	padding: 12px 32px 32px 32px;
}

#maincontent p, #maincontent ul, #maincontent ol, #maincontent p {
	margin-bottom: 16px;
	line-height: 160%;
}

/***** HEADER *****/

header {}

#headercontent {margin: 0 auto;max-width: 1250px;text-align: left;padding: 32px ;}

#logo img {width:auto;overflow:hidden;margin:0 12px 0 0;}

#logo-title {font-size:3rem;font-weight: 900;}

#logo-tagline {font-size: 1.5rem;}

#logo a, #logo-title a {
	text-decoration: none;
}

/***** NAVIGATION *****/

.dropdown-toggle {
	display:none; margin-top: 6px; padding: 6px;background: rgba(52,56,72,0.9) !important;color: #FFF !important; text-align: center;
}
a.dropdown-toggle {text-decoration:none;}

ul#menu-main {display: block;}

.navbar {
	list-style: none;
	margin: 0 auto;max-width: 1250px;padding: 12px 32px  24px 32px;
}

nav {
	width:100%;
	z-index:900;
	border-bottom: 1px solid #c7d7e0;margin-bottom: 1px;
}

nav.navigation.pagination {border-bottom:none;}

nav ul {
	list-style: none;
	padding: 0;
}

nav ul ul {
	display: none;
}

nav li {
	display: inline-block;
	padding: 0 18px 0 0;
	margin: 0 0 0 0;
	position: relative;
}

nav li a {
	display: block;
	padding: 8px 0;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

nav li a:hover {
	border-bottom: 2px solid #505050;
}

nav a:focus, nav .current-menu-item > a, nav .current-menu-ancestor > a, nav .current_page_item > a, nav .current_page_ancestor > a {
	border-bottom: 2px solid #505050;
	text-decoration: none;
}

/*Nav for screen 601px and higher*/
@media screen and (min-width: 601px) {
	nav ul ul {
		text-align: left;
		float: left;
		margin: 0;
		position: absolute;
		left: 0;
		width: 100%;
		z-index: 99999;
		background-color: transparent;
	}
	nav ul ul li:first-child {padding-left:12px;}
	nav ul ul li a {
		background: #A8A39D !important;
		border-bottom: 2px solid #A8A39D;
		color: #495370;
		height: auto;
		margin: 0;
		padding: 6px 12px !important;
		text-align:left;
	}
	nav ul ul :hover > a {
		color: #FFF !important;
	}
	nav ul li:hover > ul {
		display: block;
	}
}

/***** SEARCH *****/

#searchform input {
	margin: 3px 0 0 0;
	padding: 6px;
	font-size: 1.1rem;
	border: 1px solid #343848;
	width:100%;
}

#searchform span {
	display: none;
}

/***** ENTRY *****/

.entry {
	text-align:left;
	position:relative;
}

.entry ul, .entry ol{
	margin: 0 0 8px 2em;
	list-style-position: inside;
}

.entry ul ul{
	margin-left: 1em;
}

.navigation {
	margin-top:12px;
	clear:both;
}

.navigation #left {
	float:right;
}

.navigation #right {
	float:left;
}

.navigation a, .entry a.more-link, .entry a.more-link:visited {
	text-decoration:none;
	padding:7px 12px;
	margin: 0;
	text-align:right;
	cursor: pointer;
}

.navigation i {
	border: solid #FFF;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
}

.navigation .rightarrow {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.navigation .leftarrow {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}
.entry .nextpages a, a.more-link{
	margin: 1em 0;
	text-align: right;
}

p.postmetadata, .date, .tags {
	font-size: 0.9rem;
	margin:0 0 8px 0;
	padding:0;
	font-style: italic;
}

.aside {
	margin: 0 10px;
	padding: 8px;
	border-left: 5px solid #7CB490;
	background: #FFF2AF;
}

/***** ENTRY IMAGES *****/

figure {margin-inline-start: 0;margin-inline-end: 0;}

.wp-block-image figcaption {
	padding: 4px 0;
	margin: 0;
	font-style: italic;
}

.entry img {
	max-width: 100%;
	height: auto;
	overflow: hidden;
}

.entry .alignright {
	float: right;
	margin: 0 0 1% 3%;
	padding: 1%;
}

img .alignleft {
	float: left;
	margin: 0 18px 8px 0;
}

.entry .aligncenter{
	margin: 5px auto;
}

a img {
	padding: 0px;
	background: none;
	border: none;
}

.sticky, .bypostauthor {
}

.entry img.attachment-thumbnail, .entry img.attachment-medium {
	float:left;
	margin: 0 32px 12px 0;
	width:auto;
	height:auto;
}

.entry img.attachment-post-thumbnail {
	margin: 0 auto 32px;
	padding: 0;
	text-align: center;
	display: block;
	object-fit: cover;
}

alt{color:red}

/***** GRID *****/

.imagegrid {
	display: grid;
	grid-template-columns: 31.333% 31.333% 31.333%;
	grid-gap: 3%;
	grid-row-gap: 3em;
	margin: 32px 0;
}

.box .image {opacity: 0.9;transition: .5s ease;}

.box .image:hover {opacity: 1;}

.box:hover .overlayfade {
  opacity: 0;
}

.box a {text-decoration: none;}
.box h2, .box p {margin:0  !important;padding:0 !important;border-bottom: none !important;}
.box a h2 {font-size:1.2rem;}
.box p {font-size:0.8rem;}

@media only screen and (max-width : 700px) {.imagegrid {grid-template-columns: 31.333% 31.333% 31.333%;}}
@media only screen and (max-width: 400px) {.imagegrid {grid-template-columns: 48.5% 48.5%;}}

/***** FOOTER *****/

footer {
	background: rgba(52,56,72,0.9);
}

#footercontent{
	text-align:left;
	padding: 32px 32px ;
}

#footercontent h2 {
	margin: 0 0 8px 0;
}

#footercontent p, #footercontent .textwidget {
	margin: 0 0 8px 0;
	line-height: 150%;
}

#footercontent img {
	max-width:100%;
	height:auto;
	overflow: hidden;
}

#footercontent p a:hover {
	text-decoration: underline;
}

/***** LEFT FOOTER MENU *****/

#left-footer ul{
	margin: 12px 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
}

#left-footer ul li {
	display: inline;
}

#left-footer ul li a {
	color: #CCC;
	text-decoration: none;
	padding: 3px 0 3px;
	display: inline-block;
}

#left-footer ul li a:hover {
	color: #FFF;
}

#left-footer .menu li + li:before{
	content: " / ";
	padding: 0 10px;
	color: #FFF;
}

/* Header Image */
.hometop-background {
	background-position: center;
	background-size: cover;
	opacity:1;
	transform: translateZ(0);
}

.hometop {
	clear: both;
}

.hometopcontent {
	max-width: 1250px;
	padding: 48px 32px;
	margin: 0 auto;
}

.hometop p {margin:18px 0 0 0;padding:0;}

/* Home Widget */
.header-image {
	background-position: center;
	background-size: cover;
	opacity:1;
	transform: translateZ(0);
	height:100px;
}

.header-image .content {opacity:0; position: absolute;top: 10px;left:10px;color:#FFF;padding:5px;}
.header-image:hover .content {opacity:1;background: rgba(204, 204, 204, 0.8);}

/* Signoff */

.signoffcontent {
	margin: 0 auto;
	padding: 32px 32px 24px 32px;
	max-width: 1250px;
}
.signoff h1, .signoff h1 a:link, .signoff h1 a:hover, .signoff h1 a:visited {border-bottom: none !important;}

.signoff p {margin:18px 0 0 0;padding:0;}

/* CTA Widget */
.hometopcta {
	float:right;
	width: 300px;
	height: auto;
	padding: 12px;
	margin-left: 32px;
}

.hometopcta .telephone {font-size: 1.4em;}
.hometopcta .button a {display:block;padding: 6px;text-align:center;text-decoration: none;}

/***** COMMENTS *****/

#comments {border-top: 1px solid #343848;margin-top:32px;padding-top:32px;}
#comments ol, #comments ul{margin: 0;padding: 0;list-style: none;}
#comments li{margin:0;padding:0;}
#comments ol.commentlist li {margin-bottom: 24px;padding-bottom: 24px; border-bottom: 1px solid #ccc;}
#comments ol.commentlist li:last-of-type {margin-bottom: 0;border-bottom: none;}
#comments ul.children li {margin: 0 0 16px 32px;padding:0;border:none;}
#comments .comment-content {margin: 0;padding:0}
#comments.comment-notes, #comments.form-allowed-tags, #comments.comment-form-comment label {display: none;}
#comments div.reply {text-align: right;}
#comments div a.comment-reply-link {text-decoration: none;color: #888888;}
#comments p {margin: 3px 0;}

/***** TESTIMONIALS *****/

.testimonial {margin-bottom: 12px;border: 1px solid #707070;padding: 18px;}

/***** FORMS *****/

.tradesman-form {text-align: left;margin: 0 0 10px 0;max-width:100%;overflow:hidden;width:100%;}
.tradesman-form input, .tradesman-form textarea, textarea, .tradesman-form select, #submit {margin: 2px 0 3px 0;padding: 6px;height:auto;width: 100%;box-sizing: border-box;font-family:inherit;font-size:inherit;-webkit-appearance: none;}

.tradesman-form .required {border: 1px solid #505050 !important;}
.tradesman-form .validator {margin-left: -999px;height:0;}
.tradesman-form .smallinput {width:3em !important;}

.tradesman-form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.tradesman-form .select-container {position:relative; display: inline;}
.tradesman-form .select-container:after {content:""; width:0; height:0; position:absolute; pointer-events: none;}
.tradesman-form .select-container:after {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	top: .3em;
	right: .75em;
	border-top: 8px solid black;
	opacity: 0.5;
}
.tradesman-form select::-ms-expand {display: none;}

.tradesman-form p span, .tradesman-form .error {color:#D31900;clear:both;}
.tradesman-form p {margin: 4px 0;}
.tradesman-form input[type=text].error, .tradesman-form textarea.error {border: 1px solid #D31900 !important; }
.tradesman-form .validator {margin-left: -999px;height:0;}

.tradesman-form #submit {text-align: center;cursor: pointer;border:none;}

.form-allowed-tags {display:none;}
#ui-datepicker-div {display:none;}

/***** LIGHTBOX *****/

#lightbox {position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;z-index:901;}
#lightbox #content { width: 100%; height: 100%; }
#lightbox img { display: block; max-width: 90vw; max-height: 90vh; }
#lightbox p  {margin:0;padding:0;}
#boxything { 
	position: absolute; display: inline-block; text-align: center; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); top: 50%; left: 50%;  
	box-shadow:0 0 25px #111;
	-webkit-box-shadow:0 0 25px #111;
	-moz-box-shadow:0 0 25px #111;
}
#boxything p {position:absolute; bottom: 0.3em; padding: 0.3em; max-width: 100%; text-align:center; background: rgba(255,255,255,.5);  left: 0.3em; right: 0.3em; }
#lightbox p span {}
#boxyclose { position: fixed; top: 0.3em; right: 0.3em; width: 30px; height: 30px; background-image: url('assets/close.png'); cursor: pointer; }

/***** IPHONE *****/

textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}

/***** CLONED MENU *****/

.cloned { top: 0; left: 0; right: 0; position: fixed; margin: 0 auto 1px; display: none;}

/***** Styles for screen 960px and lower *****/

@media only screen and (max-width: 960px) {
	body {font-size:0.9em;}
	h1 {font-size: 1.4rem;}
	h2 {font-size: 1.2rem;}
	h4 {font-size: 0.9rem;}
	nav {font-size: 0.9rem;}
	nav li {padding-right: 12px;}
	nav a {margin:0;padding:0;}
	#headercontent {padding: 18px 18px 0 18px;}
	#maincontent {padding: 12px 18px 0;margin: 0 auto 18px;}
	#fadedbar {margin-bottom: 8px;width:60%;height:2px;}
	#footercontent, #comments, .hometopcontent, .signoffcontent {padding: 18px;}
	#maincontent p, #maincontent ul, #maincontent ol, #maincontent p {margin-bottom: 12px;line-height: 140%;}
	#comments ul.children li {margin: 0 0 0 18px;}
	#logo img {margin: 0 8px 0 0;}
	#logo-title {font-size:2rem;}
	#logo-tagline {font-size: 1.4rem;}
	.hometop p, .signoff p {margin:12px 0 0 0;}
	.navbar {padding: 0 18px 12px 18px;}
	.imagegrid {margin-top: 12px;}
	.entry p {margin-bottom: 6px;}
	.box .overlay {padding: 4px 0 8px 0;}
	.box a h2 {font-size:0.8rem;}
	.box p {font-size:0.5rem;}
}

/***** Styles for screen 600px and lower *****/

@media only screen and (max-width: 600px) {
	body {font-size:0.8em;}
	h1 {font-size: 1.2rem;}
	h2 {font-size: 1rem;}
	h4 {font-size: 0.8rem;}
	nav {font-size: 0.8rem;}
	nav li a {padding: 5px 0;}
	nav {position: relative;margin: 0; }
	.navbar > div ul {margin: 0;}
	.navbar > div {position: relative; display: none; }
	nav ul li { display: inline-block; width: 49%; }
	nav ul li a { display: block; border: 0 !important; text-decoration: none !important; }
	nav ul li:nth-child(odd) {float: left;}
	nav ul li:nth-child(even) {float: right;}
	nav ul li  > ul.sub-menu, nav ul li:hover > ul.sub-menu {visibility:hidden;}
	#logo-title {font-size:1.2rem;}
	#logo-tagline {font-size: 1rem;}
	#maincontent p, #maincontent ul, #maincontent ol, #maincontent p {margin-bottom: 10px;line-height: 120%;}
	#left-footer li + li:before{padding: 0 4px;}
	.hometop p, .signoff p {margin:8px 0 0 0;}
	.hometopcta {clear:both;width:40%;margin-left:10px;padding:6px;}
	.hometopcta .telephone {font-size: 1.1em;}
	.entry p {margin-bottom: 4px;}
	.attachment-post-thumbnail{width:100% !important;}
	.navigation a {font-size: 0.8rem;}
	.imagegrid {grid-row-gap: 0.5em;}
}

/* WordPress Core
-------------------------------------------------------------- */
.alignnone {
	margin: 5px 20px 20px 0;
}

.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;
}

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;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}
.gallery-caption {
	color: #D70807;
}

.bypostauthor {
	font-weight: 600;
}