@import url(http://fonts.googleapis.com/css?family=Titillium+Web:600);
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #333333;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
  padding-top: 20px;
}

.navigation {
  width: 100%;
  text-align: center;
  font: normal 1em/1.5em "Titillium Web", helvetica;
}
.navigation li {
  float: left;
}

.menu-item {
  width: 33.333%;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}
.menu-item ul {
  position: absolute;
  left: 9999px;
  opacity: 0;
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
}

a.menu-link {
  display: block;
  padding: 15px;
  margin-bottom: 6px;
}

a.first {
  background: #c0392b;
}
a.second {
  background: #c8462b;
}
a.third {
  background: #d3592b;
}

a.second {
  background: #C8462B;
}

.dropdown {
  width: 100%;
  padding: 20px;
}
.dropdown a, .dropdown a:hover, .dropdown a:visited, .dropdown a:focus {
  text-decoration: none;
  color: #222222;
}
.dropdown:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.dropdown:nth-child(even) {
  background: #eeeeee;
  transform: perspective(1000px) rotateX(-20deg);
  transform-origin: top;
  -webkit-transform: perspective(1000px) rotateX(-20deg);
  -webkit-transform-origin: top;
}
.dropdown:nth-child(odd) {
  background: #f5f5f5;
  transform: perspective(1000px) rotateX(20deg);
  transform-origin: bottom;
  -webkit-transform: perspective(1000px) rotateX(20deg);
  -webkit-transform-origin: bottom;
  margin-top: -11px;
}

.menu-item:hover ul, .menu-item:focus ul {
  position: static;
  bottom: 200px;
  opacity: 1;
}

@media only screen and (max-width: 37.5em) {
  .navigation li {
    float: none;
    clear: both;
  }

  .menu-item {
    width: 100%;
  }
}