/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/***********************************************/
/* CSS para los modulos editables de PPC */               
/***********************************************/

/* Global */

:root {

}

*{
  font-family: "Figtree", sans-serif;
  font-style: normal;
  font-weight: 400;
  box-sizing:border-box;
}

body{
  padding:0;
  margin:0;
}

strong {
  font-weight: bold;
}

/* Headings */
h1, h2 {
  color:#1f2d52;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  text-transform: none;
  text-wrap: balance;
}

h1 {
  font-size: 3rem;
  line-height: 1;
  font-weight: 900;
}

h2 {
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 900;
  text-align: center;
}


span, p {
  font-size:18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
 /* text-wrap: balance;*/
}

@media only screen and (max-width: 670px) {
  h1 {
    font-size: 2.4rem;
  }
  h2 {
    font-size: 2rem;
  }
  span, p {
    font-size: 15px !important;
    line-height: 22px !important;
  }
}

/********** Margen entre secciones***********/

/*Logos slider*/

.logos-section {
  margin-bottom:70px;
  margin-top: 50px;
}
.logos-section h2 {
  color: #1f2d52;
  font-size: 40px;
  font-weight: 900;
  line-height: 43px;
  margin-top: 0;
  text-align:center;
}
.hs-logo-grid__logo:hover {
  transform: translate(0) scale(1.3);
}

@media only screen and (max-width: 670px) {
  .logos-section {
    margin-top: 0px;
  }
  .logos-section h2 {
    font-size: 30px;
    line-height: 37px;
  }
  img.hs-logo-grid__logo:hover {
    translate(0) scale(1)
  }
}

/*Logos header*/
.hs-logo-grid {
  padding: 20px;
}

/*Buttons*/

.button-wrapper {
  text-align: left;
}

.button , #button , #send { 
  font-weight: 500;
  margin-top: 30px;
  margin-bottom: 40px;
 
  border: 1px #cc0201;
  border-radius: 10px;
  color: #fff;
  font-size: 19px;
  padding: 12px 40px;
  text-transform: none;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all .5s linear;
  white-space: normal;
  text-decoration-line: none;
}

a.button.button-inbound {
    transition: all .5s linear;
}

@media only screen and (max-width: 700px) {
  .button , #button , #send { 
    font-size: 15px;
  }
  #send {
     margin-bottom: 30px !important;
}
}

.button:hover ,
#send:hover 
{
  background-color: #443bd7;
  border-color: #a40000;
}

/*Utilities*/

.grid-2 {
  display: grid;
  grid-template-columns: 50% 50%;
  justify-items: center;
  gap: 60px;
  align-items: center;
}

@media only screen and (max-width: 900px) {
  .grid-2 {
    width: 80% !important;
    grid-template-columns: auto;
    margin:auto;
  }
}
@media only screen and (max-width: 670px) {
  .grid-2 {
    width: 100% !important;
  }
}

/*Logo*/

.logo-sesame {
  margin:30px auto 10px auto;
  max-width: 200px !important;
} 
/*MODULES*/

.case-study-slider{
  max-width:1280px;
  margin:0 auto;
}
.slider-case-study img {
    border-radius: 26px 26px 0px 0px;
}
/*Header section*/

.form.form-ppc:before {
display:none;
}
#header > .row-fluid-wrapper{  
  margin: 0 auto;
  max-width: 1280px;
}

#header > .row-fluid-wrapper > .row-fluid{
  align-items: center;
  display: flex;
}

#header {
    margin-bottom: 3rem;
}

#header img {
   width:auto!important;
}

#header-section ul {
    display: grid;
    gap: 15px;
    list-style: none;
    padding-left: 0rem;
}

/*
.header-column-2 span .hs_cos_wrapper {
    display:flex;
    justify-content: center;
}
*/

li.lista-item {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
}

#header .row-fluid {
  position: relative;
}

div#header-section {
  padding: 0 20px;
}


/*Header video*/

#header .span6 .hs-video-widget ,
#header .span6 .hs_cos_wrapper_type_linked_image {
  position:relative;
}

#header .header-column-2 {
  padding:0 20px;
}

#header .hs-video-widget {
  margin-top: 3rem;
}

#header .hs-video-container {
    position: relative;
    width: 500px;
    height: 500px;
}

@media only screen and (max-width: 600px) { 
  
  #header .hs-video-container {
    position: relative;
    width: 330px;
    height: auto;
}
}

#header .span6 .hs-video-widget:after
{
  background: linear-gradient(225deg, #a6ed90, #5bd3d8);
  border-radius: 40px;
  content: "";
  height: 500px;
  position: absolute;
  right: -70px;
  top: -80px;
  width: 430px;
  z-index: -1;
  margin-top:-1rem;
}

#header .span6 .hs_cos_wrapper_type_linked_image:after {
  background: linear-gradient(225deg, #a6ed90, #5bd3d8);
  border-radius: 40px;
  content: "";
  height: 500px;
  position: absolute;
  right: -70px;
  top: -20px;
  width: 430px;
  z-index: -1;
}

#header iframe {
  border-radius: 20px;
}
#header .hs_cos_wrapper {
  border-radius: 20px;
}

@media only screen and (max-width: 1317px) {
  #header-section ul {
    display: grid;
    justify-items: start;
  }
  div#header {
    margin-bottom: 3rem;
  }
}

@media only screen and (max-width: 900px) {
  #header .span6 .hs_cos_wrapper_type_linked_image:after ,
  #header .span6 .hs-video-widget:after{
    display:none;
  }

}

@media only screen and (max-width: 767px) {
  #header .row-fluid {
    display: grid !important;
    gap: 0px;
  }
  #header .button-wrapper {
    text-align: center;
  }
  .row-number-1 .row-fluid {
    gap: 0px;
  }
}


@media only screen and (max-width: 670px) {
  #header .row-fluid {
    display: grid !important;
    gap:0px;
  }
 
  div#header {
    padding-bottom: 0rem;
  }
}

/*Forms*/
.widget-type-form, .hs_cos_wrapper_type_form,
.form.form-ppc {
  margin-top: 2rem;
  margin-bottom: 3rem;
}
form#basic-form {
    padding-bottom: 0.5rem;
}

.form h2 span ,
.form h3 span {
  font-size: 2rem!important;
  line-height: 1;
}
.widget-type-form h2, .hs_cos_wrapper_type_form h2,
.widget-type-form h3, .hs_cos_wrapper_type_form h3,
.form h2  ,
.form h3 {
  font-size: 2rem!important;
  line-height: 1;
  margin-top:0px;
}

.widget-type-form h3, .hs_cos_wrapper_type_form h3{
    text-align: center;
    font-weight: 600;
} 

.widget-type-form, .hs_cos_wrapper_type_form  {
    padding: 30px !important;
}

.py-2 {
  display: flex;
}

.text-lg ,
.w-full {
  width: 100%;
}

.widget-type-form, .hs_cos_wrapper_type_form,
.form.form-ppc {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  max-width: 700px;
  margin: 50px auto 80px auto;
  padding: 40px;
  position: relative;
	display: block;
}

.button:active, .submitted-message, button:active, form {
  font-family: Albert Sans, sans-serif;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
}

form input[type=email], form input[type=file], form input[type=number], form input[type=password], form input[type=tel], form input[type=text], form select, form textarea {
  background-color: #fff;
  border: 1px solid #c4cfdc;
  border-radius: 20px;
  color: #1a202c;
  font-size: 16px;
  line-height: 16px;
  padding: 8px 18px;
}

.form.form-ppc:before {
  background: url(https://try.sesamehr.mx/hubfs/Landings%20PPC/Software-rrhh/decoration-form-bg.png) 50% no-repeat;
  background-size: contain;
  content: "";
  height: 100%;
  left: -80px;
  position: absolute;
  top: -40px;
  width: 110%;
  z-index: -1;
}
.widget-type-form, .hs_cos_wrapper_type_form,
.form.form-ppc .py-2 {
  padding-bottom: .3rem;
  padding-top: .3rem;
}

.form.form-ppc .lg\:flex {
  display: flex;
}
.widget-type-form, .hs_cos_wrapper_type_form,
.form.form-ppc .mt-4 {
  margin-bottom: 1rem;
}
.widget-type-form, .hs_cos_wrapper_type_form,
.form.form-ppc p {
  margin-bottom: 0;
}

.form.form-ppc button {
  width: 100%;
}

.form.form-ppc .mr-1 {
  margin-right: .25rem;
}

.form.form-ppc .lg\:w-1\/2 {
  width: 50%;
}

.form.form-ppc .block.text-lg {
  display: flex;
}

.form.form-ppc  form select {
  color: #747474;
}
select#leadIndustry ,
select#position {
  padding: 7px;
}

input#email ,
select#position ,
select#leadIndustry {
  width: 100%;
}

div#jobcontain {
  display: none;
}

select#leadIndustry ,
.form.form-ppc form select ,
select#position {
  color: #1f2d52;
}

@media only screen and (max-width: 900px) {

  #header-section .row-fluid {
    display: grid!important;
    justify-items: center;
  }
  #header-section .row-fluid .span6 {
    width: 80%!important;
  }
  .row-number-1 .row-fluid {
    gap: 0px;
  }
  .form.form-ppc {
    margin: 0rem auto 3rem auto;
  }
}

@media only screen and (max-width: 670px) {
  .row-fluid .span6 {
    width: 100%!important;
  }

  .row-number-1 .row-fluid {
    gap: 42px;
  }

  .form.form-ppc:before {
    width: 450px;
    max-width: 100%;
  }

  .form.form-ppc {
    margin: 35px 0px 60px 0px;
    padding: 35px 20px 0px 20px;
  }
}

/*Image + content Section*/

#two-col-image-content {
  max-width: 1280px;
  margin:30px auto;
}

#two-col-image-content h3 {
    font-size: 2rem;
    line-height: 37px;
    color: #1f2d52;
    font-weight: 900;
    margin-top: 0px;
    margin-bottom: 33px;
}

#two-col-image-content .subtitulo {
  text-align:center;
  font-size: 18px ;
  line-height: 28px;
  color: #6c63ff;
  font-weight: bold;
}

#two-col-image-content h4 {
  font-size: 20px;
  color: #1f2d52;
  font-style: normal;
  font-weight: 800;
  text-decoration: none;
  text-transform: none;
  margin-bottom: 0px;
  margin-top: 0px;
}

#two-col-image-content .grid-2-list {
    display: grid;
    grid-template-columns: 70px 1fr;
    justify-items: start;
    justify-content: start;
    align-items: center;
    margin: 20px 0px;
}


#two-col-image-content p {
  color: #292929;
  font-size: 16px;
  font-weight: 400;
  margin-top: 6px;
  text-decoration: none;
  line-height: 21px;
  margin-bottom: 7px;
}

@media only screen and (max-width: 670px) {

  #two-col-image-content p {
    font-size: 16px;
  }

  #two-col-image-content h4 {
    font-size: 21px;
  }

  #two-col-image-content .grid-2-list  img {
    max-width: 40px !important;
  }
  .button-wrapper {
    text-align: center;
  }
  #two-col-image-content  h3 {
    font-size: 30px ;
    line-height: 37px;
  }
  div#two-col-image-content {
    margin-bottom: 20px;
  }
}

/*Advantages seccion*/

#advantages-seccion {
  max-width: 1280px;
}

#advantages-seccion .bg-color {
  align-content: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 48px;
  max-width: 420px;
  min-height: 200px;
  padding: 32px;
}

#advantages-seccion .subtitle {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #6c63ff !important;
  font-weight: bold !important;
  font-size: 18px !important;
  line-height: 28px !important;
}

#advantages-seccion .grid-3 {
  display: grid;
  grid-template-columns: 1fr 30% 1fr;
  gap: 20px;
  align-items: center;
  justify-items: center;
}

#advantages-seccion .grid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 50px;
}

#advantages-seccion h2 {
  text-align: center;
  color: #1f2d52;
  font-size: 40px;
  line-height: 50px;
  margin: 10px auto;
  font-weight: 900;
  max-width: 800px;
  margin-bottom: 50px;
}

#advantages-seccion h3 {
  color: #1f2d52;
  font-size: 22.5px;
  line-height: 21.5px;
  margin: 0 0 7px;
  font-weight: 700;
}

#advantages-seccion img {
  height: auto;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 480px!important;
  z-index: 1;
}

@media (max-width: 900px) {
  #advantages-seccion  .grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  #advantages-seccion  .image-order-3-movil {
    order:3;
  }
  #advantages-seccion .grid-item {
    gap: 20px;
  }
  #advantages-seccion img {
    height: auto;
    position: relative;  
    top: 0px;
    left:  0px;
    transform: none;
    max-width: 100%!important;
  }
}

@media (max-width: 670px) {
  #advantages-seccion  .grid-3 {
    grid-template-columns: 1fr;
  }
  #advantages-seccion h2 {
    font-size: 35px;
    line-height: 36px;
  }
  #advantages-seccion .bg-color {
    margin: 0 auto 0px;
    padding: 20px 15px;
    min-height: auto;
  }
  #advantages-seccion .bg-color p {
    margin: 0px;
  }
  #advantages-seccion .button-wrapper {
    margin-top:30px;
  }
}

/*Image banner*/

#image-banner {
  max-width: 1280px !important;
  margin: 50px auto !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0rem 2rem;
  justify-items: center;
  padding-top:1rem;
}

#image-banner .image {
  border-radius: 19px;
  padding: 0px 2rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  max-width: 450px;
}

#image-banner h2 {
  margin-top:0px;
  margin-bottom: 17px;
  text-align: center;
}

#image-banner .content {
    display: grid;
    align-items: center;
    justify-items: center;
    height: 100%;
    align-content: center;
    justify-content: center;
    padding: 2rem;
    gap: 0px;
}

#image-banner .content p {
    color: #1f2d52;
    font-size: 18px;
    line-height: 26px;
    margin: 5px auto;
    text-align: center;
}

#image-banner a.button {
  margin-bottom: 0px;
}

@media (max-width: 670px) {
  #image-banner {
    grid-template-columns: auto;
    padding: 1rem 1rem;
    justify-items: center;
    justify-content: center;
    text-align: center;
  }

  #image-banner h2 {
    color: #1f2d52;
    font-size: 30px;
    font-weight: 900;
    line-height: 43px;
    text-align:center;
  }

  #image-banner .content {
    padding: 1rem 0rem;
    align-content: center;
    justify-content: center;
    justify-items: center;
    padding: 1rem 0rem;
    gap: 20px;
  }

  #image-banner .image {
    display:none;
  }
}

/*Slider case studies*/

.case-study-slider.sliderPro-enabled.is-draggable{
  padding:20px;
}
.slider-section {
  margin: 90px auto 140px auto;
}

@media (max-width: 670px) {
  .slider-section {
    margin: 50px auto 80px auto;
  }
  p.cita {
    font-size: 25px!important;
    line-height:30px;
  }
  .sliderPro-page-dots {
    position: relative!important;
  }
  .slide-content p.name {
    color: #1f2d52;
    font-size: 16px;
  }
  .slide-content a {
    font-size: 16px;
  }
  .slide-content .content {
    padding:10px;
  }
}

/*Prueba-gratuita*/

#prueba-gratuita {
  padding: 3rem 0px;
}

#prueba-gratuita .lista img {
  max-width: 35px!important;
}

#prueba-gratuita ul {
  list-style: none;
  padding: 0px;
}

#prueba-gratuita li {
  display: flex;
  gap: 14px;
  color: #4c5267;
  font-size: 24px;
  font-weight: 700;
  list-style: none;
  padding: 15px 40px;
  position: relative;
}

#prueba-gratuita li div {
  font-weight: bold;
}

/*Compañias que ya utilizan Sesame*/

#companias-utilizan-sesame {
  padding: 1rem 0rem;
}


#companias-utilizan-sesame h2 {
  margin: 10px auto;
  max-width: 900px;
  padding-top: 1.5rem;
}

/* Estilos generales */

 #companias-utilizan-sesame .scroll-movil {
    overflow: auto;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    margin-top: 2rem;
    flex-wrap: wrap;
    padding: 60px 1rem;
  }

@media (max-width: 670px) {
    .sliderPro-page-dots {
        position: relative !important;
        display: none;
    }
  .slider-logos-caso-exito {
     padding-bottom:0px;
  }
}
 
.sliderPro-viewport {
   width: 100%;
    height: 264px !important;
    padding-top: 3rem!important;
}
 
#companias-utilizan-sesame .element {
    background: #ffffff;
    margin: 10px;
    min-height: 160px;
    object-fit: contain;
    padding: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 19px;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .204));
    max-width: 250px;
    margin-top: 0;
    flex: 0 0 auto;
    justify-content: center;
}

#companias-utilizan-sesame h2 {
  padding: 0 1rem;
}
 

/* Scroll styles for screens up to 700px */
@media (max-width: 700px) {
  #companias-utilizan-sesame .scroll-movil {
    justify-content: flex-start;
    margin-top: 1rem;
    margin-bottom: 0;
    gap: 5px;
  }

  #companias-utilizan-sesame .element {
    max-width: 160px;
  }
}


/*Por que sesame*/

#por-que-sesame {
  padding: 1rem 0rem 3rem 0rem;
}

#por-que-sesame h2 {
  margin: 10px auto;
  max-width: 800px;
  padding: 0px 1rem;
}

#por-que-sesame .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1280px;
  margin: 4rem auto 2rem auto;
  gap: 30px;
  justify-items: center;
}

#por-que-sesame .grid-item {
    display: grid;
    justify-items: start;
    gap: 10px;
    justify-content: start;
    background-color: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, .16), 0 0 0 0px rgba(0, 0, 0, .06);
}

#por-que-sesame .grid-item {
    transition: 0.5s;
}
 
#por-que-sesame .grid-item:hover {
    transform: translatey(-5px);
}

#por-que-sesame .title {
  color: #2c2c51;
  font-size: 25px;
  font-weight: 700;
  line-height: 32px;
}


#send ,
.button-inbound {
    border-radius: 10px!important;
    color: #fff!important;
    cursor: pointer!important;
    display: inline-block;
    font-size: 15px!important;
    padding: 9px 22px!important;
    text-align: center;
    text-transform: none;
    transition: all .5s linear;
    white-space: normal;
}

 
#send {
    display: grid;
    margin: auto;
    max-width: 250px;
}

.button {
    font-size: 15px !important;
    padding: 9px 22px !important;
}

.button:hover, 
#send:hover,
.button:focus {    
  font-weight: 500;
  background-color: #453bd7;
  opacity:0.6;
}

@media (max-width: 900px) {
      #por-que-sesame .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        overflow: overlay;
        display: flex;
        padding:0px 1rem;
    }
     #por-que-sesame .grid-item {
        display: grid;
        justify-items: left;
        gap: 10px;
        flex: 0 0 auto;
        max-width: 250px;
       margin-bottom:30px;
    }
     #por-que-sesame {
        padding: 0rem 0rem;
    }
  }
  
  ::-webkit-scrollbar {
    display: none; /* Para navegadores basados en WebKit (Chrome, Safari) */
}
  #por-que-sesame .title {
    text-align: start;
    font-size: 1.5rem;
  }
}

@media (max-width: 670px) {

  #por-que-sesame .grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
    max-width: 350px;

  }
  #por-que-sesame .grid-item {
    display: grid;
    justify-items: center;
    gap: 10px;
  }
  #por-que-sesame .title {
    text-align: center;
    font-size: 1.2rem;
  }
}

/*Background image */

#background-image-content h2 {
  margin-bottom: 1.5rem;
}

#background-image-content p {
  text-align: center;
}

#background-image-content .content {
  padding: 5rem 1rem;
  max-width: 1280px;
  margin: auto;
}

#background-image-content {
  margin: 1rem auto;
}

/*Cuenta con una sola herramienta*/

#una-sola-herramienta {
  margin: 4rem auto;
}

#una-sola-herramienta  h2 {
  padding: 0px 1rem;
  max-width: 650px;
  margin: auto;
}

#una-sola-herramienta .grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  max-width: 1280px;
  margin: 4rem auto 0rem auto;
  gap: 10px;
  padding: 1rem;
}

#una-sola-herramienta .title {
  color: #2c2c51;
  font-size: 30px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
}

@media (max-width: 900px) {

  #una-sola-herramienta .title {
    text-align: center;
    font-size: 1.2rem;
  }
}

@media (max-width: 700px) {
  #una-sola-herramienta .scroll-overflow-mv {
    display: flex!important;
    overflow: auto;
    gap: 25px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    margin-top: 3rem;
    align-items: stretch;
  }

  #una-sola-herramienta .scroll-overflow-mv div {
    flex: 0 0 auto;   
  }

  #una-sola-herramienta .scroll-overflow-mv img {
    max-width:300px!important;
  }
}

/*Precios adaptados*/

#precios-adaptados {
  padding: 3rem 1rem;
}

#precios-adaptados .price-container {
  display: grid;
  justify-items: start;
}

.price-text {
  color: #8b92aa;
  font-size: 30px;
  line-height: 24px;
  text-align: right;
  font-weight: 800;
}

.price {
  color: #fff;
  font-size: 90px;
  line-height: 117px;
  font-weight: 800;
}

.dias-prueba {
  color: #fff;
  font-size: 24px;
  margin: 0;
  font-weight:bold;
  margin-bottom:10px;
}

.info-text  li {
  color: #fff;
  font-size: 20px;
  padding: 10px 0;
}

.grid-2 {
  max-width: 800px;
  margin: 5rem auto;
}


.price-container {
  display: grid;
  justify-items: center;
}

@media (max-width: 670px) {
  .price {
    color: #fff;
    font-size: 4rem !important;
    line-height: 117px !important;
    font-weight: 800;
  }
}

/*Contenido más video*/

#texto-video {
  max-width:1280px;
  margin:3rem auto;
  padding: 0px 1rem;
}

#texto-video h2 {
  color: #6c63ff;
}

#texto-video .contenido {
  padding: 0rem 0px 2rem 0px;
} 

#texto-video .video {
  max-width:700px;
  margin: auto;
}

/*Lista numerica*/

#lista-numerica {
  max-width:1280px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
  padding: 1rem;
}

#lista-numerica h3 {
  color: #1f2d52;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  margin: 20px 0 0;
}

#lista-numerica .number {
  color: #1f2d52;
  display: inline-block;
  font-size: 60px;
  font-weight: 700;
  line-height: 67px;
  margin-bottom: 25px;
  position: relative;
  width: 100%;
}

#lista-numerica .number:after {
  background: #6c63f9;
  bottom: -20px;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  width: 200px;
  max-width:100%;
}

@media (max-width: 1000px) {
  #lista-numerica {
    overflow: auto;
    scrollbar-width: none;
  }
  #lista-numerica .list-element {
    background: #ffffff;
    margin: 10px;
    object-fit: contain;
    padding: 21px 30px;
    width: 100%;
    align-items: center;
    border-radius: 19px;
    filter: drop-shadow(0 0px 5px rgba(0, 0, 0, .204));
    min-width: 250px;
  }
  #lista-numerica .number {
    font-size: 50px !important;
    width: 100%;
    margin-top: 17px;
    margin-bottom: 0px;
  }
  #lista-numerica .number:after {
    bottom: -5px;
  }
}

@media (max-width: 800px) {
  #lista-numerica .number:after {
    bottom: -9px;
  }
}

@media (max-width: 670px) {
  #lista-numerica .number:after {
    bottom: -25px;
  }
}

/*Slider banner container*/


@media (max-width: 800px) {
  .slider-banner-container {
    margin: 1rem;
}
  div#tns2-item0 {
    padding: 1.5rem 1rem;
}
}


/*Footer*/

.footer-container-wrapper {
    margin-top: 3rem;
}

div#generic-footer {
  background-color: #1f2d52;
  color: white;
  margin-top: 4rem;
}

div#generic-footer a {
  color: white;
}

div#generic-footer a:hover {
  text-decoration-line: underline;
}

#generic-footer ul {
  display: flex;
  justify-content: center;
}

@media (max-width: 800px) {
  #generic-footer ul {
    column-gap: 20px;
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 2rem 0px;
  }
  h2 {
    font-size: 2.3rem;
  }
  .footer-container-wrapper {
    margin-top: 1rem;
}
}

/*Header content center*/
.header-content-center {
    display: grid;
    justify-items: center;
    max-width: 700px;
    margin: auto;
    text-align:center;
}

.header-content-center h1 {
    margin-top: 10px;
    margin-bottom: 15px;
}

.boton-group-header-center {
    display: flex;
    gap: 20px;
}

b {
    font-weight: bold;
}

@media only screen and (max-width: 800px) {
  .boton-group-header-center .button {
    margin: 7px;
}
  .boton-group-header-center {
    display: grid;
    gap: 0px;
}
}

/*Center Card Image*/
.center-card-image {
    display: grid;
    justify-content: center;
    justify-items: center;
    margin: 4rem auto;
    max-width: 800px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    border-radius: 20px;
}

.center-card-image h2 {
    margin-bottom: 0px;
    font-size: 1.8rem;
}

@media only screen and (max-width: 800px) {
  .center-card-image {
    margin: 3rem 1rem 2rem 1rem;
}
}

.opacity-0 {
  opacity:0;
  transition:1s;
}

.opacity-1 {
  opacity:1;
  transition:1s;
}

.slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;	

  animation-duration: 1s;	
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;	
  -webkit-animation-timing-function: ease-in-out;		

  visibility: visible !important;	
}

@keyframes slideLeft {
  0% {
    transform: translateX(100%);
  }
  		
  100% {
    transform: translateX(0%);
  }
}

@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(100%);
  }
 		
  100% {
    -webkit-transform: translateX(0%);
  }
}
 
.slideRight{
  animation-name: slideRight;
  -webkit-animation-name: slideRight;	

  animation-duration: 1s;	
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;	
  -webkit-animation-timing-function: ease-in-out;		

  visibility: visible !important;	
}

@keyframes slideRight {
  0% {
    transform: translateX(-100%);
  }
  	
  100% {
    transform: translateX(0%);
  }	
}

@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(-100%);
  }
 		
  100% {
    -webkit-transform: translateX(0%);
  }
}

/*
==============================================
fadeIn
==============================================
*/

.fadeIn{
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;	

  animation-duration: 1s;	
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;	
  -webkit-animation-timing-function: ease-in-out;		

  visibility: visible !important;	
}

@keyframes fadeIn {
  0% {
    transform: scale(0);
    opacity: 0.0;		
  }
  100% {
    transform: scale(1);
    opacity: 1;	
  }		
}

@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;		
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;	
  }		
}