*
{
margin:0;
padding:0;
}
body
{
  width:100%;
  font-family: "Varela Round", Arial, sans-serif;
  font-weight: 400;
}

section {
  width:100%;
  font-family: "Varela Round", Arial, sans-serif;
  font-weight: 400;
}
section .hero {
 background-image: url("../img/hero-bg.jpg");
 width:100%;
 height:780px;
}
section .hero2 {
	padding-top:50px;
}
section .hero-sus {
 background-image: url("../img/hero-sus-l.jpg");
 background-repeat:no-repeat;
 width:100%;
 height:600px;
}
section .hero-brand {
 background-image: url("../img/hero-brand-l.jpg");
 background-repeat:no-repeat;
 width:100%;
 height:750px;
}
section .hero-water {
 background-image: url("../img/hero-water-l.jpg");
 background-repeat:no-repeat;
 width:100%;
 height:750px;
}
section .hero-contact {
 background-color:#6dc5df;
 width:100%;
 height:500px;
}
.pg1-txt {
	position: relative;
    top: 60px;
    line-height: 110%;
    width: 560px;
    margin-left: 90px; 
}
.pg1-title1 {
	font-size:26px;
	text-transform: uppercase;
	color:#38a3c3;
	font-weight:bold;
	line-height: 150%;
}
.pg1-title2 {
	font-size:30px;
	text-transform: uppercase;
	color:#145282;
	font-weight:bold;
	line-height: 250%;
}
.pg1-2-txt {
	text-align:justify;
	font-size:17px;
	text-transform: uppercase;
	color:#227825;
}

.pg2-txt {
	position: relative;
    top: 160px;
    line-height: 110%;
    width: 75%;
    margin-left: 90px; 
}
.pg2-title1 {
	font-size:26px;
	text-transform: uppercase;
	color:#ffffff;
	font-weight:bold;
	line-height: 150%;
}
.pg2-title2 {
	font-size:30px;
	text-transform: uppercase;
	color:#ffffff;
	font-weight:bold;
	line-height:90%;
}
.pg2-2-txt {
	text-align:justify;
	font-size:17px;
	text-transform: uppercase;
	color:#0d0795;
}

.pg3-txt {
	position: relative;
    top: 30px;
    line-height: 110%;
	width:40%;
    margin-left: 670px; 
}
.pg3-title1 {
	font-size:24px;
	text-transform: uppercase;
	color:#0a8076;
	font-weight:bold;
	line-height: 150%;
}
.pg3-title2 {
	font-size:21px;
	text-transform: uppercase;
	color:#0d2786;
	font-weight:bold;
	line-height:110%;
}
.pg3-title3 {
	padding-top:450px;
	font-size:21px;
	text-transform: uppercase;
	color:#0d2786;
	font-weight:bold;
	line-height:110%;
}
.pg3-2-txt {
	text-align:center;
	font-size:17px;
	text-transform: uppercase;
	color:#0d0795;
}	

.pg4-txt {
	position: relative;
    top: 30px;
    line-height: 110%;
	width:60%;
    margin-left: 90px; 
}
.pg4-title1 {
	font-size:30px;
	text-transform: uppercase;
	color:#145282;
	font-weight:bold;
	line-height: 150%;
}
.pg4-title2 {
	font-size:19px;
	text-transform: uppercase;
	color:#0d2786;
	font-weight:bold;
	line-height:130%;
}
.pg4-email {
	font-size:18px;
	color:#0d2786;
	font-weight:bold;
	line-height:130%;
}

.responsive{
  max-width:100%;
  max-height:100%;
}

.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.navigation
{
background-color:#145282;
}
.navigation > .container
{
max-width:90%;
margin:auto;
}
.navigation .navbar
{
position:relative;
}
.navigation .navbar .logo-toggle-container
{
	position:absolute;
	top:5px;
	display: block;
	margin-left: 42%;
	margin-right: auto;
	transform:translate(0,0);
		 
}
.navigation .navbar .logo-toggle-container a
{
display:block;
}
.navigation .navbar .logo-toggle-container a img
{
width:180px;
}
.navigation .menu
{
text-align:right;
}
@media screen and (max-width:1400px)
{
	section .hero-sus {
	 background-image: url("../img/hero-sus.jpg");
	 background-repeat:no-repeat;
	 width:100%;
	 height:600px;
	}
	section .hero-brand {
	 background-image: url("../img/hero-brand.jpg");
	 background-repeat:no-repeat;
	 width:100%;
	 height:615px;
	}
	section .hero-water {
	 background-image: url("../img/hero-water.jpg");
	 background-repeat:no-repeat;
	 width:100%;
	 height:715px;
	}
}

@media screen and (min-width:1024px)
{

	 
	.navigation .menu
	{
	display:block !important;
	height:auto !important;
	}
}

.navigation .menu li
{
display:inline-block;
padding:43px 35px;
}
.navigation .menu li:nth-child(3)
{
	padding-left:360px;
}
.navigation .menu li a
{
display:block;
padding:8px 15px;
text-decoration:none;
font-weight:600;
letter-spacing:1px;
color:#ffffff;
font-size:16px;
}
.navigation .menu li:nth-child(1),
.navigation .menu li:nth-child(2),
.navigation .menu li:nth-child(3)
{
float:left;
}
.navigation .menu li:hover a
{
color:#05d2b8;
}

@media screen and (max-width:767px)
{	
	 section .hero-sus {
	 background-image: url("../img/sus-mob.jpg");
	 width:100%;
	 height:776px;
	 }
	 section .hero-brand {
	 background-image: url("../img/brand-mob.jpg");
	 width:100%;
	 height:776px;
	 }
	 section .hero-water {
	 background-image: url("../img/water-mob.jpg");
	 width:100%;
	 height:776px;
	 }
	.pg1-txt {
		position: relative;
		top: 40px;
		line-height: 110%;
		width: 94%;
		margin-left: 10px; 
	}
	.pg2-txt {
		position: relative;
		top: 160px;
		line-height: 110%;
		width: 94%;
		margin-left: 10px; 
	}
	.pg3-txt {
	position: relative;
    top: 30px;
    line-height: 110%;
	width:94%;
    margin-left: 10px; 
	}
	.pg3-title2 {
	line-height:120%;
	}
	.pg3-title3 {
		line-height:120%;
		color: black;
	  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
	  -webkit-text-stroke-width: 1px;
	  -webkit-text-stroke-color: black;
	}
	.pg4-txt {
		position: relative;
		top: 30px;
		line-height: 110%;
		width:94%;
		margin-left: 10px; 
	}
	.navigation .navbar .logo-toggle-container
	{
    width:100%;
	margin:0;
	position:relative;
	left:0%;
	margin-right: auto;
	transform:translate(0%);
	 
	}
	.navigation .navbar .logo-toggle-container a
	{
	width:95%;
	}
	.navigation .navbar .logo-toggle-container .toggle-box
	{
	position:absolute;
	right:10px;
	top:30px;
	display:block;
	width:30px;
	background:#000;
	padding:15px 9px;
	cursor:pointer;
	border-radius:5px;
	}
	.navigation .navbar .logo-toggle-container .toggle-box span
	{
	display:block;
	max-width:90%;
	margin:auto;
	height:2px;
	background-color:#fff;
	margin-bottom:4px;
	}
	.navigation .navbar .logo-toggle-container .toggle-box span:last-child
	{
	margin-bottom:0;
	}
	.navigation .menu
	{
	text-align:right;
	display:none;
	}
	.navigation .menu li
	{
	display:block;
	float:none !important;
	padding:0 10px;
	border-bottom:1px solid #d5d7d8;
	}
	.navigation .menu li:nth-child(3)
	{
		padding-left:10px;
	}
	
}