@media (max-width: 767.98px) {
    /* estilo mobile */

    .preloader img {
        width: 192px;
    }

    .toast {
        display: none;
    }

    .menu {
        display: none;
    }

    .headline h1 {
        font-size: 2.5rem;
        letter-spacing: 4px;
    }

    .headline p {
        font-size: 1.7rem;
    }

    .headline-description p {
        width: 100%;
    }


    /* ABOUTME */

    .aboutme-box {
        margin: 0;
        height: 1900px;
    }

    .aboutme-left {
        flex: 100%;
    }

    .avatar-frame img {
        position: absolute;
        bottom: 0px !important;
        left: 0px !important;
        width: 100% !important;
    }

    .aboutme-left .avatar-frame .baloon-text {
        display: none;
    }

    .aboutme-right .card-interests {
        display: flex;
        flex-flow: row wrap;
        width: 80%;
        margin: 50px;
    }

    .aboutme-right .card-interests p {
        margin: 5px 15px;
    }

    .aboutme-right .socials-box {
        margin-top: 0;
    }

    .aboutme-right .socials-box .card-social {
        width: 80%;
    }


    /* STACK */

    .stack-box {
        margin: 0;
        height: 1600px;
    }

    .stack-card-box {
        margin: 0;
        border-radius: 0;
        padding: 40px 0;
    }

    .stack-card-group {
        flex: 1 1 100%;
        margin: 0;
    }

    .stack-card {
        flex: 1 1 30%;
        margin: 20px;
    }

    .stack-card img {
        width: 64px;
    }

    .stack-description-box {
        width: 90%;
    }

    .description-box {
        padding: 10px 50px;
    }

    .description-box div p {
        margin-top: -5px;
        font-size: .9rem;
    }

    /* PROJETOS */

    .filter-box {
        width: 90%;
    }

    #selector {
        left: 108px;
    }

    .filter-text p {
        margin: 4px 6px;
    }

    .selector-move-left {
        transform: translateX(-108px);
    }

    .selector-move-center {
        transform: translateX(0)
    }

    .selector-move-right {
        transform: translateX(108px)
    }

    .card-box {
        padding: 30px 10px;
    }

    .flip-card {
        flex: 1 1 100%;
        height: 250px;
        margin: 10px 20px;
    }

    /* SETA TOPO PÁG */
    .arrow {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1449.98px) {

    /* estilo tablet */
    .headline h1 {
        font-size: 4rem;
        letter-spacing: 4px;
    }

    .headline p {
        font-size: 3rem;
    }

    .headline-description p {
        width: 100%;
        font-size: 1.5rem;
    }

    /* ABOUTME */

    .aboutme-box {
        margin: 0;
        height: 1800px;
    }

    .aboutme-left {
        flex: 100%;
    }

    .aboutme-left .avatar-frame .baloon-text {
        width: 240px;
    }

    .aboutme-right .card-interests {
        display: flex;
        flex-flow: row wrap;
        width: 60%;
        margin: 50px;
    }

    .aboutme-right .card-interests p {
        margin: 5px 15px;
    }

    .aboutme-right .socials-box {
        margin-top: 0;
    }

    .aboutme-right .socials-box .card-social {
        width: 60%;
    }

    /* STACK */

    .stack-box {
        margin: 0;
        height: 1600px;
    }

    .stack-card-box {
        margin: 0;
        border-radius: 0;
        padding: 40px 0;
    }

    .stack-card-group {
        flex: 1 1 100%;
        margin: 0;
        padding: 40px;
        margin-bottom: 20px;
    }

    .stack-card {
        flex: 1 1 20%;
        margin: 20px 30px;
    }

    .stack-card img {
        width: 64px;
    }

    .stack-description-box {
        width: 80%;
    }

    .description-box {
        padding: 10px 50px;
    }

    .description-box div img {
        width: 96px;
    }

    .description-box div p {
        margin-top: -5px;
        font-size: 1.3rem;
        text-align: center;
    }

    /* PROJETOS */

    .card-box {
        padding: 30px 10px;
    }

    .flip-card {
        flex: 1 1 40%;
        height: 300px;
        margin: 20px 10px;
    }
}

@media (max-width: 1700px) {
    /* estilo para telas maiores */
    .stack-card-box {
        margin: 0 0px;
    }
}