html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}



body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}


/*-------------------------------------------navigation bar--------------------------- -------------------*/
.wrapper{
	max-width:1400px;
	margin: 0 auto
}


.grid{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;

}



.Sale{
	width: 100%;
	margin-bottom: 20px;
	font-size: 3vmax;
	color: white;
  text-shadow: 2px 2px 5px black;
	font-weight: normal;
	text-align:center;
	padding-top: 25px;
	padding-bottom: 25px;
	background-image: url("Images/spring.jpg");
  background-position: top right;
	grid-column:1/4;
  opacity: 0.8;
  border-radius: 5px;
}

.Phone1{
	padding:10px;
	text-align:center;
	color:#3998EC;
	font-size: 25px;
	font-weight: bold;
}
.email{
	padding:10px;
	text-align:center;
	color:#3998EC;
	font-size: 25px;
	text-decoration:hidden;
	font-weight: bold;
}
.Phone2{
	padding:10px;
	text-align:center;
	color:#3998EC;
	font-size: 25px;
	font-weight: bold;
}

		@media screen and (max-width:700px){
			.Phone1{ grid-column:1/4; padding:5px}
			.Phone2,.email{display:none}

		}

.navigation{
	background-color:#463CF8;
	grid-column:1/4;
	height:100px;
}
#logo{
	margin-top: 5px;
	margin-left:10px;
	width: 300px;

}
#menu {
	float:right;
	margin-top: 30px;
	width:870px;
	height: 40px;
	border: none;
	background-color: none;
	z-index:200;
	}


#menu li a {
	text-decoration:none;
	color: white;
	display: inline;
	font-size: 21px;
	background-color: none  ;
	margin:5px;
	padding: 10px;
	position:relative;
	top:11px;
}
#menu li {
	display: inline;
	text-decoration: none;

	}


#menu a:hover {
	color: white;
	padding:39px 10px 37px 10px;
	background-color: #5A5A5C;
}
#menu li:hover> ul li a:hover {
	color:white;
	background-color:#5A5A5C;

}


#menu li:hover> ul{
	text-align:center;
	position: absolute;
	width:160px;
	padding: 10px;
	margin-left:319px;
	margin-top:28px;
	display: block;
	line-height: 1.2;
	background-color: none;
	z-index:100
	}



#menu li:hover > ul li a {
	text-decoration: none;
	display:block;
	color: white;
	background-color:#463CF8;
	border:none;
	margin: 0px;
	padding:5px;
	margin-left: -50px;

}

#menu ul {

	display: none;
	padding:10px;
}



@media screen and (max-width:1200px){
	#menu{width:690px;
		margin-top: 25px;}
	#menu li a {font-size: 15px}
	#menu a:hover {padding:37px 10px 33px 10px;}
	#menu li:hover> ul{width:120px;
					margin-left:265px;
					margin-top:23px}
	.navigation{height:85px;}
	#logo{width:250px;}

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

	/* Important styles */
	#toggle {
		float: right;
		display: block;
		width: 28px;
		height: 30px;
		margin: 40px 30px;

	}

	#toggle span:after,
	#toggle span:before {
	  content: "";
	  position: absolute;
	  left: 0;
	  top: -9px;
	  z-index:100;
	}
	#toggle span:after{
	  top: 9px;
	  z-index:100;
	}
	#toggle span {
	  position: relative;
	  display: block;
	}

	#toggle span,
	#toggle span:after,
	#toggle span:before {
	  width: 100%;
	  height: 5px;
	  background-color: white;
	  transition: all 0.3s;
	  backface-visibility: hidden;
	  border-radius: 0px;
	  z-index:100;

	}

	/* on activation */
	#toggle.on span {
	  background-color: transparent;
	}
	#toggle.on span:before {
	  transform: rotate(45deg) translate(5px, 5px);
	}
	#toggle.on span:after {
	  transform: rotate(-45deg) translate(7px, -8px);
	}
	#toggle.on + #menu {
	  opacity: 1;
	  visibility: visible;
	  margin-top: 70px;
	}

	/* menu appearance*/
	#menu  {
	  top:15px;
	  position: absolute;
	  display: block;
	  color: #999;
	  width: 100%;
	  height:225px;
	  padding: 0px;
	  line-height: 1.6;
	  margin: auto;
	  text-align: center;
	  border-radius: px;
	  background: #CCCCCC;
	  box-shadow: 0 1px 8px rgba(0,0,0,1);
	  opacity: 0;
	  visibility: hidden;
	  transition: opacity .4s;
	  z-index: 100;
	}


	#menu li {
		display: block;
		text-decoration: none;
		color:black;
	}
	#menu li a{
    font-size: 20px;
		top:-0px;
		color: black;
		padding:0px;
	}

	#menu a:hover {
		color: white;
		margin:0px;
		padding:0px;
		width:100%;
		background-color: #CCCCCC;
	}


	#menu li:hover> ul{
		margin-left:0px;
		top:72px;
		display: block;
		line-height: 1.6;
		background-color: none;
		z-index:200;
		width:100%;
		padding:0px;
	}

	#menu li:hover > ul li a {
		text-decoration: none;
		display:block;
		color: black;
		background-color:grey;
		border:none;
		margin: 0px;
		padding:0px;
		line-height:1.6;

	}
	#menu li:hover> ul li a:hover {
		color:white;
		background-color:grey;
	}

	li a {
		width:100%;
	  padding: px;
	  color: #888;
	  text-decoration: none;


	}
	li a:hover,
	li a:focus {
	  background: none;
	  color: #fff;

	}

	li ul li{
		display: none;
	}


}

@media screen and (max-width:370px){
	#logo{width:200px}
	.navigation{height:73px}
	#menu {top:4px}
}




/*-------------------------------------------QUOTE LOGOS--------------------------- -------------------*/
.footer{
	background-color:none;
	grid-column:1/4;

}
.number{
	margin-top:40px;
	text-align: center;
	width:100%;
	font-size: 4vmax;
	font-weight: bold;
}


.footcontainer{
	margin-top:40px;
	width:100%;
	background-color:none;
	box-shadow: 1px 5px 3px rgba(0,0,0,.3);
}

#bromleyLogo{
	float:right;
	width: 100px;
	margin:20px;
}

#promptLogo {
	float:right;
	width: 70px;
	margin:8px 20px 20px 20px;
}
#checkatradeLogo{
	margin:20px 20px 20px 20px;
	float:right;
	width: 200px;
}
#trustMarkLogo{
	margin:5px 20px 20px 20px;
	float:right;
	width: 150px;
}
#BPCALogo{
	float:right;
	width:80px;
	margin:5px 20px 20px 20px;
}
#yellLogo {
	float:right;
	margin:20px;
	width: 150px;
}
#wildlifeLogo {
	float:right;
	margin:25px 20px 20px 20px;
	width:100px;
}
#croydonLogo {
	float:right;
	margin:25px 20px 20px 20px;
	width:100px;
}
@media screen and (max-width:1345px){
		#bromleyLogo{width:80px; margin:10px}
		#promptLogo{width:60px; margin:0px 10px 10px 10px;}
		#checkatradeLogo{width:160px; margin:10px}
    #trustMarkLogo{width:120px; margin:0px 10px 10px 10px;}
		#BPCALogo{width:60px; margin:0px 10px 10px 10px;}
		#yellLogo{width:130px; margin:10px}
		#wildlifeLogo{width:80px; margin:13px 10px 10px 10px;}
		#croydonLogo{width:80px; margin:13px 10px 10px 10px;}
	}


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

		#bromleyLogo{width:70px; margin:10px}
		#promptLogo{width:50px; margin:0px 10px 10px 10px;}
		#checkatradeLogo{width:140px; margin:10px}
    #trustMarkLogo{width:100px; }
		#BPCALogo{width:50px; margin:0px 10px 10px 10px;}
		#yellLogo{width:110px; margin:10px}
		#wildlifeLogo{width:70px; margin:13px 10px 10px 10px;}
		#croydonLogo{width:70px; margin:13px 10px 10px 10px;}
	}



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

		#bromleyLogo,#croydonLogo{display:none}
	}
	@media screen and (max-width:700px){

		#promptLogo,#wildlifeLogo, #yellLogo{display:none}
		#checkatradeLogo{width:140px; margin:10px}
    #trustMarkLogo{width:120px; margin:0px 10px 10px 10px;}
		#BPCALogo{width:60px; margin:0px 10px 10px 10px;}
	}


/*-------------------------------------------FOOTER--------------------------- -------------------*/

.bottomLogo{
	background-color:none;
	grid-column:1/4;
  line-height: 1.2
}

.footerline{
	width:100%;
}

#footerLogo{
	width:10%
}

#socialLogo{
	width:3%
}



.control{
  text-decoration: none;
  color: #575656;
  width:90%;
  margin-top: 25px;
  margin-bottom: 40px;
  font-size: 20px;
  line-height: 1.3
}


@media screen and (max-width:700px){
	#footerLogo{width:25%}
	#socialLogo{width:9%}
  .control{font-size: 15px}
}