Histórico da Página

<style> 

 #title-text {
	display: none !important;} 

.grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.texto {
  position: relative;
  text-align: center;
  color: #353535;
  font-size: 30px;
  font-family: "lato", serif;
  font-weight: 800;
}

h3 {
  margin-right: 20px;
  background-color: #fff;
  border: 2px solid #0397e9;
  padding: 15px;
  margin: 0px;
  border-radius: 40px;
  text-align: center;
  font-family: LATO;
  color: #0397e9;
  font-size: 16px;
  box-shadow: 2px #636363;
  cursor: pointer;
text-decoration: none; }

a {
  text-decoration: none;
}


       </style>

   
  <div id="cd-timeline" class="cd-container">
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://codyhousetdn.totvs.cocom/demodownload/vertical-timelineattachments/img/cd-icon-movie.svg731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MovieNOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Title<h2> ofExclusão section 2<lógica (Atividades)</h2>
        <p>Lorem<br>
 ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
        <a href="#0" class="cd-read-more">Read more</a>
        <span class="cd-date">Jan 18</span>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

<span class="badge badge-melhoria">MELHORIA</span>
        <p align="justify">Obtenha mais controle e organização sobre a sua lista de atividades.  Com o novo recurso de exclusão de lógica, agora você pode deletar da sua lista, aquelas atividades desnecessárias. Experimente hoje e sinta a diferença! </p>
        <div class="cd-timeline-blockflexWrap">
      <div class="cd-timeline-img cd-manutencao">
        <img src="<a href='https://codyhousetdn.totvs.cocom/demo/vertical-timeline/img/cd-icon-picture.svg" alt="Picture">
  pages/viewpage.action?pageId=733191298'> <button class="button-2">SAIBA MAIS</button></a>
        </div>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-imgblock -->

      <div class="cd-timeline-contentblock">
        <h2>Title of section 3</h2><div class="cd-timeline-img cd-melhoria">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
        <a href="#0" class="cd-read-more">Read more</a>
        <span class="cd-date">Jan 24</span>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
<img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="NOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Importação de dados em massa para forecast</h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA</span>
        <p>Está cansado de inserir dados manualmente no módulo de Planejamento? Não se preocupe mais, temos uma novidade que o ajudará e otimizará o processo! A partir de agora, você tem a opção de importar dados através de arquivos CSV, tornando o lançamento de dados em larga escala muito mais rápido e eficiente.</p>
        <div class="cd-timeline-img cd-novoflexWrap">
        <img  <a srchref="'https://codyhousetdn.totvs.cocom/demo/vertical-timeline/img/cd-icon-location.svg" alt="Location">
  pages/viewpage.action?pageId=733190747'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-imgcontent -->

    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-contentblock">
      <div  <h2>Title of section 4</h2>class="cd-timeline-img cd-melhoria">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
<img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v" alt="NOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>TOTVS CRM WhatsApp <a href="#0" class="cd-read-more">Read more</a>Extension: envio de áudios para o CRM </h2>
        <br>
        <span class="cdbadge badge-datemelhoria">Feb 14<>MELHORIA</span>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://codyhouse.co/demo/vertical-timeline/img/cd-icon-location.svg" alt="Location">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Title of section 5</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.  <p>E se você pudesse ter todos os áudios dos seus clientes, salvos e organizados no seu CRM? Com a extensão do TOTVS CRM, isso é possível! Agora, com o TOTVS CRM WhatsApp Extension, você pode enviar áudios como anexo para o CRM. E o melhor, tudo dentro do contexto! Através desse recurso, será possível acompanhar a data do envio do registro e reproduzi-lo sem a necessidade de fazer o download. Incrível, né? </p>
        <a<div hrefclass="#0flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733191420'> <button class="cdbutton-read-more2">Read>SAIBA more<MAIS</button></a>
        <span class="cd-date">Feb 18</span></div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-moviemelhoria">
        <img src="https://codyhousetdn.totvs.cocom/demodownload/vertical-timelineattachments/img/cd-icon-movie.svg" alt="Movie"731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="NOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Regras com multiníveis <h2>Final Section</h2>
        <p>This is the content of the last section</p>de ocultação e edição condicionais na tela de Atividades</h2>
        <br>
        <span class="cdbadge badge-datemelhoria">Feb 26<>MELHORIA</span>
       </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
  </div> <!-- cd-timeline --> <p>Com o novo recurso de regras com múltiníveis, você tem total controle sobre o seu formulário de atividades! Agora é possível exibir, ocultar, marcar como somente leitura ou definir os elementos do formulário de atividades usando regra condicional. </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733191203'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MELHORIA">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Desativar/Ativar as etapas de ganhas, perdidas e descartadas do pipeline de oportunidades </h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA</span>
        <p>Mais flexibilidade para adaptar os pipelines às necessidades específicas do seu negócio! Agora, através do construtor de pipelines, você pode ativar ou desativar as etapas: ganhas, perdidas e descartadas. 

Essa melhoria permitirá a configuração das etapas de encerramento, para que os pipelines sejam aderentes a qualquer jornada do cliente. </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=732674154'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MELHORIA">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Inclusão da Unidade de Medida na Ordem de Venda (Mobile)</h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA</span>
        <p>Chega de confusão na hora de incluir produtos na Ordem de Venda! A melhoria permite que a sigla da unidade de medida do produto, seja visualizada nos campos “Estoque” e “Preço de Venda”, concedendo ao vendedor, a clareza necessária para fazer a melhor negociação.</p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=732664978'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MELHORIA">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Integração de Leads: reformulação da integração DataHub </h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA</span>
        <p>  Se você quer importar leads de outras ferramentas para o TOTVS CRM, então esta é a novidade que você esperava! Nesta versão, reestruturamos e repensamos a integração DataHub para explorar todos os recursos disponíveis na plataforma: validações de duplicidade e o mapeamento de campos personalizados. Renomeamos também o DataHub para "Integração de Leads" e o transformamos em um gerador de token para que ferramentas terceiras possam se autenticar em nossas APIs. Incrível, não é? </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733190964'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MELHORIA">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Refletir no aplicativo móvel, regras de exibição a partir de campos personalizados </h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA</span>
        <p>Estamos empolgados em trazer mais facilidade para o seu dia a dia. Assim como no ambiente web, agora o ambiente mobile reflete regras de exibição a partir de campos personalizados. Essas regras pré-definidas pelo administrador, condicionam o estado dos campos, tornando-os: ocultos, visíveis, editáveis ou somente leitura. Com essa melhoria, você terá mais mobilidade e eficiência na gestão do CRM.</p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733188343'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-manutencao">
        <img src="https://tdn.totvs.com/download/attachments/731904073/manutencao.png?version=1&modificationDate=1673215850828&api=v2" alt="MANUTENÇÃO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2> Exportação de dados com filtros ativados </h2>
        <br>
        <span class="badge badge-manutencao">MANUTENÇÃO</span>
        <p>Ajustamos o mecanismo de exportação para que os filtros aplicados nas colunas de visualização de indicadores, sejam considerados na geração dos arquivos csv e xlsx. </p>
        
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-manutencao">
        <img src="https://tdn.totvs.com/download/attachments/731904073/manutencao.png?version=1&modificationDate=1673215850828&api=v2" alt="MANUTENÇÃO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Não permite salvar um contato se a conta está inativa</h2>
        <br>
        <span class="badge badge-manutencao">MANUTENÇÃO</span>
        <p> Alteramos a lógica de validações do formulário, permitindo editar contatos de contas inativas.</p>
       
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
  </div> <!-- cd-timeline -->

<style>  #title-text {
	display: none !important;}       body {
  font-size: 100%;
  font-family: "lato", serif;
  color: #363636;
  background-color: #ffffff;
}

a {
  color: #acb7c0;
  text-decoration: none;
  font-family: "lato";
  font-size: 16px;
}

img {
  max-width: 100%;
}

p {
  text-align:justify;
  font-family: "Lato", sans-serif;
}

h2
h5 {
  font-family: "lato", sans-serif;
  font-size: 90px ;
  font-weight: bold;
  
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

/* -------------------------------- 

xnugget info 

-------------------------------- */
.cd-nugget-info {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50px;
  line-height: 50px;
  top: 0;
  left: 0;
}
.cd-nugget-info a {
  position: relative;
  font-size: 14px;
  color: #718ca1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-nugget-info a:hover {
  opacity: 0.8;
}
.cd-nugget-info span {
  vertical-align: middle;
  display: inline-block;
}
.cd-nugget-info span svg {
  display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
  fill: #718ca1;
}

/* -------------------------------- 

Main components 

-------------------------------- */


#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0;
  }
  .cd-timeline-block:first-child {
    margin-top: 0;
  }
  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
}

.cd-timeline-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08),
    0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
  display: block;
  width: 32px;
  height: 32px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -16px;
  margin-top: -16px;
}
.cd-timeline-img.cd-novo {
  background: #363636;
}
.cd-timeline-img.cd-melhoria {
  background: #363636;
}
.cd-timeline-img.cd-manutencao {
  background: #363636;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
  }
  .cssanimations .cd-timeline-img.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;
    -moz-animation: cd-bounce-1 0.6s;
    animation: cd-bounce-1 0.6s;
  }
}

@-webkit-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -moz-transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -moz-transform: scale(1.2);
  }

  100% {
    -moz-transform: scale(1);
  }
}
@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.cd-timeline-content 

<style>  body {
  font-size: 100%;
  font-family: "lato", serif;
  color: #363636;
  background-color: #ffffff;
}

a {
  color: #acb7c0;
  text-decoration: none;
  font-family: "Open Sans", sans-serif;
}

img {
  max-width: 100%;
}


h2
h5 {
  font-family: "lato", sans-serif;
  font-size: 90px ;
  
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

/* -------------------------------- 

xnugget info 

-------------------------------- */
.cd-nugget-info {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50px;
  line-height: 50px;
  top: 0;
  left: 0;
}
.cd-nugget-info a {
  position: relative;
  fontmargin-sizeleft: 14px50px;
  color: #718ca1;
  -webkit-transition: all 0.2sbackground: #f5f5fa;
  border-moz-transitionradius: all 0.2s25em;
  transitionmax-width: all 0.2s;
}
.no-touch .cd-nugget-info a:hover {
  opacity: 0.8400px;
  padding: 1em;
  box-shadow: 0 3px 0 #363636;
}
.cd-nuggettimeline-infocontent:after span {
  vertical-aligncontent: middle"";
  display: inline-blocktable;
}
.cd-nugget-info span svg {
  display clear: blockboth;
}
.cd-nugget-info .cd-nugget-info-arrowtimeline-content h2 {
  fillcolor: #718ca1#363636;
}

/*  -------------------------------- 

Main components 

-------------------------------- */


#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0font-weight: bold;
}
.cd-timeline-content p,

.cd-timeline-content .cd-date {
  font-size: 13px;
  font-size: 0.8125rem;

}

.cd-timeline-content .cd-date {
  display: inline-block;
}
.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
  float: right;
  padding: 0.8em 1em;
  background: #5596e6;
  color: white;
  border-radius: 0.25em;
  text-decoration: none;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
  background-color: #ffffff;
}
.cd-timeline-content .cd-date {
  float: left;
  padding: 0.8em 0;
  opacity: 0.7;
}
.cd-timeline-content::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid #bfcdd6;
}
@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: bold ;
  }
  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-block:first-child {content .cd-read-more,
    margin-top: 0;.cd-timeline-content .cd-date {
  }
  .cd-timeline-block:last-child {font-size: 14px;
    marginfont-bottomsize: 0.875rem;
  }
}

.cd-timeline-img {
  position: absolute;
  top: 0;
  @media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    margin-left: 0;
  width  padding: 40px1.6em;
  height  width: 40px45%;
  border-radius: 50%;}
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08),.cd-timeline-content::before {
    top: 24px;
    left: 100%;
    0 3px 0 4px rgba(0, 0, 0, 0.05);
}
border-color: transparent;
    border-left-color: #d7e4ed;
  }
  .cd-timeline-img imgcontent .cd-read-more {
   display float: blockleft;
  width: 24px;
  height: 24px;
  position: relative}
  .cd-timeline-content .cd-date {
    position: absolute;
  left  width: 50%100%;
  top: 50%;
  margin-left: -12px122%;
    margin-top: -12px6px;
}
.cd-timeline-img.cd-novo {
  background: #20d691;
}
.cd-timeline-img.cd-melhoria {
  background: #6f60f6;
}
 font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-img-block:nth-child(even) .cd-manutencaotimeline-content {
   background float: #efc307right;
  }
@media only screen and (min-width: 1170px) {
   .cd-timeline-block:nth-child(even) .cd-timeline-imgcontent::before {
    widthtop: 24px;
    left: 60pxauto;
    heightright: 60px100%;
    leftborder-color: 50%transparent;
    marginborder-right-leftcolor: -30px#d7e4ed;
  }
  .cssanimationscd-timeline-block:nth-child(even) .cd-timeline-img.is-hiddencontent .cd-read-more {
    visibilityfloat: hiddenright;
  }
  .cssanimationscd-timeline-block:nth-child(even) .cd-timeline-imgcontent .bouncecd-indate {
    visibilityleft: auto;
    right: visible122%;
    -webkit-animation: cd-bounce-1 0.6stext-align: right;
  }

  .button-2 {
    padding: 8px 9px;
    font-moz-animationsize: cd-bounce-1 0.6s12px;
    animationcolor: cd-bounce-1 0.6s#fff;
  }
}

@-webkit-keyframes cd-bounce-1 {
  0% {  background-color: #FDAB0E;
    border: none;
    opacityborder-radius: 04px;
    -webkit-transformcursor: scale(0.5)pointer;
  }

  60% {
    opacity: 1;.button-2:hover {
    background-webkit-transformcolor: scale(1.2)#0897E9;
  }
  
  100%.button-2:active {
    background-webkit-transformcolor: scale(1)#FDAB0E;
  }
}
@-moz-keyframes cd-bounce-1 {  
  
  0%#wrapper {
    opacitydisplay: 0flex;
    flex-moz-transformdirection: scale(0.5)column;
    }

gap: 20px;
    60%position: {absolute;
    opacityinset: 10;
    justify-moz-transformcontent: scale(1.2)center;
  }

  100% {align-items: center;
    -moz-transformmargin: scale(1)0;
  }
}
@keyframes cd-bounce-1 {
  0% .flexWrap {
    opacitydisplay: 0flex;
    -webkit-transformgap: scale(0.5)2px;
    -moz-transformwidth: scale(0.5)50px;
  }
  -ms-transform: scale(0.5);#disclaimer {
    font-o-transform: scale(0.5);
    transform: scale(0.5)family: Tahoma;
  }

  60%color: {#333333;
    opacityposition: 1fixed;
    -webkit-transformtop: scale(1.2)5%;
    -moz-transformright: scale(1.2)5%;
    -ms-transformwidth: scale(1.2)5%;
  }
  
  -o-transform: scale(1.2);
  
  .button-2 {
    transformpadding: scale(1.2)8px 9px;
  }

  100% {
font-size: 12px;
      -webkit-transformcolor: scale(1)#fff;
    background-moz-transformcolor: scale(1)#363636;
    -ms-transformborder: scale(1)none;
    border-o-transformradius: scale(1)6px;
    transformcursor: scale(1)pointer;
  }
}  
  .cd-timeline-contentbutton-2:hover {
  position: relative;
  marginbackground-leftcolor: 50px#feac0e;
  }
 background: #f5f5fa;
  border.button-radius2:active 0.25em;{
  max-width: 400px;
  paddingbackground-color: 1em#feac0e;
  box-shadow: 0 3px 0 #5596e6;
}
.cd-timeline-content:after}
  
  
  #wrapper {
  content: "";
  display: tableflex;
  clear  flex-direction: bothcolumn;
}
.cd-timeline-content h2 {
  colorgap: #3636362px;
}
.cd-timeline-content p,
.cd-timeline-content .cd-read-more,
.cd-timeline-content .cd-date {
  font-sizeposition: 13pxabsolute;
  font-size  inset: 0.8125rem;
}
.cd-timeline    justify-content .cd-read-more,
.cd-timeline-content .cd-date {
  display: inline-block;
}
.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
  float: right;
  padding: 0.8em 1em;
  background: #5596e6;
  color: white;
  border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
  background-color: #4386c9;
}
.cd-timeline-content .cd-date {
  float: left;
  padding: 0.8em 0;
  opacity: 0.7;
}
.cd-timeline-content::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid #bfcdd6;
}
@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 20px;
    font-size: 1.25rem;
  }
  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-content .cd-read-more,
  .cd-timeline-content .cd-date {
    font-size: 14px;
 : center;
    align-items: center;
  }
  .flexWrap {
    display: flex;
    gap: 2px;
    width: 110px;
  }
  #disclaimer {
    font-family: sans-serif;
    color: #333333;
    position: fixed;
    top: 5%;
    right: 5%;
    width: 5%;
  } 

  .badge-primary {
    color: #8686FF;
    background-color: #F3F3FF;
      border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold  }
 
 .badge-secondary{
    color: #ebeef0;
    background-color: #2abe74;
      border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold 
 
 }
 
 .badge-novo {
    color: #fff;
    background-color: #20d691;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 0.875rem9px;
 font-weight: bold  }
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-content { 
 .badge-danger{
    color: #ebeef0;
    background-color: #e93e9c;
    margin border-leftradius: 010px;
    padding: 6px 1.6em7px;
   font-size:  width9px;
 font-weight: 45%;
bold  }
 
 .cd-timeline-content::beforebadge-manutencao {
    topcolor: 24px#FFF;
    leftbackground-color: 100%#FEAC0E;
    border-colorradius: transparent10px;
    border-left-color: #d7e4edpadding: 6px 7px;
  }
  .cd-timeline-content .cd-read-more {
    float: left;
 font-size: 9px;
 font-weight: bold;
 }
 
 .cd-timeline-content .cd-datebadge-melhoria {
    positioncolor: absolute#FFF;
    widthbackground-color: 100%#6f60f6;
     leftborder-radius: 122%10px;
    toppadding: 6px 7px;
    font-size: 16px9px;
    font-sizeweight: 1rembold;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content badge-light {
    floatcolor: right#8686FF;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
background-color: #F3F3FF
     topborder-radius: 24px10px;
    leftpadding: auto;
    right: 100%6px 7px;
    borderfont-colorsize: transparent9px;
    border-right-colorfont-weight: #d7e4edbold;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more badge-dark {
    floatcolor: right#ebeef0;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
background-color: #064118;
     leftborder-radius: auto10px;
    rightpadding: 6px 122%7px;
    textfont-alignsize: right9px;
 font-weight: bold }
<  </style>