/* Menubottom */
.menubottom{
  display:none}
  @media screen and (max-width:800px){
    .menubottom{
      position:relative/*fixed*/;
      right:0;
      left:0;
      z-index:500;
      bottom:0;
    }


.ripple a {
  border-radius: 5px;
  height: 50px;
  width: 50px;
  align-items: center;
  border: solid 2px var(--main-color);
  border-radius: 1px 20px 1px;
  background: #967e7280;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transform-origin: bottom;
  color: #fff;  
  margin: 0;
  margin-left: -8px;
}

.ripple a:hover {
  border-radius: 5px;
  height: 50px;
  width: 50px;
  align-self: flex-end;
  border-radius: 100px;
  border: solid 2px #2c1c14;
  background: #b6692c;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transform-origin: bottom;
  color: #fff;
  padding: 3px 3px;
}


button:hover {
color: white;
}
    .menubottom nav ul{
      display:flex!important;
      width:100%!important;
      justify-content:space-between!important;
      align-self: center;
      justify-self: center;
      margin-bottom:1px;
      flex-direction:row!important;
      list-style:none;
    }
    .menubottom nav ul li{
      width:100%!important;
      list-style:none;
    }
    .menubottom nav ul li a{
      display:block;
      text-decoration:none;
    }
    .menubottom nav ul li a svg{
      width:30px;
      height:43px;
      fill:#9aa3a9;
    }
    .menubottom nav ul li a span{
      color: #fff;
      position:relative;
      font-size:13px;
      display:block;
      top: -5px;
      padding-top: -25px;
      width:30px;
      height:20px;
    }
  }
  @media screen and (max-width:768px){
    .menubottom{
      margin-left:5px;
      text-align:center;
      width:93%;
      position:fixed;
      display:block;
      justify-self: center;
    }
    .menubottom nav{
      background-color: #bbb1a7;
      display:block;
      position:relative;
      padding: 2px;
      box-shadow:0 -3px 3px rgba(0,0,0,.3);
      border-radius: 1px 20px 1px;
      border: solid 2px #987f74;
      margin-bottom: 13px;
      box-shadow: -4px 4px 2px #000000b8, 0 0px 0px #fda;
    }
    .menubottom ul li{
      float:center;
      width:100px;
      height:48px;
      transition:background-color 0.1s;
      transition:all .5s linear;
      background-position:center;
      display:block;
  /* Rotate div */
  -ms-transform: rotate(360deg); /* IE 9 */
  -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
  transform: rotate(360deg);

  -webkit-transition: transform 2s; /* For Safari 3.1 to 6.0 */
  transition: transform 2s;
}
@keyframes spin-2 {
to {
  filter: hue-rotate(360deg);
}
}
@keyframes rot {
0% {
  transform: rotateX(60deg) rotate(45deg);
}
100% {
  transform: rotateX(60deg) rotate(405deg);
}
}


.rotate player{
-webkit-transition: -webkit-transform 1.1s ease-in-out;
transition: transform 1.1s ease-in-out;
}
.rotate player:hover{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

@keyframes melayang {
0% {
transform: translateY(-8px);
}

50% {
transform: translateY(-4px);
}

100% {
transform: translateY(-8px);
}
}
    }