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

body{
    height:8000px;
}

.container {
    z-index: 1;
    position: relative;
    float: left;
    display:block;
    margin:2%;
    width: 96%;
    align-content: center;
    justify-content: center;
    text-align: center;

    
}
.page {
	padding-top: 100px;
	background-color: #fff;
	box-shadow: 0 3px 15px #FFF;
}
.hero{
	width:100%;
	position: relative;
}
.hero img{
	width:100%;
	height:auto;
}
.hero1{
	width:100%;
	position: relative;
}
.hero1 img{
	width:100%;
	height:auto;
}
.title{
	position:absolute;
	bottom:20px;
	left:50px;
	
}
.title1{
	font-size: 35pt;
    font-weight: bolder;
	color:#ffffff;
	text-align: left;
}
.title2{
	font-size: 55pt;
    font-weight: bolder;
	color:#ffffff;
	text-align: left;
}
.one{
	display: flex;
	width:100%;
	height:auto;
	margin-top: 50px;
	background-color: #fff;
	
}
.two{
	width:100%;
	height:700px;
	margin: 150px 0;
	position: relative;
	background-color: #fff;
}
.two img{

	width:70%;
	height:auto;
}
.dis{
	width:46%;
	margin:2%;

	color:#000;

}
.con{
	width:46%;
	margin:2%;
	height:700px;
	position: relative;
	background-color: #fff;
}
.blownup{
	width:100%;
	height:100%;
}
.blownup img{
	width:60%;
	height:auto;

	
}
.discription{
	font-size: 15pt;
	text-align: justify;
	text-indent: 50px;
	
}
.subtitle{
	font-size: 25pt;
	font-weight: bold;
    text-align: left;
}
.subtitle2{
	font-size: 25pt;
	font-weight: bold;
}
.legend{
	font-size: 18pt;
	text-align:left;
	margin-bottom: 10px;
	position: absolute;
	left:0;
	bottom:-10px;	
	
}
.legend1{
	font-size: 18pt;
	position: absolute;
	left:2%;
	bottom:0px;	
}
.legend ul li, .legend1 ul li {
	margin-top: 10px;
	font-size: 15pt;
	text-align: left;
	list-style:decimal;
}
.three{
	margin-top:100px;
	width:100%;
	height:700px;
	display: flex;
	text-align: center;
	background-color: #fff;
	
}
.circle{
	width:60%;
	height:700px;
}
.circle img{
	width:100%;
	height:auto;
}
.form{
	width:30%;
	height:700px;
	margin:2%;
	text-align: center;
	
}
.flow {
	width:40%;
	height:700px;
	margin:0 5%;
	text-align: center;
	font-size: 15pt;
}
.flow img{
	width:100%;
	height:auto;
}
.rain {
	width:100%;
	height:700px;
	text-align: center;
	font-size: 15pt;
}
.rain img{
	width:100%;
	height:auto;
}
.control{
	width:100%;
	display:flex;
	font-size: 20pt;
	margin-top: 10px;
	line-height: 100px;
}
.control :link{
	text-decoration: none;
	color:#FFF;
	
}
.control :active{
	text-decoration: none;
	
}
.control :visited{
	text-decoration: none;
	color:#FFF;
	
}
.control :hover{
	color:#32E317;
	opacity: .9;
	border-bottom: 5px solid #32E317;
}

.prev1, .main1, .next1{
	width:31.3%;
    height:100px;
	margin:1%;
}
.prev1{
	
	
}
.main1{
	border-left: 5px solid #32E317;
	border-right: 5px solid #32E317;
}
.next1{
	
}





@media screen and (max-width:1255px){
	body{
		height:7000px;
	}
	.title{
	position:absolute;
	bottom:20px;
	left:50px;
	text-align: left;
	
}
.title1{
	font-size: 35pt;
    font-weight: bolder;
	color:#ffffff;
}
.title2{
	font-size: 55pt;
    font-weight: bolder;
	color:#ffffff;
}
.one{
	display: block;
	width:100%;
	height:auto;
	margin-top: 50px;
}
.two{
	width:100%;
	height:500px;
	margin: 150px 0;
	position: relative;
}
.two img{

	width:70%;
	height:auto;
}
.dis{
	text-align: justify;
	display: block;
	width:80%;
	margin:10%;

}
.con{
	display: flex;
	width:96%;
	margin:2%;
	position: relative;
	
}
.con img{
	width:60%;
	height:auto;
}
.discription{
	font-size: 15pt;

}
.subtitle{
	font-size: 25pt;
	font-weight: bold;
    text-align: left;
}
.subtitle2{
	font-size: 25pt;
	font-weight: bold;
}
.legend{
	font-size: 15pt;
	text-align:left;
	margin-bottom: 10px;
	position: absolute;
	left:0;
	bottom:50px;	
}
.legend1{
	font-size: 15pt;
	position: absolute;
	left:2%;
	bottom:50%;	
}
.legend ul li, .legend1 ul li {
	margin-top: 10px;
	font-size: 12pt;
	text-align: left;
	list-style:decimal;
}
.three{
	margin-top:100px;
	width:100%;
	height:480px;
	display: flex;
	text-align: center;
	
}
.circle{
	width:60%;
	height:700px;
}
.circle img{
	width:100%;
	height:auto;
}
.form{
	width:30%;
	height:700px;
	margin:2%;
	text-align: center;
}
	.form img{
		width:98%;
		height:auto;
		margin:0 1%;
	}
.flow {
	width:40%;
	height:700px;
	margin:0 5%;
	text-align: center;
	font-size: 15pt;
}
.flow img{
	width:100%;
	height:auto;
}
.rain {
	width:100%;
	height:700px;
	text-align: center;
	font-size: 15pt;
}
.rain img{
	width:100%;
	height:auto;
}

   
	
	
}

@media screen and (max-width:1120px){
	body{
		height:6900px;
	}
	
	
	
}