@media only screen and (max-width: 768px) {
    .esquema {
        flex-direction: column-reverse;
    }

    .steps.one .scheme-title {
        display: none;
    }

    .steps.two .point-title {
        display: block;
        max-width: 280px;
    }

    .steps.rosco {
        display: none;
    }

    .steps .point {
        border: 20px solid transparent;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-direction: row;
        font-size: 1.5em;
        margin: 16px 0 0 0;
        max-width: 300px;
        padding: 0 32px;
        clip-path: polygon( 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
    }

        .steps .point.st00 {
            font-size: 1em;
            margin: 0;
            max-width: 50%;
        }

        .steps .point .point-checklist {
            margin: 16px 0 0 8px;
        }


        .steps .point b {
            font-size: 2em;
            margin-right: 8px;
        }

    .step-r {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .steps .step {
        max-width: 300px;
    }
}
.esquema {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    text-align: center;
}

.steps {
    width: 100%;
    color: #ffffff;
}

    .steps.one {
        flex: 0 0 250px;
    }

    .steps.two {
        flex: 0 0 250px;
    }

    .steps.rosco {
        flex: 1 0 100%;
        max-width: 510px;
        max-height: 100vh;
        min-height: 600px;
        width: 100%;
        height: 100%;
        background-image: url('../images/scheme-rosco.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

.scheme-title {
    max-width: 250px;
}

.step-c {
    width: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.step {
    width: 100%;
    border: 20px solid transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    clip-path: polygon( 0% 0%, 50% 20%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
}
    .point-title,
    .point {
        display: none;
    }

    .step.first {
        margin-top: 16px;
        clip-path: polygon( 0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
    }

.st00 {
    background-color: #efefef;
    color: #696969;
}

.st01 {
    background-color: #0578BE;
}

.st02 {
    background-color: #4185C6;
}

.st03 {
    background-color: #6596CF;
}

.st04 {
    background-color: #82A5D7;
}

.st05 {
    background-color: #86bc25;
}

.st06 {
    background-color: #a2c852;
}

.st07 {
    background-color: #49bceb;
}

.st08 {
    background-color: #5ec3ed;
}

.st09 {
    background-color: #7fcff1;
}

.step:hover {
    background-color: #dddddd;
    color: #696969;
}

.flex-button {
    display: flex;
    align-content: center;
    align-items: center;
    height: 100%;
    justify-content: space-between;
    gap: .5em;
    margin: 0;
    padding: 0;
    width: 100%;
}