/*Quitar relleno a la seccion sp-main-body*/
#sp-main-body {
    padding: 0 !Important;
}

/*Prevalece la fuente fijada en el editor de la plantilla flex->Fonts->Navigation*/
/*Se ha anulado la fuente de la plantilla flex->Fonts->Navigation (disable)
y se ha obtenido desde el banco de fuentes de google la fuente Open Sans VARIABLE (ttf) y se ha convertido a woff2
y en @font-face definimos las propiedades de esta fuente
Esto se ha tenido que hacer así xq Google ha retirado el estilo Open Sans Condensed*/
@font-face {
  font-family: "Open Sans mpk-variable";
  src: url("/mpk/fonts/OpenSans-VariableFont_wdth_wght.woff2") format("woff2-variations");
  font-stretch: 75% 125%;
  font-weight: 300 600;
  font-style: normal;
}
#sp-menu {
	font-family: "Open Sans mpk-variable";
    font-size: 32px;
    font-weight: 300;
  	font-stretch: 75%;
	font-variation-settings: "wdth" 75, "wght" 300; /*formato nuevo para fuentes variables, se mantienen los clasicos (font-weigth y font-stretch) porsiaca*/
}

.offcanvas-menu {
  	font-family: "Open Sans mpk-variable";
	font-size: 24px;
	font-weight: 300;
  	font-stretch: 75%;
  	font-variation-settings: "wdth" 75, "wght" 300;
}
/*FIN Prevalece la fuente fijada en el editor de la plantilla flex->Fonts->Navigation*/

/*Telefono a la derecha del menu*/
/*Telefono de cabecera pantallas grandes*/
.mpk-tlfno-header {
    font-family: "Open Sans mpk-variable";
    font-size: 22px;
    font-weight: 600;
  	text-align: right;
  	height: 110px;
    line-height: 110px;
  	font-stretch: 75%;
	font-variation-settings: "wdth" 75, "wght" 600; /*formato nuevo para fuentes variables, se mantienen los clasicos (font-weigth y font-stretch) porsiaca*/
  	
}
.sticky .mpk-tlfno-header {
  	height: 80px;
    line-height: 80px;
  }
.mpk-tlfno-header  a[href="tel:943673639"] {
  color: #009900 !Important;
}
.mpk-tlfno-header  a[href="tel:943673639"]:hover {
  color: #00d400 !Important;
}
/*Animacion para el icono del telefono*/
@keyframes AnimaIcoTlfno {
   	0%  {color: transparent;}
	50%   {color: #009900;}
	100%  {color: transparent;}
}
.mpk-tlfno-header  i {
  color: #009900;
  font-weight: 600;
  animation-name: AnimaIcoTlfno;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}


/*Pantallas pequeñas.
Ajuste del tamaño del icono del menu offcanvas para que no se salga de la dimension de la columna*/
@media (max-width: 992px){
  #offcanvas-toggler >i {
      width: 32px; /*antes  width: 90px; */
  }

  .mpk-tlfno-header {
  	font-size: 16px;
  }
  
  #sp-user1 {
    padding-left: 0px !important;
  }
  
}
/*Fin Telefono a la derecha del menu*/



/*Pie contacto*/
#sp-footer1 .sp-contact-info{
  float:left !Important;
}  
/*color y grosor de los iconos de contacto*/
.sp-contact-info li i {
    /*color: #ffffff !important;*/
  	font-weight: 400;
}
  /*Pie micropack*/
#sp-footer2 .sp-copyright {
  float:center !Important;
  font-size:0.8em !important;
}


/*Fijar la seleccion del lenguaje activo*/
.lang-active a {color:#fff !Important;}

/*Fijar altura de la banda donde se fija el conmutador del lenguaje*/
#sp-top-bar, .sp-module .mpk-lenguaje-switcher ul >li >a {line-height: 1.5 !important;}

/*Titulo de las paginas sobre fondo*/
.sp-page-title .container h2[itemprop="headline"] {
	text-shadow: 1px 1px 2px #FFFFFF; /*crear un borde en el texto del titulo*/
  	color: #000000;
  	font-weight: 400;
}
/*Fin titulo de las paginas sobre fondo*/


/*Evitar eventos sobre el logo*/
#sp-logo a.logo {pointer-events: none !important;}

/*popup de cookies y privacidad*/
.fancybox-content {width: 90% !important;}

/*Establecer un espacio horizontal entre columnas de sp pagebuilder de 1px (2px). SPPB solo tiene la opcion del espacio 0 
en la fila (Row) que se quiera implementa hay que añadir la clase mpk-grid-padding-Npx
donde N es el numero de px, esta definido desde 1 a 5 px.
Estas reglas css funcionan tb para filas anidadas (1er nivel) */
.sppb-section.mpk-grid-padding-1px .sppb-row-container .sppb-row>[class*=sppb-col-],
.sppb-section.mpk-grid-padding-1px .sppb-container-inner .sppb-row>[class*=sppb-col-] {
    padding-right: 1px;
    padding-left: 1px;
}
.sppb-section.mpk-grid-padding-2px .sppb-row-container .sppb-row>[class*=sppb-col-],
.sppb-section.mpk-grid-padding-2px .sppb-container-inner .sppb-row>[class*=sppb-col-] {
    padding-right: 2px;
    padding-left: 2px;
}
.sppb-section.mpk-grid-padding-3px .sppb-row-container .sppb-row>[class*=sppb-col-],
.sppb-section.mpk-grid-padding-3px .sppb-container-inner .sppb-row>[class*=sppb-col-] {
    padding-right: 3px;
    padding-left: 3px;
}
.sppb-section.mpk-grid-padding-4px .sppb-row-container .sppb-row>[class*=sppb-col-],
.sppb-section.mpk-grid-padding-4px .sppb-container-inner .sppb-row>[class*=sppb-col-] {
    padding-right: 4px;
    padding-left: 4px;
}
.sppb-section.mpk-grid-padding-5px .sppb-row-container .sppb-row>[class*=sppb-col-],
.sppb-section.mpk-grid-padding-5px .sppb-container-inner .sppb-row>[class*=sppb-col-] {
    padding-right: 5px;
    padding-left: 5px;
}


.sppb-section.mpk-grid-padding-1px .sppb-row-container .sppb-row,
.sppb-section.mpk-grid-padding-2px .sppb-row-container .sppb-row,
.sppb-section.mpk-grid-padding-3px .sppb-row-container .sppb-row,
.sppb-section.mpk-grid-padding-4px .sppb-row-container .sppb-row,
.sppb-section.mpk-grid-padding-5px .sppb-row-container .sppb-row,
.sppb-section.mpk-grid-padding-1px .sppb-container-inner .sppb-row,
.sppb-section.mpk-grid-padding-2px .sppb-container-inner .sppb-row,
.sppb-section.mpk-grid-padding-3px .sppb-container-inner .sppb-row,
.sppb-section.mpk-grid-padding-4px .sppb-container-inner .sppb-row,
.sppb-section.mpk-grid-padding-5px .sppb-container-inner .sppb-row
{
    margin-left: 0;
  	margin-right: 0;
}


/*FIN Establecer un espacio horizontal entre columnas de sp pagebuilder de 1px (2px). SPPB solo tiene la opcion del espacio 0 
en la fila (Row) que se quiera implementa hay que añadir la clase mpk-grid-padding-1px*/

/*Aplicar efecto de alejamiento a los slider de la pag inicial*/
/*.sp-item.active .sp-background {*/
.mpk-image-zoom-out {
  animation-name: zoomout;
  /*el t de presencia del slider es de 9s y la transicion es de 1.5s */
  /*si se aumenta el t es mas lento pero en la transicion hace un guiño feo
  asi queda bien*/
  animation-duration: 10s; 
  animation-timing-function: ease;
}

@keyframes zoomout {
   from {transform: scale(1.1);}
   to {transform: scale(1);}
 }
/*FIN Aplicar efecto de alejamiento a los slider de la pag inicial*/

/*Fijar un margen superior para el componente SPPagePortfolio*/
#sp-simpleportfolio.sp-simpleportfolio.sp-simpleportfolio-view-item,
#sp-simpleportfolio.sp-simpleportfolio.sp-simpleportfolio-view-items{
  margin-top: 30px;
}
/*Fin Fijar un margen superior para el componente SPPagePortfolio*/

/*mostrar el menu offcanvas como una lista vertical*/
.offcanvas-menu .offcanvas-inner .sp-module-content ul.nav{
  display: block !important;
}
/*FIN - mostrar el menu offcanvas como una lista vertical*/