.card-header,
.accordion-button:not(.collapsed) {
    background-color: var(--cassiopeia-color-primary);
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
  color: #fff;
}

.h2, .h3, .h4, .h5, .h6, h2, h3, h4, h5, h6 {
    color: #f7a833;
}

.page-header h1 {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
    background-color: var(--cassiopeia-color-primary);
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
    color: #fff;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
}

.itemid-174 h2 {
  font-size: 1.5rem;
}

.card-header a,
.card-header a:hover,
.card-header a:focus,
.card-header a:visited {
  color: white;
  text-decoration: none;
}

.card-header a:hover,
.card-header a:focus {
  text-decoration: underline;
}
.mt-n4 {
  margin-top: -1.5rem!important;
}
.container-banner {
  margin-bottom: 0;
}

.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  color: white;
}
.lead {
    font-size: clamp(1.8rem,3vw,1.25rem)
}
.footer {
  margin-top: 0;
}
.itemid-101 .container-component {
  display: none;
}
.site-grid {
  margin-bottom: 0;
}
/* main {
  min-height:660px;
} */
.carousel-control-next-icon, .carousel-control-prev-icon{
   background-color: #f7a833;
}
.btn-primary, .btn-primary:focus, .btn-primary:hover {
  color: #3b3b3b;
}
/* 
.mod-list {
  width: 100%;
}

.mod-list li>a {
    padding-inline-start: 1em;
    padding-inline-end: 1em;
  }

.mod-list ul>li:hover,
.mod-list ul>li:focus,
.mod-list li.current.active {
    background-color: var(--cassiopeia-color-primary);
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
}

.mod-list ul>li>a:hover,
.mod-list ul>li>a:focus,
.mod-list li.current>a {
  color: #fff;
  text-decoration: none;
}

.mod-list li.active>a {
  text-decoration: none;
} */

@media (max-width: 768px) {

  .card {
    border: none;
  }
.navbar-toggler {
    position: fixed;
    bottom: 20px;
    z-index: 9999;
    display: block;
    width: 70px;
    height: 70px;
    background-color: var(--cassiopeia-color-primary);
    border: 4px solid white !important;
    border-radius: 40px;
    right: 10px;
    font-size: 1rem;
}

navbar-collapse.show {
    left: 0;
    -webkit-transition: left 0.3s ease-in;
    -o-transition: left 0.3s ease-in;
    -moz-transition: left 0.3s ease-in;
    transition: left 0.3s ease-in;
}

.navbar-collapse {
    -webkit-flex-basis: 100%;
    -webkit-flex-grow: 1;
    -webkit-align-items: center;
}

.navbar-collapse {
    position: fixed;
    left: 0;
  bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    width: 100%;
    background-color: var(--cassiopeia-color-primary);
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
    overflow: auto;
  	z-index: 9998;

}
}
@keyframes colorize {
  0% {
    color: #000;
  }
  100% {
    color: #fff;
    background-color: #000;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes removeLetters {
  0% {
    max-width: 4vw;
  }
  100% {
    max-width: 0;
  }
}
@keyframes addMargin {
  0% {
    margin: 0 0;
  }
  100% {
    margin: 0 5vw;
  }
}
@keyframes numbersUp {
  0% {
    transform: translate(-50%, 100%);
  }
  100% {
    transform: translate(-50%, -3%);
  }
}
@keyframes joomlaDown {
  0% {
    top: 40%;
    left: 50%;
  }
  100% {
    top: 50%;
    left: 31%;
  }
}

@keyframes lineGrow {
  0% {
    width: 0%;
  }
  100% {
    width: 84%;
  }
}
@keyframes numberUpdate {
  0% {
    content: "";
  }
  9% {
    content: "1";
  }
  18% {
    content: "2";
  }
  27% {
    content: "3";
  }
  36% {
    content: "4";
  }
  45% {
    content: "5";
  }
  54% {
    content: "6";
  }
  63% {
    content: "7";
  }
  72% {
    content: "8";
  }
  81% {
    content: "9";
  }
  90% {
    content: "10";
  }
  100% {
    content: "11";
  }
}
@keyframes addMargin {
  0% {
    margin: 0 0;
  }
  100% {
    margin: 0 3vw;
  }
}
.a11y {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.joomla {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  animation: joomlaDown 1s;
  animation-delay: 9s;
  animation-fill-mode: forwards;
}

.a11y::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0%;
  left: 50%;
  border-bottom: 0.5vw solid #000;
  transform: translate(-50%, 50%);
  animation: lineGrow 1s, fadeOut 1s linear;
  animation-delay: 1s, 8s;
  animation-fill-mode: forwards;
}

.a11y::after {
  content: "";
  font-size: 4vw;
  font-family: "Courier", "Courier New", "Courier New Sans", sans-serif;
  font-weight: 700;
  color: #000;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  animation: numberUpdate 5.5s steps(11, end), numbersUp 0.75s linear;
  animation-delay: 2s, 9s;
  animation-fill-mode: forwards;
}

.a11y span,
.joomla span {
  font-size: 4vw;
  font-family: "Courier", "Courier New", "Courier New Sans", sans-serif;
  font-weight: 700;
  color: #000;
  display: inline-block;
  overflow: hidden;
  max-width: 4vw;
}

.a11y span:nth-child(2) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 2s, 8s, 9s;
  animation-fill-mode: forwards;
}

.a11y span:nth-child(3) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 2.5s, 8s, 9s;
  animation-fill-mode: forwards;
}

.a11y span:nth-child(4) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 3s, 8s, 9s;
  animation-fill-mode: forwards;
}

.a11y span:nth-child(5) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 3.5s, 8s, 9s;
  animation-fill-mode: forwards;
}

.a11y span:nth-child(6) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 4s, 8s, 9s;
  animation-fill-mode: forwards;
}

.a11y span:nth-child(7) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 4.5s, 8s, 9s;
  animation-fill-mode: forwards;
}

.a11y span:nth-child(8) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 5s, 8s, 9s;
  animation-fill-mode: forwards;
}

.a11y span:nth-child(9),
.joomla span:nth-child(4) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 5.5s, 8s, 9s;
  animation-fill-mode: forwards;
}

.a11y span:nth-child(10),
.joomla span:nth-child(5) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 6s, 8s, 9s;
  animation-fill-mode: forwards;
}

.a11y span:nth-child(11),
.joomla span:nth-child(6) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 6.5s, 8s, 9s;
  animation-fill-mode: forwards;
}

.a11y span:nth-child(12) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 7s, 8s, 9s;
  animation-fill-mode: forwards;
}

.a11y span:first-child,
.a11y span:last-child {
  animation: addMargin 0.5s;
  animation-delay: 9s;
  animation-fill-mode: forwards;
}

.animation-wrap {
  position: relative;
  height: 800px;
}

.card-shadow {
        margin-bottom: 1.5rem;
        border: 0;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 2px 16px -4px rgb(0 0 0 / 22%);
}

.yt {
    position:relative;
}
.yt-playbtn {
    width: 68px;
    height: 48px;
    position: absolute;
    cursor: pointer;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    background-color: transparent;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: none;
}

.yt-playbtn:hover,
.yt-playbtn:focus {
    filter: none;
}

.title-image {
    background-image: url('/images/powertips.png');
    background-size: contain;
}
.presentations-image {
    background-image: url('/images/presentations.png');
    background-size: contain;
}

.socialshare a {
	display: inline-block;
}
.socialshare .button {
  fill: #fff;
  stroke: none;
  border-radius: 5px;
  padding: 0.5em 0.75em;
}

.socialshare .button:hover {
  opacity: 0.7;
}

.socialshare .icon svg {
  width: 2em;
  height: 2em;
  vertical-align: middle;
}

.socialshare .twitter {
  background-color: #55acee;
}

.socialshare .facebook {
  background-color: #3b5998;
}

.socialshare .linkedin {
  background-color: #0077b5;
}