/* 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;}
strong{font-weight:bold}
section{ clear:both; margin:50px 0px;}

/********************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;}
.topbar{background: url(../img/landingpage/Header.svg) right top no-repeat; 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 {}

.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:30px 0px 0px 0px;}
.inner_footer{ float:left; width:100%; padding:50px 0px 30px 0px; border-bottom:1px solid #b4b4b4;}
.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:40px 0px; float:left; width:100%}
.social-footer .fa{font-size:35px;}
.social-footer a{padding:0px 10px; margin:0px;}

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

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

.btn.btn-twitter.btn-simple, .navbar .navbar-nav > li > a.btn.btn-twitter.btn-simple {
    color: #55acee!important;
    background-color: transparent;
    box-shadow: none;
}
.copyright{float:left; width:100%; color:#777; font-size:11px; margin-bottom:20px;}


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

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

.page-header {margin-top: -100px; float:left; width:100%;}
.page-header .brand {margin-top: 140px;}
.page-header .brand .title { font-size: 4.5em;}
.page-header .brand .hook {  font-size: 2.1em; margin-bottom: 25px;}
.btn.btn-eversmart { background-color: #62c6f2!important; border-radius:25px;}
.phone { position: relative;}
.phone video {  z-index: 9999;   position: absolute;  left: -27%;  top: 29%;  transform: rotate(90deg); width: 154%;}
.phone img {  width: 100%;}
/*.right_owel{float:left; width:100%; background:url(../img/landingpage/ovel.svg) 800px top no-repeat; background-size:  auto 1242px;}**/

.right_owel{float:left; width:100%; background:url(../img/landingpage/ovelsection1newfix.png) right top no-repeat;}

@media (min-width: 2000px) {
	

	.right_owel{float:left; width:100%; background:url(../img/landingpage/ovel.svg) 1150px  200px no-repeat; background-size:  auto 970px;}
}
@media (min-width: 1600px) {
	

	.right_owel{float:left; width:100%; background:url(../img/landingpage/ovel.svg) 1150px  200px no-repeat; background-size:  auto 970px;}
}

@media (min-width: 2100px) {


	.right_owel{float:left; width:100%; background:url(../img/landingpage/ovel.svg) 1450px  top no-repeat; background-size:  auto 1208px;}
}

/***************************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 .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:66px; padding:20px 0px;   margin-right: 20px;
    color:#62c6f2;}
 .info-title { font-size: 20px; color:#000; 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:#aaaaaa}
 .section-why-switch .phone-container { position: relative; margin-top: 50px;}

	.section-why-switch{margin:50px 0px; padding:50px 0px;}

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

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

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

*************************************************************************/
.card {display: inline-block; position: relative; width: 100%; margin-bottom: 30px;border-radius: 6px; 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);}
.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:#5bc0de; font-size: 4.4em;}
.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:#5cb85c; font-size: 4.4em;}
.rose .material-icons{color:#f64051; font-size: 4.4em;}
.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;}
.inner_six{ background: url(../img/landingpage/parallextop.png)top center no-repeat; float:left; width:100%; padding:200px 0px 100px; 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;}
/***************************end Section four***************************

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

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

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

.three_bottom{ float:left; width:100%;}
.three_box_section{float:left; width:100%;  background: url(../img/landingpage/middleround.svg) top center no-repeat; padding:50px 0px 90px 0px; background-size:cover;}
.boxCenterImg img { width: 70%!important; height:auto;}
.three_bottom h2{color:#fff; float:left; width:100%; margin-bottom:70px;}


/***************************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: 60px;
    }
}
 @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{background:#61c5f1;  float:left; width:100% }
.postcode_box{ background: url(../img/parallexbottom.png)bottom center no-repeat; float:left; width:100%; padding:20px 0px 150px; 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: 36px;}
.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;}
	.gas_box_text a{ color:#61c5f1; 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: 12.8px;
  cursor: pointer;
  animate: 0.2s;

  background: #f1f1f1;


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

  height: 25px;
  width: 25px;
  border-radius: 50%; border:1px solid #62c6f2; 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: #62c6f2;
  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: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: #f1f1f1;
  border-radius: 25px;

}
input[type=range]::-moz-range-thumb {
border-radius:50%;
  height:25px;
  width: 25px;border:1px solid #62c6f2;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: #62c6f2;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  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: #62c6f2;
  cursor: pointer; border:1px solid #62c6f2;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:#62c6f2; text-align:center; line-height:28px; width:100%; font-size:20px;margin-bottom:15px; font-weight:400;}
.notifi_tbg{margin:30px 0px;}
.dark_heading a{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:340px;}

.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:#aaa;
	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:80px;
}

figure.effect-sadie:hover .gas_box_text {
	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 figcaption::before ,
figure.effect-sadie:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); bottom:70px; font-size: 18px;
line-height: 26px;background:none;
}


figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p.click-select {
	opacity: 1; padding:0px!important;
	-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0); bottom:-16px;  } 

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p.click-select a{
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);  background:#62c6f2;} 

figure.effect-sadie:hover .gas_card{border:2px solid #62c6f2}
.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;}*/
.section-why-switch {

    margin: 170px 0px 0px; float:left; width:100%;
    padding: 20px 0px 180px;

}
.right_owel1{margin-top:-60px;}
.page-header{ margin-bottom:20px;}

}

.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:#62c6f2; font-size: 120px; width:120px; line-height:150px; padding: 60px 0px 45px;}
.col-icon-detail{float: right;  width:65%; padding-top:92px; text-align:left;}
.col-icon-detail a{ color:#62c6f2; 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;}