Histórico da Página

 <div>
    <img src="/" alt=""> </div>

<style>
img {
  max-width: 100%;
}
</style>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css">
  <link rel="script" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js">
  <link rel="script" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js">

<style>
.uk-timeline-line {
  background-color: #E5E5E5;
  width: 2px;
  height: 100%;
  position: absolute;
  left: 19px;
  top: 0;
}


.uk-timeline-icon-container {
    position: relative;
  }

.uk-badge {
  background-color: #704CFE;
  color: white;
  position: relative;
  z-index: 1;
}

.uk-label {
    border-radius: 20px;
  }

.custom-button {
    background-color: #363636;
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    transition: background-color 0.3s;
  }

  .custom-button:hover {
    background-color: #0ADBE3;
  }

  .custom-button:focus {
    background-color: #0ADBE3;
  }
</style>

<div>
<img src="https://totvscrm.com/wp-content/uploads/2023/07/nova-capa-release-23aa.png" alt="">
</div>
<div class="uk-container uk-padding">
<div class="uk-timeline">
  <div class="uk-timeline-item">
    <div class="uk-timeline-icon">
      <span class="uk-badge">✓</span>
      <div class="uk-timeline-line"></div>
      <span uk-icon="check" style="color: white;"></span>
    </div>
    <div class="uk-timeline-content">
      <div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
        <div class="uk-card-header">
          <div class="uk-grid-small uk-flex-middle" uk-grid>
            <h3 class="uk-card-title"><time datetime="2023-07-01">15/07/23</time></h3><h3> EXCLUSÃOBORRADO DE REGISTROS DE LEADS<h3>
            <span class="uk-label uk-label-success uk-margin-auto-left">NOVO>NUEVO RECURSO</span>
          </div>
        </div>
        <div class="uk-card-body">
          <p>Mais<p>Más controlecontrol sobre suasu base de Leads. AgoraAhora, de maneiramanera simplessimple ey rápida, vocêpuede pode excluirborrar Leads indesejadosindeseados ey mantermantener suasu base sempresiempre limpalimpia ey organizada. ComSolamente apenascon algunsalgunos cliquesclics, ées possívelposible eliminarborrar Leads desatualizadosdesactualizados, duplicados ouo irrelevantes, elevando ala calidad qualidadede doslos dadosdatos ey aprimorandoperfeccionando suassus estratégiasestrategias de vendasventa.  </p>            

<p>     <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=773910079" style="text-decoration: none;">
  <button class="custom-button" style="border-color: #704CFE; background-color: transparent; color: #704CFE;" 
    onmouseover="this.style.backgroundColor='#704CFE'; this.style.color='white';" 
    onmouseout="this.style.backgroundColor='transparent'; this.style.color='#704CFE';">SAIBA>MÁS MAIS<INFORMACIÓN</button>
</a>
   </p> 

</div>
      </div>
    </div>
  </div>
  <div class="uk-timeline-item">
    <div class="uk-timeline-icon">
      <span class="uk-badge">✓</span>
      <div class="uk-timeline-line"></div>
      <span uk-icon="check" style="color: white;"></span>
    </div>
    <div class="uk-timeline-content">
      <div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
        <div class="uk-card-header">
          <div class="uk-grid-small uk-flex-middle" uk-grid>
            <h3 class="uk-card-title"><time datetime="2023-07-01">15/07/23</time></h3><h3> SINCRONIZAÇÃOSINCRONIZACIÓN DE ACTIVIDADES ATIVIDADESEN NOEL CALENDÁRIOCALENDARIO DODE GOOGLE EY OFFICE 365<h3>
            <span class="uk-label uk-label-info uk-margin-auto-left">MELHORIA<>MEJORA</span>
          </div>
        </div>
        <div class="uk-card-body">
          <p>Agora<p>¡Ahora ées possívelposible sincronizar suassus atividadesactividades comcon oel calendáriocalendario Google Suite e oy Office 365! ComCon esseeste recurso, tenhatenga umun controlecontrol completo sobre seussus compromissoscompromisos aoal visualizar sus suasactividades atividadesdirectamente diretamenteen noslos calendárioscalendarios externos.   </p>

<p>     <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=774619793" style="text-decoration: none;">
  <button class="custom-button" style="border-color: #704CFE; background-color: transparent; color: #704CFE;" 
    onmouseover="this.style.backgroundColor='#704CFE'; this.style.color='white';" 
    onmouseout="this.style.backgroundColor='transparent'; this.style.color='#704CFE';">SAIBA>MÁS MAIS<INFORMACIÓN</button>
</a>
   </p>  </div>
      </div>
    </div>
  </div>
  <div class="uk-timeline-item">
    <div class="uk-timeline-icon">
      <span class="uk-badge">✓</span>
      <div class="uk-timeline-line"></div>
      <span uk-icon="check" style="color: white;"></span>
    </div>
    <div class="uk-timeline-content">
      <div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
        <div class="uk-card-header">
          <div class="uk-grid-small uk-flex-middle" uk-grid>
            <h3 class="uk-card-title"><time datetime="2023-07-01">15/07/23</time></h3><h3>CRIAÇÃOh3><h3>CREACIÓN SIMPLIFICADA DE ORDENSÓRDENES DE VENDAVENTA A PARTIR DE OPORTUNIDADES<h3>
            <span class="uk-label uk-label-info uk-margin-auto-left">MELHORIA<>MEJORA</span>
          </div>
        </div>
        <div class="uk-card-body">
          <p>Agora,<p>Ahora vocêtendrá teráun umatajo atalho diretodirecto para transformar oportunidades emen ordensórdenes de vendaventa. OEl recurso permite que vocêaproveche aproveite aoal máximo aslas informaçõesinformaciones e itensítems jáincluidos inseridosen emsus suas oportunidadesoportunidades. ComSolamente apenascon algunsalgunos cliques,clics vocêpodrá poderácrear criar ordensórdenes de vendaventa de forma eficiente, economizando tempotiempo ey aumentando ala produtividadeproductividad.</p>
<br>
<p>     <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=775481681" style="text-decoration: none;">
  <button class="custom-button" style="border-color: #704CFE; background-color: transparent; color: #704CFE;" 
    onmouseover="this.style.backgroundColor='#704CFE'; this.style.color='white';" 
    onmouseout="this.style.backgroundColor='transparent'; this.style.color='#704CFE';">SAIBA>MÁS MAIS<INFORMACIÓN</button>
</a>

   </p>  

 </div>
      </div>
    </div>
  </div>
<div class="uk-timeline-item">
    <div class="uk-timeline-icon">
      <span class="uk-badge">✓</span>
      <div class="uk-timeline-line"></div>
      <span uk-icon="check" style="color: white;"></span>
    </div>
    <div class="uk-timeline-content">
      <div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
        <div class="uk-card-header">
          <div class="uk-grid-small uk-flex-middle" uk-grid>
            <h3 class="uk-card-title"><time datetime="2023-07-01">15/07/23</time></h3><h3> EXCLUSIVIDADEEXCLUSIVIDAD VISUAL: PERSONALIZEPERSONALICE AEL LOGO EN NOEL TOTVS CRM<h3>
              <span class="uk-label uk-label-info uk-margin-auto-left">MELHORIA<>MEJORA</span>
            </div>
          </div>
          <div class="uk-card-body">
            <p>Deixe<p>¡Deje oel TOTVS CRM comcon asu sua identidadeidentidad! AgoraAhora vocêpuede pode personalizar oel tema de dala soluçãosolución comcon oel estilo dade suasu empresa. SubstituaSustituya ael logo padrãoestándar por imagensimágenes que representamrepresentan a suasu marca, fortalecendofortaleciendo suasu identidadeidentidad ey criandocreando umauna experiênciaexperiencia única para asu sua equipeequipo.</p>
  <p>       <a href="https://tdn.totvs.com/display/TCGDC/Exclusividade+Visual%3A+Personalize+a+Logo+do+TOTVS+CRM" style="text-decoration: none;">
  <button class="custom-button" style="border-color: #704CFE; background-color: transparent; color: #704CFE;" 
    onmouseover="this.style.backgroundColor='#704CFE'; this.style.color='white';" 
    onmouseout="this.style.backgroundColor='transparent'; this.style.color='#704CFE';">SAIBA>MÁS MAIS<INFORMACIÓN</button>
</a>
     </p>   </div>
      </div>
    </div>
  </div> 
<div class="uk-timeline-item">
    <div class="uk-timeline-icon">
      <span class="uk-badge">✓</span>
      <div class="uk-timeline-line"></div>
      <span uk-icon="check" style="color: white;"></span>
    </div>
    <div class="uk-timeline-content">
      <div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
        <div class="uk-card-header">
          <div class="uk-grid-small uk-flex-middle" uk-grid>
            <h3 class="uk-card-title"><time datetime="2023-07-01">15/07/23</time></h3><h3> FORMULÁRIOFORMULARIO COMPLETO EN NALA ADIÇÃOINCLUSIÓN RÁPIDA (QUICK ADD)<h3>
            <span class="uk-label uk-label-info uk-margin-auto-left">MELHORIA<>MEJORA</span>
          </div>
        </div>
        <div class="uk-card-body">
          <p>Mais<p>¡Más agilidadeagilidad ey eficiênciaeficiencia aprimoradasperfeccionadas comcon formuláriosformularios de adiçãoinclusión rápida! Agora,Ahora todos oslos campos, incluindoincluyendo oslos personalizados, se serãomostrarán exibidosen noslos formuláriosformularios de adiçãoinclusión rápida (quick add), tanto en nala versãoversión Web quantocomo en noel ambienteentorno Mobile. EssaEsta melhoriamejora abrangenteampliamente permite umauna experiênciaexperiencia maismás completa ey flexívelflexible aoal incluir adicionarinformaciones informaçõesen noslos seguintessiguientes formuláriosformularios: Clientes, Leads, Títulos FinanceirosFinancieros, CampanhasCampañas, Oportunidades ey VendasVentas.  </p>

<p>     <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=776114768" style="text-decoration: none;">
  <button class="custom-button" style="border-color: #704CFE; background-color: transparent; color: #704CFE;" 
    onmouseover="this.style.backgroundColor='#704CFE'; this.style.color='white';" 
    onmouseout="this.style.backgroundColor='transparent'; this.style.color='#704CFE';">SAIBA>MÁS MAIS<INFORMACIÓN</button>
</a>
   </p>  </div>
      </div>
    </div>
  </div> 
  <div class="uk-timeline-item">
    <div class="uk-timeline-icon">
      <span class="uk-badge">✓</span>
      <div class="uk-timeline-line"></div>
      <span uk-icon="check" style="color: white;"></span>
    </div>
    <div class="uk-timeline-content">
      <div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
        <div class="uk-card-header">
          <div class="uk-grid-small uk-flex-middle" uk-grid>
            <h3 class="uk-card-title"><time datetime="2023-07-01">15/07/23</time></h3><h3> WORKFLOW: ATUALIZAÇÃOACTUALIZACIÓN DE RESPONSÁVELRESPONSABLE EMEN ATIVIDADESACTIVIDADES EY OPORTUNIDADES <h3>
            <span class="uk-label uk-label-info uk-margin-auto-left">MELHORIA<>MEJORA</span>
          </div>
        </div>
        <div class="uk-card-body">
          <p>Otimize<p>Optimice seusu tempotiempo ey evite erroserrores aoal transferir el oresponsable responsávelde dala contacuenta. ComCon oslos novosnuevos gatilhosdisparadores ey açõesacciones de workflow, vocêno nãonecesita precisapreocuparse maismás se preocupar em atualizaren actualizar manualmente todas aslas atividadesactividades ey oportunidades vinculadas aoal antigoantiguo responsávelresponsable dodel cliente ouo lead. Agora,Ahora essasestas tarefastareas podempueden serrealizarse realizadas automaticamenteautomáticamente, proporcionando agilidadeagilidad ey precisãoprecisión aoa seusu fluxoflujo de trabalhotrabajo. </p>

<p>    

<a href="https://tdn.totvs.com/pages/viewpage.action?pageId=776521054" style="text-decoration: none;">
  <button class="custom-button" style="border-color: #704CFE; background-color: transparent; color: #704CFE;" 
    onmouseover="this.style.backgroundColor='#704CFE'; this.style.color='white';" 
    onmouseout="this.style.backgroundColor='transparent'; this.style.color='#704CFE';">SAIBA>MÁS MAIS<INFORMACIÓN</button>
</a>


 </p>  </div>
      </div>
    </div>
  </div>
  <div class="uk-timeline-item">
    <div class="uk-timeline-icon">
      <span class="uk-badge">✓</span>
      <div class="uk-timeline-line"></div>
      <span uk-icon="check" style="color: white;"></span>
    </div>
    <div class="uk-timeline-content">
      <div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
        <div class="uk-card-header">
          <div class="uk-grid-small uk-flex-middle" uk-grid>
            <h3 class="uk-card-title"><time datetime="2023-07-01">15/07/23</time></h3><h3> WORKFLOW: NOTIFICAÇÕESNOTIFICACIONES DE ATUALIZAÇÕESACTUALIZACIONES PARA USUÁRIOSUSUARIOS COMCON ACESSOACCESO AOAL REGISTRO<h3>
            <span class="uk-label uk-label-info uk-margin-auto-left">MELHORIA<>MEJORA</span>
          </div>
        </div>
        <div class="uk-card-body">
          <p>Impulsione<p>¡Impulse ala comunicaçãocomunicación ey ala colaboraçãocolaboración emen suasu equipeequipo comcon oel novonuevo tipo de açãoacción dodel workflow! AoAl configurar essasestas açõesacciones de notificaçõesnotificaciones, você garantegarantiza que tanto oslos responsáveisresponsables pelospor los registros quantocomo oslos usuáriosusuarios comcon acessoacceso compartilhadocompartido sejamsean informados emen tempotiempo real sobre atualizaçõesactualizaciones importantes. Essa abordagem promove uma colaboração e mantémEste abordaje promueve una colaboración y mantiene comprometidos a todos engajadosen emun um fluxoflujo de trabalhotrabajo otimizadooptimizado.   </p>

<p>    
<a href="https://tdn.totvs.com/pages/viewpage.action?pageId=776527924" style="text-decoration: none;">
  <button class="custom-button" style="border-color: #704CFE; background-color: transparent; color: #704CFE;" 
    onmouseover="this.style.backgroundColor='#704CFE'; this.style.color='white';" 
    onmouseout="this.style.backgroundColor='transparent'; this.style.color='#704CFE';">SAIBA>MÁS MAIS<INFORMACIÓN</button>
</a>
   </p>  </div>
      </div>
    </div>
  </div>
  <div class="uk-timeline-item">
    <div class="uk-timeline-icon">
      <span class="uk-badge">✓</span>
      <div class="uk-timeline-line"></div>
      <span uk-icon="check" style="color: white;"></span>
    </div>
    <div class="uk-timeline-content">
      <div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
        <div class="uk-card-header">
          <div class="uk-grid-small uk-flex-middle" uk-grid>
            <h3 class="uk-card-title"><time datetime="2023-07-01">15/07/23</time></h3><h3> FILTROS AVANÇADOSAVANZADOS COMCON DATASFECHAS RELATIVAS<h3>
            <span class="uk-label uk-label-info uk-margin-auto-left">MELHORIA<>MEJORA</span>
          </div>
        </div>
        <div class="uk-card-body">
          <p>Agora<p>¡Ahora ées possívelposible aproveitaraprovechar oslos poderosos filtros avançadosavanzados comcon datasfechas relativas, trayendo trazendouna umanueva novadimensión dimensãoa àla forma comoen você gerencia seusla cual administra como sus registros! Con Com esseeste recurso, vocêtendrá terá oel poder de separar seussus registros de forma intuitiva ey rápida, utilizando palavraspalabras chaveclave como "hojehoy", "esta semana", "este mêsmes" ey muitomucho maismás. Ya Sejasea para monitorarmonitorear suassus atividadesactividades diáriasdiarias, identificar las asventas vendasde dala semana atualactual ouo acompanharacompañar aslas oportunidades ganadas ganhasen nesteeste mêsmes, tudotodo sees tornaposible possívelcon comun umsimple simples cliqueclic.   </p>

<p>     
<a href="https://tdn.totvs.com/pages/viewpage.action?pageId=776532887" style="text-decoration: none;">
  <button class="custom-button" style="border-color: #704CFE; background-color: transparent; color: #704CFE;" 
    onmouseover="this.style.backgroundColor='#704CFE'; this.style.color='white';" 
    onmouseout="this.style.backgroundColor='transparent'; this.style.color='#704CFE';">SAIBA>MÁS MAIS<INFORMACIÓN</button>
</a>
   </p>  </div>
      </div>
    </div>
  </div>
<div class="uk-timeline-item">
    <div class="uk-timeline-icon">
      <span class="uk-badge">✓</span>
      <div class="uk-timeline-line"></div>
      <span uk-icon="check" style="color: white;"></span>
    </div>
    <div class="uk-timeline-content">
      <div class="uk-card uk-card-default uk-margin-medium-bottom uk-overflow-auto">
        <div class="uk-card-header">
          <div class="uk-grid-small uk-flex-middle" uk-grid>
            <h3 class="uk-card-title"><time datetime="2023-07-01">15/07/23</time></h3><h3> SELEÇÃOSELECCIÓN DE EMPRESAS NOEN FORMULÁRIOEL FORMULARIO DE CLIENTES<h3>
              <span class="uk-label uk-label-info uk-margin-auto-left">MELHORIA<>MEJORA</span>
            </div>
          </div>
          <div class="uk-card-body">
            <p>Simplifique<p>¡Simplifique ey agilizeagilice oel processoproceso! AgoraAhora ées possívelposible associarvincular facilmentefácilmente oel cliente àsa suassus empresas (unidades/filiaissucursales) directamente diretamenteen noel formulárioformulario de cadastroregistro. ComCon oel recurso de filtragemfiltrado, aslas opçõesopciones disponíveisdisponibles sãoson automaticamenteautomáticamente ajustadas comcon base noen el responsávelresponsable selecionadoseleccionado, oferecendoofreciendo apenassolamente aslas opçõesopciones relevantes. De Dessaesta formamanera, garante-se garantiza ala tranquilidadetranquilidad de que aslas associaçõesvinculaciones estãoestán corretascorrectas ey alinhadasalineadas.   </p>
  
  <p>      

<a href="https://tdn.totvs.com/pages/viewpage.action?pageId=776534542" style="text-decoration: none;">
  <button class="custom-button" style="border-color: #704CFE; background-color: transparent; color: #704CFE;" 
    onmouseover="this.style.backgroundColor='#704CFE'; this.style.color='white';" 
    onmouseout="this.style.backgroundColor='transparent'; this.style.color='#704CFE';">SAIBA>MÁS MAIS<INFORMACIÓN</button>
</a>     

</p>  
 </div>
      </div>
    </div>
  </div> 
</div>
</div>  

  <style>
    html, body {
      height: 100%;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gif-container {
      max-width: 100%;
      height: auto;
    }

    .gif-container img {
      width: 60%;
    }
  </style>

<div id="faq"> <div class="gif-container">
    <img src="https://totvscrm.com/wp-content/uploads/2023/07/82_FAQ_02_solid.gif" alt="GIF flexível">
  </div>   </div> 


<div id="faq">
  <h1>RESPUESTAS <h1>RESPOSTASA LAS ÀSPREGUNTAS PERGUNTAS
MAISMÁS FREQUENTES<FRECUENTES</h1>
  <ul>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>O<h2>¿Qué que ées Release Notes?</h2>
      <p>É<p>Es oel documento que agrupa ey detalhadetalla todas aslas atualizaçõesactualizaciones de un umproducto produtoa aolo longolargo de umauna versãoversión ouo período.</p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>      <h2>Como<h2>¿Cómo identificar ala nomenclatura dosde los releases?</h2>
      <p align="justify">O>La versionamentoversión semânticosemántica ées umun conjunto de regrasreglas desobre comocómo oslos números de doslos releases/versõesversiones sãose atribuídosatribuyen e incrementadosincrementan, comcon el objetivo de mantermantener ala compatibilidadecompatibilidad e integridadeintegridad emen novasnuevas liberaçõesliberaciones. Para cada lançamentoregistro se devedebe tertener umun número único de liberaçãoliberación (release/versãoversión) ey, umadespués vezde lançadoregistrarlo, oel código dessade liberaçãoesta nãoliberación podeya maisno serpuede alteradomodificarse. QualquerCualquier necessidadenecesidad de modificación alteraçãoen nala soluçãosolución, deverádebe serregistrarse lançadocon comun umnuevo novo número de liberaçãoliberación. La Aestandarización padronizaçãode dala nomenclatura de releases/versão dos produtos daversión de los productos de la marca TOTVS temtiene ocomo propósito de facilitar ael compreensãoentendimiento dodel ciclo de vida dosde los releases pelospor nossosnuestros clientes ey equipesequipos internasinternos, alinhadoalineado con àslas melhoresmejores práticasprácticas de mercado. OEl padrãoestándar de nomenclatura dosde los produtosproductos TOTVS seguirá oeste exemploejemplo: 12.1 (versãoversión). 2301 (AnoAño ey mêsmes). 0001 (NumeraçãoNumeración sequencialsecuencial opcional naen la nomenclatura utilizada utilizadocuando quandoexista houveruna umaliberación liberaçãocon comcorrecciones correçõesy emodificaciones alteraçõeslegales legaisen noel release correnteactual).</p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Como<h2>¿Cómo faço para registrar sugestõesregistro sugerencias de melhoriasmejoras?</h2>
      <p> SuaSu ideiaidea poderápodrá sercompartirse compartilhadapor atravésmedio dodel canal 

<a href="https://centraldeatendimento.totvs.com/hc/pt-br/community/topics">Central Colaborativa</a>. Esta área foise criadacreó para que vocêusted pueda sugerir novasnuevas funcionalidades para oel TOTVS CRM - GestãoGestión de Clientesclientes. AsLas sugestõessugerencias de melhoriasmejoras serãoserán monitoradasmonitoreadas pelopor nossonuestro timeequipo de inovaçãoinnovación, eque avaliadaevaluará ala viabilidadeprobabilidad parade umauna futura implementaçãoimplementación.</p>
    </li>
  </ul>
</div>

<br>
<br>
<br>

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

uk-timeline .uk-timeline-item .uk-card {
	max-height: 300px;
}

.uk-timeline .uk-timeline-item {
    display: flex;
    position: relative;
}

.uk-timeline .uk-timeline-item::before {
    background: #dadee4;
    content: "";	
    height: 100%;
    left: 19px;
    position: absolute;
    top: 20px;
    width: 2px;
		z-index: -1;
}

.uk-timeline .uk-timeline-item .uk-timeline-icon .uk-badge {
		margin-top: 20px;
    width: 40px;
    height: 40px;
}

.uk-timeline .uk-timeline-item .uk-timeline-content {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0 0 0 1rem;
}


</style>

<style>
body {
  background: #f4f4f4;
  display: flex;
}

#faq {
  max-width: 700px;
  margin: auto;
  padding: 0 15px;
  text-align: center;
}

section.faq {
  padding-top: 2em;
  padding-bottom: 3em;
}

#faq ul {
  text-align: left;
}
.transition, p, ul li i:before, ul li i:after {
  transition: all 0.3s;
}

#faq .no-select, #faq h2 {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

#faq h1 {
  color: #393939;
  margin-bottom: 20px;
  margin-top: 0;
font-size: 25px; }

#faq h2 {
  color: #6B48FF;
  font-family: Tahoma, sans-serif;
  font-size: 16px;
  line-height: 34px;
  text-align: left;
  padding: 15px 15px 0;
  text-transform: none;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  margin: 0;
  cursor: pointer;
  transition: .2s;
}

#faq p {
  color: #333;
  text-align: justify-all;
  font-family: 'hm_light', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  position: relative;
  overflow: hidden;
  max-height: 250px;
  will-change: max-height;
  contain: layout;
  display: inline-block;
  opacity: 1;
  transform: translate(0, 0);
  margin-top: 5px;
  margin-bottom: 15px;
  padding: 0 50px 0 15px;
  transition: .3s opacity, .6s max-height;
  hyphens: auto;
  z-index: 2;
}

#faq ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
#faq ul li {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  /*padding-bottom: 4px;*/
  /*padding-top: 18px;*/
  background: #fff;
  box-shadow: 1px 2px 10px -2px rgba(114,114,158, 21%);
  -webkit-tap-highlight-color: transparent;
}
#faq ul li + li {
  margin-top: 15px;
}
#faq ul li:last-of-type {
  padding-bottom: 0;
}
#faq ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 28px;
  right: 15px;
}
#faq ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #6B48FF;
  width: 3px;
  height: 9px;
}
#faq ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
#faq ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
#faq ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  touch-action: manipulation;
}
#faq ul li input[type=checkbox]:checked ~ h2 {
  color: #393939;
}
#faq ul li input[type=checkbox]:checked ~ p {
  /*margin-top: 0;*/
  max-height: 0;
  transition: .3s;
  opacity: 0;
  /*transform: translate(0, 50%);*/
}
#faq ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
#faq ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}











* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

a,
a:visited,
a:focus,
a:active,
a:link {
  text-decoration: none;
  outline: 0;
}

a {
  color: currentColor;
  transition: .2s ease-in-out;
}

h1, h2, h3, h4 {
  margin: .3em 0;
}

ul {
  padding: 0;
  list-style: none;
}

</style>