.onboarding-button
{
    padding-top: 260px;

    text-align: center;
}

.onboarding-container
{
    width: 100%;
    min-height: 480px;
}

.onboarding-container-scrollable
{
    position: absolute;

    width: 41%;
    height: 802px;

    overflow: clip;
    overflow-y: scroll;
    
}

.onboarding-item-1
{
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;

    width: 100%;
}

.onboarding-item-2
{
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;

    width: 50%;
}

.onboarding-item-3
{
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;

    width: 33.33%;
}

.onboarding-item-4
{
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;

    width: 25%;
}

.onboarding-item-1-counter
{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    width: 100%;
}

.onboarding-item-2-counter
{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    width: 50%;
}

.onboarding-item-title
{
    width: 100%;

    padding-top: 16px;

    text-align: center;
    font-size: 24px;
    font-weight: 700;

    color: #000000;
}

.onboarding-item-text
{
    padding-top: 8px;

    text-align: center;
    font-size: 14px;
    line-height: 19px;

    color: #000000;
}

.onboarding-item-bigtext
{
    padding-top: 8px;
    padding-bottom: 8px;

    text-align: center;
    font-size: 18px;
    line-height: 24px;

    color: #000000;
}

.onboarding-item-quote
{
    padding-top: 8px;
    padding-bottom: 8px;

    text-align: center;
    font-size: 18px;
    font-style: italic;
    line-height: 24px;

    color: #000000;
}

.onboarding-item-counter
{
    padding-top: 8px;

    text-align: center;
    font-size: 48px;
    line-height: 48px;
    font-weight: 700;

    color: #000000;
}

.onboarding-icon-files
{
    width: 100%;
    height: 64px;

    background-image: url('/public/image/onboarding_files.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.onboarding-icon-info
{
    width: 100%;
    height: 128px;

    background-image: url('/public/image/onboarding_info.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.onboarding-icon-sliders
{
    width: 100%;
    height: 32px;

    background-image: url('/public/image/onboarding_sliders.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.onboarding-fadein-1
{
    opacity: 0.0;

    animation-name: animation-fadein;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.onboarding-fadein-2
{
    opacity: 0.0;

    animation-name: animation-fadein;
    animation-duration: 1s;
    animation-delay: 0.25s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.onboarding-fadein-3
{
    opacity: 0.0;

    animation-name: animation-fadein;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.onboarding-fadein-4
{
    opacity: 0.0;

    animation-name: animation-fadein;
    animation-duration: 1s;
    animation-delay: 0.75s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.onboarding-fadein-5
{
    opacity: 0.0;

    animation-name: animation-fadein;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.onboarding-fadein-6
{
    opacity: 0.0;

    animation-name: animation-fadein;
    animation-duration: 1s;
    animation-delay: 1.25s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.onboarding-fadein-7
{
    opacity: 0.0;

    animation-name: animation-fadein;
    animation-duration: 1s;
    animation-delay: 1.5s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.onboarding-fadein-8
{
    opacity: 0.0;

    animation-name: animation-fadein;
    animation-duration: 1s;
    animation-delay: 1.75s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.onboarding-fadein-9
{
    opacity: 0.0;

    animation-name: animation-fadein;
    animation-duration: 1s;
    animation-delay: 2.0s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.onboarding-fadein-10
{
    opacity: 0.0;

    animation-name: animation-fadein;
    animation-duration: 1s;
    animation-delay: 2.25s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes animation-fadein
{
    0%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 1;
    }
  }