/* Department CSS Document */
/*For mobile first adaptive design place styles for mobile and up in the mobile and up area.
Place styles for tablet and up inside the media query in the tablet and up area.
Place styles for desktop only inside the media query in the desktop only area.

For questions or media query training contact Web Development Services.
*/
/* ====================== Mobile and Up ========================== */
nav.slideDeptNav ul li:last-child a:after, nav#deptNav ul li:last-child a:after {
    content: "\f08e";
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-left: 5px;
}

/* ====== Main hero collage ======*/
.collage-container {z-index: 1;}
.collage {
  position: relative;
  width: 1400px;
  height: 700px;
  overflow: hidden;
  margin:0 auto;
}
.cphoto {
  position: absolute;
  opacity: 0;
  transition: all 1s ease-in-out;
}
.p1 { top: 0; left: 0; animation: slideInLeft 1s 0.2s forwards;}
.p4 { top: 0; left: 0; animation: fadeIn2 1s 0.4s forwards;}
.p3 { top: 0; left: 0; animation: slideInRight 1s 0.6s forwards;}
.p2 { top: 0; left: 0; animation: fadeIn4 1s 0.8s forwards;}
.p6 { top: 0; left: 0; animation: slideInLeft 1s 1.2s forwards;}
.p5 { top: 0; left: 0; animation: slideInLeft 1s 1.4s forwards;}
.p7 { top: 0; left: 0; animation: fadeIn7 1s 1.8s forwards;}

@keyframes fadeIn1 { to { opacity: 1; transform: translate(0,0); } }
@keyframes fadeIn2 { to { opacity: 1; transform: translate(0,0); } }
@keyframes fadeIn3 { to { opacity: 1; transform: translate(0,0); } }
@keyframes fadeIn4 { to { opacity: 1; transform: translate(0,0); } }
@keyframes fadeIn5 { to { opacity: 1; transform: translate(0,0); } }
@keyframes fadeIn6 { to { opacity: 1; transform: translate(0,0); } }
@keyframes fadeIn7 { to { opacity: 1; transform: translate(0,0); } }
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px); /* start 100px left offscreen */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* end in place */
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px); /* start 100px to the right */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* end in place */
  }
}


body {
  font-family: 'arial' !important, sans-serif; 
  font-size: 16px;
}
.text-mont {font-family: "Montserrat", arial, sans-serif;}
p a {text-decoration: underline;}

.fit {width: fit-content;}

.jumbo.parallax, jumbo.fullbleed {padding: 0px 80px !important;}
.jumbo header {
  background-image: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.jumbo header h1 {
  color: #185c33;
  font-size: 5rem;
  text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
  text-shadow: none;
  font-weight: 800;
  display: block;
  position: absolute;
  top: 50px;
}
.jumbo header h1 span {
  color: #fff;
  font-size: 2rem;
  text-transform: uppercase;
  font-family: 'arial', sans-serif;
  font-weight: 700;
}
.header-center {
  margin: auto;
  float: none;
  display: block !important;
  width: max-content;
}

h1.ar-section-header, h1.ar-section-header-lg, h1.ar-section-header-sm {
  font-family: 'Rajdhani', sans-serif;
  font-size: 6vw;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 3.8rem;
  text-align: center;
  color: #185c33;	
  margin-bottom: 60px;
  display: block;
  position: relative;
}
h1.ar-section-header span, h1.ar-section-header-lg span, h1.ar-section-header-sm span {
  letter-spacing: .5em;
  font-size: 1.5rem;
  font-weight: 600;	
}
h1.ar-section-header:after, h1.ar-section-header-lg:after, h1.ar-section-header-sm:after {
  content: "";
  width: 150px;
  height: 30px;
  background: url('/annual-report/images/h1-after.png') no-repeat;
  position: relative;
  display: block;
  margin: auto;
  top: 30px;
}

h2.ar-section-header {
  font-family: 'Rajdhani', sans-serif;
  font-size: 4rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 3.8rem;
  text-align: center;
  color: #185c33;	
  margin-bottom: 60px;
  display: block;
  position: relative;
}
h2.ar-section-header span {
  letter-spacing: .4em;
  font-size: 1.1rem;
  font-weight: 700;	
}
h2.ar-section-header:after {
  content: "";
  width: 150px;
  height: 30px;
  background: url('/annual-report/images/h1-after.png') no-repeat;
  position: relative;
  display: block;
  margin: auto;
  top: 30px;
}
			
h3 {
  font-family: 'Rajdhani', sans-serif;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #275d38;
  letter-spacing: .1em;
  text-transform: uppercase;
}

h3.aag-title-box {
  font-family: arial, sans-serif;
  color: #fff;
  background: #185c33;
  padding: 2px 8px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  width: fit-content;
  margin-left: 10px;
  z-index: 1;
  display: block;
  position: relative;
}
h4 {font-weight: 700; text-transform: uppercase;}

.box-title {
  color: #000;
  background-color: #fff;
  border: 2px solid #4ba23f;
  padding: 6px 15px 5px;
  line-height: 2em;
  display: inline;
}
.box-title-drk {
  font-family: 'arial', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background-color: #185c33;
  padding: 6px 15px 5px;
  display: inline;
  width: fit-content;
line-height: 2em;
}		
.box-title-lt {
  font-family: 'arial', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background-color: #008940; /*formally #78be3f*/
  padding: 6px 15px 5px;
  display: inline;
  width: fit-content;
line-height: 2em;
}			
.ar-box-header {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #185c33;			
}
.ar-box-header span {
  color: #fff;
  background-color: #4ba23f;
  padding: 6px 15px 5px;
  line-height: 2em;
  display: inline;
}			
.sec-title span {
  color: #fff;
  background-color: #008940; /*formally #78be3f*/
  padding: 6px 15px 5px;
  line-height: 2em;
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.bg-content-white {
  background: rgb(255 255 255 / 70%);
  padding: 0px;
  color: #185c33;
  height: 100vh;
}	
			
.bg-lake {background: #88c6b9;}
.bg-ltgray {background: #f1f1f1;}

.border-dg {border: 2px solid #185c33;}			
.border-vg {border: 2px solid #78be3f;}
.border-lc {border: 2px solid #87c7ba;}

.moble-borders {border-left: 2px solid #185C33; border-right: 2px solid #185C33;}
.moble-border-l {border-left: 2px solid #185C33;}

.hs-lake-outline-img {
  display: block;
  position: relative;
  z-index: 3;
  margin-left: 15px; 
  margin-bottom: 15px;
}
.hs-lake-outline {
  border: 2px solid #87c7ba;
  display: block;
  position: absolute;
  z-index: 2;
  margin: -18px 30px 30px -5px;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
}


p.dfsar {margin-bottom: 30px;}			
p.dfsar span {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #185c33;				
}
			
.ar_hdr-content {
  margin-top: 14%;
  position: absolute;
  overflow: visible;
  width: 100%;
  height: 570px;
  z-index: 10;
}
	
.expand-card-container {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
}

.word-25 {
  color: #275d38;
  font: 700 normal 1.2em 'arial';
  text-transform: uppercase;
}			
			

.pm-block-container {
  display: block;
  position: relative;
  width: fit-content;
  float: none;
  margin: 0 auto;
}

.pm-block1 {
  background: #185c33;
  color: #fff;
  padding: 20px;
  float: left;
  margin-right: 15px;
  display: block;
  position: relative;
  width: 180px;
  aspect-ratio: 1 / 1;
}
.pm-block2 {
  background: #78be3f;
  color: #1E482C;
  padding: 20px;
  float: left;
  margin-right: 15px;
  display: block;
  position: relative;
  width: 180px;
  aspect-ratio: 1 / 1;
}
.pm-block3 {
  background:#008a40;
  color: #fff;
  padding: 20px;
  float: left;
  display: block;
  position: relative;
  width: 180px;
  aspect-ratio: 1 / 1;
}	
			
hr.dot-border-dark {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 4px dotted #78be3f;
}
hr.dot-border-lake {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 4px dotted #87c7ba;
}



.mobile-pic {display: none;}
.mobile-hide {display: block;}

.clear {clear: both; display: block;}
.center {    
  margin-left: auto;
  margin-right: auto;
  float: none;
}
.max1400 {max-width: 1400px;}
.max1200 {max-width: 1200px;}
.max960 {max-width: 960px;}
.max500 {max-width: 500px;}
.flex-padding-40 {padding: 40px;}
.padding-right-20-m {padding-right: 20px;}

.img-mobile-adjust-1 {
  float: left;
  border-right: 3px solid #fff;
  padding-right: 10px;
  margin-right: 11px;
}



/*-- award card --*/
.award-card {height: 320px;}
.award-name {
  color: #185C33;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.award-blurb {
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  padding-bottom: 20px;
}

a.spot-link {
  color: #fff;
  text-decoration: underline;
}
a.spot-link:hover {
  color: #C5E86C;
  text-decoration: underline;
  font-weight: 700;
}



.page-header {border-bottom: 0px solid #eee;}

hr.quote-dec {
  margin: 30px 0px 12px 30px;
  border-top: 6px dotted #87c7ba;
}
hr.quote-dec:before {
  content: "“";
  font-family: serif !important;
  font-weight: 800;
  color: #185C33;
  font-size: 52px;
  position: absolute;
  left: 14px;
  line-height: 20px;
}

hr.quote-lc-dotted:before {
  content: "“";
  font-family: "Arial", sans-serif !important;
  height: 20px;
  background: url(/annual-report/images/ar25_lake-dotted.png) repeat;
  position: relative;
  display: in-line block;
  margin: auto;
  top: 30px;
}

hr.stars-dotted {margin: 30px 0px 12px 0px;}
hr.stars-dotted:before {
  content: url("/annual-report/images/icon_3stars.png");
  height: 20px;
  background: url(/annual-report/images/ar25_lake-dotted.png) repeat;
  position: relative;
  display: in-line block;
  margin: auto;
  top: 0px;
}

/*-- Self typing text --*/
.word {
  color: #275d38;
  font: 700 normal 2em 'rajdhani';
  text-transform: italic;
  min-height: 150px;
}

hr.dot-border-dark {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 3px dotted #275d38;
}
.dot-border-flip {border-right: 3px dotted #fff;}


/* ====================== ANIMATED GRID ======================== */
.grid-container {
  display: flex;
  flex-wrap: wrap;
}
.grid-item {
  position: relative;
  opacity: 0;
  transition: opacity 0.5s;
}
.grid-item > div {
  background-color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: "Rajdhani", arial, sans-serif;
  line-height: 1.1em;
  font-weight: 500;
  height: -webkit-fill-available;
}
.grid-item.visible {opacity: 1;}
.grid-text {font-family: "Rajdhani", arial, sans-serif;}
.grid-text span {
  font-family: "Montserrat", arial, sans-serif;
  font-size: 2.2em;
  font-weight: 800;
  font-style: italic;
}
.grid-text span:nth-of-type(2) {
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 10px;
    font-weight: 300;
    font-style: normal;
    text-transform: none;
}

.grid-width-1a {aspect-ratio : 1 / 1;}
.grid-width-1b {aspect-ratio : 2 / 1;}
.grid-width-1c {aspect-ratio : 1 / 2;}
.grid-width-1 {aspect-ratio : 1 / 1; width: 12.5%;}
.grid-width-2 {aspect-ratio : 1 / 1; width: 25%;}

.bg_lyr-a1 {background-image: url("/annual-report/images/lyr-a1.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.bg_lyr-b1 {background-image: url("/annual-report/images/lyr-b1.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.bg_lyr-g1 {background-image: url("/annual-report/images/lyr-g1.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.bg_lyr-e2 {background-image: url("/annual-report/images/lyr-e2.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.bg_lyr-f3 {background-image: url("/annual-report/images/lyr-f3.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.bg_lyr-f32 {background-image: url("/annual-report/images/lyr-f32.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.bg_lyr-h2 {background-image: url("/annual-report/images/lyr-h2.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.bg_lyr-h3 {background-image: url("/annual-report/images/lyr-h3.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.bg_lyr-oval {background-image: url("/annual-report/images/lyr-oval.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.bg_lyr-oval2 {background-image: url("/annual-report/images/lyr-oval2.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}


/*secondary grid designs*/
.intro-mini-grid {margin-left: 80px;}
.bg_color_uvu-green {background-color: #185c33;}
.bg_color_wolverine-green {background-color: #008940;}
.bg_color_valley-green {background-color: #78be48;}
.bg_color_lake {background-color: #87c7ba;}
.bg_arch {background-image: url('/annual-report/images/icon_arch.png'); background-repeat: no-repeat; background-size: 100px; background-position: left bottom;}


.triangle-clip {
  width: 100%;
  height: 75px;
  background-color: white; /* Or an image, gradient, etc. */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Defines the triangle shape */
  margin-bottom: -1px;
}

/* ============ HORIZONTAL SCROLL TIMELINE ==========*/
.housing {width: 100%; border-top: 2px dotted #4ba23f; margin-top: 20px; margin-bottom: 40px;}
.timeline-group > .row {
  overflow-x: auto;
  white-space: nowrap;
  height: 450px;
  font-family: "Rajdhani", arial, sans-serif; 
}
.timeline-group > .row > .col-xs-3 {
  display: inline-block;
  float: none;
  vertical-align: top; 
  padding-top: 15px;
  height: 100%;
  min-width: 300px;
  max-width: 390px;
  margin-right: -5px;
}
.timeline-event {
  overflow-x: unset;
  white-space: initial;
  height: 175px;
  padding: 0 0 0 15px;
  max-width: 250px;
  color: #222;
}
.timeline-date {
  color: #000;
  text-transform: uppercase;
  font-weight: 600;
  border-left: 2px dotted #999;
  padding-left: 10px;
} 
.timeline-event-title {
  color: #275d38;
  text-transform: uppercase;	
}




/* ====================== ARCHIVE PAGE STYLES ========================== */
.archive-card {
  height: 150px;
  background: #efefef;
  border-radius: 4px;
  box-shadow: 0 1px 3px #00000012, 0 1px 2px #00000024;
  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}

/* ====================== SCREEN READER ONLY ========================== */
.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}


/*End media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {

}
@media only screen and (min-width: 960px) {
  .expand-card-section {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     gap: 10px;
  }	
}
/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1400px) {	
  h1.ar-section-header, h1.ar-section-header-lg, h1.ar-section-header-sm {line-height: 5rem;}
  h1.ar-section-header-lg {font-size:95px;}
}
@media only screen and (max-width: 1200px) {
  .cphoto-mobile {
     display: absolute;
     background-image: src=("/annual-report/images/cphoto-hero-mobile.webp");
     background-repeat: no-repeat;
  }
  .word {min-height: 180px;}
}
/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 769px) and (max-width: 1200px) {
	h1.ar-section-header-sm {font-size: 11vw;}
	h1.ar-section-header-sm {font-size: 10vw;}
	h1.ar-section-header, h1.ar-section-header-lg {line-height: 3.2rem;}
	.collage {width: 1400px; height: 700px; margin-left: -230px;}
}
@media only screen and (max-width: 992px) {
  .flex-padding-40 {padding: 20px;}
  .mobile-pic {display: block;}
  .mobile-hide {display: none;}
  .photo-cred {position: relative; bottom: 0; left: 0;}
  .intro-mini-grid {margin-left: 0px;}
  .dot-border-flip {border-bottom: 3px dotted #fff; border-right: none;}
  .collage {width: 960px; height: 475px; margin-left: auto;}
}

@media only screen and (min-width: 769px) and (max-width: 992px) {
	
}
/*End mobile styles*/
/* ====================== mobile and down (Overrides Mobile Styles) ========================== */
@media only screen and (max-width: 768px) {
  h1.ar-section-header-lg {font-size: 11vw;}
  h1.ar-section-header-sm {font-size: 95px;}
  h1.ar-section-header {font-size: 72px;}
  h2.ar-section-header {font-size: 3.8rem;}
  h2.ar-section-header span {letter-spacing: .3em}
  .padding-right-20-m {padding-right: 0;}
  .moble-borders {border-left: none; border-right: none;}
  .moble-border-l {border-left: none;}
  .jumbo.parallax, jumbo.fullbleed {padding: 0px 20px !important;}
}
@media only screen and (max-width: 600px) {
  h1.ar-section-header, h1.ar-section-header-lg, h1.ar-section-header-sm {line-height: 3rem;}
  .collage {
     position: relative;
     width: 800px;
     height: 545px;
     margin-left: -300px;
     margin-top: 270px;
     margin-bottom: -55px;
	}
}
/*end media query*/
/*End desktop only styles*/
/*END OF DOCUMENT*/