/*------- Normalize --------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,menu,nav,section,time,mark,audio,video,details,summary{margin:0;padding:0;border:0;font-size:100%;font-weight:normal;vertical-align:baseline;background:transparent; font-family: 'Roboto', sans-serif; font-weight: normal; font-style: normal;} article,aside,figure,footer,header,nav,section,details,summary{display:block;} img,object,embed{max-width:100%;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;  text-decoration: none; } a:focus { outline: none; } del{text-decoration:line-through;} abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;} table{border-collapse:collapse;border-spacing:0;} th { vertical-align:bottom; } td { font-weight:normal;vertical-align:top; } hr{display:block;height:1px;border:0;margin:1em 0;padding:0;} input,select{vertical-align:middle;} pre{white-space:pre; /* CSS2 */white-space:pre-wrap; /* CSS 2.1 */white-space:pre-line; /* CSS 3 (and 2.1 as well, actually) */word-wrap:break-word; /* IE */} input[type="radio"]{vertical-align:text-bottom;} input[type="checkbox"]{vertical-align:bottom;} select,input,textarea{font:99% sans-serif;} table{font-size:inherit;} small{font-size:85%;} b,strong{ font-weight: 700;} td,td img{vertical-align:top;} sub,sup{font-size:75%;line-height:0;position:relative;} sup{top:-0.5em;} sub{bottom:-0.25em;} pre,code,kbd,samp{font-family:monospace,sans-serif;} input[type=button],input[type=submit],input[type=file],button{cursor:pointer;} i span,i,em{ font-style: italic; font-weight: 400; } button,input,select,textarea{margin:0;} /* make buttons play nice in IE */ button,input[type=button]{width:auto;overflow:visible;} button:focus, textarea:focus, input:focus{ outline: none; } /* let's clear some floats ================*/ .clearfix:before,.clearfix:after, .cf:before,.cf:after{content:"\0020";display:block;height:0;overflow:hidden;} .clearfix:after, .cf:after{clear:both;} .cf{zoom:1;} body{ font-family: 'Lato', sans-serif; font-weight: 400; font-weight: normal; background: #ffffff; color: rgba(0,0,0,0.7);} body,html { font-size: 16px; line-height: normal; }
* { outline: none !important; }
/* ~~~~~ Typography ~~~~~ */
h1, h2, h3, h4,h5,h6 { font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 700; padding: 0 0 10px 0; margin: 0; color: #151006; line-height: 1.2; color: #0F1548; }
h1 { font-size: 40px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
img { max-width: 100%; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: middle; height: auto; }
p { font-family: 'Roboto', sans-serif; font-weight: 400; font-style: normal; margin-top: 0; padding: 10px 0; font-size: 18px; line-height: 1.5; color: #0F1548; letter-spacing: 0px; }
/* ~~~~~ Input type ~~~~~ */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
/* ~~~~~ Input type ~~~~~ */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], input[type="date"], select, textarea {font-family: 'Roboto', sans-serif; font-weight: 400; width: 100%; font-size: 18px; padding: 13px 15px; border: 1px solid #cccccc; margin: 10px 0 16px 0; background-color: #ffffff; color: #0F1548; border-radius: 4px; box-shadow: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
input:focus{ border-color: #0F1548; -webkit-box-shadow: 0px 0px 0px 1px #0F1548; box-shadow: 0px 0px 0px 1px #0F1548; }
form button, input[type="submit"] { font-family: 'Roboto', sans-serif; font-weight: 700;
    font-style: normal; font-size: 22px; color: #ffffff; line-height: 1; background: #F99500; width: 100%; padding: 24px 60px; border: none; border-radius:6px; margin-top: 8px; border-radius: 4px; -webkit-border-radius: 4px;  -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; }
input[type="submit"]:focus{ box-shadow: none; }    
form button:hover, input[type="submit"]:hover { background-color: #151006; outline: none; border-color: #151005;  color: #fff; }
select { background-image: url(../images/select-arrow.svg); background-position: center right; background-repeat: no-repeat; background-size: 28px; padding-right: 25px !important; color: #151006; cursor: pointer; }
select:focus { outline: none; border-bottom-color: #ffd802; }
form button:focus, input[type="submit"]:focus {-webkit-box-shadow: 0px 0px 0px 2px rgba(245,197,10,0.5); -moz-box-shadow: 0px 0px 0px 2px rgba(245,197,10,0.5); box-shadow: 0px 0px 0px 2px rgba(245,197,10,0.5);}
input::-webkit-input-placeholder {  color: #0F1548; opacity: 1 !important; } input::-moz-placeholder 		 {  color: #0F1548; opacity: 1 !important; } input:-ms-input-placeholder 	 {  color: #0F1548; opacity: 1 !important; } input:-moz-placeholder 			 {  color: #0F1548; opacity: 1 !important; } textarea::-webkit-input-placeholder { color: #0F1548; opacity: 1 !important; } textarea::-moz-placeholder 		    { color: #0F1548; opacity: 1 !important; } textarea:-ms-input-placeholder 	    { color: #0F1548; opacity: 1 !important; } textarea:-moz-placeholder 			{ color: #0F1548; opacity: 1 !important; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height:auto;}
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
[type="search"]::-webkit-file-upload-button {-webkit-appearance:button; font:inherit;}
textarea{-webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: auto; }
.btn a, .btn a:hover, input[type="submit"]:hover, input[type="submit"] {-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.bold {font-family: 'Montserrat', sans-serif; font-weight: 700; font-style: normal; }
.text-center { text-align: center; }
a,a:hover {-webkit-transition: all 0.25s ease-in-out;  -moz-transition: all 0.25s ease-in-out;  -o-transition: all 0.25s ease-in-out;  -ms-transition: all 0.25s ease-in-out;  transition: all 0.25s ease-in-out;}
.cf:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
/* start commented backslash hack \*/
* html .cf { height: 1%; }
.cf { display: block; }
.color-white, .color-white h1, .color-white h2, .color-white h3, .color-white h4, .color-white h5, .color-white h6, .color-white span, .color-white a, .color-white strong, .color-white em { color: #ffffff; } /* ----- White Color ----- */
.color-white p,.color-white p strong,.color-white p span, .color-white p i, .color-white p em, .color-white p b, .color-white ul li, .color-white ul li span,.color-white ul li strong,.color-white ul li b, .color-white ul li i { color: rgba(255,255,255,1); }
input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], button{-webkit-appearance: none; -moz-appearance: none; appearance: none; }
ol li, ul li { padding: 0; padding-bottom: 5px; color: #0F1548; }
ul,ol { padding: 5px 0; margin-left: 20px; }
/* close commented backslash hack */
/* Change the white to any color ;) */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {-webkit-animation: autofill 0s forwards; animation: autofill 0s forwards; }
@keyframes autofill {100% {background: #ffffff; color: #ffffff; } }
@-webkit-keyframes autofill {100% {background: #ffffff; color: #ffffff; } }
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0; }
 /* Firefox */
input[type=number] {-moz-appearance: textfield; }
select::-ms-expand {display: none; }
a { color: #0F1548; }
a:hover { color: #F99500; }
/* Default Css Start Here
===================================================*/
.flex-box { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;  }
.wrapper{ position: relative; overflow: hidden; margin: 0 auto; width: 100%; }
.container { max-width: 1305px; margin: 0 auto; padding-left: 15px; padding-right: 15px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
.btn a { background-color: #F99500; color: #fff; display: inline-block; padding: 11px 25px; font-size: 22px; line-height: 1.3; border: none; border-radius: 4px; text-transform: uppercase; font-weight: 700; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.btn a:hover {background: #0F1548; }
/* Normal CSS */
.dark-blue { background-color: #0F1548; }
.blue-bg { background-color: #8FB0F9; }
.white-bg { background-color: #fff; }
.light-gray-bg { background-color: #f4f4f4; }
/* ----- Header ----- */
.min-header { padding-top: 2px; padding-bottom: 1px; }
/* ----- Header ----- */
/* ----- Title Section ----- */
.title-section { text-align: center; padding-top: 40px; padding-bottom: 32px; }
.title-section .container { max-width: 750px; }
/* ----- /Title Section ----- */
/* ----- Postcode  Section ----- */
.step-box { max-width: 419px; margin-left: auto; background: #ffffff; border-radius: 11px; padding: 23px 44px 23px 45px; width: 100%; }
.step-box input.invalid {transition: all 0s ease-in-out; background-image: url(../images/error.svg); background-position: 96% 50%; background-repeat: no-repeat; border-color: #B10000; -webkit-box-shadow: 0px 0px 0px 1px #B10000; box-shadow: 0px 0px 0px 1px #B10000; }
.step-box input.valid {transition: all 0s ease-in-out; background-image: url(../images/valid-icon.svg); background-position: 96% 50%; background-repeat: no-repeat; border-color: #009E19; -webkit-box-shadow: 0px 0px 0px 1px #009E19; box-shadow: 0px 0px 0px 1px #009E19; }
.step-section {background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 42px; padding-bottom: 64px; }
.step-section input { margin-top: 5px; font-size: 20px; padding: 12px 15px; margin-bottom: 5px; }
.submit-btn input,
.submit-btn button {font-size: 22px; padding: 14px; margin-top: 10px; }
.submit-btn input:disabled ,
.submit-btn button:disabled {background: #f6c57a !important; cursor: no-drop; }
.step-box h2 {font-size: 20px; color: #0F1548; font-weight: 500; padding-bottom: 0; }
.step-section .container { max-width: 975px;  }
/* ----- /Postcode  Section ----- */
/* ----- Logo Section ----- */
.logo-slider-section { padding: 26px 0 22px; position: relative; overflow: hidden; }
.logo-slider-section .slick-list { position: relative; overflow: visible; }
.logo-item { text-align: center; }
.logo-item img { display: block;margin: 0 auto; }
.logo-container.container { max-width: 88%; }
.logo-container .logo-item { outline: none; }
.slick-list.draggable { cursor: move; cursor: -webkit-grab; cursor: -moz-grab; }
/* ----- /Logo Section ----- */
/* ----- Company Section ----- */
.why-company-section .energy-company { text-align: center; padding-top: 30px; }
.energy-company h2 { padding-bottom: 13px; }
.energy-company ul { margin: 0 auto; display: inline-block; text-align: center; padding-right: 4px; list-style: none !important; list-style-type: none; }
.energy-company li { content: ''; position: relative; font-size: 18px; list-style: none; display: block; padding-left: 0px; padding-bottom: 2px; }
.energy-company li:before {content: '✓'; display: inline-block; vertical-align: top; position: relative; top: 0px; left: -7px; color: #fff; /*height: 5px; width: 5px; border-radius: 50%; background-color: #fff;*/ }
.why-company-section { padding-top: 15px; padding-bottom: 7px; }
.why-company-section .container { max-width: 975px; }
.col-6 { width: 50%; padding: 15px; }
.switch-wrap { background-color: #fff; border-radius: 11px; max-width: 419px; width: 100%; margin-left: auto; padding: 15px 40px; text-align: center; }
.switch-wrap h2 { padding-bottom: 0; margin-bottom: 0; }
.switch-wrap p { padding-top: 4px; line-height: 1.25; }
.switch-wrap .btn { margin-top: 4px; }
.switch-retailer { padding-right: 0; }
.switch-wrap .btn { padding: 0 5px; }
.switch-wrap .btn a { width: 100%; text-align: center; }
.energy-company { padding-right: 0; padding-left: 60px; }
/* ----- /Company Section ----- */
/* --- Footer --- */
.footer { padding-top: 35px; padding-bottom: 50px; text-align: center; }
.footer .container { max-width: 670px; }
.footer a, .footer p { font-size: 12px; line-height: 1.25; padding-bottom: 0; }
.footer-menu ul { margin: 0; }
.footer-menu li { display: inline-block; vertical-align: top; padding: 3px 11px; }
.footer-menu li a { font-weight: 700; }
.footer-menu li.active a, .footer-menu li a:hover { color: #F99500; }
.footer-logo { padding-bottom: 28px; }
.copyright-wrap p { padding-top: 5px; }
/* --- Footer --- */
.logo-item { display: inline-block; }
/*Blog page*/
.blog-slider { padding: 36px 0; }
.artical-wrapper .pagetitle h1 { text-align: center; }
.artical-wrapper .pagetitle { padding-bottom: 15px; }
.artical-wrapper .pagetitle,
.artical-section {width: 75.4%; }
.blog-right-section { width: 24.6%; }
.left-article-image { width: 27%; height: 252px; overflow: hidden; position: relative; border-radius: 11px; }
.right-artical-info { width: 73%; padding-left: 13px; padding-top: 8px; }
.blog-right-section .submit-btn input { font-size: 22px; }
.left-article-image a { height: 100%; width: 100%; display: block; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 13px; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.left-article-image a:hover { -webkit-transform: scale(1.1); transform: scale(1.1); }
.artical-wrap { padding: 15px; border-radius: 11px; }
.artical-wrapper h2, .artical-wrapper h3 { font-size: 20px; color: #0F1548; }
.right-artical-info h2 { padding-bottom: 5px; }
.artical-wrapper .step-box { margin-left: 14px; max-width: calc(100% - 14px); margin-top: 0px; padding: 0;  overflow: hidden; background-color: #f4f4f4; }
.artical-wrapper .step-box h3 { text-align: center; padding: 17px 10px; background: #ffffff; border-radius: 11px; }
.date { color: #0F1548; font-size: 15px; }
.artical-wrap p { font-size: 15px; line-height: 1.2; padding-top: 5px; padding-right: 50px; }
.artical-wrap .btn { margin-top: 15px; padding-bottom: 15px; }
.artical-wrap .btn a { padding: 11px 14px; }
.artical-wrap article { margin-bottom: 15px; background: #fff; border-radius: 11px; }
.artical-wrap article:last-child { margin-bottom: 0; }
.artical-wrapper { padding-top: 25px; padding-bottom: 38px; }
.right-post-code { padding: 17px 25px 24px; }
.right-post-code h4 { padding-bottom: 0; }
.right-post-code input { margin-top: 5px; font-size: 20px; padding: 12px 10px; margin-bottom: 0; }
.right-post-code .submit-btn input,
.right-post-code .submit-btn button { margin-top: 13px; padding: 15px; }

.artical-detail-page .right-artical-info h1 { font-size: 55px; width: 100%; }
.article-ctn-area { padding-top: 23px; }
.article-ctn-area p { padding-top: 0; }
.article-ctn-area a { color: #f99500; }
.article-ctn-area h3 { padding-bottom: 0; font-weight: 400; font-size: 24px; padding-top: 5px; }
.artical-wrapper.artical-detail-page {
	padding-top: 16px;
}
.artical-detail-page .artical-wrap {padding: 35px 38px 40px; }
.artical-detail-page .artical-wrap article {background-color: transparent; }
.artical-detail-page .artical-wrap p { padding-right: 10px; padding-bottom: 15px; }
.artical-detail-page .left-article-image {width: 28.5%; }
.artical-detail-page .right-artical-info {width: 71.5%; padding-left: 22px; padding-top: 28px; }

.artical-detail-page .left-article-image { height: inherit; }
.artical-detail-page .flex-box {align-items: flex-start; }
.show-text-mobile { display: none; }
.artical-section .flex-box { position: relative; }
/* Navigation*/

.more-post-link,
.post-navigation { text-align: center; display: none; }
.more-post-link a,
.post-navigation a { position: relative; display: inline-block; font-size: 28px; font-weight: 700;  padding-left: 55px; padding-right: 55px; line-height: 1; }
.more-post-link a:before,
.post-navigation a:before,
.more-post-link a:after,
.post-navigation a:after {
	content: '';
	position: absolute;
	top: 5px;
	border-left: 17px solid transparent;
      border-right: 17px solid transparent;
      border-top: 28px solid #0f1548;
}
.more-post-link a:before,
.post-navigation a:before { left: 0; }
.more-post-link a:after,
.post-navigation a:after { right: 0; }
.more-article article:last-child { border-bottom: 0; margin-bottom: 5px; }
/* Navigation*/