/* BEGIN scroll-driven animations-------- */
/* progress bar effect that triggers as the user scrolls */

		@keyframes grow-progress {
			from {
				transform: scaleX(0);
			}

			to {
				transform: scaleX(1);
			}
		}

		#progress {
			position: fixed;
			z-index: 10;
			left: 0;
			top: 0;
			width: 100%;
			height: 0.25em;
			transform-origin: 0 50%;
			background: #CC5500;
		}

		/* Create scroll-timeline on the root */

		html {
			scroll-timeline: --page-scroll block;
		}

		/* attach animation using an anonymous Scroll Progress Timeline */
		#progress {
			animation: grow-progress auto linear;
			animation-timeline: --page-scroll;
		}

/* END scroll-driven animations (progress bar)-------- */

/* BEGIN collapsible ----------------------------------*/

.lbl-toggle { 
  cursor: pointer;
  transition: all 0.25s ease-out; 
} 

.lbl-toggle::before { 
  content: ' ';
  display: inline-block; 
  border-top: 5px solid transparent; 
  border-bottom: 5px solid transparent; 
  border-left: 5px solid #222;
  vertical-align: middle; 
  margin-right: .7rem; 
  transform: translateY(-2px); 
  transition: transform .2s ease-out; 
} 

.lbl-toggle:hover {color: #008300;} 

.toggle:checked+.lbl-toggle::before { transform: rotate(90deg) translateX(-3px); } 

.collapsible_content { max-height: 0; /* collapses height to zero; invisible */ overflow: hidden; transition: 10rem .25s ease-in-out;}

.toggle:checked + .lbl-toggle + .collapsible_content { max-height: none; /* no maximum height limit; visible */} 

.collapsible_content .content-inner:focus,
.collapsible_content .content-inner:hover {
  height: 100%;
}
/* END collapsible ----------------------------------*/