.swanky{
    margin-top: 0px;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

input[type='radio'] {
  display: none;
}

label {
  cursor: pointer;
}

.swanky_wrapper {
  width: 320px;
  overflow: hidden;
  border-radius: 4px;
  background: #635852;
}

.swanky_wrapper label {
  padding: 25px;
  float: left;
  border-bottom: 1px solid #293649;
  position: relative;
  width: 100%;
  color: #eff4fa;
  transition: text-indent .15s, height .3s;
  box-sizing: border-box;
}

.swanky_wrapper label img {
  margin-right: 10px;
  position: relative;
  top: 2px;
  width: 16px;
}

.swanky_wrapper label span {
  position: relative;
  top: -3px;
}

.swanky_wrapper label:hover {
  background: #635852;
  border-bottom: 1px solid #635852;
  text-indent: 4px;
}

.swanky_wrapper label:hover .bar {
  width: 100%;
}

.swanky_wrapper label .lil_arrow {
  width: 5px;
  height: 5px;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-top: 2px solid white;
  border-right: 2px solid white;
  float: right;
  position: relative;
  top: 6px;
  right: 2px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.swanky_wrapper__content {
  position: absolute;
  display: none;
  overflow: hidden;
  left: 0;
  width: 100%;
}

.swanky_wrapper__content li {
  width: 100%;
  opacity: 0;
  left: -100%;
  background: #E9DBC2;
    color: black;
  padding: 25px 0px;
  text-indent: 25px;
  box-shadow: 0px 0px #E9DBC2  inset;
  transition: box-shadow .3s,text-indent .3s;
  position: relative;
}

.swanky_wrapper__content li:hover {
  background: #E9DBC2;
  box-shadow: 3px 0px #635852  inset;
  transition: box-shadow .3s linear,text-indent .3s linear;
  text-indent: 31px;
}


input[type='radio']:checked + label .swanky_wrapper__content {
  display: block;
  top: 68px;
  border-bottom: 1px solid #635852;
}

input[type="radio"]:checked + label > .lil_arrow {
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  border-top: 2px solid #635852;
  border-right: 2px solid #635852;
}

input[type='radio']:checked + label {
  height: 325px;
  background: #635852;
  text-indent: 4px;
  transition-property: height;
  transition-duration: .6s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

input[type='radio']:checked + label .bar {
  width: 0;
}

input[type='radio']:checked + label li:nth-of-type(1) {
  -webkit-animation: in 0.15s 0.575s forwards;
          animation: in 0.15s 0.575s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.575s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(2) {
  -webkit-animation: in 0.15s 0.7s forwards;
          animation: in 0.15s 0.7s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.7s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(3) {
  -webkit-animation: in 0.15s 0.825s forwards;
          animation: in 0.15s 0.825s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.825s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(4) {
  -webkit-animation: in 0.15s 0.95s forwards;
          animation: in 0.15s 0.95s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.95s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@-webkit-keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

@keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}