/***************************************************************************
* Links
****************************************************************************/
a, a:visited {
    color: inherit;
    transition: color .25s ease;
}
a:hover, a:focus {
    color: inherit;
}

a:focus {
    outline: 0.125rem solid rgba(0,0,0,0.1);
}

.content_inner a {
    text-decoration: underline;
}
.content_inner a.button {
    text-decoration: none;
}



/***************************************************************************
* Buttons
****************************************************************************/
.button, .button:visited{
    padding: 1.5em 2.125em;
    position: relative; overflow: hidden;
    background-color: var(--typo-color-black);
    color: #FFFFFF;
    font-size: 0.875em;
    font-weight: 700;
    border-radius: 0.25em;
}
.button:hover,
.button:focus {
    background-color: var(--typo-color-black);
    color: #FFFFFF;
}
.button:after {
    content: ''; position: absolute;
    top: 0; left: 0; right: 100%; bottom: 0;
    width: auto; height: auto; background-color: #FFFFFF;
    transition: all .25s ease;
    transform: skewX(-20deg);
    transform-origin: 0 0;
    opacity: 0.15;
}
.button:hover:after,
.button:focus:after {
    right: 40%;
}

.button.red,
.button.red:visited,
.button.red:hover,
.button.red:focus {
    background-color: var(--typo-color-red);
}

.button.bordered,
.button.bordered:visited,
.button.bordered:hover,
.button.bordered:focus {
    background-color: transparent;
    color: var(--typo-color-black);
    border: 0.125em solid var(--typo-color-black);
}
.button.bordered:after {
    background-color: var(--typo-color-black);
}
/*.button.bordered:before {
    content: ''; position: absolute;
    top: 0; left: 0; bottom: 0; right: 0; 
    pointer-events: none; width: auto; height: auto;
    border: 0.125em solid currentColor;
    border-radius: 0.25em;
} */

.button.bordered.active {
    background-color: var(--typo-color-black);
    color: #FFFFFF;
}
.button.bordered.active:after {
    background-color: #FFFFFF;
}

.text_


a.button.typo_lightbox[href*=".mp4"],
a.button.typo_lightbox[href*="youtube"],
a.button.typo_lightbox[href*="vimeo"] {
    padding-right: 4em;
    background-image: var(--typo-svg-play-circle-white);
    background-size: auto 54%;
    background-position: calc(100% - 1em) 50%;
    background-repeat: no-repeat;
}

a.button.red.typo_lightbox[href*=".mp4"],
a.button.red.typo_lightbox[href*="youtube"],
a.button.red.typo_lightbox[href*="vimeo"] {
    background-image: var(--typo-svg-play-circle-white);
}
a.button.bordered.typo_lightbox[href*=".mp4"],
a.button.bordered.typo_lightbox[href*="youtube"],
a.button.bordered.typo_lightbox[href*="vimeo"] {
    padding-right: 4em;
    background-image: var(--typo-svg-play-circle);
    background-size: auto 54%;
    background-position: calc(100% - 1em) 50%;
    background-repeat: no-repeat;

}

/***************************************************************************
* Button-Group
****************************************************************************/
.button-group {
    margin: 0 calc(var(--typo-half-gap) * -1);
}
.button-group:not(:first-child){
    margin-top: 2em;
}
.button-group .button {
    margin: var(--typo-half-gap);
}