/* Add your css code here */
.w3-button {
  font-size: xxx-large;
  background-color: #657450;
  font-weight: bold;
  color: #FFFFFF;
}
.w3-button:hover {
   background-color:#FFFFFF;
   color: #657450;
   transition: 0.7s;
 }
.main-navigation-wrapper {
  background-color: #657450;
}
#header {
  background-color: #FFFFFF;
}

.site-logo {
  margin: 0px;
  max-width: 240px;
  width: auto;
  height: auto;
  display: inline-block;
}

.site-logo img {
  max-width: 240px;
  width: 100%;
  height: auto;
  display: block;
}

.w3-padding-16 {
  padding: 0px;
  margin: 0px;
}
.ul-parent-main {
  padding-left: 10px;
}
/* Add your css code here */
.w3-button {
  font-size: xxx-large;
  background-color: #657450;
  font-weight: bold;
  color: #FFFFFF;
}
/* Make the vertical primary menu hamburger icon visible and larger. */
#open-nav-inner,
#open-nav-inner:hover,
#open-nav-inner:focus {
  opacity: 1;
  visibility: visible;
  color: #000;
  line-height: 1;
}

/* Double the hamburger SVG size from 28px to 56px. */
#open-nav-inner svg {
  width: 56px;
  height: 56px;
}
/* ... existing code ... */

.ui-widget-overlay {
  background-color: rgba(0, 0, 0, 0.75);
}

/**
 * Main page layout with Ofrenda sidebar.
 *
 * Mobile order:
 * 1. Ofrenda right sidebar
 * 2. Content
 * 3. Sidebar second
 *
 * Desktop order:
 * content | Ofrenda right sidebar
 *         | Sidebar second
 */
.pep-main-layout {
  display: grid;
  gap: 1rem;
}

.pep-right-column {
  display: contents;
}

.pep-altar-right-sidebar {
  order: 1;
}

.pep-main-content {
  order: 2;
}

.pep-sidebar-second {
  order: 3;
}

.pep-sidebar-first {
  order: 0;
}

@media screen and (max-width: 991px) {
  .pep-main-layout {
    grid-template-columns: 1fr;
  }

  .pep-main-layout > .main-box,
  .pep-right-column > .main-box {
    width: 100%;
    float: none;
  }
}

@media screen and (min-width: 992px) {
  .pep-main-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }

  .pep-main-layout > .main-box,
  .pep-right-column > .main-box {
    width: auto;
    float: none;
  }

  .pep-main-content {
    grid-column: 1;
    grid-row: 1;
    order: initial;
  }

  .pep-right-column {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    gap: 1rem;
    align-self: start;
  }

  .pep-altar-right-sidebar,
  .pep-sidebar-second {
    order: initial;
  }

  .pep-altar-right-sidebar {
    align-self: stretch;
  }

  .pep-sidebar-second {
    align-self: stretch;
  }

  .pep-sidebar-first {
    grid-column: 1 / -1;
    order: initial;
  }
}