.tabs {
    border-radius: 5px;
    min-width: 300px;
    padding: 50px;
    padding-bottom: 80px;
    width: 100%;
    box-shadow: var(--c-shadow-general);
}

    .tabs .content {
        margin-top: 30px
    }

        .tabs .content section {
            -webkit-animation-direction: normal;
            -webkit-animation-duration: .3s;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-name: content;
            -webkit-animation-timing-function: ease-in-out;
            animation-direction: normal;
            animation-duration: .3s;
            animation-iteration-count: 1;
            animation-name: content;
            animation-timing-function: ease-in-out;
            display: none;
            line-height: 1.4
        }

            .tabs .content section h2, .tabs ul li label {
                font: 600 20px "Arial"
            }

                .tabs .content section h2::after {
                    content: "";
                    display: block;
                    height: 3px;
                    left: 1px;
                    margin-top: 5px;
                    position: relative;
                    width: 30px
                }

    .tabs .slider {
        position: relative;
        transition: all .33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
        width: 25%
    }

        .tabs .slider .indicator {
            border-radius: 1px;
            height: 4px;
            margin: 0 auto;
            max-width: 100%;
            position: relative;
            width: 150px
        }

    .tabs .slider-devider {
        height: 4px;
        margin: 10px;
        width: -webkit-fill-available
    }

    .tabs .tab1Button:checked ~ .content > .tab1Content,
    .tabs .tab2Button:checked ~ .content > .tab2Content,
    .tabs .tab3Button:checked ~ .content > .tab3Content,
    .tabs .tab4Button:checked ~ .content > .tab4Content,
    .tabs .tab5Button:checked ~ .content > .tab5Content {
        display: block
    }

    .tabs .tab1Button:checked ~ ul > .tab1 > label,
    .tabs .tab2Button:checked ~ ul > .tab2 > label,
    .tabs .tab3Button:checked ~ ul > .tab3 > label,
    .tabs .tab4Button:checked ~ ul > .tab4 > label,
    .tabs .tab5Button:checked ~ ul > .tab5 > label {
        cursor: default
    }

    .tabs .tab1Button:checked ~ .slider {
        transform: translateX(100%)
    }

    .tabs .tab2Button:checked ~ .slider {
        transform: translateX(200%)
    }

    .tabs.tabs5 {
        min-width: 700px;
    }

        .tabs.tabs5 .tab1Button:checked ~ .slider {
            transform: translateX(-10%)
        }

        .tabs.tabs5 .tab2Button:checked ~ .slider {
            transform: translateX(70%)
        }

        .tabs.tabs5 .tab3Button:checked ~ .slider {
            transform: translateX(150%)
        }

        .tabs.tabs5 .tab4Button:checked ~ .slider {
            transform: translateX(230%)
        }

        .tabs.tabs5 .tab5Button:checked ~ .slider {
            transform: translateX(310%)
        }

    .tabs.tabs4 {
        min-width: 450px;
    }

        .tabs.tabs4 .tab1Button:checked ~ .slider {
            transform: translateX(0%)
        }

        .tabs.tabs4 .tab2Button:checked ~ .slider {
            transform: translateX(100%)
        }

        .tabs.tabs4 .tab3Button:checked ~ .slider {
            transform: translateX(200%)
        }

        .tabs.tabs4 .tab4Button:checked ~ .slider {
            transform: translateX(300%)
        }

    .tabs.tabs3 {
        min-width: 300px;
    }

        .tabs.tabs3 .tab1Button:checked ~ .slider {
            transform: translateX(70%)
        }

        .tabs.tabs3 .tab2Button:checked ~ .slider {
            transform: translateX(150%)
        }

        .tabs.tabs3 .tab3Button:checked ~ .slider {
            transform: translateX(230%)
        }


    .tabs input[name=tab-control], .tabs ul li label br, .tabs .content section h2 {
        display: none
    }

    .tabs ul {
        align-items: flex-end;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        list-style-type: none;
        margin-bottom: 10px;
        padding-left: 0
    }

        .tabs ul li {
            box-sizing: border-box;
            flex: 1;
            padding: 0 10px;
            text-align: center;
            width: 50%
        }

            .tabs ul li label {
                -moz-user-select: none;
                -ms-user-select: none;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                cursor: pointer;
                display: block;
                overflow: hidden;
                padding: 5px auto;
                text-overflow: ellipsis;
                transition: all .3s ease-in-out;
                user-select: none;
                white-space: nowrap
            }

                .tabs ul li label svg {
                    height: 1.2em;
                    margin-right: .2em;
                    transition: all .2s ease-in-out;
                    vertical-align: bottom
                }

                .tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
                    outline: 0
                }

@-webkit-keyframes content {
    from {
        opacity: 0;
        transform: translateY(5%)
    }

    to {
        opacity: 1;
        transform: translateY(0%)
    }
}

@keyframes content {
    from {
        opacity: 0;
        transform: translateY(5%)
    }

    to {
        opacity: 1;
        transform: translateY(0%)
    }
}

@media (max-width: 1000px) {
    .tabs ul {
        align-items: baseline;
    }

        .tabs ul li label {
            white-space: initial
        }

            .tabs ul li label br {
                display: initial
            }

            .tabs ul li label svg {
                height: 1.5em
            }
}

.tabs .content section h2, .tabs ul li label {
    color: var(--c-color-theme-general)
}

.tabs .slider .indicator {
    background: var(--c-color-theme-general)
}

.tabs .slider-devider {
    background: var(--c-color-tabs-devider)
}

.tabs ul li label {
    color: var(--c-color-theme-general);
    opacity: .3
}

    .tabs ul li label:hover,
    .tabs ul li label:focus,
    .tabs ul li label:active,
    .tabs .tab1Button:checked ~ ul > .tab1 > label,
    .tabs .tab2Button:checked ~ ul > .tab2 > label,
    .tabs .tab3Button:checked ~ ul > .tab3 > label,
    .tabs .tab4Button:checked ~ ul > .tab4 > label,
    .tabs .tab5Button:checked ~ ul > .tab5 > label {
        color: var(--c-color-theme-general);
        opacity: 1
    }