@charset "utf-8";
/* CSS Document */

/* z-indexes:                          */
/* subpage sticky navbar = 1020        */
/* BOOTSTRAP fixed-top = 1030          */
/* BOOTSTRAP dropwodn-menu = 2000      */
/* backToTop button = 5000             */
/* qdAlert = 5075                      */


/* backgrounds */

.qdred   { background-color: #ba0202; }
.whitebg { background-color: #fff; }
.blackbg { background-color: #000; }
.seafoam { background-color: #8cbeb1; }
.olive   { background-color: #798e77; }
.gold    { background-color: #e8c533; }
.yellow  { background-color: #eeeaa0; }
.ltGray  { background-color: #e6e7e8; }
.dkGray  { background-color: #282828; }


/* test colors and borders */
.garish1    { background-color: chartreuse; }
.garish2    { background-color: cyan; }
.border_lt  { border-left: 1px solid #0c0; }
.border_rt  { border-right: 1px solid #0c0; }
.border_tp  { border-top: 1px solid #0c0; }
.border_btm { border-bottom: 1px solid #0c0; }


body { 
	background-color: #8cbeb1;
    /* using a Google font */
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 1.1rem;
    color: #282828;
}


/* links */

a { color: #798e77; }
a:hover { color: #282828; text-decoration: none; }



/* BOOTSTRAP modification */
a.dtl_button.btn.btn-sm,
a.dtl_button.btn.btn-lg,
a.dtl_button.btn,
button.dtl_button.btn {
	color: #fff;
	background-color: #282828;
	border-color: #282828;
    border-width: 2px;
    border-radius: 0px;
}

/* BOOTSTRAP modification */
a.dtl_button.btn.btn-sm:hover,
a.dtl_button.btn.btn-lg:hover,
a.dtl_button.btn:hover,
button.dtl_button.btn:hover {    
	/* changed Feb 2025, to match NEW QDUSA HOME PAGE DESIGN */
    /* background-color: #585858; */
    
    color: #282828;
    background-color: #e8c533;
    border-color: #282828;
    border-width: 2px;
}


/* BOOTSTRAP modification */
a.dtl_button.btn.btn-sm:focus, 
a.dtl_button.btn.btn-sm.focus,
a.dtl_button.btn.btn-lg:focus, 
a.dtl_button.btn.btn-lg.focus,
a.dtl_button.btn:focus, 
a.dtl_button.btn.focus,
button.dtl_button.btn:focus,
a.modal_button.btn:focus,
a.modal_button.btn.focus {
	outline: none;
	box-shadow: none;
}


/* experiments and impact page buttons */


/* BOOTSTRAP modification */
a.dtl_button.btn.btn-lg.experiments,
a.dtl_button.btn.btn-lg.impact {
    color: #fff;
	background-color: #282828;
	border-color: #282828;
    border-radius: 0;
    padding: 1.5rem;
}

/* BOOTSTRAP modification */
a.dtl_button.btn.btn-lg.home {
    color: #fff;
	background-color: #282828;
	border-color: #282828;
    border-radius: 0;
}

/* BOOTSTRAP modification */
a.dtl_button.btn.btn-lg.home:hover {
    color: #000;
    background-color: #fff;
    border-color: #282828;
}

/* BOOTSTRAP modification */
a.dtl_button.btn.btn-lg.experiments:hover,
a.dtl_button.btn.btn-lg.impact:hover { 
    color: #000;
    background-color: #e8c533;
    border-color: #282828;
}

/* BOOTSTRAP modification */
a.dtl_button.btn.btn-lg.home:focus, 
a.dtl_button.btn.btn-lg.home.focus,
a.dtl_button.btn.btn-lg.experiments:focus, 
a.dtl_button.btn.btn-lg.experiments.focus,
a.dtl_button.btn.btn-lg.impact:focus, 
a.dtl_button.btn.btn-lg.impact.focus {
	outline: none;
	box-shadow: none;
}


/* cta (call to action) button on home page */

/* BOOTSTRAP modification */
a.dtl_button.btn.btn-lg.cta_btn { text-transform: uppercase; }



/* photos */

.photoLeft { padding: 0rem 2.0rem 1.0rem 0rem; float: left; }
.photoRight { padding: 0rem 0rem 1.0rem 2.0rem; float: right; }
.photo { padding: 1.0rem 0rem; }


h2 { font-size: 2.0rem; }

h2.page_title {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 2.5rem;
    padding-bottom: 1.0rem;
}

section { padding-top: 2.0rem; }

.indent { padding-left: 20px; }

ul { margin-left: 2.5rem;}

ul li { line-height: 2.0rem; }


.fineprint { font-size: 0.95rem; }


/* VIDEOS */

/* use this container with Bootstrap ratio and ratio-16x9 sto make youtube vids responsive */
.responsive_vid_560 {
    max-width: 560px;
    max-height: 315px;
}

.responsive_vid_464 {
    max-width: 464px;
    max-height: 261px;
}

.video_home {
    max-height: 316px;
    max-width: 560px;
}




/* START:  VERY IMPORTANT BOOTSTRAP modification  */

/* We want max witdh to be 1200px but Bootstrap   */
/* sets max-width to 1340px - changed to 1200px.  */
/* Boostrap adds padding to sides - removed that. */
/* I add class "sides" for side padding only      */
/* when I need it.                                */
/* Did not override Bootstrap margin auto.        */
/* Did not override the smaller breakpoints.      */

.container { 
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

@media (min-width: 1400px) { .container { max-width: 1200px; } }

/* END:   VERY IMPORTANT BOOTSTRAP modification */





	/* viewport < 991px */
@media  (max-width:991px) {
}


	/* viewport < 768px */
@media  (max-width:768px) {
    .photoLeft, .photoRight { padding: 1.0rem 0rem 2.0rem 0rem; float: none; }
    .indent { padding-left: 0; }
    
}


	/* viewport < 576px */
@media  (max-width:576px) {
    .sides { padding-left: 20px; padding-right: 20px; }
    ul { margin-left: 0.5rem;}
}






/*****************************/
/* Start DTL Logo area       */
/*****************************/


/* topnav section on home page = 213px high */


.topnav {
    border-top: #8cbeb1 5px solid;
    padding-top: 10px;
}



/* Social Media icons */

.icons { }

a.ig {
    height:20px;
    width:24px;
    display: block;
    background: url("../images/Instagram_Glyph.png") no-repeat;
}

a.yt {
    height:20px;
    width:27px;
    display: block;
    background: url("../images/YouTube_Logo.png") no-repeat;
}

a.li {
    height:20px;
    width:19px;
    display: block;
    background: url("../images/LinkedIn_Logo.png") no-repeat;
}

.footer .icons a.ig { background: url("../images/Instagram_Glyph_gray.png") no-repeat; }
.footer .icons a.yt { background: url("../images/YouTube_Logo_gray.png") no-repeat; }
.footer .icons a.li { background: url("../images/LinkedIn_Logo_gray.png") no-repeat; }


a.ig:hover, .footer .icons a.ig:hover { background: url("../images/Instagram_Glyph_1.png") no-repeat; }
a.yt:hover, .footer .icons a.yt:hover { background: url("../images/YouTube_Logo_1.png") no-repeat; }
a.li:hover, .footer .icons a.li:hover { background: url("../images/LinkedIn_Logo_1.png") no-repeat; }




/* logo area */

.logo { padding: 0rem 3.0rem 0.5rem 0rem; }

.dtl_name {
    font-size: 2.0rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 2.5rem;
}

.dtl_name a, .dtl_name a:hover { color: #282828; text-decoration: none; }
.dtl_name a:hover


	/* viewport < 1200px */
@media  (max-width:1200px) {
    .dtl_name { font-size: 1.75rem; line-height: 2.0rem; }
}

	/* viewport < 768px */
@media  (max-width:768px) {
	
	/* BOOTSTRAP modification - logo handler */	
	div.col-md-auto.logo img { 
		-webkit-transition: all 0.2s ease-in-out; 
		-moz-transition: all 0.2s ease-in-out; 
		transition: all 0.2s ease-in-out; 
		width:90px; 
		height:90px; 
    }
    
    .logo { padding: 0rem 0rem 0.75rem 0rem; }
    
    .dtl_name { font-size: 1.5rem; line-height: 1.75rem; padding-bottom: 0.75rem; }
	
}


	/* viewport > 768px */
@media  (min-width:768px) {
	
	/* BOOTSTRAP modification - logo handler */
	div.col-sm-auto.logo img { 
		-webkit-transition: all 0.2s ease-in-out; 
		-moz-transition: all 0.2s ease-in-out; 
		transition: all 0.2s ease-in-out; 
		width:125px; 
		height:125px;
	}
	
}

/*****************************/
/* End DTL Logo area         */
/*****************************/






/*****************************/
/* Start DTL Nav             */
/*****************************/


/* BOOTSTRAP modification */
.navbar {  }

/* BOOTSTRAP modification */
.navbar-collapse {
	justify-content: flex-end;
}

/* BOOTSTRAP modification */
.navbar-expand-lg .navbar-nav .nav-link { 
	color: #282828;
    font-size: 1.0rem;
	font-weight: 600;
	line-height: 1.0rem;
    padding: 0rem 1.0rem 0rem 1.0rem;
    border-right: 1px solid #282828;
}

/* BOOTSTRAP modification */
.navbar-expand-lg .navbar-nav .nav-link.first { 
	padding-left: 0rem;
	border-left: none;
}

/* BOOTSTRAP modification */
.navbar-expand-lg .navbar-nav .nav-link.last { 
	padding-right: 0rem;
    border-right: none;
}

/* BOOTSTRAP modification */
.navbar-light .navbar-nav .nav-link:hover {
  color: #fff;
}

/* BOOTSTRAP modification */
a[aria-expanded="true"].nav-link.dropdown-toggle::after {
  transform: rotate(180deg);
}

/* BOOTSTRAP modification */
.navbar-expand-lg .navbar-nav .dropdown-menu {
	left: 0.75rem;
	top: 1.45rem;
	min-width: 8rem;
	padding: 1px;
	margin: 0;
	background-color: #e6e7e8;
}

/* BOOTSTRAP modification */
div[aria-labelledby="navbarDropdown1"].dropdown-menu {
	left: 0rem;
}

/* BOOTSTRAP modification */
.navbar-toggler {
	padding: 0.25rem 0rem;
}

/* BOOTSTRAP modification */
.navbar-light .navbar-toggler {
	border: none;
}

/* BOOTSTRAP modification */
.navbar-toggler:hover, .navbar-toggler:focus {
  	outline: none;
	box-shadow: none;
}

/* BOOTSTRAP modification */
.navbar-light .navbar-toggler-icon {
	background-image: url(../images/qd_menu_icon.png);
}

/* BOOTSTRAP modification */
.dropdown-divider {
	margin: 0;
    border-top: 1px solid #ddd;
}

/* BOOTSTRAP modification */
.dropdown-item {
	padding: 0.5rem 0.75rem;
	font-size: 1.0rem;
    font-weight: 600;
    color: #282828;
}

/* BOOTSTRAP modification */
.dropdown-item:hover, .dropdown-item:focus {
	background-color: #fff;
}




	/* navbar: viewport < 991px */
@media (max-width: 991px) {
    .nav_bg { padding: 0.25rem 0rem 0.75rem 0rem; }
	nav.navbar.navbar-expand-lg.navbar-light { justify-content: flex-start; }
	.nav-item { align-self: flex-start; }
	.nav-item.dropdown, .dropdown-item { text-align: left; }
	.navbar-toggler { padding: 0rem; }
	.navbar { padding: 0.5rem 0rem 0rem 0rem; }	
	.navbar-expand-lg .navbar-nav .nav-link { font-size: 1.0rem; padding: 0.5rem 0rem; border: none; }
	.navbar-expand-lg .navbar-nav .nav-link.first { padding-top: 1.0rem; }
	
}


/*****************************/
/* End DTL Nav               */
/*****************************/






/***************************************/
/* Start DTL Header Photo and Tagline  */
/***************************************/


.header_photo_bg {
    background-image: url("../images/header_photo_bg.jpg");
    background-position: center;
    background-repeat: repeat-y;
}

.header_photo_bg.news_details {
    border-bottom: 3px solid #e8c533;
}

.header_photo_row {
    background-color: #eeeaa0;
}

.header_photo{
    display: flex;
    justify-content: flex-end;
}


.tagline1, .tagline2 {
    font-size: 1.75rem;
    font-weight: 400;
    display: flex;
    align-items: center;
}

.tagline2 { 
    display: none;
    visibility: collapse;
}

.tagline_spacer {
    width: 100% !important;
}



	/* viewport < 1200px */
@media (max-width: 1200px) {
    .tagline_spacer { display: none; visibility: collapse; }
}


	/*  viewport < 992px */
@media (max-width: 992px) {
    .tagline1 { display: none; visibility: collapse; }
    .tagline2 { display: block; visibility: visible;  color: #fff; padding: 2.0rem 0rem; }
}




/***************************************/
/* End DTL Header Photo and Tagline    */
/***************************************/








/***************************************/
/* Start Approach                      */
/***************************************/

.approach_logo { padding-right: 5.0rem; }

.approach_text { font-size: 1.0rem; }




	/* viewport < 992px */
@media (max-width: 992px) {
    .approach_logo { padding-right: 0rem;  padding-bottom: 2.0rem; }
}


/***************************************/
/* End Approach                        */
/***************************************/






/*****************************************/
/* Start Story + Call to Action (CTA)    */
/*****************************************/



.story_text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 3.5rem;
}

.story_text h2 {
    /* h2 font size inherited from above */
    color: #fff;
}




	/* viewport < 1200px */
@media (max-width: 1200px) {
    .story_text { display: block; padding-right: 0rem; padding-bottom: 2.0rem; }
}


/*************************************/

/* see special "cta" button styling above, with other button styles */


.cta {
    padding: 2.0rem 0rem;
    text-align: center;
}


/*****************************************/
/* End Story + Call to Action (CTA)      */
/*****************************************/






/*****************************************/
/* Start Spotlight                       */
/*****************************************/


.spotlight_title { 
    /* h2 font size inherited from above */
    font-weight: 600;
}

.spotlight_title a { color: #282828; text-decoration: none; }
.spotlight_title a:hover { color: #798e77; text-decoration: none; }

.spotlight_col { display: flex; }

.spotlight_col.one { }

.spotlight_col.two { justify-content: center; }

.spotlight_col.last { justify-content: flex-end; }



.spotlight_item {
    max-width: 300px;
    background-color: #fff;
    padding-right: 0;
    
    /* use the following 2 lines to make the .spotlight_item_content fill remaining space */
    display: flex;
    flex-flow: column;
}

.spotlight_item.one { }

.spotlight_item.two { }

.spotlight_item.last { }

a.spotlight_link img {
	-webkit-transition: opacity 0.2s ease-in-out; 
	-moz-transition: opacity 0.2s ease-in-out; 
	transition: opacity 0.2s ease-in-out;
}

a.spotlight_link:hover img {
	opacity: 0.70;
}

.spotlight_item_title {
    /* "News" or "Event" on olive bg */
    font-size: 1.25rem;
    color: #fff;
    text-transform: uppercase;
    background-color: #798e77;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
}

.spotlight_item_title.news_details { 
    /*display: inline-block;*/
    padding: 0.1rem 0.1rem 0.1rem 0.5rem;
}

a.spotlight_link {
    text-decoration: none;
}

.spotlight_item_content {
    padding: 0.5rem 0.25rem 0.5rem 0.75rem;
    
    /* tell this element to fill remaining space       */
    /* this keeps a.spotlight_learn_more at the bottom */
    flex: 1;
}

.spotlight_item_content h4 {
    /* content title */
    font-size: 1.0rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.5rem 0rem;
}

.spotlight_item_content p {
    /* content description */
    font-size: 0.98rem;
    line-height: 1.3rem;    
}


.spotlight_item h6 {
    /* date */
    font-size: 0.8rem;
    line-height: 0.9rem;
    padding: 0.25rem 0.25rem 0rem 0.75rem;
    text-transform: uppercase;
}


a.spotlight_more {
    /* spotlight learn more "button" */
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    color: #282828;
    padding: 0.5rem 0.75rem 0.75rem 0.75rem;
}

a.spotlight_more span.arrow {
    font-size: 1.5rem;
    line-height: 1.1rem;
}

a.spotlight_more:hover {
    color: #798e77;
}



	/* viewport < 1200px */
@media (max-width: 1200px) {
    .spotlight_item {  }
    .spotlight_item.last {  }
}


	/* viewport < 992px */
@media (max-width: 992px) {
    .spotlight_col, .spotlight_col.one, .spotlight_col.two, .spotlight_col.last { display: block; flex: none; }

}



/*****************************************/
/* End Spotlight                         */
/*****************************************/







/*****************************************/
/* Start Partners                        */
/*****************************************/

.partners_title { 
    /* h2 font size inherited from above */
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}

.partner_items {
    display: flex;
    align-items: center;
}

.partner_items.middle {
    justify-content: center;
}

.partner_items.last { 
    justify-content: flex-end;
}

a.partner_logo_link img {
	-webkit-transition: opacity 0.2s ease-in-out; 
	-moz-transition: opacity 0.2s ease-in-out; 
	transition: opacity 0.2s ease-in-out;
}

a.partner_logo_link:hover img {
	opacity: 0.70;
}
 
a.partner_logo_link:focus img {
	outline: none;
	box-shadow: none;
}



	/* viewport < 992px */
@media (max-width: 992px) {
    .partner_items { display: block; }    
}



/*****************************************/
/* End Partners                          */
/*****************************************/








/**************************************************/
/* start slick carousels                          */
/**************************************************/


/*                                                   */
/* Start general slick styling                       */
/* You should never have to modify these classes     */
/*                                                   */

.slick_qd_prev,
.slick_qd_next {
    position: absolute;
    top: 30%;
    width: 30px;
    height: 30px;
    padding: 0;
	margin: 0;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick_qd_prev {
	background-image: url(../images/carousel_prev_1.png);
	left: -30px;
}

.slick_qd_prev:hover {
	background-image: url(../images/carousel_prev_2.png);
}

.slick_qd_next {
	background-image: url(../images/carousel_next_1.png);
	right: -30px;
}

.slick_qd_next:hover {
	background-image: url(../images/carousel_next_2.png);
}

.slick_qd_prev:hover,
.slick_qd_prev:focus,
.slick_qd_next:hover,
.slick_qd_next:focus {
    border: none;
    outline: none;
}

.slick_qd_dots {
	display: block;
	padding: 0;
	margin: 0;
	text-align: center;
    line-height: 10px;
}

.slick_qd_dots li {
    display: inline-block;
    margin: 0px 5px;
    padding: 0;
	cursor: pointer;
}

.slick_qd_dots li button {
	display: block;
	width: 30px;
	height: 5px;
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background-color: #aabcd2;
}

.slick_qd_dots li button:hover,
.slick_qd_dots li button:focus {
	outline: none;
	background-color: #333;
}

.slick_qd_dots li.slick-active button {
	background-color: #333;
}


/* SLICK modification */
.slick-slide {
	text-align: center;
}

/* SLICK modification */
.slick-dotted.slick-slider {
	margin-bottom: 20px;
}


/* change padding on slick carousel bg */

.slick_carousel_bg {
	padding: 10px 30px 0px 30px;
}



/* PARTNER LOGOS CAROUSEL                                 */


/* get rid of left-right side padding because we're       */
/* not using arrows for partner logo carousel             */
/* so photos should to edge-to-edge                       */

.slick_carousel_bg.partner_logos {
	padding: 10px 0px 0px 0px;
}

.partner_logo_item {
    /* widest logo currently = 200px */
	max-width: 200px;
}

.partner_logo_item a img { margin: auto; }

#slick_partner_logo_item_arrows {
	margin: 0px auto 20px auto; 
	height: 30px; 
	width: 61px;
}

#slick_partner_logo_item_arrows .slick_qd_next,
#slick_partner_logo_item_arrows .slick_qd_prev { 
    position: relative;
    top: 0;
    left: 0;
    right: 0;
}

#slick_partner_logo_item_dots {
	padding: 0px 30px 10px 30px;
}







/* VIDEO CAROUSEL                    */

.slick_carousel_bg.dtl_videos { }

.dtl_video_item { max-width: 272px; }

.dtl_video_item p {
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
}

#slick_dtl_video_arrows {
	margin: 0px auto 20px auto; 
	height: 30px; 
	width: 61px;
}

#slick_dtl_video_arrows .slick_qd_next,
#slick_dtl_video_arrows .slick_qd_prev { 
    position: relative;
    top: 0;
    left: 0;
    right: 0;
}

#slick_dtl_video_dots {
	padding: 0px 30px 10px 30px;
}








/* NEWS DETAILS CAROUSEL      */

.news_item { max-width: 500px; }

.news_item_1000 { max-width: 1000px; }


#slick_qd_news_arrows { 
	margin: 10px auto; 
	height: 30px; 
	width: 100px;
	display: none;
}

#slick_qd_news_arrows .slick_qd_next,
#slick_qd_news_arrows .slick_qd_prev { 
	position: relative; 
	top: auto; 
}

#slick_qd_news_arrows .slick_qd_prev { 
	left: auto; 
}

#slick_qd_news_arrows .slick_qd_next { 
	right: auto; 
	margin-left: 40px; 
}

#slick_qd_news_dots {
	padding: 0px 30px;
}






	/* viewport < 576px */
@media (max-width:576px) {
    
}


/**************************************************/
/* end slick carousels                            */
/**************************************************/







/**************************************************/
/* Start vertical tabbed panels                   */
/**************************************************/


/* BOOTSTRAP modification */
.list-group.dtl_v_tabs a {
	font-size: 1.2rem;
	border-radius: 0;
    background-color: #e6e7e8;
}


/* BOOTSTRAP modification */
.list-group.dtl_v_tabs a:hover,
.list-group.dtl_v_tabs a:focus {
	background-color: #798e77;
    color: #fff;
}

/* BOOTSTRAP modification */
.list-group.dtl_v_tabs a.list-group-item.active {
    border: 1px solid rgba(0,0,0,.125);
    background-color: #798e77;
    color: #fff;
}

/* BOOTSTRAP modification */
.tab-content {
	padding: 0.75rem;
	border: 1px solid #dee2e6;
}

/* BOOTSTRAP modification */
div.tab-pane h3 { padding-bottom: 0.75rem; }
/* BOOTSTRAP modification */
div.tab-pane h4 { font-size: 1.25rem; font-weight: 600; padding: 0.75rem 0rem; }
/* BOOTSTRAP modification */
div.tab-pane a.expandableLink { padding-left: 0; }
/* BOOTSTRAP modification */
div.tab-pane div.expandableBody { padding-left: 0; }


div.product_box {
	border-bottom: 1px solid #ccc;
	margin-bottom: 2.0rem;
	padding-bottom: 1.0rem;
}

/* for use inside tabbed panels */
div.product_box.last {
	border-bottom: none;
}



/**************************************************/
/* End vertical tabbed panels                     */
/**************************************************/








/**************************************************/
/* Start accordion panels                         */
/**************************************************/


/* BOOTSTRAP modification */
#dtl1_accordion .accordion-item,
#dtl2_accordion .accordion-item,
#dtl3_accordion .accordion-item,
#dtl4_accordion .accordion-item,
#dtl5_accordion .accordion-item,
#dtl6_accordion .accordion-item
{
    border-bottom: 1px solid #ccc;
}

/* BOOTSTRAP modification */
#dtl1_accordion .accordion-item.last,
#dtl2_accordion .accordion-item.last,
#dtl3_accordion .accordion-item.last,
#dtl4_accordion .accordion-item.last,
#dtl5_accordion .accordion-item.last,
#dtl6_accordion .accordion-item.last
{
    border-bottom: none;
}

/* BOOTSTRAP modification */
#dtl1_accordion .accordion-button,
#dtl2_accordion .accordion-button,
#dtl3_accordion .accordion-button,
#dtl4_accordion .accordion-button,
#dtl5_accordion .accordion-button,
#dtl6_accordion .accordion-button
{
    font-weight: 600;
    color: #282828;
    padding: 0.5rem;
    /*background-color: #e6e7e8;*/
    /*background-color: #e8c533;*/
}

/* BOOTSTRAP modification */
#dtl1_accordion .accordion-button:hover,
#dtl2_accordion .accordion-button:hover,
#dtl3_accordion .accordion-button:hover,
#dtl4_accordion .accordion-button:hover,
#dtl5_accordion .accordion-button:hover,
#dtl6_accordion .accordion-button:hover
{
    /*background-color: #eeeaa0;*/
    background-color: #e6e7e8;
}

/* BOOTSTRAP modification */
#dtl1_accordion .accordion-button:focus,
#dtl1_accordion .accordion-button.focus,
#dtl2_accordion .accordion-button:focus,
#dtl2_accordion .accordion-button.focus,
#dtl3_accordion .accordion-button:focus,
#dtl3_accordion .accordion-button.focus,
#dtl4_accordion .accordion-button:focus,
#dtl4_accordion .accordion-button.focus,
#dtl5_accordion .accordion-button:focus,
#dtl5_accordion .accordion-button.focus,
#dtl6_accordion .accordion-button:focus,
#dtl6_accordion .accordion-button.focus
{
    outline: none;
	box-shadow: none;
}

/* BOOTSTRAP modification */
#dtl1_accordion .accordion-button:not(.collapsed),
#dtl2_accordion .accordion-button:not(.collapsed),
#dtl3_accordion .accordion-button:not(.collapsed),
#dtl4_accordion .accordion-button:not(.collapsed),
#dtl5_accordion .accordion-button:not(.collapsed),
#dtl6_accordion .accordion-button:not(.collapsed)
{
    color: #282828;
    background-color: #e8c533;
}

/* BOOTSTRAP modification */
#dtl1_accordion .accordion-button:not(.collapsed)::after,
#dtl2_accordion .accordion-button:not(.collapsed)::after,
#dtl3_accordion .accordion-button:not(.collapsed)::after,
#dtl4_accordion .accordion-button:not(.collapsed)::after,
#dtl5_accordion .accordion-button:not(.collapsed)::after,
#dtl6_accordion .accordion-button:not(.collapsed)::after
{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}




/**************************************************/
/* End accordion panels                           */
/**************************************************/







/**************************************************/
/* Start horizontal tab panels                    */
/**************************************************/

#dtl-list-tabs {  }

#dtl-list-tabs .list-group-item {
    border-color: #444;
    border-radius: 0;
    color: #fff;
    font-size: 1.0rem;
    font-weight: 600;
    background-color: #282828;
}

#dtl-list-tabs .list-group-item:hover { background-color: #fff; color: #282828; }

#dtl-list-tabs .list-group-item.active {
    background-color: #e8c533;
    color: #282828;
    border-color: #999;
    /*background-color: #eeeaa0;*/
    /*background-color: #e6e7e8;*/
}

#dtl-nav-tabContent {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: none;
}


/* experiment and impact page tabbed panels */

#dtl-experiment-tabContent,
#dtl-impact-tabContent {
    border: none;
    padding: 0;
}

#dtl-experiment-tabContent .experiment_text,
#dtl-impact-tabContent .impact_text {
    padding: 1.5rem 1.5rem 1.5rem 2.0rem;
    background-color: #e6e7e8;
}

#dtl-impact-tabContent .impact_text ul li { line-height: inherit; }

#dtl-experiment-tabContent h5 { 
    font-weight: 600;
    padding: 0.75rem 0.5rem 1.0rem 0rem;
}




/**************************************************/
/* End horizontal tab panels                      */
/**************************************************/








/*****************************************/
/* Start Impact                          */
/*****************************************/


/* these classes are designed for images 300 x 300 */

.impact_photo_container { 
    width: 100%;
    /* height = half the image height + 20 px padding at top */
    height: 120px;
    position: relative;
    display: flex;
    justify-content: center;
}

.impact_photo {
    height: 200px;
    width: 200px;
	position: absolute;
    top: 20px;
    /* half the image height */
    bottom: -100px;
}

/* push the title down by half the image height + 25px */
/* this inherits some styles from h2 class above       */
h2.impact_title { padding: 120px 0px 10px 0px; }


/* these classes are designed for images 90 x 90 */

.impact_icon_container { 
    width: 100%;
    /* height = half the image height + 20 px padding at top */
    height: 95px;
    position: relative;
    display: flex;
    justify-content: center;
}

.impact_icon {
    height: 150px;
    width: 150px;
	position: absolute;
    top: 20px;
    bottom: -75px;
}

/* push the text down by half the image height */
.impact_adjust { padding-top: 75px; }


.testimonial {
    font-style: italic;
    color: #005555;
}

.testimonial_quote { 
    /* use the following 2 lines to make the .testimonial_quote to fill remaining space */
    display: flex;
    flex-flow: column;
    font-size: 9.0rem;
    line-height: 0rem;
}

.testimonial_quote.one { padding: 3.75rem 0rem 0rem 0rem; }

.testimonial_quote.two  { }

.testimonial_quote.two div { 
    /* tell this element to fill the space        */
    /* this keeps the quote mark at the bottom    */
    flex: 1;
}

.testimonial_text {
    padding: 0rem 1.0rem 0rem 1.5rem;
}

.testimonial_sig {
    font-style: normal;
    font-weight: 600;
    display: flex;
    padding-top: 2.0rem;
    justify-content: flex-end;
}

.testimonial_sig div { 
    border-left: 1px solid #005555; 
    padding-left: 1.0rem;
}


	/* viewport < 768px */
@media (max-width:768px) {
    .testimonial_quote { font-size: 7.0rem;  }
    .testimonial_quote.one { padding: 3.0rem 0rem 0rem 0rem; }
}

	/* viewport < 600px */
@media (max-width:600px) {
    .testimonial_quote { font-size: 5.0rem;  }
    .testimonial_quote.one { padding: 2.25rem 0rem 0rem 0rem; }
}



/*****************************************/
/* End Impact                            */
/*****************************************/











/*****************************************/
/* Start Versalab and FastHall           */
/*****************************************/


.vl_photo { 
    padding: 1.5rem 3.0rem 0rem 0rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.fh_photo {
    padding: 0rem 3.0rem 0rem 0rem;
    display: flex;
    align-items: center;
}

/* this is inheriting some styles from the h2 class above */
h2.vl_title { 
    font-size: 1.7rem;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    padding: 1.8rem 0rem 1.0rem 0rem;
}

.vid1 { }
.vid2 { }


.resource_links {
    background-image: url("../images/resources_bg_gray_150.png");
    background-repeat: no-repeat;
    color: #fff;
    height: 150px;
    width: 150px;
    margin-top: 2.0rem;
}

    /* use calc:  (1200 page width - (150 circle width * number of circles)) \ (number of circles - 1) */
    /* 5 circles = margin-right: 112px; */

.resource_links.three_circles { margin-right: 375px; /* 3 circles */ }
.resource_links.four_circles { margin-right: 200px; /* 4 circles */ }

.resource_links.last {
    margin-right: 0;
}

.resource_links:hover {
    background-image: url("../images/resources_bg_yellow_150.png");
}

.resource_links a {
    color: #fff;
    text-decoration: none;
    text-align: center;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
}

.resource_links a:hover{
    color: #282828;
    font-weight: 600;
}


	/* viewport < 1400px */
@media (max-width:1400px) {
    .resource_links { margin-right: 80px; }
}


	/* viewport < 1200px */
@media (max-width:1200px) {
    .resource_links { margin-right: 50px; }
}

	/* viewport < 992px */
@media (max-width:992px) {
    .vl_photo { padding: 0rem 0em 2.0rem 0rem; display: block; }
    .fh_photo { padding: 0rem 0em 3.0rem 0rem; display: block; }
}




/*****************************************/
/* End Versalab and FastHall             */
/*****************************************/









/*****************************************/
/* Start Experiments                     */
/*****************************************/



/* see special experiments tabbed panel and           */
/* button styles above                                */

/* these classes are designed for images 300 x 225 */

.experiment_photo_container { 
    width: 100%;
    height: 150px;
    position: relative;
    display: flex;
    justify-content: center;
}

.experiment_photo {
    height: 225px;
    width: 300px;
	position: absolute;
    top: 20px;
    /* half the image height */
    bottom: -113px;
}

.experiment-top { padding-top: 125px; }

.experiment_lists {
    padding: 1.5rem;
}

/* these classes are designed for images 90 x 90 */

.experiment_icon_container { 
    width: 100%;
    /* height = half the image height + 20 px padding at top */
    height: 65px;
    position: relative;
    display: flex;
    justify-content: center;
}

.experiment_icon {
    height: 90px;
    width: 90px;
	position: absolute;
    top: 20px;
    bottom: -45px;
}



/*****************************************/
/* End Experiments                       */
/*****************************************/






/*****************************************/
/* Start About and News & Events         */
/*****************************************/


.about {
    padding: 1.0rem 0rem 2.0rem 0rem;
    border-bottom: 1px solid #ccc;
}

.news_event {
    padding: 1.5rem 0rem;
    border-bottom: 1px solid #ccc;
}

.news_event .first {
    padding-right: 2.5rem;
}

.news_event h5 { 
    font-size: 0.9rem;
    padding: 0.75rem 0rem;
    text-transform: uppercase;
}

.news_event p { }


/* Start modal window, used on news_detail_2023_08_11 */
/* Copied from qd.css.  Updated to use Bootstrap 5.   */

div#sched_of_events_Modal {
    z-index:  15000;
}

div#sched_of_events_Modal div.modal-dialog {
    max-width: 1100px;
}

figure a.modal_button {
    margin: 0;
    padding: 0;
}

figure a.modal_button:hover img {
    -webkit-transition: opacity 0.5s ease-in-out; 
	-moz-transition: opacity 0.5s ease-in-out ; 
	transition: opacity 0.5s ease-in-out ;
    opacity: 0.6;
}

figure figcaption a.modal_button { 
    color: #798e77;
    text-decoration: underline;
}

figure figcaption a.modal_button:hover { 
    color: #282828;
    text-decoration: none;
}

/* BOOTSTRAP modification */
.modal-content {
    background-color: transparent;
    border: none;
}

.qd_modal_close_btn {
    display: flex;
    justify-content: flex-end;
}

/* BOOTSTRAP modification */
.btn-close {
    width: 2em;
    height: 2em;
    padding: 0.2em 0.2em;
    font-size: 1.75rem;
    font-weight: bold;
    color: #fff;
    background-color: transparent;
    background-image: none; 
    opacity: 1;
}

	/* welcome area: viewport < 992px */
@media (max-width:992px) {
    .qd_modal_close_btn  { justify-content: flex-start; }
}


/* End modal window, used on news_detail_2023_08_11 */


/*****************************************/
/* End About and News & Events           */
/*****************************************/










/*****************************************/
/* Start Footer                          */
/*****************************************/

/* see footer icon styles above */


.footer a {
    color: #282828;
    text-decoration: none;
}

.footer a:hover {
    color: #fff;
    text-decoration: none;
}

p.sublinks {
    margin-left: 1.0rem;
    padding-left: 1.0rem;
    border-left: 1px solid #333;
}

.footer { 
    font-weight: 600; 
}

.footer_col_2 { text-align: end; }


/* BOOTSTRAP modification */
.footer_col_2 div.row.icons {
    justify-content: flex-end;
    padding-bottom: 1.0rem;
}

.copyright {
    font-size: 0.9rem;
    border-top: 1px solid #282828;
    padding: 1.0rem 0rem 2.0rem 0rem;
}

	/* navbar: viewport < 991px */
@media (max-width: 991px) {
    
    .footer_col_2 { text-align: left; padding-top: 1.5rem; border-top: 1px solid #333; }
    /* BOOTSTRAP modification */
    .footer_col_2 div.row.icons { justify-content: flex-start; }
	
}
	/* navbar: viewport < 991px */


/*****************************************/
/* End Footer                            */
/*****************************************/






/***********************************************/
/* Start GDPR Alert                            */
/***********************************************/


/* use for GDPR pop-up message                   */
/* dtl.js uses this to set cookies               */
div.qdAlert {
    position: fixed;
    z-index: 5075;
    bottom: 10px;
    left: 10px;
    color: #fff;
    background-color: #282828;
    max-width: 380px;
    padding: 30px 30px 10px 30px;
	-webkit-transition: opacity 0.5s ease-in-out; 
	-moz-transition: opacity 0.5s ease-in-out ; 
	transition: opacity 0.5s ease-in-out ;
    opacity: 0;
    visibility: hidden;
}

div.qdAlert.show {
    opacity: 1;
    visibility: visible;
}

div.qdAlert.fadeOut {
	opacity: 0;
    visibility: hidden;
}

div.qdAlert a {
    color: #fff;
    text-decoration: underline;    
}

div.qdAlert a:hover {
    color: #e8c533;
    text-decoration: none;
}

div.qdAlert a.dtl_button.btn.btn-lg {
    text-decoration: none;
    width: 100%;
    background-color: #798e77;
}

div.qdAlert a.dtl_button.btn.btn-lg:hover {
    color: #e8c533;
    background-color: #585858;
}




	/* welcome area: viewport < 768px */
@media (max-width:768px) {
    div.qdAlert  { max-width: 300px; }
}



/***********************************************/
/* End GDPR Alert                              */
/***********************************************/