:root {
    --next-block-max-width: 100%;
    --next-block-max-height: 350px;

    --next-block-button-text-color: #4a4a4a;
    --next-block-button-arrow-color: #02a0d0;
}

@font-face {
	font-family: "next-block-Rubik-SemiBold";
	src: url("../fonts/Rubik-SemiBold.ttf") format("truetype"); 
}

.next-block {
    width: var(--next-block-width);
    display: flex;
    flex-direction: column;
}

.next-block__container {
    position: relative;
    width: 100%;
    max-width: var(--next-block-max-width);
    height: var(--next-block-max-height);
    overflow: hidden;

    transition: height 0.8s ease-in-out;

    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;

    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
}

/* Full */

/* .next-block_full {
    flex: 1;
} */

.next-block__container_full {
    flex: 1 1 auto;
}

/* Reset margin bottom last content */
.next-block__container p:last-child,
.next-block__container ul:last-child,
.next-block__container ol:last-child
{
    margin-bottom: 0;
}

.next-block__footer {
    width: 100%;
    padding: .75rem 0 .75rem 0;
}

.next-button {
    display: none;
    font-family: "next-block-Rubik-SemiBold", sans-serif!important;
    font-size: 1rem;
    color: var(--next-block-button-text-color);
    text-transform: uppercase;
}

.next-button::after,
.next-button::before {
    display: none;
    content: "";
    margin-top: 2px;
    vertical-align: text-top;

    border-top: 9px solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 16px solid var(--next-block-button-arrow-color);
}

.next-button_next::after {
    display: inline-block;
    margin-right: 6px;
    transform: rotate(180deg);
}

.next-button_hide::before {
    display: inline-block;
    margin-left: 6px;
}

.next-button_next.button-show {
    display: block;
}
.next-button_hide.button-show {
    display: block;
}

.next-block__container.show-c {
    height: auto;
    mask-image: none;
    -webkit-mask-image: none;
}