.toggler {
    box-shadow: 0 -1px 0 0 #c3c2c2 inset, -1px 0 0 0 #c3c2c2 inset;
    margin-bottom: 1.5rem;
    font-size: 0.888rem;
    font-weight: 400;
}

.toggle {
    font-family: var(--font-family--arial);
}

.toggle-cross {
    padding: 1rem;
    margin-left: -1rem;
}

.toggle.toggle-cross:hover span {
    color: #fff;
}

.toggle.toggle-cross span {
    position: relative;
    transition: .3s all;
    display: block;
}

.toggle.toggle-cross span:before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23e83c4d' d='M40 17.692H22.308V0h-4.615v17.692H.001v4.615h17.692v17.692h4.615V22.307H40z'/%3E%3C/svg%3E");
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    vertical-align: middle;
    margin-right: .5em;
    transition: .3s all;
    will-change: filter;
}

.toggle.is-visible span:before{
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23e83c4d' d='M0 17.692h40v4.615H0v-4.615z'/%3E%3C/svg%3E");
}

.toggle:hover span:before {
    filter: saturate(0%) brightness(1000%);
}

.toggle-content {
    position: relative;
    overflow: hidden;
    height: 0;
    transition: 0.25s height cubic-bezier(0.275, 0.075, 0.215, 0.94), .5s transform ease-out, .2s opacity ease-out;
    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
}

.toggle-content-inner {
    padding: 0 2rem 2rem 2rem;
}

.toggle-content .toggle-content-inner:after {
    content: '';
    background: #c09b29;
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: .3s all ease-in-out;
}

.toggle-content.is-visible .toggle-content-inner:after {
    height: 4px;
}

.toggle-content.is-visible {
    height: auto;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    overflow: visible;
}

.toggle-title {
    margin: 0;
    padding: 0;
}

.toggle-title button {
    display: flex;
    position: relative;
    width: 100%;
    font-size: 1.333333rem;
    transition-property: color;
    font-weight: 600;
    padding: 1.5rem 1rem 1.5rem 2rem;
}

.toggle-title .icon-holder {
    transition: none;
    pointer-events: none;
    position: absolute;
    transform: translateX(-100%);
    left: 1rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .toggle-title button {
        padding-left: 4rem;
    }

    .toggle-title .icon-holder {
        left: 3rem;
    }

    .toggle-content-inner {
        padding-left: 4rem;
    }
    .toggle-content-inner {
        padding-right: 4rem;
    }
}

.toggle-title button[aria-expanded="true"] {
    color: #bf9b2a;
}

.toggle-title button[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.toggle-title button[aria-expanded="false"] svg {
    transform: rotate(0deg);
}

.toggle-content-inner > *:last-child {
    margin-bottom: 0;
}