/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.actived,
.accordion:hover {
   background-color: var(--blue) !important;
   color: #ffffff !important;
}

.actived {
   border-radius: var(--rounded) var(--rounded) 0px 0px !important;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
   padding: 0 18px;
   background-color: var(--white);
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.7s cubic-bezier(0.19, 0, 0.05, 1);
   border-radius: 0px 0px var(--rounded) var(--rounded);
}

.panel p,
.panel ol {
   color: var(--grey);
   padding-top: 1em;
   padding-bottom: 1em;
   margin: 0px;
}

.panel h2,
.panel h3 {
   color: var(--grey);
   padding-top: 1em;
   margin: 0px;
}

.video-help {
   padding-top: 0.5em;
}

h2 {
   margin: 0px;
}

.row {
   padding-bottom: 2em;
}

/* Style the buttons that are used to open and close the accordion panel */

.accordion {
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
   border-radius: var(--rounded);
   border: 0;
   background: var(--blue);
   cursor: pointer;
   display: inline-block;
   font-weight: normal;
   font-size: 16px;
   height: 3em;
   line-height: 3em;
   padding: 0 1.5em;
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
   width: 100%;
   margin-bottom: 0px;
   margin-top: 1em;
   color: white;
}

.accordion:after {
   content: "\002B";
   color: var(--wite);
   font-weight: bold;
   float: right;
   margin-left: 5px;
}

.actived:after {
   content: "\2212";
   color: white;
}

#header.alt > * {
   text-align: center;
}