/* 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 ========================== */
body {
  font-family: 'lato' !important, sans-serif; 
  font-size: 16px;
}
.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.jumbo.parallax, .jumbo.fullbleed {
  position: relative;
  background-image: url(/annual-report/images/ar_slwc-b2_2000px.jpg);
  background-size: cover;
  background-position: center;
  padding: 0px;
  height: 90vh;
  transition: background-position 0.1s ease-out, background-size 0.3s ease-out;
}
.jumbo header {	
  background-image: url(/annual-report/images/ar_slwc-bg2_2000px.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: bottom;
  background-position-x: center;
  margin-top: 50px;
  height: 90vh;
  padding-left: 10vw;
  padding-top: 20vh;
}

.jumbo header h1 {
  color: #FFF;
  font-size: 6rem;
  text-shadow: 2px 3px 8px rgb(62 62 62 / 78%);
}
.insrt-2_h1 {
  z-index: 4;
  display: block;
  position: relative;
  margin-top: -333px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3%;
  max-width: 400px;
}



.mobile-pic {display: none;}
.mobile-hide {display: block;}
.text-72-m {font-size: 72px;}
.clear {clear: both; display: block;}
.center {    
  margin-left: auto;
  margin-right: auto;
  float: none;
}
.max1200 {max-width: 1200px;}
.max1400 {max-width: 1400px;}
.max500 {max-width: 500px;}
.flex-padding-40 {padding: 40px;}
.sec-margin-60 {margin-top: 60px;}
.larger-t {font-size: 1.5em;}

.img-mobile-adjust-1 {
  float: left;
  border-right: 3px solid #fff;
  padding-right: 10px;
  margin-right: 11px;
}
img.circle-img {border-radius: 100%; max-width: 100px;}

.ar-beefy {
  font-family: "montserrat", "lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
}

h1, h2, h3, h4 {
  font-family: "montserrat", "lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #000;
}
h1.ar-beefy {font-size: 9vw;}
h2.ar-beefy {font-size: 50px; text-transform: uppercase;}
h3 {margin: 40px 0 25px; clear: both;}

.award-card {height: 220px;}
.award-name {
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  background: #275d38;
  width: fit-content;
  padding: 0 10px;
}
.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;
}

.sec-title span {
  color: #fff;
  background-color: #275d38;
  padding: 6px 15px 5px;
  line-height: 2em;
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.photo-cred {
  position: absolute;
  bottom: 0;
  left: 15;
  font-size: 12px;
  font-family: "rajdhani", sans-serif;
  padding: 15px;
}

.sec-5-offset {margin-top: 400px;}
.page-header {border-bottom: 0px solid #eee;}

hr.quote-dec {
  margin: 30px 0px 12px 30px;
  border-top: 3px dotted #275d38;
}
hr.quote-dec:before {
  content: "“";
  font-family: Arial, sans-serif !important;
  font-weight: 700;
  color: #78BE20;
  font-size: 52px;
  position: absolute;
  left: 14px;
  line-height: 20px;
}

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

/*-- sticky table of contents --*/
ul.sticky-contents {
  text-align: center; 
  margin-left: auto;
  margin-right: auto;
  float: none;
  margin-bottom: 0px;
  margin-block-start: 0px;
  padding-inline-start: 0px;
}
ul.sticky-contents a {color: #fff; line-height: .95em;}
ul.sticky-contents a li:hover {background: #48a23f;}
ul.sticky-contents li {
  list-style-type: none;
  display: inline-block;
  padding: 15px 20px;
  margin-bottom: 0px;
  margin-top: 0px;
}

.sticky-contents.mobile-hide {display:block;}
.sticky-contents.mobile-show {display:none;}

/*-- Subpage Headers --*/
.applyBar {
  position: fixed;
  padding: 0px;
  right: 0;
  width: 100%;
  overflow: hidden;
  z-index: 10;
  transition: all 0.5s;
  background-color: #275d38;
}
.headroom--unpinned:not(.headroom--bottom) .applyBar {
  top: 0;
  padding-left: 2px;
  transition: all 0.4s;
}
.headroom--pinned .applyBar, .headroom--bottom .applyBar {
  top: var(--headroom-height);
  padding-left: 2px;
  transition: all 0.4s;
}
#ar-header {
  background-color: #275d38;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-family: "rajdhani", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0px 40px;
  margin-top: 0px !important;
  transition: 0.4s;
}

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;}


/*==============BACKGROUND CHANGER===============*/
#bg-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1;
  transition: background-image 0.5s ease-in-out;
}

.bg-section {
  height: 100vh;
  position: relative;
  align-items: flex-start;
}

.bg-content-grn {
  background: rgb(20 99 45 / 63%);
  padding: 0px;
  color: #fff;
  height: 100vh;
}
.bg-content-grn h1, .bg-content-grn h2, .bg-content-grn h3 {color: #fff;}
.bg-content-grn-2 {
  background: rgb(20 99 45 / 63%);
  padding: 20px;
  color: #fff;
}
.bg-content-grn-2 h1, .bg-content-grn-2 h2, .bg-content-grn-2 h3 {color: #fff;}

.cd-fixed-bg {
  min-height: 100vh;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.background-div {background-attachment: scroll; /* Default behavior */}

.cd-fixed-bg.cd-bg-1 {
  background-image: url("/annual-report/images/ar_background_sec1.webp");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("/annual-report/images/ar_background_sec2.webp"); background-position-y: 60px; 
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("/annual-report/images/ar_background_sec3.webp"); background-position-y: 60px;
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("/annual-report/images/ar_background_sec4.webp"); background-position-y: 60px;
}
.cd-bg-5 {
  background-image: url("/annual-report/images/ar_background_sec5.webp"); 
  background-attachment: fixed;
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-position-y: 60px;
}

.impact-skateman {max-width: 450px; margin-top: -110px;}

.scroll-section {
  height: 100vh;
  position: relative;
}

.scroll-content {
  position: relative;
  z-index: 2;
  padding: 20px;
  background: rgb(19 93 57 / 80%);
  color: #fff;
}
.scroll-content h2 {
  color: #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 {}
.grid-text span {
  font-family: "Montserrat", arial, sans-serif;
  font-size: 2.2em;
  font-weight: 800;
  font-style: italic;
}

.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;}


/* ============ 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 mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
/*E@media only screen and (min-width: 768px) {
	
	
}*/


/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	#myscrollspy {
		position: fixed;
		width: 230px;
	}
}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (max-width: 1200px) {
	.jumbo header {margin-top: 0px;}
}

/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (max-width: 992px) {
	.jumbo.parallax, jumbo.fullbleed {
		padding: 80px;
		background-size: cover;
		height: 90vh;
		background-image: url(/annual-report/images/ar_slwc-bm_1200px.jpg);
		position: relative;
	}	
	
	.flex-padding-40 {padding: 20px;}
	.sec-margin-60 {margin-top: 20px;}
	#ar-header {font-size: 14px; padding: 0px;}
	.mobile-pic {display: block;}
	.mobile-hide {display: none;}
	.photo-cred {position: relative; bottom: 0; left: 0;}
		
	.dot-border-flip {border-bottom: 3px dotted #fff; border-right: none;}
	h2.ar-beefy {font-size: 2.2em;}
	ul.sticky-contents li {padding: 5px 10px;}
	.sticky-contents.mobile-hide {display:none;}
	.sticky-contents.mobile-show {display:block;}
	
	.cd-fixed-bg.cd-bg-2, .cd-fixed-bg.cd-bg-3, .cd-fixed-bg.cd-bg-4, .cd-bg-5 {background-position-y: 20px;}
	.cd-fixed-bg.cd-bg-4 {background-position-x: 80%;}
	.impact-skateman {margin-top: 0px; width: 100%;}
	.jumbo.parallax, jumbo.fullbleed {padding: 0px;}
	.jumbo header {padding-top: 44vh;}
}

@media only screen and (min-width: 769px) and (max-width: 992px) {
	
}

/*End mobile and up styles*/
/* ====================== mobile and down (Overrides Mobile Styles) ========================== */
@media only screen and (max-width: 768px) {
	.text-72-m {font-size: 54px;}
	ul.sticky-contents li {padding: 10px 7px;}
	h1.ar-beefy {font-size: 14vw; }
	.jumbo header h1 {font-size: 16vw; text-align: center;}
	.text-28 {font-size: 20px;}
}

/*end media query*/
/*End desktop only styles*/
/*END OF DOCUMENT*/