/*
=====================================================================
*   Woo v1.0 Layout Stylesheet
*   url: styleshout.com
*   05-02-2014
=====================================================================

   TOC:
   a. General and Common Styles
   b. Header Styles
   c. Hero Section
   d. Features Section
   e. Pricing Section
   f. Screenshots Section
   g. Call To Action Section
   h. Testimonials Section
   i. Subscribe Section
   j. Footer
   k. lightbox

   todo: check bug in mobile z-index

===================================================================== */

/* ------------------------------------------------------------------ */
/* a. General and Common Styles
/* ------------------------------------------------------------------ */

header .header-social {
   display: block;
}

body { 
   background: #181d21;
}


.section-head {
   padding: 0 4%;
   text-align: center;
}
.section-head h1 {
   font: 20px/36px 'montserrat-bold', sans-serif;
   color: #333;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 12px;
}

/* for css animations */
.show { opacity: 1; }
.js #mc_embed_signup input[type="email"],
.js #mc_embed_signup input[type="submit"] {
   opacity: 0;
}

/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
   height: 75px;
   width: 100%;
   background: #20272e;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
   position: absolute;
}

/* header logo */
header .img .logo {
   margin-right: 20px;
   margin-top: -2px;
   float: left;
   width: auto; 
   z-index: 991; 
   position: relative; 
}

header .logo a {
   display: block;
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
   width: 124px;
   height: 78px; 
   position: relative;
   left: 50px;  
}

/* header social */
header .header-social {
   font-size: 24px; /* Ajustado el tamaño de los iconos */
   font-weight: normal;
   line-height: 75px;
   right: 50px;
   position: relative;
   color: #fff;
   margin: 0 10px 0 0;
   padding: 0;
   float: right;
   top: -105px;
}

header .header-social li {
   display: inline-block;
   margin-right: 15px; /* Ajustado el espacio entre iconos */
}

header .header-social li a {
   color: #fff;
   transition: color 0.3s ease;
}

.header-social li:nth-child(1) a:hover {
   color: #3b5998; /* Color para Facebook */
}

.header-social li:nth-child(2) a:hover {
   color: #777777; /* Color para Twitter */
}

.header-social li:nth-child(3) a:hover {
   color: #f96854; /* Color para Patreon */
}

.header-social li:nth-child(4) a:hover {
   color: #C13584; /* Color para Instagram */
}

.header-social li:nth-child(5) a:hover {
   color: #5865F2; /* Color para Discord */
}


/* Ajuste adicional para tamaño y alineación */
header .header-social li a i {
   font-size: 20px; /* Ajusta el tamaño de los iconos aquí */
   vertical-align: middle; /* Alinea los iconos verticalmente en el centro */
}

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
   top: 14px;
   margin-left: 8px;
}

/* nav-wrap */
#nav-wrap {
   font: 18px 'montserrat-regular', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   float: left;
}

/* hide toggle button */
#nav-wrap > a { 
   display: none; 
}

ul#nav {
   min-height: 54px;
   width: auto;
   text-align: left;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: 54px;
   display: inline-block;
}

/* Links */
ul#nav li a {
   position: relative;
   top: -75px;
   left: 200px;
   display: inline-block;
   padding: 8px 8px;
   line-height: 38px;
   text-decoration: none;
   text-align: left;
   color: #58687A;
   transition: color .2s ease-in-out;
}
ul#nav li a:hover { 
   color: #fff;
 }
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #fff; }





/* Menú Principal */
#main-navigation {
   position: relative;
   top: -50px;
   left: -200px;
   z-index: 500;
}

#main-navigation .menu-toggle {
   display: block;
   font-size: 24px;
   color: #fff;
   cursor: pointer;
   z-index: 500;
}

#main-navigation .menu-items {
   list-style: none;
   padding: 0;
   margin: 0;
   display: none; /* Ocultar inicialmente */
   z-index: 500;
}

#main-navigation .menu-items li {
   margin: 10px 0;
   z-index: 500;
}

#main-navigation .menu-link {
   text-decoration: none;
   color: #fff;
   transition: color 0.3s ease;
   z-index: 500;
}

#main-navigation .menu-link:hover {
   color: #f0f0f0;
   z-index: 500;
}

/* Mostrar el menú al hacer clic */
#main-navigation.show-menu .menu-items {
   display: block;
   z-index: 500;
}


@media (max-width: 1024px) {

header .header-social {
   display: block;
}
   /*
=====================================================================
*   Woo v1.0 Layout Stylesheet
*   url: styleshout.com
*   05-02-2014
=====================================================================

   TOC:
   a. General and Common Styles
   b. Header Styles
   c. Hero Section
   d. Features Section
   e. Pricing Section
   f. Screenshots Section
   g. Call To Action Section
   h. Testimonials Section
   i. Subscribe Section
   j. Footer
   k. lightbox

   todo: check bug in mobile z-index

===================================================================== */

/* ------------------------------------------------------------------ */
/* a. General and Common Styles
/* ------------------------------------------------------------------ */


body { 
   background: #181d21;
}


.section-head {
   padding: 0 4%;
   text-align: center;
}
.section-head h1 {
   font: 20px/36px 'montserrat-bold', sans-serif;
   color: #333;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 12px;
}

/* for css animations */
.show { opacity: 1; }
.js #mc_embed_signup input[type="email"],
.js #mc_embed_signup input[type="submit"] {
   opacity: 0;
}

/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
   height: 75px;
   width: 100%;
   background: #20272e;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
   position: absolute;
}

/* header logo */
header .img .logo {
   margin-right: 20px;
   margin-top: -2px;
   float: left;
   width: auto; 
   z-index: 991; 
   position: relative; 
}

header .logo a {
   display: block;
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
   width: 124px;
   height: 78px; 
   position: relative;
   left: 50px;  
}

/* header social */
header .header-social {
   font-size: 24px; /* Ajustado el tamaño de los iconos */
   font-weight: normal;
   line-height: 75px;
   right: 50px;
   position: relative;
   color: #fff;
   margin: 0 10px 0 0;
   padding: 0;
   float: right;
   top: -105px;
}

header .header-social li {
   display: inline-block;
   margin-right: 15px; /* Ajustado el espacio entre iconos */
}

header .header-social li a {
   color: #fff;
   transition: color 0.3s ease;
}

.header-social li:nth-child(1) a:hover {
   color: #3b5998; /* Color para Facebook */
}

.header-social li:nth-child(2) a:hover {
   color: #777777; /* Color para Twitter */
}

.header-social li:nth-child(3) a:hover {
   color: #f96854; /* Color para Patreon */
}

.header-social li:nth-child(4) a:hover {
   color: #C13584; /* Color para Instagram */
}

.header-social li:nth-child(5) a:hover {
   color: #5865F2; /* Color para Discord */
}


/* Ajuste adicional para tamaño y alineación */
header .header-social li a i {
   font-size: 20px; /* Ajusta el tamaño de los iconos aquí */
   vertical-align: middle; /* Alinea los iconos verticalmente en el centro */
}

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
   top: 14px;
   margin-left: 8px;
}

/* nav-wrap */
#nav-wrap {
   font: 18px 'montserrat-regular', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   float: left;
}

/* hide toggle button */
#nav-wrap > a { 
   display: none; 
}

ul#nav {
   min-height: 54px;
   width: auto;
   text-align: left;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: 54px;
   display: inline-block;
}

/* Links */
ul#nav li a {
   position: relative;
   top: -75px;
   left: 200px;
   display: inline-block;
   padding: 8px 8px;
   line-height: 38px;
   text-decoration: none;
   text-align: left;
   color: #58687A;
   transition: color .2s ease-in-out;
}
ul#nav li a:hover { 
   color: #fff;
 }
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #fff; }







/* Menú Principal */
#main-navigation {
   position: relative;
   top: -50px;
   left: -200px;
   z-index: 500;
}

#main-navigation .menu-toggle {
   display: block;
   font-size: 24px;
   color: #fff;
   cursor: pointer;
   z-index: 500;
}

#main-navigation .menu-items {
   list-style: none;
   padding: 0;
   margin: 0;
   display: none; /* Ocultar inicialmente */
   z-index: 500;
}

#main-navigation .menu-items li {
   margin: 10px 0;
   z-index: 500;
}

#main-navigation .menu-link {
   text-decoration: none;
   color: #fff;
   transition: color 0.3s ease;
   z-index: 500;
}

#main-navigation .menu-link:hover {
   color: #f0f0f0;
   z-index: 500;
}

/* Mostrar el menú al hacer clic */
#main-navigation.show-menu .menu-items {
   display: block;
   z-index: 500;
}

}







@media (max-width: 480px) {

   header .header-social {
      display: none; /* Ocultar header-social */
   }
      /*
   =====================================================================
   *   Woo v1.0 Layout Stylesheet
   *   url: styleshout.com
   *   05-02-2014
   =====================================================================
   
      TOC:
      a. General and Common Styles
      b. Header Styles
      c. Hero Section
      d. Features Section
      e. Pricing Section
      f. Screenshots Section
      g. Call To Action Section
      h. Testimonials Section
      i. Subscribe Section
      j. Footer
      k. lightbox
   
      todo: check bug in mobile z-index
   
   ===================================================================== */
   
   /* ------------------------------------------------------------------ */
   /* a. General and Common Styles
   /* ------------------------------------------------------------------ */
   
   body { 
      background: #181d21;
   }
   
   
   .section-head {
      padding: 0 4%;
      text-align: center;
   }
   .section-head h1 {
      font: 20px/36px 'montserrat-bold', sans-serif;
      color: #333;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 12px;
   }
   
   /* for css animations */
   .show { opacity: 1; }
   .js #mc_embed_signup input[type="email"],
   .js #mc_embed_signup input[type="submit"] {
      opacity: 0;
   }
   
   /* ------------------------------------------------------------------ */
   /* b. Header Styles
   /* ------------------------------------------------------------------ */
   
   header {
      height: 75px;
      width: 100%;
      background: #20272e;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 990;
      position: absolute;
   }
   
   /* header logo */
   header .img .logo {
      margin-right: 20px;
      margin-top: -2px;
      float: left;
      width: auto; 
      z-index: 991; 
      position: relative; 
   }
   
   header .logo a {
      display: block;
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      width: 95px;
      height: 78px; 
      position: relative;
      top: 10px;
      left: 20px;  
   }
   
   /* header social */
   header .header-social {
      font-size: 2px; /* Ajustado el tamaño de los iconos */
      font-weight: normal;
      line-height: 7px;
      right: 8px;
      position: absolute;
      color: #fff;
      margin: 0 1px 0 0;
      padding: 0;
      float: right;
      top: -125px;
      z-index: 500; /* Valor menor que el header */
      pointer-events: auto; /* Permite clics en los enlaces */
   }
   
   header .header-social li {
      z-index: 500;
      display: inline-block;
      margin-right: 1px; /* Ajustado el espacio entre iconos */
   }
   
   header .header-social li a {
      position: relative;
      left: 80px;
      z-index: 500;
      color: #fff;
      transition: color 0.3s ease;
   }
   
   .header-social li:nth-child(1) a:hover {
      z-index: 500;
      color: #3b5998; /* Color para Facebook */
   }
   
   .header-social li:nth-child(2) a:hover {
      z-index: 500;
      color: #777777; /* Color para Twitter */
   }
   
   .header-social li:nth-child(3) a:hover {
      z-index: 500;
      color: #f96854; /* Color para Patreon */
   }
   
   .header-social li:nth-child(4) a:hover {
      z-index: 500;
      color: #C13584; /* Color para Instagram */
   }
   
   
   
   
   
   
   /* primary navigation
   --------------------------------------------------------------------- */
   #nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      top: 14px;
      margin-left: 8px;
   }
   
   /* nav-wrap */
   #nav-wrap {
      position: relative;
      top: -2px;
      left: 60px;
      font: 17px 'montserrat-regular', sans-serif;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      float: left;
   }
   
   /* hide toggle button */
   #nav-wrap > a { 
      display: none; 
   }
   
   ul#nav {
      min-height: 54px;
      width: auto;
      text-align: left;
   }
   ul#nav li {
      position: relative;
      list-style: none;
      height: 54px;
      display: inline-block;
   }
   
   /* Links */
   ul#nav li a {
      position: relative;
      top: -75px;
      left: 200px;
      display: inline-block;
      padding: 8px 8px;
      line-height: 38px;
      text-decoration: none;
      text-align: left;
      color: #58687A;
      transition: color .2s ease-in-out;
   }
   ul#nav li a:hover { 
      color: #fff;
    }
   ul#nav li a:active { background-color: transparent !important; }
   ul#nav li.current a { color: #fff; }
   
   
   
   
   
   
   
   /* Menú Principal */
   #main-navigation {
      position: relative;
   }
   
   #main-navigation .menu-toggle {
      display: block;
      font-size: 24px;
      color: #fff;
      cursor: pointer;
   }
   
   #main-navigation .menu-items {
      list-style: none;
      padding: 0;
      margin: 0;
      display: none; /* Ocultar inicialmente */
   }
   
   #main-navigation .menu-items li {
      margin: 10px 0;
   }
   
   #main-navigation .menu-link {
      text-decoration: none;
      color: #fff;
      transition: color 0.3s ease;
   }
   
   #main-navigation .menu-link:hover {
      color: #f0f0f0;
   }
   
   /* Mostrar el menú al hacer clic */
   #main-navigation.show-menu .menu-items {
      display: block;
   }
   
}

@media (max-width: 430px) {

   header .header-social {
      display: none; /* Ocultar header-social */
   }
      /*
   =====================================================================
   *   Woo v1.0 Layout Stylesheet
   *   url: styleshout.com
   *   05-02-2014
   =====================================================================
   
      TOC:
      a. General and Common Styles
      b. Header Styles
      c. Hero Section
      d. Features Section
      e. Pricing Section
      f. Screenshots Section
      g. Call To Action Section
      h. Testimonials Section
      i. Subscribe Section
      j. Footer
      k. lightbox
   
      todo: check bug in mobile z-index
   
   ===================================================================== */
   
   /* ------------------------------------------------------------------ */
   /* a. General and Common Styles
   /* ------------------------------------------------------------------ */
   
   body { 
      background: #181d21;
   }
   
   
   .section-head {
      padding: 0 4%;
      text-align: center;
   }
   .section-head h1 {
      font: 20px/36px 'montserrat-bold', sans-serif;
      color: #333;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 12px;
   }
   
   /* for css animations */
   .show { opacity: 1; }
   .js #mc_embed_signup input[type="email"],
   .js #mc_embed_signup input[type="submit"] {
      opacity: 0;
   }
   
   /* ------------------------------------------------------------------ */
   /* b. Header Styles
   /* ------------------------------------------------------------------ */
   
   header {
      height: 75px;
      width: 100%;
      background: #20272e;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 990;
      position: absolute;
   }
   
   /* header logo */
   header .img .logo {
      margin-right: 20px;
      margin-top: -2px;
      float: left;
      width: auto; 
      z-index: 991; 
      position: relative; 
   }
   
   header .logo a {
      display: block;
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      width: 95px;
      height: 78px; 
      position: relative;
      top: 10px;
      left: 20px;  
   }
   
   /* header social */
   header .header-social {
      font-size: 2px; /* Ajustado el tamaño de los iconos */
      font-weight: normal;
      line-height: 7px;
      right: 8px;
      position: absolute;
      color: #fff;
      margin: 0 1px 0 0;
      padding: 0;
      float: right;
      top: -125px;
      z-index: 500; /* Valor menor que el header */
      pointer-events: auto; /* Permite clics en los enlaces */
   }
   
   header .header-social li {
      z-index: 500;
      display: inline-block;
      margin-right: 1px; /* Ajustado el espacio entre iconos */
   }
   
   header .header-social li a {
      position: relative;
      left: 80px;
      z-index: 500;
      color: #fff;
      transition: color 0.3s ease;
   }
   
   .header-social li:nth-child(1) a:hover {
      z-index: 500;
      color: #3b5998; /* Color para Facebook */
   }
   
   .header-social li:nth-child(2) a:hover {
      z-index: 500;
      color: #777777; /* Color para Twitter */
   }
   
   .header-social li:nth-child(3) a:hover {
      z-index: 500;
      color: #f96854; /* Color para Patreon */
   }
   
   .header-social li:nth-child(4) a:hover {
      z-index: 500;
      color: #C13584; /* Color para Instagram */
   }
   
   
   
   
   
   
   /* primary navigation
   --------------------------------------------------------------------- */
   #nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      top: 14px;
      margin-left: 8px;
   }
   
   /* nav-wrap */
   #nav-wrap {
      position: relative;
      top: -2px;
      left: 30px;
      font: 17px 'montserrat-regular', sans-serif;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      float: left;
   }
   
   /* hide toggle button */
   #nav-wrap > a { 
      display: none; 
   }
   
   ul#nav {
      min-height: 54px;
      width: auto;
      text-align: left;
   }
   ul#nav li {
      position: relative;
      list-style: none;
      height: 54px;
      display: inline-block;
   }
   
   /* Links */
   ul#nav li a {
      position: relative;
      top: -75px;
      left: 200px;
      display: inline-block;
      padding: 8px 8px;
      line-height: 38px;
      text-decoration: none;
      text-align: left;
      color: #58687A;
      transition: color .2s ease-in-out;
   }
   ul#nav li a:hover { 
      color: #fff;
    }
   ul#nav li a:active { background-color: transparent !important; }
   ul#nav li.current a { color: #fff; }
   
   
   
   
   
   
   
   /* Menú Principal */
   #main-navigation {
      position: relative;
   }
   
   #main-navigation .menu-toggle {
      display: block;
      font-size: 24px;
      color: #fff;
      cursor: pointer;
   }
   
   #main-navigation .menu-items {
      list-style: none;
      padding: 0;
      margin: 0;
      display: none; /* Ocultar inicialmente */
   }
   
   #main-navigation .menu-items li {
      margin: 10px 0;
   }
   
   #main-navigation .menu-link {
      text-decoration: none;
      color: #fff;
      transition: color 0.3s ease;
   }
   
   #main-navigation .menu-link:hover {
      color: #f0f0f0;
   }
   
   /* Mostrar el menú al hacer clic */
   #main-navigation.show-menu .menu-items {
      display: block;
   }
   
}

@media (max-width: 428px) {

   header .header-social {
      display: none; /* Ocultar header-social */
   }
      /*
   =====================================================================
   *   Woo v1.0 Layout Stylesheet
   *   url: styleshout.com
   *   05-02-2014
   =====================================================================
   
      TOC:
      a. General and Common Styles
      b. Header Styles
      c. Hero Section
      d. Features Section
      e. Pricing Section
      f. Screenshots Section
      g. Call To Action Section
      h. Testimonials Section
      i. Subscribe Section
      j. Footer
      k. lightbox
   
      todo: check bug in mobile z-index
   
   ===================================================================== */
   
   /* ------------------------------------------------------------------ */
   /* a. General and Common Styles
   /* ------------------------------------------------------------------ */
   
   body { 
      background: #181d21;
   }
   
   
   .section-head {
      padding: 0 4%;
      text-align: center;
   }
   .section-head h1 {
      font: 20px/36px 'montserrat-bold', sans-serif;
      color: #333;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 12px;
   }
   
   /* for css animations */
   .show { opacity: 1; }
   .js #mc_embed_signup input[type="email"],
   .js #mc_embed_signup input[type="submit"] {
      opacity: 0;
   }
   
   /* ------------------------------------------------------------------ */
   /* b. Header Styles
   /* ------------------------------------------------------------------ */
   
   header {
      height: 75px;
      width: 100%;
      background: #20272e;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 990;
      position: absolute;
   }
   
   /* header logo */
   header .img .logo {
      margin-right: 20px;
      margin-top: -2px;
      float: left;
      width: auto; 
      z-index: 991; 
      position: relative; 
   }
   
   header .logo a {
      display: block;
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      width: 95px;
      height: 78px; 
      position: relative;
      top: 10px;
      left: 20px;  
   }
   
   /* header social */
   header .header-social {
      font-size: 2px; /* Ajustado el tamaño de los iconos */
      font-weight: normal;
      line-height: 7px;
      right: 8px;
      position: absolute;
      color: #fff;
      margin: 0 1px 0 0;
      padding: 0;
      float: right;
      top: -125px;
      z-index: 500; /* Valor menor que el header */
      pointer-events: auto; /* Permite clics en los enlaces */
   }
   
   header .header-social li {
      z-index: 500;
      display: inline-block;
      margin-right: 1px; /* Ajustado el espacio entre iconos */
   }
   
   header .header-social li a {
      position: relative;
      left: 80px;
      z-index: 500;
      color: #fff;
      transition: color 0.3s ease;
   }
   
   .header-social li:nth-child(1) a:hover {
      z-index: 500;
      color: #3b5998; /* Color para Facebook */
   }
   
   .header-social li:nth-child(2) a:hover {
      z-index: 500;
      color: #777777; /* Color para Twitter */
   }
   
   .header-social li:nth-child(3) a:hover {
      z-index: 500;
      color: #f96854; /* Color para Patreon */
   }
   
   .header-social li:nth-child(4) a:hover {
      z-index: 500;
      color: #C13584; /* Color para Instagram */
   }
   
   
   
   
   
   
   /* primary navigation
   --------------------------------------------------------------------- */
   #nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      top: 14px;
      margin-left: 8px;
   }
   
   /* nav-wrap */
   #nav-wrap {
      position: relative;
      top: -2px;
      left: 30px;
      font: 17px 'montserrat-regular', sans-serif;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      float: left;
   }
   
   /* hide toggle button */
   #nav-wrap > a { 
      display: none; 
   }
   
   ul#nav {
      min-height: 54px;
      width: auto;
      text-align: left;
   }
   ul#nav li {
      position: relative;
      list-style: none;
      height: 54px;
      display: inline-block;
   }
   
   /* Links */
   ul#nav li a {
      position: relative;
      top: -75px;
      left: 200px;
      display: inline-block;
      padding: 8px 8px;
      line-height: 38px;
      text-decoration: none;
      text-align: left;
      color: #58687A;
      transition: color .2s ease-in-out;
   }
   ul#nav li a:hover { 
      color: #fff;
    }
   ul#nav li a:active { background-color: transparent !important; }
   ul#nav li.current a { color: #fff; }
   
   
   
   
   
   
   
   /* Menú Principal */
   #main-navigation {
      position: relative;
   }
   
   #main-navigation .menu-toggle {
      display: block;
      font-size: 24px;
      color: #fff;
      cursor: pointer;
   }
   
   #main-navigation .menu-items {
      list-style: none;
      padding: 0;
      margin: 0;
      display: none; /* Ocultar inicialmente */
   }
   
   #main-navigation .menu-items li {
      margin: 10px 0;
   }
   
   #main-navigation .menu-link {
      text-decoration: none;
      color: #fff;
      transition: color 0.3s ease;
   }
   
   #main-navigation .menu-link:hover {
      color: #f0f0f0;
   }
   
   /* Mostrar el menú al hacer clic */
   #main-navigation.show-menu .menu-items {
      display: block;
   }
   
}

@media (max-width: 393px) {

header .header-social {
   display: none; /* Ocultar header-social */
}
   /*
=====================================================================
*   Woo v1.0 Layout Stylesheet
*   url: styleshout.com
*   05-02-2014
=====================================================================

   TOC:
   a. General and Common Styles
   b. Header Styles
   c. Hero Section
   d. Features Section
   e. Pricing Section
   f. Screenshots Section
   g. Call To Action Section
   h. Testimonials Section
   i. Subscribe Section
   j. Footer
   k. lightbox

   todo: check bug in mobile z-index

===================================================================== */

/* ------------------------------------------------------------------ */
/* a. General and Common Styles
/* ------------------------------------------------------------------ */

body { 
   background: #181d21;
}


.section-head {
   padding: 0 4%;
   text-align: center;
}
.section-head h1 {
   font: 20px/36px 'montserrat-bold', sans-serif;
   color: #333;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 12px;
}

/* for css animations */
.show { opacity: 1; }
.js #mc_embed_signup input[type="email"],
.js #mc_embed_signup input[type="submit"] {
   opacity: 0;
}

/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
   height: 75px;
   width: 100%;
   background: #20272e;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
   position: absolute;
}

/* header logo */
header .img .logo {
   margin-right: 20px;
   margin-top: -2px;
   float: left;
   width: auto; 
   z-index: 991; 
   position: relative; 
}

header .logo a {
   display: block;
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
   width: 95px;
   height: 78px; 
   position: relative;
   top: 10px;
   left: 20px;  
}

/* header social */
header .header-social {
   font-size: 2px; /* Ajustado el tamaño de los iconos */
   font-weight: normal;
   line-height: 7px;
   right: 8px;
   position: absolute;
   color: #fff;
   margin: 0 1px 0 0;
   padding: 0;
   float: right;
   top: -125px;
   z-index: 500; /* Valor menor que el header */
   pointer-events: auto; /* Permite clics en los enlaces */
}

header .header-social li {
   z-index: 500;
   display: inline-block;
   margin-right: 1px; /* Ajustado el espacio entre iconos */
}

header .header-social li a {
   position: relative;
   left: 80px;
   z-index: 500;
   color: #fff;
   transition: color 0.3s ease;
}

.header-social li:nth-child(1) a:hover {
   z-index: 500;
   color: #3b5998; /* Color para Facebook */
}

.header-social li:nth-child(2) a:hover {
   z-index: 500;
   color: #777777; /* Color para Twitter */
}

.header-social li:nth-child(3) a:hover {
   z-index: 500;
   color: #f96854; /* Color para Patreon */
}

.header-social li:nth-child(4) a:hover {
   z-index: 500;
   color: #C13584; /* Color para Instagram */
}






/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
   top: 14px;
   margin-left: 8px;
}

/* nav-wrap */
#nav-wrap {
   position: relative;
   top: -2px;
   left: 5px;
   font: 17px 'montserrat-regular', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   float: left;
}

/* hide toggle button */
#nav-wrap > a { 
   display: none; 
}

ul#nav {
   min-height: 54px;
   width: auto;
   text-align: left;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: 54px;
   display: inline-block;
}

/* Links */
ul#nav li a {
   position: relative;
   top: -75px;
   left: 200px;
   display: inline-block;
   padding: 8px 8px;
   line-height: 38px;
   text-decoration: none;
   text-align: left;
   color: #58687A;
   transition: color .2s ease-in-out;
}
ul#nav li a:hover { 
   color: #fff;
 }
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #fff; }







/* Menú Principal */
#main-navigation {
   position: relative;
}

#main-navigation .menu-toggle {
   display: block;
   font-size: 24px;
   color: #fff;
   cursor: pointer;
}

#main-navigation .menu-items {
   list-style: none;
   padding: 0;
   margin: 0;
   display: none; /* Ocultar inicialmente */
}

#main-navigation .menu-items li {
   margin: 10px 0;
}

#main-navigation .menu-link {
   text-decoration: none;
   color: #fff;
   transition: color 0.3s ease;
}

#main-navigation .menu-link:hover {
   color: #f0f0f0;
}

/* Mostrar el menú al hacer clic */
#main-navigation.show-menu .menu-items {
   display: block;
}

}

@media (max-width: 379px) {

   header .header-social {
      display: none; /* Ocultar header-social */
   }   
      /*
   =====================================================================
   *   Woo v1.0 Layout Stylesheet
   *   url: styleshout.com
   *   05-02-2014
   =====================================================================
   
      TOC:
      a. General and Common Styles
      b. Header Styles
      c. Hero Section
      d. Features Section
      e. Pricing Section
      f. Screenshots Section
      g. Call To Action Section
      h. Testimonials Section
      i. Subscribe Section
      j. Footer
      k. lightbox
   
      todo: check bug in mobile z-index
   
   ===================================================================== */
   
   /* ------------------------------------------------------------------ */
   /* a. General and Common Styles
   /* ------------------------------------------------------------------ */
   
   body { 
      background: #181d21;
   }
   
   
   .section-head {
      padding: 0 4%;
      text-align: center;
   }
   .section-head h1 {
      font: 20px/36px 'montserrat-bold', sans-serif;
      color: #333;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 12px;
   }
   
   /* for css animations */
   .show { opacity: 1; }
   .js #mc_embed_signup input[type="email"],
   .js #mc_embed_signup input[type="submit"] {
      opacity: 0;
   }
   
   /* ------------------------------------------------------------------ */
   /* b. Header Styles
   /* ------------------------------------------------------------------ */
   
   header {
      height: 75px;
      width: 100%;
      background: #20272e;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 990;
      position: absolute;
   }
   
   /* header logo */
   header .img .logo {
      margin-right: 20px;
      margin-top: -2px;
      float: left;
      width: auto; 
      z-index: 991; 
      position: relative; 
   }
   
   header .logo a {
      display: block;
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      width: 95px;
      height: 78px; 
      position: relative;
      top: 10px;
      left: 20px;  
   }
   
   /* header social */
   header .header-social {
      font-size: 24px; /* Ajustado el tamaño de los iconos */
      font-weight: normal;
      line-height: 75px;
      right: 50px;
      position: absolute;
      color: #fff;
      margin: 0 10px 0 0;
      padding: 0;
      float: right;
      top: -125px;
      z-index: 980;
   }
   
   header .header-social li {
      z-index: 980;
      display: inline-block;
      margin-right: 15px; /* Ajustado el espacio entre iconos */
   }
   
   header .header-social li a {
      z-index: 980;
      color: #fff;
      transition: color 0.3s ease;
   }
   
   .header-social li:nth-child(1) a:hover {
      z-index: 980;
      color: #3b5998; /* Color para Facebook */
   }
   
   .header-social li:nth-child(2) a:hover {
      z-index: 980;
      color: #777777; /* Color para Twitter */
   }
   
   .header-social li:nth-child(3) a:hover {
      z-index: 980;
      color: #f96854; /* Color para Patreon */
   }
   
   .header-social li:nth-child(4) a:hover {
      z-index: 980;
      color: #C13584; /* Color para Instagram */
   }
   
   .header-social li:nth-child(5) a:hover {
      z-index: 980;
      color: #5865F2; /* Color para Discord */
   }
   
   
   /* Ajuste adicional para tamaño y alineación */
   header .header-social li a i {
      z-index: 980;
      font-size: 20px; /* Ajusta el tamaño de los iconos aquí */
      vertical-align: middle; /* Alinea los iconos verticalmente en el centro */
   }
   
   /* primary navigation
   --------------------------------------------------------------------- */
   #nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      top: 14px;
      margin-left: 8px;
   }
   
   /* nav-wrap */
   #nav-wrap {
      position: relative;
      top: -2px;
      left: -4px;
      font: 17px 'montserrat-regular', sans-serif;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      float: left;
   }
   
   /* hide toggle button */
   #nav-wrap > a { 
      display: none; 
   }
   
   ul#nav {
      min-height: 54px;
      width: auto;
      text-align: left;
   }
   ul#nav li {
      position: relative;
      list-style: none;
      height: 54px;
      display: inline-block;
   }
   
   /* Links */
   ul#nav li a {
      position: relative;
      top: -75px;
      left: 200px;
      display: inline-block;
      padding: 8px 8px;
      line-height: 38px;
      text-decoration: none;
      text-align: left;
      color: #58687A;
      transition: color .2s ease-in-out;
   }
   ul#nav li a:hover { 
      color: #fff;
    }
   ul#nav li a:active { background-color: transparent !important; }
   ul#nav li.current a { color: #fff; }
   
   
   
   
   
   
   
   /* Menú Principal */
   #main-navigation {
      position: relative;
   }
   
   #main-navigation .menu-toggle {
      display: block;
      font-size: 24px;
      color: #fff;
      cursor: pointer;
   }
   
   #main-navigation .menu-items {
      list-style: none;
      padding: 0;
      margin: 0;
      display: none; /* Ocultar inicialmente */
   }
   
   #main-navigation .menu-items li {
      margin: 10px 0;
   }
   
   #main-navigation .menu-link {
      text-decoration: none;
      color: #fff;
      transition: color 0.3s ease;
   }
   
   #main-navigation .menu-link:hover {
      color: #f0f0f0;
   }
   
   /* Mostrar el menú al hacer clic */
   #main-navigation.show-menu .menu-items {
      display: block;
   }
   
}

@media (max-width: 375px) {

   header .header-social {
      display: none; /* Ocultar header-social */
   }   
      /*
   =====================================================================
   *   Woo v1.0 Layout Stylesheet
   *   url: styleshout.com
   *   05-02-2014
   =====================================================================
   
      TOC:
      a. General and Common Styles
      b. Header Styles
      c. Hero Section
      d. Features Section
      e. Pricing Section
      f. Screenshots Section
      g. Call To Action Section
      h. Testimonials Section
      i. Subscribe Section
      j. Footer
      k. lightbox
   
      todo: check bug in mobile z-index
   
   ===================================================================== */
   
   /* ------------------------------------------------------------------ */
   /* a. General and Common Styles
   /* ------------------------------------------------------------------ */
   
   body { 
      background: #181d21;
   }
   
   
   .section-head {
      padding: 0 4%;
      text-align: center;
   }
   .section-head h1 {
      font: 20px/36px 'montserrat-bold', sans-serif;
      color: #333;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 12px;
   }
   
   /* for css animations */
   .show { opacity: 1; }
   .js #mc_embed_signup input[type="email"],
   .js #mc_embed_signup input[type="submit"] {
      opacity: 0;
   }
   
   /* ------------------------------------------------------------------ */
   /* b. Header Styles
   /* ------------------------------------------------------------------ */
   
   header {
      height: 75px;
      width: 100%;
      background: #20272e;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 990;
      position: absolute;
   }
   
   /* header logo */
   header .img .logo {
      margin-right: 20px;
      margin-top: -2px;
      float: left;
      width: auto; 
      z-index: 991; 
      position: relative; 
   }
   
   header .logo a {
      display: block;
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      width: 95px;
      height: 78px; 
      position: relative;
      top: 10px;
      left: 20px;  
   }
   
   /* header social */
   header .header-social {
      font-size: 24px; /* Ajustado el tamaño de los iconos */
      font-weight: normal;
      line-height: 75px;
      right: 50px;
      position: absolute;
      color: #fff;
      margin: 0 10px 0 0;
      padding: 0;
      float: right;
      top: -125px;
      z-index: 980;
   }
   
   header .header-social li {
      z-index: 980;
      display: inline-block;
      margin-right: 15px; /* Ajustado el espacio entre iconos */
   }
   
   header .header-social li a {
      z-index: 980;
      color: #fff;
      transition: color 0.3s ease;
   }
   
   .header-social li:nth-child(1) a:hover {
      z-index: 980;
      color: #3b5998; /* Color para Facebook */
   }
   
   .header-social li:nth-child(2) a:hover {
      z-index: 980;
      color: #777777; /* Color para Twitter */
   }
   
   .header-social li:nth-child(3) a:hover {
      z-index: 980;
      color: #f96854; /* Color para Patreon */
   }
   
   .header-social li:nth-child(4) a:hover {
      z-index: 980;
      color: #C13584; /* Color para Instagram */
   }
   
   .header-social li:nth-child(5) a:hover {
      z-index: 980;
      color: #5865F2; /* Color para Discord */
   }
   
   
   /* Ajuste adicional para tamaño y alineación */
   header .header-social li a i {
      z-index: 980;
      font-size: 20px; /* Ajusta el tamaño de los iconos aquí */
      vertical-align: middle; /* Alinea los iconos verticalmente en el centro */
   }
   
   /* primary navigation
   --------------------------------------------------------------------- */
   #nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      top: 14px;
      margin-left: 8px;
   }
   
   /* nav-wrap */
   #nav-wrap {
      position: relative;
      top: -2px;
      left: -15px;
      font: 17px 'montserrat-regular', sans-serif;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      float: left;
   }
   
   /* hide toggle button */
   #nav-wrap > a { 
      display: none; 
   }
   
   ul#nav {
      min-height: 54px;
      width: auto;
      text-align: left;
   }
   ul#nav li {
      position: relative;
      list-style: none;
      height: 54px;
      display: inline-block;
   }
   
   /* Links */
   ul#nav li a {
      position: relative;
      top: -75px;
      left: 200px;
      display: inline-block;
      padding: 8px 8px;
      line-height: 38px;
      text-decoration: none;
      text-align: left;
      color: #58687A;
      transition: color .2s ease-in-out;
   }
   ul#nav li a:hover { 
      color: #fff;
    }
   ul#nav li a:active { background-color: transparent !important; }
   ul#nav li.current a { color: #fff; }
   
   
   
   
   
   
   
   /* Menú Principal */
   #main-navigation {
      position: relative;
   }
   
   #main-navigation .menu-toggle {
      display: block;
      font-size: 24px;
      color: #fff;
      cursor: pointer;
   }
   
   #main-navigation .menu-items {
      list-style: none;
      padding: 0;
      margin: 0;
      display: none; /* Ocultar inicialmente */
   }
   
   #main-navigation .menu-items li {
      margin: 10px 0;
   }
   
   #main-navigation .menu-link {
      text-decoration: none;
      color: #fff;
      transition: color 0.3s ease;
   }
   
   #main-navigation .menu-link:hover {
      color: #f0f0f0;
   }
   
   /* Mostrar el menú al hacer clic */
   #main-navigation.show-menu .menu-items {
      display: block;
   }
   
}

@media (max-width: 360px) {

header .header-social {
   display: none; /* Ocultar header-social */
}   
   /*
=====================================================================
*   Woo v1.0 Layout Stylesheet
*   url: styleshout.com
*   05-02-2014
=====================================================================

   TOC:
   a. General and Common Styles
   b. Header Styles
   c. Hero Section
   d. Features Section
   e. Pricing Section
   f. Screenshots Section
   g. Call To Action Section
   h. Testimonials Section
   i. Subscribe Section
   j. Footer
   k. lightbox

   todo: check bug in mobile z-index

===================================================================== */

/* ------------------------------------------------------------------ */
/* a. General and Common Styles
/* ------------------------------------------------------------------ */

body { 
   background: #181d21;
}


.section-head {
   padding: 0 4%;
   text-align: center;
}
.section-head h1 {
   font: 20px/36px 'montserrat-bold', sans-serif;
   color: #333;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 12px;
}

/* for css animations */
.show { opacity: 1; }
.js #mc_embed_signup input[type="email"],
.js #mc_embed_signup input[type="submit"] {
   opacity: 0;
}

/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
   height: 75px;
   width: 100%;
   background: #20272e;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
   position: absolute;
}

/* header logo */
header .img .logo {
   margin-right: 20px;
   margin-top: -2px;
   float: left;
   width: auto; 
   z-index: 991; 
   position: relative; 
}

header .logo a {
   display: block;
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
   width: 95px;
   height: 78px; 
   position: relative;
   top: 10px;
   left: 20px;  
}

/* header social */
header .header-social {
   font-size: 24px; /* Ajustado el tamaño de los iconos */
   font-weight: normal;
   line-height: 75px;
   right: 50px;
   position: absolute;
   color: #fff;
   margin: 0 10px 0 0;
   padding: 0;
   float: right;
   top: -125px;
   z-index: 980;
}

header .header-social li {
   z-index: 980;
   display: inline-block;
   margin-right: 15px; /* Ajustado el espacio entre iconos */
}

header .header-social li a {
   z-index: 980;
   color: #fff;
   transition: color 0.3s ease;
}

.header-social li:nth-child(1) a:hover {
   z-index: 980;
   color: #3b5998; /* Color para Facebook */
}

.header-social li:nth-child(2) a:hover {
   z-index: 980;
   color: #777777; /* Color para Twitter */
}

.header-social li:nth-child(3) a:hover {
   z-index: 980;
   color: #f96854; /* Color para Patreon */
}

.header-social li:nth-child(4) a:hover {
   z-index: 980;
   color: #C13584; /* Color para Instagram */
}

.header-social li:nth-child(5) a:hover {
   z-index: 980;
   color: #5865F2; /* Color para Discord */
}


/* Ajuste adicional para tamaño y alineación */
header .header-social li a i {
   z-index: 980;
   font-size: 20px; /* Ajusta el tamaño de los iconos aquí */
   vertical-align: middle; /* Alinea los iconos verticalmente en el centro */
}

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
   top: 14px;
   margin-left: 8px;
}

/* nav-wrap */
#nav-wrap {
   position: relative;
   top: -2px;
   left: -26px;
   font: 17px 'montserrat-regular', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   float: left;
}

/* hide toggle button */
#nav-wrap > a { 
   display: none; 
}

ul#nav {
   min-height: 54px;
   width: auto;
   text-align: left;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: 54px;
   display: inline-block;
}

/* Links */
ul#nav li a {
   position: relative;
   top: -75px;
   left: 200px;
   display: inline-block;
   padding: 8px 8px;
   line-height: 38px;
   text-decoration: none;
   text-align: left;
   color: #58687A;
   transition: color .2s ease-in-out;
}
ul#nav li a:hover { 
   color: #fff;
 }
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #fff; }







/* Menú Principal */
#main-navigation {
   position: relative;
}

#main-navigation .menu-toggle {
   display: block;
   font-size: 24px;
   color: #fff;
   cursor: pointer;
}

#main-navigation .menu-items {
   list-style: none;
   padding: 0;
   margin: 0;
   display: none; /* Ocultar inicialmente */
}

#main-navigation .menu-items li {
   margin: 10px 0;
}

#main-navigation .menu-link {
   text-decoration: none;
   color: #fff;
   transition: color 0.3s ease;
}

#main-navigation .menu-link:hover {
   color: #f0f0f0;
}

/* Mostrar el menú al hacer clic */
#main-navigation.show-menu .menu-items {
   display: block;
}

}