@charset "utf-8";

img, object, embed, video {
	max-width: 100%;
}

a {	text-decoration: none; }

/*-------------------------------------------------------------*/

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in, .fade-in-2, .fade-in-3 {
    opacity:0; 
	opacity:1\9; 
    -webkit-animation:fadeIn ease-in 1;  
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:0.5s;
    -moz-animation-duration:0.5s;
    animation-duration: 0.5s;
}
 
.fade-in {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

.fade-in-2 {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1s;
}

.fade-in-3 {
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	animation-delay: 1.5s;
}

/*-------------------------------------------------------------*/

body {
	margin: 0;
	padding: 0;
	background: #fff;
	font-family: 'Alegreya Sans', sans-serif;
	line-height: 22px; /* flow type  */
	font-size: 18px; /*   settings*/
}

div, img, a {
	transition:All 0.5231s ease-in-out;
	-webkit-transition:All 0.5231s ease-in-out;
	-moz-transition:All 0.5231s ease-in-out;
	-o-transition:All 0.5231s ease-in-out;
}

a:focus { outline: none; }
 
.Container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 2%;
    padding-right: 2%;
    width: 96%;
	max-width: 1230px;
	clear: none;
	float: none;
}

.home {
	background: url(../../../assets/images/frontpage/home-bg.jpg) 50% 0 no-repeat;
	background-size: auto;
	
}

.LeftCol {
	float: left;
	width: 50%;
	margin: 0;
	height: 845px;
}

.LeftCol ul {
	width: 100%;
	margin: 30px 0 0 0;
	list-style: none;
	padding: 0;
}

.LeftCol ul li {
	width: 100%;
	margin: 0;
	padding: 5px 0 5px 0;
	display: block;
}

.LeftCol ul li a {
	background: url(../../../assets/images/frontpage/main-link-bg.png) 50% 50% no-repeat;
	background-size: 25%;
	background-position: center;
	display: block;
	text-align: center;
	color: #fff;
	font-size: 0.5em;
	text-transform: uppercase;
	padding: 72px 0 72px 0;
	line-height: normal;
}

.LeftCol ul li a:hover {
	opacity: 0.7;
	background-size: 27%;
}

.RightCol {
	float: left;
	width: 50%;
	height: 780px;
	margin: 0;
	padding: 80px 0 0 0;
	text-align: center;
	overflow: hidden;
	background: url(../../../assets/images/frontpage/test-bg.png) 50% 100% no-repeat;
	background-size: auto;
}

.RightCol p {
	color: #fff;
	width: 65%;
	margin: 25px auto 25px auto;
}

.RightCol p span {
	text-transform: uppercase;
	font-size: 1.5em;
	line-height: 1.2em;
	margin: 0;
}

.links {
	width: 85%;
	display: block;
	clear: both;
	margin: 25px auto 0 auto;
	overflow: hidden;
}

a#contact, a.login {
	display: inline-block;
	width: 25%;
	padding: 0 50px 0 10px;
	border: 1px #fff solid;
	border-radius: 3px;
	webkit-border-radius: 3px;
	color: #fff;
	font-size: 0.6em;
	text-transform: uppercase;
	text-align: left;
	margin: 0 0 4px 0;
}

a#contact {
	background: url(../../../assets/images/frontpage/link-down.png) 90% 50% no-repeat;
}

a#contact:hover {
	background: #89c355 url(../../../assets/images/frontpage/link-down.png) 90% 55% no-repeat;
}

a.login {
	background: url(../../../assets/images/frontpage/link.png) 90% 50% no-repeat;
}

a.login:hover {
	background: #89c355 url(../../../assets/images/frontpage/link.png) 95% 50% no-repeat;
}

a.tw { 
	color: #fff; 
	background: url(../../../assets/images/frontpage/twitter-link.png) 94% 50% no-repeat;
	background-size: auto;
	display: inline-block;
	text-align: center;
	font-size: 0.7em;
	padding: 10px 22% 10px 0;
	clear: both;
	float: none;
}

a.tw:hover { 
	color: #fff; 
	background: url(../../../assets/images/frontpage/twitter-link.png) 98% 50% no-repeat;
}

/*----------divider-----------*/

.Divider {
	background: #fff;
	width: 100%;
	padding: 0 0 20px 0;
	overflow: hidden;
}

.Divider .Container .LeftCol {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
	height: auto;
	overflow: hidden;
	font-size: 1.2em;
}

.Divider .Container .RightCol {
	background: url(../../../assets/images/frontpage/form-bg.png) 50% 0 no-repeat;
	background-size: cover;
	height: auto;
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.Divider .Container .RightCol img, .Divider .Container .LeftCol img { width: 15%; display: block; float: left; }

/*----------form-------------*/

.form {
	background: #fff;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.WebFormHolder  {
	width: 100%;
	height:350px;
	padding: 15px 0 15px 0;
}


.WebForm {
	width: 75%;
	float: left;
	margin: 0;
	padding: 0 0 100px 0;
	background: url(../../../assets/images/frontpage/form-bg.svg) 0 55% no-repeat;
	background-size: contain;
	/*border-right: 1px #a5a5a5 solid;
	border-bottom: 1px #a5a5a5 solid;
	border-bottom-right-radius: 50px;
	webkit-border-bottom-right-radius: 50px;*/
}

.WebFormIntro {
	width: 100%;
	clear: both;
}

.WebFormIntro p {
	color: #a5a5a5;
	font-style: italic;
	font-size: 0.5em;
	width: 60%;
	padding: 0 0 20px 0;
	margin: 0;
}

.WebFormIntro p span {
	color: #73c528;
	font-size: 1.2em;
}

form#SolarContact {
	width: 100%;
	margin: 0;
}

form#SolarContact .labels {
	width: 27%;
	float: left;
	margin: 0 0 0 0;
	padding-top: 0;
	padding-bottom: 35px;
	padding-left: 1%;
	padding-right: 5%;
	background: url(../../../assets/images/frontpage/label-bg.png) 25% 45% no-repeat;
	background-size: auto;
}

form#SolarContact .labels input {
	border: 1px #a5a5a5 solid;
	width: 85%;
	padding: 10px;
	background: #fff;
	font-size: 0.6em;
	color: #73c528;
	
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

form#SolarContact .labels input:focus {
	border: 1px #73c528 solid;
	background: #93c7f0;
	color: #fff;

	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

form#SolarContact .message textarea {
	border: 1px #a5a5a5 solid;
	width: 90%;
	margin: 20px 0 0 1%;
	clear: both;
	padding: 5px;
	background: #fff;
	font-size: 0.4em;
	color: #73c528;
	resize: none;
	height: 100px;
}

.button {
	width: 100%;
	margin: 0;
	text-align: center;
}

.button input {
	background: #0F9;
	border: none;
	padding:80px;
	color: #fff;
	background: #fff url(../../../assets/images/frontpage/send-bg.png) 50% 50% no-repeat;
	background-size: auto;
	text-transform: uppercase;
	margin: 30px 0 0 0;
	font-size: 0.5em;
}

.button input:hover {
	background: #fff url(../../../assets/images/frontpage/send-bg-over.png) 50% 50% no-repeat;
	background-size: auto;
}

.button input:active {
	background: #fff url(../../../assets/images/frontpage/send-bg-active.png) 50% 50% no-repeat;
	background-size: auto;
}

/*--------------------about-us-------------------------------------------*/

.about-us {
	background: url(../../../assets/images/frontpage/about-us-bg-2.jpg) 50% 0 no-repeat;
	background-size: auto;
	width: 100%;
	clear: both;
	margin: 0;
	padding: 0 0 35px 0;
}

.about-us .left {
	background: url(../../../assets/images/frontpage/about-us-left-top.png) 55% 0 no-repeat;
	background-size: auto;
	float: left;
	width: 45%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: center;
}

.about-us .right {
	/*background: url(../../../assets/images/frontpage/arrow.png) 0 100% no-repeat;*/
	background-size: auto;
	float: left;
	width: 55%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: center;
}

.about-us .left h1, .about-us .right h1  {
	font-weight: 300;
	color: #fff;
	font-size: 0.8em;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	padding: 100px 0 0 0;
}

.about-us .left p, .about-us .right p   {
	color: #fff;
	font-size: 0.4em;
	margin: 0;
	padding: 0;
	width: 65%;
	display: inline-block;
}

.about-us .right p span {
	font-size: 1.2em;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}

.about-us .right p i {
	font-size: 1.2em;
	margin: 0;
	padding: 10px 0 10px 0;
	display: inline-block;
}

/*---------------------content----------------------------------------------*/

#content {
	width: 100%;
	padding: 20px 0 20px 0;
	margin: 0;
	overflow: hidden;
}

.white { background: #fff;}

#content.white h1 {
	color: #95d21f;
	font-weight: 300;
	letter-spacing: 0.05em;
	display: block;
	text-align: center;
	margin: 0 0 25px 0;
}

.navigation {
	width: 100%;
	overflow: hidden;
	margin: 0 0 30px 0;
	padding: 20px 0 0 0;
	border-bottom: #b2b2b2 solid 1px;
}

.half {
	width: 50%;
	margin: 0;
	padding: 0;
	float: left;
}

.navigation .half a img {
	display: block;
	float: left;
	margin: 0 2% 0 0;
}


.half img {
	margin: 0 auto 0 auto;
	display: block;
}

.navigation .half a.back {
	float: left;
	display: block;
	margin: 0 4% 20px 0;
}

.navigation .half a.back:hover {
	opacity: 0.5;
}

.navigation .half ul {
	width: 100%;
	margin: 0;
	padding: 8px 0 0 0;
	list-style: none;
}

.navigation .half ul li {
	float: right;
	margin: 0 0 0 2%;
	display: block;
}

.navigation .half ul li a {
	font-size: 0.5em;
	display: block;
	padding: 10px;
	border: 1px #9dd929 solid;
	border-radius: 3px;
	webkit-border-radius: 3px;
	color: #9dd929;
	line-height: normal!important;
}

.navigation .half ul li a:hover {
	color: #fff;
	background: #9dd929;
}

.navigation .half ul li a.active {
	font-size: 0.5em;
	display: block;
	padding: 10px;
	border: 1px #9dd929 solid;
	border-radius: 3px;
	webkit-border-radius: 3px;
	color: #fff;
	background: #9dd929;
	line-height: normal!important;
	cursor: default;
}

.half h2, .bottom h2 {
	color: #95d21f;
	font-weight: 300;
	display: block;
	text-align: center;
}

.half p {
	text-align: center;
	font-size: 0.4em;
	text-align: center;
	margin: 0 8% 15px 8%;
}

#content {
	width: 100%;
	padding: 0 0 20px 0;
	margin: 0;
	overflow: hidden;
}

.full { 
	background: #3d95dd url(../../../assets/images/frontpage/photovoltaics-bg.jpg) no-repeat 50% 100%;
	background-size: auto;
}

.solar-thermal {
	background: #3d95dd url(../../../assets/images/frontpage/solar.jpg) no-repeat 50% 100%;
	background-size: auto;
}

#content.full h2 {
	display: block;
	font-weight: 300;
	margin: 15px 0 15px 0;
	color: #fff;
	padding: 25px 0 25px 16%;
	background: url(../../../assets/images/frontpage/gears.png) no-repeat 0 50%;
	background-size: auto;
}

#content.solar-thermal h2 {
	display: block;
	font-weight: 300;
	margin: 15px 0 15px 0;
	color: #002c58;
	padding: 25px 0 25px 16%;
	background: url(../../../assets/images/frontpage/gears-th.png) no-repeat 0 50%;
	background-size: auto;
}

#content.full h2 img, #content.solar-thermal h2 img {
	display: block;
	float: left;
	padding: 10px 10px 0 0;
}

#content.full .Container, #content.solar-thermal .Container { padding: 0; background: url(../../../assets/images/frontpage/section-top.png) 50% 0 no-repeat;}

#content.full .Container div, #content.solar-thermal .Container div { width: 90%; margin: 0 auto; }

#content.full p {
	color: #fff;
	font-size: 0.4em;
	margin: 0;
}

#content.solar-thermal p {
	color: #002c58;
	font-size: 0.4em;
	margin: 0;
}

#content.full hr, #content.solar-thermal hr {
	display: block;
	border: none;
	margin: 15px 0 15px 0;
	padding: 10px 0 10px 0;
	width: 100%;
	background: url(../../../assets/images/frontpage/hr-bg.png) 50% 50% no-repeat;
	background-size: auto;
}


#content.bottom  {
	width: 100%;
	padding: 40px 0 20px 0;
	margin: 0;
	overflow: hidden;
	background: #fff;
	text-align: center; 
}

.bottom p {font-size: 0.4em; line-height: 1.5em; color: #666; margin: 0 11% 0 11%;}

#content.bottom a#up { display:inline-block; margin: 30px 0 30px 0;}

#content.bottom a#up:hover, #content.bottom a#up:active { opacity: 0.5;}

/*@media only screen and (min-width: 820px) {

}


@media only screen and (min-width: 1500px) {

}


