/* Your custom styles */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/*************End Icon*********************/
/******************start reset css******************/
.no-paddding{padding:0px;}
.paddingtb10{padding:10px 0px}
.paddingtb20{padding:20px 0px}
.paddingtb30{padding:30px 0px}
.paddingtb40{padding:40px 0px}
.paddingtb50{padding:50px 0px}
.paddingtb60{padding:60px 0px}
.paddingtb70{padding:70px 0px}
.paddingtb80{padding:80px 0px}
.paddingtb90{padding:90px 0px}
.paddingtb100{padding:10px 0px}
.no-margin{margin:0px;}
.mt0{margin-top:0px;}
.margintb10{margin:10px 0px}
.margintb20{margin:20px 0px}
.margintb30{margin:30px 0px}
.margintb40{margin:40px 0px}
.margintb50{margin:50px 0px}
.margintb60{margin:60px 0px}
.margintb70{margin:70px 0px}
.margintb80{margin:80px 0px}
.margintb90{margin:90px 0px}
.margintb100{margin:10px 0px}
.mtop50{margin-top:50px;}
.mtop60{margin-top:60px;}
.mt30{margin-top:30px;}
.mb30{margin-bottom:30px;}
strong{font-weight:bold}


/********************end reset css*****************/
body{font-family: 'Quicksand', sans-serif;
font-size:16px; line-height:18px; color:#000; margin:0px; padding:0; }
.main{width:100%; float:left; background: url(../images/main-header-top.png)right top repeat-x;  background-size:contain; height:100%;}
.topbar{float:left; width:100%; padding:20px 0px 25px 0px;}

.new_top{background: url(../img/landingpage/Header.svg) right top no-repeat;}
.topbar1{ float:left; width:100%; min-height:293px; padding:25px 0px 41px 0px; background-size:cover;}
.logo{ float:left; }
.logo {font-family: 'Montserrat', sans-serif; font-size:35px; font-weight:500; color:#fff}
.logo:hover{color:#fff;}
.navbar { width:100%; box-shadow:none;}
.nav-item{padding:0px 10px;}
.btn-rounded{ border-radius:35px; padding:9px 19px;}
.nav-link{margin-top:8px}
ul.navbar-nav {}


/*.topbar-sep-one {background: url(../images/Sep1.png) left bottom no-repeat; float:left; width:100%; background-size:cover; min-height:400px;}
.topbar-sep-two {background: url(../images/Sep2.png) left bottom no-repeat; float:left; width:100%; background-size:contain;min-height:400px;}
.topbar-sep-three {background: url(../images/Sep3.png) left bottom no-repeat; float:left; width:100%; background-size:contain;min-height:400px; padding:25px 0px 0px 0px;}*/
.main-top-shape{background: url(../images/mixshape.svg)right top no-repeat; float:left; width:100%; background-size:cover; position:relative; min-height: 440px; margin-top:-30px; padding-top:30px;}

@media only screen and (min-device-width : 1400px) and (max-device-width : 1624px) {	
	.main-top-shape{ min-height: 520px;}		
}
@media only screen and (min-device-width : 1625px) and (max-device-width : 1824px) {	
		.page-header{ margin-top:360px;}
		
	
}

@media only screen and (min-device-width : 1825px) and (max-device-width : 1920px) {	
		
		.three_bottom{ min-height: 418px!important;}
	
}
@media only screen  and (min-width : 1920px) {
	.page-header{ margin-top:220px!important;}
	.three_bottom{ min-height: 418px!important;}
	.energy-bottom-round{min-height:250px !important;}
	.three_bottom-new{ min-height: 418px!important;}
	.energy-bottom-round{min-height:250px !important;}
	.inner_six,.section-easy-steps{padding-top:270px!important;}
	
	.main_footer{min-height:750px!important;}
	
}
@media only screen  and (min-width : 2120px) {
	.page-header{ margin-top:270px!important;}
	.main_footer{min-height:800px!important;}

	
}

@media only screen  and (min-width : 2320px) {	
	.page-header{ margin-top:340px!important;}	
	.three_bottom{ min-height: 508px!important;}
		.energy-bottom-round{min-height:380px !important;}
			.main-bottom-round{padding-bottom:230px!important;}
			.postcode_box {padding-bottom:380px!important;}

}


@media only screen  and (min-width : 2420px) {	
	.page-header{ margin-top:375px!important;}	
	.three_bottom{ min-height: 630px!important;}
		.energy-bottom-round{min-height:380px !important;}
		.three_bottom-new{ min-height: 518px!important;}
			.main_footer{min-height:700px!important; background-size:cover;}

}

.phone-container .middle-right-diamond { pointer-events: none;position: absolute;top: 3%;left: -20%;width: 38vw;height: auto;transform: translateY(-50%);
z-index: -1;}
.page-header .brand .hook{line-height:32px;}
/*******************footer Css*******************/
.main_footer{float:left; width:100%; padding:0px 0px 0px 0px; background:url(../images/common-footer.png) #fff right bottom no-repeat; background-size:contain; position:relative; min-height:745px;}
.inner_footer{ float:left; width:100%; padding:50px 0px 30px 0px; }
.inner_footer h4{ font-weight:500; font-size:24px; margin-bottom:20px;  }
.links-vertical{ margin:0px; padding:0}
.links-vertical li{list-style:none; padding:11px 0px;}
.links-vertical li a{color:#777; text-transform:uppercase; font-size:13px; line-height:18px;}
.links-vertical li a:hover{color:#000}
.inner_footer p{color:#777; font-size:14px; line-height:21px;}
.links-vertical .material-icons{font-size:22px; color:#000; margin-right:12px; float:left}
.inner_footer h5{ font-weight:500; font-size:18px; margin-top:20px;  }
.social-footer ul li{ display:inline; list-style:none;}
.social-footer ul{margin:0px; padding:0px;}
.social-footer{padding:20px 0px; position:absolute; bottom:30px; left:0; width:100%}
.social-footer .fa{font-size:25px;}
.social-footer a{padding:0px 10px; margin:0px;}

.btn.btn-twitter.btn-simple, .navbar .navbar-nav > li > a.btn.btn-twitter.btn-simple {
    color: #fff!important; 
    background-color: transparent;
box-shadow: none;}

.btn.btn-facebook.btn-simple, .navbar .navbar-nav > li > a.btn.btn-facebook.btn-simple {
    color: #fff!important;
    background-color: transparent;
box-shadow: none;}


.copyright{float:left; width:100%; color:#fff; font-size:11px; margin-bottom:20px; position:absolute; bottom:0; left:0; }




/***************************Start Section One***************************

*************************************************************************/
.page-header {margin-top: 150px; float:left; width:100%; background:url(../images/bottom-post-code.png) right bottom no-repeat; background-size:contain; padding-bottom:50px;}
.page-header .brand {margin-top: 120px;}
.page-header .brand .title { font-size: 60px;}
.page-header .brand .hook {  font-size: 2.1em; margin-bottom: 25px; color:#808080}

.phone { position: relative;}
.phone video {  z-index: 9999;   position: absolute;  left: -27%;  top: 29%;  transform: rotate(90deg); width: 154%;}
.phone img {  width: 100%;}
.one-part-post-code{border:1px solid #ebebeb; border-radius:42px; padding:0px; float:left; margin-top:20px}
.first-sec-postcode{border:none; background:none; font-size:16px; color:#acacac; padding:0px 12px; width:130px;}

.main-page{  background-size: auto 1000px;}


@media only screen and (min-device-width : 1400px) and (max-device-width : 1624px) 
{
.main-page{   background-size: auto 1210px;}

}
@media only screen  and (min-width : 1724px) {
.main-page{ background-size: auto 1250px;}
.breadcrumbs{min-height:800px;}

}
@media only screen  and (min-width : 1824px) {
.main-page{   background-size: auto 1050px;}
.breadcrumbs{min-height:1000px;}

}

@media only screen  and (min-width : 1920px) {
.main-page{   background-size: auto 1050px;}
.breadcrumbs{min-height:800px;}
#ever_bottom_bg_new{margin-top:9px;}

}

@media only screen  and (min-width : 2120px) {

.breadcrumbs{min-height:800px;}
#ever_bottom_bg_new{margin-top:7px;}

}

@media only screen  and (min-width : 2220px) {

.breadcrumbs{min-height:800px;}
#ever_bottom_bg_new{margin-top:7px; min-height:420px;}

}


/***************************End  Section One***************************

*************************************************************************/

/***************************Start Section two***************************

*************************************************************************/

.section-why-switch .reasons {   margin-top: 60px; }
.why_switch_box{float:left; width:100%; margin:25px 0px;}
.why_switch_box_first{ margin:50px 0px 25px 0px!important;}
.section-why-switch h2{color:#6e6e6e; font-weight:400;}
.section-why-switch .reasons h2 {  text-align: left; color:#969696;   margin-bottom: 0px;}
.section-why-switch .reasons .info { display: block;    max-width: 100%;    margin: 0px;    padding: 0px;}
.section-why-switch .reasons .info .icon { font-size: 55px; font-weight:bold; float:left; width:100px; height:100px; line-height:100px; border-radius:50%;   margin-right: 20px;
    color:#fff; background: rgba(255,88,88,1);
background: -moz-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,88,88,1)), color-stop(85%, rgba(241,70,138,1)), color-stop(100%, rgba(238,67,147,1)));
background: -webkit-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: -o-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: -ms-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5858', endColorstr='#ee4393', GradientType=1 );
}
 .info-title { font-size: 17px; color:#979797; font-weight:bold; width:80%; float:left; line-height:24px; margin-bottom:10px;}
.section-why-switch .reasons .info p { font-size: 16px; float:left; width:100%; color:#b7b7b7}
 .section-why-switch .phone-container { position: relative; margin-top: 50px;}

.section-why-switch{ padding:50px 0px; background:#f5f9fc; float:left; width:100%;}
.why_switch_box_first .info-title{margin-top:20px;}
.switch-box-mobile{padding-top:70px;}

/***************************End Section One***************************

*************************************************************************/

/***************************Start Section Seven***************************

*************************************************************************/
.card {display: inline-block; position: relative; width: 100%; margin-bottom: 30px;border-radius: 39px; color: rgba(0,0,0, 0.87); background: #fff;
   box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);}
.card-blog { margin-top: 30px;}
.card .card-image { height: 60%; position: relative; overflow: hidden; margin-left: 15px; margin-right: 15px; margin-top: -50px;  border-radius: 6px;
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);}
.card-image a { display: inline-block;}
.card .card-image img { width: 100%; height: 100%; border-radius: 6px; pointer-events: none;}
.img-raised {box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);}
.card .content { padding: 15px 30px;}
.category_care{ float:left; width:100%; font-size:18px; margin-bottom: 25px;text-transform: uppercase;}
.grey_heading{ float:left; width:100%; font-size:32px; margin-bottom:40px; color:#5e5e5e;}
.three_box{clear:both; float:left; margin-top:50px; }
.box_text a{color: #666;font-size: 16px;padding: 10px 0px;}
.box_text{padding: 22px 8px;float: left;width: 100%;}

/***************************End Section Seven***************************

*************************************************************************/
/***************************Start Section five***************************

*************************************************************************/

.face .material-icons{color:#fff; font-size: 4em; background: rgba(255,88,88,1);
background: -moz-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,88,88,1)), color-stop(85%, rgba(241,70,138,1)), color-stop(100%, rgba(238,67,147,1)));
background: -webkit-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: -o-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: -ms-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5858', endColorstr='#ee4393', GradientType=1 ); padding:15px; border-radius:50%}

.step_heading{ font-weight: 700; font-size:28px; width:100%; text-align:center; float:left; padding:20px 0px;}
.step_intro{ font-size:16px; width:100%; text-align:center; float:left; margin:10px 0px;font-weight:500;}
.step_detail{ font-size:16px; width:100%; text-align:center; float:left; padding:10px 20px; color:#999; line-height:22px;}
.handset .material-icons{color:#fff; font-size: 4em; background: rgba(255,88,88,1);
background: -moz-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,88,88,1)), color-stop(85%, rgba(241,70,138,1)), color-stop(100%, rgba(238,67,147,1)));
background: -webkit-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: -o-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: -ms-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5858', endColorstr='#ee4393', GradientType=1 ); padding:15px; border-radius:50%}
.rose .material-icons{color:#fff; font-size: 4em; background: rgba(255,88,88,1);
background: -moz-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255,88,88,1)), color-stop(85%, rgba(241,70,138,1)), color-stop(100%, rgba(238,67,147,1)));
background: -webkit-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: -o-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: -ms-linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
background: linear-gradient(45deg, rgba(255,88,88,1) 0%, rgba(241,70,138,1) 85%, rgba(238,67,147,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5858', endColorstr='#ee4393', GradientType=1 ); padding:15px; border-radius:50%}
.title_step{ color:#919191; line-height:40px; font-size:30px; width:100%; float:left; margin-bottom:70px;}
/***************************end Section five***************************

*************************************************************************/
/***************************start Section four***************************

*************************************************************************/

.section-six{ background: url(../img/landingpage/parallex2.png)top center no-repeat; float:left; width:100%; background-size:cover; position:relative;}
.inner_six{ background: url(../images/parallex-meter.png)top center no-repeat; float:left; width:100%; padding:200px 0px 0px; background-size:contain;}
.inner_six h2{font-size:45px; color:#fff;}
.inner_six .instructions{color:#fff; font-size:20px; padding:50px 0px 10px 0px; float: left; width:100%;}
.section-six .card .content {    padding: 25px 30px;}
.section-six label { font-size: 16px; line-height: 1.07143; color: #AAAAAA; font-weight: 400;margin: 16px 0 0 0;}
#postcode{border-bottom: 1px solid #9f9f9f!important; border:none; border-radius:0!important;}
.postCodeBox{ width:100%; float:left;}
.btnNew{margin-top:10px;}
.middle-meter-center{float:left; width:100%; padding:235px 0px 150px 0px; z-index:-22}
.middle-meter-center h2{color:#fff; margin-top:150px;}
/***************************end Section four***************************

*************************************************************************/

/***************************start Section three***************************

*************************************************************************/

.three_bottom{ float:left; width:100%;}
.three_box_section{float:left; width:100%;  background: url(../images/top-master-headernew.png) top center no-repeat; background-size:cover;position:relative; z-index:0;}
.boxCenterImg img { width: 70%!important; height:auto;}
.three_bottom h2{color:#fff; float:left; width:100%; margin-bottom:70px;}
.three_bottom{float:left; width:100%;  background: url(../images/mter-top-new.png) top left no-repeat;   background-size:cover; position:absolute; min-height:300px;}
.three_bottom-new {float:left; width:100%;  background: url(../images/meter-bottom-new.png) bottom left no-repeat; padding:180px 0px 90px 0px; background-size:cover; position:absolute; min-height:300px; bottom:0; z-index:-22}



/***************************end Section three***************************

*************************************************************************/


/*******************************start Section Four***************************/

 .section-why-switch .summary {
     text-align: center;
}
 .section-why-switch .reasons {
     margin-top: 40px;
     margin-bottom: 50px;
}
 @media (min-width: 768px) {
     .section-why-switch .reasons {
         margin-top: 80px;
         margin-bottom: 0px;
    }
}
 @media (min-width: 992px) {
     .section-why-switch .reasons {
         margin-top: 110px;
    }
}
 @media (min-width: 1200px) {
     .section-why-switch .reasons {
         margin-top: 40px;
    }
}
 @media (min-width: 1200px) {
     .section-smart-meter .title {
         margin-top: 80px;
    }
}
 .section-smart-customer-services {
     margin-bottom: 30px;
}
 .section-smart-customer-services .title {
     text-align: center;
     margin-bottom: 0px;
}
 .section-smart-customer-services .summary {
     text-align: center;
}
 .section-smart-customer-services .phone-container {
     margin-left: 20vw;
     margin-right: 20vw;
     margin-top: 15px;
     margin-bottom: 15px;
}
 @media (min-width: 768px) {
     .section-smart-customer-services .phone-container {
         margin-left: 0px;
         margin-right: 0px;
         margin-top: 0px;
         margin-bottom: 0px;
    }
}
 @media (min-width: 992px) {
     .section-smart-customer-services .phone-container {
         margin: 0px;
    }
}
 @media (min-width: 1200px) {
     .section-smart-customer-services .phone-container {
         margin: 10px;
    }
}
 @media (min-width: 768px) {
     .section-smart-customer-services .services-xs {
         display: none;
    }
}
 .section-smart-customer-services .services-xs .social-icons {
     margin-right: 8px;
     margin-left: 8px;
}
 @media (min-width: 992px) {
     .section-smart-customer-services .services-xs .social-icons {
         margin-left: 15vw;
         margin-right: 15vw;
         margin-top: 30px;
         margin-bottom: 30px;
    }
}
 .section-smart-customer-services .services-xs .social-icons .social-icon {
     padding-right: 8px;
     padding-left: 8px;
}
 @media (min-width: 992px) {
     .section-smart-customer-services .services-xs .social-icons .social-icon {
         margin-left: 15vw;
         margin-right: 15vw;
         margin-top: 30px;
         margin-bottom: 30px;
    }
}
 .section-smart-customer-services .services-xs .social-icons .social-icon img {
     width: 100%;
     height: auto;
}
 .section-smart-customer-services .services-sm {
     display: none;
}
 @media (min-width: 768px) {
     .section-smart-customer-services .services-sm {
         display: block;
    }
}
 @media (min-width: 992px) {
     .section-smart-customer-services .services-sm {
         display: none;
    }
}
 .section-smart-customer-services .services-sm .info {
     cursor: pointer;
     padding-top: 10px;
     padding-bottom: 10px;
     font-weight: 300;
     font-size: 1.5em;
}
 .section-smart-customer-services .services-sm .info .icon {
     margin-top: 30px;
     margin-left: 20px;
     margin-right: 20px;
     margin-bottom: 10px;
}
 .section-smart-customer-services .services-sm .info .icon .social-icon {
     filter: grayscale(70%);
     width: 50px;
}
 .section-smart-customer-services .services-sm .info .social-title {
     margin-top: 42px;
     font-size: 20px;
}
 .section-smart-customer-services .services-sm .info.active .social_icon, .section-smart-customer-services .services-sm .info:hover .social_icon {
     filter: grayscale(0%);
}
 .section-smart-customer-services .services-md-lg {
     display: none;
}
 @media (min-width: 992px) {
     .section-smart-customer-services .services-md-lg {
         display: block;
    }
}
 .section-smart-customer-services .services-md-lg .info {
     cursor: pointer;
     padding-top: 10px;
     padding-bottom: 10px;
     font-weight: 300;
     font-size: 1.5em;
}
 .section-smart-customer-services .services-md-lg .info:first-child {
     padding-top: 60px;
}
 @media (min-width: 1200px) {
     .section-smart-customer-services .services-md-lg .info:first-child {
         padding-top: 125px;
    }
}
 .section-smart-customer-services .services-md-lg .info .align-right {
     text-align: right;
}
 .section-smart-customer-services .services-md-lg .info .icon {
     margin-top: 30px; float:left;
     margin-left: 20px;
     margin-right: 20px;
     margin-bottom: 52px;
}
 .section-smart-customer-services .services-md-lg .info .icon.right {
     float: right;
}
 .section-smart-customer-services .services-md-lg .info .icon .social-icon {
    /* filter: grayscale(70%);*/
     width: 50px;
}
 @media (min-width: 1200px) {
     .section-smart-customer-services .services-md-lg .info .icon .social-icon {
         width: 70px;
    }
}
 .section-smart-customer-services .services-md-lg .info .social-title {
     margin-top: 42px;
     font-size: 20px;
}
 @media (min-width: 1200px) {
     .section-smart-customer-services .services-md-lg .info .social-title {
         margin-top: 48px;
         font-size: 25px;
    }
}
 .section-smart-customer-services .services-md-lg .info p {
     color: #444;
     font-size: 12px;
     line-height: 1.4;
}
 @media (min-width: 1200px) {
     .section-smart-customer-services .services-md-lg .info p {
         color: #444;
         font-size: 14px;
         line-height: 1.42857143;
    }
}
 .section-smart-customer-services .services-md-lg .info.active .social_icon, .section-smart-customer-services .services-md-lg .info:hover .social_icon {
     filter: grayscale(0%);
}
 
 #telegramvid,#socialvid{margin-top:50px;}
 
.section-smart-customer-services h2{ text-align:center; margin-bottom:50px;width:100%; color:#919191; font-size:30px; }

.phone .smsImage.smsImageNew {
    display: inline-block;
}
.phone .smsImage {
    position: absolute;
    width: 85%;
    left: 7%;
    top: 13%;
}
.get_smart_btn{ background:#62c6f2!important; border-radius:24px; margin-top:50px; font-size:16px!important;}		
/**********************End Section four***************************************/

.section-why-switch{position:relative;}

#blue_top{ background:#61c5f1 !important; min-height: auto;}
.postcode_top{ float:left; width:100% }
.postcode_box{ background: url(../images/blue-shape.png)bottom center no-repeat; float:left; width:100%; padding:20px 0px 260px; background-size:contain;}
.postcode_box h2{ font-size: 37px;color: #fff;line-height: 55px;margin-bottom: 36px;}
.postcode_box label{ color:#AAAAAA; padding:10px 0px}
.back_step{ position:relative; }
.back_step .material-icons{position: absolute;top: 0px;left: -75px; }
.post_box_heading4{ font-size: 25px;color: #fff;line-height: 35px;margin-bottom: 15px;}
.post_box_headingblue{ font-size: 25px;color: #61c5f1;line-height: 35px;margin: 36px 0px; width:100%; text-align:center;}
#continue_btn{float:left; width:100%; text-align:center; padding:20px 0px;}
.paddingtb{padding:5px !important; font-size:25px;}
.switch_box{ background:#fff; border-radius:6px;  float: left; width:100%; padding:10px;}
.switch_box_main{width:100%; clear:both; margin-top:50px;}
.gas_box_icon img{font-size:120px; height:120px; }
.gas_box_icon {text-align:center;}
.gas_card {display: inline-block; position: relative; width: 100%; margin-bottom: 30px;border-radius: 10px; color: rgba(0,0,0, 0.87); background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); padding:30px 20px;}
	.gas_box_text{ width:100%; float:left; padding:50px 0px 20px; text-align:center; color:#7579ff; font-size:21px; text-align:center; font-weight:400}
	.gas_box_text a{ color:#7579ff; font-size:21px; text-align:center; font-weight:400}

	
	input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%; 
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;

  background: #f1f1f1;


}
input[type=range]::-webkit-slider-thumb {

  height: 25px;
  width: 25px;
 border:1px solid #f2f2f2; 
 box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
background: -moz-linear-gradient(45deg, rgba(170,49,242,1) 0%, rgba(130,103,252,1) 100%); /* ff3.6+ */
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #f1f1f1;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animate: 0.2s;
  background: #7579ff;


}
input[type=range]::-moz-range-thumb {
border-radius:50%;
  height:25px;
  width: 25px;border:2px solid #a8aafc;box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

background: -moz-linear-gradient(45deg, rgba(170,49,242,1) 0%, rgba(130,103,252,1) 100%); /* ff3.6+ */
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;

  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #f1f1f1;

}
input[type=range]::-ms-fill-upper {
  background: #f1f1f1;
 
}
input[type=range]::-ms-thumb {

 border-radius:50%;
  height: 25px;
  width: 25px;
  background: -moz-linear-gradient(45deg, rgba(170,49,242,1) 0%, rgba(130,103,252,1) 100%); /* ff3.6+ */
  cursor: pointer; border:2px solid #a8aafc;box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
input[type=range]:focus::-ms-fill-lower {
  background: #f1f1f1;
}
input[type=range]:focus::-ms-fill-upper {
  background: #f1f1f1;
}


/***********************Switch Energy*************************************/
.usgage_box{ float: left; width:100%;}
.usage_select{padding:6px 0px !important; border:none!important; border-bottom:1px solid #d0d0d0 !important; border-radius:0;
background:url(../img/switchicon/blue-drop-down.svg) right center no-repeat !important; background-size:22px auto !important
}
.notification_txt{ color:#7579ff; text-align:center; line-height:28px; width:100%; font-size:20px;margin-bottom:15px; font-weight:400;}
.notifi_tbg{margin:30px 0px;}
.dark_heading {font-size:40px; padding-top:25px;}
.gap_icon{ margin:30px 0px 20px 0px;}
.gap_icon img{ height:150px!important;}
.main_card_box .gas_card{height:335px;}

.main_card_box .two{ display:none;}
.main_card_box:hover .one{ display:none;}
.main_card_box:hover .two{ display:block;}

/*****************Hover box******************/
.two {border:5px solid #62c6f2!important;}
.two{position:relative;}
.two .gap_icon{ margin:10px 0px;}
.two .gap_icon img{ height:100px!important;}
.two .dark_heading{ padding: 25px 0px !important;}
.two p{ font-size:18px; line-height:26px;}
.click-select{ position: absolute; width:100%; bottom:0; background:#62c6f2; text-align:center; left:0px;}
.click-select a{color:#fff; font-size:18px; padding:12px 0px; width:100%; font-weight:500; float:left;}
.main_card_box{position:relative;}
/*---------------*/
/***** Sadie *****/
/*---------------*/

figure.effect-sadie figcaption::before {
	position: absolute;	top: 0;	left: 0;width: 100%;content: '';opacity: 0;	-webkit-transform: translate3d(0,50%,0);transform: translate3d(0,50%,0);}

.main_card_box .gas_card{margin-bottom:0px !important;}
figure.effect-sadie .gas_box_icon {	position: absolute;	top: 28%;left: 0;width: 100%;color: #484c61;-webkit-transition: -webkit-transform 0.35s, color 0.35s;
	transition: transform 0.35s, color 0.35s;-webkit-transform: translate3d(0,-50%,0);transform: translate3d(0,-50%,0);}
figure.effect-sadie .content {position: absolute;top: 73%;left: 0;width: 100%;color: #484c61;-webkit-transition: -webkit-transform 0.35s, color 0.35s;
	transition: transform 0.35s, color 0.35s;-webkit-transform: translate3d(0,-50%,0);transform: translate3d(0,-50%,0);}
figure.effect-sadie figcaption::before,
figure.effect-sadie p {-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;	transition: opacity 0.35s, transform 0.35s;}
figure.effect-sadie p {	position: absolute; color:#666; font-weight:400;bottom: 0;left: 0;padding: 0 30px;	width: 100%; opacity: 0;-webkit-transform: translate3d(0,10px,0);transform: translate3d(0,10px,0);}
figure.effect-sadie:hover .gas_box_icon {color: #fff;-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);transform: translate3d(0,-50%,0) translate3d(0,-40px,0); }
figure.effect-sadie:hover .gas_box_icon img {color: #fff;-webkit-transform: translate3d(0,20%,0) translate3d(0,-40px,0);transform: translate3d(0,20%,0) translate3d(0,-40px,0); width:70px}
figure.effect-sadie:hover .gas_box_text {font-size:30px;-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);transform: translate3d(0,-50%,0) translate3d(0,-40px,0);}
figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0); bottom:75px; font-size: 18px;line-height: 26px;background:none;}
figure.effect-sadie:hover .gas_card{border:2px solid #7579ff;}
.effect-sadie:hover{background:none!important;}
.middle-right-diamond { pointer-events: none;  position: absolute; top: 50%; right: 0%; width: 38vw;  height: auto; transform: translateY(-50%);   z-index: -1;
}
@media screen and (min-width:768px){
.middle-right-diamond {pointer-events: none;position: absolute;top: 71%;right: 0%;width: 44vw;height: auto;transform: translateY(-73.5%);z-index: -1;}
/*.topbar{background-position: right -70px;}*/


}

.features-losange{  pointer-events:none;   position:absolute;     top:62%;  right:0px; width:100vw; }
@media screen and (min-width:768px){
    .features-losange{  opacity:1; -webkit-transform:translateY(-40%);  transform:translateY(-40%);  -webkit-animation:features-shape .8s 1s forwards cubic-bezier(.86,0,.07,1);  animation:features-shape .8s 1s forwards cubic-bezier(.86,0,.07,1);   }}
@media screen and (max-width:768px){
    .features-losange{ width:200%;  height:auto; right:50%;  max-width:800px; margin-right:0;margin-left:-60px; -webkit-transform:translateY(-35%);
        transform:translateY(-35%)  }
}
@media screen and (max-width:450px){
	.features-losange{ right:auto; left:-100%
    }
}
.right_owel1{position:relative;  float:left; width:100%;}
.small-boiler-h{font-size:16px;}
.col-phone-icon{ float:left; width:30%}
.col-phone-icon .material-icons{ color:#a535f2; font-size: 120px; width:120px; line-height:150px; padding: 38px 0px 45px;}
.col-icon-detail{float: right;  width:65%; padding-top:92px; text-align:left;}
.col-icon-detail a{ color:#9598ff; font-size:47px; font-weight:400;}
.col-icon-detail  p{ color:#aaa; font-size:25px; line-height: 30px; padding-top:18px;}
.back_step .material-icons img{height:60px; width:60px;}
.click_select_edit{  color:#fff; background: url(../images/spanBtn.png)top left repeat-x; width:100%; text-align:center; padding:20px 0px; opacity:0; position:absolute; bottom:0px; left:0px; font-weight:400; border-radius:0px 0px 5px 5px}
.click_select_edit:hover{opacity:1;}
.effect-sadie:hover .click_select_edit{opacity:1;}
.small-txt{width:100%; font-size:20px; float:left;}
.card-tariff{ float:left; width:100%; padding:30px 0px;}
.card-tariff h4{color:#62c6f2; font-size:20px; font-weight:400; line-height:30px;}
.card-tariff ul{width:100%; float:left; margin:0px 0px 0px 0px; padding:0px;}
.card-tariff ul li{ list-style:none; padding:15px 0px 15px 0px; margin:10px 0px; border-bottom:1px solid #f2f2f2; font-size:17px;}
.card-tariff ul li:last-child{border-bottom:none;}
.card-tariff .btn-round{border-radius:30px;}
.switch-me{ float:left; width:100%; padding:0px 0px 20px;}
.switch-me h3{color:#62c6f2; font-size:26px; font-weight:500; line-height:30px;}
.price_switch{color:#666; font-size:34px; font-weight:500; line-height:30px; width:100%; float:left; margin:10px 0px;}
.price_switch_plan {color:#222; font-size:18px; font-weight:500; line-height:30px; width:100%; float:left; margin:5px 0px;}
.table_model{ width:100%; float:left;}
.table_model tr td{ width:50%; float: left; padding: 6px 0px; font-size:14px; }
.table_model tr td:first-child{font-weight:500;}
.model-heading{margin:15px 0px; float:left;}

/******************** Inner Page****************/
.bolier_home-h-l{font-size:55px; line-height:60px; color:#fff; float:left; width:100%; margin:55px 0px 5px 0px; }
.bolier_home-h-s{font-size:25px; line-height:30px; color:#fff; float:left; width:100%;  }
.boiler_header-h{float:left; width:100%; padding-bottom:300px;}
.breadcrumbs{ float:left; width:100%;  height:600px; background:url(../img/boiler-header.svg) left top no-repeat; background-size:cover; margin-top:-100px; }
.rounder-top-bg{background: url(../img/bluetopovel.svg)bottom center no-repeat; float:left; width:100%; padding:0px 0px 110px; background-size:cover; min-height:210px;}
.three-care-b{width:100%; }
.boiler-care img{border-radius:50%;}
.boiler-care h3{font-size:35px; color:#000; font-weight: bold; margin:35px 0px 20px;} 
.boiler-care p{font-size:25px; color:#666; } 
.get-care{ background:#84b727!important; border-radius:30px; font-size: 16px !important;padding: 10px 30px !important; margin-top:25px;}
.blue-annual{  margin:10px 0px; float:left; width:100%;  }
.annaul_bottom_bg_top{background:url(../img/topbgannual.svg) top left no-repeat; width:100%;  min-height:360px; float:left; background-size:cover;}
.annaul_bg_box{ background:#62c6f2; padding:5px 0px 0px; float:left; width:100%; padding-bottom:50px; margin:-16px 0px;}
.annaul_bg_box h3{ color:#fff; font-size:45px; line-height:55px; font-weight:400;}
.annaul_bg_box p{ color:#fff; font-size:32px; line-height:30px; margin-top:40px; line-height:42px;}
.responsive{width:100%; height:auto;}
.annaul_bg_box img{border-radius:50%;}
.annaul_bottom_bg{width:100%; background:url(../img/bottom-annual-fix.svg) top left no-repeat;  float:left; min-height:360px; background-size:cover; margin-top:-1px;}
.eversmart-step{background:#62c6f2;  float: left; padding:20px 0px 0px 0px; width:100%; border-radius: 8px 8px 0px 0px;} 
.eversmart-step h5{ color:#fff;}
.pt0{padding-top:0!important;}
.ever_rounded_p{background:#fff; height:130px; width:130px; border-radius:50%; padding:10px; margin-top:15px;}
.a-start{ width:100%; color:#666; float:left; padding-top:10px;}
.a-price{ color:#62c6f2; padding-top:20px; width:100%; float:left; font-size:18px; }
.b-price-a{font-weight:500; font-size:55px; }
.pound{font-weight:400; font-size:22px; float:left; margin-right:-1px;}
.month-a{float:right}
.annual-h-b{font-size:40px; line-height:50px; float:left; width:100%; margin-bottom:50px; }
.step-ev-box li{padding:8px 0px!important; margin:5px 0px!important; color:#666}
.annual_price .card-tariff{min-height:585px !important; position:relative;}
.annual_price .card-tariff a{position:absolute; bottom:15px; width:54%; left:55px;}
.annual-p-t{font-size:30px; margin-bottom:60px; float:left; width:100%; line-height:42px;}
.ever_reapir {width:100%;   float:left;  }
.ever_bottom_bg_top{ background:url(../img/btop.svg) top left no-repeat; width:100%;  min-height:360px; float:left; background-size:cover;}
.ever_bottom_bg{width:100%; background:url(../img/bbottom.svg) top left no-repeat;  float:left; min-height:360px; background-size:cover; margin-top:12px;}
#ever_bottom_bg_new{width:100%; background:url(../img/bbottomnew.svg) top left no-repeat;}
.annaul_bg_box2{ background:#62c6f2;  float:left; width:100%; padding-bottom:57px; margin:-16px 0px;}
.annaul_bg_box2 h3{ color:#fff; font-size:45px; line-height:55px; font-weight:400;}
.annaul_bg_box2 p{ color:#fff; font-size:32px; line-height:30px; margin-top:40px; line-height:42px;}
.r-step-h{font-size:30px; font-weight:bold; color:#fff; float:left; width:100%; margin:20px 0px;}
.r-step-m-h{ color:#fff; font-size:25px; line-height:30px;  line-height:42px; float:left; width:100%;}
.r-step-m-triff{font-size:18px !important;  line-height:24px !important; margin-top:10px!important; float:left; width:100%; }
.grey_txt{color:#666!important;}
.b-replace-h{float:left; width:100%; margin-bottom:70px; font-size:55px;}
.b-replace-box p{line-height:30px; color:#000;}
.b-replace-detail{font-size:19px; color:#666; line-height:24px; width:100%; text-align:center; float:left; margin-top:30px;}
#gap0{margin:0px;}
#swi-me{padding:12px 45px !important; font-weight:500;}
.boiler_replacemen_img_left{   width:710px; float:left; position:relative; height:420px; }
.boiler_replacemen_img_left img{width: 102%;  position: absolute;  left: -93px;   top: -332px;}

/*.boiler_replacemen_img_left{  position:absolute; width:100%; float:left;  background:url(../img/boiler-replace.png) left top repeat; background-size:cover; width:100%; min-height:700px; top: -332px; left:-17%;}*/

.pos-relative{position:relative;}
#ever_reapir_re{ background:url(../img/fullblue1.png) top left no-repeat !important; background-size:cover!important;  min-height:750px; overflow:hidden}

.gap-left-box{width:100%; float:right; margin-right:120px; margin-top:-20px;}
.gap-left-box h3{color:#fff; font-size:45px; line-height:55px;}
.gap-left-box p{color:#fff; font-size:30px; line-height:45px; margin-top:40px;}
#b-offers-main .offer-main-h{ font-size: 55px; line-height:70px;}
#b-offers-main{margin:-180px 0px 0px; float:left;}
.offer-main-d{font-size:34px; color:#000; line-height:40px; margin:30px 0px;}
.boiler-b-p{ float:left; margin-top:30px; padding:0px;}
.boiler-b-p li{color:#fff; font-size:28px; float:left; margin:14px 0px; width:100%; list-style:none; background:url(../img/face-point.svg) left top no-repeat; padding-left:60px; line-height:40px; background-size:40px auto;}
#blue-annual-box-gap{ margin-top:-120px;}
#annaul-price-box-gap{margin-top:-50px; float:left; width:100%; }
#ever_reapir_gap{margin-top:-30px;}
#blue-annual-box-gap h3{ margin-top:40px;}
.termandconditions{ float:left; width:100%; background:url(../images/footer-round-fix.png) left bottom no-repeat;  background-size:contain; padding-bottom:200px; }
.term-c-h{font-weight:bold; font-size:22px; width:100%; float:left; margin:10px 0px 20px; line-height:32px;}
.term-c-p{ font-size:17px; line-height:26px; color:#666; font-weight:400; margin:20px 0px; }
.term-c-p-italic { font-size:25px; line-height:36px; font-style: italic; padding-bottom:50px;}
/********************Contact Page***************/

.rounder-red-bg{background: url(../img/redtop.svg)bottom center no-repeat; float:left; width:100%; padding:0px 0px 150px; background-size:cover; margin-top:-36px}
#red_bg {background: #ea495c;}
#cs_image {background:url(../img/cs_bg3.svg) left top no-repeat; min-height: 650px;	background-size:cover; height:100%;}
#cs_image .rounder-red-bg{margin-top:0px;}
.cs_sw_detail {float: left;padding: 20px 30px;border: 3px solid #62C6F2;border-radius: 15px;margin-bottom: 50px;}
.cs_sw_detail h2{color: #62C6F2;font-size: 50px;font-weight: 400;}
.cs_sw_detail p{color: #8F8F8F;	font-size: 28px;	line-height: 38px;}
.cs_cp_detail {	float: left;	width: 100%;	padding: 20px 30px;	border: 3px solid #ea495c;	border-radius: 15px;min-height: 402px;}
.cs_cp_detail h2{color: #ea495c; font-weight: 400; padding:20px 0px;}
.cs_cp_detail p{color: #8F8F8F;	font-size: 18px;line-height: 28px;}
.cs_hs_detail {  float: left;   width: 100%;padding: 20px 30px;border: 3px solid #ea495c;border-radius: 15px;}
.cs_hs_detail h2{color: #ea495c;  font-weight: 400; padding:20px 0px;}
.cs_hs_detail p{color: #8F8F8F;	font-size: 18px;line-height: 28px;}
#cs_hs_btn {background: #ea495c !important;	border-radius: 30px;font-size: 22px;padding: 10px 50px;margin: 30px 0px; text-transform: lowercase;}
#cs_sw_btn {background: #62C6F2 !important;	border-radius: 30px;font-size: 22px;padding: 10px 50px;margin: 30px 0px; text-transform: lowercase;}
.cs_formarea {width: 100%;margin-top: 100px !important;}
.cs_fa_head {float: left;width: 100%;margin-bottom: 40px;}
.cs_formarea h1 {float: left;width: 100%;}
.cs_form {float: left;width: 100%;padding: 70px;}
.cs_con_detail i.material-icons {color:#62C6F2;	width: 70px;line-height: 40px; font-size:45px;}
.cs_con_detail li {float: left;	width: 100%;list-style: none;margin-bottom: 30px;}
.cs_main_heading {font-size: 25px;float: left;	width: 100%;margin-bottom: 10px;}
.cs_address {font-size: 12px;color: #6E6D6D;}
.cs_con_detail {padding: 30px;margin: 0;}
.box-cs{float:left;width:80%}
.box-cs-left{float:left;width:20%}
.box-cs a{font-size: 12px;}
#social_cs{	margin: 0px; padding:0px 0px 40px 0px;}
#cs_card{margin-top: 30px;}
#cs_form_sub_btn {background: #ea495c !important;}
.terms-c-box h2{font-weight:bold; margin:60px 0px;}
.terms-c-box h4{font-weight:bold; margin:20px 0px;}
.term-c-p a{ color:#666;}
#ever_busi-h{font-size:40px; font-weight:400; line-height:60px;}
.box-cs a{color:#666;}
/********************FAQ Page***************/

.rounder-red-bg{background: url(../img/redtop.svg)bottom center no-repeat; float:left; width:100%; padding:0px 0px 150px; background-size:cover; margin-top:-36px; min-height:210px;}
#faq_image { background:url(../img/faqimage.jpg) left top no-repeat; min-height: 550px;	background-size:cover; height:100%;}
#our-tariff { background:url(../img/our-tariff.png) left top no-repeat; min-height: 650px;	background-size:cover; height:100%;}
.cft_heading {float: left;width: 100%;color: #ea495c; font-weight:400;}
.faq_head {	float: left;	width: 100%;margin: 20px 0px 70px; font-size:18px; line-height:30px; color:#666; }
#faq .gas_box_text{color:#ea495c!important; font-size:26px!important; line-height:32px;}
#faq .click_select_edit {background:#ea495c!important;}
#faq figure.effect-sadie:hover .gas_card{border: 2px solid #ea495c!important;}
#faq .gas_card{height:270px!important;}
#faq figure.effect-sadie .content{top:82%;}
#faq .gap_icon img{height:110px!important;}

.accordion .card-header:after {
    font-family: 'FontAwesome';  
	content: "\f0de";
   
    float: right; color: #ea495c; font-weight:bold; font-size:40px; margin-top:-5px;
}
.accordion .card-header.collapsed:after {
    /* symbol for "collapsed" panels */
     content: "\f0dd"; color: #ea495c;font-weight:bold; font-size:40px; margin-top:-5px;
}

#accordion .card-header{margin:20px 0px; border-radius:14px; padding:28px 30px !important; background:#f1f1f1; box-shadow: 3px 3px 3px #f3f3f3;}
#accordion .card-title{ color: #ea495c; font-size:24px; font-weight:500; }
.career-download{float:left; width:100%;}

.career-page {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.career-page .content-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.career-page:hover .content-overlay{
  opacity: 1;
}

.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.career-page:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom{
  top: 80%;
}

.fadeIn-top{
  top: 20%;
}

.fadeIn-left{
  left: 20%;
}

.white-btn{ background:#fff!important; color:#f64d75!important; padding:8px 23px; font-weight:500;}
.section-easy-steps{ background: url(../images/step-top.png) #f5f9fc left top no-repeat; background-size:contain; padding-top:220px;}
.cd-section{float:left; width:100%;  background: #f5f9fc; min-height:540px;}
.energy-bottom-round{background: url(../images/PostcodeSectionbottom.png) bottom left no-repeat; float:left; width:100%; min-height:150px; background-size:contain;}
.cd-section-grey{  float:left; width:100%;  }
.p-code-new{float:left; width:100%; background:#fff; padding:5px 5px 0px 20px; border-radius:40px; margin-top:30px;}
#form5{width:100%; padding-left:0px;}
.main-rounded-red-header{      background: -moz-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(252,84,98,1)), color-stop(100%, rgba(240,70,137,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* ie10+ */
    background: linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f04689', endColorstr='#fc5462',GradientType=1 ); /* ie6-9 */ 
	float:left; width:100%;}
.cs_switching{float:left; width:100%; margin-top:10px; background: url(../images/cd-section-bottom.png) #f5f9fc bottom left no-repeat;
    background-size: auto auto;background-size: contain; padding-bottom:200px;}
	
	.red-rounded-wave{ background:url(../images/red-round.png)  left bottom  no-repeat; background-size:contain; float:left; width:100%; }
	
	
	
/******************NEw Css******************/
.boiler-page-shape{     background: -moz-linear-gradient(45deg, rgba(170,49,242,1) 0%, rgba(130,103,252,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(170,49,242,1)), color-stop(100%, rgba(130,103,252,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(45deg, rgba(170,49,242,1) 0%, rgba(130,103,252,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(45deg, rgba(170,49,242,1) 0%, rgba(130,103,252,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(170,49,242,1) 0%, rgba(130,103,252,1) 100%); /* ie10+ */
    background: linear-gradient(45deg, rgba(170,49,242,1) 0%, rgba(130,103,252,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8267fc', endColorstr='#aa31f2',GradientType=1 ); /* ie6-9 */  float:left; width:100%;}
	
.sky-blue-bg{ background:#f5f9fc;}
#footer-blue{ background:url(../images/footer-blue.png) #fff left bottom no-repeat; margin-top:0px; padding-top:0px; min-height:505px; background-size:contain;}
.main-bottom-round{ background:url(../images/footertop.svg) #fff left bottom no-repeat; float:left; width:100%; background-size:contain; padding-bottom:120px; }
.back_step img{ background:#fff; width:50px; height:50px; border-radius:50%; padding:17px 19px 18px 15px;}
.step-four-text{font-size:27px!important;}
#js-amount-range{padding-top:26px;}
.gridiant-btn{background: -moz-linear-gradient(45deg, rgba(170,49,242,1) 0%, rgba(130,103,252,1) 100%)!important; /* ff3.6+ */}

/*******************Registration Form**************************/

#registraion-form label { color: #AAAAAA;padding: 0px 0px}
.required-field{color:red;}
.required-field-option{font-size:12px;}
#red-arrow{background:url(../images/registor/red-arrow-select.svg) right center no-repeat !important; color:#aaa;}
.registration-page-heading{ color:#ea485c; font-size:30px; width:100%; text-align:center; line-height:40px; margin-bottom:30px; }
.registration-page-heading span{font-size:18px;}
.red-btn{   background: -moz-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(252,84,98,1)), color-stop(100%, rgba(240,70,137,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* ie10+ */
    background: linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f04689', endColorstr='#fc5462',GradientType=1 ); /* ie6-9 */ }

/*********************Energy Switch***************/
.registration-page-heading-energy{ font-size: 22px; line-height:32px; text-align:center; float:left; width:100%; padding-bottom:50px;}
.read-direct{font-size:12px; float:left; width:100%; text-align:center; padding-bottom:20px;}
.registration-page-heading-energy-H{ font-size: 32px; line-height:42px; text-align:center; float:left; width:100%; font-weight:400; }
.registration-page-energy-p{color:#ea495c; font-weight:500; font-size:60px; float:left; width:100%; text-align:center; margin:27px 0px}
.registration-page-energy-d{color:#aaa;  font-size:12px; float:left; width:100%; text-align:center; margin:15px 0px} 
.btn-round{border-radius:30px;}


/******************************Energy Quote**************************/

.inner-card{ float:left; width:100%; text-align:center; padding:40px 0px;}
.quote-heading{float:left; width:100%; text-align:center; padding:20px 0px 30px; color:#fff; font-size:30px; font-weight:400;}
.registration-page-heading-energy-q{ font-size: 40px; line-height:56px; text-align:center; float:left; width:100%; font-weight:400; color:#ea495c; }
.registration-page-energy-q{ font-weight:400; font-size:36px; float:left; width:100%; text-align:center; margin:27px 0px; color:#999;}
.small-price-txt{font-size:20px;}
.posi-rele{position:relative;}
.green-txt-quote{color:#20c900!important; }
.brown-txt-quote{ color:#ea495c; font-weight:500; line-height:36px;}
.bill-plan-q{float:left; width:100%; color:#979797;}
.bill-plan-q span{border-bottom:1px solid #979797; line-height:40px; font-size:30px;}
.quote-bill-plan-p{float:left; width:100%; margin:40px 0px 60px; }
.quote-bill-plan-p li{ background:url(../images/bill-point.svg) left top no-repeat; padding-left: 50px; margin:10px 0px; list-style:none; width:100%; float:left;}
#bill-plan-table .eversmart-step{ background:none;}
#bill-plan-table .ever_rounded_p{background:#ea495c;}
#bill-plan-table .a-price{ padding-top:47px; color:#fff; }
.plan-home-care{color:#000; font-size:22px; font-weight:400;  margin-bottom:20px; float:left; width:100%;}
.plan-home-care span{ border-bottom:1px solid #d8d8d8;}
#bill-plan-table .card-tariff{height:415px; border:2px solid #fff;border-radius:39px;}
#bill-plan-table .card-tariff .b-price-a{font-size:28px!important;}
#bill-plan-table .card-raised2{position:relative;}
.buy-now-bill{position:absolute; bottom:0;   left:0; width:100%; opacity:0;}
.buy-now-bill a{ float:left; width:100%; color:#fff; padding:15px 0px; border-radius: 0 0 39px 39px;  }
#bill-plan-table .card-tariff:hover .buy-now-bill {opacity:1}
#bill-plan-table .card-tariff:hover{ border:2px solid #ff5857}
#bill-tab:hover .buy-now-bill {opacity:1}


/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 60px auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

.confirm-pay{font-size:16px!important; color:#3d3e3e!important; line-height:28px!important; padding-top:20px!important}
/*********************Login Page****************/
.red-rounded-wave-login{ background: url(../images/login-shape-bg.png) center bottom no-repeat; float:left; width:100%;}
.loginheading{color:#ea485c; font-weight:bold;font-size:35px; text-align:center; margin:30px 0px 20px; text-align:center; float:left; width:100%;}
.login-form{float:left; width:100%;}
#login-section .card-body{ padding:45px 60px; float: left;width: 100%;}
#login-section .card{border-radius:20px;}
#login-section .md-form{ margin:40px 0px;}
.forgot-password{ text-align:right; width:100%; float:left;}
.forgot-password a{color:#000;  font-size:16px; }
.rounded-login-btn{ border-radius: 30px!important; padding:10px 90px!important; font-size:20px!important; margin-top:50px;}

.main-inner-round-fotter{   background: url(../images/footertop.svg) left top no-repeat; padding:150px 0px 150px;  float:left; width:100%; background-size:contain;}
.mtop150{margin-top:150px}
.mtop100{margin-top:100px}


/***********************************Energy Switch ********************/

#rounder-b-energy{border-radius: 50px;border: 1px solid #e5e5e5;  margin:20px;}
#form-postcode{padding-left:0; border:0;}
#p-s-code{margin-top:8px; width:68%;}
#redd-btn-pc{font-size: 16px;font-weight: 500;padding: 18px 30px;margin-top: -3px;border-radius: 33px;  background: -moz-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(252,84,98,1)), color-stop(100%, rgba(240,70,137,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* ie10+ */
    background: linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f04689', endColorstr='#fc5462',GradientType=1 ); /* ie6-9 */ }
	
#p-s-code label{padding-left:10px}
#background-none{background:none!important;}
.footer-top-sky-rounded{background: url(../images/footertop.svg) left top no-repeat; height:200px;  float:left; width:100%; background-size:contain;}
#form-postcode{margin-left: 10px;line-height: 41px;   padding-left: 0px;margin-top: -6px;padding-left: 5px; background:none; font-size:24px; color:#000;text-transform: uppercase;}
#form-postcode::placeholder {font-size:24px; color:#aeaeae;   opacity: 1; /* Firefox */}
#red-txt-efect .gas_box_text{color:#f74f71!important;}
#red-txt-efect .click_select_edit{
	
	background: -moz-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%)!important; /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(252,84,98,1)), color-stop(100%, rgba(240,70,137,1)))!important; /* safari4+,chrome */
    background: -webkit-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%)!important; /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%)!important; /* opera 11.10+ */
    background: -ms-linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%)!important; /* ie10+ */
    background: linear-gradient(45deg, rgba(252,84,98,1) 0%, rgba(240,70,137,1) 100%)!important; /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f04689', endColorstr='#fc5462',GradientType=1 )!important; /* ie6-9 */ 
	
	
	
}
.effect-sadie{height:330px;}
#red-txt-efect figure.effect-sadie:hover .gas_card {    border: 2px solid #f74f71 !important;}
.red-txt-energy{color:#ee4392!important;}
#quotation_address{font-size:18px;}
#small-lower-text li a{ text-transform:lowercase;}

#gas_box_text_red a{color:#ee4392!important; font-size:16px; font-weight:500;}
.grey-energy-text{color:#c0c1c1;}

/***********************************Payment********************/
#pay-process .registration-page-heading-energy-H{ padding:30px 0px 0px; font-size:40px; line-height:50px;}
#pay-process .registration-page-energy-p{padding-bottom:30px; font-size:50px; line-height:60px; font-weight:bold;}
.pd0{padding:0!important;}
.left-tab-side{ background:#f5f9fc; float:left; padding:85px 0px 0px; width:100%; border-radius:39px 0px 0px 39px;}
.left-tab-side ul li{width:100%; float:left; padding:10px 0px;}
.left-tab-side ul li a{font-size:22px; width:100%; text-align:center; color:#aaa; float:left; padding:20px 0px;}
.left-tab-side .show{background:#fff!important; color:#000!important}
.left-tab-side .nav-tabs{border-bottom:none!important}
#tab-data-box{width:90%;}
.secure-pay-strip{float:left; width:100%; padding:114px 0px 50px; text-align:center }
.secure-pay-strip img{width:50%; opacity:.4;}
#tab-data-box .red-btn{font-size: 18px;padding: 10px 74px;text-transform: capitalize;margin-top: 64px;}
#tab-data-box .registration-page-heading-energy{padding:15px 0px!important;}

.range-slider-red{margin-top:25px!important;}
.range-slider-red::-moz-range-track {background:#ea495c!important; }
.range-slider-red::-webkit-slider-thumb { -webkit-appearance: none; background:green!important;}
.box-type-range{border-bottom: 3px solid #ea495c!important; color:#ea495c!important; }
.benefit-step{font-size:20px; padding-top:20px;}
#form-postcode:focus{box-shadow:none!important;}
.red-elect-txt a{color:#ea495c!important;}

.blue-landing-btn{
background: rgba(0,241,254,1);
background: -moz-linear-gradient(top, rgba(0,241,254,1) 0%, rgba(79,172,254,1) 99%, rgba(79,172,254,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,241,254,1)), color-stop(99%, rgba(79,172,254,1)), color-stop(100%, rgba(79,172,254,1)));
background: -webkit-linear-gradient(top, rgba(0,241,254,1) 0%, rgba(79,172,254,1) 99%, rgba(79,172,254,1) 100%);
background: -o-linear-gradient(top, rgba(0,241,254,1) 0%, rgba(79,172,254,1) 99%, rgba(79,172,254,1) 100%);
background: -ms-linear-gradient(top, rgba(0,241,254,1) 0%, rgba(79,172,254,1) 99%, rgba(79,172,254,1) 100%);
background: linear-gradient(to bottom, rgba(0,241,254,1) 0%, rgba(79,172,254,1) 99%, rgba(79,172,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f1fe', endColorstr='#4facfe', GradientType=0 );
}

/*******************************Quote page.css*******************/

.summer-quote {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; background:#c2c2c2!important; border-radius:20px; color:#fff!important;
}

/* Hide the browser's default radio button */
.summer-quote input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark-new {
    position: absolute;
    top: 0;
    left: 0;
   
    width: 100%;
  
    border-radius: 20px;
}

/* On mouse-over, add a grey background color */
.summer-quote:hover input ~ .checkmark-new {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.summer-quote input:checked ~ .checkmark-new {
    background-color: #ea495c!important;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-new:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.summer-quote input:checked ~ .checkmark-new:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.summer-quote .checkmark-new:after {
  left: 9px;
    top: 13px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.quote-choose{float:left; width:100%;}
.quote-choose li{float:left; width:30%; margin:0px 3px!important; padding-left:10px!important; border:none!important;}
.choose-excess-quote{color:#c2c2c2; font-size:16px; width:100%; float:left; }
/************************end Quote Css*******************/