/* Article add-ons Last updated July 21, 2025. Be excellent to each other */


.blue_bold {color:#0071BB; font-weight:bold}

a:has(img) {
  border-bottom: none; /* 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%} 

/* 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 {
container-type: inline-size;
}


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


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

 .editorsnote {
  font-family: "Open Sans",sans-serif;  
  font-size:12pt;
  color:#404144;
  margin-bottom:10%
  }


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


  .pullquote {
  font-family: "Roboto",serif;  
  font-size:18pt;
  color:#626466;
  width:350px; 
  padding:0 0 0 2%; 
  border-left:4px solid #9d9fa2;
  }
  
  .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 #9d9fa2;
  border-bottom: 4px solid #9d9fa2;
  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: "Roboto", sans-serif;
  font-weight:500;
  font-size: 1.5rem;
  font-style: italic;
  color: #2C7E20;
  background: #F8F8F8;
  border-top: 4px solid #9d9fa2;
  border-bottom: 4px solid #9d9fa2;
  padding: 15px 20px;
  margin: 20px auto;
  max-width: 80%;
  text-align: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.pullquote2::before,
.pullquote2::after {
  content: "“";
  font-size: 2rem;
  color: #9d9fa2;
}

.pullquote2::after {
  content: "”";
}

  .related {width:300px; border-left:1px solid #0069AA; 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;}


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

.wc-question:before {
    color: #0071BB;
    content: "WC: ";
    font-weight: bold;
    font-style: italic;
}







/* This contains an image and caption, floated right, expanding to full width for mobile. */
.aside{
	width: 50%;
	text-align: center;
}
@container (max-width: 600px){
    .aside{
		float: none;
		width: 100%;
		margin:1% auto 2% auto;
	}
}

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


.aside h4, .aside h3 {
  font-family: 'Nunito Sans', sans-serif!important; 
}


.aside p{
	margin: 5px auto;
    font-family: "Roboto", sans-serif!important;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

.aside ul {
    font-family: "Roboto", sans-serif!important;
	padding-left:4%!important}

.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: #626466;
    font-family: "Roboto", sans-serif!important;
	text-align: center;
}



/* This contains an image and caption, full page width. */
.pic-1, .pic-2, .pic-3 {
	margin: 4% auto 2% 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, .halfwidth p, .pagesWithStopsContainer p {
	margin: 5px auto;
	font-size: 11pt;
	line-height: 1.5;
	color: #626466;
  	font-family: "Roboto", sans-serif!important;
}

/* 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 third-page width, expanding to full width for mobile. */
.thirdwidth{
	display: inline-block;
	margin: 1%;
	width: 31%;	
	vertical-align: top;
}
@media screen and (max-width: 700px){
	.thirdwidth{
		display: block;
		margin-bottom: 25px;
		width: 95%;		
	}
}



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



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

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




/* This is the contractor profiles at the bottom of articles. */
.profile{
	margin-top: 5%;
	padding: 10px;
	background-color: #f36f211a;
	font-family:'Roboto', sans-serif!important;
	border-top:2px solid #f36f21;
}

.profile h3, .profile h4 {
	font-size: clamp(16pt, 1vw, 20pt)!important;
	color:#f36f21;
	margin-top: 1.5%;
}

.profile img.logo {max-width:125px;display:block;margin:5px auto!important;}

.profile p {
	color:#232323!important;
	margin-top: 20px;
	line-height: 1.5;
}.profile ul {
	color:#232323!important;
	padding-left:4%!important;
}
.profile a:link{
	border-bottom: none;
}


.bluebg {
	background-color: #00a0a30D;
	border-top:2px solid #0071bb;
} 

.bluebg h3, .bluebg h4 {
	color:#0071bb;
}





/* 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: Arial, Helvetica, 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;
	}
}




.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:"Roboto", "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, 105, 170, 0.9);
  padding: 20px;
  color: white;
}

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


.product-focus {
}

.product-focus h3 {

}

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

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




.podcast {
	display: block; width: 90%; margin: 0px auto; 
  	font-family: "Roboto", sans-serif;
}

.podcast h4 {
	font-weight: 700; font-size: 18px; text-align: left; 
  	font-family: "Roboto", sans-serif; color: #404144;
}

.podcast p {
	text-align: left; font-size: 10.5pt; 
  	font-family: "Roboto", sans-serif;
}

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

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

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



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

        .interactive-button {
            background-color: #BE1E2D;
            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;
        }