.crise-parent { display: none; }
.crise-parent.animated { display: block; }

.container-crise {width: 555px;height: 540px;position: absolute;padding: 0 0 30px 0;top: 65%;left: 22%;margin: -355px 0 0 0;}

.container-crise-p {font: 700 108px montserrat;display: flex;gap: 5px;color: #FF2A2A;}

#text-crise {display: inline-flex;position: relative;align-items: center;}

#crise-text,
#letter-s,
#question,
#symbol {display: inline-block; position: relative;}

#text-crise::after {content: '|';animation: blink 0.7s infinite;position: absolute;right: -25px;}

#text-crise.hide_blink::after {animation: hideBlink 0.7s forwards;}

@keyframes blink {50% { opacity: 0; }}

@keyframes hideBlink {to { opacity: 0; }}

@keyframes remove_letter_s {to {opacity: 0;left: 20%;}}

#letter-s {opacity: 1;left: 0;transition: all 0.5s ease;position: relative;}
#letter-s.remove-letter-s {animation: forwards .5s remove_letter_s ease;} 
#symbol {display: inline-block;opacity: 0;transition: all 0.5s ease; position: relative;left: 0;}
#symbol.show-symbol {opacity: 1 !important;left: -20%;}
#letter-e.move-letter-e {animation: forwards 1s move_letter_e ease;}


#question.animate {animation: forwards move_question 0.5s; }


@keyframes move_question {to {left: 10%; opacity: 0;}}
@keyframes move_letter_e {to {transform: translateX(-70px);}}
 
.question.animate {opacity: 0;transition: opacity 0.5s ease;}

.container-detalhe-p,
.container-pilar-p,
.container-ondas,
.container-seu-site {visibility: hidden;position: relative;opacity: 0;transition: all 0.5s ease;top: 120px;}

.container-detalhe-p {float: left;font: 40px ubuntu;font-weight: 400;color: #373737;margin: 0 0 0 3px;}

.container-detalhe-p b {font: 41px ubuntu;font-weight: 700;font-style: italic;}

.container-pilar-p {float: left;font: 23px ubuntu;font-weight: 400;color: #373737;margin: 43px 0 0 4px;}

.container-pilar-p b {font: 23px ubuntu;font-weight: 700;font-style: italic;}

.container-ondas {float: left;width: 472px;height: 72px;margin: 53px 0 0 0;position: relative;}

.container-ondas b {font: 14px ubuntu;font-weight: 400;color: #4c4c4c;float: left;}

.container-ondas .ondas {position: absolute;width: 120%;height: 100%;left: -10%;top: -40%;}

.container-ondas-1 { margin: 51px 0 0 8px; }
.container-ondas-2 { margin: 13px 0 0 25px; }
.container-ondas-3 { margin: 49px 0 0 36px; }
.container-ondas-4 { margin: 13px 0 0 30px; }
.container-ondas-5 { margin: 51px 0 0 25px; }

.container-seu-site {float: left;font: 24px ubuntu;font-weight: 400;color: #373737;margin: 76px 0 0 12px;padding: 0 96px 5px 0;position: relative;}

.container-seu-site::after {content: '';position: absolute;background: url(../../../img/vetor-google.png) no-repeat center right;width: 86px;height: 28px;top: 2px;right: 5px;}

.container-seu-site b {font: inherit;font-weight: 700;}

.container-seu-site br {display: none;}

@media(max-width: 1870px) {.container-crise { top: 60%; }}

@media(max-width: 1600px) {
    .container-crise { height: 400px; width: 475px; margin: -250px 0 0 0; }
    .container-detalhe-p { font: 30px ubuntu; font-weight: 400; margin: 20px 0 0 0; width: 100%; }
    .container-detalhe-p b { font: inherit; font-weight: 700; }
    .container-pilar-p { font: 20px ubuntu; font-weight: 400; margin: 20px 0 0 0; width: 100%; }
    .container-pilar-p b { font: inherit; font-weight: 700; }
    .container-ondas { margin: 25px 0 0 0; }
    .container-seu-site { margin: 30px 0 0 0; }
}

@media(max-width: 1520px) {.container-crise { left: 8%; }}

@media(max-width: 990px) {

    .container-ondas .ondas {width: 100%;}
    .container-ondas-1 {margin: 51px 0 0 -9px}
    .container-ondas-2 {margin: 13px 0 0 10px;}
    .container-ondas-3 {margin: 49px 0 0 22px;}
    .container-ondas-4 {margin: 13px 0 0 16px;} 
    .container-ondas-5 {margin: 51px 0 0 12px;}
}

@media(max-width: 880px) {
    .container-seu-site .a { display: block; }
    .container-seu-site::after { right: 50%; top: 33px; }
    .container-crise {top: 43%}
    .container-detalhe-p {margin-top: 0;}
    .container-pilar-p {margin: 25px 0 0;}
    .container-crise {left: 5%;}
} 

@media(max-width: 730px) {
    .container-crise-p {font-size: 98px;}
    .container-detalhe-p {font-size: 26px;}
    .container-pilar-p {font-size: 17px;}
    .container-ondas .ondas {width: 90%; top: -20%;}
    .container-ondas b {font-size: 12px;}
    .container-ondas-1 {margin: 51px 0 0 -13px;}
    .container-ondas-2 {margin: 13px 0 0 14px;}
    .container-ondas-3 {margin: 49px 0 0 19px;}
    .container-ondas-4 {margin: 13px 0 0 24px;}
    .container-ondas-5 {margin: 51px 0 0 8px;}
}

@media(max-width: 610px) {

    .slide__0 .fundo .imagem-slide img {display: none !important;}
    .container.banner .slide__0 .banner__slide-parent { height: 112%; }
    .slide__0 .fundo {background: url('content/slide.jpg') no-repeat top / cover; width: 100%;}
    .container-crise-p {font-size: 80px;}

    @keyframes move_letter_e {to {transform: translateX(-50px);}}
    .container-detalhe-p {margin-top: -15px;}
    .container-detalhe-p {font-size: 20px;}
    .container.banner .slide.slide__0 .banner__slide-parent {top: 80px !important;}
    .container-crise {top: 20%; left: 28%;}
    .container-pilar-p {margin-top: 5px;}
    .container-crise.crise-parent {width: 100%; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .container-ondas .ondas {left: 0; width: 100%;}
    .container-crise-p {justify-content: center; margin-left: 30px;}
    #symbol.show-symbol {left: -10%;}
    .container-ondas {margin: 15px 0 0;}
    .container-crise > p {text-align: center; margin-left: 20px;}

    .container-ondas-1 {margin: 57px 0 0 43px}
    .container-ondas-2 {margin: 13px 0 0 19px;}
    .container-ondas-3 {margin: 57px 0 0 28px;}
    .container-ondas-4 {margin: 13px 0 0 33px;}
    .container-ondas-5 {margin: 57px 0 0 18px;}

    p.container-seu-site {padding: 0; margin: 15px 0 0; text-align: left;}

    .container-seu-site::after {right: 37%;} 
}

@media(max-width: 450px) {
    .container-ondas .ondas {width: 90%; left: 30px;}
    .container-ondas-1 {margin: 57px 0 0 57px;}
    .container-ondas-2 {margin: 13px 0 0 13px;}
    .container-ondas-3 {margin: 57px 0 0 22px;}
    .container-ondas-4 {margin: 13px 0 0 19px;}
    .container-ondas-5 {margin: 57px 0 0 13px;}
}