/* Header and Navigation */
		

#dnn_contentPane1 {
	overflow: hidden;
}

header {
        animation: sky ease 10s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
      	background-color: #B9EBFF;
	    	background-size: 600% 100%;
	    	animation: gradient 3s linear 1;
	    	animation-direction: alternate;
}

    #headernav {
     		border-top: 1px solid #FFFFFF !important; 
      	border-bottom: 1px solid #FFFFFF !important;
    		padding-left: 30px;
    		padding-right: 30px; 
    		background-color: rgba(255, 255, 255, .3);
    		padding-left: 70px;
    		padding-right: 70px;
    }

		#headernav ul.navbar-nav a {
			color: #063453 !important;
			}

		#headernav li.nav-item div.dropdown-menu {

				border-radius: 0 0px 0px !important;
			}

		#headernav li.nav-item div.dropdown-menu {
        	border: 0 !important;
        	border-top: 2px solid #E0B03B !important;
        } 

        @media screen and (max-width: 990px) {
    #headernav ul.navbar-nav a {
        color: #FFFFFF !important;
    }
}

        .cobrand-logo {
    		max-width: 200px;
		}	

		.cobrand-logo:first-of-type {
			margin-right: 0rem !important;
		}


.navbar-brand {
	border-bottom: 0px !important;
}

/* Font Treatment */

@font-face {
  font-family: "roboto-400";

  src: url("https://www.awwa.org/Portals/4/2025/styles/fonts/Roboto-Medium.woff?ver=2024-05-29-102857-613fonts/roboto/Roboto-Regular.woff") format("woff");

  font-display: swap;
}

@font-face {
  font-family: "roboto-500";

  src: url("https://www.awwa.org/Portals/4/2025/styles/fonts/roboto/Roboto-Medium.woff") format("woff");

  font-display: swap;
}

@font-face {
  font-family: "roboto-600";

  src: url("https://www.awwa.org/Portals/4/2025/styles/fonts/roboto/Roboto-Bold.woff") format("woff");

  font-display: swap;
}

h1,
h2,
h3,
.counter {
  font-family: roboto, sans-serif !important;
  font-style: normal !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  font-weight: 500 !important;
  font-feature-settings: 'clig' off, 'liga' off !important;
  color: #000000 !important;

}

h1,
h2,
h3,
h5,
h6, {
	text-align: left !important;
}

h1 {
  font-size: 48px !important;
  line-height: 110% !important;
  letter-spacing: -0.96px !important;
  	color: #065589 !important;
  		text-align: left !important;

}

@media (min-width: 1024px) {
  h1 {
    font-size: 68px !important;
    line-height: 100% !important;
    letter-spacing: -1.36px !important;
    	text-align: left !important;

  }
}

h2 {

	font-size: 36px !important;
	line-height: 110% !important; /* 39.6px */
	letter-spacing: -0.72px !important;
	color: #0A6270 !important;
		text-align: left !important;
		text-transform: none !important;

}

@media (min-width: 1024px) {

  h2 {
    font-size: 48px !important;
    line-height: 100% !important;
    letter-spacing: -0.96px !important;
    	text-align: left !important;

  }
}

h3 {
  font-size: 36px !important;
  text-transform: none !important; 
  color: #3c3f41 !important;
  	text-align: left !important;

}



small {
  display: block !important;
  font-family: roboto-600, sans-serif !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  line-height: 140% !important;
  letter-spacing: 1.4px !important;
}

@media (min-width: 1200px) {
  small {
    font-size: 16px !important;
    letter-spacing: 1.6px !important;
  }
}

.eyebrow {
  display: block;
  font-family: roboto, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  line-height: 140%;
  letter-spacing: 1.4px;
  font-weight: 600 !important;
  color: #7E1A06;
  margin-bottom: 20px;
  margin-top: 100px;
  	text-align: left !important;

}

p {
  display: block;
  font-family: roboto, sans-serif;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: -0.09px;
  font-weight: 400;
  color: #3c3f41;
    	text-align: left !important;

}

p.button {
  font-family: roboto-600, sans-serif;
  letter-spacing: normal;
}

p.big {
  font-size: 24px;
  line-height: 150%;
  letter-spacing: -0.48px;
}

p.mid {
  font-size: 16px;
  letter-spacing: normal;
}

p.base {
  font-size: 14px;
  letter-spacing: 1.4px;
}

p:empty {
  display: none;
}

b,
strong {
  font-weight: 400;
}

.ace25-button {
	color: #006FB9;
	font-feature-settings: 'clig' off, 'liga' off;
	font-family: Roboto;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 140%; /* 25.2px */
}


.ace25-button:hover {
	color: #063453;
	text-decoration: none !important;
}


.ace25-button:after {
	margin-bottom: 50px;
}


.ace25-counter {
    margin-top: 100px;
    margin-bottom: 100px;
    background-color: #F1FAFB;
}

.counter strong {
    text-align: center;
    font-weight: 500 !important;
    color: #0A6270;
}

label {
  font-family: roboto, sans-serif;
  font-size: 14px !important;
  text-transform: uppercase !important;
  line-height: 140% !important;
  letter-spacing: 1.4px !important;
  font-weight: 600 !important;
  color: #7E1A06 !important
}

.ace25-video {
	text-align: center;
	width: 100%;
}


.ace25-image-left {
	float: left;
	width: 30%;
	margin-right: 100px;
}

.ace25-image-left img {
	width: 100%;
}

 @media screen and (max-width: 900px) {

		.ace25-image-left {
			display: none;
		}

	}

.ace25-float-left {
	float: left;
	width: 40%;
	}

 

.ace25-spacer {
	margin-top: 100px;
	margin-bottom: 100px;
}

.ace25-background-mnt-med {
	background-color: #F1FAFB; 
	background-image: url(https://www.awwa.org/Portals/4/2025/images/white-mountains-bacground-highlights.svg) ; 
	background-repeat: no-repeat; 
	background-position: bottom right;
	background-size:  70%;
	padding-top:  25px;
	padding-bottom:  25px;

}

.ace25-background-mnt-large {
	background-color: #F1FAFB; 
	background-image: url(https://www.awwa.org/Portals/4/2025/images/white-mountains-bacground-highlights.svg) ; 
	background-repeat: no-repeat; 
	background-position: bottom right;
	background-size:  85%;
	padding-top:  25px;
	padding-bottom:  25px;
}

  /*Advertisement */

  .ace-ad-desktop {
    display: block;
  }

  .ace-ad-mobile {
    display: none;
  }

  @media screen and (max-width: 900px) {


  .ace-ad-desktop {
    display: none;
  }

  .ace-ad-mobile {
    display: block;
  }

 } 

section.section {
border-top: 0px !important;
}

  /*Form*/

.form-side-photos {
    float: left;
    width: 30%;
}


.form-center-box {
    float: left;
    width: 40%;
    text-align: center;
    padding-left: 50px;
    position: relative;
    margin-bottom: 50px;
    height: 400px;
    overflow: hidden;
}

@media screen and (max-width: 1250px) {

		.ace-mobile-display-none-form {
        display: none;
    }

    .form-center-box {
        padding-left: 0px;
    }

    .form-side-photos {
        float:left; 
        width:30%;
    }
}


@media screen and (max-width: 990px) {

  /*form*/

    .form-center-box {
        width:100%; 
    }

    .form-side-photos {
        display: none;
    }
}


/*Homepage Sponsors*/

  .ACE24-sponsor-wrapper {
    max-width:70%; 
    text-align:center; 
    margin:auto;
  }

  .ACE24-sponsor-logo {
    width:28%; 
    text-align: center; 
    margin: auto;
    margin-top: 35px;
    margin-left: 25px;
    margin: auto;

  }

  .ACE24-sponsor-text {
    width: 63%;
    float: left;
    border-right: 1px solid #EEEEEE;
    padding-right: 30px;
}

  .ACE24-sponsor-logo img{
    width: 100%
  }

@media (max-width: 1250px) {
		
			.ACE24-sponsor-logo {
				width: 80%;
			}

    .ACE24-sponsor-text {
        width: 100%;
        float: left;
        border-right: none;
        padding-right: 0px;
        text-align: center;
    }
}


		}

@media screen and (max-width: 900px) {
		.ACE24-sponsor-logo {
				width: 100%;
			}
		}


/* Sponsors  */


@media screen and (max-width: 1000px) {

.owl-item .img-fluid {
    max-width: 50% !important;
    margin: auto;
  }

 }

footer {
    background: #065589 !important;
}

footer .footer-copyright {
	background-color: #063453;
} 

/* Animation  */

		#animation-container {
			/*border: 1px solid red; */
			  overflow: hidden;
			  position: relative;
		 		 max-width: 250vh;
		  		/* 16/9 = 1.778 */
		 		height: 45vw;
		  		/* height:width ratio = 9/16 = .5625  */
		 		max-height: 100vh;
		  	background-color: black;
		  	margin-top: -7%; 
    		z-index: -2;
    		overflow: hidden;
		}


		@media (max-width: 1000px) {

			#animation-container {
  		  	margin-top: 0%; 
				}
		}

	#sky {
			width: 120%;
			height: 100%; 
			position: absolute;
			animation: sky ease 10s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
      	 	background-color: #B9EBFF;
	    	background-size: 600% 100%;
	    	animation: gradient 3s linear 1;
	    	animation-direction: alternate;
		} 

@keyframes gradient {
    	0% {/*background-color: #86cad7;*/
				background-color: #1f263b;
    	}

    	100% {background-color: #B9EBFF;
		    }
		}


		#sun-container {
				width: 99.5vw;
		 		max-width: 200vh;
		  	/* 16/9 = 1.778 */
		 		height: 30vw;
		  	/* height:width ratio = 9/16 = .5625  */
		 		max-height: 100vh;
		  	/*	display: flex;
		  	align-items: flex-end;
		  	/*border: 1px solid red;*/ 
				animation: sunmoving ease 3s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		    animation-delay: .8s;
		    padding-top: 25%;
		}

			@keyframes sunmoving {
		    0% {
		    	padding-top: 25%;
		    }

		    100% {
		    	padding-top: 15%;
		    }
		}


		#sun-box {
				width: 30vw;
				height: 30vw;
		   	display: absolute;
		   	animation: sunsizing ease 3s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		    /*border: 1px solid green;*/
		    margin-left: 16%;
		    animation-delay: 1s;
		}


			@keyframes sunsizing {
		    0% {
		    	width: 28vw;
				height: 28vw;
				margin-left:16%;
		    }

		    100% {
		   	width: 18vw;
				height: 18vw;
				margin-left: 23%;
		    }
		}
		
		#sun {
			border-radius: 50%;
			width: 100%;
			height: 100%;
			width: absolute;
			animation: suncolor ease 3s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		    background-color: #F48037;
		   	animation-delay: 1s;
		   	bottom: 0;
		}

		@keyframes suncolor {
		    0% {

		    }

		    100% {
		   		background-color: #fff0c4;
		    }
		}

		#white-mountains-w {
			margin-top: 18%;  
			width: 126%;
			margin-left: -20%;
			/*margin-top: 20vh; */
			color: #ffffff;
			z-index: 3;
			position: absolute;
			animation: whitemnt ease 1s;
		  animation-iteration-count: 1;
		  animation-fill-mode: forwards;
		}



		@keyframes whitemnt {
		    0% {
		    	margin-top: 17%;
		    }

		    100% {
		        margin-top: 18%;

		    }
		}

		#elevate-logo {
			width: 35%;
			margin-left: 30%;
			margin-top: 8.5%;
			animation: elevate-logo ease 10s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
	    	animation-direction: alternate;
	    	position: absolute;
	    	z-index: 30;
	    	opacity: 0%;
	    	animation-delay: 2s;
		}


			@keyframes elevate-logo {
		    0% {
		    	opacity: 0%;

		    }

		    100% {
		        opacity: 100%;

		    }

		}


		@media screen and (max-width: 990px) {

			#elevate-logo {
			width: 70%;
			margin-left: 15%;
			margin-top: 0%;
		}

	}

		#white-box {
			width: 140%;
			height: 500px;
			margin-left: -10%;
			background-color: #EEEEEE;
			z-index: 4;
			position: absolute;
			margin-top: 20%;
			border: 1px solid red; 
		}

		#mountain-b-1 {
			margin-top: 15%;
			width: 152%;
			margin-left: -24%;
			z-index: 4;
			position: absolute;
		    animation: mountain-b-1 ease 1s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		}

		@keyframes mountain-b-1 {
		    0% {
		     	margin-left: -24%;
		    }

		    100% {
		        margin-left: 33%;
		    }
		}

		#mountain-b-2 {
				margin-top: 20%;
			width: 152%;
			margin-left: -24%;
			z-index: 4;
			position: absolute;
		    animation: mountain-b-2 ease 1s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		}

		@keyframes mountain-b-2 {
		   0% {
		     	margin-left: -44%;
		    }

		    100% {
		        margin-left: 65%;
		    }
		}

		#mountain-b-3 {
			margin-top: 18.4%;
			width: 144%;
			margin-left: -15%;
			z-index: 4;
			position: absolute;
		    animation: mountain-b-3 ease 1s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;

		}



	#mountain-b-4 {
				margin-top: 20%;
			width: 152%;
			margin-left: -24%;
			z-index: 4;
			position: absolute;
		    animation: mountain-b-4 ease 1s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		}

		@keyframes mountain-b-4 {
		   0% {
		     	margin-left: -44%;
		    }

		    100% {
		        margin-left: -15%;
		    }
		}





		@keyframes mountain-b-3 {
		    0% {
		     	margin-left: -15%;
		    }

		    100% {
		        margin-left: 15%;
		    }
		}

		#mountain-r-1 {
			margin-top: 24%;
			width: 144%;
			margin-left: 15%;
			z-index: 5;
			position: absolute;
		    animation: mountain-r-1 ease 1s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		}

		@keyframes mountain-r-1 {
		    0% {
		     	margin-left: -13%;

		    }

		    100% {
		        margin-left: 13%;

		    }
		}

		#mountain-r-2 {
			margin-top: 30%;
			width: 85%;
			margin-left: -20%;
			z-index: 6;
			position: absolute;
		    animation: mountain-r-2 ease 1.8s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;

		}

		@keyframes mountain-r-2 {
		    0% {
		     	margin-left: -20%;
		    }

		    100% {
		        margin-left: 0%;
		    }
		}


		#mountain-r-2-5 {
			margin-top: 25%;
			width: 85%;
			margin-left: -20%;
			z-index: 5;
			position: absolute;
		  animation: mountain-r-2-5 ease 1.8s;
		  animation-iteration-count: 1;
		  animation-fill-mode: forwards;
		}

		@keyframes mountain-r-2-5 {
		    0% {
		     	margin-left: -18%;
		    }

		    100% {
		        margin-left: 65%;
		    }
		}

		#mountain-r-3 {
			margin-top: 28%;
			width: 144%;
			margin-left: 46%;
			z-index: 7;
			position: absolute;
		    animation: mountain-r-3 ease 1.2s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		}

		@keyframes mountain-r-3 {
		  0% {
		     	margin-left: -46%;
		    }

		    100% {
		        margin-left: 46%;

		    }
		}

		#mountain-r-3 {
			margin-top: 26.4%;
			width: 144%;
			margin-left: 45%;
			z-index: 7;
			position: absolute;
		    animation: mountain-r-3 ease 1.2s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		}

			@keyframes mountain-r-3 {
		  0% {
		     	margin-left: -45%;
		    }

		    100% {
		        margin-left: 45%;
		    }
		}

		#mountain-r-4 {
			margin-top: 28%; 
			width: 120%;
			margin-left: 78%;
			z-index: 7;
			position: absolute;
		    animation: mountain-r-4 ease .9s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		}


		@keyframes mountain-r-4 {
		  0% {
		     	margin-left: -78%;

		    }

		    100% {
		        margin-left: 78%;

		    }
		}

		#mountain-y-1 {
			margin-top: 22.4%;
			width: 140%;
			margin-left: 25%;
			z-index: 6;
			position: absolute;
		    animation: mountain-y-1 ease 1.5s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		}

		@keyframes mountain-y-1 {
		    0% {
		     	margin-left: -25%;
		    }

		    100% {
		        margin-left: 25%;

		    }
		}

		#mountain-y-2 {
		    margin-top: 24%; 
			width: 136%;
			margin-left: 0%;
			z-index: 6;
			position: absolute;
		    animation: mountain-y-2 ease 1.5s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		}

		@keyframes mountain-y-2 {
		    0% {
		     	margin-left: 130%;
		    }

		    100% {
		        margin-left: 0%;

		    }
		}

		#mountain-y-3 {
			margin-top: 27.2%;
			width: 136%;
			margin-left: 60%;
			z-index: 6;
			position: absolute;
		    animation: mountain-y-3 ease 1.5s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		}

		@keyframes mountain-y-3 {
		    0% {
		     	margin-left: 160%;
		    }

		    100% {
		       	margin-left: 60%;
		    }
		}

		.color-mountains {
			animation: colormountains ease 3s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		    animation-delay: .8s;
		    filter: grayscale(100%);
		}

		@keyframes colormountains {
		    0% {
		    }

		    100% {
		        filter: grayscale(0%);
		    }

		}


		.color-mountains-2 {
			animation: colormountains-2 ease 3s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		    animation-delay: 1.5s;
		    filter: grayscale(100%);
		}

		@keyframes colormountains-2 {
		    0% {
		    }

		    100% {
		        filter: grayscale(0%);
		    }

		}


		.color-mountains-3 {
			animation: colormountains-3 ease 3s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		    animation-delay: 2s;
		    filter: grayscale(100%);
		}

		@keyframes colormountains-3 {
		    0% {
		    }

		    100% {
		        filter: grayscale(0%);
		    }

		}

		#shore {
			margin-top: 4%;
			width: 120%;
			margin-left: -10%;
			z-index: 20;
			position: absolute;
			animation: shore ease 1s;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		}


		@keyframes shore {
		    0% {
		    	margin-top: 4.4%;

		    }

		    100% {
		        margin-top: 4%;

		    }

		}

		#water {
			margin-top: 8.2%;
			width: 120%;
			margin-left: -10%;
			z-index: 21;
			position: absolute;
		}

		#water-overlay {
			margin-top: 0%;
			width: 120%;
			margin-left: -10%;
			z-index: 22;
			position: absolute;
			animation: wateroverlay ease 2s;
		  animation-iteration-count: infinite;
		  animation-fill-mode: forwards;
		}

		@keyframes wateroverlay {
		    0% {
		      opacity: 1;
		    }

		      50% {
		        opacity: .5;
		    }

		    100% {
		        opacity: 1;
		    }
		}


	.text-box-outer  {
			width: 100%;
			text-align:  center;

		}


		.text-box {
			width: 900px;
			margin: auto;
			text-align: left;
			background-color: rgba(255, 255, 255, .7);
			padding: 10px 50px;
			border: 1px solid #FFFFFF;

		}