/* label styling and function */

.tabsToggle {
    position: relative;
    display: flex;
    flex-direction: row;
	justify-content: left;
    text-align: left;
    align-items: left;
    column-gap: 40px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.tabsToggle label {
    cursor: pointer;
    color: var(--brand-grey);
    font-family: Open Sans, open-sans, sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem;
    transition: .2s ease-in-out;
    position: relative;
    display: flex;
    justify-content: center;
}

.tabsToggle label:after {
    content: "";
    height: 0.0625rem;
    position: absolute;
    bottom: 0;
    width: 0%;
    background: var(--brandGreen);
    transition: width 400ms ease;
    display: flex;
    justify-content: center;
}

input[type="radio"], input[type="checkbox"] {
    outline: none;
	display: none;
}

input ~ .tab {
    display: none;
	opacity: 0;
}

#tab0:checked ~ .tab.content0, #tab1:checked ~ .tab.content1, #tab2:checked ~ .tab.content2, #tab3:checked ~ .tab.content3, #tab4:checked ~ .tab.content4, #tab5:checked ~ .tab.content5 {
	display: block;
	opacity: 1;
	animation-name: content-fade;
    animation-duration: .7s;
    transition: all .7s ease-in;
}

@keyframes content-fade {
	0% { opacity: 0;}
	100% {opacity: 1;}
}

.tabsToggle label:hover:after, .tabsToggle input:checked + label:after  {
	width: 100%;
}