@charset "UTF-8";
/* CSS Document */

html, body {
    height: 100%;
	min-width:340px;
	
	font:16px/22px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif;
	color:#333333;
	
	background: url(images/new-bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
    font:28px/42px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif;
	color:#f46e23;
	padding:0px 0px 8px 0px;
	
}
h2 {
    font:24px/36px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif;
	color:#f46e23;
	padding:0px 0px 8px 0px;
}
h3 {
    font:22px/33px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif;
	color:#f46e23;
	padding:0px 0px 8px 0px;
}

h4 {
	font:18px/27px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif;
	font-weight:bold;
	padding:0px 0px 8px 0px;
}

p {padding:0px 0px 8px 0px; text-align:justify;}

p a:link, p a:visited {	font-family:'MyriadProSemibold', Helvetica, Arial, Verdana, sans-serif; color:#333333; text-decoration:none; }
p a:hover {text-decoration:underline;}

.clear {clear:both;}

.top-container {
	width:320px;
	min-height:350px;
	background-color:#ffffff;
	margin:60px auto 20px auto;
	
	-webkit-box-shadow: -10px 10px 0px rgba(255, 255, 255, 0.3);
	-moz-box-shadow: -10px 10px 0px rgba(255, 255, 255, 0.3);
	box-shadow: -10px 10px 0px rgba(255, 255, 255, 0.3);
}

.header-outer {
	width:320px;
	height:200px;
	position:absolute;
}

.header {
	width:100%;
	margin-top:-60px;
}

.logo {
	background-image:url(images/logo-bt.png);
	width:212px;
	height:86px;
	float:left;
	background-position:top left;
	background-repeat:no-repeat;
	
	margin:20px 0px 0px 20px;
}

.nav-toggle {
	padding:60px 0px 0px 42px;
	float:right;
}

.social-media {
	float:right;
	height:40px;
	width:175px;
	padding:0px 0px 30px 0px;
	
	display:none;
}

.social-media a {
	display:block;
	float:left;
	height:30px;
	width:30px;
	line-height:40px;
	padding:0px 0px 0px 0px;
	text-decoration:none;
	color:#222222;
}

.fb {float:left; margin:25px 0px 0px 5px;}
.yt {float:left; margin:25px 0px 0px 5px;}
.ig {float:left; margin:25px 0px 0px 5px;}
.tw {float:left; margin:25px 0px 0px 5px;}
.gp {float:left; margin:25px 0px 0px 5px;}

.fb a:link, .fb a:visited {background-color:#3b5998; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;}
.yt a:link, .yt a:visited {background-color:#cd332d; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;}
.ig a:link, .ig a:visited {background-color:#527fa4; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;}
.tw a:link, .tw a:visited {background-color:#4099ff; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;}
.gp a:link, .gp a:visited {background-color:#dc4a38; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;}

.fb a:hover {background-color:#4f6aa3;}
.yt a:hover {background-color:#d24842;}
.ig a:hover {background-color:#648cad;}
.tw a:hover {background-color:#53a3ff;}
.gp a:hover {background-color:#e05c4c;}

.nav {
	float:right;
	clear:right;
	padding:0px 0px 0px 0px;
	
	display:none;
}

.nav a:link, .nav a:visited {
	display:inline-block;
	height:40px;
	padding:0px 10px 0px 10px;
	text-decoration:none;
	color:#222222;
	font:15px/40px 'CenturyGothicRegular'/*Helvetica, Arial, Verdana, sans-serif*/;
}

.nav a:hover {
	color:#f46e23;
}

.nav-mob {
	float:left;
	clear:both;
	width:310px;
	padding:0px 5px 0px 5px;
	height:210px;
	background-color:rgba(255,255,255,0.5);
	display:none;
	margin-top:3px;
	
	font:16px/20px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif;
	color:#ffffff;
	
	-moz-border-bottom-left-radius: 13px;
	-webkit-border-bottom-left-radius: 13px;
	border-bottom-left-radius: 13px; 
	-khtml-border-bottom-left-radius: 13px;
	
	-moz-border-bottom-right-radius: 13px;
	-webkit-border-bottom-right-radius: 13px;
	border-bottom-right-radius: 13px; 
	-khtml-border-bottom-right-radius: 13px;
}

.nav-mob a {
	height:40px;
	line-height:40px;
	width:145px;
	margin:10px 5px 0 5px;
	background-color:red;
	color:#ffffff;
	display:block;
	float:left;
	text-align:center;
	text-decoration:none;
	background-color:#f9a21f;
	
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

.social-media-mob {
	height:40px;
	width:145px;
	padding:10px 0px 0px 5px;
	float:left;
}

.social-media-mob a {
	height:30px;
	width:29px;
	display:inline-block;
	float:left;
	padding:5px 0px 5px 0px;
	margin:0;
	
	-moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -khtml-border-radius: 0px;
    border-radius: 0px;
}

.fbm a {
	background-color:#3b5998;
	
	-moz-border-bottom-left-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	border-bottom-left-radius: 8px; 
	-khtml-border-bottom-left-radius: 8px;
	
	-moz-border-top-left-radius: 8px;
	-webkit-border-top-left-radius: 8px;
	border-top-left-radius: 8px; 
	-khtml-border-top-left-radius: 8px;
}
.ytm a {
	background-color:#cd332d;
}
.igm a {
	background-color:#527fa4;
}
.twm a {
	background-color:#4099ff;
}
.gpm a {
	background-color:#dc4a38;
	
	-moz-border-top-right-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	border-top-right-radius: 8px; 
	-khtml-border-top-right-radius: 8px;
	
	-moz-border-bottom-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-bottom-right-radius: 8px; 
	-khtml-border-bottom-right-radius: 8px;
}

.banner {
	float:left;
	margin-top:50px;
	height:300px;
	width:100%;
	background-color:#dddddd;
}

#banner-home { background-image:url(images/banner-home-s.jpg); }
#banner-going-solar { background-image:url(images/banner-going-solar-s.jpg); }
#banner-battery-storage { background-image:url(images/banner-battery-storage-s.jpg); }
#banner-zero-dollar-solar { background-image:url(images/banner-zero-dollar-solar-s.jpg); }
#banner-about-us { background-image:url(images/banner-about-us-s.jpg); }
#banner-news-and-events { background-image:url(images/banner-news-and-events-s.jpg); }
#banner-contact { background-image:url(images/banner-contact-s.jpg); }

.banner-text-home {
	font:22px/20px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif;
	/*color:rgba(255,255,255,0.7);*/
	color:#fff;	padding:260px 0px 0px 40px;
	margin:auto;
}

.low-container {
	width:320px;
	min-height:450px;
	background-color:#ffffff;
	margin:0px auto 20px auto;
	
	
	-webkit-box-shadow: -10px 10px 0px rgba(255, 255, 255, 0.3);
	-moz-box-shadow: -10px 10px 0px rgba(255, 255, 255, 0.3);
	box-shadow: -10px 10px 0px rgba(255, 255, 255, 0.3);
}

.content {
	width:280px;
	padding:20px 20px;
}

.collapsed1-toggle {float:left; width:100%; height:40px; margin:10px 0px 0px 0px;}
.collapsed1-toggle a {
	float:left; clear:both; width:100%; height:40px; background-color:#aaa; display:block;
	font:18px/40px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif; text-align:center; color:#fff; text-decoration:none;
	background-image:url(images/plus.png); background-repeat:no-repeat; background-position:right center;
}
.collapsed1 {float:left; width:100%; margin:20px 0px 20px 0px; display:none;}

.collapsed2-toggle {float:left; width:100%; height:40px; margin:10px 0px 0px 0px;}
.collapsed2-toggle a {
	float:left; clear:both; width:100%; height:40px; background-color:#aaa; display:block;
	font:18px/40px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif; text-align:center; color:#fff; text-decoration:none;
	background-image:url(images/plus.png); background-repeat:no-repeat; background-position:right center;
}
.collapsed2 {float:left; width:100%; margin:20px 0px 20px 0px; display:none;}

.collapsed3-toggle {float:left; width:100%; height:40px; margin:10px 0px 0px 0px;}
.collapsed3-toggle a {
	float:left; clear:both; width:100%; height:40px; background-color:#aaa; display:block;
	font:18px/40px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif; text-align:center; color:#fff; text-decoration:none;
	background-image:url(images/plus.png); background-repeat:no-repeat; background-position:right center;
}
.collapsed3 {float:left; width:100%; margin:20px 0px 20px 0px; display:none;}

.collapsed4-toggle {float:left; width:100%; height:40px; margin:10px 0px 0px 0px;}
.collapsed4-toggle a {
	float:left; clear:both; width:100%; height:40px; background-color:#aaa; display:block;
	font:18px/40px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif; text-align:center; color:#fff; text-decoration:none;
	background-image:url(images/plus.png); background-repeat:no-repeat; background-position:right center;
}
.collapsed4 {float:left; width:100%; margin:20px 0px 20px 0px; display:none;}

.collapsed5-toggle {float:left; width:100%; height:40px; margin:10px 0px 0px 0px;}
.collapsed5-toggle a {
	float:left; clear:both; width:100%; height:40px; background-color:#aaa; display:block;
	font:18px/40px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif; text-align:center; color:#fff; text-decoration:none;
	background-image:url(images/plus.png); background-repeat:no-repeat; background-position:right center;
}
.collapsed5 {float:left; width:100%; margin:20px 0px 20px 0px; display:none;}

.going-solar-image { height:246px; width:280px; float:left; clear:both; background-image:url(images/going-solar-image-s.jpg);  margin-top:20px;}

.zero-dollar-solar-image { height:340px; width:280px; float:left; clear:both; background-image:url(images/zero-dollar-solar-image-s.jpg);  margin-top:20px;}

.partners {}
.partner {width:224; height:141px; float:left; padding:0px 27px 25px 27px;}
.partner a {width:224px; height:30px; padding:111px 0px 0px 0px; background-position:center-top; background-repeat:no-repeat; text-align:center; text-decoration:none; color:blue; display:block;}
.partner a:hover {text-decoration:underline;}
#solarmine a {background-image:url(images/solarmine.jpg);}
#urthenergy a {background-image:url(images/urthenergy.jpg);}
#hia a {background-image:url(images/hia.jpg);}
#cleanenergycouncil a {background-image:url(images/cleanenergycouncil.jpg);}
#solaxpower a {background-image:url(images/solaxpower.jpg);}
#soltaro a {background-image:url(images/soltaro.jpg);}
#certegyezipay a {background-image:url(images/certegyezipay.jpg);}
#risenenergy a {background-image:url(images/risenenergy.jpg);}
#zeusappollosolar a {background-image:url(images/zeusappollosolar.jpg);}
#solisinverters a {background-image:url(images/solisinverters.jpg);}
#goodwe a {background-image:url(images/goodwe.jpg);}
#classicfg a {background-image:url(images/classicfg.jpg);}
#pgkdistribution a {background-image:url(images/pgkdistribution.jpg);}
#pacificgolf a {background-image:url(images/pacificgolf.jpg);}

.social-page { margin:0px 0px 0px 0px; }
.social {float:left; width:280px; height:60px; margin:0px 0px 20px 0px;}
.social a:link, .social a:visited {background-position:left; background-repeat:no-repeat; height:60px; width:200px; padding:0px 0px 0px 80px; display:block; line-height:60px; text-decoration:none; color:blue;}
.social a:hover {text-decoration:underline;}
#wordpress {background-image:url(images/wordpress.jpg); background-repeat:no-repeat;}
#face {background-image:url(images/social-facebook1.jpg); background-repeat:no-repeat;}
#tube {background-image:url(images/social-youtube1.jpg); background-repeat:no-repeat;}
#instagram {background-image:url(images/instagram.jpg); background-repeat:no-repeat;}
#twitter {background-image:url(images/twitter.jpg); background-repeat:no-repeat;}
#googleplus {background-image:url(images/googleplus.jpg); background-repeat:no-repeat;}

.about-us-image { background-image:url(images/about-us-image-s.jpg); width:280px; height:400px;  margin-top:20px;}

.news-and-events-image { background-image:url(images/news-and-events-image-s.jpg); width:280px; height:270px; margin-top:20px;}

.contact-image { background-image:url(images/contact-image-s.jpg); width:280px; height:142px;  margin-top:20px;}

.page-contact {
	float:left;
	width:100%;
	clear:both;
	height:330px;
	margin:40px 0px 40px 0px;
}

.contact-button {
	float:left;
	width:140px;
	height:146px;
	margin:0px 0px 0px 70px;
}

.page-contact-info {
	float:left;
	padding:25px 0px 0px 0px;
	text-align:center;
}


.footer {
	width:320px;
	margin:auto;
	padding:10px 0px 20px 0px;
	color:white;
	text-shadow: 2px 2px 2px #333333;
}

.footer-left {float:left; clear:left; width:320px; text-align:center; font:12px/18px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif;}
.footer-right {float:left; clear:left; width:320px; text-align:center; font:12px/18px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif;}
.footer-right a:link, .footer-right a:visited { color:white; text-decoration:none; font:12px/18px 'MyriadProRegular', Helvetica, Arial, Verdana, sans-serif;}
.footer-right a:hover {text-decoration:underline;}

.non-mob {display:none;}


/*---------pages----------*/
.three-col {
	width:100%;
}
.left-col {
	float:left;
	padding:10px 0px 10px 0px;
	width:100%;
	text-align:center;
}
.mid-col {
	float:left;
	padding:10px 0px 10px 0px;
	width:100%;
	text-align:center;
}
.right-col {
	float:left;
	padding:10px 0px 10px 0px;
	width:100%;
	text-align:center;
}

.center {
	text-align:center;
}

.left {
	text-align:left;
}

.right {
	text-align:right;
}

#h1-zero-solar-ppa {
	font-size:40px;
}

.q {
	color:#f46e23;
	font-size:20px;
	line-height:28px;
	font-family:'Roboto Condensed', Ariel, sans-serif;
	text-align:center;
}

.now {
	color:#f46e23;
	font-size:40px;
	line-height:30px;
	font-family:'Roboto Condensed', Ariel, sans-serif;
	text-align:center;
}

.bonus {
	color:#f46e23;
	font-size:74px;
	line-height:74px;
	font-family:'Roboto Condensed', Ariel, sans-serif;
	text-align:center;
}

.q2 {
	color:#f46e23;
	font-size:16px;
	line-height:28px;
	font-family:'Roboto Condensed', Ariel, sans-serif;
	text-align:center;
}

.now2 {
	color:#f46e23;
	font-size:26px;
	line-height:30px;
	font-family:'Roboto Condensed', Ariel, sans-serif;
	text-align:center;
}

.bonus2 {
	color:#f46e23;
	font-size:56px;
	line-height:66px;
	font-family:'Roboto Condensed', Ariel, sans-serif;
	text-align:center;
}

.h240 {
	height:240px;
}

.small-print {
	font-size:11px;
	text-align:center;
}

.center-borders {
	text-align:center;
	border-top:1px solid #f46e23;
	border-bottom:1px solid #f46e23;
	padding:0;
}

.ppa-diagrams {
	height:100px;
	width:100px;
}

.img-right {
	float:right;
	padding:0px 5px 0px 0px;
}

.nav-tiles {
	width:250px;
	height:250px;
	margin:10px auto;
}

.nav-tile-going-solar {
	width:120px;
	height:120px;
	margin:0 5px 5px 0;
	float:left;
}

.nav-tile-going-solar a:link, .nav-tile-going-solar a:visited {
	display:block;
	padding-bottom:100%;
	width:100%;
	background-color:#f9a21f;
	text-align:center;
	color:#fff;
	font-size:20px;
	text-decoration:none;
	background-image:url(images/nav-tile-225-going-solar.png);
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.nav-tile-going-solar a:hover {
	background-color:#fab44b;
}

.nav-tile-solar-battery-storage {
	width:120px;
	height:120px;
	margin:0 0 5px 5px;
	float:left;
}

.nav-tile-solar-battery-storage a:link, .nav-tile-solar-battery-storage a:visited {
	display:block;
	padding-bottom:100%;
	width:100%;
	background-color:#f9a21f;
	text-align:center;
	color:#fff;
	font-size:20px;
	text-decoration:none;
	background-image:url(images/nav-tile-225-solar-battery-storage.png);
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.nav-tile-solar-battery-storage a:hover {
	background-color:#fab44b;
}

.nav-tile-zero-dollar-solar-ppa {
	width:120px;
	height:120px;
	margin:5px 5px 0 0;
	float:left;
}

.nav-tile-zero-dollar-solar-ppa a:link, .nav-tile-zero-dollar-solar-ppa a:visited {
	display:block;
	padding-bottom:100%;
	width:100%;
	background-color:#f9a21f;
	text-align:center;
	color:#fff;
	font-size:20px;
	text-decoration:none;
	background-image:url(images/nav-tile-225-zero-dollar-solar-ppa.png);
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.nav-tile-zero-dollar-solar-ppa a:hover {
	background-color:#fab44b;
}

.nav-tile-about-us {
	width:120px;
	height:120px;
	margin:5px 0 0 5px;
	float:left;
}

.nav-tile-about-us a:link, .nav-tile-about-us a:visited {
	display:block;
	padding-bottom:100%;
	width:100%;
	background-color:#f9a21f;
	text-align:center;
	color:#fff;
	font-size:20px;
	text-decoration:none;
	background-image:url(images/nav-tile-225-about-citisolar.png);
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.nav-tile-about-us a:hover {
	background-color:#fab44b;
}

.tile-text {display:none;}

.env-fr {
	width:100%;
	height:402px;
	background-image:url(images/env-fr-s.jpg);
	background-position:center;
	background-repeat:no-repeat;
}

.solar-house2 {
	width:100%;
	height:167px;
	background-image:url(images/solar-house-cs.jpg);
	float:right;
	margin:10px 0px 10px 10px;
	background-repeat:no-repeat;
	background-position:center center;
	
	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
	
	box-shadow:         1px 1px 4px 0px #cccccc;
	-moz-box-shadow:    1px 1px 4px 0px #cccccc;
	-webkit-box-shadow: 1px 1px 4px 0px #cccccc;
	-ms-box-shadow:     1px 1px 4px 0px #cccccc;
	-o-box-shadow:      1px 1px 4px 0px #cccccc;
}

.carbon-graph-bg {
	width:100%;
	/*height:528px;
	background-image:url(images/carbon-graph-bg.jpg);*/
}

.carbon-graph-bg img {
	width:100%;

}

.electricity-price-graphs {
	width:100%;
	height:322px;
	background-image:url(images/electricity-price-graphs2.jpg);
	background-position:center center;
	background-repeat:no-repeat;
}

.solaxbox {
	float:left;
	width:263px;
	height:500px;
	padding:0 20px 0 0;
}

ul {
	font:16px/20px 'MyriadProRegular', Ariel, sans-serif;
	list-style-image:url(images/bullet.png);
	padding:10px 0px 10px 40px;
}

.map {float:right;}

.map iframe {height:130px;width:280px;}

.map1 {float:right;}

.map1 iframe {height:220px;width:280px;}

.contact-left {
	float:left;
	width:280px;
}

.contact-right {
	float:right;
	width:280px;
}

.panel-img {
	float:left;
	height:180px;
	width:190px;
	text-align:center;
	padding:10px 0px 0px 0px;
}

.panel-txt {
	float:left;
	width:280px;
	padding:40px 0px 0px 0px;
}

.inverter-img {
	float:left;
	height:179px;
	width:190px;
	text-align:center;
	padding:10px 0px 0px 0px;
}

.inverter-txt {
	float:left;
	width:280px;
	padding:10px 0px 0px 0px;
}

.prods {float:left; width:280; padding:0px 0px 0px 0px;}
.prod {float:left;}
.prod-left {float:left; width:280px;}
.prod-brand {float:left; width:280px; text-align:center; padding:0px 0px 5px 0px;}
.prod-brand img {width:280px;}
.prod-txt {float:left; width:280px; text-align:center; padding:0px 0px 5px 0px;}
.prod-img {float:right; width:280px;}
.prod-img img {width:280px;}
.prod-line {width:100%; height:1px; background-color:#eeeeee; margin:20px 0px 20px 0px;}