@charset "utf-8";
/* Article add-ons Last updated December 17, 2025. Party on, dude */

a:has(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:not(:first-child) {line-height:1.5!important;margin-top:5%} 

.red_bold {font-weight:bold;color:#BF1E2E;}

/* 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: "Open Sans",sans-serif;  
  font-size:.9rem;
  color:#6D6E72;
  margin:1rem;
  }



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

.rc-question:before {
    color: #BF1E2E;
    content: "RC: ";
    font-weight: bold;
    font-style: italic;
}



#right {float:right;
  margin:2% 0 1.5% 3%;}

#left {float:left;
  margin:2% 3% 1.5% 0; }

@container (max-width: 600px){
#right, #left {float:none;margin:2% 0}
	
}


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: "Lora",serif;  
  font-size:18pt;
  color:#6D6E72;
  width:350px; 
  padding:0 0 0 2%; 
  border-left:4px solid #5b646d;
  }
  
  .pullquote p {
  font-weight:bold; 
  line-height:1.2;
  }
  
    .pullquote ul {
      padding-left:10px;
    }
  
@container (max-width: 600px) { 
  .pullquote {
  float:none;
  width:100%;
  padding:2% 0;
  border-left:none;
  border-top: 4px solid #6D6E72;
  border-bottom: 4px solid #6D6E72;
  margin:4% auto;
  }
  
  .pullquote p {
  margin:0;
  padding:0;
  }

  
      .pullquote ul {
      padding-left:5px;
    }

  }

.attr {display:block;text-align:right;font-size:13px;}

.pullquote2 {
  font-family:'Open Sans', sans-serif;
  font-size: 1.5rem;
  font-style: italic;
  color: #BF1E2E;
  background: #F8F8F8;
  border-left: 5px solid #BF1E2E;
  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 {
	width: 50%;
	text-align: center;
}

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

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

.aside p {
	margin: 5px auto;
  font-family: 'Nunito Sans', sans-serif;  
	color: #696969;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

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

.aside li{
	text-align:left;
}



/* 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: 11pt;
	line-height: 1.5;
	color: #696969;
  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: 10% auto 5% 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, .halfwidth p, .pagesWithStopsContainer p {
	margin: 5px auto;
	font-size: 11pt;
	line-height: 1.5;
	color: #696969;
  font-family: 'Nunito Sans', sans-serif; 
}

/* 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: .5%;
	width: 48%;	
	vertical-align: top;
}

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








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

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


@media screen and (max-width: 500px){
	.quarterwidth{
		display: block;
		margin-bottom: 15px;
		width: 99%;		
	}
}



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

.credits h3{
	font-size:16pt;
}

.credits p{
	font-size:clamp(9pt, 11pt, .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:'Open 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 #BE1622; padding-left:1%; margin-left:1%; float:right}
    .related h6 {font-family: 'Nunito Sans', sans-serif;  
	color: #696969;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: #696969;}


/* This is the contractor profiles at the bottom of articles. */
.profile{
	margin-top: 5%;
	padding: 10px;
	background-color: #FCF9ED;
	font-family:'Open Sans', sans-serif;
	border-top:2px solid #856F50;
}

.profile h3{
	font-size: clamp(18pt, 2.2vw, 28pt)!important;
	color:#C77251;
	margin-top: 1.5%;
}
    .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 {
}

.product-focus h3 {

}

.product-focus small {
font-family:'Open Sans',sans-serif;
	color:#6D6E72;
}

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

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

/*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: block; width: 90%; margin: 0px auto; 
	font-family:'Open Sans', sans-serif;
}

.podcast h4 {
	font-weight: 700; font-size: 18px; text-align: left; 
	font-family:'Open Sans', sans-serif; color: #636466;
}

.podcast p {
	text-align: left; font-size: smaller; 
	font-family:'Open Sans', sans-serif;
}

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

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

.podcast img {
	display: inline-block; vertical-align: bottom; margin: 0px 10px 40px 0px!important; text-align: left; float: left; width: 150px;
}

@media only screen and (max-width: 600px) {
	.podcast img {
		margin: 10px auto; text-align: left; float: none; width: 95%;
	}
	
	    .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;
	}
}



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


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


.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.9);
  padding: 20px;
  color: white;
  line-height:1.5;
}

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

  .yg_callout  {border:1px solid #BF1E2E;
    background:#000;
    margin:1%;
    padding:1%;
    float:right;
    font-family:"Nunito Sans","Open Sans",serif;
    color:#fff;
    width:320px;
    }
    
  .yg_callout a {color:#E73724!important;
      border-bottom:none!important;
    } 


  .ygbutton {text-align:center; margin-top:5%}   
  .ygbutton img {max-width:360px;margin:1% auto!important}
  .ygbutton a {border-bottom:none!important}


@media only screen and (max-width: 600px) {
	.yg_callout {
		float:none;
		width:100%;
		margin-bottom:2%;
	}


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