/*
Theme Name: 
Theme URI: 
Description: Bespoke Theme developed by Adrian @ AlphaWebServices.net
Author: Adrian Jones
Version: 1.0
License: 
License URI: 
Tags: 
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;500;700&display=swap');

*		{margin: 0; border: 0; padding: 0; outline: 0; box-sizing: border-box;}
p, a, small, li, textarea, input, label, td, tr, .gform_confirmation_message, div, .uabb-adv-accordion-content p {font-family: 'Montserrat', sans-serif; font-weight: 300;}
h1, h2, h3, h4, h5		{font-family: 'Barlow Condensed', sans-serif;}
.clear		{clear: both;}
a		{text-decoration: none;}
html		{overflow-y: scroll; background-color: #fff; scroll-behavior: smooth;}
ul		{list-style-type: none;}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}
img         {max-width: 100%; max-height: 100%;}

.wide-wrap		{width: 1400px; margin: 0 auto; position: relative;}
.wrapper        {width: 1000px; margin: 0 auto; position: relative;}
.wide-wrap:after,
.wrapper:after  {content: ""; display: block; clear: both;}

.section        {padding: 80px 0;}
.centered       {text-align: center;}

#top			{padding: 25px 15px; position: relative;}
#top:after		{content: ""; display: block; clear: both;}
#top > i		{display: none; color: #626262; font-size: 28px; float: left; cursor: pointer;}
#top ul li		{display: inline-block; vertical-align: middle;}
#top ul li + li	{margin-left: 40px;}
#top ul li a	{font-size: 14px; font-weight: 500; text-transform: uppercase; color: #626262; letter-spacing: 3px;}
#top .menu		{float: left;}
#top .social	{float: right;}
#top .social li:last-of-type	{margin-left: 10px;}
#top .social li i		{font-size: 18px;}
#top a:hover	{font-weight: 900; color: #5bc1cd;}

#head			{height: 650px;}
#head .logo		{position: absolute; left: 50%; transform: translatex(-50%); top: -30px;}
#head .flex		{display: flex; height: 100%; align-items: center; justify-content: center;}
#head .flex > div	{color: #fff; position: relative;}
#head .flex > div h1		{font-size: 68px; letter-spacing: 2px; line-height: 100%;}
#head .flex > div p			{font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 32px; letter-spacing: 1px;}
#head .flex > div a			{position: absolute; text-transform: uppercase; font-size: 14px; font-weight: 900; letter-spacing: 2px; color: #fff; padding: 20px 50px; background: #bec242; left: 50%; transform: translatex(-50%); bottom: -150px;}
#head .flex > div a:hover	{background: #fff; color: #bec242;}

.content h2		{font-size: 60px; letter-spacing: 1px;}
.content h2 span	{font-weight: 300;}
.content h2 + *	{margin-top: 15px;}
.content p		{font-size: 18px; color: #404041; line-height: 160%; letter-spacing: 1px;}
.content * + p	{margin-top: 25px;}
.content ul:not(.slides):not(.service-list)		{margin-top: 20px; padding-left: 20px;}
.content ul:not(.slides):not(.service-list) li		{font-size: 18px; color: #404041; padding: 4px 0; letter-spacing: 1px; list-style-type: disc;}

.intro h3		{font-weight: 300; font-size: 28px; color: #15a4c0; letter-spacing: 1px;}
.intro a:last-of-type		{display: inline-block; text-transform: uppercase; font-size: 14px; font-weight: 900; letter-spacing: 2px; color: #fff; padding: 20px 50px; background: #15a4c0; margin-top: 30px;}
.intro a:last-of-type:hover	{background: #bec242;}

#services		{background: #d3edf1;}
#services ul	{display: flex; flex-wrap: wrap; justify-content: space-between; text-align: left; margin-top: 50px;}
#services ul li	{width: 33%; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; margin-bottom: 30px; padding-left: 30px; position: relative;}
#services ul li:before	{content: ""; display: block; height: 10px; width: 10px; border-radius: 10px; background: #72b1b6; border: 4px solid #a3dae4; position: absolute; top: 9px; left: 0;}
#services ul li span	{font-weight: 300;}
#services img	{display: inline-block;}
#services .bottom-content p		{font-family: 'Barlow Condensed', sans-serif; font-weight: 300; font-size: 30px;}
#services .bottom-content p + *	{margin-top: 20px;}
#services .bottom-content a		{font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: #000;}

#about .flex		{display: flex;}
#about .flex > div	{width: 50%;}
#about .flex img	{object-fit: cover; object-position: center;}
#about .top .left	{background: url(images/about-bg.jpg) no-repeat center; background-size: cover; display: flex; justify-content: flex-end;}
#about .bottom .right	{background: url(images/about-bg2.jpg) no-repeat center; background-size: cover;}
#about .top .left .inner		{width: 700px; padding: 80px 80px 80px 0;}
#about .bottom .right .inner		{width: 700px; padding: 80px 0 80px 80px;}

#testimonials		{background: #404041; color: #fff;}
#testimonials h2	{color: #a8dce4;}
#testimonials p		{color: #fff;}
#testimonials p.name	{font-weight: 500; text-transform: uppercase; font-size: 18px;}
#testimonials p.location	{font-weight: 300; color: #c1d65a; margin: 0;}
#testimonials .flexslider	{margin-bottom: 40px;}

#contact			{background: url(images/contact-bg.jpg) no-repeat center; background-size: cover;}
#contact p			{font-family: 'Barlow Condensed', sans-serif; font-weight: 300; font-size: 30px;}
#contact a			{display: inline-block; text-transform: uppercase; font-size: 14px; font-weight: 900; letter-spacing: 2px; color: #fff; padding: 20px 50px; background: #15a3bf; margin-top: 30px;}
#contact a:hover	{background: #fff; color: #15a3bf;}

#footer	ul li		{display: inline-block; margin: 0 7px;}
#footer a			{color: #15a3bf;}
#footer ul li i		{font-size: 22px; color: #15a3bf;}
#footer p			{text-transform: uppercase; letter-spacing: 1px; font-size: 12px; margin-top: 20px;}
#footer a:hover,
#footer a:hover i	{color: #bec242;}

@media all and (max-width : 1400px) {
	.wide-wrap		{width: auto; padding-left: 15px; padding-right: 15px;}
	#about .top .left .inner,
	#about .bottom .right .inner	{width: auto; padding: 80px 40px;}
}

@media all and (max-width : 1200px) {
	#top ul li + li		{margin-left: 20px;}
}

@media all and (max-width : 1000px) {
	.wrapper		{width: auto; padding-left: 15px!important; padding-right: 15px!important;}
	.wide-wrap .wrapper		{padding-left: 0!important; padding-right: 0!important;}
	#services ul li		{padding-right: 40px;}
	#top > i		{display: block;}
	#top .menu		{float: none; position: absolute; display: none; background: #fff; top: 100%; left: 15px; padding: 15px; z-index: 999;}
	#top .menu li	{display: block;}
	#top .menu li + li	{margin: 15px 0 0;}
	#head			{height: auto; padding: 50px 0 80px;}
	#head .flex		{display: block; text-align: center;}
	#head .logo		{position: static; transform: none; display: inline-block; margin-bottom: 50px;}
	#head .flex > div a	{position: static; transform: none; display: inline-block; margin-top: 30px;}
	#head .flex > div h1		{font-size: 54px;}
	#head .flex > div p			{font-size: 28px;}
	#about .flex	{flex-wrap: wrap;}
	#about .flex > div		{width: 100%;}
	#about .top .right:before,
	#about .bottom .left:before	{content: ""; display: block; padding-top: 50%;}
	#about .bottom .left	{order: 2;}
}

@media all and (max-width : 768px) {
	#head .logo		{max-width: 50%;}
	.content h2		{font-size: 48px;}
	.intro h3		{font-size: 22px;}
	#services ul li		{width: 50%;}
	#about .top .left .inner,
	#about .bottom .right .inner	{padding: 80px 15px;}
}

@media all and (max-width : 576px) {
	#top		{padding: 15px;}
	#top ul.social li:first-of-type		{display: none;}
	#head .logo		{max-width: 70%;}
	#head .flex > div h1,
	.content h2		{font-size: 42px;}
	#head .flex > div p	{font-size: 24px; margin-top: 20px;}
	.section		{padding: 50px 0;}
	#services ul li		{width: 100%;}
	#about .top .left .inner,
	#about .bottom .right .inner	{padding: 50px 15px;}
	#about .top .right:before,
	#about .bottom .left:before	{content: ""; display: block; padding-top: 70%;}
}