/*
Theme Name: Fifteen IT Ltd
Theme URI: http://fifteenit.co.uk/
Author: Fifteen IT
Author URI: http://fifteenit.co.uk
Version: 1
*/

/*----- Reset -----*/

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: 12pt;
	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;
}
html {
	background:#333;	
}
body {
	line-height: 1;
	background:#fff;
}
ol, ul {
	list-style: none;
}
li {
	list-style:inside;	
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

strong {
	font-weight:700;
}	

ol, ul {
	margin:0 0 12pt;	
}

ol li {
	list-style:decimal inside;	
}

p {
	margin-bottom:12pt;	
}

img {
	max-width:100%;
	height:auto;	
}

/*----- Start of site styles -----*/

/* fonts */

	h1,h2,h3,h4 {
		font-weight:700;
    	font-family: 'PT Sans', sans-serif;
	}
	
	body,html,span,p,h5,h6,h7,h8,h9,a,textarea {
		font-family: 'Roboto', sans-serif;
	}
	
	h1, h1 a {
		font-size:28pt;
	}
	
	h2,h2 a {
		font-size:25pt;	
	}
	
	h3,h3 a {
		font-size:22pt;	
	}
	
	h4,h4 a {
		font-size:18pt;	
	}
	
	strong {
		font-weight:700;	
	}
	
	a {
		color:#000;
		text-decoration: none;
		transition: all ease 0.4s;
	}
	
	a:hover {
		color:#e00d2b
	}
	
	textarea, input {
		font-size: 10pt;	
	}

/* General elements */

	.content {
		max-width:80%;
		height:auto;
		position:relative;
		margin:0 auto;	
	}
	
	.flexwrapper {
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;	
		align-items: flex-start;
		max-width:100%;
	}
	
	.flexwrapper > div {
		flex: 1 1 30%;;
	}	
	
	.alignmiddle {
		align-items:center;	 
	}
	
	.spacebetween {
		justify-content:space-between;	
	}
	
	.flex-wrap {
		flex-wrap:wrap;	
	}
	
	.column {
		flex-direction:column;
		min-height:150px;
		justify-content: center;
	}
	
	.even {
		flex:1 1 300px;
		padding:0 12pt;
	}
	
	.even:first-of-type {
		padding-left:0;	
	}
	
	.even:last-of-type {
		padding-right:0;	
	}
	
	.field {
		padding:6pt;
		border: solid thin #e00d2b;	
		box-sizing:border-box;
		width:100%;
		max-width:400px;
		margin:6pt 0;
	}
	
	.wpcf7 p:first-of-type .field {
		margin-top:0;	
	}
	
	.recaptcha {
		margin-top:6pt;	
	}
	
	.button, button, .wpcf7-submit button{
		padding: 0;
		display:inline-block;
		font-size: 12pt;
		margin: 12pt auto;
		margin-right: auto;
		max-width: 250px;
		background-color: #ddd;
		transition: ease all .4s;
		color: #000;
		overflow:hidden;
		position:relative;
		border: thin solid #e00d2b;
		border-radius:3px;
	}	
	
	.button span {
		transition: all ease 0.3s;	
	}
	
	.buttontext {
		display:block;
		padding:8pt 33pt;	
		transition: ease all 0.4s;
	}
	
	
	.button:hover .buttontext, .button:active .buttontext {
		padding: 8pt 50pt 8pt 16pt;	
	}
	
	.buttonicon {
		position:absolute;	
		top:50%;
		transform:translateY(-50%);
		padding:12pt;
		background:#fff;
		
		-webkit-box-shadow: inset 4px 0px 6px 0px rgba(0,0,0,0.2);
		-moz-box-shadow: inset 4px 0px 6px 0px rgba(0,0,0,0.2);
		box-shadow: inset 4px 0px 6px 0px rgba(0,0,0,0.2);
	}
	
	.leftborder.buttonicon {
		display:block;
		position:absolute;
		left:-50px;	
	}
	
	.rightborder.buttonicon {
		display:block;
		position:absolute;
		right:-50px;	
	}
	
	.button:hover .leftborder.buttonicon {
		left:0pt;
	}
	
	.button:hover .rightborder.buttonicon {
		right: 0pt;
	}
	
	.button:hover .buttontext, .button:active .buttontext {
		background:#e00d2b;
		color:#fff;	
	}

	
	.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;
	}
	
/* Header */
	
	.site-logo {
		flex:200px !important;	
	}
	
/* Menu */	

	.topbar {
		text-align:right;
		padding:8pt 0;
		background: #333;
		color:#fff;
	}
	
	.topbar a {
		color:#fff;
		padding-left:12pt;
		text-decoration:none;
		transition:ease all 0.4s;
	}
	
	.topbar a:hover {
		color:#e00d2b;	
	}
	
	.topbar a * {
		vertical-align:middle;
	}
	
	.mainnavmenu li {
		display:inline-block;
	}
	
	.mainnavmenu li a {
		color: #333;
		text-decoration:none;
		padding:12pt;
		display:block;
		transition:ease all 0.4s;
		font-family: 'PT Sans', sans-serif;
		font-weight:700;
	}
	
	.mainnavmenu li a:hover {
		color:#e00d2b;	
	}
		
	.mainnavmenu li:last-of-type a {
		padding:12pt 0 12pt 12pt;
	}
	
	.shiftnav-main-toggle-content.shiftnav-toggle-main-block a {
		display:none;
	}

/* Block template elements */

	.section-title {
		font-size:30pt;	
		text-align:center;
		margin-bottom:24pt;
	}

	.section-background {
		background-size:cover;
		background-position: center;
		line-height:0;
		overflow:hidden;
		height:auto;	
	}
	
	.section p {
		margin-bottom:12pt;	
	}
	
	.section p:last-of-type {
		margin-bottom: 0;	
	}
	
	.overlay {
		margin:24pt auto;
		padding:48pt;
		line-height:1;
	}
	
	.split-overlay {
		max-width:60%	
	}
	
	.colourbg .content {
		width:calc(80% - 48pt);	
	}
	
	.colourbg {
		padding:24pt 0;	
	}
		
	body > div {
		overflow:hidden;	
	}
	
/*	.slides {
		display:flex;	
		justify-content:center;
	}
*/	
	.gallery {
		padding:24pt 0;	
	}
	
	.fancybox-wrapper {
		padding:0 12pt;	
	}
	
	.block img {
		display:block;	
	}
	
	.splitwrapper {
		align-items:center;	
	}
	
	.split .block {
		flex:1;
		overflow:hidden;	
	}
	
	.splitcontent {
		display:flex;
		justify-content: center;
		align-items:center;	
	}
	
	.split .block img {
		max-width:100%;
		height:auto;	
	}
	
	.split .imageleft img {
		margin: 0 auto 0 0;	
	}
	
	.split .imageright img {
		margin: 0 0 0 auto;
	}
	
	.splitcontent {
		padding:24pt 0;	
	}
	
	.shortcode .stats {
		flex:1;
		text-align:center;
	}
	
	.stat-value {
		font-size: 36pt;
		font-weight:700;	
	}
	
	.top {
		border-top:solid thick;	
	}
	
	.bottom {
		border-bottom:solid thick;	
	}
	
	.left {
		border-left:solid thick;	
	}
	
	.right {
		border-right:solid thick;	
	}
	/* Multiple Column specific */
	
	.columnwrapper {
		padding-right:12pt;
	}	
	
	.columnwrapper:last-of-type {
		padding:0 !important;	
	}
	
	.columnwrapper {
		max-width:100%;
	}
	
	.sample-menu-list li {
		list-style:none;
	}
	
	.column-content img {
		max-width:100%;
		height:auto;	
	}

	/* Flex Slider Override */
	
	.fancybox-wrapper {
		flex-basis: 20%;
		display: block;
		margin: 0;
		overflow: hidden;
		line-height: 0;
	}
	
	.fancybox-slides {
		display:flex;
		flex-wrap:wrap;
		justify-content:flex-start;
			
	}
	
	.image-slide {
		position:relative;	
	}
	
	.image-slide .content {
		position:absolute;
		top:0;
		left:10%;
		right:10%;
		bottom:0;
	
	}
	
	.slide-overlay {
		position:absolute;
		padding:24pt;
		background:rgba(0,0,0,0.5);
		color:#fff;
		border:none; 
	}
	
	.slide-overlay * {
		color:#fff;
	}
	
	.slide-overlay.top {
		top:24pt;	
		left:50%;
		transform:translateX(-50%);
	}
	
	.slide-overlay.top-left {
		top:24pt;
		left:0pt;
	}
	
	.slide-overlay.top-right {
		top:24pt;
		right:0pt;
	}
	
	.slide-overlay.middle {
		top:50%;
		left:50%;
		transform:translateY(-50%);
		transform:translateX(-50%);
	}
	
	.slide-overlay.left {
		top:50%;
		left:0pt;
		transform:translateY(-50%);
	}
	
	.slide-overlay.right {
		top:50%;
		right:0pt;
		transform:translateY(-50%);
	}
	
	.slide-overlay.bottom-left {
		bottom:24pt;
		left:0pt;
	}
	
	.slide-overlay.bottom {
		bottom:24pt;
		left:50%;
		transform:translateX(-50%);
	}
	
	.slide-overlay.bottom-right {
		bottom:24pt;
		right:0pt;
	}
	
	.flex-direction-nav {
		overflow:hidden;	
	}
	
	/* Services */
	
	.services-listing {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
		height: auto;
		padding-bottom: 36pt;
	}	
	
	.services {
		flex-basis:250px;	
		list-style:none;
		text-align:center;
		margin:0 12pt;
		background:#e00d2b;
	}
	
	 .services-thumb {
		z-index:100; 
	 }
		
	.services-thumb img {
		max-width:100%;
		height:auto;
	}
	
	.services a {
		font-weight:bold; 	
	}
	
	.services-excerpt {
		color: #fff;
		transform: skewY(-10deg);
		box-sizing: border-box;
		background: #e00d2b;
		margin-top: 18pt;
		margin-bottom: -18pt;
		-webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.25);
		-moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.25);
		box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.25);
		transition: ease all 0.2s;
	}	
	
	.services-excerpt-content {
		transform:skewY(10deg);
		padding:12pt 12pt 42pt;
	}
	
	.entry-title {
		margin-bottom:8pt;	
	}
	
	.services-excerpt-content ul {
		text-align:left;	
	}
	
	/* Page Piling Override */
	
/*	#pp-nav li .active span, .pp-slidesNav .active span {
		background: #fff;
	}
	
	#pp-nav span, .pp-slidesNav span {
		transition: ease all 1s;	
	}

	.prev {
		position:absolute;
		top:50vh;
		left:0;
		z-index:100;
		font-size:25pt;
	}
	
	.next {
		position:absolute;
		top:50vh;
		right:0;
		z-index:100;
		font-size:25pt;
	}
*/	
	/* Contact Form */ 
	
/*	input[type="text"], input[type="email"], select, textarea, input[type="number"], input[type="tel"], input[type="password"] {
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		display: inline-block;
		font-size: 10pt;
		margin: 6pt 0;
		padding: 6pt;
		width: auto;
		font-size: 10pt;
		max-width: 100%;
	}
*/	
	.field {
		display: block !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 400px !important;
		border-radius:3px;
	}	
	
/*	.button, button, .wpcf7-submit button{
		padding: 8pt;
		text-align: center;
		font-size: 12pt;
		border: solid thin #444;
		display: block;
		margin: 12pt auto;
		margin-right: auto;
		max-width: 180px;
		background-color: #eee;
		transition: ease all .4s;
		color: #000;
	}	
*/	
	/* Google Maps adjustment */
	
	.map-responsive{
		overflow:hidden;
		padding-bottom:56.25%;
		position:relative;
		height:0;
		margin-bottom:24pt;
	}
	.map-responsive iframe{
		left:0;
		top:0;
		height:100%;
		width:100%;
		position:absolute;
	}	
/* Body */

	.page-title {
		text-align:center; 
		margin-bottom: 12pt;	
	}
	
	.page {
		padding:24pt 0;	
	}
	
	.page h2, .page h3, .page h4 {
		margin-bottom:12pt;	
	}
	
	
/* portfolio */
	
	.portfolio {
		background:#e00d2b;
		color:#fff;
		max-width:1024px;
		margin: 24pt auto;
		border: solid medium #e00d2b;
	}
		
	.single-portfolio-content {
		padding:24pt;	
	}
	
	.single-portfolio-content a {
		color:#fff;	
	}
	
	.portfolio-content-section {
		margin-bottom:24pt;	
	}
	
	.portfolio-content-section:last-of-type {
		margin-bottom:0;	
	}
	
	.portfolio-social h3 {
		margin-bottom:12pt;	
	}
	
	.portfolio-social i {
		font-size:1.5em; 
		margin-right:12pt;	
	}
	
	.single-portfolio-title {
		margin: 0 auto 24pt;
		text-align:center;
	}
	
	.portfolio-content-section h3 {
		margin-bottom:24pt;	
	}
	
	.portfolio-entries {
		height:auto;
		overflow:hidden;
		justify-content: center;
	}	
	
	.portfolio-title {
		color:#fff;	
		font-size:14pt;
		text-align:center;
	}
	
	.portfolio-title a {
		color:#fff;	
		font-size:14pt;
	}
	
	.portfolio-entry {
		flex:0 0 250px !important;	
		background:#e00d2b;
		color:#fff;
		margin: 0 24pt 60pt;
	}
	
	.portfolio-excerpt {
		color: #fff;
		transform: skewY(-10deg);
		box-sizing: border-box;
		background: #e00d2b;
		margin-top: 18pt;
		margin-bottom: -18pt;
		-webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.25);
		-moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.25);
		box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.25);
		transition: ease all 0.2s;	
	}
	
	.portfolio-excerpt-content {
		transform: skewY(10deg);
		padding: 12pt 12pt 24pt;
	}	
	
	blockquote {
	  display: block;
	  border-width: 2px 0;
	  border-style: solid;
	  border-color: #fff;
	  padding: 1.5em 0 0.5em;
	  margin: 1.5em 0;
	  position: relative;
	}
	
	blockquote:before {
	  content: '\201C';
	  position: absolute;
	  top: 0em;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  background: #e00d2b;
	  width: 3rem;
	  height: 2rem;
	  font: 6em/1.08em 'PT Sans', sans-serif;
	  color: #fff;
	  text-align: center;
	}
	
	blockquote:after {
	  content: "\2013 \2003" attr(cite);
	  display: block;
	  text-align: right;
	  font-size: 0.875em;
	  color: #e74c3c;
	}	
	
/* Contact Page */

	.mapwrapper {
		background-color:#eee;	
	}
	
	.mapdirections {
		padding:12pt 0;	
		border-top:thin solid #e00d2b;
		border-bottom:thin solid #e00d2b;
	}
	
	.mapdirections input, .mapdirections .button {
		display:inline-block !important;
		vertical-align:middle;	
	}
	
	.mapdirections input {
		padding:9pt !important;
		margin:12pt 12pt 12pt 0;	
	}

	#map {
		height:400px;	
	}
	
/* Footer */

	.footer {
		padding:12pt 0;	
		background-color:#333;
		color:#fff;
	}
	
	.footerblock {
		/*flex:1;*/	
		padding: 12pt;
	}
	
	.footer-title {
		display:block;
		color:#b9b9b9;	
		margin-bottom:6pt;
		padding-bottom:6pt;
		border-bottom: thin solid #b9b9b9; 
	}
	
	.footernavmenu li {
		list-style:none;	
	}
	
	.footer a {
		transition:all 0.4s ease 0s;
		color:#fff;
		text-decoration:none;
	}
	
	.companyinfo {
		position:relative;
		padding-left:24pt;
	}
	
	.companyinfo a {
		font-weight:700;
	}
	
	.companyinfo .fa {
		position:absolute;
		left:0;
	}
	
	.value {
		display:block;	
	}
	
	.footer a:hover {
		color:#e00d2b;
	}

	.social .fab {
		font-size:1.5em;
		border-radius:50%;	
		border:2px solid #fff;
		text-align:center;
		padding:10px;
		height:17pt;
		width:17pt;
		color:#fff !important;
		transition:all 0.4s ease 0s;
	}
	
	.social .fab:hover {
		color: #e00d2b !important;
		border:2px solid #e00d2b;
	}
	
	.copyright {
		text-align:right;	
	}
	
	.copyright a {
		font-weight:700;
	}
	
@media only screen and ( min-width : 0px ) and ( max-width:600px ) {
	
	.topbar a {
		display:block;	
	}
	
	.topbar .facebook, .topbar .twitter, .topbar .googleplus {
		display:inline-block;	
	}
	
	.shortcode .stats {
		flex: 1 1 150px;	
	}
		
}

@media only screen and ( min-width : 0px ) and ( max-width:800px ) {
	
	.split .block {
		flex: 1 1 60%;	
	}
	
	.split .block .overlay {
		padding: 0 24pt;	
	}
	
	.imageleft, .imageright {
		max-width:400px;
		margin: 24pt auto 0;
	}

	.splitleft .flexwrapper {
		flex-direction: column-reverse;
	}

}

@media only screen and ( min-width : 0px ) and ( max-width:1200px ) {
	
	.services {
		margin-bottom:60pt;	
	}
	
	.services:last-of-type {
		margin-bottom:0;	
	}
	
	.splitwrapper .overlay {
		padding:24pt;
		max-width: 100%;
		margin:0;
	}
	
}