@import url("../webfonts/Avenir_Medium/stylesheet.css");
@import url("../webfonts/Avenir_Light/stylesheet.css");
@import url("../webfonts/Avenir_Black/stylesheet.css");
@import url("../webfonts/Avenir_Book/stylesheet.css");
@import url("../webfonts/Avenir_Heavy/stylesheet.css");

/* CSS Document */

#dr{margin-top: -8rem;padding-top: 8rem;}
#mo{margin-top: -8rem;padding-top: 8rem;}

main {display: grid;
  	max-width: 100%;  	
  	margin: 0 auto;
	}

/*
                    
.accordion-button.collapsed::after{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='grey'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")

}  */      

.fontdark{color:#383838;
	
}

.fontlgrey{colour:#cecece;
	
}

.backgrey{padding-top:100px;
	padding-bottom:100px;
}

.curveddark{background-color: #191B1D;
    padding: 30px;
    	
}

.dotline{height: 1px;
	background-image: linear-gradient(to right, white 10%, rgba(255, 255, 255, 0) 0%);
background-size: 10px 1px;
	
}

.fptitle{font-family: "Avenir Black";
	font-size:33px;
		
	}

.green-title{color:green;
	font-family:'Avenir Heavy';
	
}

.btn-dark{font-size: 25px;
	}

.nav-link{font-size: 25px;
	}

.brochure{width:0; height:0;
}













@media (max-width:768px){
	
	main {display: grid;  	
  	width: 100%;  	
  	margin: 0 auto;
	}
	
	.section-nav{visibility:hidden; display:none
		
	}

	.padright{padding-right:0px;
	}
	.padright1{padding-right:0px;
	}
	
	
	
}


@media (max-width:991px){
	
	.mobile-justify-content-center{
		justify-content: center;
	}
	
	.hide-mobile{display:none}
}



@media (min-width:992px) {
	.web-justify-content-end{
		justify-content: end;		
	}
	
	.brochure{width:100%; height:100vh;
}
	.padding-50vh {
	padding-top: 50vh;
	
}	
	
	.fptitle{font-family: 'Avenir Medium';
		font-size:60px;
		
	}
	
	.padright{padding-right:70px;
	}
	.padright1{padding-right:100px;
	}
	
	.padleftright{padding-right:150px;
		padding-left:150px;
		text-align:center;
	}
	
	
	
	/* 2. sldier animated */
	
.loc-slider {position:relative; overflow-x: hidden; height:60vh;

}
	.frame-slider {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  overflow-y: scroll;
 	
	
}
*, *::before, *::after {
  box-sizing: border-box;
}

#permas {
	
  height: 60vh;
  
  background:#383838;
  position:absolute;
  overflow:hidden;
  overflow-y: hidden;
  white-space:nowrap;
  
  /* added */
  left: 0;
  bottom: 0;
  align-self:flex-end;
  animation-name: scroll;
  animation-duration: 90s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#permas img {
  height: 100%;
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10%);
  }
}
	
	
	
	
	
	
	
/* 2. Make nav sticky */
main > nav {position: sticky;
  top: 8rem;
  align-self: start;  
}

	
	
	h2{font-size: 100%;
	}

	.navbar-brand{padding-left:0px}
	
	.btn-dark{font-size: 100%;
	}
	.nav-link{font-size: 100%;
	}
	
	.hide-mobile{display:block}
	
	
	
		
	.band-header1 {
	height: 60vh;
}
	

	
	section {padding-left: 100px;
		
	}
	

	/* 3. ScrollSpy active styles (see JS tab for activation) */
	.section-nav li.active > a {
  		color: #333;
  		font-weight: 500;
	}

/* Sidebar Navigation */
.section-nav {
  padding-right: 15px;
  border-right: 1px solid #efefef;
}
	
main {display: grid;
  	grid-template-columns:20% 80%;
  	width: 100%;  
  	margin: 0 auto;
  		
	}
	
.section-nav a {
  text-decoration: none;
  display: block;
  padding: .125rem 0;
  color: #A7A7A7;
  transition: all 50ms ease-in-out; /* 💡 This small transition makes setting of the active state smooth */
}

.section-nav a:hover,
.section-nav a:focus {
  color: #666;
}

	
	.band-header {
	height: 100vh;
	}
	
	.band-half {visibility: visible;
	background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,1.00) 50.78%,rgba(222,222,210,1.00) 50.78%,rgba(175,175,175,1.00) 100%);
	background-image: -moz-linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,1.00) 50.78%,rgba(222,222,210,1.00) 50.78%,rgba(175,175,175,1.00) 100%);
	background-image: -o-linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,1.00) 50.78%,rgba(222,222,210,1.00) 50.78%,rgba(175,175,175,1.00) 100%);
	background-image: linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(255,255,255,1.00) 50.78%,rgba(222,222,210,1.00) 50.78%,rgba(175,175,175,1.00) 100%);
	padding-top: 70px;
	padding-bottom: 30px;

}
	
	
}



/* end of web media */



.text-bg-dark{background-colour:none;
		
	}





.offcanvas{background-colour:none;
		
	}





.web-padding-right{padding-right:0px}


a:hover {
  font-weight: bold;
}

h1{	color:white;		
	}

h2{font-family:"Avenir Medium";
	color:white;
	font-size:150%;
}
	
h3{font-family:"Avenir Medium";
		
}

h4{font-family:"Avenir Medium";
	color:white;	
}

.navbar-brand{padding-left:10px}


.background-darkgreen{background-color: #383838;
	
}

.accordion-button{
		background-color:transparent;
		font-size: 20px;
	}
.accordion-button:not(.collapsed){
		background-color:transparent;
}

.accordion-button:focus{
		box-shadow:none;
}

.accordion-body{
		background-color:transparent;
}

.accordion-item{
		background-color:transparent;	
}

.collapse{
		background-color:transparent;	
}

.text-white{
	color:white;		
}
.copyright {font-size: small;

}


a{font-family: "Avenir Medium";
	color: #383838;		
}

.p1{font-family:"Avenir Medium";
		
}
.right {
	position: absolute;
	right: 0px;
}
.logo {
}

.nav-bg-light {
	background-color: rgba(112,112,112,0.50);
	padding-top: 20px;
	padding-bottom: 20px;
}


.band-header {
	height: 100vh;

}

.band-header1 {
	height: 55vh;
}

footer {background-color: #cecece;	
		}
.band-footer {background-color: #cecece;
	padding-top:100px;
	color:#383838;
	font-family: "Avenir Medium";
	
}

.band-footer1 {background-color: #383838;
	padding-top:100px;
	color:white;
	font-family: "Avenir Medium";
	
}

.band-main {
	background-color:#cecece; /*#2b3f36; 2f434a   #051c2c */
	padding-top: 150px;
	padding-bottom: 150px;
}

.band-dark {
	background-color:#383838; /*#2b3f36; 2f434a   #051c2c */
	padding-top: 150px;
	padding-bottom: 80px;
}


.band-main1 {
	padding-top: 50px;
	padding-bottom: 50px;
}

.band-main2 {
	background-color: #cecece;
	padding-top: 50px;
	padding-bottom: 50px;
}

.band-half {
    background-image: #cecece;
    padding-top: 70px;
    padding-bottom: 30px;
}

.padding-50vh {position: relative;
	padding-top: 40vh;
	font-size: 150%;
}

.cover1 {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 30% 60%;
		
	position: relative;
	isolation: isolate;
	
	/* Telling our absolute positioned video to 
  be relative to this element 
  position: relative;*/

  width: 100%;
  height: 100vh;

  /* Will not allow the video to overflow the 
  container */
  overflow: hidden;

  /* Centering the container's content vertically 
  and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
	
	
		
}

video {
   object-fit: cover;
  height: 100%;
  width: 100%;
		
  position: absolute;
  top: 0;
  left: 0;
}

.cover1::after {
	content: '';
	position:absolute;
	z-index:-1;
	background: black;
	inset:0;
	opacity: .3;
}

.cover2 {background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(../images/backg5.jpg);
	
	position: relative;
	isolation: isolate;
}

.cover2::after {
	content: '';
	position:absolute;
	z-index:-1;
	background: black;
	inset:0;
	opacity: .5;
}

.cover3 {background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(../images/backg.jpg);
	
	position: relative;
	isolation: isolate;
}

.cover3::after {
	content: '';
	position:absolute;
	z-index:-1;
	background: black;
	inset:0;
	opacity: .5;
}

.cover4 {background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-image: url(../images/backg1.jpg);
	
	position: relative;
	isolation: isolate;
}

.cover4::after {
	content: '';
	position:absolute;
	z-index:-1;
	background: black;
	inset:0;
	opacity: .6;
}

.deanslidel {width:100%;
	height:50vh;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image: url("../images/deanslidel.jpg");
    position: relative;
	isolation: isolate;
}


.btn-info {
	background-color: #0e9f5e;
	border-style: none;
	font-family: "Avenir Medium";
}
.btn-light {
	background-color: #383838;
	border-style: none;
	font-family: "Avenir Medium";
	color: white;
}

.bottom {
display: flex
}

.bottom span{
align-self: flex-end
}




/* end of personal css*/



#basement{margin-top: -8rem;padding-top: 8rem;}
#drives{margin-top: -8rem;padding-top: 8rem;}
#conservatory{margin-top: -8rem;padding-top: 8rem;}
#extensions{margin-top: -8rem;padding-top: 8rem;}
#garage{margin-top: -8rem;padding-top: 8rem;}
#dormers{margin-top: -8rem;padding-top: 8rem;}
#porch{margin-top: -8rem;padding-top: 8rem;}
#doors{margin-top: -8rem;padding-top: 8rem;}
#walls{margin-top: -8rem;padding-top: 8rem;}
#outbuilding{margin-top: -8rem;padding-top: 8rem;}
#preapp{margin-top: -8rem;padding-top: 8rem;}
#full{margin-top: -8rem;padding-top: 8rem;}
#cou{margin-top: -8rem;padding-top: 8rem;}
#hmo{margin-top: -8rem;padding-top: 8rem;}
#newbuild{margin-top: -8rem;padding-top: 8rem;}
#outline{margin-top: -8rem;padding-top: 8rem;}
#retro{margin-top: -8rem;padding-top: 8rem;}
#lbc{margin-top: -8rem;padding-top: 8rem;}
#certificate{margin-top: -8rem;padding-top: 8rem;}
#advertisement{margin-top: -8rem;padding-top: 8rem;}
#typesofcon{margin-top: -8rem;padding-top: 8rem;}
#removal{margin-top: -8rem;padding-top: 8rem;}
#varying{margin-top: -8rem;padding-top: 8rem;}
#material{margin-top: -8rem;padding-top: 8rem;}
#nonmaterial{margin-top: -8rem;padding-top: 8rem;}
#conditions{margin-top: -8rem;padding-top: 8rem;}
#objecting{margin-top: -8rem;padding-top: 8rem;}
#neighbours{margin-top: -8rem;padding-top: 8rem;}
#consultee{margin-top: -8rem;padding-top: 8rem;}
#breach{margin-top: -8rem;padding-top: 8rem;}
#enforcement{margin-top: -8rem;padding-top: 8rem;}
#resolution{margin-top: -8rem;padding-top: 8rem;}
#cgi{margin-top: -8rem;padding-top: 8rem;}
#das{margin-top: -8rem;padding-top: 8rem;}
#brochures{margin-top: -8rem;padding-top: 8rem;}


/* Sidebar Navigation */
/* 1. Enable smooth scrolling */
html {
  scroll-behavior: smooth;
}


/** Poor man's reset **/
* {
  box-sizing: border-box;
}

html, body {
  background: #fff;
}

body {
  font-family: "Avenir Medium"
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  margin-left: 1rem;
}



/** page layout **/




/** enlarge the sections for this demo, so that we have a long scrollable page **/
section {padding-bottom: 2rem;
	padding-left: none;
	top: 8rem;
}