@charset "UTF-8";

/* Layout {global rules for all sizes} */

body {margin 0; padding: 0;}

header {
    height: 92px;
    background: url(../images/logo.jpg) no-repeat; 100% 0px;
    background-color: #275884;



}

header a.logo { 
    display: block;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    padding: 0px 0px 150px 0px;
}

nav {

    position: absolute;
    padding: 10px 0px 0px 0px;
    right: 0;
    top: 0;
    z-index: 1001;

}

.home-page{
    background: url(../images/home-image.jpg) no-repeat; 100% 0px;

}


/* Layout Large Screens {default for older browses} */




/* ----------------------SOCIAL LINKS------------------------ */

a.mail {
    float: left;
    width: 5%;
    padding: 0px 0px 40px 0px;
    
}

a.tel {
    float: left;
    width: 5%;
    padding: 0px 0px 40px 0px;
    
}

a.home_back {
    float: left;
    width: 5%;
    padding: 0px 0px 40px 0px;
    
}

a.face {
    float: left;
    width: 5%;
    padding: 0px 0px 40px 0px;
    
}


a.twitter {
    float: left;
    width: 5%;
    padding: 0px 0px 40px 0px;
    
}


a.linkin {
    float: left;
    width: 5%;
    padding: 0px 0px 40px 0px;
    
}

.blank {
    float: left;
    width: 32%;
    padding: 0px 0px 40px 0px;
    
}

.blank2 {
    float: left;
    width: 5%;
    padding: 0px 0px 40px 0px;
    
}

.blankside {
    float: left;
    width: 3%;
    padding: 0px 0px 40px 0px;
    
}


/* ----------------------Contact Social------------------------ */

a.contact_face {
    float: left;
    height:100px;
    width: 25%;
    padding: 0px 0px 80px 0px;
    
}

a.contact_twitter {
    float: left;
        height:100px;
    width: 25%;
    padding: 0px 0px 80px 0px;
    
}

a.contact_insta {
    float: left;
        height:100px;
    width: 25%;
    padding: 0px 0px 80px 0px;
    
}

a.contact_linkin {
    float: left;
        height:100px;
    width: 25%;
    padding: 0px 0px 80px 0px;
    
}

.contact_social{
    float:left;
        background-color: #fff;
    width:25%;
    height:100px;
    margin:0;
}

.contact_social2{
        background-color: #fff;
    float:left;
    width:50%;
    height:100px;
    margin:0;
}



/* ---------------------------------------------- */



nav {top: 20px;}

nav a {
    margin: 0px 10px 10px 20px;
    float: right;
}



/* ---------------------------------------------- */

a.blankproduct {
    float: left;
    width: 10%;
    padding: 0px 0px 150px 0px;
    
}

a.solar_link {
    float: left;
    width: 20%;
    padding: 0px 0px 150px 0px;
    
}

a.wind_link {
    float: left;
    width: 20%;
    padding: 0px 0px 150px 0px;
    
}

a.hydro_link {
    float: left;
    width: 20%;
    padding: 0px 0px 150px 0px;
    
}

a.heatpumps_link {
    float: left;
    width: 20%;
    padding: 0px 0px 150px 0px;
    
}


/* ---------------------------------------------- */
h1 { 
    font-size: 4em; 
    margin: .5em 0 .5em 0;
}

p { 
    margin: 4em 2em .75em 2em;
}

p.about { 
    margin: 2em 2em .75em 2em;

}

p.about::first-letter {
    font-size: 4em;
        font-weight: bold; 
    color: #000000;
}



.profile{
        width: 100%;
        height: 200px;
        margin: 0 0 .5em 0;



}






/* ----------------------------------Contact------------------------------------ */



.contact_container {
    background-repeat: no-repeat;
    background-color: #fff;
    height: 300px;
    width: 100%;
    padding: 10px 0px 50px 0px;

}

.contact_address_container {
        float: left;
    background-repeat: no-repeat;
    background-color: #fff;
    height: 300px;
    width: 33%;
    padding: 0px 0px 0px 0px;

}

.contact_tel_container {
        float: left;
    background-repeat: no-repeat;
    background-color: #fff;
    height: 300px;
    width: 33%;
    padding: 0px 0px 0px 0px;

}

.contact_mail_container {
        float: left;
    background-repeat: no-repeat;
    background-color: #fff;
    height: 300px;
    width: 33%;
    padding: 0px 0px 0px 0px;

}



.address_icon {
    background: url(../images/contact_address.png) no-repeat center 0px; 
    width: 100%;
    height: 154px;
    padding: 0px 0px 0px 0px;
}

.contact_address {
    background-color: #fff;
    text-align:center;
    font-size: 1em;
    font-weight: 100;
    width: 100%;
    height: 100px;

}

.tel_icon {
    background: url(../images/contact_tel.png) no-repeat center 0px; 
    width: 100%;
    height: 154px;
    padding: 0px 0px 0px 0px;

}

.contact_tel {

    background-color: #fff;
    text-align:center;
    font-size: 1em;
    font-weight: 100;
    width: 100%;
    height: 100px;

}

.mail_icon {
    background: url(../images/contact_mail.png) no-repeat center 0px; 
    width: 100%;
    height: 154px;
    padding: 0px 0px 0px 0px;
}

.contact_mail {

    background-color: #fff;
    text-align:center;
    font-size: 1em;
    font-weight: 100;
    width: 100%;
    height: 100px;

}


.contact_mail a {

    text-align:center;
    font-size: 1em;
    font-weight: 100;
    text-decoration: none;

}

a:hover { 
    color: #518fbb;
}

/* ----------------------------------index------------------------------------ */



.index_container {
    background-repeat: no-repeat;
    background-color: transparent;
    height: 305px;
    width: 100%;
    padding: 370px 0px 50px 0px;


}

.index_wind {
    float: left;
    background-repeat: no-repeat;
    background-color: transparent;
    height: 300px;
    width: 33%;
    padding: 0px 0px 0px 0px;

}

.index_water {
        float: left;
    background-repeat: no-repeat;
    background-color: transparent;
    height: 300px;
    width: 33%;
    padding: 0px 0px 0px 0px;

}

.index_solar {
        float: left;
    background-repeat: no-repeat;
    background-color: transparent;
    height: 300px;
    width: 33%;
    padding: 0px 0px 0px 0px;

}



.wind_icon {
    background: url(../images/index_wind.png) no-repeat center 0px; 
    width: 100%;
    height: 154px;
    padding: 0px 0px 0px 0px;
}

.wind_details {
    background-color: #fff;
    text-align:center;
    font-size: 1em;
    font-weight: 100;
    width: 100%;

}

.wind_text {

    background-color: #fff;
    text-align:center;
    font-size: 1em;
    font-weight: 100;
    padding: 0px 20px 0px 20px;

}

.water_icon {
    background: url(../images/index_water.png) no-repeat center 0px; 
    width: 100%;
    height: 154px;
    padding: 0px 0px 0px 0px;

}

.water_details {

    background-color: #fff;
    text-align:center;
    font-size: 1em;
    font-weight: 100;
    width: 100%;


}


.water_text {

    background-color: #fff;
    text-align:center;
    font-size: 1em;
    font-weight: 100;
    padding: 0px 20px 0px 20px;

}

.solar_icon {
    background: url(../images/index_solar.png) no-repeat center 0px; 
    background-color: transparent;
    width: 100%;
    height: 154px;
    padding: 0px 0px 0px 0px;
}

.solar_details {

    background-color: #fff;
    text-align:center;
    font-size: 1em;
    font-weight: 100;
    width: 100%;
}

.solar_text {

    background-color: #fff;
    text-align:center;
    font-size: 1em;
    font-weight: 100;
    padding: 0px 20px 0px 20px;


}

/* ----------------------------------Product Headings------------------------------------ */

.solar_power_heading
{
    background-repeat: no-repeat;
    background: url(../images/solar_power_heading.png) no-repeat  0px;
    width: 100%;
    height: 120px;
    padding: 0px 0px 0px 0px;

}

.transparent_hydro {

    width: 90%;
    background: url(../images/hydro_power_heading.png) no-repeat  0px;
    height: 120px; 
    float: left; 
    background-color: transparent;
}



.transparent_wind {

    width: 90%;
    background: url(../images/wind_energy_heading.png) no-repeat  0px;
    height: 120px; 
    float: left; 
    background-color: transparent;
}


.transparent_heat {

    width: 90%;
    background: url(../images/heatpumps_headings.png) no-repeat  0px;
    height: 120px; 
    float: left; 
    background-color: transparent;
}

.transparent_heat a { 

    color: #fff;

}

.transparent_wind a { 

    color: #fff;

}

.transparent_hydro a { 

    color: #fff;

}

.solar_power_heading a { 

    color: #fff;

}


.top{
    
    width: 10%; 
    height: 120px; 
    float: left;  
    background: url(../images/top.png) no-repeat 0px;


}

/* ----------------------------------Product details------------------------------------ */

.solar_thermal{
    width: 100%;


}

.solar_pv{  
    width: 100%;

    
}

.wind_energy{
    width: 100%;

}

.hydro_power{
    width: 100%;

}

.hydro_power_controls{ 
width: 100%;

    
}

.heat_controls{ 
width: 100%;

    
}

.solar_text_product {
    float: left;
    background-repeat: no-repeat;
    width: 100%;

}



/* ---------------------------------SOLAR THERMAL------------------------------------ */

.solar_thermal_text {
    float: left;
    background-repeat: no-repeat;
    width: 60%;

}

.solar_thermal_text p { 

    text-align: left;
    font-size: 1em;
    font-weight: lighter;
    margin: 0em 2em .75em 2em;

}

.solar_thermal_text h { 

    text-align: left;
    font-size: 1.5em;
    font-weight: lighter;
}

.solar_thermal_img {
    background: url(../images/solar_thermal_installation.jpg) no-repeat  0px;
    float: left;
    background-repeat: no-repeat;
    width: 40%;
    height: 300px;
        margin: 8em 0em 0em 0em;


}

.solar_thermal_text h2 { 
    text-align:center;
    color: #3d88c8 ;
    font-size: 2em; 
    letter-spacing: 0px; 
    font-weight: lighter; 
     line-height: 50px;
}

/* ---------------------------------SOLAR PV------------------------------------ */


.solar_pv_text {
    float: left;
    background-repeat: no-repeat;
    width: 60%;
    padding: 0px 0px 30px 0px;

}

.solar_pv_text p { 

    text-align: left;
    font-size: 1em;
    font-weight: lighter;
    margin: 0em 2em .75em 2em;

}

.solar_pv_text h { 

    text-align: left;
    font-size: 1.5em;
    font-weight: lighter;


}

.solar_pv_img {
    background: url(../images/solar_pv_installation.jpg) no-repeat  0px;
    float: left;
    background-repeat: no-repeat;
    width: 40%;
        height: 300px;
        margin: 8em 0em 0em 0em;

}




.solar_pv_text h2 { 
    text-align:center;
    color: #3d88c8;
    font-size: 2em; 
    letter-spacing: 0px; 
    font-weight: lighter; 
     line-height: 50px;
}

/* ---------------------------------wind energy------------------------------------ */


.wind_energy_text {
    float: left;
    background-repeat: no-repeat;
    width: 60%;
    padding: 0px 0px 30px 0px;

}

.wind_energy_text p { 

    text-align: left;
    font-size: 1em;
    font-weight: lighter;
    margin: 0em 2em .75em 2em;

}

.wind_energy_text h { 

    text-align: left;
    font-size: 1.5em;
    font-weight: lighter;


}

.wind_energy_img {
    background: url(../images/wind_energy_installation.jpg) no-repeat  0px;
    float: left;
    background-repeat: no-repeat;
    width: 40%;
        height: 300px;
        margin: 8em 0em 0em 0em;

}




.wind_energy_text h2 { 
    text-align:center;
    color: #3d88c8;
    font-size: 2em; 
    letter-spacing: 0px; 
    font-weight: lighter; 
     line-height: 50px;
}

.wind_energy_text a { 

    color: #3d88c8;
        font-weight: lighter;
        font-size: 1em; 

}

/* ---------------------------------------Hydro Power------------------------------ */
.hydro_power_text {
    float: left;
    background-repeat: no-repeat;
    width: 60%;


}

.hydro_power_text p { 

    text-align: left;
    font-size: 1em;
    font-weight: lighter;
    margin: 0em 2em .75em 2em;

}

.hydro_power_text h { 

    text-align: left;
    font-size: 1.5em;
    font-weight: lighter;


}

.hydro_power_img {
        background: url(../images/hydro_power_installation.jpg) no-repeat  0px;
    float: left;
    background-repeat: no-repeat;
    width: 40%;
        height: 300px;
        margin: 8em 0em 0em 0em;

}

.hydro_power_controls_text {
    float: left;
    background-repeat: no-repeat;
    width: 60%;


}

.hydro_power_controls_text p { 

    text-align: left;
    font-size: 1em;
    font-weight: lighter;
    margin: 0em 2em .75em 2em;

}

.hydro_power_controls_text h { 

    text-align: left;
    font-size: 1.5em;
    font-weight: lighter;


}

.hydro_power_controls_img {
        background: url(../images/hydro_power_controls.jpg) no-repeat  0px;
    float: left;
    background-repeat: no-repeat;
    width: 40%;
        height: 500px;
        margin: 2em 0em 0em 0em;

}

.hydro_power_text h2 { 
    text-align:center;
    color: #3d88c8 ;
    font-size: 2em; 
    letter-spacing: 0px; 
    font-weight: lighter; 
     line-height: 50px;
}

.hydro_power_text a { 

    color: #3d88c8;
        font-weight: lighter;
        font-size: 1em; 

}

.hydro_power_controls_text h2 { 
    text-align:center;
    color: #3d88c8;
    font-size: 2em; 
    letter-spacing: 0px; 
    font-weight: lighter; 
     line-height: 50px;
}

/* --------------------------------------Heatpumps------------------------------ */
.heat_text {
    float: left;
    background-repeat: no-repeat;
    width: 60%;


}

.heat_text p { 

    text-align: left;
    font-size: 1em;
    font-weight: lighter;
    margin: 0em 2em .75em 2em;

}

.heat_text h { 

    text-align: left;
    font-size: 1.5em;
    font-weight: lighter;


}

.heat_img {
        background: url(../images/heat_installation.jpg) no-repeat  0px;
    float: left;
    background-repeat: no-repeat;
    width: 40%;
        height: 300px;
        margin: 8em 0em 0em 0em;

}

.heat_controls_text {
    float: left;
    background-repeat: no-repeat;
    width: 60%;


}

.heat_controls_text p { 

    text-align: left;
    font-size: 1em;
    font-weight: lighter;
    margin: 0em 2em .75em 2em;

}

.heat_controls_text h { 

    text-align: left;
    font-size: 1.5em;
    font-weight: lighter;


}

.heat_controls_img {
        background: url(../images/heat_control_installation.jpg) no-repeat  0px;
    float: left;
    background-repeat: no-repeat;
    width: 40%;
        height: 500px;
        margin: 1.5em 0em 0em 0em;

}

.heat_text h2 { 
    text-align:center;
    color: #3d88c8 ;
    font-size: 2em; 
    letter-spacing: 0px; 
    font-weight: lighter; 
     line-height: 50px;
}



.heat_controls_text h2 { 
    text-align:center;
    color: #3d88c8;
    font-size: 2em; 
    letter-spacing: 0px; 
    font-weight: lighter; 
     line-height: 50px;
}