@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Rubik:300,300i,400,700,700i,900);



/* 

dark: #102951;

light: #83cfea;

 */
.test{background-image:url(https://peckhamplumbingandheating.co.uk/images11.jpg?v=2);}
.content-image::before{

	content: "P";

	position: absolute;

	right: -150px;

	top: 100px;

	font-size: 500px;

	font-style: italic;

	font-weight: 700;

	line-height: 400px;

	z-index: 1;

	opacity: 0.7;

	color: #ddd;

}



.seobanner {

	position:absolute;

	left:0;top:-27px;

	transition:.6s;

	-webkit-transition: .6s;

	z-index:999;

	height:30px;

	width:100%;

	line-height:30px;

	margin:0;

	padding:0;

	background:#333333;

	font-family: 'Roboto', sans-serif;

	font-weight: 700;

	color:#fff;

	font-size:14px;

	text-align:center;

}



.seobanner:hover {

	top:0;

	transition:.6s;

	-webkit-transition: .6s;

}

.why-text::before{

	content: "H";

	position: absolute;

	right: -50px;

	top: 100px;

	font-size: 500px;

	font-style: italic;

	font-weight: 700;

	line-height: 400px;

	z-index: -1;

	opacity: 0.4;

	color: #ddd;

}

body{

	margin: 0;

	padding: 0;

	background-color: #fff;

	padding: 0px 0;

	font-family: 'Rubik', sans-serif;

	overflow-x:hidden; 

	height: auto!important;

	width: 100%;

}

.wrapper{

	width: 100%;

	max-width: 100%;

	overflow-x:hidden;

}

a, a:active, a:visited, a:link{

	color: #fff;

	text-decoration: none;

}

p{

	font-size: 13px;

	line-height: 22px;

	font-weight: 300;

	opacity: 0.7;

}

ul{

	list-style: none;

	padding: 0;

	margin: 0;

}

h1,h2,h3,h4,h5,h6{

	margin: 0;

	margin-bottom: 10px;

}

hr{

	margin: 20px 0;

	border:none;

	height: 1px;

	background-color: #fff;

	opacity: 0.15;

}

.revealpageone{

	width: 100%;

	position: fixed;

	background-color: #fff;

	animation: pagereveal 2s;

	animation-delay:0;

	-webkit-transition: ease 0.9s;

	-o-transition: ease 0.9s;

	transition: ease 0.9s;

	z-index: 100000;

}

@-webkit-keyframes pagereveal {

    0% {height: 100%; top: 0;}

    5% {height: 100%; top: 0;}

    39% {height: 100%; top: 0;}

    55% {height: 100%; top: 100%;}

    95% {height: 0%; top: 100%;}

    100% { height: 0%; top: 100%;}

} 



.topbardiv{

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	z-index: 10000;

	padding: 15px 30px;

	background-color: rgba(10,10,10,0.7);

}

.logo{

	float: left;

	padding-left: 20px;

	margin-left: 20px;

	border-left: 2px solid rgba(255,255,255,0.1);

}

.logo img{

	height: 70px;

	padding: 5px 10px;

}

.deets{

	float: right;

	text-align: right;

}

.deets a{

	line-height: 70px;

	font-size: 13px;

	margin: 0 10px;

}

.deets a img{

	height: 25px;

	margin-right: 10px;

}

.toggler{

	width: 80px;

	height: 70px;

	text-align: center;

	position: relative;

	z-index: 100;

	float: left;

	cursor: pointer;



	animation: fazoom 0.75s forwards;

	animation-delay:0;

	-webkit-transition: ease-in-out 1s;

	-o-transition: ease-in-out 1s;

	transition: ease-in-out 1s;

}

@-webkit-keyframes fazoom {

    0% {transform:scale(0);}

    70% {transform:scale(1.2);}

    100% {transform:scale(1);}

}

.falineone{

	height: 2px;

	background-color: #fff;

	width: 0px;

	margin: 0;

	display: inline-block;

	border-radius: 10px;

	position: absolute;

	top: 25px;



	animation: lineone 1s forwards;

	animation-delay:0.5s;

	-webkit-transition: ease-in-out 0.3s;

	-o-transition: ease-in-out 0.3s;

	transition: ease-in-out 0.3s;

}

@-webkit-keyframes lineone {

    0% {width: 0px;left: 40px;}

    100% {width: 40px;left: 20px; }

}

.topline{

	transform:rotate(45deg);

	top: 35px;

	-webkit-transition: ease-in-out 0.3s;

	-o-transition: ease-in-out 0.3s;

	transition: ease-in-out 0.3s;

}

.falinetwo{

	height: 2px;

	background-color: #fff;

	width: 0px;

	display: inline-block;

	border-radius: 10px;

	position: absolute;

	top: 35px;



	animation: linetwo 1s forwards;

	animation-delay:0.75s;

	-webkit-transition: ease-in-out 0.3s;

	-o-transition: ease-in-out 0.3s;

	transition: ease-in-out 0.3s;

}

@-webkit-keyframes linetwo {

    0% {width: 0px;left: 40px;}

    100% {width: 40px;left: 20px; }

}



.middleline{

	transform:rotate(45deg);

	top: 35px;

	-webkit-transition: ease-in-out 0.3s;

	-o-transition: ease-in-out 0.3s;

	transition: ease-in-out 0.3s;

}

.falinethree{

	height: 2px;

	background-color: #fff;

	width: 0px;

	margin: 0;

	display: inline-block;

	border-radius: 10px;

	position: absolute;

	top: 45px;



	animation: linethree 1s forwards;

	animation-delay:1s;

	-webkit-transition: ease-in-out 0.3s;

	-o-transition: ease-in-out 0.3s;

	transition: ease-in-out 0.3s;

}

@-webkit-keyframes linethree {

    0% {width: 0px;left: 40px;}

    100% {width: 40px;left: 20px; }

}

.bottomline{

	top: 35px;

	transform:rotate(-45deg);

	-webkit-transition: ease-in-out 0.3s;

	-o-transition: ease-in-out 0.3s;

	transition: ease-in-out 0.3s;

}



.slidein{

	background-color: salmon;

	position: fixed;

	z-index: 1000;	

	width: 100%;

	height: 100vh;

	background-image: url('https://peckhamplumbingandheating.co.uk/media/images/navbg.jpg');

	-webkit-background-size: cover;

	background-size: cover;

	opacity: 0;

	pointer-events:none;

	background-attachment: fixed;

	-webkit-transition: ease-in-out 0.8s;

	-o-transition: ease-in-out 0.8s;

	transition: ease-in-out 0.8s;

}

.shownav{

	opacity: 1;

	pointer-events:initial;

}

.slidein::after{

	position: absolute;

	top: 0px;

	left: 0px;

	width: 100%;

	height: 100%;

	content: " ";

	background: -webkit-linear-gradient(top left, #3e606f, #3e606f, #4885a0);

	background: -o-linear-gradient(top left, #3e606f, #3e606f, #4885a0);

	background: linear-gradient(to bottom right, #3e606f, #3e606f, #4885a0);

	opacity: 0.85;

	z-index: -2;

}



nav{

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100vh;

	display: table;

}

.innernav{

	display: table-cell;

	vertical-align: middle;

	height: 100vh;

}

nav ul li{

	position: relative;

	display: block;

	height: 40px;

	overflow: hidden!important;

	-webkit-transition: ease-in-out 0.3s;

	-o-transition: ease-in-out 0.3s;

	transition: ease-in-out 0.3s;

	margin: 10px 0;

}

nav ul li a{

	font-size: 30px;

	line-height: 40px;

	font-weight: 500;

	position: relative;

	height: 40px;

	display: inline-block;

	overflow: hidden!important;

}

nav ul li a::after{

	content: " ";

	background-color: #3e606f;

	width: 00%;

	height: 100%;

	position: absolute;

	bottom: 00px;

	left: 0;

	-webkit-transition: ease-in-out 0.3s;

	-o-transition: ease-in-out 0.3s;

	transition: ease-in-out 0.3s;

	z-index: -1;

	opacity: 0.9;

}

nav ul li a:hover::after{

	width: 100%;

	background-color: #4885a0;

}

.shownavlink{

	top: 0;

}

.navreveal{

	bottom: 0;

	left: 0;

	width: 000%;

	height: 100%;

	position: absolute;

	background-color: #4885a0;

	z-index: -1;

	animation-delay:3s;

-webkit-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

   -moz-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

     -o-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

        transition: all 600ms cubic-bezier(.21,.67,1,.21);



}

.revealnav{

	animation: navreveal 1.5s forwards;

	animation-delay:1s;

-webkit-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

   -moz-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

     -o-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

        transition: all 600ms cubic-bezier(.21,.67,1,.21);



}

@-webkit-keyframes navreveal {

    0% {width: 100%;left: 0%; }

    70% {width: 100%;left: 0%; }

    100% { width: 0%;left: 100%; }

}



.topdeets{

	position: absolute;

	top: 0%;

	right: 0%;

	width: 40%;

	height: 100vh;

	display: table;

}

.innerdeets{

	display: table-cell;

	vertical-align: middle;

	height: 100vh;

	color: white;

}

.innerdeets address p{

	border-bottom: 0;

}

.innerdeets a, .innerdeets p{

	line-height: 40px;

	margin: 0;

	display: block;

	font-size: 13px;

	color: white!important;

	font-weight: 500;

	font-style: normal;

}

.innerdeets img{

	height: 25px;

}

.topcolor{

	position: fixed;

	top: 0;

	left: 0;

	height: 50%;

	width: 10px;

	background-color: #3e606f;

	z-index: 1001;

	-webkit-transition:0.2s ease-in-out 15s;

	-o-transition:0.2s ease-in-out 15s;

	transition:0.2s ease-in-out 15s;

}

.bottomcolor{

	position: fixed;

	top: 50%;

	left: 0;

	height: 50%;

	width: 10px;

	background-color: #4885a0;

	z-index: 1000;

	-webkit-transition: ease-in-out 15s;

	-o-transition: ease-in-out 15s;

	transition: ease-in-out 15s;

}

.topexpand{

	animation: topexpand 1.5s forwards;

	animation-delay:0s;

-webkit-transition: all 1000ms cubic-bezier(.21,.67,1,.21); 

   -moz-transition: all 1000ms cubic-bezier(.21,.67,1,.21); 

     -o-transition: all 1000ms cubic-bezier(.21,.67,1,.21); 

        transition: all 1000ms cubic-bezier(.21,.67,1,.21);



}

@-webkit-keyframes topexpand {

    0% {width: 00%;left: 0%; }

    70% {width: 100%;left: 0%; }

    100% { width: 0%;left: 100%; }

}

.bottomexpand{

	animation: bottomexpand 1.5s forwards;

	animation-delay:0.1s;

-webkit-transition: all 900ms cubic-bezier(.21,.67,1,.21); 

   -moz-transition: all 900ms cubic-bezier(.21,.67,1,.21); 

     -o-transition: all 900ms cubic-bezier(.21,.67,1,.21); 

        transition: all 900ms cubic-bezier(.21,.67,1,.21);



}

@-webkit-keyframes bottomexpand {

    0% {width: 00%;left: 0%; }

    70% {width: 100%;left: 0%; }

    100% { width: 0%;left: 100%; }

}



.mask{

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: -webkit-linear-gradient(top left, #111, rgba(0,0,0,0.0));

	background: -o-linear-gradient(top left, #111, rgba(0,0,0,0.0));

	background: linear-gradient(to bottom right, #111, rgba(0,0,0,0.0));

	opacity: 0.4;

	z-index: 10;

}



header{

	width: 100%;

	padding-top: 100px;

	color: white;

	position: relative;

}

header::after{

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	content: " ";

	background: -webkit-linear-gradient(top left, #3e606f, #3e606f, #4885a0);

	background: -o-linear-gradient(top left, #3e606f, #3e606f, #4885a0);

	background: linear-gradient(to bottom right, #3e606f, #3e606f, #4885a0);

	opacity: 0.7;

}

.randomblock{

	margin-top: -50px;

	left: 0;

	width: 60%;

	height: 100px;

	content: " ";

	background-color: #ddd;

	z-index: -1;

}

.bannertext{

	margin: 160px 0;

	position: relative;

	z-index: 100;

	overflow: hidden;

}

.bannertext span{

	font-size: 30px;

	font-weight: 300;

}

.bannertext h1{

	font-weight: 500;

	font-size: 55px;

	line-height: 55px;

}

.bannertext p{

	margin-bottom: 40px;

	display: block;

}



.learnmore{

	color: white;

	letter-spacing: 2px;

	text-transform: uppercase;

	padding: 0 50px;

	text-align: center;

	font-size: 10px;

	line-height: 50px;

	display: inline-block;

	margin-top: 20px;

	margin-right: 20px;

	position: relative;

	z-index: 10;

}

.learnmore::after{

	width: 0%;

	height: 100%;

	background-color: #fff;

	position: absolute;

	top: 0;

	left: 0;

	content: " ";

	z-index: -1;

	transition: ease 0.3s;

	opacity: 0.2;

}

.learnmore:hover::after{

	width: 100%;

}

.buttonrevealz{

	background-color: #4885a0;

	position: absolute;	

	top: 0;

	left: 0;

	width: 0%;

	height: 100%;

	content: " ";

	z-index: -1;

}

.learnmore .visible{

	animation: buttonreveal 1.5s forwards;

	animation-delay:0.5s;

-webkit-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

   -moz-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

     -o-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

        transition: all 600ms cubic-bezier(.21,.67,1,.21);



}

@-webkit-keyframes buttonreveal {

    0% {width: 0%;}

    100% { width: 100%;}

}

.bannercon{

	color: white;

	letter-spacing: 1px;

	padding: 0 40px 0 50px;

	text-align: center;

	font-size: 10px;

	line-height: 50px;

	display: inline-block;

	margin-top: 20px;

	margin-right: 10px;

	position: relative;

	transition: ease 0.3s;

	text-transform: uppercase;

}

.bannercon::after{

	width: 0%;

	height: 100%;

	background-color: #111;

	position: absolute;

	top: 0;

	left: 0;

	content: " ";

	z-index: -1;

	transition: ease 0.3s;

	opacity: 0.5;

}

.bannercon:hover::after{

	width: 100%;

}

.bannerconreveal{

	background-color: #3e606f;

	position: absolute;	

	top: 0;

	left: 0;

	width: 0%;

	height: 100%;

	content: " ";

	z-index: -1;

}

.bannercon .visible{

	animation: buttonreveal 1.5s forwards;

	animation-delay:0.65s;

-webkit-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

   -moz-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

     -o-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

        transition: all 600ms cubic-bezier(.21,.67,1,.21);



}

.bannercon img{

	height: 25px;

	margin-left: 10px;

}





main{

	padding-top: 150px;

	padding-bottom: 150px;

	overflow: hidden;

}

.content{

	padding-right: 60px;

}

.content-box{

	-webkit-columns: 2;

	-moz-columns: 2;

	-o-columns: 2;

	columns: 2;

	-webkit-column-gap: 50px;

	-moz-column-gap: 50px;

	-o-column-gap: 50px;

	column-gap: 50px;

	margin-top: 30px;

	display: block;

}

.content-box p:first-child{margin-top: 0;}

.content-image{

	height: 500px;
	

	 background-image: url('https://peckhamplumbingandheating.co.uk/media/images/side.jpg');  
	/* background-image: url('https://peckhamplumbingandheating.co.uk/media/images/side.svg');  */
	
	-webkit-background-size: cover;

	background-size: cover;
background-attachment: scroll;
	position: relative;
	
border:1px solid red;
}

.content-image::after{

	position: absolute;

	top: 30px;

	left: 30px;

	width: 100%;

	height: 100%;

	content: " ";

	background: -webkit-linear-gradient(top left, #3e606f, #3e606f, #4885a0);

	background: -o-linear-gradient(top left, #3e606f, #3e606f, #4885a0);

	background: linear-gradient(to bottom right, #3e606f, #3e606f, #4885a0);

	opacity: 0.5;

	z-index: -2;

}

.content span{

	font-size: 18px;

	font-weight: 300;

	color: #4885a0;

}

.content h2{

	font-weight: 500;

	font-size: 24px;

	line-height: 30px;

}

.content h3{

	font-weight: 300;

	font-size: 19px;

	line-height: 25px;

}

.content h4{

	font-weight: 500;

	font-size: 18px;

	line-height: 30px;

}

.randomline{

	position: absolute;

	bottom: -90px;

	height: 200px;

	left: 70px;

	width: 5px;

	background-color: #ddd;

}



.why{

	padding-bottom: 100px;

	position: relative;

}







.revealwhy{

	position: relative;

	top: 0;

	left: 0;

	height: 100%;

	z-index: 100;

	width: 100%;

}

.whyreveal{

	position: absolute;	

	top: 0;

	left: 0;

	width: 0%;

	height: 100%;

	content: " ";

	z-index: -2;

}

.revealwhy .visible{

	width: 100%;

	animation: revealwhy 1.5s forwards;

	animation-delay:0.5s;

-webkit-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

   -moz-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

     -o-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

        transition: all 600ms cubic-bezier(.21,.67,1,.21);



}

@-webkit-keyframes revealwhy {

      0% { width: 0%; left: 00%; background-color: #3e606f;}

     50% { width: 100%; left:00%; background-color: #3e606f;}

    100% { width: 0%; left:100%; background-color: #4885a0;}

}







.why-image{

	height: 500px;

	background-image: url(https://peckhamplumbingandheating.co.uk/media/images/header.jpg?v=2);

	-webkit-background-size: cover;

	background-size: cover;

	position: relative;

	padding: 0;

}

.why-imagediv{

	position: absolute;

	left: 250px;

	top: 40px;

	content: " ";

	background-color: #ddd;

	width: 500px;

	height: calc(80% - 80px);

	z-index: -1;

}

.why-image::after{

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	content: " ";

	background: -webkit-linear-gradient(top left, #3e606f, #3e606f, #4885a0);

	background: -o-linear-gradient(top left, #3e606f, #3e606f, #4885a0);

	background: linear-gradient(to bottom right, #3e606f, #3e606f, #4885a0);

	opacity: 0.4;

}

.why-text{

	padding: 30px 80px;

	padding-right: 0;

	position: relative;

}

.why-text span{

	font-size: 18px;

	font-weight: 300;

	color: #4885a0;

	display: block;

	margin-bottom: 10px;

}

.why-text h3{

	display: inline-block;

	margin-left: -15px;

	font-weight: 500;

	font-size: 20px;

}

@-webkit-keyframes textreveal {

    0% {width: 100%; left: 0; background-color: #4885a0;}

    100% { width: 0%; left: 100%; background-color: #3e606f;}

}

.sitetitle{

	text-transform: uppercase;

	font-weight: 700;

	display: inline-block;

	margin: 0;

	margin-top: 10px;

	position: relative;

}

.revealz{

	width: 100%;

	height: 100%;

	content: " ";

	background-color: #4885a0;

	position: absolute;

	left: 0;

	top: 0;

	z-index: 1;

	color: rgba(255,255,255,0.0);

}

.sitetitle .visible {

	animation: textreveal 1s forwards;

	animation-delay:1s;

-webkit-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

   -moz-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

     -o-transition: all 600ms cubic-bezier(.21,.67,1,.21); 

        transition: all 600ms cubic-bezier(.21,.67,1,.21);



}

.callback .row{

	position: relative;

}

.callbackbackground{

	width: calc(100% - 100px);

	height: 100%;

	background-color: #ddd;

	position: absolute;

	top: 0;

	left: 50px;

}

.callbackdiv{

	background-color: #111;

	display: block;

	padding: 80px 50px;

	color: white;

	overflow: auto;

	position: relative;



	background-image: url(../images/quotes.png);

	background-position: right 100px top 30px;

	background-repeat: no-repeat;

	-webkit-background-size: 300px;

	background-size: 300px;

}

.callbackdiv::after{	

	position: absolute;

	left: -40px;

	top: 40px;

	content: " ";

	background-color: #ddd;

	width: 100%;

	height: calc(100% - 80px);

	z-index: -1;

}

.callbackdiv span{

	font-size: 18px;

	font-weight: 300;

	color: #4885a0;

	display: block;

	margin: 0;

	line-height: 25px;

	margin-bottom: 10px;

}

.callbackdiv h4{

	display: block;

	font-weight: 500;

	font-size: 26px;

	line-height: 30px;

}

.myform{

	margin-top: 20px;

	overflow: auto;

}



.myform label{

	float: left;

	font-size: 12px;

	position: relative;

	font-weight: bold;     

	text-transform: uppercase;

	line-height: 24px;

	box-sizing: border-box;

	color: #ae2830;

}

select{

	border-radius: 0px;

}

.myform img{

	width: 215px;

	height: 80px;

	float: left;

	background-color: #333;

	margin: 10px 10px 10px 0px;

	display: block;

}

.security{

	width: 100%;

	display: block;

	overflow: auto;

}

#code{

	width: calc(100% - 225px);

	margin-bottom: 0px;

	margin-top: 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: #fff;

	padding: 0px 20px;

	border:0px;

	border-left: 2px solid #111;

	height: 51px;

	margin-bottom: 12px;

	border-radius: 0px;

	background-color: rgba(50,50,50,0.5);

	font-size: 12px;

}

.myform textarea{

	padding: 10px 20px 10px 20px;

	color: #fff;

	border:0px;

	border-left: 2px solid #111;

	width: 100%;

	height: 225px;

	border-radius: 0px;

	background-color: rgba(50,50,50,0.5);

	font-size: 12px;

}

.enquiryform textarea{

	background-color: rgba(50,50,50,0.05);

	color: #111;

	border-left: 2px solid #3e606f;

}

.enquiryform input, .enquiryform select{

	background-color: rgba(50,50,50,0.05);

	border-left: 2px solid #3e606f;

	color: #111;	

}

.select-option{

	background-color: #666;

	border: none;

	color: #FFF;

}

.myform p{

	float: right;

	margin: 0px 10px;

	padding: 0px;

	width: calc(100% - 245px);

	line-height: 40px;

}



input[type=submit]{

	background: #4885a0; 

	border:1px solid #4885a0;

    color: white;

    text-transform: uppercase;

    font-size: 11px;

    letter-spacing: 2px;	

    display: inline-block;

    padding: 0 20px;

    position: relative;

    line-height: 50px;

    font-weight: 300;

    overflow: hidden;

	-webkit-transition: ease-in-out 1s;

	-o-transition: ease-in-out 1s;

	transition: ease-in-out 1s;

	width: 100%;

}

.enquiryform input[type=submit]{

	background: #4885a0; 

	border:1px solid #4885a0;	

}

.content input[type=submit]{

	background: #3e606f; 

	border:1px solid #3e606f;

}

.myform input:focus, .myform textarea:focus, .myform select:focus{

	border:0px;

	border-left: 2px solid #374140;

	outline: none!important;

	background-color: rgba(50,50,50,0.5);

	box-shadow: 0 0 0 black;

}



.enquiryform input:focus, .enquiryform textarea:focus, .enquiryform select:focus{

	background-color: rgba(50,50,50,0.07);

	color: #111;	

}

@media screen and (max-width: 580px){

		.myform img{

		width: 100%;

		height:auto;

	}

	#code{

		width: 100%;

		margin-bottom: 0px

	}

	.myform a{

		width: 100%;

		margin-top: 10px;

		line-height: 30px;

	}

}

.callbackinner{

	padding: 0;

	padding-right: 10px;

}

.successmessage{

	-webkit-transition: ease-in-out 1s;

	-o-transition: ease-in-out 1s;

	transition: ease-in-out 1s;

}





.philosophy{

	padding-top: 100px;

	padding-bottom: 100px;

	background-color: #eee;

	margin-top: 140px;

}

.philosophy span{

	font-size: 18px;

	font-weight: 300;

	color: #4885a0;

	display: block;

	margin-bottom: 20px;

}

.philosophy p{

	display: block;

	font-weight: 500;

	font-size: 25px;

	line-height: 35px;

	margin: 0;

}



.seobar{

	background-color: #111;

	color: #888;

	padding-top: 10px;

	padding-bottom: 10px;

	letter-spacing: 0.5px;

}

.seobar h5{

	display: inline-block;

	padding-right: 20px;

	font-weight: 300;

	font-size: 13px;

	line-height: 40px;

	margin: 0;

	font-style: italic;

}



footer{

	background-color: #222;

	color: #bbb;

	padding-top: 60px;

	padding-bottom: 90px;

}

footer h6{

	font-size: 22px;

	font-weight: 500;

	color: #4885a0;

}

footer p{

	line-height: 25px;

}

.fcol{

	padding-left: 0;

	padding-right: 50px;

}

.fdeets a{

	color: white;

	background-color: #444;

	display: inline-block;

	margin-right: 5px;

	line-height: 40px;

	padding: 0 15px;

	font-size: 13px;

	letter-spacing: 1px;

	margin-top: 10px;

	border-radius: 4px;

}

.fdeets img{

	height: 25px;

	margin-right: 10px;

}

footer a, address p{

	line-height: 40px;

	font-weight: 300;

	font-size: 13px;

	border-bottom: 1px solid rgba(255,255,255,0.1);

	display: block;

	margin: 0;

}

.by{

	background-color: #4885a0;

	color: white;

	padding-top: 20px;

	padding-bottom: 20px;

}

.by p{

	margin: 0;

	font-style: italic;

}





.content ul{

	list-style: square;

	margin-top: 20px;

	padding-left: 20px;

	display: block;

	margin-bottom: 20px;

}

.content ul li{

	background-color: rgba(0,0,0,0.05);

	margin-bottom: 5px;

	padding: 4px 20px;

	font-size: 13px;

	line-height: 30px;

}





.sidebar{

	border-left: 2px solid #eee;

	padding-left: 50px;

}





.sidebar ul li{

	display: block;

	text-transform: uppercase;

	line-height: 40px;

	letter-spacing: 1px;

	font-size: 12px;

}



.sidebar h2{

	font-weight: 500;

	text-transform: uppercase;

	font-size: 22px;

	line-height: 30px;

}





.thumbs{

	float: left;

	width: 33.33%;

	padding: 12px;

	overflow: hidden;

	position: relative;

	z-index: 2;

}

.thumbs::before{	

	content: " ";

	width: calc(100% - 24px);

	height: calc(00% - 24px);

	top: 12px;

	left: 12px;

	z-index: 20;

	position: absolute;

	opacity: 0.1;

	pointer-events:none;

	background-color: #fff;

-webkit-transition: all 600ms cubic-bezier(1,.11,.52,.99); 

   -moz-transition: all 600ms cubic-bezier(1,.11,.52,.99); 

     -o-transition: all 600ms cubic-bezier(1,.11,.52,.99); 

        transition: all 600ms cubic-bezier(1,.11,.52,.99);

}





.thumbs::after{

	content: " ";

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

	z-index: 20;

	position: absolute;

-webkit-transition: all 600ms cubic-bezier(1,.11,.52,.99); 

   -moz-transition: all 600ms cubic-bezier(1,.11,.52,.99); 

     -o-transition: all 600ms cubic-bezier(1,.11,.52,.99); 

        transition: all 600ms cubic-bezier(1,.11,.52,.99);

	opacity: 0;

	pointer-events:none;



	background-image: url(../images/icons/zoom.svg);

	background-position: center center;

	background-repeat: no-repeat;

	-webkit-background-size: 10%;

	background-size: 10%;

}

.thumbs img{

	width: 100%;

	margin: 0!important;

}

.thumbs a{

	margin: 0!important;

}

.thumbs:hover::after{

	-webkit-background-size: 20%;

	background-size: 20%;

	opacity: 0.75;

}



.thumbs:hover::before{

	height: calc(100% - 24px);

}

#map{

	height: 500px;

	width: 100%;

	min-height: 500px;

}

blockquote{

	background-color: rgba(0,0,0,0.05);

	padding: 20px 30px;

	width: 100%;

	margin: 0;

	margin-bottom: 20px;

	border-radius: 0 0 50px 0;

}

blockquote span{

	font-style: italic;

	font-size: 13px!important;

	color: #3e606f;

}

blockquote span::before{

	content: "- ";

}

blockquote p{

	line-height: 30px;

	font-weight: 300;

	font-size: 12px;

	font-family: 'Montserrat', sans-serif;

}



.slideseo{

	padding-left: 0;

}

.seobar .row{

	overflow: hidden;

}



.memberdiv{

	padding: 50px;

	margin-bottom: 120px;

	text-align: center;

}

.memberdiv span{

	display: block;

	margin-bottom: 10px;

	font-size: 20px;

	text-transform: uppercase;

	letter-spacing: 1px;

}

.memberdiv img{

	display: inline-block;

	height: 200px;

	margin: 10px;

}

.seobar h5::first-letter{

	text-transform: uppercase;

}

.caption{

	height: 50px;

	line-height: 20px;

	margin-top: -50px;

	display: block;

	background-color: rgba(0,0,0,0.5);

	width: 100%;

	padding: 5px 15px;

	position: relative;

	color: white;

	font-size: 13px;

}



.sidebar a{

	color: #222!important;

	display: block;

	line-height: 40px;

	font-size: 14px;

	letter-spacing: 1px;

	font-weight: 300;

}

































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

.content-box{

	-webkit-columns: 1;

	-moz-columns: 1;

	-o-columns: 1;

	columns: 1;

	padding-bottom: 50px;

}

.content{

	padding-right: 0;

}

.deets{display: none;}

.content-image::before{

	right: -100px;

	top: 200px;

	font-size: 400px;

	font-style: italic;

	font-weight: 700;

	line-height: 200px;

	opacity: 0.3;

}

.why-text::before{

	content: "N";

	position: absolute;

	right: -50px;

	top: 100px;

	font-size: 500px;

	font-style: italic;

	font-weight: 700;

	line-height: 400px;

	z-index: -1;

	opacity: 0.4;

	color: #ddd;

}



.why-text{

	padding-left: 30px;

}

.bannertext{

	margin: 100px 0;

	padding-top: 0;

}

.otherbannertext{

	margin: 60px 0;

}

.bannertext span{

	font-size: 22px;

	font-weight: 300;

}

.bannertext h1{

	font-weight: 500;

	font-size: 40px;

	line-height: 45px;

}

.bannertext p{

	margin-bottom: 40px;

	display: block;

}

.learnmore{display: none;}

nav ul li a{

	font-size: 40px;

	line-height: 60px;

	font-weight: 500;

	position: relative;

	height: 60px;

	display: inline-block;

	overflow: hidden!important;

}

nav ul li{

	position: relative;

	display: block;

	height: 60px;

	overflow: hidden!important;

	-webkit-transition: ease-in-out 0.3s;

	-o-transition: ease-in-out 0.3s;

	transition: ease-in-out 0.3s;

	margin: 10px 0;

}

.innernav{

	width: 100%;

}



.callbackdiv{

	background-color: #111;

	display: block;

	padding: 40px 20px;

	color: white;

	overflow: auto;

	position: relative;



	background-image: url(../images/quotes.png);

	background-position: right 20px top 30px;

	background-repeat: no-repeat;

	-webkit-background-size: 200px;

	background-size: 200px;

}



.philosophy{margin-top: 100px;}

.philosophy p {font-size: 22px;line-height: 32px;}



.why{padding-bottom: 50px;}

.fcol{

	padding-bottom: 40px;

	padding-right: 0;

}

footer{

	padding-bottom: 30px;

}

.toggler{

	transform:scale(0.5);

}

.topdeets{display: none;}





.topbardiv{

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	z-index: 10000;

	padding: 0px 10px;

	background-color: rgba(10,10,10,0.7);

}

.fdeets a{

	display: block;

}

.why{

	overflow: hidden;

}

.why-imagediv{display: none;}



.sidebar{

	padding-left: 1.15rem;

	border-left: none;

	padding-top: 40px;

}



main{

	padding-top: 70px;

	padding-bottom: 70px;

}

.logo{

	float: left;

	padding-left: 10px;

	margin-left: 10px;

}

.thumbs{

	float: left;

	width: 33.33%;

	padding: 4px;

	overflow: hidden;

	position: relative;

	z-index: 2;

}































}