
@media only screen and ( max-width:1800px) {
}

@media only screen and ( max-width:1700px) {

}

@media only screen and ( max-width:1600px) {

}

@media only screen and ( max-width:1400px) {

}

@media only screen and ( max-width:1200px) {
.wrapper { width:90%; margin:0 5%;}
#menu2 .menu { width:100%; text-align:center;}
#menu2 .menu li { float: none; display: inline-block;}
p br { display:none;}
#header { text-align:center;}
.logo,.header-right { float:none; display:inline-block; width:auto; vertical-align:middle; margin:0px; padding:0 30px;}


.footer-row { text-align:center;}
.footer-row li { float:none; display:inline-block;}

.home-services li h2 { padding:15px 0;}

#title h2 { font-size:30px; line-height:40px;}

#content { margin:50px 0;}
#maintenance-row { padding:50px 0;}

.aboutopimg img { width:100%;}

.about-ser1 { width:15%;}
.about-ser2 { width:55%; margin:0 5%;}
.about-ser3 { width:18%;}

.shield-btn { text-align:center;}
.shield-btn li,.shield-btn li:nth-child(6) { float:none; display:inline-block; margin:0 0 15px;}

}


@media only screen and ( max-width:1100px) {


}

@media only screen and ( max-width:1000px) {
#title h2 {background-position: top 0 left 8%, top 0 right 8%;}


.footer1 { width:38%;}
.footer2 { width:40%;}
.footer3 { width:22%;}

.cont-add h2 { font-size: 40px; line-height: 55px;}
.cont-add h3 { font-size: 22px;}

}

@media only screen and ( max-width:900px) {
.footer1 { width:44%;}
.footer2 { width:32%; padding:0 20px;}

#title h2 {background-position: top 0 left 5%, top 0 right 5%;}
#title h2 { font-size:25px; line-height:30px;}
}

@media only screen and ( max-width:767px) {
p,.areas p { font-size:16px; line-height:26px; font-family:'Montserrat Light';}
h2 { font-size:28px; line-height:40px;}
.accreditations h2 { font-size:35px; line-height:45px;}
.about-row-left h2 { font-size:26px;line-height: 30px;}

#content,#footer,#home-row,#about-row,#about-row2,#gas-boiler1,#gas-boiler2,#gas-boiler3,#work_electrical_1,
#work_electrical_2,#work_electrical_3,#plumbing_1,#plumbing_2,#sercrity_1,#home_improvemnts_1,#contact,
#renewable_1,#booking,.booking-right .btn,#maintenance-row { text-align:center;}

.about-ser1,.about-ser2,.about-ser3 { float:none; display:inline-block; width:auto;}

#work_electrical_1 .row h3 { font-size:19px; line-height:26px;}


.cont-add h2 span,.cont-add h3 span { float:none; display:inline-block; width:100%; min-height:auto; margin:0px; padding:10px 0;}
.cont-add { padding:40px 10px; margin:15px 0;}

.home-row-left,.home-row-right,.footer1,.footer2,.footer3,.about-row-left,.about-row-right,.about-row2-left,.about-row2-right,.row-left,.row-right,
.row2-left,.row2-right,.row3-left,.row3-right,.row4-left,.row4-right,.row5-left,.row5-right,.booking-left,.booking-right,.contact-left,.contact-right  {float:none; display:inline-block; width: 100%;}

.electrservice-row { width:100%; margin:15px 0 30px; min-height:auto; padding:30px 40px 80px;}
.electrservice-row .btn { bottom:2%;}

.home-row-left,.about-row-left,.about-row2-left,.row-left { margin-bottom:30px;}
#title h2 {background-position: top 0 left 0%, top 0 right 0%;}

.pic-img { margin-bottom:15px;}

#home-services { padding:25px 0; text-align:center;}
.home-services li { float:none; display:inline-block; width: 40%; margin:0 0 10px; vertical-align:top;}


.maintenance-row ul { padding:0px;}
.maintenance-row li { width:40%; float:none; display: inline-block; vertical-align:middle; margin-bottom:30px;}
.maintenance-row li p { font-size:22px; line-height:30px;}

.footer2 { margin:25px 0; padding:0px;}
.footer-form .formrow { float: none;display: inline-block;}
.footer-form .formrow.pad1 { float:none;}

#areas,#accreditations,#home-row { padding:40px 0;}

#copy-right p { font-size:15px; line-height:22px;}
#copy-right p span { font-size:20px;}


/*
.about-ser { float:left; width:100%; padding: 0;
background:url('../images/aboutstrip.png');
background-repeat:no-repeat;
background-position:top 0 left 0;
background-size:2% auto;}

.about-ser1 { float:left; width:100%;margin:0 0 53px 10%; text-align:left;}
.about-ser2 { float:left; width:100%; margin:0 0 53px 10%;text-align:left;}
.about-ser2 h2 { font-size:30px; line-height:30px; }
.about-ser3 { float: left; width:100%;margin:0 0 53px 10%;text-align:left;}

.about-ser1 h2, .about-ser2 h2, .about-ser3 h2 {margin:0; padding:0;}
.about-ser1 p, .about-ser2 p, .about-ser3 p {margin:0; padding:0;}
*/
.aboutopimg { display:none;}
.about-ser-res { display:block; text-align: left;}
.about-ser { display:none;}

.progress-bar { height:360px; list-style: none;margin: 0;padding: 0;position: relative;display: flex;flex-direction: column;justify-content: space-between;overflow: hidden; width:100%;}
.progress-bar::after {content: "";position: absolute;top: 0;left: 5px;background: #a7abae;width: 5px;height: 350px;}
.progress-bar li {position: relative; z-index:9999999;}
.stop {background: #daaf47;border-radius: 100px;width: 15px;height: 15px;z-index: 1; }
.progress-bar li.stop ~ li::after {  height: 0;}
.progress-bar li::after {content: "";position: absolute;bottom: 0;left: 5px;/*background: #a7abae;*/ width: 5px;}

.about-text {  width: 400px; float: left; margin:0 0 0 40px;}
.about-text h2 { margin:0px; padding:0px;line-height: 22px;}
.space-bar { float: left; width: 100%;  margin: 15px 0 0;}

}

@media only screen and ( max-width:640px) {
#title h2 { font-size:25px; line-height:30px;}
}

@media only screen and ( max-width:600px) {
.maintenance-row li { width:45%;}
}



@media only screen and ( max-width:540px) {
h2 { font-size:22px; line-height:30px;}

.header-right h2 { font-size:22px; line-height:30px;}
.header-right h2 a { font-size:30px;}

.home-services li { width:40%; margin:0px; padding-bottom:20px;}
.home-services li h2 { padding: 15px 0; font-size: 20px; line-height:25px;}

.home-services a,.home-services a:hover { font-size:19px; padding:12px 30px 12px 10px; background-size:6%; background-position:top 10px right 6px;}

.maintenance-row li { width:100%;}
.maintenance-row p { font-size:21px; line-height:30px;}

.booking-left h2 { font-size:35px; line-height:40px;}

.booking-right a,.booking-right a:hover { font-size:23px; background-position:top 15px right 12px;}

.footer-row li { padding:0 0 10px;}
}

@media only screen and ( max-width:460px) {
p { font-size:15px;}
.home-services li  { width:44%;}
.home-services li img { width:80%;}
.home-services li h2 { padding:0px; line-height:20px; font-size:18px;}

.header-right h2 { font-size:20px; line-height:30px;}
.header-right h2 a { font-size:26px;}

.locations li { font-size:19px; line-height:30px; background-position:top 10px left 0;}
.footer-form .formrow { margin:0 10px 8px 0;}

.booking-left h2 { font-size:30px; line-height:40px;}
.booking-left p { font-size:19px;}
}

@media only screen and ( max-width:380px) {
.home-services a,.home-services a:hover { font-size:17px;}

.header-right h2 { font-size:17px; line-height:26px; text-align:center;}
.header-right h2 a { font-size:22px; display:inline-block;}

#title h2 { font-size:20px; line-height:26px;}

.footer-form .formrow { width:100%;}

.about-text { width: 260px; margin:0 0 0 25px;}

}


@media only screen and ( max-width:340px) {
.about-text { width: 250px;}
}















