* {
  box-sizing: border-box;
}


.contentBox{
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.buttonBox{
  margin: 0 20px 40px;
  position:relative;
  max-width: 220px;
  min-width: 170px;
  flex: 20%;
}

button{
  width:100%;
  height:30px;
  position:relative;
  background:#3E442B;
  text-transform:uppercase;
  color:white;
  font-weight:700;
  letter-spacing:1px;
  border:none;
  font-size:11px;
  outline:none;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  cursor: pointer;
}

/* NINTH HOVER */

#ninth>button{
  transition:all .5s ease-in-out;
}

#ninth:hover button{
  background:#00B295;
  color:#ffffff;
}

@keyframes h{
  0%{transform:translate(0, 0);}
  50%{transform:translate(50px, 5px);}
  75%{transform:translate(5px, 5px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes o{
  0%{transform:translate(0, 0);}
  25%{transform:translate(-4px, 0);}
  50%{transform:translate(3px, 4px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes v{
  0%{transform:translate(0, 0);}
  20%{transform:rotate(360deg);}
  50%{transform:scale(2);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes e{
  0%{transform:translate(0, 0);}
  20%{transform:translate(-10px, -2px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes r{
  0%{transform:translate(0, 0);}
  20%{transform:translate(0, 10px);}
  80%{transform:translate(0, 32px);}
  100%{transform:translate(0, 0);}
}

@keyframes t{
  0%{transform:translate(0, 0);}
  20%{transform:translate(0, -10px);}
  40%{transform:translate(0, 0);}
  60%{transform:translate(0, -10px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes n{
  0%{transform:translate(0, 0);}
  50%{transform:skewY(50deg);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}


@media(max-width: 1200px) {
  #content-box {
    width: 100%; 
  }
}