

/* ****************************************************
                        CONTENEDOR
******************************************************/
.container {

  min-height: 100%;
  overflow: auto;
 
  
  
}

/* ENLACES */
a {
  color: #000;
  cursor: pointer;
  text-decoration: none;
 text-align:left;

}

a:hover {
  background-color: #4F4F51;
  color:#fff;
}

/* **************************************************
        BARRA DE NAVEGACION Y MENU NORMAL
****************************************************/
/* Barra de navegacion (contiene al nav mini menu) */
.navbar-menu {
  background-color: #4F4F51;
  margin: 2% auto;
  max-width: 1000px;
  width: calc(100%);
  text-align:left;
}

.navbar-menu .menu {
  display: block;
  text-align: left;
}

.navbar-menu .menu li {
  display: inline-block;
}

.navbar-menu .menu li:hover > .submenu {
  display: block;
  -webkit-animation-name: showSubMenu;
  -webkit-animation-duration: .4s;
}

.navbar-menu .menu li ul {
  background-color: #f08080;
  display: none;
  position: absolute;
}

.navbar-menu .menu li ul li {
  display: block;
}

.navbar-menu .menu li ul li a:active {
  -webkit-animation-name: hideSubMenu;
  -webkit-animation-duration: .4s;
}

/******************************************************
                        MINI MENU
******************************************************/
/* Mini menu */
.navbar-mini-menu {
  background-color: #fff;
  
  display: none;
}

.navbar-mini-menu .menu-select {
  color: #fff;
  padding: 1rem 1.5rem;
}

.navbar-mini-menu .menu-select .btn-select {
  background: url("icon.png") no-repeat;
  cursor: pointer;
  position: absolute;
  height: 30px;
  width: 30px;
  right: 10px;
  top: 25px;
}

.navbar-mini-menu .mini-menu-options {
  display: block;
}

.navbar-mini-menu .mini-menu-options li {
  display: block;
}

.navbar-mini-menu .mini-menu-options li .submenu {
  display: none;
}

.navbar-mini-menu .mini-menu-options li:focus {
  outline: 0;
}

.navbar-mini-menu .mini-menu-options li:focus > .submenu {
  display: block;
  -webkit-animation-name: showSubMenu;
  -webkit-animation-duration: .4s;
}

.navbar-mini-menu .mini-menu-options li a {
  display: block;
  padding: 1rem 1.5rem;
}

/* ***************************************************
                      ANIMACIONES
*****************************************************/
@-webkit-keyframes showSubMenu {
    0% {
      transform: scale(0,0);
    }
  100% {
    transform: scale(1,1);
  }
}

@-webkit-keyframes hideSubMenu {
  0% {
    transform: scale(1,1);
  }
  100% {
    transform: scale(0,0);
  }
}

/*****************************************************                       MEDIAQUERIES
*****************************************************/
@media screen and (max-width: 750px) {
  /* Elimina los margenes al nav */
  .navbar-menu {
    margin: 0;
	color:#000;
  }
  
  /* Esconde el menu normal */
  .navbar-menu .menu {
    display: none;
  }
  
  /* Muestra el mini menu */
  .navbar-mini-menu {
    display: block;
	color:#000;
  }
  
  /* Esconde la lista del mini menu */
  .navbar-mini-menu .mini-menu-options {
    display: none;
	color:#000;
  }
  
}