@charset "utf-8";
@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;800&display=swap);
@import url(https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Mr+De+Haviland&display=swap);

/* 

#title

0208 352 0897
07903 121 989
info@n-n-building.co.uk

-----------------

#ing
#ers

------------------

10 Church Vale
#line two
London
N2 9PA

------------------

dark: 2c2f31
middle: 7597b6
light: 3AA9FF


font-family: 'Playfair Display', serif;
font-family: 'PT Sans', sans-serif;
font-family: 'Mr De Haviland', cursive;

 .mobphone{display: none!important;}
 */

.bigbg{
	height: 100%;
	min-height: 300px;
	background-size: cover;
	background-position: center center;
}

::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 2px grey;}
::-webkit-scrollbar-thumb {background: #2c2f31;}

::-moz-selection {background: #2c2f31;color: #7597b6;}
::selection {background: #2c2f31; color: #7597b6;}

.togglerz{display: none;}
.maskz{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background-color: #111;
	z-index: 1000;
	display: none;
	cursor: pointer;
	opacity: 0.7;
}
body{
	margin: 0;
	padding: 0;
	background-color: #fff;
	padding: 0px 0;
	font-family: 'PT Sans', sans-serif;
	overflow-x:hidden; 
}
a, a:active, a:visited, a:link{
	text-decoration: none;
	color: #777;
}
p{
	font-size: 15px;
	line-height: 24px;
	font-weight: 500;
	opacity: 0.92;
	font-family: 'PT Sans', sans-serif;
}
ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
h1,h2,h3,h4,h5,h6{
	margin: 0;
	margin-bottom: 10px;
	font-weight: 400;
	font-family: 'Playfair Display', serif;
}
.revealpageone{
	width: 100%;
	height: 0%;
	position: fixed;
	background-color: #7597b6;
	animation-delay:0;
	z-index: 100000;
	bottom: 0;
	display: none;
}
.revealclass{
	animation: pagereveal 1.5s forwards;	
}
@-webkit-keyframes pagereveal {
    0% {height: 100%;}
    3% {height: 100%;}
    100% { height: 0%;}
}
.topbit{
	position: fixed;
	display: block;
	width: 100%;
	float: left;
	top: 0;
	left: 0;
	z-index: 10000;
	background-color: white;
	box-shadow: 0 0 70px rgba(0,0,0,0.1);
}
.toprightbar{
	float: right;
}
.logo{
	float: left;
	position: relative;
	z-index: 1;
}
.logo img{
	height: 100px;
	padding: 15px 0;
}
nav {
	text-align: right;
	float: right;
}
nav ul{
	float: right;
	text-align: right;
}
nav ul li{
	display: inline-block;
	position: relative;
}
nav ul li a{
	display: inline-block;
	line-height: 100px;
	color: #222;
	font-size: 15px;
	margin-left: 20px;
	position: relative;
}
nav ul li a:hover{
	color: #3AA9FF;
}
nav ul li a::after{
	position: absolute;
	content: "-";
	left: -15px;
	opacity: 0.5;
	font-weight: 700;
	color: #121212;
}
nav ul li:first-of-type a::after{display: none;}
.active{
	color: #3AA9FF!important;
}
.sub-menu{
	position: absolute;
	top:0;
	left: 0px;
	top: 100px;
	padding: 0px;
	display: none;
	z-index: 100;
	background-color: #3AA9FF;
	white-space: nowrap;
	clear: both;
	text-align: left;
	border-radius: 0px 0px 6px 6px;
}
.sub-menu li{
	display: block;
	width: 100%;
}
.sub-menu li a{
	display: block;
	padding: 10px 20px;
	margin: 0;
	font-size: 14px;
	line-height: 30px;
	color: white!important;
	border-bottom: 2px solid rgba(255,255,255,0.1);
}
.sub-menu li a:hover{
	color: #111!important;
}
nav ul li:hover .sub-menu{
	display: block;
}
.sub-menu li a::after{display: none;}
.openquote{
	display: inline-block;
	color: white!important;
	padding: 0 20px;
	line-height: 40px;
	float: right;
	margin: 30px 10px;
	font-size: 15px;
	position: relative;
}
.mainbutton{
	background-color: #7597b6;
	position: relative;
	overflow: hidden;
	color: white!important;
	padding: 0 20px;
	display: inline-block;
	z-index: 2;
	border-radius: 3px;
}
.mainbutton p{
	margin: 0;
	position: relative;
	z-index: 2;
	font-size: 15px!important;
	line-height: 40px;
}
.mainbutton::after{
	position: absolute;
	left: -50%;
	top: 20px;
	width: 300px;
	height: 300px;
	background-color: #121212;
	content: " ";
	transform: translate(50%, 50%);
	border-radius: 50%;
	transform: scale(0.5);
	-webkit-transition: ease 0.7s;
	-o-transition: ease 0.7s;
	transition: ease 0.7s;
	z-index: 1;
	opacity: 0.4;
}
.mainbutton:hover::after{
	transform:scale(2);
	opacity: 0.1;
}
.slideage{
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}
.slide1{background-image: url(../images/slider.jpg);}
.slide2{background-image: url(../images/slider2.jpg);}
.slide3{background-image: url(../images/slider3.jpg);}
.slide4{background-image: url(../images/shapes/success.svg);}
.slide5{background-image: url(../images/shapes/fail.svg);}

header{
	background-color: #2c2f31;
	height: auto;
	overflow: hidden;
	position: relative;
	margin-top: 100px;
}
.innerheader{
	position: relative;
	z-index: 10;
}
header::before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 30%;
	content: " ";
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,0));
	background-image: -o-linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,0));
	background-image: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0));
	pointer-events: none;
	z-index: 1;
}
header::after{
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	content: " ";
	background-image: -webkit-linear-gradient(top, #121212, #7597b6);
	background-image: -o-linear-gradient(top, #121212, #7597b6);
	background-image: linear-gradient(to bottom, #121212, #7597b6);
	pointer-events: none;
	z-index: 1;
	opacity: 0.1;
}
.headerbg{
	position: absolute;
	bottom: 0;
	left: 0;
	height: 120%;
	width: 100%;
	z-index: 0;
	opacity: 0.7;

	background-image: url(../images/header.jpg);
	-webkit-background-size: cover;
		background-size: cover;	
		background-position: bottom center;

}
.otherheader .headerbg{
		background-position: center center;
}
.headerbgclass{
	animation: comein 1.4s forwards;		
}
@keyframes comein{
    0% {transform: scale(1.2);}
    30% {transform: scale(1.2);}
    100% {transform: scale(1.0);}
}


.banner{
	position: relative;
	width: 100%;
	height: calc(100vh - 370px);
	display: block;
	min-height: 600px;
	color: white;
	float: left;
}
.banner .row{
	position: relative;	
	height: 100%;
}
.bannertext{
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 65%;
	width: 60%;
	text-align: center;
}
.bannertext h1{
	color: white;
	font-size: 3vw;
	line-height: 100%;
	text-shadow: 0 0 8px rgba(0,0,0,0.6);
}
.bannertext h1 strong{
	font-weight: 400;
	color: #3AA9FF;
	font-style: italic;
}
.bannertext p{
	text-shadow: 0 0 8px rgba(0,0,0,0.6);
	font-size: 20px;
}
.bannertext a{
	margin: 5px;
	width: 150px;
}


.otherheader .banner{
	height: auto;
	min-height: auto;
}
.otherheader .bannertext{
	position: relative;
	padding-top: 200px;
	padding-bottom: 200px;

	transform: translate(0%, 0%);
	left: 0%;
	top: 0%;
	width: 60%;
	text-align: center;
	margin: auto;
}



.logos{
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: center;
	width: 100%;
}
.logos img{
	height: 80px;
	display: inline-block;
	margin: 0 10px;
	opacity: 0.85;
	-webkit-transition: ease 0.5s;
	-o-transition: ease 0.5s;
	transition: ease 0.5s;
	padding: 15px;
}
.logos img:hover{
	opacity: 1;	
}

/******  NEXT SECTION ********/

.welcome{
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
}
.welcome span{
	font-family: 'Mr De Haviland', cursive;
	font-size: 32px;
	color: #3AA9FF;
}

/******  NEXT SECTION ********/

main strong{
	color: #7597b6;	
	font-weight: 300;
}
main h2{
	color: #7597b6;
	font-size: 30px;
	line-height: 40px;
}
main h3{
	font-size: 30px;
	line-height: 40px;
}
main h4{
	font-size: 30px;
	line-height: 40px;
}
main h5{
	font-size: 25px;
	line-height: 35px;
}
main h6{
	font-size: 20px;
	line-height: 30px;
}

/******  NEXT SECTION ********/

.box-section{
	background-color: #7597b6;
	display: block;
	overflow: auto;
}
.box-section .mainbutton{
	background-color: #2c2f31;
}
.box-section .mainbutton::after{
	background-color: #7597b6;
}
.box-section h3{
	color: #fff;
	font-size: 30px;
	line-height: 40px;
	text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
.left-box, .right-boxes, .left-boxes, .right-box{
	padding: 0;
}
.left-box{	
	background-image: url(../images/1.jpg);
	-webkit-background-size: cover;
	background-size: cover;	
	background-position: center;
}
.boxx{
	height: 380px;
	padding: 8%;
	background-color: #7597b6;
	color: white;
	overflow-y: scroll;
	position: relative;
}
.boxx::-webkit-scrollbar {
    display: none!important;
}
.right-two{	
	background-image: url(../images/2.jpg);
	-webkit-background-size: cover;
	background-size: cover;	
	background-position: center;
}
.right-three{	
	background-image: url(../images/3.jpg);
	-webkit-background-size: cover;
	background-size: cover;	
	background-position: center;
}
.right-box{	
	background-image: url(../images/5.jpg);
	-webkit-background-size: cover;
	background-size: cover;	
	background-position: center;
}
.left-one{	
	background-image: url(../images/4.jpeg);
	-webkit-background-size: cover;
	background-size: cover;	
	background-position: center;
}
.box-image{
	position: relative;
}
.box-image::after{
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	content: " ";
	background-image: -webkit-linear-gradient(top left, #121212, #7597b6);
	background-image: -o-linear-gradient(top left, #121212, #7597b6);
	background-image: linear-gradient(to bottom right, #121212, #7597b6);
	pointer-events: none;
	z-index: 1;
	opacity: 0.2;
	-webkit-transition: ease 0.5s;
	-o-transition: ease 0.5s;
	transition: ease 0.5s;
}
.box-image:hover::after{opacity: 0;}
.big-text{
	position: absolute;
	bottom: 0;
	font-size: 12vw;
	color: #121212;
	line-height: 300px;
	left: -40px;
	font-family: 'Mr De Haviland', cursive;
	opacity: 0.05;
	z-index: -1;
}
/******  NEXT SECTION ********/
.promise{
	padding-top: 120px;
	padding-bottom: 120px;
	text-align: center;
}
.promise h3{
	color: #7597b6;
	font-size: 30px;
	line-height: 50px;
}

/******  NEXT SECTION ********/

.content-image{
	/*background-image: url(../images/content.jpg);*/
	-webkit-background-size: cover;
	background-size: cover;	
	background-position: center;
	float: left;
	position: relative;
}
.content{
	padding: 100px;
	float: right;
	padding-left: 0;
	background-color: #eee;
}
.content-section{
	display: block;
	width: 100%;
}
.lightbg{background-color: #eee;float: left;}
/******  NEXT SECTION ********/

.project{
	position: relative;
	margin-top: 120px;
	margin-bottom: 120px;
	color: #555;
	display: block;
	width: 100%;
	float: left;
	overflow: hidden;
	
}
.projectinfo{
	width: calc(50% - 200px);
	position: relative;
	padding: 10px 30px 30px 0;
}
.projectslider{
	width: calc(60% + 200px);
	position: absolute;
	top: 0;
	right: -10%;
	padding-left: 0px;
}
.projectbox{
	color: white;
	margin: 0;
	padding: 10px;
	cursor: grab;
}
.innerproject{
	background-image: -webkit-linear-gradient(top left, #2c2f31, #7597b6);
	background-image: -o-linear-gradient(top left, #2c2f31, #7597b6);
	background-image: linear-gradient(to bottom right, #2c2f31, #7597b6);
	padding: 0px;	
	position: relative;
}
.innerproject::after{
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	content: " ";
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), #2c2f31);
	background-image: -o-linear-gradient(top, rgba(0,0,0,0), #2c2f31);
	background-image: linear-gradient(to bottom, rgba(0,0,0,0), #2c2f31);
	pointer-events: none;
	z-index: 1;
	opacity: 0.6;
	-webkit-transition: ease 0.3s;
	-o-transition: ease 0.3s;
	transition: ease 0.3s;
}
.innerproject:hover::after{opacity: 0.4;}
.projectslider ul li{
	margin: 10px;
	padding: 0;
}
.projectslider .uk-active{
	margin: 0;padding: 0;
}
/*.projectslider ul a{
	padding: 0!important;
}*/
.projectbox span{
	color: white;
	margin-bottom: 20px;
}
.projectinfo p strong{
	color: #2c2f31;
}
.projectinfo p:first-of-type{
	margin-bottom: 0;
}
.projectinfo h4{
	color: #7597b6;
	margin-bottom: 0;
}
.project-text h5{
	color: white;
	margin-bottom: 0;
	text-shadow: 0 4px 4px rgba(0,0,0,0.7);
	-webkit-transition: ease 0.3s;
	-o-transition: ease 0.3s;
	transition: ease 0.3s;
}
.project-text p{
	margin: 0;
}
.project-text .mainbutton{
	margin-top: 20px;
}
.project-text{
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 100%;
	padding: 30px;
	z-index: 5;
}

/******  NEXT SECTION ********/

.consultation{
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #eee;
	display: block;
	float: left;
	width: 100%;
	text-align: center;
}
.consultation h4{
	margin-bottom: 20px;
}
.consultation a{
	float: none;
}
.consultation .mainbutton{
	box-shadow: 0 6px 16px rgba(0,0,0,0.15);
	-webkit-transition: ease 0.3s;
	-o-transition: ease 0.3s;
	transition: ease 0.3s;
}
.consultation .mainbutton:hover{
	box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.consultation .mainbutton p{
	font-size: 18px!important;
}
/******  NEXT SECTION ********/

.why{
	padding-top: 60px;
	padding-bottom: 60px;
	width: 100%;
	float: left;
}
.why-box{
	padding-right: 60px;
}
.why h4{
	color: #7597b6;
	font-size: 25px;
}

/******  NEXT SECTION ********/

.home-reviews{
	width: 100%;
	float: left;
	background-image: url(../images/review-image.jpg);
	-webkit-background-size: cover;
	background-size: cover;	
	background-position: center;
	padding-top: 120px;
	padding-bottom: 120px;	
	position: relative;
}
.home-reviews::after{
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	content: " ";
	background-image: -webkit-linear-gradient(top, #121212, #7597b6);
	background-image: -o-linear-gradient(top, #121212, #7597b6);
	background-image: linear-gradient(to bottom, #121212, #7597b6);
	pointer-events: none;
	z-index: 1;
	opacity: 0.4;
}
.review-box{
	padding: 60px;
	background-color: #2c2f31;
	color: white;
	position: relative;
	z-index: 2;
	min-height: 580px;
	border-radius: 6px;

	background-image: url(../images/shapes/quotez.svg);
	-webkit-background-size: cover;
	background-size: cover;	
	background-position: bottom -100px right -100px;
	background-repeat: no-repeat;
}
.review-icon{
	display: block;
	margin-bottom: 20px;
	color: #7597b6;
}
.review-box h4{
	color: #7597b6;
	margin-bottom: 30px;
}
#typed{
	font-size: 15px;
	line-height: 100%;
	margin: 0;
}
.typed-cursor{
	font-size: 15px;
	color: #7597b6;
}
.review-box strong{
	color: #7597b6;
	font-style: italic;
}
.next-btn{
	margin-right: calc(10% + 60px)!important;
	color: white!important;
	position: relative;
	z-index: 1000;
	background-color: rgba(0,0,0,0.5);
}
/******  NEXT SECTION ********/

footer{
	margin-top: 0px;
	color: white;
	background-color: #2c2f31;
	padding-top: 80px;
	padding-bottom: 40px;
	position: relative;
	overflow:hidden;
	float: left;
	width: 100%;
}
footer::after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: -webkit-linear-gradient(top left, #2c2f31, #7597b6);
	background-image: -o-linear-gradient(top left, #2c2f31, #7597b6);
	background-image: linear-gradient(to bottom right, #2c2f31, #7597b6);
	content: " ";
	z-index: 1;
	pointer-events: none;
	opacity: 0.0;
}
footer .row{
	position: relative;
	z-index: 10;
}
.footercurve{
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 100%;
	z-index: 10;
}
footer h6{
	font-size: 25px;
	line-height: 30px;
	margin: 0;
	color: #7597b6;
	font-weight: 300;
	letter-spacing: -1px;
	text-transform: capitalize;
	margin-bottom: 20px;
}
.by{
	color: #7597b6;
	width: 100%;
	display: block;
	margin-top: 30px;
}
.by p{
	font-size: 13px;
	opacity: 0.8;
	font-weight: 300;
	margin: 0;
	line-height: 30px;
	color: white;
	display: inline-block;
}
.footerlinks{
	display: block;
}
.footerlinks a{
	font-size: 10px;
	letter-spacing: 1px;
	opacity: 0.9;
	font-weight: 300;
	margin: 0;
	margin-top: 20px;
	margin-right: 0px;
	line-height: 30px;
	font-size: 13px;
	display: inline-block;
	color: white;
}
.footerlinks a::after{
	content: "/"
}
.footerlinks a:last-of-type::after{
	display: none;
}
.footerlinks a:hover{
	color: #7597b6;	
}
footer ul li{
	margin: 0;
	line-height: 30px;
	display: block;
	margin-right: 10px;
	font-size: 15px;
}
footer ul li a, .footright a{color: #fff!important;}
footer ul li a:hover{
	color: #7597b6!important;
}
.footright a{
	margin: 0;
	line-height: 40px;
	margin-right: 30px;
	display: block;
	font-size: 13px;
}
.footright a:hover{
	color: #7597b6!important;	
}
.footright span{
	margin-right: 15px;
	color: #7597b6;
}
.footright a:hover{
	color: #7597b6;	
}
footer a{
	/*text-transform: capitalize;*/
}
footer .openquote{display: none;}


/******  NEXT SECTION ********/

.assist{
	position: fixed;
	width: 60%;
	height: calc(100vh - 220px);
	top: 110px;
	left: 20%;
	background-color: rgba(0,0,0,0.95);
	z-index: 10000;
	padding: 10%;
	border-radius: 6px;
	text-align: center;
	transform:scale(0.8);
	display: block;
	-webkit-transition: ease 0.5s;
	-o-transition: ease 0.5s;
	transition: ease 0.5s;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}
.showquote{
	transform:scale(1);
	opacity: 1;
	pointer-events: auto;
}
.question {
	height:auto;
	position: absolute;
	top: 150%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity:1;
	transition: 1s;
	width: 50%;
	padding: 80px;
	z-index: 3;
}
.one{
	top: 50%;
	opacity: 1;
}
.assist p{
	font-size: 30px;
	line-height: 50px;
	color: white;
	margin-bottom: 50px;
	margin-top: 50px;
}
.assist a{
	display: block;
	height: 60px;
	line-height: 60px;
	border-radius: 6px;
	border:1px solid rgba(255,255,255,0.4);
	margin-bottom: 15px;
	-webkit-transition: ease 0.2s;
	-o-transition: ease 0.2s;
	transition: ease 0.2s;
	color: white;
}
.assist a:hover{
	background-color: rgba(0,0,0,0.8);
	border-radius: 6px;
  	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
	border:1px solid rgba(255,255,255,0.9);
}
.bookme{
	background-color: #7597b6;
}
.assist input, .assist select{
	color: #fff;
	padding: 0px 0px;
	border-left: 0px solid #111;
	margin-bottom: 10px;
	background-color: rgba(255,255,255,0.1)!important;
	font-size: 15px;
	box-shadow: none;
	font-weight: 500;
	transition: ease 0.3s;
	line-height: 40px;
	display: block;
	text-align: center;
	width: 100%;
	border-radius: 6px;
	border: 0;
	outline: 0;
	width: 80%;
	margin:auto;
}
.assist input[type=submit]{
	border-radius: 6px;
	color: white!important;
	text-transform: uppercase;
	padding: 0 20px;
	font-size: 11px;
	letter-spacing: 1px;
	display: inline-block;
	background-color: rgba(50,50,50,0.3);
	line-height: 50px;
	box-shadow: 0px;
	-webkit-transition: ease 0.2s;
	-o-transition: ease 0.2s;
	transition: ease 0.2s;
	margin-top: 40px;
	background-color: #7597b6!important;
}
.three p{
	font-size: 15px;
	margin: 0;
}
.closeform{
	display: none;
}
.closequote span{
	position: absolute;
	width: 60px;
	height: 60px;
	line-height: 60px;
	background-color: #7597b6;
	/*left: calc(50% - 30px);*/
	left: calc(100% - 70px);
	bottom: 15px;
	text-align: center;
	color: white;
	border-radius: 50%;
	z-index: 2;
	opacity: 1;
	cursor: pointer;
}


.other-main{
	padding-top: 40px;
	padding-bottom: 40px;
}
.other-main .welcome{
	padding-top: 0;
}
.other-main .content{
	padding: 40px;
	background-color: transparent;
}
.other-main .right-text{padding-right: 1.15rem;}
.other-main .left-text{padding-left: 1.15rem;}
/*.other-main .content-section{
	margin-bottom: 40px;
}*/
.other-main .second-section .content{
	float: left;
}
.services{background-color: #eeeeee;}
.service-box{
	padding: 60px 1.15rem;
	color: #777;
	border-radius: 6px;
}
.service-box ul{
	margin-top: 0px;
}
.service-box ul li{
	line-height: 24px;
	font-size: 15px;
	padding: 5px 40px 5px 60px;
	font-weight: 400;
	display: inline-block;
	width: 100%;
	-webkit-transition: ease 0.3s;
	-o-transition: ease 0.3s;
	transition: ease 0.3s;
	position: relative;
	border-radius: 30px;
	margin-bottom: 15px;
}
.service-box ul li::after{
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	content: url(../images/shapes/check.svg);
	padding: 8px;
	-webkit-transition: ease 0.3s;
	-o-transition: ease 0.3s;
	transition: ease 0.3s;
	background-color: #7597b6;
	border-radius: 3px;
}
.service-box ul li:hover::after{
	box-shadow: 0 0 10px #7597b6;
	-webkit-transition: ease 0.3s;
	-o-transition: ease 0.3s;
	transition: ease 0.3s;
}


.residential-one{background-image: url(../images/residential1.jpg);}
.residential-two{background-image: url(../images/residential2.jpg);}
.commercial-one{background-image: url(../images/commercial1.jpg);}
.extension{background-image: url(../images/extension.jpg);}
.extension2{background-image: url(../images/extension2.jpg);}
.new1{background-image: url(../images/new1.jpg);}
.new2{background-image: url(../images/new2.jpg);}
.design-build{background-image: url(../images/designbuild.jpg);}




.projectz{
	padding-bottom: 50px;
	border-bottom: 2px solid #eee;
}
.project-box{
	overflow: auto;
	border-radius: 6px;
}
.project-header{
	padding-bottom: 50px;
	margin-top: 50px;
}
.project-header img{
	width: 100%;
}
.projectz span{
	font-style: italic;
	color: #7597b6;
}
.consultation .mainbutton{margin-bottom: 0;margin-top: 10px;}
.projectz:first-child .project-header{margin-top: 0;}

.myform{
	overflow: auto;
	width: 100%;
}
.myform label{
	float: left;
	display: block;
	font-size: 13px;
	line-height: 20px;
	position: relative;   
	box-sizing: border-box;
	padding: 0px;
	color: #151515;
	font-weight: 500;
	width: 100%;
	margin-top: 10px;
}
select{
	border-radius: 0px;
}
.formname{
	padding-right: 10px;
}
.myform a{
	width: calc(100% - 225px);
	line-height: 30px;
	color: #fff;
	background-color: #111;
	display: block;
	float: left;
	padding: 0px 20px;
}
.myform input, .myform select{
	width: 100%;
	color: #141414;
	padding: 10px 20px;
	border: 0px;
	border-left: 0px solid #111;
	height: 60px;
	margin-bottom: 10px;
	background-color: rgba(0,0,0,0.1);
	font-size: 15px;
	box-shadow: none;
	font-weight: 500;
	transition: ease 0.3s;
	border-radius: 6px;
}
.myform textarea{
	width: 100%;
	color: #141414;
	padding: 10px 20px;
	border:0px;
	border-left: 0px solid #111;
	height: 150px;
	margin-bottom: 10px;
	background-color: rgba(0,0,0,0.1);
	font-size: 15px;
	box-shadow: none;
	font-weight: 500;
	transition: ease 0.3s;
	border-radius: 6px;
}
.select-option{
	background-color: #666;
	border: none;
	color: #fff;
}
input[type=submit]{
	background-color: #7597b6;
	color: white!important;
	font-size: 15px;
	display: inline-block;
	line-height: 30px;
	-webkit-transition: ease 0.3s;
	-o-transition: ease 0.3s;
	transition: ease 0.3s;
	width: auto;
	padding: 0 30px;
	position: relative;
	font-weight: 500;
}
.submitenv{
	height: 60px;
	position: absolute;
	top: 20px;
	left: 10px;
	
}
.myform input:focus, .myform textarea:focus, .myform select:focus{
	border:0px;
	outline: none!important;
	background-color: #7597b6;
	padding-left: 20px;
	transition: ease 0.3s;
	color: white!important;
}
::-webkit-input-placeholder { color: #141414!important;font-weight: 500;opacity: 0.99;}
::-moz-placeholder { color: #141414!important;font-weight: 500;opacity: 0.99;}
:-ms-input-placeholder { color: #141414!important;font-weight: 500;opacity: 0.99;}
:-moz-placeholder { color: #141414!important;font-weight: 500;opacity: 0.99;}

.leftsubmit{
	float: left!important;
	padding-top: 30px;
	position: relative;
}

.checkz input{
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 2px solid white;
	margin-bottom: 0;
}
.checkz p{
	display: inline;
	width: auto;
	line-height: 30px;
	color: #141414;
	float: left;
	margin: 0;
	padding-right: 30px;
}
.checkd{
	width: 100%;
	text-align: left;
	padding-top: 10px;
	padding-bottom: 20px;
	display: block;
	float: left;	
}

.thumbs{
	float: left;
	width: 25%;
	padding: 10px;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.thumbs::before{	
	content: " ";
	width: calc(100% - 20px);
	height: calc(0% - 20px);
	bottom: 10px;
	left: 10px;
	z-index: 20;
	position: absolute;
	opacity: 0.25;
	pointer-events:none;
	background-color: #121212;
-webkit-transition: all 100ms cubic-bezier(1,.11,.52,.99); 
   -moz-transition: all 100ms cubic-bezier(1,.11,.52,.99); 
     -o-transition: all 100ms cubic-bezier(1,.11,.52,.99); 
        transition: all 100ms cubic-bezier(1,.11,.52,.99);
	border-radius: 0px;
}
.thumbs img{
	width: 100%;
	margin: 0!important;
	border-radius: 0px;
}
.thumbs a{
	margin: 0!important;
}
.thumbs:hover::after{
	-webkit-background-size: 20%;
	background-size: 20%;
	opacity: 0.75;
}
.thumbs:hover::before{
	height: calc(100% - 20px);
}
/*main .thumbs:nth-child(10n + 1){
	width: 50%;
	float: left;
}
main .thumbs:nth-child(10n + 4){
	width: 50%;
	float: right;	
}*/
.reviews{
	-webkit-columns: 2;
	-moz-columns: 2;
	-o-columns: 2;
	columns: 2;
	-webkit-column-gap: 30px;
	-moz-column-gap: 30px;
	-o-column-gap: 30px;
	column-gap: 30px;
}
.twocols{
	-webkit-columns: 2;
	-moz-columns: 2;
	-o-columns: 2;
	columns: 2;
	-webkit-column-gap: 30px;
	-moz-column-gap: 30px;
	-o-column-gap: 30px;
	column-gap: 30px;
}

blockquote{
	margin: 0;
	margin-bottom: 30px;
	padding: 60px;
	padding-top: 140px;
	background-color: #121212;
	color: white;
	position: relative;
	z-index: 2;
	width: 100%;
	display: inline-block;
	border-radius: 6px;

	background-image: url(../images/shapes/quotez.svg);
	-webkit-background-size: cover;
	background-size: cover;	
	background-position: bottom -100px right -100px;
	background-repeat: no-repeat;
}
blockquote::after{
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	content: " ";
	background-image: url(../images/shapes/quotez2.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	
}
blockquote span{
	margin-top: 20px;
	display: block;
	color: #7597b6;
	font-style: italic;
	font-size: 15px;
}


.contactbox{
	background-color: #2c2f31;
	padding: 40px;
	border-radius: 6px;
	color: white;	
	position: relative;
	margin-bottom: 40px;
}
.contactbox h4{
	color: white;
}
.contactbox a, .contactbox p{
	display: block;
	line-height: 40px;
	font-size: 15px;
	margin: 0;
	color: white;
}
.contactbox a span{
	color: #7597b6;
}


.other-main .contact{
	float: left;
	padding-top: 0;
}

.other-main h6{
	width: 100%;
	text-align: center;
	margin-bottom: 40px;
}

.gold-award{
	float: left;
	width: 100%;
	padding-top: 100px;
	padding-bottom: 100px;
}

footer .mobphone{display: none;}

footer .social{
	margin-top: 30px;
	margin-bottom: 20px;
}
footer .social a{
	display: inline-block;
	margin-right: 0px;
	padding: 0 12px;
	color: #fff;
	border-radius: 2px;
}
footer .social a:hover{
	color: #fff!important;
}
footer .social span{
	color: #fff!important;
	padding: 0;
	margin: 0;
}
footer .social img{
	height: 20px;
	margin: 0;
}

footer .social a[href^="#"]{display: none!important;}
footer .social a[href*="instagram"]{background-color: #FD5949;
background: -webkit-linear-gradient(left, #f68b4a, #eb543a, #984a95);}
footer .social a[href*="facebook"]{background-color: #4B69B0;}
footer .social a[href*="twitter"]{background-color: #37B1E1;}
footer .social a[href*="youtube"]{background-color: #E83F3A;}
footer .social a[href*="whatsapp"]{background-color: #2BA63A;}
footer .social a[href*="yell"]{background-color: yellow;}
footer .social a[href*="gassafe"]{background-color: yellow;}
footer .social a[href*="linkedin"]{background-color: #005a87;}
footer .social a[href*="mybuilder"]{background-color: #2e426d;}
footer .social a[href*="bookabuilder"]{background-color: #639ab6;}
footer .social a[href*="trustatrader"]{background-color: #348ab4;}
footer .social a[href*="checkatrade"]{background-color: #2279fb;}
footer .social a[href*="napit"]{background-color: #063f7f;}
footer .social a[href*="niceic"]{background-color: #c00c28;}
footer .social a[href*="partp"]{background-color: #63a519;}
footer .social a[href*="ratedpeople"]{background-color: #418542;}
footer .social a[href*="fmb"]{background-color: #9e0a34;}
footer .social a[href*="trustmark"]{background-color: #01395d;}
footer .social a[href*="guilds"]{background-color: #ec2823;}
footer .social a[href*="google"]{background-color: #4887ea;}
footer .social a[href*="houzz"]{background-color: #ffffff;}
footer .social a[href*="pinterest"]{background-color: #e60023;}

.medbg{
	background-color: #7597b6;
	color: white;
	padding-top: 40px;
	padding-bottom: 40px;
}
.medbg h1, .medbg h2, .medbg h3, 
.medbg h4, .medbg h5 {color: white;}
.medbg a{color: #2c2f31!important;}

.headleft{
	width: calc(50% - 30px);
	height: auto;
	position: relative;
	float: left;
	background-size: cover;
	-webkit-background-size: cover;
	background-position: center;
	background-image: url(../images/residential-project.jpg);
	margin: 20px 10px;
	margin-left: 20px;
}
.headright{
	width: calc(50% - 30px);
	height: auto;
	position: relative;
	float: right;
	background-size: cover;
	-webkit-background-size: cover;
	background-position: center;
	background-image: url(../images/commercial-project.jpg);
	margin: 20px 10px;
	margin-right: 20px;
}
.select-project .bannertext{
	z-index: 10;
}
.select-project::after{
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	content: " ";
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), #2c2f31);
	background-image: -o-linear-gradient(top, rgba(0,0,0,0), #2c2f31);
	background-image: linear-gradient(to bottom, rgba(0,0,0,0), #2c2f31);
	pointer-events: none;
	z-index: 1;
	opacity: 0.6;
	-webkit-transition: ease 0.3s;
	-o-transition: ease 0.3s;
	transition: ease 0.3s;
}
.select-project:hover::after{opacity: 0.3;}

.reviews{padding: 0!important;}
.contact{padding: 0!important;}




.project-box .gold-award{padding-bottom: 0;}
.project-box .columns:nth-child(2){padding-left: 0;}
.project-box .columns:nth-child(3){padding-right: 0;}




.drawnlogo{
	text-align: center;
	width: 92%;
	max-width: 1000px;
	-webkit-background-image: none!important;
	-moz-background-image: none!important;
	-o-background-image: none!important;
}
.drawnlogo img{padding: 40px;}
.youn {
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  animation: dash 6s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.nandn {
  opacity: 0;
  animation: opac 1s linear forwards;
  animation-delay: 3.5s;
}
.nandn2 {
  opacity: 0;
  animation: opac 1s linear forwards;
  animation-delay: 0s;
}


@keyframes opac {
  to {
    opacity: 1;
  }
}
.page-gallery{
	padding-top: 80px;
	padding-bottom: 80px;
}
.tr{background-position: top right;}
.bgl{background-position: center left;}

.projectslider .uk-grid{margin-left: 0!important;}


.mobile-menu{display: none;}
@media screen and (max-width: 64em) {	
.nopad{padding: 0;}
.mobile-menu{
	position: fixed;
	z-index: 1000000;
	display: block;
	width: 100%;
	top: 0px;
	left: 0px;
	color: white;
	background: #121212;
	box-shadow: 0 0 14px rgba(0,0,0,0.4);
	text-align: center;
}
.mobile-menu a{color: white;}
.mobile-menu span{
	line-height: 50px;
	color: white;
}
.toggler{
	cursor: pointer;
}
.mobile-menu .row{
	padding-left: 0;
	padding-right: 0;
}
nav{
	position: fixed;
	top: 49px;
	left: -100%;
	display: table;
	height: calc(100vh - 50px);
	width: 100%;
	opacity: 0;
	z-index: 100000;
	text-align: left;
	padding: 0 30px;
	text-align: center;
	padding-top: 20px;

	-webkit-transition:ease 1s;
	-o-transition:ease 1s;
	transition:ease 1s;
	background-color: rgba(0,0,0,0.9);
	pointer-events: none;
}
.twocols{
	-webkit-columns: 1;
	-moz-columns: 1;
	-o-columns: 1;
	columns: 1;
}

.openquote{
	display: block;
	color: white!important;
	padding: 0 20px;
	line-height: 40px;
	float: left;
	margin: 30px 10px;
	font-size: 13px;
	position: relative;
}
.shownav{
	opacity: 0.95;
	pointer-events: auto;
	left: 0;
}
nav .openquote{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0;
}
nav .openquote p{
	line-height: 40px;
}
nav ul li{
	display: block;
}
nav ul{
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	width: 100%;
}
nav ul li a{
	line-height: 35px;
	font-size: 24px;
	font-weight: 500;
	color: #fff!important;
	display: block;
	cursor: pointer;
	text-shadow: 0 0 6px rgba(0,0,0,0.4);
	margin: 0;
}
nav ul li::after{
	display: none;
}
.sub-menu{
	position: relative;
	top:0;
	left: 0px;
	top: 00px;
	padding: 0px;
	display: block;
	z-index: 100;
	background-color: transparent;
	white-space: nowrap;
	clear: both;
	text-align: left;
	border-radius: 0px 0px 6px 6px;
}
.sub-menu li a{
	display: block;
	padding: 0px;
	margin: 0;
	font-size: 16px;
	line-height: 30px;
	color: white!important;
	border-bottom: 0px solid rgba(255,255,255,0.1);
}
.bigslider{
	min-height: calc((100vh - 170px) - 0vh)!important;	
}
.topbit{
	position: relative;
	display: block;
	width: 100%;
	float: left;
	top: 50px;
	left: 0;
	z-index: 10000;
	background-color: white;
	box-shadow: 0 0 90px rgba(0,0,0,0.3);
}
header{
	margin-top: 00px;
	float: left;	
	width: 100%;
	margin-bottom: 40px;
}
.logo{
	width: 100%;
	text-align: center;
}
.left-box{	
	height: 400px;
}
.boxx{
	height: auto;
	min-height: 400px;
	padding: 50px;
	color: white;
	overflow-y: auto;
	position: relative;
}
.right-box{	
	height: 400px;
}
.box-image{
	height: 400px;
}
.content-image{
	min-height: 450px!important;
}
.content{
	padding: 50px;
}
.promise{
	padding: 50px 1.15rem;
	text-align: left;
}
.promise h3{
	color: #7597b6;
	font-size: 21px;
	line-height: 30px;
}
.project{
	margin-top: 50px;
	margin-bottom: 50px;	
}
.projectinfo{
	width: calc(100% - 0px);
	position: relative;
	padding: 60px 1.15rem;
}
.projectslider{
	width: calc(100% + 200px);
	position: relative;
	top: 0;
	right: 0%;
	padding-left: 0px;
}
.consultation{
	padding-top: 20px;
	padding-bottom: 20px;
}
.why{
	padding-top: 20px;
	padding-bottom: 20px;
}
.home-reviews{
	padding-bottom: 20px;
}
.footleft{
	display: none;
}
.big-text{
	font-size: 50vw;
	left: -40px;
	opacity: 0.05;
}
.banner{
	position: relative;
	width: 100%;
	height: auto;
	display: block;
	color: white;
	float: left;
	min-height: 300px;
}
.banner .row{
	position: relative;	
	height: 100%;
}
.bannertext{
	position: relative;
	transform: translate(0%, 0%);
	left: 0%;
	top: 0%;
	width: 100%;
	text-align: center;
	padding-top: 200px;
	padding-bottom: 100px;
}

.logos img{
	height: 60px;
	margin: 0 20px;
	filter: grayscale(00%);
	opacity: 1;
}
.welcome{
	padding-top: 40px;
	padding-bottom: 40px;
}



main strong{
	color: #7597b6;	
	font-weight: 300;
}
main h2{
	color: #7597b6;
	font-size: 24px;
	line-height: 30px;
}
main h3{
	font-size: 24px;
	line-height: 30px;
}
main h4{
	font-size: 24px;
	line-height: 30px;
}
main h5{
	font-size: 24px;
	line-height: 30px;
}
main h6{
	font-size: 16px;
	line-height: 30px;
}
.bannertext h1{
	font-size: 6vw;
	line-height: 140%;
	font-weight: 800;
}


.assist{
	position: fixed;
	width: 90%;
	height: calc(100vh - 20px);
	top: 10px;
	left: 5%;
}
.question {
	width: 100%;
	padding: 80px;
}

.other-main .content{
	padding: 20px 0;
}
.content{
	padding: 20px 30px;
}
.service-box{
	padding: 20px 30px;
}
.otherheader .bannertext{
	padding-top: 100px;
	padding-bottom: 100px;
}

.reviews{
	-webkit-columns: 1;
	-moz-columns: 1;
	-o-columns: 1;
	columns: 1;
}
.thumbs{
	width: 25%;
	padding: 5px;
}
/*main .thumbs:nth-child(10n + 1){
	width: 25%;
	float: left;
}
main .thumbs:nth-child(10n + 4){
	width: 25%;
	float: right;	
}
*/
blockquote{
	margin-bottom: 20px;
	padding: 30px;
	padding-top: 100px;
}
blockquote::after{
	top: 30px;
	left: 30px;	
}
.left-box{display: none;}
.otherheader{margin-top: 50px;}
.headleft{
	width: calc(100% - 20px);
	height: calc(50vh - 50px);
	margin: 10px;
}
.headright{
	width: calc(100% - 20px);
	height: calc(50vh - 50px);
	margin: 10px;
	margin-top: 0;
}
.project-box .columns:nth-child(2){padding-right: 0;}
.project-box .columns:nth-child(3){padding-left: 0;}
.drawnlogo{max-width: 600px;}

.page-gallery .column{padding: 5px;}
footer .columns{padding-left: 0;padding-right: 0;}
.consultation .columns{padding-left: 0;padding-right: 0;}
.welcome .columns{padding-left: 0;padding-right: 0;}
.services .row{padding-left: 0;padding-right: 0;}
.service-box .columns{padding-left: 0;padding-right: 0;}
.other-main .content-section{margin: 0;}
.contact-sidebar{padding-left: 0;padding-right: 0;}
.contactbox{margin-bottom: 10px;}
.review-box{padding: 30px;}
.gold-award{padding-top: 20px;padding-bottom: 20px;}
.gold-award .columns{padding-left: 0;padding-right: 0;}
.project-header{padding-bottom: 20px;margin-top: 20px;}
.projectz{padding-bottom: 20px;}
.why .columns{padding-left: 0rem;padding-right: 1.15rem;}


}
@media screen and (max-width: 40em) {
.why .columns{padding-left: 0;padding-right: 0;}
.boxx{min-height: unset;padding: 30px;}
nav ul li a{
	line-height: 30px;
	font-size: 16px;
}
.bigbg{;
	background-size:contain;
	background-repeat: no-repeat;
}
.box-image{height: 300px;}
.content-image{min-height: 300px!important;}



}


@media not all and (min-resolution:.001dpcm) { 
     @supports (-webkit-appearance:none) {
          .drawnlogo{
        	background-image: url(../images/biglogo.png);
        	background-position: center;
        	background-size:80%;
        	background-repeat: no-repeat;
        }
     }
}