.elementor-4172 .elementor-element.elementor-element-443a2f3{--display:flex;}.elementor-4172 .elementor-element.elementor-element-474ffb0{--display:flex;}.elementor-4172 .elementor-element.elementor-element-daa6c01.elementor-element{--align-self:center;}.elementor-4172 .elementor-element.elementor-element-6701fe4{--display:flex;}body.elementor-page-4172:not(.elementor-motion-effects-element-type-background), body.elementor-page-4172 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#A30B0B;background-image:url("https://carolbiazin.com/wp-content/uploads/2026/08/fundo-red-pc-scaled.webp");background-repeat:no-repeat;background-size:cover;}@media(max-width:767px){.elementor-4172 .elementor-element.elementor-element-daa6c01.elementor-element{--align-self:center;}body.elementor-page-4172:not(.elementor-motion-effects-element-type-background), body.elementor-page-4172 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://carolbiazin.com/wp-content/uploads/2026/08/fundo-cel-vermelho.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}}/* Start custom CSS *//* =====================================================
   ELEVADOR — ESTRUTURA
===================================================== */

.elevator{
    position:relative;
    width:100%;
    max-width:100%;
    margin:0 auto;
}


/* =====================================================
   FUNDO DO ELEVADOR
===================================================== */

.elevator-structure{
    display:block;
    width:100%;
    height:auto;
    position:relative;
    z-index:1;
}


/* =====================================================
   VISOR
===================================================== */

.elevator-display{

    position:absolute;

    z-index:10;

    left:49%;
    top:6%;

    transform:translateX(-50%);

    width:55%;
    height:40%;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,0) 45%,
            rgba(255,255,255,.018)
        ),
        #050505;

    border:3px solid #181818;

    box-shadow:
        inset 0 0 25px rgba(0,0,0,.95),
        inset 0 0 8px rgba(255,255,255,.025),
        0 2px 6px rgba(0,0,0,.75);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    overflow:hidden;
}


/* =====================================================
   VIDRO SUJO / FOSCO
===================================================== */

.elevator-display::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:12px;

    pointer-events:none;

    z-index:4;

    opacity:.30;

    background:

        repeating-radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,.08) 0,
            rgba(255,255,255,.08) .5px,
            transparent 1px,
            transparent 3px
        ),

        radial-gradient(
            ellipse at 30% 20%,
            rgba(255,255,255,.06),
            transparent 25%
        ),

        radial-gradient(
            ellipse at 75% 70%,
            rgba(255,255,255,.045),
            transparent 30%
        ),

        radial-gradient(
            ellipse at 55% 45%,
            rgba(255,255,255,.025),
            transparent 35%
        );

    mix-blend-mode:screen;
}


/* =====================================================
   RACHADURAS DO VIDRO
===================================================== */

.display-cracks{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:5;

    pointer-events:none;

    opacity:.9;
}


/* =====================================================
   BOLINHA VERMELHA
===================================================== */

#arrow{

    font-family:Arial, sans-serif;

    color:#ff2d2d;

    font-size:50px;

    line-height:1;

    margin-bottom:20px;

    position:relative;

    z-index:6;

    animation:redLedPulse 1.8s ease-in-out infinite;
}


@keyframes redLedPulse{

    0%{

        opacity:.55;

        text-shadow:
            0 0 2px rgba(255,0,0,.5),
            0 0 5px rgba(255,0,0,.25);
    }

    18%{

        opacity:.9;

        text-shadow:
            0 0 3px rgba(255,0,0,.8),
            0 0 8px rgba(255,0,0,.5),
            0 0 14px rgba(255,0,0,.25);
    }

    34%{

        opacity:.65;

        text-shadow:
            0 0 2px rgba(255,0,0,.55),
            0 0 5px rgba(255,0,0,.25);
    }

    57%{

        opacity:1;

        text-shadow:
            0 0 4px rgba(255,0,0,1),
            0 0 10px rgba(255,0,0,.75),
            0 0 20px rgba(255,0,0,.45);
    }

    72%{

        opacity:.45;

        text-shadow:
            0 0 2px rgba(255,0,0,.4),
            0 0 4px rgba(255,0,0,.2);
    }

    100%{

        opacity:.7;

        text-shadow:
            0 0 3px rgba(255,0,0,.6),
            0 0 7px rgba(255,0,0,.35);
    }
}


/* =====================================================
   NÚMERO DO VISOR
===================================================== */

#floor{

    font-family:"H2D2", sans-serif !important;

    color:#f4ebda !important;

    font-size:90px !important;

    font-weight:bold !important;

    line-height:1 !important;

    opacity:.75 !important;

    position:relative;

    z-index:6;

    transform:scale(1.15) scaleY(1.60);

    text-shadow:
        0 0 3px rgba(244,235,218,.25),
        0 0 8px rgba(244,235,218,.12);

    animation:tQueimado 2.8s infinite;
}


/* =========================================
   T — EFEITO DE LUZ QUEIMADA
========================================= */

@keyframes tQueimado{

    0%{
        opacity:.75;
    }

    18%{
        opacity:.75;
    }

    19%{
        opacity:.15;
    }

    20%{
        opacity:.65;
    }

    21%{
        opacity:.08;
    }

    23%{
        opacity:.75;
    }

    45%{
        opacity:.75;
    }

    46%{
        opacity:.10;
    }

    47%{
        opacity:.65;
    }

    48%{
        opacity:.05;
    }

    50%{
        opacity:.75;
    }

    68%{
        opacity:.75;
    }

    69%{
        opacity:.12;
    }

    70%{
        opacity:.55;
    }

    71%{
        opacity:.08;
    }

    73%{
        opacity:.75;
    }

    100%{
        opacity:.75;
    }

}


/* =====================================================
   ANIMAÇÃO DE MOVIMENTO DO VISOR
   (TROCA DE ANDAR — TIPO ELEVADOR DE VERDADE)
===================================================== */

#floor.floor-moving{
    animation: floorMoving .18s linear infinite !important;
}

@keyframes floorMoving{

    0%{
        opacity:.35;
        transform:scale(1.15) scaleY(1.60) translateY(-4px);
    }

    50%{
        opacity:.95;
        transform:scale(1.15) scaleY(1.60) translateY(4px);
    }

    100%{
        opacity:.35;
        transform:scale(1.15) scaleY(1.60) translateY(-4px);
    }
}


/* =====================================================
   ÁREA DOS BOTÕES
===================================================== */

.elevator-buttons{

    position:absolute !important;

    z-index:20 !important;

    left:49% !important;

    top:50% !important;

    transform:translateX(-50%) !important;

    width:40% !important;

    display:grid !important;

    grid-template-columns:repeat(2, 1fr) !important;

    justify-items:center !important;

    align-items:center !important;

    column-gap:10 !important;

    row-gap:15px !important;
}

.t-button{
    grid-column:1 / 3 !important;
    justify-self:center !important;
    align-self:center !important;
    margin:0 auto 2px auto !important;
}
//* =====================================================
   LUZ VERMELHA / QUEIMADA — BOTÃO SELECIONADO
   T, 2 E 6
===================================================== */

.t-button,
.elevator-button.active{
    position:relative !important;
}


/* =====================================================
   BRILHO VERMELHO AO REDOR
===================================================== */

.elevator-button.active::after{

    content:"";

    position:absolute;

    inset:-5px;

    border-radius:50%;

    clip-path:circle(50%);

    pointer-events:none;

    z-index:10;

    border:2px solid rgba(255,45,45,.75);

    box-shadow:
        0 0 6px rgba(255,45,45,.8),
        0 0 14px rgba(255,45,45,.55),
        0 0 25px rgba(255,45,45,.30);

    animation:burnedButtonLight 2.8s infinite;
}


/* =====================================================
   LUZ VERMELHA — SOMENTE BOTÃO SELECIONADO
   T / 2 / 6
===================================================== */

.elevator-button.active{
    position:relative !important;

    border-radius:50% !important;

    clip-path:circle(50%) !important;

    box-shadow:
        inset 0 3px 4px rgba(255,255,255,.65),
        inset 0 -6px 9px rgba(0,0,0,.42),
        inset 2px 0 4px rgba(255,255,255,.12),

        0 0 0 2px rgba(255,45,45,.75),
        0 0 6px rgba(255,45,45,.8),
        0 0 14px rgba(255,45,45,.55),
        0 0 25px rgba(255,45,45,.30),

        0 4px 5px rgba(0,0,0,.55),
        0 7px 10px rgba(0,0,0,.28);

    animation:burnedButtonLight 2.8s infinite;
}


@keyframes burnedButtonLight{

    0%{
        filter:brightness(.98);
    }

    8%{
        filter:brightness(1.08);
    }

    10%{
        filter:brightness(.88);
    }

    12%{
        filter:brightness(1);
    }

    28%{
        filter:brightness(1.05);
    }

    29%{
        filter:brightness(.86);
    }

    31%{
        filter:brightness(1);
    }

    52%{
        filter:brightness(1.05);
    }

    54%{
        filter:brightness(.9);
    }

    56%{
        filter:brightness(1.06);
    }

    73%{
        filter:brightness(1);
    }

    74%{
        filter:brightness(.86);
    }

    77%{
        filter:brightness(1);
    }

    100%{
        filter:brightness(1);
    }
}


/* =====================================================
   PISCADINHA VERMELHA POR DENTRO DO BOTÃO
   (sincronizada com o mesmo ritmo da burnedButtonLight)
===================================================== */

.elevator-button.active::before{
    animation: redInnerFlicker 2.8s infinite;
}

@keyframes redInnerFlicker{

    0%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 10px rgba(255,45,45,.25);
    }

    8%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 16px rgba(255,45,45,.6);
    }

    10%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 6px rgba(255,45,45,.15);
    }

    12%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 12px rgba(255,45,45,.4);
    }

    28%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 15px rgba(255,45,45,.55);
    }

    29%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 5px rgba(255,45,45,.12);
    }

    31%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 12px rgba(255,45,45,.4);
    }

    52%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 15px rgba(255,45,45,.55);
    }

    54%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 6px rgba(255,45,45,.15);
    }

    56%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 16px rgba(255,45,45,.6);
    }

    73%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 12px rgba(255,45,45,.4);
    }

    74%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 5px rgba(255,45,45,.12);
    }

    77%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 12px rgba(255,45,45,.4);
    }

    100%{
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 10px rgba(255,45,45,.25);
    }
}
/* =====================================================
   BOTÕES
===================================================== */

.elevator-button{

    position:relative;

    width:70px;

    height:70px;

    padding:0;

    margin:0;

    box-sizing:border-box;

    border:none !important;

    outline:none !important;

    border-radius:50%;

    clip-path:circle(50%);

    cursor:pointer;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.35) 0%,
            rgba(255,255,255,.08) 28%,
            transparent 55%
        ),

        radial-gradient(
            circle at 78% 30%,
            rgba(75,65,55,.18) 0%,
            transparent 18%
        ),

        radial-gradient(
            circle at 20% 72%,
            rgba(70,60,50,.20) 0%,
            transparent 20%
        ),

        radial-gradient(
            circle at 65% 78%,
            rgba(255,255,255,.13) 0%,
            transparent 20%
        ),

        radial-gradient(
            circle at 38% 32%,
            #e4ddd5 0%,
            #d9d0c6 38%,
            #D2C7BB 68%,
            #b9aca0 100%
        );

    box-shadow:

        inset 0 3px 4px rgba(255,255,255,.65),

        inset 0 -6px 9px rgba(0,0,0,.42),

        inset 2px 0 4px rgba(255,255,255,.12),

        0 4px 5px rgba(0,0,0,.55),

        0 7px 10px rgba(0,0,0,.28);

    display:flex;

    align-items:center;

    justify-content:center;

    appearance:none;

    -webkit-appearance:none;

    -webkit-tap-highlight-color:transparent;

    transition:
        transform .12s ease,
        box-shadow .12s ease;
}


/* =====================================================
   ANEL INTERNO DO BOTÃO
===================================================== */

.elevator-button::before{

    content:"";

    position:absolute;

    inset:3px;

    border-radius:50%;

    border:1px solid rgba(70,65,60,.45);

    box-shadow:

        inset 0 1px 2px rgba(255,255,255,.35),

        inset 0 -2px 3px rgba(0,0,0,.28);

    pointer-events:none;

    z-index:2;
}


/* =====================================================
   RUÍDO / TEXTURA DE ENVELHECIDO
===================================================== */

.elevator-button::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    pointer-events:none;

    z-index:3;

    opacity:.30;

    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

    background-size:180px 180px;

    mix-blend-mode:multiply;
}


/* =====================================================
   NÚMEROS DOS BOTÕES
===================================================== */

.elevator-button span{

    position:absolute !important;

    left:50% !important;

    top:50% !important;

    transform:
        translate(-50%, -50%)
        scaleY(1.25) !important;

    z-index:5 !important;

    font-family:"H2D2", sans-serif !important;

    font-size:38px !important;

    font-weight:700 !important;

    line-height:1 !important;

    color:#191815 !important;

    opacity:.92 !important;

    margin:0 !important;

    padding:0 !important;

    width:auto !important;

    height:auto !important;

    text-align:center !important;

    text-shadow:none !important;
}


/* =====================================================
   HOVER
===================================================== */

.elevator-button:hover{

    transform:scale(1.03);

}


/* =====================================================
   CLIQUE
===================================================== */

.elevator-button:active{

    transform:scale(.94);

    box-shadow:

        inset 0 5px 8px rgba(0,0,0,.42),

        inset 0 -2px 3px rgba(255,255,255,.22),

        0 2px 3px rgba(0,0,0,.45);
}


/* =====================================================
   REMOVE BORDA / BRILHO DO NAVEGADOR
===================================================== */

.elevator-button:hover,
.elevator-button:focus,
.elevator-button:focus-visible,
.elevator-button:active{

    outline:none !important;

    border:none !important;
}


/* =====================================================
   T ATIVO
===================================================== */

.elevator-button.active{

    outline:none !important;

    border:none !important;
}


/* =====================================================
   MENSAGEM
===================================================== */

.elevator-message{

    position:absolute !important;

    left:50% !important;
    top:60% !important;

    transform:translate(-50%, -50%) !important;

    width:90% !important;

    height:auto !important;

    margin:0 !important;
    padding:20px 25px !important;

    box-sizing:border-box !important;

    background:transparent !important;

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

    flex-direction:column !important;

    text-align:center !important;

    white-space:normal !important;
overflow-wrap:normal !important;
word-break:normal !important;

    font-family:"Bootzy TM", "Bootzy", sans-serif !important;

    font-size:20px !important;

    line-height:1.1 !important;

    letter-spacing:1px !important;

    color:#fff !important;

    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;

    z-index:999999 !important;

    text-shadow:
        0 8px 18px rgba(0,0,0,.95),
        0 14px 30px rgba(0,0,0,.8),
        0 2px 5px rgba(0,0,0,1) !important;

    transition:
        opacity .4s ease,
        visibility .4s ease !important;
}

.elevator-message.show{

    opacity:1 !important;

    visibility:visible !important;

    pointer-events:none !important;
}
/* =====================================================
   CELULAR
===================================================== */

@media(max-width:600px){

    .elevator-buttons{

        width:60%;

        top:40%;

        row-gap:7px;

    }


    .elevator-button{

        width:52px;

        height:52px;

    }


    .elevator-button span{

        font-size:30px !important;

    }


    #arrow{

        font-size:42px;

        margin-bottom:16px;

    }


    #floor{

        font-size:75px !important;

    }

}

/* impede seleção e arraste do elevador */

.elevator,
.elevator *{
    -webkit-user-select:none !important;
    -moz-user-select:none !important;
    user-select:none !important;

    -webkit-user-drag:none !important;
    user-drag:none !important;
}


/* imagens do elevador */

.elevator img{
    -webkit-user-drag:none !important;
    user-drag:none !important;

    pointer-events:none !important;
}


/* impede seleção do visor */

.elevator-display{
    -webkit-user-select:none !important;
    user-select:none !important;
}

/* =====================================================
IMPede MOVIMENTO LATERAL DA PÁGINA
===================================================== */

html,
body{
    overflow-x:hidden !important;
}

.elevator{
    position:relative;
    overflow:hidden;
}

/* =====================================================
BOTÕES MAIORES NO PC
===================================================== */

@media(min-width:601px){

    .elevator-button{
        width:100px !important;
        height:100px !important;
    }

    .elevator-button span{
        font-size:46px !important;
    }

    .elevator-buttons{
        column-gap:20px !important;
        row-gap:40px !important;
    }

}

.elevator-button,
.elevator-button:hover,
.elevator-button:focus,
.elevator-button:focus-visible,
.elevator-button:active,
.elevator-button.active{
    outline:none !important;
    border:none !important;

    border-radius:50% !important;

    clip-path:circle(50%) !important;

    box-shadow:
        inset 0 3px 4px rgba(255,255,255,.65),
        inset 0 -6px 9px rgba(0,0,0,.42),
        inset 2px 0 4px rgba(255,255,255,.12),
        0 4px 5px rgba(0,0,0,.55),
        0 7px 10px rgba(0,0,0,.28) !important;

    background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;

    -webkit-tap-highlight-color:transparent !important;
}

/* REMOVE QUALQUER EFEITO DE FOCO DO NAVEGADOR */
.elevator-button:focus,
.elevator-button:focus-visible{
    outline:0 !important;
    outline-offset:0 !important;
}

/* REMOVE O QUADRADO DO CLIQUE NO SAFARI/CHROME */
.elevator-button::-moz-focus-inner{
    border:0 !important;
    padding:0 !important;
}

/* GARANTE QUE O EFEITO VERMELHO DO T CONTINUE REDONDO */
.t-button::after{
    border-radius:50% !important;
    clip-path:circle(50%) !important;
}

@media(min-width:601px){

    #floor{
        font-size:200px !important;
    }

}
@media(min-width:601px){

    .elevator{
        position:relative !important;
    }

    .elevator-message{
        position:absolute !important;

        left:49% !important;
        top:30% !important;

        transform:translate(-50%, -50%) !important;

        width:70% !important;
    }

}

/* =========================================
   FADE OUT — ELEVADOR → BH
========================================= */

#elevator-page-transition {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    background: #000 !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    z-index: 999999999 !important;

    transition:
        opacity 1.2s ease-in-out,
        visibility 0s linear 1.2s !important;
}

#elevator-page-transition.active {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: all !important;

    transition:
        opacity 1.2s ease-in-out,
        visibility 0s linear 0s !important;
}

#elevator-page-transition {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 999999999;
    transition: opacity 1.2s ease;
}

#elevator-page-transition.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* =====================================================
   BOTÃO 2 — LUZ AZUL
   CORPO DO BOTÃO PERMANECE ORIGINAL
===================================================== */

.elevator-button[data-floor="2"].active {

    /* NÃO ALTERA O BACKGROUND */

    border-radius: 50% !important;
    clip-path: circle(50%) !important;

    /* mantém o efeito metálico interno
       e troca APENAS o brilho externo para azul */
    box-shadow:

        /* efeito metálico original */
        inset 0 3px 4px rgba(255,255,255,.65),
        inset 0 -6px 9px rgba(0,0,0,.42),
        inset 2px 0 4px rgba(255,255,255,.12),

        /* LUZ AZUL */
        0 0 0 2px rgba(45,120,255,.85),
        0 0 6px rgba(45,120,255,.9),
        0 0 14px rgba(45,120,255,.65),
        0 0 25px rgba(45,120,255,.4),

        /* sombra original */
        0 4px 5px rgba(0,0,0,.55),
        0 7px 10px rgba(0,0,0,.28) !important;

    animation: blueButtonLight 2.8s infinite !important;
}


/* =====================================================
   BOTÃO 2 — LUZ AZUL
===================================================== */

.elevator-button[data-floor="2"].active {
    box-shadow:
        inset 0 3px 4px rgba(255,255,255,.65),
        inset 0 -6px 9px rgba(0,0,0,.42),
        inset 2px 0 4px rgba(255,255,255,.12),

        0 0 0 2px rgba(60,140,255,.85),
        0 0 7px rgba(40,120,255,.9),
        0 0 16px rgba(40,120,255,.7),
        0 0 28px rgba(40,120,255,.45),

        0 4px 5px rgba(0,0,0,.55),
        0 7px 10px rgba(0,0,0,.28) !important;

    animation: blueButtonLight 2.8s infinite !important;
}


/* brilho azul ao redor */

.elevator-button[data-floor="2"].active::after {
    border: 2px solid rgba(60,140,255,.8);

    box-shadow:
        0 0 6px rgba(40,120,255,.9),
        0 0 14px rgba(40,120,255,.7),
        0 0 25px rgba(40,120,255,.45);

    animation: blueButtonGlow 2.8s infinite !important;
}


/* brilho azul dentro do botão */

.elevator-button[data-floor="2"].active::before {
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.35),
        inset 0 -2px 3px rgba(0,0,0,.28),
        inset 0 0 12px rgba(40,120,255,.35);

    animation: blueInnerFlicker 2.8s infinite !important;
}


/* =====================================================
   PISCADA EXTERNA AZUL
===================================================== */

@keyframes blueButtonLight {

    0% {
        filter: brightness(.98);
    }

    8% {
        filter: brightness(1.12);
    }

    10% {
        filter: brightness(.88);
    }

    12% {
        filter: brightness(1);
    }

    28% {
        filter: brightness(1.08);
    }

    29% {
        filter: brightness(.86);
    }

    31% {
        filter: brightness(1);
    }

    52% {
        filter: brightness(1.08);
    }

    54% {
        filter: brightness(.9);
    }

    56% {
        filter: brightness(1.1);
    }

    73% {
        filter: brightness(1);
    }

    74% {
        filter: brightness(.86);
    }

    77% {
        filter: brightness(1);
    }

    100% {
        filter: brightness(1);
    }
}


/* =====================================================
   BRILHO AZUL AO REDOR
===================================================== */

@keyframes blueButtonGlow {

    0% {
        opacity: .65;
    }

    8% {
        opacity: 1;
    }

    10% {
        opacity: .45;
    }

    12% {
        opacity: .8;
    }

    28% {
        opacity: 1;
    }

    29% {
        opacity: .4;
    }

    31% {
        opacity: .8;
    }

    52% {
        opacity: 1;
    }

    54% {
        opacity: .45;
    }

    56% {
        opacity: 1;
    }

    73% {
        opacity: .8;
    }

    74% {
        opacity: .4;
    }

    77% {
        opacity: .8;
    }

    100% {
        opacity: .65;
    }
}


/* =====================================================
   BRILHO AZUL INTERNO
===================================================== */

@keyframes blueInnerFlicker {

    0% {
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 10px rgba(40,120,255,.25);
    }

    8% {
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 18px rgba(40,120,255,.7);
    }

    10% {
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 6px rgba(40,120,255,.15);
    }

    28% {
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 17px rgba(40,120,255,.65);
    }

    29% {
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 5px rgba(40,120,255,.12);
    }

    52% {
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 17px rgba(40,120,255,.65);
    }

    54% {
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 6px rgba(40,120,255,.15);
    }

    56% {
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 18px rgba(40,120,255,.7);
    }

    100% {
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.35),
            inset 0 -2px 3px rgba(0,0,0,.28),
            inset 0 0 10px rgba(40,120,255,.25);
    }
}

/* =====================================================
   CONTAGEM REGRESSIVA
===================================================== */

#countdown {
    position: relative !important;

    z-index: 6 !important;

    margin-top: 10px !important;

    font-family: "DSDIGI", monospace !important;

    font-size: 34px !important;

    font-weight: normal !important;

    line-height: 1 !important;

    letter-spacing: 2px !important;

    color: #ff2d2d !important;

    text-align: center !important;

    white-space: nowrap !important;

    text-shadow:
        0 0 3px rgba(255,45,45,.95),
        0 0 8px rgba(255,45,45,.7),
        0 0 16px rgba(255,45,45,.4);

    animation: countdownFlicker 1.8s infinite;
}


/* =====================================================
   PISCADA VERMELHA
===================================================== */

@keyframes countdownFlicker {

    0% {
        opacity: .65;
    }

    8% {
        opacity: 1;
    }

    10% {
        opacity: .35;
    }

    12% {
        opacity: .95;
    }

    25% {
        opacity: .7;
    }

    28% {
        opacity: 1;
    }

    30% {
        opacity: .4;
    }

    32% {
        opacity: .95;
    }

    55% {
        opacity: .8;
    }

    57% {
        opacity: .3;
    }

    59% {
        opacity: 1;
    }

    76% {
        opacity: .7;
    }

    78% {
        opacity: .25;
    }

    80% {
        opacity: .95;
    }

    100% {
        opacity: .65;
    }
}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width:600px) {

    #countdown {

        font-size: 25px !important;

        margin-top: 8px !important;

        letter-spacing: 1.5px !important;

    }

}/* End custom CSS */