/* -- The root styles must go in the element of the structure with the name "Toggle". --*/

/* Change to white when the hamburger menu is activated */
.header-8__toggle-menu.brxe-toggle.is-active .brxa-inner{
  color: var(--light);

  &:before, &:after{
    color: var(--light);
  }
}

Tagline

La vida es mejor conectados

Sabemos que la mejor manera de conectarnos es en círculos. En Círculos Vida es dónde la fe crece y se profundiza porque se pone en práctica.

/* -- The root styles must go in the element of the structure with the name "List". --*/

.hero-83__list{
  /* Update these variables with the background color and border radius variables you are using. */
  --radius-value: var(--radius-xl);
  --color-background: var(--light);
  
  &:before{
    content: '';
    width: calc(2 * var(--radius-value));
    height: calc(2 * var(--radius-value));
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    transform: translateY(-100%);
    border-radius: 50%;
    box-shadow: calc(-1 * var(--radius-value)) var(--radius-value) var(--color-background);
  }
  
  &:after{
    content: '';
    width: calc(2 * var(--radius-value));
    height: calc(2 * var(--radius-value));
    background-color: transparent;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    transform: translateX(100%);
    border-radius: 50%;
    box-shadow: calc(-1 * var(--radius-value)) var(--radius-value) var(--color-background);
  }
}

Tagline

Recursos para ayudar a todo líder servir.

Este sitio web es un recurso de liderazgo desarrollado pensando en ti, el líder del círculo. Sabemos que liderar un círculo puede ser un desafío, por eso creamos este sitio web para ayudarte.

  • Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    • +4

  • Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

  • Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

/* -- The root styles must go in the element of the structure with the name "Content". --*/

.content-74{
  /* Update these variables with the background color and border radius variables you are using. */
  --radius-value: var(--radius-xl);
  --color-background: var(--light);

  /* Inverted border styles to Icon link wrapper */
  .card-content-74__link-wrapper, .card-content-74-feature__link-wrapper{
    &:before{
      content: '';
      width: calc(2 * var(--radius-value));
      height: calc(2 * var(--radius-value));
      background-color: transparent;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      transform: translateX(-100%);
      border-radius: 50%;
      box-shadow: var(--radius-value) var(--radius-value) var(--color-background);
      z-index: -1;
    }

    &:after{
      content: '';
      width: calc(2 * var(--radius-value));
      height: calc(2 * var(--radius-value));
      background-color: transparent;
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      transform: translateY(-100%);
      border-radius: 50%;
      box-shadow: var(--radius-value) var(--radius-value) var(--color-background);
      z-index: -1;
    }
  }
  
  /* Styles applied to all elements except the first one */
    .card-content-74-feature__avatar-wrapper:not(:first-child) {
      margin-left: -1rem;
    }
}