/*BOOTSTRAP*/
*[class*="span"] {float:left;}

.span1 {width:calc(100% / 12);}
.span2 {width:calc((100% / 12) * 2);}
.span3 {width:25%;}
.span4 {width:calc((100% / 3));}
.span5 {width:calc((100% / 12) * 5);}
.span6 {width:50%;}
.span7 {width:calc((100% / 12) * 7);}
.span8 {width:calc((100% / 3) * 2);}
.span9 {width:75%;}
.span10 {width:calc((100% / 12) * 10);}
.span11 {width:calc((100% / 12) * 11);}
.span12 {width:100%;}
@media screen and (min-width:1200px){
	.span1-lg {width:calc(100% / 12);}
	.span2-lg {width:calc((100% / 12) * 2);}
	.span3-lg {width:25%;}
	.span4-lg {width:calc((100% / 3));}
	.span5-lg {width:calc((100% / 12) * 5);}
	.span6-lg {width:50%;}
	.span7-lg {width:calc((100% / 12) * 7);}
	.span8-lg {width:calc((100% / 3) * 2);}
	.span9-lg {width:75%;}
	.span10-lg {width:calc((100% / 12) * 10);}
	.span11-lg {width:calc((100% / 12) * 11);}
	.span12-lg {width:100%;}
}

@media screen and (min-width:769px) and (max-width:1199px){
	.span1-md {width:calc(100% / 12);}
	.span2-md {width:calc((100% / 12) * 2);}
	.span3-md {width:25%;}
	.span4-md {width:calc((100% / 3));}
	.span5-md {width:calc((100% / 12) * 5);}
	.span6-md {width:50%;}
	.span7-md {width:calc((100% / 12) * 7);}
	.span8-md {width:calc((100% / 3) * 2);}
	.span9-md {width:75%;}
	.span10-md {width:calc((100% / 12) * 10);}
	.span11-md {width:calc((100% / 12) * 11);}
	.span12-md {width:100%;}
}

@media screen and (max-width:768px){
	.span1-sm {width:calc(100% / 12);}
	.span2-sm {width:calc((100% / 12) * 2);}
	.span3-sm {width:25%;}
	.span4-sm {width:calc((100% / 3));}
	.span5-sm {width:calc((100% / 12) * 5);}
	.span6-sm {width:50%;}
	.span7-sm {width:calc((100% / 12) * 7);}
	.span8-sm {width:calc((100% / 3) * 2);}
	.span9-sm {width:75%;}
	.span10-sm {width:calc((100% / 12) * 10);}
	.span11-sm {width:calc((100% / 12) * 11);}
	.span12-sm {width:100%;}
}

.margin-right-1 {margin-right:calc(100% / 12);}
.margin-right-2 {margin-right:calc((100% / 12) * 2);}
.margin-right-3 {margin-right:25%;}
.margin-right-4 {margin-right:calc((100% / 12) * 4);}
.margin-right-5 {margin-right:calc((100% / 12) * 5);}
.margin-right-6 {margin-right:50%;}
.margin-right-7 {margin-right:calc((100% / 12) * 7);}
.margin-right-8 {margin-right:calc((100% / 12) * 8);}
.margin-right-9 {margin-right:75%;}
.margin-right-10 {margin-right:calc((100% / 12) * 10);}
.margin-right-11 {margin-right:calc((100% / 12) * 11);}
.margin-right-12 {margin-right:100%;}

.margin-left-1 {margin-left:calc(100% / 12);}
.margin-left-2 {margin-left:calc((100% / 12) * 2);}
.margin-left-3 {margin-left:25%;}
.margin-left-4 {margin-left:calc((100% / 12) * 4);}
.margin-left-5 {margin-left:calc((100% / 12) * 5);}
.margin-left-6 {margin-left:50%;}
.margin-left-7 {margin-left:calc((100% / 12) * 7);}
.margin-left-8 {margin-left:calc((100% / 12) * 8);}
.margin-left-9 {margin-left:75%;}
.margin-left-10 {margin-left:calc((100% / 12) * 10);}
.margin-left-11 {margin-left:calc((100% / 12) * 11);}
.margin-left-12 {margin-left:100%;}

/*SITE WIDTH*/
.incontainer {margin:0 auto;}
@media screen and (min-width:1200px){
	.incontainer {width:90%;}
}
@media screen and (min-width:769px) and (max-width:1199px){
	.incontainer {width:90%; }
}
@media screen and (max-width:768px){
	.incontainer {width:96%; }
}

/*MAIN AREA*/
body {margin:0!important;}
.main-body {margin-top:30px; margin-bottom:30px;}
@media screen and (min-width:769px){
	body:not(.home) .main-body-incontainer > .content {min-height:504px;}
}
/*MENU*/
.navigation {position:fixed; top:0; z-index:1; }

@media screen and (min-width:769px){
	.navbar {margin-bottom:0!important;}
	.navbar .btn-navbar {display:none;}
	.nav-collapse {float:right; }
	.navbar a > img {display:none!important; visibility:hidden!important;}
	.menu {
		display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
		-webkit-box-flex-flow: row nowrap; -moz-box-flex-flow: row nowrap; -ms-flex-flow: row nowrap; -webkit-flex-flow: row nowrap; flex-flow: row nowrap;
	}
	.menu > li ul {display:none; position:absolute; float:left; width:250px;}
	.menu > li:hover > ul {display:block;}
	.menu > li > ul > li {list-style-type:none;}
}
@media screen and (max-width:768px){
	.navigation {height:58px;}
	.navbar .btn-navbar {display:block;}
	.navbar a > img {position:absolute; top:3px; left:10px; width:auto; height:48px;}
	.navbar .navbar-toggle {position:relative; z-index:1000;width:40px; height:40px; border:1px solid #000000;}
	.navbar .nav-collapse {display:none; position:fixed; top:0; left:0; width:100vw; height:100vh!important; }
	.navbar .nav-collapse.in {display:block!important;}
	.navbar .nav-collapse .nav {width:100%; height:100%;}
	.navbar .nav-collapse .nav {
		-webkit-box-align-content: space-between; -moz-box-align-content: space-between; -ms-align-content: space-between; -webkit-align-content: space-between; align-content: space-between;
	}
	.navbar .nav-collapse .nav,
	.navbar .nav-collapse .nav > li,
	.navbar .nav-collapse .nav > li > ul,
	.navbar .nav-collapse .nav > li > ul > li {
		display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
		-webkit-box-flex-flow: column nowrap; -moz-box-flex-flow: column nowrap; -ms-flex-flow: column nowrap; -webkit-flex-flow: column nowrap; flex-flow: column nowrap;
		-webkit-box-justify-content: center; -moz-boxjustify-content: center; -ms-justify-content: center; -webkit-justify-content: center; justify-content: center;
	}
	.navbar .nav-collapse .nav > li > ul {width:100%; padding:0;}
	.navbar .nav-collapse .nav li a {float:left; text-align:center;}
	.navbar .nav-collapse .nav ul li {list-style-type:none;}
}

/*HEADER*/
.header .testimonial-flickity {margin:10px 0;}
@media screen and (min-width:769px){
	.header {margin-top:96px;}
}
@media screen and (max-width:768px){
	.header {margin-top:58px;}
	.header .incontainer {
		display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
		-webkit-box-flex-flow: column nowrap; -moz-box-flex-flow: column nowrap; -ms-flex-flow: column nowrap; -webkit-flex-flow: column nowrap; flex-flow: column nowrap;
		-webkit-box-justify-content: center; -moz-boxjustify-content: center; -ms-justify-content: center; -webkit-justify-content: center; justify-content: center;
		-webkit-box-align-items: flex-start; -moz-box-align-items: flex-start; -ms-align-items: flex-start; -webkit-align-items: flex-start; align-items: flex-start;
		-webkit-box-align-content: center; -moz-box-align-content: center; -ms-align-content: center; -webkit-align-content: center; align-content: center;
	}
	.header .incontainer > div {width:100%!important;}
}
.brand img {height:auto;}
@media screen and (min-width:1025px){
	.brand img {width:300px; }
}
@media screen and (min-width:768px) and (max-width:1024px){
	.brand img {width:150px; }
}
@media screen and (max-width:768px){
	.brand {
		display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
		-webkit-box-flex-flow: row nowrap; -moz-box-flex-flow: row nowrap; -ms-flex-flow: row nowrap; -webkit-flex-flow: row nowrap; flex-flow: row nowrap;
		-webkit-box-justify-content: center; -moz-boxjustify-content: center; -ms-justify-content: center; -webkit-justify-content: center; justify-content: center;
		-webkit-box-align-items: flex-start; -moz-box-align-items: flex-start; -ms-align-items: flex-start; -webkit-align-items: flex-start; align-items: flex-start;
	}
	.brand img {width:50%; margin:0 auto;}
}

/*MAIN BODY*/
.main-body .content {float:left;}
@media screen and (min-width:769px){
	.main-body .content {width:65%;}
}

@media screen and (max-width:768px){
	.main-body .content {width:100%;}
}

.main-body .content img {max-width:100%;}

/*SIDEBAR*/
.sidebar {float:right;}
@media screen and (min-width:769px){
	.main-body .sidebar {width:32%;}
}
@media screen and (max-width:768px){
	.main-body .sidebar {width:100%}
}

@media screen and (min-width:901px){
	.button:not(:last-child) {margin-right:calc((100% / 12) * 2);}
	.register-today img {width:100%; height:auto;}
}

@media screen and (max-width:900px){
	.register-today .image {width:20%;}	
	.register-today .name {width:50%;}
}

@media screen and (min-width:769px) and (max-width:900px){

	.register-today .image img {max-height:100px; width:auto;}
}

@media screen and (max-width:768px){
	.register-today .image img {max-height:140px; width:auto;}
}

.sidebar > .custom > p {clear:both; float:left; }
@media screen and (min-width:769px){
	.sidebar > .custom > p {margin-top:40px;}
}
@media screen and (max-width:768px){
	.sidebar > .custom > p {margin-top:30px;}
}
.sidebar > .custom > p > a > img {max-width:100%;}

/*FOOTER*/
@media screen and (min-width:1025px){
  	.footer .incontainer .custom {float:left;}
	.footer .incontainer .custom:nth-of-type(1) { width:25%;}
  	.footer .incontainer .custom:nth-of-type(2) { width:75%;}
}
@media screen and (max-width:1024px){
	.footer .incontainer .custom {float:left; width:100%;}
}

.footer i {margin-right:10px;}

.footer .partners {width:100%; margin-bottom:20px;}
.footer .partners img { height:auto;}
@media screen and (min-width:1025px) {
	.footer .partners {-webkit-box-flex-flow: row nowrap; -moz-box-flex-flow: row nowrap; -ms-flex-flow: row nowrap; -webkit-flex-flow: row nowrap; flex-flow: row nowrap;}
	.footer .partners img {width:auto;max-width:250px; max-height:60px; }
}
@media screen and (max-width:1024px) {
	.footer .partners {-webkit-box-flex-flow: row wrap; -moz-box-flex-flow: row wrap; -ms-flex-flow: row wrap; -webkit-flex-flow: row wrap; flex-flow: row wrap;}
	.footer .partners img {max-width:90%; margin-bottom:20px; margin-right:20px;}
}
@media screen and (max-width:768px) {
	.footer .partners{-webkit-box-justify-content: center; -moz-boxjustify-content: center; -ms-justify-content: center; -webkit-justify-content: center; justify-content: center;}
	.footer .partners > img {max-width:90%; margin-bottom:20px;}
}


/*CREDITS*/
@media screen and (max-width:768px){
	.credits p {width:100%; text-align: center;}
}
.credits a img {width:auto; height:30px;}

/*BACK TO TOP*/
.back-to-top {position:fixed; bottom:25px; right:25px; width:50px; height:50px; }
.back-to-top a {float:left; width:50px; height:50px; line-height: 50px; text-align:center;}

/*STEP BOX*/
.step-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
@media screen and (min-width:769px){
	.step-list {
		-webkit-box-flex-flow: row nowrap; -moz-box-flex-flow: row nowrap; -ms-flex-flow: row nowrap; -webkit-flex-flow: row nowrap; flex-flow: row nowrap;
		-webkit-box-justify-content: space-between; -moz-boxjustify-content: space-between; -ms-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between;
	}
	.step-list > div {width:30%;}
}
@media screen and (max-width:768px){
	.step-list {
		-webkit-box-flex-flow: column nowrap; -moz-box-flex-flow: column nowrap; -ms-flex-flow: column nowrap; -webkit-flex-flow: column nowrap; flex-flow: column nowrap;
	}
	.step-list > div {width:100%; margin-bottom:20px}
}

/*REGISTER INTEREST PART I*/
.register-interest-part-i form {margin-top:20px;}
.register-interest-part-i form div {clear:both; float:left; width:100%; }
.register-interest-part-i div input:not([type="submit"]),
.register-interest-part-i div select  { padding:5px;}
.register-interest-part-i div input[type="submit"] {margin-top:15px;}
.register-interest-part-i form div a {color:#3BA936;;}
@media screen and (min-width:769px){
	.register-interest-part-i form div {margin-bottom: 15px;}
	.register-interest-part-i form div > *:not(a) {float:left; }
	.register-interest-part-i div label {width:250px;}
	.register-interest-part-i div input:not([type="submit"]),
	.register-interest-part-i div select {width:calc(100% - 265px); max-width:250px; margin-left:15px;}
	.register-interest-part-i div input#newsletters,
	.register-interest-part-i div input#terms {width:auto; margin-right:5px;}

}
@media screen and (max-width:768px){
	.register-interest-part-i form div > * {clear:both; width:100%; margin-bottom:15px;}
}



/*REGISTER INTEREST PART II*/
#page2 > div {clear:both;}
#form_proceed > div {clear:both;}
#form_proceed > div > * {float:left; }
#form_proceed > div > *:first-child {font-weight:bold; margin-right:5px;}
#form_proceed form > div {float:left; width:100%; margin-top:15px;}
#form_proceed form > div > input {margin-right:10px; } 
#form_proceed form .elec-meter-incontainer {clear:both; position:relative; border:1px solid #000000; padding:10px;}
#form_proceed form .gas-meter,
#form_proceed form .elec-meter,
#form_proceed form .gas_newsite,
#form_proceed form .gas_newsite > *,
#form_proceed form .elec_newsite,
#form_proceed form .elec_newsite > * {clear:both; float:left; width:100%; margin: 10px 0;}
#form_proceed form .gas-meter:not(:last-child),
#form_proceed form .elec-meter:not(:last-child) {border-bottom:3px solid #3BA936;}
@media screen and (min-width:1025px){
	#page2 .buttons > * {float:left; margin-bottom:20px;}
	#page2 .buttons > *:first-child {margin-right:20px; }
	#form_proceed form .elec-meter-incontainer {width:500px;}
	#form_proceed form .elec-meter-incontainer .s {position:relative;float:left; width:6%; height:110px; margin:-5px 0 0 -5px;}
	#form_proceed form .elec-meter-incontainer .s:before {content:'S'; float:left; width:100%; height:110px; line-height:110px; font-size:3em; border-right:1px solid #000000; padding-right:5px; margin-top:-6px;}
	#form_proceed form .elec-meter .elec_profile,
	#form_proceed form .elec-meter .elec_MTC,
	#form_proceed form .elec-meter .elec_LLF {float:left; width:26%; margin: 0 1%;}
	#form_proceed form .elec-meter .elec_profile {margin-left:6%;}
	#form_proceed form .elec-meter .elec_mpan {clear: both; margin-top:20px; width:88%; margin-left:6%;}
	#form_proceed form .elec_newsitemeter .elec_mpan {clear: both; margin-top:20px; width:90%; margin-left:5%;}
	#form_proceed form .elec_cdate {clear:both; margin-top:10px;}
}
@media screen and (max-width:1024px){
	#form_proceed form .elec-meter-incontainer .s {display:none;}
	#form_proceed form .elec-meter .elec_profile,
	#form_proceed form .elec-meter .elec_MTC,
	#form_proceed form .elec-meter .elec_LLF {float:left; width:28%; margin: 0 1%;}
	#form_proceed form .elec-meter .elec_profile {margin-left:5%;}
	#form_proceed form .elec-meter .elec_mpan {clear: both; margin-top:20px; width:90%; margin-left:5%;}
	#form_proceed form .gas_newsite,
	#form_proceed form .elec_newsitemeter .elec_mpan {clear: both; margin-top:20px; width:90%; margin-left:5%;}
	#form_proceed form .elec_cdate {clear:both; margin-top:10px;}	
}

.container-row-heading {float:left; width:100%; margin-top:20px;}
.container-row {width:100%; margin-bottom:10px;}
.container-row-heading > div {background-color:#3BA936; color:#FFFFFF; padding:8px;}
.container-row .select {width:80px;}
.container-row:not(.container-row-heading) .select {text-align:center;}
.container-row .name {width:30%;}
.container-row .postcode {width:150px;}

#gas + div .gas_newsite,
#elec + div .elec_newsite {clear:both; float:left; width:100%; margin:0;}

#gas + div + input,
#gas + div + div + input {margin-top:30px;}


#form_proceed form input[type="submit"] {margin-top:20px;}
.gas-meter > input {margin-right:15px;} 

/*FAQ*/
.mooaccordioncontainer0 > div {padding:0 5%;}

/*LOADING*/
.loading {position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:#3BA936; }
.loading .smaller-loading-div {width:200px; height:200px; margin-top:50vh; margin-right:auto; margin-left:auto;}
.loading i {text-align:center; font-size:5em; color:#FFFFFF;}