html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.box {
    background-color: ;
    width: 100%;
    height: 130px;
    position: absolute;
    bottom: 30px;
    display: flex;
}

.box_btn {
    background-color: ;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 1050px;
    margin: 0 auto;
}

/* containers de cada botão individual com seus textos tooltips */
.btn_cx01 {
    position: relative;
    display: flex;
    width: 95px;
    height: 95px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.btn_cx02 {
    position: relative;
    display: flex;
    width: 95px;
    height: 95px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.btn_cx03 {
    position: relative;
    display: flex;
    width: 95px;
    height: 95px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.btn_cx04 {
    position: relative;
    display: flex;
    width: 95px;
    height: 95px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.btn_cx05 {
    position: relative;
    display: flex;
    width: 95px;
    height: 95px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.btn_cx06 {
    position: relative;
    display: flex;
    width: 95px;
    height: 95px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.btn_cx07 {
    position: relative;
    display: flex;
    width: 95px;
    height: 95px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.btn_cx08 {
    position: relative;
    display: flex;
    width: 95px;
    height: 95px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.btn_cx09 {
    position: relative;
    display: flex;
    width: 95px;
    height: 95px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.btn_cx10 {
    position: relative;
    display: flex;
    width: 95px;
    height: 95px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/* botão circular */
.btn_cx01 .button01 {
    cursor: pointer;
}

.btn_cx02 .button02 {
    cursor: pointer;
}

.btn_cx03 .button03 {
    cursor: pointer;
}

.btn_cx04 .button04 {
    cursor: pointer;
}

.btn_cx05 .button05 {
    cursor: pointer;
}

.btn_cx06 .button06 {
    cursor: pointer;
}

.btn_cx07 .button07 {
    cursor: pointer;
}

.btn_cx08 .button08 {
    cursor: pointer;
}

.btn_cx09 .button09 {
    cursor: pointer;
}

.btn_cx10 .button10 {
    cursor: pointer;
}

/* container dos textos */
.txt_cx01 {
    width: 95px;
    height: 20px;
    position: relative;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.txt_cx02 {
    width: 95px;
    height: 20px;
    position: relative;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.txt_cx03 {
    width: 95px;
    height: 20px;
    position: relative;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.txt_cx04 {
    width: 95px;
    height: 20px;
    position: relative;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.txt_cx05 {
    width: 95px;
    height: 20px;
    position: relative;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.txt_cx06 {
    width: 95px;
    height: 20px;
    position: relative;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.txt_cx07 {
    width: 95px;
    height: 20px;
    position: relative;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.txt_cx08 {
    width: 95px;
    height: 20px;
    position: relative;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.txt_cx09 {
    width: 95px;
    height: 20px;
    position: relative;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.txt_cx10 {
    width: 95px;
    height: 20px;
    position: relative;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

/* caixa arredondada dos textos tooltips */
.btn_txt01 {
    position: absolute;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    font-family: sans-serif;
    background: black;
    color: white;
    padding: 6px;
    width: 80px;
    border-radius: 15px;
    visibility: hidden;
    z-index: 5;
}

.btn_txt02 {
    position: absolute;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    font-family: sans-serif;
    background: black;
    color: white;
    padding: 6px;
    width: 80px;
    border-radius: 15px;
    visibility: hidden;
    z-index: 5;
}

.btn_txt03 {
    position: absolute;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    font-family: sans-serif;
    background: black;
    color: white;
    padding: 6px;
    width: 80px;
    border-radius: 15px;
    visibility: hidden;
    z-index: 5;
}

.btn_txt04 {
    position: absolute;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    font-family: sans-serif;
    background: black;
    color: white;
    padding: 6px;
    width: 80px;
    border-radius: 15px;
    visibility: hidden;
    z-index: 5;
}

.btn_txt05 {
    position: absolute;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    font-family: sans-serif;
    background: black;
    color: white;
    padding: 6px;
    width: 80px;
    border-radius: 15px;
    visibility: hidden;
    z-index: 5;
}

.btn_txt06 {
    position: absolute;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    font-family: sans-serif;
    background: black;
    color: white;
    padding: 6px;
    width: 80px;
    border-radius: 15px;
    visibility: hidden;
    z-index: 5;
}

.btn_txt07 {
    position: absolute;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    font-family: sans-serif;
    background: black;
    color: white;
    padding: 6px;
    width: 80px;
    border-radius: 15px;
    visibility: hidden;
    z-index: 5;
}

.btn_txt08 {
    position: absolute;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    font-family: sans-serif;
    background: black;
    color: white;
    padding: 6px;
    width: 80px;
    border-radius: 15px;
    visibility: hidden;
    z-index: 5;
}

.btn_txt09 {
    position: absolute;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    font-family: sans-serif;
    background: black;
    color: white;
    padding: 6px;
    width: 80px;
    border-radius: 15px;
    visibility: hidden;
    z-index: 5;
}

.btn_txt10 {
    position: absolute;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    font-family: sans-serif;
    background: black;
    color: white;
    padding: 6px;
    width: 80px;
    border-radius: 15px;
    visibility: hidden;
    z-index: 5;
}

/* efeito hover dos textos */
.btn_cx01:hover .btn_txt01 {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    z-index: 5;
}

.btn_cx02:hover .btn_txt02 {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    z-index: 5;
}

.btn_cx03:hover .btn_txt03 {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    z-index: 5;
}

.btn_cx04:hover .btn_txt04 {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    z-index: 5;
}

.btn_cx05:hover .btn_txt05 {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    z-index: 5;
}

.btn_cx06:hover .btn_txt06 {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    z-index: 5;
}

.btn_cx07:hover .btn_txt07 {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    z-index: 5;
}

.btn_cx08:hover .btn_txt08 {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    z-index: 5;
}

.btn_cx09:hover .btn_txt09 {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    z-index: 5;
}

.btn_cx10:hover .btn_txt10 {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    z-index: 5;
}

/* Media Queries - 600px */
@media screen and (max-width:600px) {
    .btn_cx01 .txt_cx01 .btn_txt01 {
        visibility: hidden;
        opacity: 0;
    }

    .box_btn {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        width: 100%;
        height: auto;
        max-width: 350px;
        margin: 0 auto;
    }

    .box {
        background-color: ;
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 5px;
        display: flex;
    }

    .button01 {
        width: 65px;
        height: 65px;
    }

    .btn_cx01 {
        position: relative;
        display: flex;
        width: 65px;
        height: 95px;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -70px;
    }

    section {
        position: absolute;
        top: -75px;
        display: block;
        width: 100%;
        text-align: center;
        flex-direction: row;
        border-radius: 10px;
    }
}

@media screen and (max-width:600px) {
    .btn_cx02 .txt_cx02 .btn_txt02 {
        visibility: hidden;
        opacity: 0;
    }

    .box_btn {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        width: 100%;
        height: auto;
        max-width: 350px;
        margin: 0 auto;
    }

    .box {
        background-color: ;
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 5px;
        display: flex;
    }

    .button02 {
        width: 65px;
        height: 65px;
    }

    .btn_cx02 {
        position: relative;
        display: flex;
        width: 65px;
        height: 95px;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -70px;
    }

    section {
        position: absolute;
        top: -75px;
        display: block;
        width: 100%;
        text-align: center;
        flex-direction: row;
        border-radius: 10px;
    }
}

@media screen and (max-width:600px) {
    .btn_cx03 .txt_cx03 .btn_txt03 {
        visibility: hidden;
        opacity: 0;
    }

    .box_btn {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        width: 100%;
        height: auto;
        max-width: 350px;
        margin: 0 auto;
    }

    .box {
        background-color: ;
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 5px;
        display: flex;
    }

    .button03 {
        width: 65px;
        height: 65px;
    }

    .btn_cx03 {
        position: relative;
        display: flex;
        width: 65px;
        height: 95px;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -70px;
    }

    section {
        position: absolute;
        top: -75px;
        display: block;
        width: 100%;
        text-align: center;
        flex-direction: row;
        border-radius: 10px;
    }
}

@media screen and (max-width:600px) {
    .btn_cx04 .txt_cx04 .btn_txt04 {
        visibility: hidden;
        opacity: 0;
    }

    .box_btn {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        width: 100%;
        height: auto;
        max-width: 350px;
        margin: 0 auto;
    }

    .box {
        background-color: ;
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 5px;
        display: flex;
    }

    .button04 {
        width: 65px;
        height: 65px;
    }

    .btn_cx04 {
        position: relative;
        display: flex;
        width: 65px;
        height: 95px;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -70px;
    }

    section {
        position: absolute;
        top: -75px;
        display: block;
        width: 100%;
        text-align: center;
        flex-direction: row;
        border-radius: 10px;
    }
}

@media screen and (max-width:600px) {
    .btn_cx05 .txt_cx05 .btn_txt05 {
        visibility: hidden;
        opacity: 0;
    }

    .box_btn {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        width: 100%;
        height: auto;
        max-width: 350px;
        margin: 0 auto;
    }

    .box {
        background-color: ;
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 5px;
        display: flex;
    }

    .button05 {
        width: 65px;
        height: 65px;
    }

    .btn_cx05 {
        position: relative;
        display: flex;
        width: 65px;
        height: 95px;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -70px;
    }

    section {
        position: absolute;
        top: -75px;
        display: block;
        width: 100%;
        text-align: center;
        flex-direction: row;
        border-radius: 10px;
    }
}

@media screen and (max-width:600px) {
    .btn_cx06 .txt_cx06 .btn_txt06 {
        visibility: hidden;
        opacity: 0;
    }

    .box_btn {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        width: 100%;
        height: auto;
        max-width: 350px;
        margin: 0 auto;
    }

    .box {
        background-color: ;
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 5px;
        display: flex;
    }

    .button06 {
        width: 65px;
        height: 65px;
    }

    .btn_cx06 {
        position: relative;
        display: flex;
        width: 65px;
        height: 65px;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -85px;
    }

    section {
        position: absolute;
        top: -75px;
        display: block;
        width: 100%;
        text-align: center;
        flex-direction: row;
        border-radius: 10px;
    }
}

@media screen and (max-width:600px) {
    .btn_cx07 .txt_cx07 .btn_txt07 {
        visibility: hidden;
        opacity: 0;
    }

    .box_btn {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        width: 100%;
        height: auto;
        max-width: 350px;
        margin: 0 auto;
    }

    .box {
        background-color: ;
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 5px;
        display: flex;
    }

    .button07 {
        width: 65px;
        height: 65px;
    }

    .btn_cx07 {
        position: relative;
        display: flex;
        width: 65px;
        height: 65px;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -85px;
    }

    section {
        position: absolute;
        top: -75px;
        display: block;
        width: 100%;
        text-align: center;
        flex-direction: row;
        border-radius: 10px;
    }
}

@media screen and (max-width:600px) {
    .btn_cx08 .txt_cx08 .btn_txt08 {
        visibility: hidden;
        opacity: 0;
    }

    .box_btn {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        width: 100%;
        height: auto;
        max-width: 350px;
        margin: 0 auto;
    }

    .box {
        background-color: ;
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 5px;
        display: flex;
    }

    .button08 {
        width: 65px;
        height: 65px;
    }

    .btn_cx08 {
        position: relative;
        display: flex;
        width: 65px;
        height: 65px;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -85px;
    }

    section {
        position: absolute;
        top: -75px;
        display: block;
        width: 100%;
        text-align: center;
        flex-direction: row;
        border-radius: 10px;
    }
}

@media screen and (max-width:600px) {
    .btn_cx09 .txt_cx09 .btn_txt09 {
        visibility: hidden;
        opacity: 0;
    }

    .box_btn {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        width: 100%;
        height: auto;
        max-width: 350px;
        margin: 0 auto;
    }

    .box {
        background-color: ;
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 5px;
        display: flex;
    }

    .button09 {
        width: 65px;
        height: 65px;
    }

    .btn_cx09 {
        position: relative;
        display: flex;
        width: 65px;
        height: 65px;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -85px;
    }

    section {
        position: absolute;
        top: -75px;
        display: block;
        width: 100%;
        text-align: center;
        flex-direction: row;
        border-radius: 10px;
    }
}

@media screen and (max-width:600px) {
    .btn_cx10 .txt_cx10 .btn_txt10 {
        visibility: hidden;
        opacity: 0;
    }

    .box_btn {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        width: 100%;
        height: auto;
        max-width: 350px;
        margin: 0 auto;
    }

    .box {
        background-color: ;
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 5px;
        display: flex;
    }

    .button10 {
        width: 65px;
        height: 65px;
    }

    .btn_cx10 {
        position: relative;
        display: flex;
        width: 65px;
        height: 65px;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: -85px;
    }

    section {
        position: absolute;
        top: -75px;
        display: block;
        width: 100%;
        text-align: center;
        flex-direction: row;
        border-radius: 10px;
    }
}