/* menú principal: */
.offcanvas-active #sp-header-dominion #sp-menu-dominion .sp-column .boton-menu{background:none !important;}
.offcanvas-menu .offcanvas-inner .sp-module-content ul.menu li.menu-parent-open > ul{display:flex !important;}
.offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent .menu-toggler{ color: inherit;width:100%;height:100%;}
.offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent > ul.menu-child > li.menu-parent > ul.menu-child > li > a > .menu-toggler{ display: none;}
.offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent > ul.menu-child > li.menu-parent > ul.menu-child > li > a > .menu-toggler:after{right:0;position:absolute;top:2px; color: inherit; content: "\f054"; font-family: "Font Awesome 5 Free"; font-size: 15px; font-weight: 600 ; }
.offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent > ul.menu-child > li.menu-parent > ul.menu-child > li:first-child > a > .menu-toggler:after{ display: none; }
.offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent > ul.menu-child > li.menu-parent > ul.menu-child > li > ul.menu-child{ margin-top: 30px; }
.offcanvas-menu .close-offcanvas{ background: url(../images/cerrar.svg) transparent center center;
                                                          border-radius:100%;
                                                          -webkit-box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.2);
                                                             -moz-box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.2);
                                                                  box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.2);
                                                           height:70px; right:0 !important; top:60px; width:70px;  z-index: 999;                                                  
  -webkit-transition: -webkit-transform .4s ease-in-out;
          transition:transform .4s ease-in-out;}
.offcanvas-menu .close-offcanvas:hover{  -webkit-transform: rotate(90deg);transform: rotate(90deg);}
.offcanvas-menu .close-offcanvas span{display:none;}
.offcanvas-menu .offcanvas-inner .sp-module-content ul.menu-child{left:0;}

@media (min-width: 20px) and (max-width:768px){
  
  /* MENÚ */
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module:last-child .sp-module-content ul.menu{ display: flex; flex-wrap: wrap; padding: 24px 80px 45px; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module:last-child .sp-module-content ul.menu > li{ flex: 0 0 20%; margin: 0; max-width: 20%; padding: 0; width: 20%; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module:last-child .sp-module-content ul.menu > li > a{ color: #141414; font-size: 14px; font-weight: 400; text-transform: uppercase; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent > a,
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent > span { display: block; }
  
  /* MENÚ NIVEL DOS */
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li:first-child > a{ font-weight: 500; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li:not(first-child) > a,
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li:first-child > .nav-header{ display: block; font-weight: 400; }

  /* MENÚ NIVEL TRES */
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > ul.menu-child > li > a{ color: #FFF; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > ul.menu-child > li:first-child > a{ font-weight: 500; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > ul.menu-child > li:not(first-child) > a{ display: block; font-weight: 400; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > ul.menu-child > li:not(first-child) > a > span.menu-toggler:after{ content: url(../images/derecha.svg); right: 6px; transform: rotate(90deg); }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > a,
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > .nav-header{ color: #669efb; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > a > span.menu-toggler:after,
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > .nav-header > span.menu-toggler:after{ content: url(../images/derecha_azul.png); right: 6px; transform: rotate(-90deg); }

  /* MENÚ NIVEL CUATRO */
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > ul.menu-child > li > a{ color: #FFF; }
}
@media (max-width:330px){
  body.offcanvas-active .offcanvas-menu{ background-color: #FFF; overflow: visible; padding-right: 0; width:270px; }
  /* MARGIN / PADDING LEFT */
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu{ padding: 0px 25px; width: 220px; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child{ margin: 30px 0 0 15px; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent.menu-parent-open > ul.menu-child{ background-color: #0355dd; margin: 30px -25px 0px -40px; padding: 30px 0 12px; }

  /* VISIBILIDAD de la OPCIÓN ABIERTA */
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu{ overflow: visible; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open{ overflow: visible; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent-open{ overflow: visible; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent-open > ul.menu-child{ width: 270px; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent.menu-parent-open > ul.menu-child > li.menu-parent-open > ul.menu-child >li{ padding: 0 40px; }

  /* SEARCH ÁREA */
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module:nth-child(2) .sp-module-content{ padding: 50px 25px; }

  /* LANGUAJE ÁREA */
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module:nth-child(4) .sp-module-content .lang-inline{ padding: 0 0px 0 25px; }

}
@media (min-width: 769px){
/**/ body.offcanvas-active .offcanvas-menu{ background:none; width:auto; }
  body.offcanvas-active .offcanvas-menu{ color:#fff; }
  body.offcanvas-active .offcanvas-menu .offcanvas-inner .sp-module-content ul.menu > li.menu-parent > span.nav-header{ color:#fff; }
}
@media (min-width: 769px) and (max-width:1279px){  
  body.offcanvas-active .offcanvas-menu{ overflow: visible; }
}
@media (min-width: 1280px){

  body.offcanvas-active .offcanvas-menu{ overflow: visible; }
  
}