* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Niconne", sans-serif;
}

@import url(http://fonts.googleapis.com/css?family=Niconne);

section {
  padding: 100px 0;
  background-color: #009587;
  border-bottom: 1px solid #ccc;
  &:nth-child(2n +2) {
    background-color: #5F7C8A;
  }
}

a {
  text-decoration: none;
  color: white;
  width: 25%;
  display: block;
  margin: 0 auto;
  position: relative;
  text-align: center;
  border: 1px solid whitesmoke;
  padding: 40px 0;
  font-size: 1.2em;
  font-style: italic;
  letter-spacing: .1em;
  transition: all, 0.3s;
  @media screen and (max-width: 700px) {
    width: 50%;
  }
  @media screen and (max-width: 500px) {
    width: 80%;
  }
  &:after {
    content: "";
    display: inline-block;
    height: 2px;
    position: absolute;
    width: 60px;
    background-color: whitesmoke;
    top: 50%;
    right: -30px;
    animation: spin .3s;
  }
  &:hover:after {
    animation: spin-out 0.3s;
    animation-timing-function: ease-out;
    background-color: #1a1a1a;
  }
  &:hover {
    background-color: whitesmoke;
    color: #1a1a1a;
    transition: all, 0.3s;
  }
}

@keyframes spin-out {
  from {
   transform: rotate(180deg) 
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}