/* Author: @kevinBOUDOT */

/*

NOTE:

* google fonts_

font-family: 'Open Sans', sans-serif;
font-family: 'Montserrat', sans-serif;

TODO:

- 

*/


/************************************************************************/
/****************************** MAIN STYLE ******************************/
/************************************************************************/

/************/
/*   CSS3   */
/************/

body, html { -webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%; }

section#slice3{
	-webkit-transition: background .6s ease-out;
	-moz-transition: background .6s ease-out;
	-o-transition: background .6s ease-out;
	-ms-transition: background .6s ease-out;
	transition: background .6s ease-out;
}

section#slice4{
	-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.2);
	-moz-box-shadow: 0px 0px 20px rgba(0,0,0,.2);
	-o-box-shadow: 0px 0px 20px rgba(0,0,0,.2);
	-ms-box-shadow: 0px 0px 20px rgba(0,0,0,.2);
	box-shadow: 0px 0px 20px rgba(0,0,0,.2);
}

section#slice7 ul.list li{
	-webkit-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
    -o-transition: color .3s ease-in-out;
    -ms-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out;
}

section#slice7 div.solar ul li{
	-webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    -o-transition: background .3s ease-in-out;
    -ms-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

/* animations */
.rotate{-webkit-animation: rotate 8s infinite linear;-moz-animation: rotate 8s infinite linear;}
.antirotate{-webkit-animation: antirotate 8s infinite linear;-moz-animation: antirotate 8s infinite linear;}
.paused{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;}
.running{-webkit-animation-play-state:running;-moz-animation-play-state:running;}
@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}}
@-moz-keyframes rotate {from {-moz-transform: rotate(0deg);}to {-moz-transform: rotate(360deg);}}
@-webkit-keyframes antirotate {from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(-360deg);}}
@-moz-keyframes antirotate {from {-moz-transform: rotate(0deg);}to {-moz-transform: rotate(-360deg);}}

/***********/
/* Globals */
/***********/

/* blocks */
body, html{ background: #fff; height: 100%; }
body > section{ width: 100%; }

section {width: 100%;padding: 60px 0;}
.wrap{ width: 960px;margin:0 auto; }

/* texts */
p{font-family: 'Open Sans', sans-serif; font-size: 14px;line-height: 140%;color:#555555;text-align: center;}
h3, h4, section#slice7 ul.list li{color:#333333;font-family: 'Montserrat', sans-serif;text-align: center;text-transform: uppercase;}
h3{font-size: 24px;margin-bottom:38px;}
h4, section#slice7 ul.list li{font-size: 14px;margin-bottom:15px;}
a{text-decoration: none;}

/* hovers, toogles and active */
section#slice7 div.solar ul li:hover, section#slice7 div.solar ul li.active{background: #333333;}

/**********/
/* Header */
/**********/

header{ top:0;position: fixed;width: 100%;height:51px;z-index: 2;background: #2c2c2c;}
	header a.logo{ display: block;width: 160px;height: 48px;background: url('img/logo.png') no-repeat center;text-indent: -9999px;float: left; }
	header nav.mainnav{ float: right;margin-top: 17px;}
		header nav.mainnav ul li{float: left;margin-left: 27px;}
			header nav.mainnav ul li a {color:#999999;font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-size: 14px;}
			header nav.mainnav ul li.active a, header nav.mainnav ul li a:hover {color:#fff;}
	header div.colors{width:100%;height: 3px;position: absolute;bottom:0;}
		header div.colors span{float: left;width: 25%;height: 100%;}
		header div.colors span.pink{background: #f52b78;}
		header div.colors span.yellow{background: #fcbc32;}
		header div.colors span.green{background: #82c410;}
		header div.colors span.blue{background: #417cdb;}

/************/
/* Sections */
/************/

/* one */
section#slice1{margin-top:51px;background: #363636;}
	section#slice1 h1{color:#fff;font-family: 'Montserrat', sans-serif;font-size: 40px;text-align: center;font-weight: normal;line-height: 120%;}
	section#slice1 h2{color:#cccccc;font-family: 'Open Sans', sans-serif;font-size: 22px;text-align: center;margin-top: 43px;line-height: 150%;}
	section#slice1 form{ width:340px;margin:60px auto 0; position: relative;}
		section#slice1 form input[type="text"], section#slice1 form input[type="submit"]{border:none;margin:0;}
		section#slice1 form input[type="text"]{ width:318px;padding:14px 10px;border:1px solid #999999;}
		section#slice1 form input[type="submit"]{ width:340px;background: #1d8fcc;color:#fff;font-size: 18px;font-weight: normal;text-transform: capitalize;margin-top: 10px;cursor: pointer;padding:14px 0;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-ms-border-radius:2px;border-radius:2px;}
		section#slice1 form input[type="submit"]:hover{ background: #1e96d6; }
		section#slice1 form p.validation{font-size: 12px;margin-top: 10px;color: #f52b78;position: absolute;width: 100%;font-weight: bold;display: none;}

/* two */
section#slice2{background: #fff;border-bottom: 1px solid #d9dadb}

/* three */
section#slice3{background: #eceef1 url('img/screenshot.png') no-repeat center 200%; padding-bottom: 400px;}
section#slice3.passed{background-position: center 100%;}
	section#slice3 ul li{display: block;float: left;width: 33%;}
		section#slice3 ul li h3{margin-bottom:18px;}

/* four */
section#slice4{ background: #fff;}
	section#slice4 ul{ margin-bottom: 20px;}
		section#slice4 ul li{ width: 36%;margin: 80px 7% 0;float: left;padding-top: 100px; }
		section#slice4 ul li.user{ background: url('img/user.png') no-repeat center top; }
		section#slice4 ul li.building{ background: url('img/building.png') no-repeat center top; }
			section#slice4 ul li p{ font-size: 13px; }

/* five */
section#slice5{background: #fcbc32;}
	section#slice5 p { font-size: 40px; color:#fff; font-family: 'Montserrat', sans-serif; }

/* six */
section#slice6{background: #fff;}
	section#slice6 > ul{margin-top: 115px;margin-bottom: 20px;}
	section#slice6 > ul > li{ display: block; float: left; width: 245px; margin:0 33px; }
		section#slice6 ul li h4, section#slice6 ul li p{ text-align: left; }
		section#slice6 ul li p{ font-size: 13px;}
			section#slice6 > ul > li > ul > li{ margin-bottom: 10px;background: url('img/dot-list.png') no-repeat left 7px;padding-left: 20px;}

/* seven */
section#slice7{background: #eceef1;}
	section#slice7 div.wrap{margin-top:100px;width: 650px;}
		section#slice7 div.solar{width: 394px;height: 394px;position: relative;margin-bottom: 30px;float: left;}
			section#slice7 div.solar div.center, section#slice7 div.solar ul li{background: #1d8fcc;border-radius: 100%;}
			section#slice7 div.solar div.center{width: 187px;height: 187px;position: absolute;top:104px;left:104px;background: #1d8fcc url('img/ico_pros.png') no-repeat center;}
			section#slice7 div.solar ul {width: 100%;height: 100%;position: absolute;}
				section#slice7 div.solar ul li{width:73px;height: 73px;position: absolute;cursor:pointer;}
				section#slice7 div.solar ul li.pros{top:0;left:160px;}
				section#slice7 div.solar ul li.places{top:44px;right:44px;}
				section#slice7 div.solar ul li.vehicles{top:160px;right:0;}
				section#slice7 div.solar ul li.companies{bottom:44px;right:44px;}
				section#slice7 div.solar ul li.trainings{bottom:0;left:160px;}
				section#slice7 div.solar ul li.animals{bottom:44px;left:44px;}
				section#slice7 div.solar ul li.projects{bottom:160px;left:0;}
				section#slice7 div.solar ul li.equipments{left:44px;top:44px;}
					section#slice7 div.solar ul li i{display: block;width: 100%;height: 100%;}
					section#slice7 div.solar ul li.pros i{background: url('img/ico_pros.png') no-repeat center;}
					section#slice7 div.solar ul li.places i{background: url('img/ico_places.png') no-repeat center;}
					section#slice7 div.solar ul li.vehicles i{background: url('img/ico_vehicles.png') no-repeat center;}
					section#slice7 div.solar ul li.companies i{background: url('img/ico_companies.png') no-repeat center;}
					section#slice7 div.solar ul li.trainings i{background: url('img/ico_trainings.png') no-repeat center;}
					section#slice7 div.solar ul li.animals i{background: url('img/ico_animals.png') no-repeat center;}
					section#slice7 div.solar ul li.projects i{background: url('img/ico_projects.png') no-repeat center;}
					section#slice7 div.solar ul li.equipments i{background: url('img/ico_equipments.png') no-repeat center;}
		section#slice7 ul.list{float: right;margin-top: 30px;}
			section#slice7 ul.list li{text-align: left;margin-bottom: 30px;cursor: pointer;}
			section#slice7 ul.list li:hover, section#slice7 ul.list li.active{color:#1d8fcc;}

/* height */
section#slice8{background: #fff;}
	section#slice8 ul li{ width: 390px;margin: 80px 30px 0;float: left; }
		section#slice8 ul li p{ font-size: 13px; }

/* nine */
section#slice9{ background: #eceef1;}
	section#slice9 .wrap{ background:#fff;width: 868px;}

/**********/
/* Footer */
/**********/

footer{ padding-top: 65px;height: 145px;background: #333333; }
	footer p{ color:#fff; }
	footer i{ cursor: pointer;display: block;width: 57px;height: 45px;background: url('img/footer_ico.png') no-repeat center;margin:31px auto 0; }