@charset "utf-8";
/* Article add-ons Last updated June 9, 2026. Be excellent to each other */

a img {
  border-bottom:none!important; /* Removes the bottom border from linked images */
}

u {text-decoration: none;} /* This negates the u tag when it's imported. */

h3 {line-height:1.5!important;margin-top:5%}

:is(p:empty, p:has(> br:only-child)) + h3 {
  margin-top: 0;
}

/* This removes a preset right margin of 10px on all images in all articles. */
.page-article-show .body img{
	margin-right: auto;
}

/* Required for the container-based queries below, uses article column instead of whole screen */
.article-body, .page-article-show {
container-type: inline-size;
}


 .editorsnote {
  font-family: "Nunito Sans",sans-serif;  
  font-size:.9rem;
  color:#6D6E72;
  margin:1rem;
  }

 .editorsnote a {
	border-bottom:none!important;
  }

.rc-question {
    font-weight: bold;
    font-size:1.1em;
}

.td-question:before {
    color: #794400;
    content: "TD: ";
    font-weight: bold;
    font-style: italic;
}



#right {float:right;
  margin:0 0 1rem 1rem;}

#left {float:left;
  margin:0 1rem 1rem 0; }

@container (max-width: 550px){
#right, #left {float:none;margin:1rem 0;width:100%!important}
	
}


img.logo {max-width: 250px;
float:right;
  margin:2% 0 1.5% 3%!important;}


@container (max-width: 450px){
img.logo {max-width: 90%;
display:block;
float:none;
  margin:1.5% auto;}

}



/* This is for a responsive pull quote, right of the article */


  .pullquote {
  font-family: "Nunito Sans",serif;  
  font-size:1.2rem;
  color:#404144;
  max-width:350px;
  }
  
  .pullquote p {
  font-weight:600; 
  line-height:1.2;
  }
  
    .pullquote ul, .aside ul {
      padding-left:10px;
    }
  
@container (max-width: 600px) { 
  .pullquote {
  float:none;
  max-width:100%;
  padding:1rem;
  border-left:none!important;
  border-right:none!important;
  border-top: .2rem solid #006DAF;
  border-bottom: .2rem solid #006DAF;
  margin:4% auto;
  }
  
  .pullquote p {
  margin:0;
  padding:0;
  }
  
      .pullquote ul {
      padding-left:5px;
    }

  }

.pullquote#right {
  border-left: .5rem solid #006DAF;
  padding: 0 0 0 .5rem;
}

.pullquote#left {
  border-right: .5rem solid #006DAF;
  padding: 0 .5rem 0 0;
}

.attr {display:block;text-align:right;font-size:.9rem;color:#835f49;font-weight:700;}

.pullquote2 {
  font-family:'Nunito Sans', sans-serif;
  font-size: 1.5rem;
  font-style: italic;
  color: #D41633;
  background: #EAF1F7;
  border-left: .4rem solid #D41633;
  padding: 15px 20px;
  margin: 20px auto;
  max-width: 80%;
  text-align: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}



/* This contains an image and caption, floated right, expanding to full width for mobile. */
.aside, aside{
	float: right;
	width: auto;
	max-width: 50%;
	text-align: center;
}


aside img{
	max-width: 100%;
	height: auto;
	max-height: 400px;
}

.aside h4{
  font-family: 'Nunito Sans', sans-serif;  
	color: #404144;
}

.aside p, .aside li {
	margin: 5px auto;
    font-family: "Nunito Sans", sans-serif!important;
	font-size: .9rem;
	line-height: 1.3;
	text-align: left;
}

.aside a:link{
	border-bottom: none;
}




/* This contains an image and caption, full page width. 'fullwidth' is legacy. Use pic-1 moving forward */
.fullwidth{
	margin: 2% auto;
	text-align: center;
}

.fullwidth img{
	max-width: 100%;
	max-height: 400px;
}

.fullwidth p {
	margin: 5px auto;
	font-size: .9rem;
	line-height: 1.5;
	color: #404144;
  font-family: 'Nunito Sans', sans-serif;  
	text-align: center;
}



/* This contains an image and caption, full page width. */
.pic-1, .pic-2, .pic-3 {
	margin: 1rem auto .5rem auto;
	text-align: center;
	clear:both;

}

.pic-1 img{
	max-width: 100%;
}

.pic-2 img{
	max-width: 48%;
	margin: 1%;
}
.pic-3 img{
	max-width: 32%;
	margin: 1%;
}
.pic-1 p, .pic-2 p, .pic-3 p, .fullwidth p, .pagesWithStopsContainer p {
	margin: 5px auto;
	font-size: 11pt;
	line-height: 1.5;
	color: #404144;
  font-family: 'Nunito Sans', sans-serif; 
}

.pic-1.halfwidth {
	text-align:left;
}


/* If an image or paragraph is a direct child of a fullWidthDiv, their widths are restricted to create a slight margin. But this does not affect paragraphs within intervening divs in case those divs have their own margins. */
.fullwidth > img, .fullwidth > p{
	max-width: 95%;
}

/* This is necessary to remove the underline on a linked image. */
.fullwidth a:link{
	border-bottom: none;
}






/* This limits content to half-page width, expanding to full width for mobile. */
.halfwidth{
	display: inline-block;
	margin:0 .5% 1% .5%;
	width: 48%;	
	vertical-align: top;
}

@container (max-width: 600px){
	.halfwidth{
		display: block;
		margin-bottom: 1rem;
		width: 95%;		
	}
}





/* This limits content to third-page width, expanding to full width for mobile. */
.thirdwidth{
	display: inline-block;
	margin: 0 .5%;
	width: 31%;	
	vertical-align: top;
}

@media screen and (max-width: 700px){
	.thirdwidth{
		display: block;
		margin-bottom: 1rem;
		width: 95%;		
	}
}





/* This limits content to quarter-page width, expanding to full width for mobile. */
.quarterwidth{
	display: inline-block;
	margin: 0 1%;
	width: 23%;	
	vertical-align: top;
}

@container (max-width: 700px){
	.quarterwidth{
		display: inline-block;
		margin-bottom: .5rem;
		width: 48%;		
	}
}


@container (max-width: 600px){
	.quarterwidth{
		display: block;
		margin-bottom: .5rem;
		width: 99%;		
	}
}


:is(.halfwidth, .thirdwidth, .quarterwidth) ul, 
:is(.halfwidth, .thirdwidth, .quarterwidth) ol {
  margin: 0;
  padding: 0 .7rem;
}


/* This is the credits at the bottom of articles. */
.credits{
	margin-top: 5%;
	padding: 10px;
	background-color: #F4F5F6;
	font-family:'Nunito Sans', sans-serif;
}

.credits h3{
	font-size:1rem;
}

.credits p{
	font-size:.9rem;
	margin-top: 20px;
	line-height: 1.5;
}
.credits a:link{
	border-bottom: none;
}





/* This is the page wide transparent gray background for image modals. */
#imageModalBackground{
	display: none;
	padding-bottom: 40px;
	z-index: 2000000;
	width: 100%; 
	height: 100%; 
	position: fixed; 
	top: 0px; 
	left: 0px;
	background-color: rgba(48,48,48, 0.9);
	overflow: scroll;
	text-align: center;
}



/* This is the image within the modal. */
#imageModalBackground img{
	margin: 0px auto;
	max-width: 95%;
	border: 2px solid #ffffff;
	background-color: #ffffff;
	animation: imageModalZoomIn .25s;
}



/* This is the close icon. */
#imageModalClose{
	margin: 8px auto;
	padding: 5px;
	width: 30px;
	font-size: 18px;
	font-weight: bold;
	font-family:'Nunito Sans', sans-serif;
	line-height: 1.0;
	color: #ffffff;
	background-color: #000000;
	border: 1px solid #ffffff;
	border-radius: 50%;
	cursor: pointer;
}

#imageModalClose:hover{
	background-color: #ffffff;
	color: #000000;
}



/* This contains optional image captions within the modal. */
#imageCaptionContainer{
	display: none;
	margin: 10px auto 0px auto;
	padding: 10px;
	background-color: #ffffff;
	max-width: 90%;
	animation: imageModalZoomIn .25s;
}



/* This applies to the images on the page which are clicked to open the modal. */
.modalImage:hover{
	cursor: pointer;
	opacity: 0.8;
}



/* Apply imageModalZoomIn to the animation property of both "#imageModalBackground img" and "#imageCaptionContainer" for a zoom-in effect. */
@keyframes imageModalZoomIn{
	from{
		transform: scale(0.75);
	}
	to{
		transform: scale(1.0);
	}
}



/* Apply imageModalFadeIn to the animation property of both "#imageModalBackground img" and "#imageCaptionContainer" for a fade-in effect. */
@keyframes imageModalFadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

  .related {width:300px; border-left:1px solid #006DAF; padding-left:1%; margin-left:1%; float:right}
    .related h6 {font-family: 'Nunito Sans', sans-serif;  
	color: #404144;font-size:12pt; text-transform:uppercase;}
    .related a {font-family: 'Nunito Sans', sans-serif;  border-bottom:none!important;}

.related p {font-family: 'Nunito Sans', sans-serif;  
	color: #404144;}


/* This is the contractor profiles at the bottom of articles. */
.profile{
	padding: .5rem;
	background-color:#dcd7d1;
	font-family:'Nunito Sans', sans-serif;
	border-top:2px solid #F7901E;
	text-align:left;
}

.profile h3 {
	font-size: 1.6669rem!important;
	color:#00A289;
	margin-top: .5rem;
}

.profile h4{
	font-size: 1.331rem!important;
	color:#794400;
	margin-top: .5rem;
}

    .profile img.logo {max-width:125px;display:block; mix-blend-mode: multiply; margin:5px auto!important; float:none!important;}

.profile p {
	margin-top: 20px;
	line-height: 1.5;
}
.profile a:link{
	border-bottom: none;
}

.product-focus p {
	font-family: "Nunito Sans", sans-serif!important;
}

  .product-focus p:has(img) {
	margin-top:0!important;
	text-align:right;
	line-height:.5;
}

.product-focus li {
	font-family: "Nunito Sans", sans-serif!important;
}

.product-focus h3 {
	font-family: "Nunito Sans", sans-serif!important;line-height:1.1!important;margin-top:0;
}

.product-focus img {
display: block; margin: 2.5rem auto 0px auto!important; text-align: center;max-height:600px;
}

.product-focus a {
border-bottom:none!important;
}
.product-focus > .halfwidth {
	margin: 0;
}

/*RESPONSIVE MAP OR YT VIDEO */
.iframe-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}
.iframe-responsive iframe, .iframe-responsive video {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}


.podcast {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  grid-template-areas:
    "image title"
    "image desc"
    "player player";
  column-gap: 1rem;
  row-gap: 0.45rem;

  width: min(92%, 760px);
  margin: 1.4rem auto;
  padding: 0.85rem 0.95rem;
  box-sizing: border-box;

  border: 1px solid #eadfe1;
  border-left: 4px solid #be1e2d; /* subtle brand anchor */
  border-radius: 10px;

  background: #ffffff;
  box-shadow: 0 4px 14px rgba(60, 24, 28, 0.05);

  font-family: "Nunito Sans", sans-serif;
  color: #2f2a2b;
}

/* Image */
.podcast > a:first-of-type {
  grid-area: image;
  display: block;
  align-self: start;
  border-bottom:none!important;
}

.podcast img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0 !important;
  box-shadow: 0 6px 14px rgba(40, 18, 20, 0.12);
}

/* Title */
.podcast h4 {
  grid-area: title;
  margin: 0;
  align-self: end;

  font-weight: 800;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #241b1d;
}

/* Small accent instead of full underline */
.podcast h4::after {
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: #D41633;
}

/* Description */
.podcast p {
  grid-area: desc;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #404144;
  max-width: 60ch;
}

/* Audio */
.podplayer {
  grid-area: player;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0;                
  height: 42px;             
  display: block;
  border: 0;
  box-shadow: 0 4px 12px rgba(190, 30, 45, 0.18);
  accent-color: #D41633;
}

.podplayer:hover {
  box-shadow: 0 8px 22px rgba(190, 30, 45, 0.22);
}

/* Native controls */
.podplayer::-webkit-media-controls-panel {
  background: #ffffff;
  border-radius: 8px;
}

.podplayer::-webkit-media-controls-current-time-display,
.podplayer::-webkit-media-controls-time-remaining-display {
  font-size: 12px;
  color: #40383a;
}

/* Mobile */
@media only screen and (max-width: 600px) {
  .podcast {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "title"
      "desc"
      "player";

    padding: 0.75rem;
    row-gap: 0.6rem;
  }

  .podcast img {
    border-radius: 6px;
  }

  .podcast h4 {
    font-size: 1.1rem;
  }

  .podcast p {
    font-size: 0.92rem;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .podplayer {
    transition: none;
  }
}


.podplayer#rsppod {
	margin: 10px auto; width: 100%; padding: 5px; background: #A97A5F; border-radius: 25px;
}



@media only screen and (max-width: 600px) {
	
	    .aside{
		float: none;
		width: 100%;
		margin:1% auto 2% auto;
	}
	
	.pic-2 img, .pic-3 img{
		max-width: 100%;
		display:block;
		margin:1% auto 2% auto;
	}
}


	.buttonContainer {
		margin: 20px auto; text-align: center;
	}

        .interactive-button {
            background-color: #BF1E2E;
            color: #FFF!important;
            font-size: 18px;
            font-weight: bold;
            padding: 15px 30px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .interactive-button:hover {
            background-color: #d32f2f;
            transform: scale(1.05);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
        }

        .interactive-button:active {
            transform: scale(0.97);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }
        
        .interactive-button a {
            color: #ffffff!important;
            border-bottom:none!important;
        }








/* SDS Button with color shift and pulsing on hover */

button.sds-button {
  margin: 15px auto;
  font-family: "Nunito Sans";
  font-size: 20px;
  cursor: pointer;
  border-radius: 100px;
  padding: 15px 20px;
  border: 0px solid #000;   
  }

button.sds-button a {
  color: #FFFFFF!important;
  font-weight:500;
  border-bottom:none!important;
  
}
/* Initiate Auto-Pulse animations */
button.pulse-button {
  animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in;
}

/* Initiate color change for pulse-on-hover */
button.pulse-button-hover {
  animation: colorShift 10000ms infinite ease-in;
}

/* Continue animation and add shine on hover */
button:hover,
button:focus {
  animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in, hoverShine 200ms;
}

/* Declate color shifting animation */
@keyframes colorShift {
  0%, 100% {
      background: #5f4536;
  }
  50% {
    background: #213841;
  }
}

/* Declare border pulse animation */
@keyframes borderPulse {
  0% {
    box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255,.4), 0px 0px 0px 0px rgba(255,255,255,1);
  }
  100% {
    box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255,.2), 0px 0px 0px 10px rgba(255,255,255,0);
  }
}

/* Declare shine on hover animation */
@keyframes hoverShine {
  0%{
    background-image: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
  }
  50%{
    background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
  }
  100%{
    background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4) 100%);
  }
}


/*Key Takeaways Accordion */
.takeaways details {
  border: 1px solid #404144;
  border-radius: 12px;
  margin:0 auto 1rem auto;
  padding: 0.5rem 1rem;
}

.takeaways summary {
  font-size: 1.3rem;
  cursor: pointer;
  list-style: none;
  color:#006DAF;
}

.takeaways ul {
  list-style: none;
  margin-left:1rem;
  padding-left:1rem;
  margin-top: 0.75rem;  
  
}


.takeaways li::marker {
  content: "★ ";
  color: #F7901E;
  font-size: 1.1em;
}
	
	
.takeaways summary::-webkit-details-marker {
  display: none;
}

.takeaways summary::after {
  content: "➕";
  float: right;
  transition: transform 0.2s ease;
}

.takeaways details[open] summary::after {
  content: "➖";
}

/* Used for Editor's Choice Article */

.buzz-container {
  position: relative;
  width: 100%; /* Set your desired width */
  min-height: 480px; /* Set your desired height */
  background-size: cover;
  overflow: visible;
}


.buzz-headline {
  font-family:"Nunito Sans", sans-serif;
  background-color:#F4F5F6;
  padding: 10px;
  cursor: pointer;
  margin-top:40px;
  margin-bottom:0px!important;
}
.buzz-headline:hover. .buzz-headline:active {
  background-color:#E5F3FB;
}


.buzz-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}

.buzz-overlay.active {
  display: block;
}

.buzz-overlay .content {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 20px;
  color: white;
}

.buzz-overlay .content a {
  color: white;
  font-weight:bold;
  border-bottom:none;
  text-decoration: solid;
}