/*
Theme Name: Greenola Child
Template: greenola
Text Domain: greenola
Version: 1.0
*/

/* Tus estilos debajo */
#premios {
  position: relative; 
  z-index: 10; 
}

#premios::before {
  content: "";
  position: absolute;
  top: -400px; 
  left: 1500px;
  width: min(400px, 26vw);
  aspect-ratio: 1 / 1;
  background: url("/wp-content/uploads/2025/08/Aguacate-dendro-2.png") no-repeat center;
  background-size: contain;
  pointer-events: none;
  z-index: 1000;
  transform: rotate(10deg);
}

.pxl-item--description {
  padding-left: 15px !important;
}

.fondo-negro {
  background-color: black !important;
}
.pxl-item--image.elementor-repeater-item-a263f06 {
  display: none !important;
}

.pxl-breadcrumb-wrap{
	display: none !important;
}




/* ====== GRID DE CARDS ====== */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* siempre 3 columnas en escritorio */
  gap: 24px;
  margin-top: 40px;
}

/* ====== CARD ====== */
.post-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 120, 100, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 120, 100, 0.15);
}

.post-card .thumb img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}

.post-card .card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ====== TITULO ====== */
.post-card .title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

.post-card .title a {
  color: #212529;
  text-decoration: none;
  transition: color 0.2s ease;
}

.post-card .title a:hover {
  color: #007864; /* verde corporativo */
}

/* ====== FECHA ====== */
.post-card .date {
  display: inline-block;
  font-size: 0.85rem;
  color: #007864; /* verde corporativo */
  margin: 6px 0 10px;
  text-transform: uppercase;
  font-weight: 500;
}

/* ====== EXTRACTO ====== */
.post-card .excerpt {
  color: #495057;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 4px 0 12px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ====== BOTÓN LEER MÁS ====== */
.post-card .more {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 20px;
  background: #007864; /* verde corporativo */
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease;
}

.post-card .more:hover {
  background: #004c3e; /* un verde aún más oscuro en hover */
}

/* ====== PAGINACIÓN ====== */
.pagination {
  margin: 60px 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #007864;
  color: #007864;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.pagination .page-numbers:hover {
  background: #007864;
  color: #fff;
}

.pagination .page-numbers.current {
  background: #007864;
  color: #fff;
  font-weight: bold;
}

/* ====== RESPONSIVE ====== */

/* Tablets: 2 columnas */
@media (max-width: 991px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .post-card .title {
    font-size: 1.15rem;
  }
}

/* Móviles: 1 columna */
@media (max-width: 600px) {
  .posts-grid {
    grid-template-columns: 1fr;
  }
  .post-card .title {
    font-size: 1.05rem;
  }
  .post-card .excerpt {
    font-size: 0.9rem;
  }
}






/*RESPONSIVE*/

/* Ocultar imágenes decorativas (manzana) en móvil */
/* Ocultar la manzana hasta 1366px (móvil + la mayoría de portátiles) */
@media (max-width: 1550px) {
  /* Fondos habituales del contenedor */
  .elementor-element.manzana,
  .elementor-element.manzana > .e-con-inner,
  .elementor-element.manzana::before,
  .elementor-element.manzana::after,
  .elementor-element.manzana > .elementor-background-overlay,
  .elementor-element.manzana .elementor-background-overlay,
  .elementor-element.manzana .elementor-motion-effects-container,
  .elementor-element.manzana .elementor-motion-effects-layer {
    background: none !important;
    background-image: none !important;
  }

  /* Si Elementor la inyecta inline (style="background…") */
  .elementor-element.manzana[style*="background"],
  .elementor-element.manzana > .e-con-inner[style*="background"],
  .elementor-element.manzana *[style*="background-image"],
  .elementor-element.manzana *[style*="background: url"] {
    background: none !important;
    background-image: none !important;
  }

  /* Si es slideshow de fondo */
  .elementor-element.manzana .elementor-background-slideshow,
  .elementor-element.manzana .elementor-background-slideshow__slide,
  .elementor-element.manzana img.elementor-background-slideshow__image {
    display: none !important;
    background: none !important;
    background-image: none !important;
  }
}

/* 1805px → 1331px: quitar margen izquierdo del formulario (sigue en fila) */
@media (max-width: 1805px) and (min-width: 1331px) {
  .elementor-element.formulario-inicio {
    margin-left: 0 !important;
  }
}

/* ≤1330px: apilar y CENTRAR SIEMPRE el formulario */
@media (max-width: 1330px){
  /* Contenedor de ambas columnas */
  .elementor-element-e929132 .e-con-inner{
    display: flex !important;
    flex-direction: column !important;     /* apilados */
    gap: 40px !important;
    align-items: center !important;        /* centra hijos en eje cruzado */
    justify-content: flex-start !important;
  }

  /* Cada bloque ocupa todo el ancho disponible hasta un máximo cómodo */
  .elementor-element-e929132 .elementor-element-8207d9b,
  .elementor-element-e929132 .elementor-element-5f57566{
    width: 100% !important;
    max-width: min(100%, 980px) !important;   /* evita que se estire raro */
    flex: 0 0 auto !important;
  }

  /* Orden correcto */
  .elementor-element-e929132 .elementor-element-8207d9b{ order: 1 !important; }
  .elementor-element-e929132 .elementor-element-5f57566{ order: 2 !important; }

  /* FORZAR centrado del formulario y aire */
  .elementor-element-5f57566{
    margin: 60px auto !important;     /* mismo aire arriba y abajo */
    padding: 0 40px !important;       /* aire a los lados */
    align-self: center !important;    /* ignora alineaciones heredadas */
    float: none !important;
    display: block !important;
    clear: both !important;
  }

  /* Por si Elementor/tema le mete auto-alineados a la derecha */
  .elementor-element-5f57566,
  .elementor-element-5f57566 *{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ≤767px: asegurar que mantiene los mismos márgenes simétricos */
@media (max-width: 767px){
  .elementor-element-5f57566{
    margin: 60px auto !important;   /* mismo aire arriba/abajo que en tablet */
    padding: 0 30px !important;     /* un poco menos de lateral para móvil */
  }
}




/* Ocultar la PERA como fondo hasta 1550px (móvil + portátil) */
@media (max-width: 1550px) {
  /* Pon esta clase al contenedor que tiene la pera en Elementor */
  .elementor-element.pera,
  .elementor-element.pera > .e-con-inner,
  .elementor-element.pera::before,
  .elementor-element.pera::after,
  .elementor-element.pera > .elementor-background-overlay,
  .elementor-element.pera .elementor-background-overlay,
  .elementor-element.pera .elementor-motion-effects-container,
  .elementor-element.pera .elementor-motion-effects-layer {
    background: none !important;
    background-image: none !important;
  }

  /* Si Elementor la mete inline como estilo */
  .elementor-element.pera[style*="background"],
  .elementor-element.pera > .e-con-inner[style*="background"],
  .elementor-element.pera *[style*="background-image"],
  .elementor-element.pera *[style*="background: url"] {
    background: none !important;
    background-image: none !important;
  }

  /* Si la “pera” es un slideshow de fondo */
  .elementor-element.pera .elementor-background-slideshow,
  .elementor-element.pera .elementor-background-slideshow__slide,
  .elementor-element.pera img.elementor-background-slideshow__image {
    display: none !important;
  }
}


/* Márgenes laterales y verticales en móvil */
@media (max-width: 768px) {
  .elementor-element[data-id="5f57566"] {
    margin: 0px 16px 80px 16px;  /* arriba 12px, laterales 16px, abajo 68px */
    padding: 16px 12px;
  }

  .wpcf7-form {
    padding: 12px;
    border-radius: 8px;  /* opcional: bordes redondeados */
  }

  .wpcf7-form input,
  .wpcf7-form textarea {
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 768px) {
  .titulo-premios h2 {
    font-size: 2rem;       /* más compacto en móvil */
  }
}
@media (max-width: 767px){
  .hero-diag-text.fade-up.delay-0.show {
    margin-top: -7rem !important;
  }
}
@media (max-width: 768px) {
  .bloque-frutas .e-con-inner > .e-con-full {
    flex: 1 1 calc(50% - 16px);
    max-width: calc(50% - 16px);
  }
}

@media (max-width: 768px) {
  .elementor-element[data-id="be1ac88"] {
    padding: 40px 20px !important;  /* arriba/abajo 40px, laterales 20px */
  }
}

/* Ajuste del bloque de vídeo en móvil */
@media (max-width: 768px) {
  .elementor-element[data-id="ed63448"].bloque-video {
    padding: 100px 16px 24px !important; /* arriba 40px, laterales 16px, abajo 24px */
    margin: 0 !important;
    box-sizing: border-box;
  }

  .elementor-element[data-id="ed63448"].bloque-video .elementor-video {
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 767px) {
    .home-video {
        position: relative !important;
        padding: 0 !important;
        background: white !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        min-height: 0 !important;
    }
}
   body:not(.rtl) .elementor-9504 .elementor-element.elementor-element-9881f97 {
                left: 0px !important;
            }

//* === Formulario Agerpix — base === */
.form-agerpix {
  display:flex !important; flex-direction:column !important; gap:18px !important;
  width:100% !important; max-width:900px !important; padding:0 40px !important; box-sizing:border-box !important; margin:0 auto !important;
}
.form-agerpix .form-grid {
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:18px !important; width:100% !important; max-width:100% !important;
}
.form-agerpix label.field {
  display:flex !important; flex-direction:column !important; gap:6px !important;
  font-size:.95rem !important; color:#333 !important; font-weight:500 !important; min-width:0 !important;
}
.form-agerpix .form-grid .wide-row {
  grid-column:1 / 3 !important; width:100% !important; max-width:100% !important; min-width:0 !important; display:flex !important; flex-direction:column !important;
}
.form-agerpix .form-grid .wide-row label {
  width:100% !important; max-width:100% !important; display:flex !important; flex-direction:column !important; gap:6px !important; color:#333 !important; font-size:.95rem !important; font-weight:500 !important;
}

/* Campos */
.form-agerpix .form-input,
.form-agerpix .form-textarea,
.form-agerpix textarea {
  width:100% !important; max-width:100% !important; min-width:0 !important;
  padding:12px 14px !important; border:none !important; border-radius:8px !important;
  background:#f3f4f6 !important; color:#111 !important; font-size:1rem !important;
  box-sizing:border-box !important; transition:background-color .2s, box-shadow .2s !important;
  display:block !important; resize:vertical !important;
}
.form-agerpix textarea[cols]{ width:100% !important; }
.form-agerpix .form-input:focus,
.form-agerpix .form-textarea:focus,
.form-agerpix textarea:focus {
  background:#e8f5f2 !important; box-shadow:0 0 0 3px rgba(0,120,100,.15) !important; outline:none !important;
}

/* Color de texto y placeholder (forzado) */
.form-agerpix .form-input,
.form-agerpix .form-textarea,
.form-agerpix textarea { color:#111 !important; }
.form-agerpix .form-input::placeholder,
.form-agerpix .form-textarea::placeholder,
.form-agerpix textarea::placeholder { color:#666 !important; opacity:1 !important; }

/* (Opcional) file custom */
.file-wrap { display:flex !important; align-items:center !important; gap:12px !important; flex-wrap:wrap !important; }
.file-btn{
  background:#007864 !important; color:#fff !important; border:none !important; padding:10px 16px !important;
  border-radius:6px !important; cursor:pointer !important; font-size:.95rem !important; font-weight:500 !important; transition:background-color .2s !important;
}
.file-btn:hover{ background:#006b59 !important; }
.file-name{ font-size:.9rem !important; color:#555 !important; }

/* Estados de validación por campo */
.form-agerpix .wpcf7-not-valid-tip{ margin-top:20px !important; font-size:.7rem !important; color:#c0392b !important; padding-left:10px !important;
}
.form-agerpix .wpcf7-form-control.wpcf7-not-valid{ box-shadow:0 0 0 3px rgba(192,57,43,.15) !important; background:#fff5f5 !important; }

/* Botón enviar */
.form-agerpix .form-btn{
  background:#007864 !important; color:#fff !important; border:none !important; padding:12px 24px !important; border-radius:8px !important; cursor:pointer !important;
  font-size:1rem !important; font-weight:600 !important; transition:background-color .2s, transform .1s !important;
  align-self:flex-start !important;
}
.form-agerpix .form-btn:hover{ background:#006b59 !important; }
.form-agerpix .form-btn:active{ transform:translateY(1px) !important; }

/* ===== CF7: que el <form> centre sus hijos (formulario y mensaje) ===== */
.wpcf7 form{
  display:grid !important;
}
.wpcf7 form > .form-agerpix,
.wpcf7 form > .wpcf7-response-output{
  justify-self:center !important;   /* ambos comparten el mismo eje central */
  width:100% !important;
  max-width:900px !important;
}

/* ===== Mensajes globales CF7 ===== */
.wpcf7 form .wpcf7-response-output { display:none !important; }
.wpcf7 form.sent    .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed  .wpcf7-response-output,
.wpcf7 form.spam    .wpcf7-response-output { display:block !important; }

/* Estilo del mensaje (alineado exactamente con los campos) */
.wpcf7 form > .wpcf7-response-output{
  margin:20px 0 !important;
  padding:16px 40px !important;      /* mismo padding lateral que el form */
  box-sizing:border-box !important;
  border-radius:8px !important;
  font-weight:600 !important;
  font-size:1rem !important;
  text-align:center !important;
  box-shadow:0 2px 6px rgba(0,0,0,.05) !important;
}

/* Éxito */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
  background:#e6f9f0 !important; border:2px solid #007864 !important; color:#007864 !important;
}

/* Errores */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed  .wpcf7-response-output,
.wpcf7 form.spam    .wpcf7-response-output,
.wpcf7 .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7 .wpcf7-response-output.wpcf7-spam-blocked {
  background:#ffecec !important; border:2px solid #c0392b !important; color:#c0392b !important;
}

/* === 1 columna en móvil/tablet + mismo padding del mensaje === */
@media (max-width: 1024px) {
  .form-agerpix .form-grid { grid-template-columns: 1fr !important; }
  .form-agerpix .form-grid > label.field,
  .form-agerpix .form-grid > .wide-row { grid-column: 1 / -1 !important; }
  .form-agerpix { padding: 0 20px !important; }
  .wpcf7 form > .wpcf7-response-output{ padding:12px 20px !important; }
}
#comments{display:none !important;
}


@media (min-width: 1514px){
  .pxl-menu-primary .menu-item-10931,
  .pxl-menu-primary #menu-item-10931,
  #menu-menutop-1 .menu-item-10931,
  #menu-menutop-1 #menu-item-10931{display:none!important;}
  .elementor-sticky--active .pxl-menu-primary,
  .elementor-sticky--effects .pxl-menu-primary{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:24px!important;margin:0!important;padding:0!important;}
  .elementor-sticky--active .pxl-menu-primary>li,
  .elementor-sticky--effects .pxl-menu-primary>li{white-space:nowrap!important;margin:0!important;border-bottom:none!important;}
  .elementor-sticky--active .pxl-nav-menu,
  .elementor-sticky--effects .pxl-nav-menu{height:auto!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important;}
}

@media (max-width: 1512px){
  .pxl-menu-primary .menu-item-10931,
  .pxl-menu-primary #menu-item-10931,
  #menu-menutop-1 .menu-item-10931,
  #menu-menutop-1 #menu-item-10931,
  .elementor-sticky--active .pxl-menu-primary .menu-item-10931,
  .elementor-sticky--effects .pxl-menu-primary .menu-item-10931{
		display:list-item!important;
	}

  .pxl-menu-primary li.menu-item-10931{
		border-bottom:none!important;
		overflow:visible!important;
	}

  .pxl-menu-primary li.menu-item-10931>a{
    line-height:normal!important;
		border-bottom:none!important;
		display:flex!important;
		align-items:center;
		gap:10px;
    padding:12px 18px!important;
		background:#fff!important;
		border:2px solid #007864!important;
		border-radius:8px;
    font-weight:700;
		font-size:16px;
		color:#007864!important;
		text-decoration:none!important;
  }
  .pxl-menu-primary li.menu-item-10931>a::before{
    content:"";
		width:22px;
		height:22px;
		background:url('/wp-content/uploads/2025/08/unnamed.webp') no-repeat center center;
    background-size:contain;
		display:inline-block;
		flex:0 0 22px;
  }
  .pxl-menu-primary li.menu-item-10931>a:hover{
		background:#007864!important;
		color:#fff!important;}
}

@media screen and (max-width: 1513px) {
    #pxl-header-elementor #pxl-header-mobile {
        display: block;
        position: relative;
        z-index: 999;
    }
	#pxl-header-elementor .pxl-header-elementor-main, #pxl-header-elementor .pxl-header-elementor-sticky {
        display: none;
    }
	  .pxl-header-menu.active {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateX(0%);
        -khtml-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
	    .pxl-header-menu {
        position: fixed;
        height: 100vh;
        width: 300px;
        top: 0;
        left: 0;
        bottom: 0;
        margin: 0;
        overflow: hidden;
        z-index: 999;
        -webkit-transition: all 0.25s 
cubic-bezier(0.645, 0.045, 0.355, 1);
        -khtml-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        -ms-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.25s 
cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transform: translateX(-100%);
        -khtml-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
        visibility: hidden;
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
        -khtml-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
        -ms-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
        -o-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
        background-color: #fff;
        overflow-y: scroll;
    }
	.pxl-header-menu-scroll {
        padding: 40px 35px;
    }
	    .pxl-menu-close {
        background-color: rgba(0, 0, 0, 0.03);
        position: absolute;
        top: 0;
        right: 0;
        -webkit-border-radius: 0px;
        -khtml-border-radius: 0px;
        -moz-border-radius: 0px;
        -ms-border-radius: 0px;
        -o-border-radius: 0px;
        border-radius: 0px;
    }
	.pxl-logo-mobile {
        margin-bottom: 35px;
    }
	    .pxl-logo-mobile .pxl-logo--light {
        display: none;
    }
	    .pxl-menu-primary {
        list-style: none;
        margin: 0;
        padding: 0;
    }
	    .pxl-menu-primary li.menu-item, .pxl-menu-primary li.pxl-item--link {
        position: relative;
    }
	.pxl-menu-primary li.menu-item > a:hover, .pxl-menu-primary li.pxl-item--link > a:hover, .pxl-menu-primary li.menu-item > a.current, .pxl-menu-primary li.pxl-item--link > a.current, .pxl-menu-primary li.menu-item.current_page_item > a, .pxl-menu-primary li.pxl-item--link.current_page_item > a, .pxl-menu-primary li.menu-item.current-menu-item > a, .pxl-menu-primary li.pxl-item--link.current-menu-item > a, .pxl-menu-primary li.menu-item.current_page_ancestor > a, .pxl-menu-primary li.pxl-item--link.current_page_ancestor > a, .pxl-menu-primary li.menu-item.current-menu-ancestor > a, .pxl-menu-primary li.pxl-item--link.current-menu-ancestor > a {
        color: var(--primary-color);
    }
	.pxl-menu-primary li.menu-item > a, .pxl-menu-primary li.pxl-item--link > a {
        display: block;
        line-height: 46px;
        color: #000;
        font-size: 15px;
        font-weight: 700;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
	.pxl-menu-primary .sub-menu, .pxl-menu-primary .children {
        position: relative;
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
    }
	.pxl-menu-primary .sub-menu li a, .pxl-menu-primary .children li a {
        font-weight: 500;
        padding-left: 14px;
    }
	.pxl-menu-toggle {
        position: absolute;
        top: 10px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        right: 0px;
        width: 28px;
        cursor: pointer;
        font-size: 10px;
        -webkit-transition: all 0.25s 
cubic-bezier(0.645, 0.045, 0.355, 1);
        -khtml-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        -ms-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.25s 
cubic-bezier(0.645, 0.045, 0.355, 1);
        color: #1b1b1b;
        -webkit-border-radius: 3px;
        -khtml-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        background-color: rgba(0, 0, 0, 0.03);
    }
	#pxl-header-default #pxl-nav-mobile, #pxl-header-elementor #pxl-nav-mobile {
        display: block;
        position: absolute;
        top: 50%;
        right: 15px;
        -webkit-transform: translate(0, -50%);
        -khtml-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%);
        display: flex
;
        flex-wrap: wrap;
        align-items: center;
	}
	.pxl-header-menu-backdrop {
        z-index: 998;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        -webkit-transition: all 0.25s 
cubic-bezier(0.645, 0.045, 0.355, 1);
        -khtml-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        -ms-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.25s 
cubic-bezier(0.645, 0.045, 0.355, 1);
        opacity: 0;
		visibility: hidden;
	}
	.pxl-header-menu.active + .pxl-header-menu-backdrop {
        opacity: 1;
        visibility: visible;
    }
	.pxl-menu-toggle:before {
        content: "\f150";
        font-family: "Caseicon";
    }
	#pxl-header-default .pxl-header-branding, #pxl-header-elementor .pxl-header-branding {
        margin: 15px;
        min-height: 50px;
        align-items: center;
        display: flex;
    }
}
@media screen and (min-width: 1201px) {
    .pxl-hide-xl {
        display: block !important;
    }
    .pxl-menu-toggle {
        display: block;
    }
.pxl-menu-primary > li {
        margin: 0;
        display: block;
    }
}
@media screen and (min-width: 1514px) {
    .pxl-hide-xl {
        display: none !important;
    }
	.pxl-menu-toggle {
        display: none;
    }
	.pxl-menu-primary > li {
        display: inline-block;
        vertical-align: middle;
        margin: 0 12px;
    }
	.pxl-menu-primary > li:first-child {
        margin-left: 0 !important;
    }
}