
 /* Estilos Menú principal */


 /* CSS Animation */
    @keyframes fadeAnimation {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
 /* CSS Animation */


    .navbarMenuPrincipal {
    padding: 0 !important;
      }

     #mainMenuBlog  .nav-link {
      color: #000 !important;
      font-weight: 500;
      text-transform: uppercase;  

    }

    #mainMenuBlog  .nav-link:hover {
      color: #ffffff !important;
     /* background-color: #d6b976;*/
      background-image: linear-gradient(to bottom, #d6b976, #e2cd9d);
      border-radius: 0px;   
      border-bottom: 1px double #b18c35;
      font-weight: bolder;
      /* CSS Animation */
      animation-name: fadeAnimation;
      animation-duration: 0.40s;
      animation-timing-function: ease-out;
      animation-iteration-count: 1;
      animation-direction: normal;
      animation-fill-mode: forwards;
      /* CSS Animation */

    }

    .navbar > #mainMenuBlog {
      margin: 10px 0;   
         
    }

    .nav-item a {  
     font-size: 1rem;
     line-height: 30px;   
     margin: 0px 0px; 
      } 

    .items .nav-item  {
      padding: 0;
    }

    .formSuscribirse .modal-header {
      background-color: #ca4e82;
    }


    .formSuscribirse button[type="button"] {
     color: #ca4e82;
    }

    .formSuscribirse button[type="button"]:active {
     color: #000;   
     background-color: #eff2f6;
     border-color: transparent;
    }
 

    .formSuscribirse button[type="submit"] {
    color: #ffffff;
    background-color: #3f576f;
    }

    .formSuscribirse button[type="submit"]:hover {
    color: #000 ;   
    border: 1px solid #3f576f;
    background-color: transparent;
    }

    .formSuscribirse button[type="submit"]:active {
     color: #000;   
     background-color: #eff2f6;
    }  
    
    


     /***** Responsividad *****/
    
    @media (max-width: 992px) {  
      #mainMenuBlog{
          padding: 5px 5px 5px 0px;
        }

        .items .nav-item  {
          padding: 0;
        }
      }

      #mainMenuBlog  .nav-link:hover {
         border-bottom: 1px double #97a6b4;
        }

      .nav-item a {
           line-height: 20px;   
      }

    }

    @media (min-width:250px) and (max-width: 575.98px) {
      
      #mainMenuBlog{
      height: 60vh; /* ocupa todo el viewport */
      overflow: hidden;
      transition: height 0.4s ease-in-out, opacity 0.8s ease-in-out;
      margin-left: 35px;
      background-color:#d3d9df;
      padding: 5px 5px 5px 10px;
      margin-top: 10px;
      border-radius: 4px;      
      }

      #mainMenuBlog ul li a:hover {
        color: #ffffff !important;        
        background-color: #d6b976 !important;        
        border-radius: 8px;
        width: 30%;
        text-align: center;
      }

      #mainMenuBlog.collapsing {
      height: 0 !important;
      opacity: 0;
      }

      #mainMenuBlog.show {
      opacity: 1;
      }   
 
      #mainMenuBlog .nav-link:hover {
        width: 90%;
       }
    }

    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) and (max-width: 767.98px) {

         #mainMenuBlog ul li a:hover {
             text-align: center;
          }
      }   


    
  /* Large devices (desktops, 992px and up) */
    @media (min-width: 768px) and (max-width: 991.98px) {
         }  

  
    /* XXL devices (larger desktops, 1400px and up) */
    @media (min-width: 992px) {

      #mainMenuBlog  .nav-link {
      margin-right: 6px;
      width: 100%;
      text-align: center;

    }
    /*  .navbarMenuPrincipal{
     padding: 0 !important;
      }*/
    }