/* Dispositivos Movéis */
/* Smartphones */
@media screen and (max-width: 480px) {
    /* Estilos para smartphones */

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .menu {
        padding: 24px 16px;
    }

    .menu .container {
        padding: 0;
    }

    .menu .logo {
        background-image: url('../images/logo_1.png');
        background-size: 34px 34px;
        height: 34px;
        width: 34px;
    }

    .menu .subscribe {
        font-size: 14px;
        letter-spacing: 0.28px;
        padding: 0 12px;
        height: fit-content;
    }

    .menu .socials a {
        padding: 2px;
    }

    .menu .socials img {
        width: 16px;
        height: 16px;
    }

    .banner .desktop {
        display: none;
    }

    .banner .mobile {
        display: block;
    }

    .details {
        background: none;
        padding: 0;
    }

    .details .container {
        flex-direction: column !important;
        padding: 0 !important;
    }

    .details .item {
        background: #151514;
        margin-bottom: 8px;
        width: 100%;
        padding: 8px 0;
    }

    .details .item:last-child {
        margin-bottom: 0;
    }

    .details .item img {
        width: 24px;
        height: 24px;
        margin-bottom: 13px;
    }

    .details .item .title {
        font-size: 24px;
        letter-spacing: 2.4px;
    }

    .details .item p {
        font-size: 16px;
        font-family: Archivo;
        letter-spacing: 0.32px;
    }

    .congresso .title {
        font-size: 32px;
        letter-spacing: 2.56px;
        margin-bottom: 16px;
    }

    .congresso .subtitle {
        font-size: 16px;
        line-height: 145%;
        letter-spacing: 0.32px;
        margin-bottom: 24px;
    }

    .congresso .col-md-9 {
        flex-direction: column !important;
    }

    .congresso .box {
        padding: 8px 16px;
        margin-right: 0px;
        margin-bottom: 24px;
    }

    .congresso .box:last-child {
        margin-bottom: 0px;
    }

    .congresso .box .title {
        font-size: 24px;
        line-height: 145%;
        letter-spacing: 0.48px;
    }

    .congresso .box .text {
        padding-left: 13px;
    }

    .congresso .box.odd {
        background: #141d47;
    }

    .congresso .box.odd .title {
        color: #FBF9F9;
    }

    .congresso .box.odd .text {
        color: #FBF9F9CC;
    }

    .congresso .box.even {
        background: #FBF9F9CC;
        border: 1px solid #4A6D92;
    }

    .congresso .box.even .title {
        color: #141d47;
    }

    .congresso .box.even .text {
        color: #151514CC;
    }

    .schedule {
        background-color: #141d47;
    }

    .schedule {
        background-color: #141d47;
        background-image: url('bg-mobile.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }


    .schedule>div.container::after {
        display: none;
    }

    .title-schedule {
        margin-top: 24px;
        font-size: 32px;
        font-weight: 500;
        letter-spacing: 2.56px;
    }

    .schedule .buttons {
        margin-bottom: 24px;
    }

    .btnSchedule {
        font-size: 14px;
        letter-spacing: 1.12px;
    }

    .speech::after {
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        border-left: 24px solid #111;
        border-right: 154px solid transparent;
        border-top: -34px solid #111;
        border-bottom: 20px solid transparent;
        left: 60%;
        bottom: -11px;
    }

    .custom-card {
        padding: 16px;
        margin-bottom: 24px;
    }

    .event {
        margin-bottom: 16px;
    }

    .event-time {
        font-size: 24px;
        letter-spacing: 0.48px;
    }

    .event-time img {
        height: 16px;
        margin-right: 16px;
    }

    .event-title {
        font-size: 18px;
        letter-spacing: 0.36px;
    }

    .event-place {
        font-size: 10px;
        letter-spacing: 0.2px;
    }

    .event-place img {
        width: 8px;
        margin-right: 2px;
    }

    .howbe {
        margin-top: 76px;
        margin-bottom: 24px;
    }

    .question {
        font-size: 16px;
        letter-spacing: 0.32px;
        margin-bottom: 24px;
    }

    .question .title {
        margin-bottom: 24px;
        font-size: 40px;
        font-weight: 700;
        letter-spacing: 3.2px;
        text-align: center;
    }

    .question .qmark {
        position: absolute;
        font-size: 200px;
        left: 50%;
    }

    .howbe .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .howbe .box {
        padding: 16px;
        margin-bottom: 16px;
        width: 100%;
    }

    .howbe .box:last-child {
        margin-bottom: 0px;
    }

    .howbe .box.odd {
        margin-left: 0;
    }

    .howbe .box.even {
        margin-left: 0;
    }

    .howbe .kibe {
        position: absolute;
        margin-left: 40%;
        top: 20%;
        width: 200px;
        z-index: -1;
    }

    .howbe .bola {
        display: none;
    }

    .howbe .shine {
        display: block;
        position: absolute;
        top: 60%;
        margin-left: -90%;
        width: 123px;
        z-index: -1;
    }

    .prevevent .title {
        margin-bottom: 16px;
        font-size: 32px;
        font-weight: 500;
        letter-spacing: 2.56px;
    }

    .gallery-cell {
        width: 100%;
    }

    .footer {
        background-color: var(--secondary-color);;
    }

    .footer .container {
        flex-direction: column !important;
    }

    .footer .container .row>div:first-child {
        padding: 48px 0px;
        border-right: none;
    }

    .footer .container>div:last-child {
        background-color: var(--secondary-color);
        margin-left: -16px;
        margin-right: -16px;
        padding: 24px 16px 15px 16px;
    }

    .footer .container .row {
        padding: 0 16px;
    }

    .footer .title {
        color: var(--secondary-color);
        font-size: 32px;
        font-weight: 500;
        letter-spacing: 2.56px;
    }

    .footer .subtitle {
        display: none;
    }

    .questions p {
        margin-top: 16px;
        padding: 16px 0;
        border-bottom: 1px solid #1D3557;
    }

    .questions a {
        color: #151514CC;
        text-decoration: none;
        font-size: 18px;
        font-family: Archivo;
        font-weight: 700;
        line-height: 145%;
        letter-spacing: 0.36px;
    }

    .questions p::after {
        border: solid #151514CC;
        border-width: 0 1px 1px 0;
    }

    .questions .answer {
        margin-top: 16px;
        color: #151514CC;
        font-size: 14px;
        font-family: Archivo;
        font-weight: 500;
        line-height: 145%;
        letter-spacing: 0.8px;
    }

    .footer .socials {
        display: none !important;
    }
}

/* Tablets */
@media screen and (min-width: 481px) and (max-width: 767px) {

    /* Estilos para tablets */
    .speech::after {
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        border-left: 24px solid #111;
        border-right: 154px solid transparent;
        border-top: -34px solid #111;
        border-bottom: 20px solid transparent;
        left: 80%;
        bottom: -11px;
    }

    .schedule {
        background-color: #141d47;
        background-image: url('bg-mobile.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .schedule>div.container ::after {
        display: none;
    }
}

/* Tela média */
@media screen and (min-width: 768px) and (max-width: 991px) {

    /* Estilos para telas entre 768px e 991px */
    .speech::after {
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        border-left: 24px solid #111;
        border-right: 154px solid transparent;
        border-top: -34px solid #111;
        border-bottom: 20px solid transparent;
        left: 80%;
        bottom: -11px;
    }

    .schedule>div.container::after {
        display: none;
    }
}

