/**********************************************
				CityWater CSS
**********************************************/


/* Style the tab */
.page-node-1307 .aquatab {
  float: left;
  border: 0px;
  background-color: #fff;
  width: 30%;
  margin: 0px;
  padding: 0px;
}

/* Style the buttons inside the tab */
.page-node-1307 .aquatab button {
  display: block;
  background-color: inherit;
  color: #659ec8;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
  margin: 0px;
}
@media (max-width: 767px) {
.page-node-1307 .aquatab button {
  font-size: 15px;
}}

/* Change background color of buttons on hover */
.page-node-1307 .aquatab button:hover {
  background-color: #eee;
}

/* Create an active/current "tab button" class */
.page-node-1307 .aquatab button.active {
  color: black;
  border-left: 10px #005F61 solid;
  padding: 22px 6px;
}

/* Style the tab content */
.page-node-1307 .aquatabcontent {
  float: left;
  padding: 0px;
  border: none;
  width: 70%;
  border-left: none;
  min-height: 800px;
  overflow: hidden;
}
.page-node-1307 .aquatabcontent p {
  padding: 20px;
  width: 450px;
  line-height: 1.5em;
  color: #000000;
  transition-duration: 2s;
}
@media (max-width: 767px) {
.page-node-1307 .aquatabcontent p {
width: 90%;
}}




.AquaFull {
width: 1300px; max-width: 100%; min-height: 150px; padding: 0; margin: 0 0 50px 0; clear: left;
display: block; overflow: auto; height: 100%;
}
@media (max-width: 980px) {
.AquaFull {
width: 100%; float: left; min-height: 425px; display: flex; flex-direction: column;
}}


.AquaLeftHero {
float: left; width: 40%; margin: 0; padding: 110px 5% 50px; min-height: 150px; 
text-align: center;
}
@media (max-width: 980px) {
.AquaLeftHero {
width: 90%; float: left; padding: 75px 5% 0px; min-height: 80px; margin: 0 auto;
}}
.AquaRightHero {
float: right; width: 40%; padding: 75px 5%; min-height: 150px;
}
@media (max-width: 980px) {
.AquaRightHero {
width: 90%; float: left; padding: 25px 5%; min-height: 125px; margin: 0 auto; max-width: 70%;
}}
@media (max-width: 640px) {
.AquaRightHero {
padding: 25px 50px;
}}


.AquaLeftText {
float: left; width: 40%; margin: 0; padding: 50px 5%; min-height: 250px; 
}
.AquaLeftText h3 {
color: #005F61;
font-weight: 400;
font-size: 28px;
padding-left: 0;
}
@media (max-width: 980px) {
.AquaLeftText {
width: calc(80% - 10px); float: left; padding: 25px 10%; min-height: 125px;
border-right: 10px solid #005F61;
}
.AquaLeftText h3 {
max-width: 400px;
}
.AquaLeftText p {
max-width: 400px;
}}
.AquaRightImage {
float: right; width: calc(40% - 10px); margin: 0; padding: 0; min-height: 250px; 
border-right-width: 10px;
border-right-style: solid;
border-right-color: #005F61;
}
@media (max-width: 980px) {
.AquaRightImage {width: calc(100% - 10px); float: left; padding: 0;
}}


.AquaLeftImage {
float: left; width: calc(40% - 10px); margin: 0; padding: 0; min-height: 250px; 
border-left-width: 10px;
border-left-style: solid;
border-left-color: #005F61;
}
@media (max-width: 980px) {
.AquaLeftImage {width: calc(100% - 10px); float: left; order: 2; padding: 0;
}}
.AquaRightText {
float: right; width: 40%; margin: 0; padding: 50px 5%; min-height: 250px;
}
.AquaRightText h3 {
color: #005F61;
font-weight: 400;
font-size: 28px;
padding-left: 0px;
}
@media (max-width: 980px) {
.AquaRightText {
width: calc(80% - 10px); padding: 25px 10%; min-height: 125px; order: 1;
border-left: 10px solid #005F61;
}}
/*
@media (max-width: 640px) {
.AquaRightText {
padding: 25px 50px;
}}
*/



.CityWaterShare {
background-image: url('/images/citywater/cw22-cons-share-lrg-righttrans.png'); 
background-position: right -100px; background-repeat: no-repeat; 
background-size: auto;
}
@media (max-width: 980px) {
.CityWaterShare {
background-image: url('/images/citywater/cw22-cons-share-lrg-toptrans.png'); 
background-position: right -50px; background-repeat: no-repeat; 
}}

.CityWaterEnsure {
background-image: url('/images/citywater/cw22-cons-ensure-lrg-righttrans.png'); 
background-position: center center; background-repeat: no-repeat; 
background-size: auto;
}
@media (max-width: 980px) {
.CityWaterEnsure {
background-image: url('/images/citywater/cw22-cons-ensure-lrg.png'); 
background-position: center center; background-repeat: no-repeat; 
}}

.CityWaterIterate {
background-image: url('/images/citywater/cw22-cons-iterate-lrg.png'); 
background-position: left center; background-repeat: no-repeat; 
background-size: cover;
}
@media (max-width: 980px) {
.CityWaterIterate {
background-position: center center; background-repeat: no-repeat;
}}



/* LOOKUP TAB */

/* Lores background */
.CityWaterLookup {
background-image: url('/images/citywater/cw22-lookup-lo.png');
background-position: top left; background-repeat: no-repeat;
background-size: 1000px auto;
}
/* Hires background */
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.CityWaterLookup {
background-image: url('/images/citywater/cw22-lookup-hi.png');
background-size: 1000px auto;
}}
/* Lores Narrow background */
@media (max-width: 767px) {
.CityWaterLookup {
background-image: url('/images/citywater/cw22-lookup-narrow-lo.png');
background-position: center top;
background-size: 538px auto;
}
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.CityWaterLookup {
background-image: url('/images/citywater/cw22-lookup-narrow-hi.png');
}}}


/* ORGANIZE TAB */

/* Lores background */
.CityWaterOrganize {
background-image: url('/images/citywater/cw22-organize-lo.png');
background-position: top left; background-repeat: no-repeat;
background-size: 1000px auto;
}
/* Hires background */
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.CityWaterOrganize {
background-image: url('/images/citywater/cw22-organize-hi.png');
background-size: 1000px auto;
}}
/* Lores Narrow background */
@media (max-width: 767px) {
.CityWaterOrganize {
background-image: url('/images/citywater/cw22-organize-narrow-lo.png');
background-position: 0px 50px;
background-size: 538px auto;
}
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.CityWaterOrganize {
background-image: url('/images/citywater/cw22-organize-narrow-hi.png');
}}}


/* DELIVER TAB */

/* Lores background */
.CityWaterDeliver {
background-image: url('/images/citywater/cw22-deliver-lo.png');
background-position: top left; background-repeat: no-repeat;
background-size: 1000px auto;
}
/* Hires background */
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.CityWaterDeliver {
background-image: url('/images/citywater/cw22-deliver-hi.png');
background-size: 1000px auto;
}}
/* Lores Narrow background */
@media (max-width: 767px) {
.CityWaterDeliver {
background-image: url('/images/citywater/cw22-deliver-narrow-lo.png');
background-position: -100px top;
background-size: 538px auto;
}
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.CityWaterDeliver {
background-image: url('/images/citywater/cw22-deliver-narrow-hi.png');
}}}


/* ENGAGE TAB */

/* Lores background */
.CityWaterEngage {
background-image: url('/images/citywater/cw22-engage-lo.png');
background-position: top left; background-repeat: no-repeat;
background-size: 1000px auto;
}
/* Hires background */
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.CityWaterEngage {
background-image: url('/images/citywater/cw22-engage-hi.png');
background-size: 1000px auto;
}}
/* Lores Narrow background */
@media (max-width: 767px) {
.CityWaterEngage {
background-image: url('/images/citywater/cw22-lookup-engage-lo.png');
background-position: -100px top;
background-size: 538px auto;
}
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.CityWaterEngage {
background-image: url('/images/citywater/cw22-lookup-engage-hi.png');
}}}


/* ELEVATE TAB */

/* Lores background */
.CityWaterElevate {
background-image: url('/images/citywater/cw22-elevate-lo.png');
background-position: top left; background-repeat: no-repeat;
background-size: 1000px auto;
}
/* Hires background */
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.CityWaterElevate {
background-image: url('/images/citywater/cw22-elevate-hi.png');
background-size: 1000px auto;
}}
/* Lores Narrow background */
@media (max-width: 767px) {
.CityWaterElevate {
background-image: url('/images/citywater/cw22-elevate-narrow-lo.png');
background-position: -100px top;
background-size: 538px auto;
}
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.CityWaterElevate {
background-image: url('/images/citywater/cw22-lookup-elevate-hi.png');
}}}


/* USE TAB */

/* Lores background */
.CityWaterUse {
background-image: url('/images/citywater/cw22-use-lo.png');
background-position: top left; background-repeat: no-repeat;
background-size: 1000px auto;
}
/* Hires background */
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.CityWaterUse {
background-image: url('/images/citywater/cw22-use-hi.png');
background-size: 1000px auto;
}}
/* Lores Narrow background */
@media (max-width: 767px) {
.CityWaterUse {
background-image: url('/images/citywater/cw22-lookup-use-lo.png');
background-position: -100px top;
background-size: 538px auto;
}
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
.CityWaterUse {
background-image: url('/images/citywater/cw22-lookup-use-hi.png');
}}}

/*

.fade-in {
  animation: fadeIn ease 1.5s;
  -webkit-animation: fadeIn ease 1.5s;
  -moz-animation: fadeIn ease 1.5s;
  -o-animation: fadeIn ease 1.5s;
  -ms-animation: fadeIn ease 1.5s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

*/