/*
Theme Name: Twenty Sixteen
Theme URI: https://wordpress.org/themes/twentysixteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentysixteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/*************************************************/
/******************** GENERAL ********************/
/*************************************************/

#container{
	max-width: 1500px;
	margin: 0 auto;
	overflow: hidden;
}

/***** GENERAL *****/
body {
	margin: 0; }

.wrapper {
	margin: 40px 100px; }

p {
	font-family: "proxima_novaregular";
	text-align: center;
	font-size: 24px; }

h1 {
	font-family: "proxima_novabold";
	text-align: center; }

a {
	font-family: "proxima_novaregular";
	text-align: center;
	display: block; }

li {
	font-family: "proxima_novaregular"; }

*,
*:after,
*:before {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

html {
	position: relative;
	height: 100%;
}

.clear:before,
.clear:after {
	content: ' ';
	display: table;
}

.clear:after {
	clear: both;
}
.clear {
	*zoom: 1;
}

img {
	max-width:100%;
	vertical-align: bottom;
}

a {
	text-decoration: none;
}

a:hover {
}

a:focus {
	outline:0;
}

a:hover, a:active {
	outline:0;
}

input:focus {
	outline:0;
	border: 0;
}

/*********************************************************************************************************************************************/
/********************************************************* MAIN 1200px+ **********************************************************************/
/*********************************************************************************************************************************************/
/********************************************************* MAIN 1200px+ **********************************************************************/
/*********************************************************************************************************************************************/
/********************************************************* MAIN 1200px+ **********************************************************************/
/*********************************************************************************************************************************************/

#staticBanner{
display: none;
}

/***** HEADER *****/
.mainHeader{
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 30;
	max-width: 1500px;
}
.headerBanner {
	position: absolute!important;
	top: 0;
	width: 100%;
	max-width: 1500px;
	height: 700px; }
.headerBannerTwo{
	background-color: #23262b;
	height: 120px;  }
.headerBanner .bannerTitle {
	color: white;
	padding: 300px 80px 0;
	font-size: 22px; }
.headerBanner .bannerTitle a {
	cursor: pointer;
	color: #23262b;
	background-color: #f0f0f0;
	border: 1px solid #f0f0f0;
	border-radius: 100px;
	text-decoration: none;
	width: 220px;
	padding: 10px 0;
	transition: all .5s ease;
	display: block;
	margin: 0 auto; }
.headerBanner .bannerTitle a:hover{
	background-color: #23262b;
	color: white;
	border: 1px solid #23262b;
}

.headerLogo {
	cursor: pointer;
	display: inline-block; }
.headerLogoTwo {
	cursor: pointer;
	max-width: 160px;
	display: inline-block; }
.headerLogo img, .headerLogoTwo img{
	margin: 5px 0 0 20px;  }
nav {
	display: inline-block;
	float: right;
	width: 66%;
	margin-top: 20px; }
nav ul {
	margin: 0;
	padding: 0;
	list-style: none; }
nav ul li {
	float: right;
	width: 32%;
	text-align: center;
	padding: 10px 20px;
	color: white;
	font-size: 22px;
	font-family: "proxima_novaregular"; }
nav ul li:nth-child(1) {
	padding: 5px 20px;
	width: 10%; }
nav ul li i {
	cursor: pointer;
	font-size: 36px !important; }
nav ul li a{
	color: white;
	transition: all .5s ease;
}
nav ul li a:hover{
	color: #000;
}

.navButton {
	cursor: pointer;
	color: #23262b;
	background-color: #f0f0f0;
	border: 1px solid #f0f0f0;
	transition: all .5s ease;
	border-radius: 100px; }
.navButton:hover{
	background-color: #23262b;
	border: 1px solid #23262b;
	color: white;
}
.navButton i {
	font-size: 24px !important; }

/***** SLIDEOUT NAV *****/
.slideoutNav {
	width: 300px;
	height: 100%;
	background-color: #23262b;
	color: #D8D8D8;
	transition: all .5s;
	position: fixed;
	top: 0;
	z-index: 30; }
.slideoutNav ul {
	margin: 0;
	padding: 0; }
.slideoutNav ul li {
	color: white;
	list-style: none;
	cursor: pointer;
	padding: 20px 0;
	text-align: center; }
.slideoutNav ul li i {
	font-size: 40px; }
.slideoutNav ul a {
	text-decoration: none; }
.slideoutNav ul a li {
	color: white;
	list-style: none;
	cursor: pointer;
	transition: all .5s ease;
	font-size: 22px;
	padding: 20px 0; }
.slideoutNav ul a li:hover{
	background-color: white;
	color: #23262b;
}
.mobileContactInfo p{
	color: white;
	font-size: 22px;
}
.mobileContactInfo a{
	color: white;
	transition: all .5s ease;
}
.mobileContactInfo a:hover{
	color: #000;
}

.navOpen {
	right: 0;
	transition: right .5s; }

.navClosed {
	right: -300px;
	transition: right .5s; }

.closeBurgerNav {
	display: none;
	z-index: 20; }

/***** QUOTE BUTTON *****/
.quoteContainer {
	height: 100vh;
	width: 100%;
	background-color: rgba(70, 70, 70, 0.88);
	color: #D8D8D8;
	transition: all .5s;
	position: fixed;
	overflow-y: auto;
	top: 0;
	max-width: 1500px;
	z-index: 100; }
.quoteContainer #quoteSlideDown li {
	color: #D8D8D8;
	list-style: none;
	cursor: pointer;
	padding: 20px 0;
	text-align: center; }
#formOne .wpcf7-response-output {
  border: 0;
  width: 70%;
  font-family: "proxima_novaregular";
  text-align: center;
  margin: 8vh 15% 10px;
  font-size: 3rem;
  line-height: 1.2;
  padding: 0; }
.quoteContainer #quoteSlideDown li p {
	margin: 0!important;
	text-align: right; }
.quoteContainer #quoteSlideDown li p i {
	font-size: 28px;
	padding: 0 20px; }
.quoteContainer #quoteSlideDown h1 {
	margin: 5px 0!important;
	color: white; }
.quoteContainer #quoteSlideDown #formOne {
	color: white; }
.quoteContainer #quoteSlideDown #formOne input {
	width: 100%;
	height: 50px;
	padding: 10px 0;
	margin: 5px 0;
	border-radius: 8px;
	text-align: center;
	color: white;
	font-size: 18px;
	background-color: #23262b;
	border: none; }
.quoteContainer #quoteSlideDown #formOne input::-webkit-input-placeholder {
	color: white;
	font-size: 18px; }
.quoteContainer #quoteSlideDown #formOne .formNext {
	width: 100%;
	height: 70px;
	margin: 5px 0;
	border-radius: 8px;
	text-align: center;
	color: #23262b;
	font-size: 20px;
	background-color: #D8D8D8;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center; }
.quoteContainer #quoteSlideDown #formOne .formNext p {
	margin: 0; }
.quoteContainer #quoteSlideDown #formOne .formNext p i {
	padding: 0 10px; }
.quoteContainer #quoteSlideDown #formOne form.wpcf7-form {
    	width: 90%;
    	margin: auto; }
.quoteContainer #quoteSlideDown #formOne form .wpcf7-form p {
    	text-align: center; }
.quoteContainer #quoteSlideDown #formOne textarea {
	width: 100%;
	height: 140px;
	padding: 15px 0;
	margin: 5px 0;
	border-radius: 8px;
	text-align: center;
	color: white;
	font-size: 18px;
	background-color: #23262b;
	border: none; }
.quoteContainer #quoteSlideDown #formOne .g-recaptcha > div {
    margin: auto; }
.quoteContainer #quoteSlideDown #formOne textarea::-webkit-input-placeholder {
	color: white;
	font-size: 20px; }
.quoteContainer #quoteSlideDown #formOne .formBack {
	width: 100%;
	height: 70px;
	margin: 5px 0;
	border-radius: 8px;
	text-align: center;
	color: #23262b;
	font-size: 20px;
	background-color: #D8D8D8;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center; }
.quoteContainer #quoteSlideDown #formOne .formBack p {
	margin: 0; }
.quoteContainer #quoteSlideDown #formOne .formBack p i {
	padding: 0 10px; }
.quoteContainer #quoteSlideDown #formOne .formSubmit {
	width: 100%;
	height: 50px;
	margin: 10px 0;
	border-radius: 8px;
	text-align: center;
	color: #23262b;
	font-size: 18px;
	background-color: #D8D8D8;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center; }

.formHide {
	display: none; }

.formShow {
	display: block; }

.closeQuoteButton {
	display: none;
	z-index: 20;
	text-align: right !important;
	padding: 10px 30px !important; }

.quoteOpen {
	top: 0;
	transition: top .5s; }

.quoteClosed {
	top: -100%;
	transition: top .5s; }

/**************************/
/********** HOME **********/
/**************************/
/***** CLIENT SLIDER *****/
#clientSlider {
	background-color: #23262b;
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 110px; }
.clientLogo{

}
.slick-slide{
	height: auto!important;
}
.slick-slide img {
	margin: 0 auto;
	padding: 20px 0; }

/***** ABOUT *****/
#aboutSection h1 {
	text-align: center;
	color: #23262b; }
#aboutSection p {
	text-align: center;
	color: #23262b; }

/***** OUR SERVICES *****/
.servicesLink{
padding-top: 20px
}
.servicesLink a{
	color: white;
	padding: 20px 0;
	font-size: 21px;
}
.panelClick{
	display: none;
}
#ourServicesSection {
	background-color: #23262b;
	padding: 20px 40px; }
#ourServicesSection h1 {
	margin: 10px 0;
	color: white; }
#ourServicesSection #ourServicesPanelsContainerRoof, #ourServicesSection #ourServicesPanelsContainerProperty {
	padding-bottom: 0px; }
#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels {
	display: flex;
	justify-content: space-around;
	padding-top: 10px; }
#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels {
	width: 32.5%;
	height: 260px;
	display: flex;
	flex-direction: column;
	justify-content: center; }
#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels p, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels p {
	color: white;
	padding: 0 10px;
	font-size: 26px; }
#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels a, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels a {
	color: white;
	text-decoration: underline;
	font-style: italic;
	font-size: 20px;
	padding: 0 30px; }
#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels span, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels span {
	display: none;
	color: #fff; }
#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover span, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover span {
	display: block;
	text-align: center;
	font-family: "proxima_novaregular";
	padding: 0 10px; }
#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover p, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover p {
	display: none; }
#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover a, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover a {
	display: none; }
#ourServicesSection #ourServicesPanelsContainerProperty a {
	text-decoration: none !important;
	font-style: normal !important; }

/***** WHY CHOOSE *****/
#whyChoose h1 {
	color: #23262b; }
#whyChoose a{
	color: white;
	border-radius: 100px;
	padding: 10px 20px;
	background-color: #23262b;
	width: 250px;
	margin: 15px auto;
	border: 1px solid #23262b;
	transition: all .5s ease;
}
#whyChoose a:hover{
	background-color: white;
	color: #23262b;
}
#whyChoose #whyChooseCircles {
	display: flex;
	justify-content: space-between; }
#whyChoose #whyChooseCircles .circlesContainer {
	width: 30%; }
#whyChoose #whyChooseCircles .circlesContainer .circles {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: #D8D8D8;
	border: 1px solid #23262b;
	display: flex;
	margin: 0 auto;
	transition: 1s ease-in-out; }
#whyChoose #whyChooseCircles .circlesContainer .circles:hover {
	background-color: #23262b;
	transition: 1s ease-in-out; }
#whyChoose #whyChooseCircles .circlesContainer .circles:hover i {
	color: white;
	transition: 0.8s ease-in-out; }
#whyChoose #whyChooseCircles .circlesContainer .circles i {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	font-size: 70px;
	color: #23262b;
	transition: 0.8s ease-in-out; }
#whyChoose #whyChooseCircles .circlesContainer p {
	color: #23262b;
	font-size: 20px; }

/***** OUR WORK *****/
#ourWork {
	background-color: #23262b; }
#ourWork h1 {
	padding: 20px 0;
	color: white;
	margin: 0; }
#ourWorkProjects {
	display: inline-block;
	width: 33.1%;
	margin-top: 3px;
}
#ourWorkProjects .projects {
	background-size: cover;
	background-repeat: no-repeat;
	height: 300px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center; }
#ourWorkProjects .projects p {
	color: white; }
#ourWorkProjects .projects a {
	color: white;
	border-radius: 100px;
	padding: 10px 20px;
	background-color: #23262b;
	border: 1px solid #f0f0f0;
	transition: all .5s ease;
	width: 40%;
	margin: 0 auto; }
#ourWorkProjects .projects a:hover{
	background-color: white;
	color: #23262b;
	border: 1px solid #23262b;
}

#ourWorkProjectsText {
	background-color: white;
	height: auto!important;
	color: #23262b; }

#ourWorkView{
	background-color: #23262b;
}
#ourWorkView a{
	padding: 20px 0;
	color: white;
	margin: 0;
	transition: all .5s ease;
}
#ourWorkView a:hover{
	color: #f0f0f0;
}

#getInTouch {
	background-color: #23262b; }
#getInTouch h1 {
	padding: 20px 0;
	color: white;
	margin: 0; }

#contactSection {
	border-bottom: 30px solid #23262b;
	display: flex; }
#contactSection #contactSectionInfo {
	width: 50%;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	padding: 30px 30px 30px; }
#contactSection #contactSectionInfo .contactInfo {
	width: 30%; }
#contactSection #contactSectionInfo .contactInfo ul {
	margin: 0;
	padding: 0;
	list-style: none; }
#contactSection #contactSectionMap {
	width: 50%; }
#contactInfoMap{
	width: 50%;
}

/**************************/
/********** WORK **********/
/**************************/
.workPageProjects {
	display: flex; }
.workPageProjects .projects {
	background: url("img/projects.png");
	background-size: cover;
	background-repeat: no-repeat;
	height: 300px;
	width: 33.333%;
	display: flex;
	flex-direction: column;
	justify-content: center; }
.workPageProjects .projects p {
	color: white;
	font-size: 32px; }
.workPageProjects .projects a {
	color: white;
	border-radius: 100px;
	padding: 10px 20px;
	background-color: #23262b;
	width: 40%;
	margin: 0 auto; }

/**************************/
/******* SERVICES *******/
/**************************/

.servicesDescription{
padding: 25px 40px;
}
.servicesDescription h1{
color: #23262b;
margin: 10px 0 5px;
}
.servicesDescription p{
margin: 5px 0;
}
.servicesDescription ul li{
font-size: 24px;
}
.servicesDescription h2{
text-align: center;
font-family: "proxima_novabold";
	margin: 20px 0 5px;

}

.darkBackground{
background-color: #23262b;
	color: white;
}

.darkBackground h1{
color: white!important;}


/***** FOOTER *****/
.mainFooter {
	background-color: #23262b; }



/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/


/*********************************************************************************************************************************************/
/******************************************************** RESPONSIVE *************************************************************************/
/*********************************************************************************************************************************************/
/******************************************************** RESPONSIVE *************************************************************************/
/*********************************************************************************************************************************************/
/******************************************************** RESPONSIVE *************************************************************************/
/*********************************************************************************************************************************************/
/******************************************************** RESPONSIVE *************************************************************************/
/*********************************************************************************************************************************************/


/*************************************************************************/
/******************** START MEDIA 1024px-1119px *******************/
/*************************************************************************/

@media only screen and (min-width:1024px) and (max-width:1199px) {

	p{
		font-size: 20px;
	}

	#staticBanner{
		display: none;
	}

	/***** HEADER *****/
	.headerBanner {
		height: 600px; }
	.headerBanner .bannerTitle {
		color: white;
		padding: 300px 60px 0;
		font-size: 20px; }
	.headerBanner .bannerTitle a {
		font-size: 20px;
		color: #23262b;
		background-color: #f0f0f0;
		border: 1px solid #f0f0f0;
		border-radius: 100px;
		text-decoration: none;
		width: 220px;
		padding: 10px 0;
		transition: all .5s ease;
		display: block;
		margin: 0 auto; }
	.headerBanner .bannerTitle a:hover{
		background-color: #23262b;
		color: white;
		border: 1px solid #23262b;
	}

	.headerLogo {
		display: inline-block; }
	.headerLogo img, .headerLogoTwo img{
		width: 200px;
	}

	nav {
		display: inline-block;
		float: right;
		width: 66%;
		margin-top: 20px; }
	nav ul {
		margin: 0;
		padding: 0;
		list-style: none; }
	nav ul li {
		float: right;
		width: 32%;
		text-align: center;
		padding: 10px 20px;
		color: white;
		font-size: 22px;
		font-family: "proxima_novaregular"; }
	nav ul li:nth-child(1) {
		padding: 5px 20px;
		width: 10%; }
	nav ul li i {
		font-size: 36px !important; }

	.navButton {
		color: #23262b;
		font-size: 20px;
		background-color: #f0f0f0;
		border: 1px solid #f0f0f0;
		transition: all .5s ease;
		border-radius: 100px; }
	.navButton:hover{
		background-color: #23262b;
		border: 1px solid #23262b;
		color: white;
	}
	.navButton i {
		font-size: 24px !important; }

	/***** SLIDEOUT NAV *****/
	.slideoutNav {
		width: 300px;
		height: 100%;
		background-color: #23262b;
		color: #D8D8D8;
		transition: all .5s;
		position: fixed;
		top: 0;
		z-index: 30; }
	.slideoutNav ul {
		margin: 0;
		padding: 0; }
	.slideoutNav ul li {
		color: white;
		list-style: none;
		cursor: pointer;
		padding: 20px 0;
		text-align: center; }
	.slideoutNav ul li i {
		font-size: 40px; }
	.slideoutNav ul a {
		text-decoration: none; }
	.slideoutNav ul a li {
		color: white;
		list-style: none;
		cursor: pointer;
		transition: all .5s ease;
		font-size: 20px;
		padding: 20px 0; }
	.slideoutNav ul a li:hover{
		background-color: white;
		color: #23262b;
	}
	.mobileContactInfo p{
		color: white;
		font-size: 20px;
	}
	.mobileContactInfo a{
		color: white;
	}

	.navOpen {
		right: 0;
		transition: right .5s; }

	.navClosed {
		right: -300px;
		transition: right .5s; }

	.closeBurgerNav {
		display: none;
		z-index: 20; }

	/***** QUOTE BUTTON *****/
	.quoteContainer {
		height: 100vh;
		width: 100%;
		background-color: rgba(70, 70, 70, 0.88);
		color: #D8D8D8;
		transition: all .5s;
		position: fixed;
		top: 0;
		z-index: 100; }
	.quoteContainer #quoteSlideDown li {
		color: #D8D8D8;
		list-style: none;
		cursor: pointer;
		padding: 20px 0;
		text-align: center; }
	.quoteContainer #quoteSlideDown li p {
		margin: 0!important;
		text-align: right; }
	.quoteContainer #quoteSlideDown li p i {
		font-size: 28px;
		padding: 0 20px; }
	.quoteContainer #quoteSlideDown h1 {
		color: white; }
	.quoteContainer #quoteSlideDown #formOne {
		color: white; }
	.quoteContainer #quoteSlideDown #formOne input {
		width: 100%;
		height: 50px;
		padding: 10px 0;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: white;
		font-size: 18px;
		background-color: #23262b;
		border: none; }
	.quoteContainer #quoteSlideDown #formOne input::-webkit-input-placeholder {
		color: white;
		font-size: 18px; }
	.quoteContainer #quoteSlideDown #formOne .formNext {
		width: 100%;
		height: 70px;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: #23262b;
		font-size: 20px;
		background-color: #D8D8D8;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center; }
	.quoteContainer #quoteSlideDown #formOne .formNext p {
		margin: 0; }
	.quoteContainer #quoteSlideDown #formOne .formNext p i {
		padding: 0 10px; }
	.quoteContainer #quoteSlideDown #formOne textarea {
		width: 100%;
		height: 140px;
		padding: 15px 0;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: white;
		font-size: 20px;
		background-color: #23262b;
		border: none; }
	.quoteContainer #quoteSlideDown #formOne textarea::-webkit-input-placeholder {
		color: white;
		font-size: 20px; }
	.quoteContainer #quoteSlideDown #formOne .formBack {
		width: 100%;
		height: 70px;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: #23262b;
		font-size: 20px;
		background-color: #D8D8D8;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center; }
	.quoteContainer #quoteSlideDown #formOne .formBack p {
		margin: 0; }
	.quoteContainer #quoteSlideDown #formOne .formBack p i {
		padding: 0 10px; }
	.quoteContainer #quoteSlideDown #formOne .formSubmit {
		width: 100%;
		height: 50px;
		margin: 10px 0;
		border-radius: 8px;
		text-align: center;
		color: #23262b;
		font-size: 18px;
		background-color: #D8D8D8;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center; }

	.formHide {
		display: none; }

	.formShow {
		display: block; }

	.closeQuoteButton {
		display: none;
		z-index: 20;
		text-align: right !important;
		padding: 10px 30px !important; }

	.quoteOpen {
		top: 0;
		transition: top .5s; }

	.quoteClosed {
		top: -100%;
		transition: top .5s; }

	/**************************/
	/********** HOME **********/
	/**************************/
	/***** CLIENT SLIDER *****/
	#clientSlider {
		background-color: #23262b;
		height: 160px; }

	.slick-slide img {
		margin: 0 auto;
		padding: 20px 0; }

	/***** ABOUT *****/
	#aboutSection h1 {
		text-align: center;
		color: #23262b; }
	#aboutSection p {
		text-align: center;
		color: #23262b; }

	/***** OUR SERVICES *****/
	.panelClick{
		display: none;
	}
	#ourServicesSection {
		background-color: #23262b;
		padding: 20px 40px; }
	#ourServicesSection h1 {
		color: white; }
	#ourServicesSection #ourServicesPanelsContainerRoof, #ourServicesSection #ourServicesPanelsContainerProperty {
		padding-bottom: 0px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels {
		display: flex;
		justify-content: space-around;
		padding-top: 30px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels {
		width: 32.5%;
		height: 230px;
		display: flex;
		flex-direction: column;
		justify-content: center; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels p, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels p {
		color: white;
		padding: 0 10px;
		font-size: 22px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels a, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels a {
		color: white;
		text-decoration: underline;
		font-style: italic;
		font-size: 18px;
		padding: 0 30px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels span, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels span {
		display: none;
		color: #fff; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover span, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover span {
		display: block;
		text-align: center;
		font-family: "proxima_novaregular";
		padding: 0 10px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover p, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover p {
		display: none; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover a, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover a {
		display: none; }
	#ourServicesSection #ourServicesPanelsContainerProperty a {
		text-decoration: none !important;
		font-style: normal !important; }

	/***** WHY CHOOSE *****/
	#whyChoose h1 {
		color: #23262b; }
	#whyChoose a{
		color: white;
		border-radius: 100px;
		padding: 10px 20px;
		background-color: #23262b;
		width: 250px;
		margin: 15px auto;
		border: 1px solid #23262b;
		transition: all .5s ease;
	}
	#whyChoose a:hover{
		background-color: white;
		color: #23262b;
	}
	#whyChoose #whyChooseCircles {
		display: flex;
		justify-content: space-between; }
	#whyChoose #whyChooseCircles .circlesContainer {
		width: 30%; }
	#whyChoose #whyChooseCircles .circlesContainer .circles {
		width: 170px;
		height: 170px;
		border-radius: 50%;
		background-color: #D8D8D8;
		border: 1px solid #23262b;
		display: flex;
		margin: 0 auto;
		transition: 1s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer .circles:hover {
		background-color: #23262b;
		transition: 1s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer .circles:hover i {
		color: #fff;
		transition: 0.8s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer .circles i {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		font-size: 70px;
		color: #23262b;
		transition: 0.8s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer p {
		color: #23262b;
		font-size: 20px; }

	/***** OUR WORK *****/
	#ourWork {
		background-color: #23262b; }
	#ourWork h1 {
		padding: 20px 0;
		color: white;
		margin: 0; }
	#ourWorkProjects {
		display: inline-block;
		width: 33%;
	}
	#ourWorkProjects .projects {
		background-size: cover;
		background-repeat: no-repeat;
		height: 240px;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center; }
	#ourWorkProjects .projects p {
		color: white; }
	#ourWorkProjects .projects a {
		color: white;
		border-radius: 100px;
		padding: 8px 20px;
		background-color: #23262b;
		border: 1px solid #f0f0f0;
		transition: all .5s ease;
		width: 50%;
		margin: 0 auto; }
	#ourWorkProjects .projects a:hover{
		background-color: white;
		color: #23262b;
	}

	#ourWorkProjectsText {
		background-color: white;
		color: #23262b; }

	#ourWorkView{
		background-color: #23262b;
	}
	#ourWorkView a{
		padding: 20px 0;
		color: white;
		margin: 0;
	}

	#getInTouch {
		background-color: #23262b; }
	#getInTouch h1 {
		padding: 20px 0;
		color: white;
		margin: 0; }

	#contactSection {
		display: flex; }
	#contactSection #contactSectionInfo {
		width: 50%;
		display: flex;
		justify-content: space-between;
		padding: 30px 10px 30px; }
	#contactSection #contactSectionInfo .contactInfo {
		width: 30%; }
	#contactSection #contactSectionInfo .contactInfo ul {
		margin: 0;
		padding: 0;
		list-style: none; }
	#contactSection #contactSectionMap {
		width: 50%; }
	#contactInfoMap{
		width: 50%;
	}

	/**************************/
	/********** WORK **********/
	/**************************/
	.workPageProjects {
		display: flex; }
	.workPageProjects .projects {
		background: url("img/projects.png");
		background-size: cover;
		background-repeat: no-repeat;
		height: 300px;
		width: 33.333%;
		display: flex;
		flex-direction: column;
		justify-content: center; }
	.workPageProjects .projects p {
		color: white;
		font-size: 32px; }
	.workPageProjects .projects a {
		color: white;
		border-radius: 100px;
		padding: 10px 20px;
		background-color: #23262b;
		width: 40%;
		margin: 0 auto; }

	/**************************/
	/******* SERVICES *******/
	/**************************/

	.servicesDescription ul li{
		font-size: 20px;
	}

	/***** FOOTER *****/
	.mainFooter {
		background-color: #23262b; }

}


/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/


/*************************************************************************/
/******************** START MEDIA 768px-1023px *******************/
/*************************************************************************/

@media only screen and (min-width:768px) and (max-width:1023px) {

	p{
		font-size: 16px;
	}

	.wrapper{
		margin: 30px 50px;
	}

	#staticBanner{
		display: block!important;
		height: 450px!important;
	}

	#sliderFrame{
		display: none!important;
	}

	/***** HEADER *****/
	.headerBanner {
		height: 450px; }
	.headerBannerTwo{
		background-color: #23262b;
		height: 100px;  }
	.headerBanner .bannerTitle {
		color: white;
		padding: 180px 25px 0;
		font-size: 16px; }
	.headerBanner .bannerTitle a {
		font-size: 18px;
		color: #23262b;
		background-color: #f0f0f0;
		border: 1px solid #f0f0f0;
		border-radius: 100px;
		text-decoration: none;
		width: 200px;
		padding: 8px 0;
		transition: all .5s ease;
		display: block;
		margin: 0 auto; }
	.headerBanner .bannerTitle a:hover{
		background-color: #23262b;
		color: white;
		border: 1px solid #23262b;
	}

	.headerLogo {
		display: inline-block; }
	.headerLogoTwo {
		max-width: 130px;
		display: inline-block; }
	.headerLogo img, .headerLogoTwo img{
		width: 170px;
	}

	nav {
		display: inline-block;
		float: right;
		width: 73%;
		margin-top: 20px; }
	nav ul {
		margin: 0;
		padding: 0;
		list-style: none; }
	nav ul li {
		float: right;
		width: 40%;
		text-align: center;
		padding: 8px 10px;
		color: white;
		font-size: 18px;
		font-family: "proxima_novaregular"; }
	nav ul li:nth-child(1) {
		padding: 2px 10px;
		width: 20%; }
	nav ul li i {
		font-size: 36px !important; }

	.navButton {
		color: #23262b;
		font-size: 18px;
		background-color: #f0f0f0;
		border: 1px solid #f0f0f0;
		transition: all .5s ease;
		border-radius: 100px; }
	.navButton:hover{
		background-color: #23262b;
		border: 1px solid #23262b;
		color: white;
	}
	.navButton i {
		font-size: 24px !important; }

	/***** SLIDEOUT NAV *****/
	.slideoutNav {
		width: 300px;
		height: 100%;
		background-color: #23262b;
		color: #D8D8D8;
		transition: all .5s;
		position: fixed;
		top: 0;
		z-index: 30; }
	.slideoutNav ul {
		margin: 0;
		padding: 0; }
	.slideoutNav ul li {
		color: white;
		list-style: none;
		cursor: pointer;
		padding: 20px 0;
		text-align: center; }
	.slideoutNav ul li i {
		font-size: 40px; }
	.slideoutNav ul a {
		text-decoration: none; }
	.slideoutNav ul a li {
		color: white;
		list-style: none;
		cursor: pointer;
		transition: all .5s ease;
		font-size: 18px;
		padding: 20px 0; }
	.slideoutNav ul a li:hover{
		background-color: white;
		color: #23262b;
	}
	.mobileContactInfo p{
		color: white;
		font-size: 18px;
	}
	.mobileContactInfo a{
		color: white;
	}

	.navOpen {
		right: 0;
		transition: right .5s; }

	.navClosed {
		right: -300px;
		transition: right .5s; }

	.closeBurgerNav {
		display: none;
		z-index: 20; }

	/***** QUOTE BUTTON *****/
	.quoteContainer {
		height: 100vh;
		width: 100%;
		background-color: rgba(70, 70, 70, 0.88);
		color: #D8D8D8;
		transition: all .5s;
		position: fixed;
		top: 0;
		z-index: 100; }
	.quoteContainer #quoteSlideDown li {
		color: #D8D8D8;
		list-style: none;
		cursor: pointer;
		padding: 20px 0;
		text-align: center; }
	.quoteContainer #quoteSlideDown li p {
		text-align: right; }
	.quoteContainer #quoteSlideDown li p i {
		font-size: 28px;
		padding: 0 20px; }
	.quoteContainer #quoteSlideDown h1 {
		font-size: 28px;
		color: white; }
	.quoteContainer #quoteSlideDown #formOne {
		color: white; }
	.quoteContainer #quoteSlideDown #formOne input {
		width: 100%;
		height: 40px;
		padding: 10px 0;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: white;
		font-size: 16px;
		background-color: #23262b;
		border: none; }
	.quoteContainer #quoteSlideDown #formOne input::-webkit-input-placeholder {
		color: white;
		font-size: 20px; }
	.quoteContainer #quoteSlideDown #formOne .formNext {
		width: 100%;
		height: 70px;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: #23262b;
		font-size: 20px;
		background-color: #D8D8D8;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center; }
	.quoteContainer #quoteSlideDown #formOne .formNext p {
		margin: 0; }
	.quoteContainer #quoteSlideDown #formOne .formNext p i {
		padding: 0 10px; }
	.quoteContainer #quoteSlideDown #formOne textarea {
		width: 100%;
		height: 130px;
		padding: 10px 0;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: white;
		font-size: 20px;
		background-color: #23262b;
		border: none; }
	.quoteContainer #quoteSlideDown #formOne textarea::-webkit-input-placeholder {
		color: white;
		font-size: 20px; }
	.quoteContainer #quoteSlideDown #formOne .formBack {
		width: 100%;
		height: 70px;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: #23262b;
		font-size: 20px;
		background-color: #D8D8D8;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center; }
	.quoteContainer #quoteSlideDown #formOne .formBack p {
		margin: 0; }
	.quoteContainer #quoteSlideDown #formOne .formBack p i {
		padding: 0 10px; }
	.quoteContainer #quoteSlideDown #formOne .formSubmit {
		width: 100%;
		height: 40px;
		margin: 10px 0;
		border-radius: 8px;
		text-align: center;
		color: #23262b;
		font-size: 18px;
		background-color: #D8D8D8;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center; }

	.formHide {
		display: none; }

	.formShow {
		display: block; }

	.closeQuoteButton {
		display: none;
		z-index: 20;
		text-align: right !important;
		padding: 20px 30px !important; }

	.quoteOpen {
		top: 0;
		transition: top .5s; }

	.quoteClosed {
		top: -100%;
		transition: top .5s; }

	/**************************/
	/********** HOME **********/
	/**************************/
	/***** CLIENT SLIDER *****/
	#clientSlider {
		background-color: #23262b;
		height: 120px; }

	.slick-slide img {
		margin: 0 auto;
		padding: 20px 0; }

	/***** ABOUT *****/
	#aboutSection h1 {
		text-align: center;
		font-size: 24px;
		color: #23262b; }
	#aboutSection p {
		text-align: center;
		color: #23262b; }

	/***** OUR SERVICES *****/
	.servicesLink a{
		color: white;
		padding: 15px 0;
		font-size: 18px;
	}
	.panelClick{
		display: block;
	}
	.panelHover{
		display: none;
	}
	#ourServicesSection {
		background-color: #23262b;
		padding: 20px 40px; }
	#ourServicesSection h1 {
		font-size: 24px;
		color: white; }
	#ourServicesSection #ourServicesPanelsContainerRoof, #ourServicesSection #ourServicesPanelsContainerProperty {
		padding-bottom: 0px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels {
		display: flex;
		justify-content: space-around;
		padding-top: 10px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels {
		width: 32.5%;
		height: 180px;
		display: flex;
		flex-direction: column;
		justify-content: center; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels p, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels p {
		color: white;
		padding: 0 10px;
		font-size: 19px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels a, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels a {
		color: white;
		text-decoration: underline;
		font-style: italic;
		font-size: 16px;
		padding: 0 30px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels span, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels span {
		display: none;
		color: #fff; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover span, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover span {
		display: block;
		text-align: center;
		font-family: "proxima_novaregular";
		padding: 0 10px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover p, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover p {
		display: none; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover a, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover a {
		display: none; }
	#ourServicesSection #ourServicesPanelsContainerProperty a {
		text-decoration: none !important;
		font-style: normal !important; }

	/***** WHY CHOOSE *****/
	#whyChoose h1 {
		font-size: 24px;
		color: #23262b; }
	#whyChoose a{
		color: white;
		border-radius: 100px;
		padding: 10px 20px;
		background-color: #23262b;
		width: 250px;
		margin: 15px auto;
		border: 1px solid #23262b;
		transition: all .5s ease;
	}
	#whyChoose a:hover{
		background-color: white;
		color: #23262b;
	}
	#whyChoose #whyChooseCircles {
		display: flex;
		justify-content: space-between; }
	#whyChoose #whyChooseCircles .circlesContainer {
		width: 30%; }
	#whyChoose #whyChooseCircles .circlesContainer .circles {
		width: 140px;
		height: 140px;
		border-radius: 50%;
		background-color: #D8D8D8;
		border: 1px solid #23262b;
		display: flex;
		margin: 0 auto;
		transition: 1s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer .circles:hover {
		background-color: #23262b;
		transition: 1s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer .circles:hover i {
		color: #fff;
		transition: 0.8s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer .circles i {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		font-size: 60px;
		color: #23262b;
		transition: 0.8s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer p {
		color: #23262b;
		font-size: 16px; }

	/***** OUR WORK *****/
	#ourWork {
		background-color: #23262b; }
	#ourWork h1 {
		padding: 15px 0;
		font-size: 24px;
		color: white;
		margin: 0; }
	#ourWorkProjects {
		display: inline-block;
		width: 32.98%;
	}
	#ourWorkProjects .projects {
		background-size: cover;
		background-repeat: no-repeat;
		height: 240px;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center; }
	#ourWorkProjects .projects p {
		font-size: 20px;
		color: white; }
	#ourWorkProjects .projects a {
		color: white;
		border-radius: 100px;
		padding: 8px 20px;
		background-color: #23262b;
		border: 1px solid #f0f0f0;
		transition: all .5s ease;
		width: 60%;
		margin: 0 auto; }
	#ourWorkProjects .projects a:hover{
		background-color: white;
		color: #23262b;
	}

	#ourWorkProjectsText {
		background-color: white;
		color: #23262b; }

	#ourWorkView{
		background-color: #23262b;
	}
	#ourWorkView a{
		padding: 20px 0;
		color: white;
		margin: 0;
	}

	#getInTouch {
		background-color: #23262b; }
	#getInTouch h1 {
		padding: 15px 0;
		font-size: 24px;
		color: white;
		margin: 0; }

	#contactSection {
		display: inline; }
	#contactSection #contactSectionInfo {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 30px 10px 30px; }
	#contactSection #contactSectionInfo .contactInfo {
		text-align: center;
		width: 100%; }
	#contactSection #contactSectionInfo .contactInfo ul li{
		font-size: 16px;
	}
	#contactSection #contactSectionInfo .contactInfoLogo {
		width: 100%; }
	#contactSection #contactSectionInfo .contactInfoLogo img {
		width: 50%; }
	#contactSection #contactSectionInfo .contactInfo ul {
		margin: 0;
		padding: 0;
		list-style: none; }
	#contactSection #contactSectionMap {
		width: 50%; }
	#contactInfoMap{
		width: 100%;
		height: 300px;
	}

	/**************************/
	/********** WORK **********/
	/**************************/
	.workPageProjects {
		display: flex; }
	.workPageProjects .projects {
		background: url("img/projects.png");
		background-size: cover;
		background-repeat: no-repeat;
		height: 300px;
		width: 33.333%;
		display: flex;
		flex-direction: column;
		justify-content: center; }
	.workPageProjects .projects p {
		color: white;
		font-size: 32px; }
	.workPageProjects .projects a {
		color: white;
		border-radius: 100px;
		padding: 10px 20px;
		background-color: #23262b;
		width: 40%;
		margin: 0 auto; }

	/**************************/
	/******* SERVICES *******/
	/**************************/

	.servicesDescription{
		padding: 25px 30px;
	}
	.servicesDescription h1{
		color: #23262b;
		font-size: 22px;
		margin: 10px 0 5px;
	}

	.servicesDescription p{
		margin: 5px 0;
	}
	.servicesDescription ul li{
		font-size: 16px;
	}
	.servicesDescription h2{
		text-align: center;
		font-family: "proxima_novabold";
		font-size: 18px;
		margin: 20px 0 5px;
	}

	/***** FOOTER *****/
	.mainFooter {
		border-bottom: 40px solid #23262b;
		background-color: #23262b; }

	/******************************************************************************************************/
	/********************************************* SLIDER **************************************************/
	/******************************************************************************************************/

	#slider, #slider .sliderInner {
		width:100%;height:450px!important;/* Must be the same size as the slider images */
		border-radius:3px;
	}
}




/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/


/*************************************************************************/
/******************** START MEDIA 480px - 767px *******************/
/*************************************************************************/

@media only screen and (min-width:480px) and (max-width:767px) {

	p{
		font-size: 16px;
	}

	.wrapper{
		margin: 30px 30px;
	}

	#staticBanner{
		display: block!important;
		height: 350px!important;
	}

	#sliderFrame{
		display: none!important;
	}


	/***** HEADER *****/
	.mainHeader {
		display: block;
		position: fixed!important;
	}
	.headerBanner {
		height: 350px; }
	.headerBannerTwo{
		max-height: 80px;
	}
	.headerBanner .bannerTitle {
		color: white;
		padding: 135px 25px 0;
		font-size: 14px; }
	.headerBanner .bannerTitle a {
		font-size: 16px;
		color: #23262b;
		background-color: #f0f0f0;
		border: 1px solid #f0f0f0;
		border-radius: 100px;
		text-decoration: none;
		width: 180px;
		padding: 7px 0;
		transition: all .5s ease;
		display: block;
		margin: 0 auto; }
	.headerBanner .bannerTitle a:hover{
		background-color: #23262b;
		color: white;
		border: 1px solid #23262b;
	}

	.headerLogo {
		display: inline-block; }
	.headerLogoTwo {
		max-width: 100px;
		display: inline-block; }
	.headerLogo img, .headerLogoTwo img{
		width: 140px;
	}

	nav {
		display: inline-block;
		float: right;
		width: 60%;
		margin-top: 20px; }
	nav ul {
		margin: 0;
		padding: 0;
		list-style: none; }
	nav ul li {
		float: right;
		width: 50%;
		text-align: center;
		padding: 8px 10px;
		color: white;
		font-size: 18px;
		font-family: "proxima_novaregular"; }
	nav ul li:nth-child(1) {
		padding: 0 10px;
		margin: 0 10px;
		width: 20%; }
	nav ul li i {
		font-size: 36px !important; }

	.navButton {
		color: #23262b;
		font-size: 18px;
		background-color: #f0f0f0;
		border: 1px solid #f0f0f0;
		transition: all .5s ease;
		border-radius: 100px; }
	.navButton:hover{
		background-color: #23262b;
		border: 1px solid #23262b;
		color: white;
	}
	.navButton i {
		font-size: 24px !important; }
	.navContactInfo{
		display: none;
	}

	/***** SLIDEOUT NAV *****/
	.slideoutNav {
		width: 240px;
		height: 100%;
		background-color: #23262b;
		color: #D8D8D8;
		transition: all .5s;
		position: fixed;
		top: 0;
		z-index: 30; }
	.slideoutNav ul {
		margin: 0;
		padding: 0; }
	.slideoutNav ul li {
		color: white;
		list-style: none;
		cursor: pointer;
		padding: 20px 0;
		text-align: center; }
	.slideoutNav ul li i {
		font-size: 40px; }
	.slideoutNav ul a {
		text-decoration: none; }
	.slideoutNav ul a li {
		color: white;
		list-style: none;
		cursor: pointer;
		transition: all .5s ease;
		font-size: 16px;
		padding: 20px 0; }
	.slideoutNav ul a li:hover{
		background-color: white;
		color: #23262b;
	}
	.mobileContactInfo p{
		color: white;
		font-size: 16px;
	}
	.mobileContactInfo a{
		color: white;
	}

	.navOpen {
		right: 0;
		transition: right .5s; }

	.navClosed {
		right: -240px;
		transition: right .5s; }

	.closeBurgerNav {
		display: none;
		z-index: 20; }

	/***** QUOTE BUTTON *****/
	.quoteContainer {
		height: 100vh;
		width: 100%;
		background-color: rgba(70, 70, 70, 0.88);
		color: #D8D8D8;
		transition: all .5s;
		position: fixed;
		top: 0;
		z-index: 100; }
	.quoteContainer #quoteSlideDown li {
		color: #D8D8D8;
		list-style: none;
		cursor: pointer;
		text-align: center; }
	.quoteContainer #quoteSlideDown li p {
		margin: 10px 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		text-align: right; }
	.quoteContainer #quoteSlideDown li p i {
		font-size: 28px;
		padding: 0 20px; }
	.quoteContainer #quoteSlideDown h1 {
		font-size: 24px;
		margin: 10px 0;
		color: white; }
	.quoteContainer #quoteSlideDown #formOne {
		color: white; }
	.quoteContainer #quoteSlideDown #formOne input {
		width: 100%;
		height: 40px;
		padding: 10px 0;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: white;
		font-size: 16px;
		background-color: #23262b;
		border: none; }
	.quoteContainer #quoteSlideDown #formOne input::-webkit-input-placeholder {
		color: white;
		font-size: 16px; }
	.quoteContainer #quoteSlideDown #formOne .formNext {
		width: 100%;
		height: 60px;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: #23262b;
		font-size: 20px;
		background-color: #D8D8D8;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center; }
	.quoteContainer #quoteSlideDown #formOne .formNext p {
		margin: 0; }
	.quoteContainer #quoteSlideDown #formOne .formNext p i {
		padding: 0 10px; }
	.quoteContainer #quoteSlideDown #formOne textarea {
		width: 100%;
		height: 110px;
		padding: 15px 0;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: white;
		font-size: 16px;
		background-color: #23262b;
		border: none; }
	.quoteContainer #quoteSlideDown #formOne textarea::-webkit-input-placeholder {
		color: white;
		font-size: 16px; }
	.quoteContainer #quoteSlideDown #formOne .formBack {
		width: 100%;
		height: 60px;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: #23262b;
		font-size: 20px;
		background-color: #D8D8D8;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center; }
	.quoteContainer #quoteSlideDown #formOne .formBack p {
		margin: 0; }
	.quoteContainer #quoteSlideDown #formOne .formBack p i {
		padding: 0 10px; }
	.quoteContainer #quoteSlideDown #formOne .formSubmit {
		width: 100%;
		height: 40px;
		margin: 10px 0;
		border-radius: 8px;
		text-align: center;
		color: #23262b;
		font-size: 16px;
		background-color: #D8D8D8;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center; }

	.formHide {
		display: none; }

	.formShow {
		display: block; }

	.closeQuoteButton {
		display: none;
		z-index: 20;
		text-align: right !important;
		padding: 5px 0 !important; }

	.quoteOpen {
		top: 0;
		transition: top .5s; }

	.quoteClosed {
		top: -100%;
		transition: top .5s; }

	/**************************/
	/********** HOME **********/
	/**************************/
	/***** CLIENT SLIDER *****/
	#clientSlider {
		background-color: #23262b;
		height: 90px; }

	.slick-slide img {
		margin: 0 auto;
		padding: 20px 0; }

	/***** ABOUT *****/
	#aboutSection h1 {
		text-align: center;
		font-size: 24px;
		color: #23262b; }
	#aboutSection p {
		text-align: center;
		color: #23262b; }

	/***** OUR SERVICES *****/
	.servicesLink{
		padding-top: 10px!important;
	}
	.servicesLink a{
		color: white;
		padding: 10px 0;
		font-size: 16px;
	}
	.panelClick{
		display: block;
	}
	.panelHover{
		display: none;
	}
	#ourServicesSection {
		background-color: #23262b;
		padding: 20px 40px; }
	#ourServicesSection h1 {
		font-size: 24px;
		color: white; }
	#ourServicesSection #ourServicesPanelsContainerRoof, #ourServicesSection #ourServicesPanelsContainerProperty {
		padding-bottom: 0px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels {
		display: inline-block;
		width: 100%;
		padding-top: 0; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels {
		width: 80%;
		height: 180px;
		display: flex;
		justify-content: center;
		margin: 5px auto;}
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels p, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels p {
		color: white;
		padding: 0 10px;
		font-size: 20px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels a, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels a {
		color: white;
		text-decoration: underline;
		font-style: italic;
		font-size: 16px;
		padding: 0 30px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels span, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels span {
		display: none;
		color: #fff; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover span, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover span {
		display: block;
		text-align: center;
		font-family: "proxima_novaregular";
		padding: 0 10px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover p, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover p {
		display: none; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover a, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover a {
		display: none; }
	#ourServicesSection #ourServicesPanelsContainerProperty a {
		text-decoration: none !important;
		font-style: normal !important; }

	/***** WHY CHOOSE *****/
	#whyChoose h1 {
		font-size: 24px;
		color: #23262b; }
	#whyChoose a{
		color: white;
		border-radius: 100px;
		padding: 10px 20px;
		background-color: #23262b;
		width: 250px;
		margin: 15px auto;
		border: 1px solid #23262b;
		transition: all .5s ease;
	}
	#whyChoose a:hover{
		background-color: white;
		color: #23262b;
	}
	#whyChoose #whyChooseCircles {
		display: flex;
		justify-content: space-between; }
	#whyChoose #whyChooseCircles .circlesContainer {
		width: 30%; }
	#whyChoose #whyChooseCircles .circlesContainer .circles {
		width: 110px;
		height: 110px;
		border-radius: 50%;
		background-color: #D8D8D8;
		border: 1px solid #23262b;
		display: flex;
		margin: 0 auto;
		transition: 1s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer .circles:hover {
		background-color: #23262b;
		transition: 1s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer .circles:hover i {
		color: #fff;
		transition: 0.8s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer .circles i {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		font-size: 50px;
		color: #23262b;
		transition: 0.8s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer p {
		color: #23262b;
		margin: 15px 0 5px;
		font-size: 16px; }

	/***** OUR WORK *****/
	#ourWork {
		background-color: #23262b; }
	#ourWork h1 {
		padding: 15px 0;
		font-size: 24px;
		color: white;
		margin: 0; }
	#ourWorkProjects {
		display: inline-block;
		width: 100%;
	}
	#ourWorkProjects .projects {
		background-size: cover;
		background-repeat: no-repeat;
		height: 240px;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center; }
	#ourWorkProjects .projects p {
		font-size: 24px;
		color: white; }
	#ourWorkProjects .projects a {
		color: white;
		border-radius: 100px;
		padding: 8px 20px;
		background-color: #23262b;
		border: 1px solid #f0f0f0;
		transition: all .5s ease;
		width: 40%;
		margin: 0 auto; }
	#ourWorkProjects .projects a:hover{
		background-color: white;
		color: #23262b;
	}

	#ourWorkProjectsText {
		background-color: white;
		color: #23262b; }

	#ourWorkView{
		background-color: #23262b;
	}
	#ourWorkView a{
		padding: 15px 0;
		color: white;
		margin: 0;
	}

	#getInTouch {
		background-color: #23262b; }
	#getInTouch h1 {
		padding: 15px 0;
		font-size: 24px;
		color: white;
		margin: 0; }

	#contactSection {
		display: inline; }
	#contactSection #contactSectionInfo {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 30px 10px 30px; }
	#contactSection #contactSectionInfo .contactInfo {
		text-align: center;
		width: 100%; }
	#contactSection #contactSectionInfo .contactInfo ul li{
		font-size: 16px;
	}
	#contactSection #contactSectionInfo .contactInfoLogo {
		width: 100%; }
	#contactSection #contactSectionInfo .contactInfoLogo img {
		width: 70%; }
	#contactSection #contactSectionInfo .contactInfo ul {
		margin: 0;
		padding: 0;
		list-style: none; }
	#contactSection #contactSectionMap {
		width: 50%; }
	#contactInfoMap{
		width: 100%;
		height: 300px;
	}

	/**************************/
	/********** WORK **********/
	/**************************/
	.workPageProjects {
		display: flex; }
	.workPageProjects .projects {
		background: url("img/projects.png");
		background-size: cover;
		background-repeat: no-repeat;
		height: 300px;
		width: 33.333%;
		display: flex;
		flex-direction: column;
		justify-content: center; }
	.workPageProjects .projects p {
		color: white;
		font-size: 32px; }
	.workPageProjects .projects a {
		color: white;
		border-radius: 100px;
		padding: 10px 20px;
		background-color: #23262b;
		width: 40%;
		margin: 0 auto; }

	/**************************/
	/******* SERVICES *******/
	/**************************/

	.servicesDescription{
		padding: 20px 30px;
	}
	.servicesDescription h1{
		color: #23262b;
		font-size: 22px;
		margin: 10px 0 5px;
	}
	.servicesDescription ul li{
		font-size: 16px;
	}
	.servicesDescription h2{
		text-align: center;
		font-family: "proxima_novabold";
		font-size: 16px;
		margin: 20px 0 5px;
	}

	/***** FOOTER *****/
	.mainFooter {
		border-bottom: 40px solid #23262b;
		background-color: #23262b; }

	/******************************************************************************************************/
	/********************************************* SLIDER **************************************************/
	/******************************************************************************************************/

	#slider, #slider .sliderInner {
		width:100%;height:400px!important;/* Must be the same size as the slider images */
		border-radius:3px;
	}

}


/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/
/*********************************************************************************************************************************************/


/*************************************************************************/
/******************** START MEDIA 320px - 479px *******************/
/*************************************************************************/

@media only screen and (min-width:320px) and (max-width:479px) {

	p{
		font-size: 14px;
	}

	.wrapper{
		margin: 20px 20px;
	}

	#staticBanner{
		display: block!important;
		height: 350px;
	}

	#sliderFrame{
		display: none!important;
	}

	/***** HEADER *****/
	.mainHeader {
		display: block;
		position: fixed!important;
	}
	.headerBanner {
		height: 350px; }
	.headerBannerTwo{
		max-height: 75px;
	}
	.headerBanner .bannerTitle {
		color: white;
		padding: 115px 25px 0;
		line-height: 28px;
		font-size: 13px; }
	.headerBanner .bannerTitle a {
		font-size: 14px;
		color: #23262b;
		background-color: #f0f0f0;
		border: 1px solid #f0f0f0;
		border-radius: 100px;
		text-decoration: none;
		width: 160px;
		padding: 4px 0;
		transition: all .5s ease;
		display: block;
		margin: 0 auto; }
	.headerBanner .bannerTitle a:hover{
		background-color: #23262b;
		color: white;
		border: 1px solid #23262b;
	}

	.headerLogo {
		display: inline-block; }
	.headerLogo img, .headerLogoTwo img{
		width: 90px;
	}

	nav {
		display: inline-block;
		float: right;
		width: 61%;
		margin-top: 20px; }
	nav ul {
		margin: 0;
		padding: 0;
		list-style: none; }
	nav ul li {
		float: right;
		width: 60%;
		text-align: center;
		padding: 8px 10px;
		color: white;
		font-size: 18px;
		font-family: "proxima_novaregular"; }
	nav ul li:nth-child(1) {
		padding: 0 10px;
		margin: 0 10px;
		width: 20%; }
	nav ul li i {
		font-size: 36px !important; }

	.navButton {
		color: #23262b;
		font-size: 14px;
		background-color: #f0f0f0;
		border: 1px solid #f0f0f0;
		transition: all .5s ease;
		border-radius: 100px; }
	.navButton:hover{
		background-color: #23262b;
		border: 1px solid #23262b;
		color: white;
	}
	.navButton i {
		font-size: 20px !important; }
	.navContactInfo{
		display: none;
	}

	/***** SLIDEOUT NAV *****/
	.slideoutNav {
		width: 240px;
		height: 100%;
		background-color: #23262b;
		color: #D8D8D8;
		transition: all .5s;
		position: fixed;
		top: 0;
		z-index: 30; }
	.slideoutNav ul {
		margin: 0;
		padding: 0; }
	.slideoutNav ul li {
		color: white;
		list-style: none;
		cursor: pointer;
		padding: 20px 0;
		text-align: center; }
	.slideoutNav ul li i {
		font-size: 40px; }
	.slideoutNav ul a {
		text-decoration: none; }
	.slideoutNav ul a li {
		color: white;
		list-style: none;
		cursor: pointer;
		transition: all .5s ease;
		font-size: 16px;
		padding: 20px 0; }
	.slideoutNav ul a li:hover{
		background-color: white;
		color: #23262b;
	}
	.mobileContactInfo p{
		color: white;
		font-size: 16px;
	}
	.mobileContactInfo a{
		color: white;
	}

	.navOpen {
		right: 0;
		transition: right .5s; }

	.navClosed {
		right: -240px;
		transition: right .5s; }

	.closeBurgerNav {
		display: none;
		z-index: 20; }

	/***** QUOTE BUTTON *****/
	.quoteContainer {
		height: 100vh;
		width: 100%;
		background-color: rgba(70, 70, 70, 0.88);
		color: #D8D8D8;
		transition: all .5s;
		position: fixed;
		top: 0;
		z-index: 100; }
	.quoteContainer #quoteSlideDown li {
		color: #D8D8D8;
		list-style: none;
		cursor: pointer;
		text-align: center; }
	.quoteContainer #quoteSlideDown li p {
		margin: 10px 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		text-align: right; }
	.quoteContainer #quoteSlideDown li p i {
		font-size: 28px;
		padding: 0 20px; }
	.quoteContainer #quoteSlideDown h1 {
		font-size: 24px;
		margin: 10px 0;
		color: white; }
	.quoteContainer #quoteSlideDown #formOne {
		color: white; }
	.quoteContainer #quoteSlideDown #formOne input {
		width: 100%;
		height: 40px;
		padding: 10px 0;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: white;
		font-size: 14px;
		background-color: #23262b;
		border: none; }
	.quoteContainer #quoteSlideDown #formOne input::-webkit-input-placeholder {
		color: white;
		font-size: 14px; }
	.quoteContainer #quoteSlideDown #formOne .formNext {
		width: 100%;
		height: 50px;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: #23262b;
		font-size: 20px;
		background-color: #D8D8D8;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center; }
	.quoteContainer #quoteSlideDown #formOne .formNext p {
		margin: 0; }
	.quoteContainer #quoteSlideDown #formOne .formNext p i {
		padding: 0 10px; }
	.quoteContainer #quoteSlideDown #formOne textarea {
		width: 100%;
		height: 110px;
		padding: 15px 0;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: white;
		font-size: 14px;
		background-color: #23262b;
		border: none; }
	.quoteContainer #quoteSlideDown #formOne textarea::-webkit-input-placeholder {
		color: white;
		font-size: 16px; }
	.quoteContainer #quoteSlideDown #formOne .formBack {
		width: 100%;
		height: 50px;
		margin: 5px 0;
		border-radius: 8px;
		text-align: center;
		color: #23262b;
		font-size: 20px;
		background-color: #D8D8D8;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center; }
	.quoteContainer #quoteSlideDown #formOne .formBack p {
		margin: 0; }
	.quoteContainer #quoteSlideDown #formOne .formBack p i {
		padding: 0 10px; }
	.quoteContainer #quoteSlideDown #formOne .formSubmit {
		width: 100%;
		height: 40px;
		margin: 10px 0;
		border-radius: 8px;
		text-align: center;
		color: #23262b;
		font-size: 14px;
		background-color: #D8D8D8;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center; }

	.formHide {
		display: none; }

	.formShow {
		display: block; }

	.closeQuoteButton {
		display: none;
		z-index: 20;
		text-align: right !important;
		padding: 5px 0 !important; }

	.quoteOpen {
		top: 0;
		transition: top .5s; }

	.quoteClosed {
		top: -100%;
		transition: top .5s; }

	/**************************/
	/********** HOME **********/
	/**************************/
	/***** CLIENT SLIDER *****/
	#clientSlider {
		background-color: #23262b;
		height: 70px; }

	.slick-slide img {
		margin: 0 auto;
		padding: 20px 0; }

	/***** ABOUT *****/
	#aboutSection h1 {
		text-align: center;
		font-size: 24px;
		color: #23262b; }
	#aboutSection p {
		text-align: center;
		color: #23262b; }

	/***** OUR SERVICES *****/
	.servicesLink{
		padding-top: 10px!important;
	}
	.servicesLink a{
		color: white;
		padding: 10px 0;
		font-size: 16px;
	}
	.panelClick{
		display: block;
	}
	.panelHover{
		display: none;
	}
	#ourServicesSection {
		background-color: #23262b;
		padding: 20px 40px; }
	#ourServicesSection h1 {
		font-size: 24px;
		color: white; }
	#ourServicesSection #ourServicesPanelsContainerRoof, #ourServicesSection #ourServicesPanelsContainerProperty {
		padding-bottom: 0px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels {
		display: inline-block;
		width: 100%;
		padding-top: 0; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels {
		width: 100%;
		height: 180px;
		display: flex;
		justify-content: center;
		margin: 5px auto;}
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels p, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels p {
		color: white;
		padding: 0 10px;
		font-size: 20px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels a, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels a {
		color: white;
		text-decoration: underline;
		font-style: italic;
		font-size: 14px;
		padding: 0 30px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels span, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels span {
		display: none;
		color: #fff; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover span, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover span {
		display: block;
		text-align: center;
		font-family: "proxima_novaregular";
		padding: 0 10px; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover p, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover p {
		display: none; }
	#ourServicesSection #ourServicesPanelsContainerRoof .ourServicesPanels .panels:hover a, #ourServicesSection #ourServicesPanelsContainerProperty .ourServicesPanels .panels:hover a {
		display: none; }
	#ourServicesSection #ourServicesPanelsContainerProperty a {
		text-decoration: none !important;
		font-style: normal !important; }

	/***** WHY CHOOSE *****/
	#whyChoose h1 {
		font-size: 24px;
		color: #23262b; }
	#whyChoose a{
		color: white;
		border-radius: 100px;
		padding: 10px 20px;
		background-color: #23262b;
		width: 250px;
		margin: 15px auto;
		border: 1px solid #23262b;
		transition: all .5s ease;
	}
	#whyChoose a:hover{
		background-color: white;
		color: #23262b;
	}
	#whyChoose #whyChooseCircles {
		display: flex;
		justify-content: space-between; }
	#whyChoose #whyChooseCircles .circlesContainer {
		width: 30%; }
	#whyChoose #whyChooseCircles .circlesContainer .circles {
		width: 90px;
		height: 90px;
		border-radius: 50%;
		background-color: #D8D8D8;
		border: 1px solid #23262b;
		display: flex;
		margin: 0 auto;
		transition: 1s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer .circles:hover {
		background-color: #23262b;
		transition: 1s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer .circles:hover i {
		color: #fff;
		transition: 0.8s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer .circles i {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		font-size: 40px;
		color: #23262b;
		transition: 0.8s ease-in-out; }
	#whyChoose #whyChooseCircles .circlesContainer p {
		color: #23262b;
		margin: 15px 0 5px;
		font-size: 16px; }

	/***** OUR WORK *****/
	#ourWork {
		background-color: #23262b; }
	#ourWork h1 {
		padding: 15px 0;
		font-size: 24px;
		color: white;
		margin: 0; }
	#ourWorkProjects {
		display: inline-block;
		width: 100%;
	}
	#ourWorkProjects .projects {
		background-size: cover;
		background-repeat: no-repeat;
		height: 200px;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center; }
	#ourWorkProjects .projects p {
		font-size: 24px;
		color: white; }
	#ourWorkProjects .projects a {
		color: white;
		border-radius: 100px;
		padding: 8px 20px;
		background-color: #23262b;
		border: 1px solid #f0f0f0;
		transition: all .5s ease;
		width: 44%;
		margin: 0 auto; }
	#ourWorkProjects .projects a:hover{
		background-color: white;
		color: #23262b;
	}

	#ourWorkProjectsText {
		background-color: white;
		color: #23262b; }

	#ourWorkView{
		background-color: #23262b;
	}
	#ourWorkView a{
		padding: 10px 0;
		color: white;
		margin: 0;
	}

	#getInTouch {
		background-color: #23262b; }
	#getInTouch h1 {
		padding: 15px 0;
		font-size: 24px;
		color: white;
		margin: 0; }

	#contactSection {
		display: inline; }
	#contactSection #contactSectionInfo {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 30px 10px 30px; }
	#contactSection #contactSectionInfo .contactInfo {
		text-align: center;
		width: 100%; }
	#contactSection #contactSectionInfo .contactInfo ul li{
		font-size: 16px;
	}
	#contactSection #contactSectionInfo .contactInfoLogo {
		display: none; }
	#contactSection #contactSectionInfo .contactInfoLogo img {
		width: 70%; }
	#contactSection #contactSectionInfo .contactInfo ul {
		margin: 0;
		padding: 0;
		list-style: none; }
	#contactSection #contactSectionMap {
		width: 50%; }
	#contactInfoMap{
		width: 100%;
		height: 300px;
	}

	/**************************/
	/********** WORK **********/
	/**************************/
	.workPageProjects {
		display: flex; }
	.workPageProjects .projects {
		background: url("img/projects.png");
		background-size: cover;
		background-repeat: no-repeat;
		height: 300px;
		width: 33.333%;
		display: flex;
		flex-direction: column;
		justify-content: center; }
	.workPageProjects .projects p {
		color: white;
		font-size: 32px; }
	.workPageProjects .projects a {
		color: white;
		border-radius: 100px;
		padding: 10px 20px;
		background-color: #23262b;
		width: 40%;
		margin: 0 auto; }

	/**************************/
	/******* SERVICES *******/
	/**************************/

	.servicesDescription{
		padding: 20px 20px;
	}
	.servicesDescription h1{
		color: #23262b;
		font-size: 20px;
		margin: 10px 0 5px;
	}
	.servicesDescription ul li{
		font-size: 14px;
	}
	.servicesDescription h2{
		text-align: center;
		font-family: "proxima_novabold";
		font-size: 16px;
		margin: 20px 0 5px;
	}

	/***** FOOTER *****/
	.mainFooter {
		border-bottom: 40px solid #23262b;
		background-color: #23262b; }

	/******************************************************************************************************/
	/********************************************* SLIDER **************************************************/
	/******************************************************************************************************/

	#slider, #slider .sliderInner {
		width:100%;
		height: 350px !important;/* Must be the same size as the slider images */
		border-radius:3px;
	}

}


/*********************************************************************************************************************************************/
/***************************************************** END RESPONSIVE *************************************************************************/
/*********************************************************************************************************************************************/
/***************************************************** END RESPONSIVE *************************************************************************/
/*********************************************************************************************************************************************/
/***************************************************** END RESPONSIVE *************************************************************************/
/*********************************************************************************************************************************************/
/***************************************************** END RESPONSIVE *************************************************************************/
/*********************************************************************************************************************************************/

/******************************************************************************************************/
/********************************************* SLIDER **************************************************/
/******************************************************************************************************/

/* http://www.menucool.com */

#sliderFrame, #sliderFrame div {
	box-sizing: content-box;
}
#sliderFrame
{
	width:100%;
	margin:0 auto; /*center-aligned*/
}

#slider, #slider .sliderInner {
	width:100%;height:700px;/* Must be the same size as the slider images */
	border-radius:3px;
}

#slider {
	background-color:#23262b;
	position:relative;
	margin:0 auto; /*center-aligned*/
	transform: translate3d(0,0,0);
	box-shadow: 0px 1px 5px #999999;
	width: 100%;
}

/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
	z-index:2;
	cursor:pointer;
	position:absolute;
	top:0px;left:0px;border:0;padding:0;margin:0;
	width:100%;height:100%;
}
#slider .video {
	background:transparent url(video.html) no-repeat 50% 50%;
}

/* Caption styles */
#slider .mc-caption {
	position:absolute;
	width:100%;
	height:auto;
	padding:10px 0;/* 10px will increase the height.*/
	left:0px;
	bottom:0px;top:auto;
	overflow:hidden;
	font: bold 14px/20px Arial;
	color:#EEE;
	text-align:center;
	background:rgba(0,0,0,0.3);
}
#slider .mc-caption a {
	color:#FB0;
}
#slider .mc-caption a:hover {
	color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper  {
	top:320px;
	text-align:center;
	background:none;
	position:relative;
	z-index:3;
}

/*.bgLayer{
	background-size: cover!important;
	background-repeat: no-repeat!important;
	background-position: center!important;
}*/

/* each bullet */
#slider .navBulletsWrapper div
{
	width:11px; height:11px;
	font-size:0;color:White;/*hide the index number in the bullet element*/
	background:transparent url(bullet.html) no-repeat 0 0;
	display:inline-block; *display:inline; zoom:1;
	overflow:hidden;cursor:pointer;
	margin:0 6px;/* set distance between each bullet*/
}

#slider .navBulletsWrapper .active {background-position:0 -11px;}


/* --------- Others ------- */

#slider img, #slider>b, #slider a>b {
	position:absolute; border:none; display:none;
}

#slider .sliderInner {
	overflow:hidden;
	position:absolute; top:0; left:0;
}

#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}



/******************************************************************************************************/
/********************************************* FONTS **************************************************/
/******************************************************************************************************/

@font-face {
	font-family: 'proxima_novasemibold';
	src: url("fonts/proximanova-semibold-webfont.eot");
	src: url("fonts/proximanova-semibold-webfontd41d.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova-semibold-webfont.woff2") format("woff2"), url("fonts/proximanova-semibold-webfont.woff") format("woff"), url("fonts/proximanova-semibold-webfont.ttf") format("truetype"), url("fonts/proximanova-semibold-webfont.svg#proxima_novasemibold") format("svg");
	font-weight: normal;
	font-style: normal; }
@font-face {
	font-family: 'proxima_novabold';
	src: url("fonts/proximanova-bold_1-webfont.eot");
	src: url("fonts/proximanova-bold_1-webfontd41d.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova-bold_1-webfont.woff2") format("woff2"), url("fonts/proximanova-bold_1-webfont.woff") format("woff"), url("fonts/proximanova-bold_1-webfont.ttf") format("truetype"), url("fonts/proximanova-bold_1-webfont.svg#proxima_novabold") format("svg");
	font-weight: normal;
	font-style: normal; }
@font-face {
	font-family: 'proxima_novaregular';
	src: url("fonts/proximanova-regular-webfont.eot");
	src: url("fonts/proximanova-regular-webfontd41d.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova-regular-webfont.woff2") format("woff2"), url("fonts/proximanova-regular-webfont.woff") format("woff"), url("fonts/proximanova-regular-webfont.ttf") format("truetype"), url("fonts/proximanova-regular-webfont.svg#proxima_novaregular") format("svg");
	font-weight: normal;
	font-style: normal; }
@font-face {
	font-family: 'proxima_novalight';
	src: url("fonts/proximanova-light-webfont.eot");
	src: url("fonts/proximanova-light-webfontd41d.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova-light-webfont.woff2") format("woff2"), url("fonts/proximanova-light-webfont.woff") format("woff"), u