/*Desktop*/
body{
	background-color:#d1d0d0;
}

img {
  width: 100%;
  height: auto;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    overflow: hidden;
    background-color: #2f5597;
	top: 0;
}

ul.topnav li {
    float: left;
}

ul.topnav li a {
    display: block;
    color: #d1d0d0;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	font-size:150%;
	font-family: Ebrima;
}

ul.topnav li a:hover:not(.active) {
    background-color: red;
}

ul.topnav li a.active {background-color: #d1d0d0;}

ul.topnav li.right {float: right;}



#footer {
	background-color:#2f5597;
	color:white;
	clear:both;
	text-align:left;
	padding: 10px;
}

#section {
	background-color:#d1d0d0;
	text-align: left;
	padding: 10px;
}

#container {
	background-color:#d1d0d0;
	width: 100%;
	padding: 0;
	margin: 0 auto;
}

.h1_socialmedia{
	border-bottom: 2px solid black;
	background-color: #d1d0d0;
	padding-bottom: 5px;
	font-size: 20px;
	font-weight: bold;
	font-family: Ebrima;
	text-align: left;
}

.facebookIcon{
	width: 50px;
	height: 50px;
	float: left;
}

.instagramIcon{
	width: 50px;
	height: 50px;
	float: left;
}

.twitterIcon{
	width: 50px;
	height: 50px;
	float: left;
}

.h1_map {
	padding-bottom: 5px;
	font-size: 15px;
	color: white;
	font-family: Ebrima;
	font-weight: bold;
}

.contact_infoFooter {
	padding-bottom: 2px;
	font-size: 15px;
	color: white;
	font-family: Ebrima;
	font-weight: bold;
}

.contact_info {
	font-family: Ebrima;
	color: white;
}

iframe {
 width: 100%;
}

.copyright {
	font-family: Ebrima;
}

.gasSafe{
	width: 50px;
	height: 50px;
	float: right;
}

.h_a{
	width: 75px;
	height: 50px;
	float: right;
}

/* Home page */

.home_text-container{
	width: 72%;
	float: left;
	margin-bottom: 20px;
}

.homeText{
	font-family: Ebrima;
	font-size: 12pt;
	color: black;
}

.review-container{
	width: 25%;
	padding-left: 20px;
	float: right;
	margin-top: 10px;
	margin-bottom: 200px;
}

.heading-review{
	font-family: Ebrima;
	font-weight: bold;
	text-align: center;
}

.review{
	font-family: Ebrima;
	font-weight: bold;
	text-align: center;
	font-size: 12pt;
}

.review_title{
	font-family: Ebrima;
	text-align: center;
	color: black;
	font-size: 11pt;
}

.review_text{
	font-family: Ebrima;
	text-align: center;
	color: black;
	font-size: 10pt;
	font-style: italic;
}

.review_page{
	font-family: Ebrima;
	color: black;
	font-size: 11pt;
}

.row2:after{
	contain: "";
	display: table;
	clear: both;
}

.card{
	padding: 20px;
	margin-top: 10px;
}

.images-container{
	width: 72%;
	float: left;
	margin-bottom: 54px;
}

.work-images{
	border-bottom: 2px solid black;
	padding-bottom: 5px;
	font-size: 20px;
	font-weight: bold;
	font-family: Ebrima;
}

.luxury-bathroom{
	width: 25%;
	height: 500px;
}

.office{
	width: 25%;
	height: 500px;
}

.nainys-backgarden{
	width: 25%;
	height: 500px;
}

.kitchen{
	width: 24%;
	height: 500px;
}

/* About us page */

.row3:after{
	contain: "";
	display: table;
	clear: both;
}

.card1{
	padding: 20px;
	margin-top: 10px;
}

.vans-container{
	width: 50%;
	float: right;
	margin-bottom: 20px;
}

.vans{
	width: 100%;
	height: auto;
}

.about_us-container{
	width: 49%;
	float: left;
	margin-bottom: 20px;
}

.about_us{
	font-family: Ebrima;
	font-weight: bold;
	font-size: 15pt;
}

.about_us-text{
	font-family: Ebrima;
	font-size: 12pt;
	color: black;
}

.director1-container{
	width: 16%;
	float: left;
	margin-bottom: 20px;
	margin-top: 10px;
}

.director2-container{
	width: 16%;
	float: left;
	margin-bottom: 20px;
	margin-top: 10px;
	margin-left: 10px;
}

.director3-container{
	width: 16%;
	float: left;
	margin-bottom: 20px;
	margin-top: 10px;
	margin-left: 10px;
}

.glanys_botfield{
	width: 100%;
	height: auto;
}

.roy_botfield{
	width: 100%;
	height: auto;
}

.roy_botfield_jr{
	width: 100%;
	height: auto;
}

.director{
	font-family: Ebrima;
	font-weight: bold;
	text-align: center;
}

/*Services*/

.row3:after{
	contain: "";
	display: table;
	clear: both;
}

.card2{
	padding: 20px;
	margin-top: 10px;
}

.services-container{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}

.services{
	font-family: Ebrima;
	font-weight: bold;
	font-size: 15pt;
}

.service-text{
	font-family: Ebrima;
	font-size: 12pt;
	color: black;
}

.boiler_services-container{
	width: 100%;
	float: left;
	margin-top: 10px;
	margin-bottom: 20px;
}

.services-heading{
	font-family: Ebrima;
	font-weight: bold;
	font-size: 25pt;
	text-align: center;
}

.services-text{
	font-family: Ebrima;
	font-size: 12pt;
	color: black;
	text-align: center;
}

.boiler_services_image{
	width: 25%;
	height: 5%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.boiler_installation-container{
	width: 100%;
	float: left;
	margin-top: 10px;
	margin-bottom: 20px;
}

.boiler_installation_image{
	width: 25%;
	height: 5%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.bathroom_refurbishments-container{
	width: 100%;
	float: left;
	margin-top: 10px;
	margin-bottom: 20px;
}

.bathroom_refurbishments_image{
	width: 25%;
	height: 5%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.disabled_adaptations-container{
	width: 100%;
	float: left;
	margin-top: 10px;
	margin-bottom: 20px;
}

.disabled_adaptations_image{
	width: 25%;
	height: 5%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.full_central_heating-container{
	width: 100%;
	float: left;
	margin-top: 10px;
	margin-bottom: 20px;
}

.full_central_heating_image{
	width: 25%;
	height: 5%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.general_building_work-container{
	width: 100%;
	float: left;
	margin-top: 10px;
	margin-bottom: 20px;
}

.general_building_work_image{
	width: 25%;
	height: 5%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*Gallery*/

.row4:after{
	contain: "";
	display: table;
	clear: both;
}

.card3{
	padding: 20px;
	margin-top: 10px;
}

.gallery_text-container{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}

.gallery-text{
	font-family: Ebrima;
	font-size: 12pt;
	color: black;
}

.gallery-container{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}

.luxury-bathroom1{
	width: 19%;
	height: auto;
}

.luxury-bathroom2{
	width: 19%;
	height: auto;
}

.luxury-bathroom3{
	width: 19%;
	height: auto;
}

.luxury-bathroom4{
	width: 19%;
	height: auto;
}

.luxury-bathroom5{
	width: 19%;
	height: auto;
}

.luxury-bathroom6{
	width: 19%;
	height: auto;
}

.luxury-bathroom7{
	width: 19%;
	height: auto;
}

.luxury-bathroom8{
	width: 19%;
	height: auto;
}

.luxury-bathroom9{
	width: 19%;
	height: auto;
}

.luxury-bathroom10{
	width: 19%;
	height: auto;
}

.luxury-bathroom11{
	width: 19%;
	height: auto;
}

.luxury-bathroom12{
	width: 19%;
	height: auto;
}

.luxury-bathroom13{
	width: 19%;
	height: auto;
}

.luxury-bathroom14{
	width: 19%;
	height: auto;
}

.luxury-bathroom15{
	width: 19%;
	height: auto;
}

.luxury-bathroom16{
	width: 19%;
	height: auto;
}

.luxury-bathroom17{
	width: 19%;
	height: auto;
}

.luxury-bathroom18{
	width: 19%;
	height: auto;
}

.luxury-bathroom19{
	width: 19%;
	height: auto;
}

.luxury-bathroom20{
	width: 19%;
	height: auto;
}

.office1{
	width: 19%;
	height: auto;
}
.office2{
	width: 19%;
	height: auto;
}
.office3{
	width: 19%;
	height: auto;
}
.office4{
	width: 19%;
	height: auto;
}
.office5{
	width: 19%;
	height: auto;
}
.office6{
	width: 19%;
	height: auto;
}
.office7{
	width: 19%;
	height: auto;
}
.office8{
	width: 19%;
	height: auto;
}
.office9{
	width: 19%;
	height: auto;
}
.office10{
	width: 19%;
	height: auto;
}

/*Contact Us*/

.row5:after{
	contain: "";
	display: table;
	clear: both;
}

.card4{
	padding: 20px;
	margin-top: 10px;
}

.contact_details-container{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}

.contact_us-container{
	width: 49%;
	float: right;
	margin-bottom: 20px;
}

.contact_details-heading{
	font-family: Ebrima;
	font-weight: bold;
	font-size: 25pt;
	text-align: center;
}

.contact-details{
	font-family: Ebrima;
	font-size: 12pt;
	color: black;
	text-align: center;
}

.contact_us-heading{
	font-family: Ebrima;
	font-weight: bold;
	font-size: 25pt;
	text-align: center;
}

.contact-us{
	font-family: Ebrima;
	font-size: 12pt;
	color: black;
	text-align: center;
}

.form-control{
	width: 25%;
	font-size: 12pt;
}

/*Laptop*/
@media screen and (max-width: 1440px){
	.column {
		width: 100%;
	}
}

/*Ipad*/
@media screen and (max-width: 1248px){
	.column {
		width: 100%;
	}

	.luxury-bathroom{
		width: 25%;
		height: 300px;
	}
	
	.office{
		width: 25%;
		height: 300px;
	}
	
	.nainys-backgarden{
		width: 24%;
		height: 300px;
	}
	
	.kitchen{
		width: 24%;
		height: 300px;
	}

	.review-container{
		width: 25%;
		padding-left: 20px;
		float: right;
		margin-top: 10px;
		margin-bottom: 50px;
	}

	.heading-review{
		font-family: Ebrima;
		font-weight: bold;
		text-align: center;
		font-size: 15pt;
	}

	.review{
		font-family: Ebrima;
		font-weight: bold;
		text-align: center;
		font-size: 10pt;
	}
	
	.review_title{
		font-family: Ebrima;
		text-align: center;
		color: black;
		font-size: 10pt;
	}
	
	.review_text{
		font-family: Ebrima;
		text-align: center;
		color: black;
		font-size: 7pt;
		font-style: italic;
	}
	
	.review_page{
		font-family: Ebrima;
		color: black;
		font-size: 10pt;
	}

	.director1-container{
		width: 30%;
		float: left;
		margin-bottom: 20px;
		margin-top: 10px;
	}
	
	.director2-container{
		width: 30%;
		float: left;
		margin-bottom: 20px;
		margin-left: 10px;
	}
	
	.director3-container{
		width: 30%;
		float: left;
		margin-bottom: 20px;
		margin-left: 10px;
	}


}

/*Iphone*/
@media screen and (max-width: 700px) {
	ul.topnav li.right, 
	ul.topnav li {float: none;}
  
  
  ul.topnav {
	  list-style-type: none;
	  margin: 0;
	  padding-left: 0;
	  overflow: hidden;
	  background-color: #2f5597;
  }
  
  .column {
	  width: 100%;
  }
  
  .home_text-container, .images-container, .vans-container, .about_us-container, .director1-container, .director2-container, .director3-container{
	  width: 100%;
	  padding: 0;
  }

  .review-container{
	  width: 100%;
	  padding: 0;
	  margin-bottom: 20px;
  }
  
	.luxury-bathroom, .office, .nainys-backgarden, .kitchen{
	  width: 100%;
	  padding: 0;
	  height: 400px;
	}

.director1-container{
	width: 100%;
	float: left;
	margin-bottom: 20px;
	margin-top: 10px;
}

.director2-container{
	width: 100%;
	float: left;
	margin-bottom: 20px;
	margin-top: 10px;
}

.director3-container{
	width: 100%;
	float: left;
	margin-bottom: 20px;
	margin-top: 10px;
}

  	.boiler_services_image{
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
  	}

	.boiler_installation_image{
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.bathroom_refurbishments_image{
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.disabled_adaptations_image{
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.full_central_heating_image{
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.general_building_work_image{
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.luxury-bathroom1, .luxury-bathroom2, .luxury-bathroom3, .luxury-bathroom4, .luxury-bathroom5, .luxury-bathroom6, .luxury-bathroom7, .luxury-bathroom8, .luxury-bathroom9, .luxury-bathroom10, .luxury-bathroom11, .luxury-bathroom12, .luxury-bathroom13, .luxury-bathroom14, .luxury-bathroom15, .luxury-bathroom16, .luxury-bathroom17, .luxury-bathroom18, .luxury-bathroom19, .luxury-bathroom20{
		width: 100%;
		height: auto;
	}

	.office1, .office2, .office3, .office4, .office5, .office6, .office7, .office8, .office9, .office10{
		width: 100%;
		height: auto;
	}

	.contact_details-container, .contact_us-container{
		width: 100%;
	  	padding: 0;
	}

	.form-control{
		width: 100%;
		font-size: 12pt;
	}
  
}