.footer-menu-toggler {
  position: fixed;
  height: 45px;
  bottom: 0;
  left: 0;
  z-index: 30001;
  line-height: 45px;
  background-color: #fcf8e0;
  background-image: linear-gradient(to top,
                  #fcf8d3 0%, #fcf8e0 35%, #fcf8e0 65%, 
                  #f7f3ee 97%, #fcf5ee 100%);
  padding: 0 4px;
  transition: 0.3s all ease;
}

.footer-menu-toggler.footer-menu-collapsed {
  bottom: 12px;
  left: 12px;
  height: 48px;
  width: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 1px 1px 5px #a97;
}

.footer-menu-toggler > span {
  display: inline-block;
  transition: 0.3s all ease;
}

.footer-menu-toggler.footer-menu-collapsed > span {
  transform: translate(-8px, 0) rotate(90deg);
  transition: 0.3s all ease;
  color: #973;
}

.footer-menu-toggler.footer-menu-collapsed > span > svg {
  width: 32px;
  height: 32px;
}

.footer-menu-bar {
  display: flex;
  position: fixed;
  left: 0px;
  right: 0px;
  width: 100%;
  bottom: 0px;
  z-index: 30000;
  padding-left: 16px; /* room for the toggler */
  transition: 0.3s all ease;
}

.footer-menu-bar * {
  transition: 0.3s all ease;
}

.footer-menu-bar.footer-menu-collapsed {
  bottom: -50px; /* hide the entire menu */
  transition: 0.3s all ease;
}

.footer-menu {
  display: table-cell;
  position: relative;
  height: 45px;
  text-align: center;
  background-color: #fec;
  background-image: linear-gradient(to bottom,
                    rgba(250,250,170,1.0) 0%, rgba(255,255,180,0.9) 30%,
                    rgba(255,255,180,0.9) 70%, rgba(250,250,170,1.0) 100%);
  flex-grow: 1;
}

.footer-menu.footer-menu-icon {
  flex-grow: 0;
  width: 45px;
}

.footer-menu.collapsed {
  background-color: #fcf8e0;
  background-image: linear-gradient(to top,
                  #fcf8d3 0%, #fcf8e0 35%, #fcf8e0 65%, 
                  #f7f3ee 97%, #fcf5ee 100%);
  box-shadow: 0px 0px 5px rgba(220,220,200,0.5);
}

.footer-menu a {
  text-decoration: none;
  word-break: keep-all;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  width: 100%;
  line-height: 100%;
  height: 100%;
  padding: 15px 20px;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
}

.footer-menu>a {
  position: relative;
  color: #420;
  padding: 15px 7px;
}

.footer-menu.collapsed>a {
  color: #642;
}

.footer-sub-menu-container {
  position: absolute;
  bottom: 51px;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 1px 1px 5px rgba(140,140,100,0.2);
}


@media screen and (max-width: 300px) {

  .footer-menu:nth-last-child(2) .footer-sub-menu-container {
    left: unset;
    right: 0px;
    transform: none;
  }

}


@media screen and (max-width: 700px) {

  .footer-menu:last-child .footer-sub-menu-container {
    left: unset;
    right: 4px;
    transform: none;
  }

}


.footer-menu.collapsed .footer-sub-menu-container {
  display: none;
}

.footer-sub-menu-list li {
  height: 45px;
  text-align: center;
  background-color: #fdf3cc;
  background-image: linear-gradient(to bottom,
                    rgba(255,255,230,0.5)  0%, rgba(255,255,240,0.3)  30%,
                    rgba(255,255,240,0.3) 70%, rgba(255,255,230,0.5) 100%);
  border-bottom: 1px solid rgba(250,250,215,0.5);
}

.footer-sub-menu-list li:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.footer-sub-menu-list li:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.footer-sub-menu-list li:hover {
  background-image: linear-gradient(to bottom,
                    rgba(255,255,100,0.5)  0%, rgba(255,255,120,0.3)  30%,
                    rgba(255,255,120,0.3) 70%, rgba(255,255,100,0.5) 100%);
}