nav {
  margin: -15px 0 0 60px;
  position: relative;
}

nav img {
  width: 16%;
  min-width: 100px;
}

.nav-rope{
  -ms-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  transform: rotate(-2deg);
  width: 96%;
  margin: -100px 0 0 -10px;
  cursor: pointer;
}
.nav-rope-pins {
  position: relative;
}
.nav-rope-pins i{
  position: absolute;
  width: 17px;
  height: 17px;
  background: url(../images/pin.png);
  z-index: 1000;
}
.nav-rope-pins i:nth-of-type(1) {
  top: -86px;
  left: 48px;
}
.nav-rope-pins i:nth-of-type(2) {
  top: -42px;
  left: 180px;
}
.nav-rope-pins i:nth-of-type(3) {
  top: -23px;
  left: 328px;
}
.nav-rope-pins i:nth-of-type(4) {
  top: -47px;
  left: 479px;
}
.nav-rope-pins i:nth-of-type(5) {
  top: -101px;
  left: 613px;
}
nav a {
  -ms-transform-origin: top;
  -webkit-transform-origin: top;
  transform-origin: top;
  position: absolute;
  display: block;
  font-family: 'Montez', cursive;
  font-size: 1.8em;
  text-decoration: none;
  color: #000;
  width: 100px;
  height: 75px;
  padding: 10px;
  text-align: center;
  line-height: 45px;
  background-size: 100px;
  background-repeat: no-repeat;
  overflow: hidden;
}

nav a:hover:not(:focus) {
  color: #000;
  text-decoration: none;
}

nav a:focus {
  color: #000;
  outline: 0;
}
nav a:nth-of-type(1) {
  top: -37px;
  left: 9px;
  background-image: url(../images/watch.png);
  -ms-transform: rotate(24deg);
  -webkit-transform: rotate(24deg);
  transform: rotate(24deg);
}
@-webkit-keyframes wobble1  {
  0%  { -webkit-transform:  rotate(24deg); }
  10%  { -webkit-transform:  rotate(26deg); }
  40%  { -webkit-transform:  rotate(22deg); }
  100%  { -webkit-transform:  rotate(24deg); }
}
@keyframes wobble1  {
  0%  { -webkit-transform:  rotate(24deg); }
  10%  { -webkit-transform:  rotate(26deg); }
  40%  { -webkit-transform:  rotate(22deg); }
  100%  { -webkit-transform:  rotate(24deg); }
}
nav a:nth-of-type(1):hover {
  -webkit-animation: wobble1 0.5s;
  animation: wobbleone 0.5s;
}

nav a:nth-of-type(2) {
  top: 7px;
  left: 138px;
  background-image: url(../images/listen.png);
  -ms-transform: rotate(13deg);
  -webkit-transform: rotate(13deg);
  transform: rotate(13deg);
}
@-webkit-keyframes wobble2  {
  0%  { -webkit-transform:  rotate(13deg); }
  10%  { -webkit-transform:  rotate(15deg); }
  40%  { -webkit-transform:  rotate(11deg); }
  100%  { -webkit-transform:  rotate(13deg); }
}
@keyframes wobble2  {
  0%  { -webkit-transform:  rotate(13deg); }
  10%  { -webkit-transform:  rotate(15deg); }
  40%  { -webkit-transform:  rotate(11deg); }
  100%  { -webkit-transform:  rotate(13deg); }
}
nav a:nth-of-type(2):hover {
  -webkit-animation: wobble2 0.5s;
  animation: wobble2 0.5s;
}

nav a:nth-of-type(3) {
  top: 26px;
  left: 284px;
  padding-top: 13px;
  background-image: url(../images/about.png);
  -ms-transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg);
  transform: rotate(-1deg);
}
@-webkit-keyframes wobble3  {
  0%  { -webkit-transform:  rotate(-1deg); }
  10%  { -webkit-transform:  rotate(1deg); }
  40%  { -webkit-transform:  rotate(-3deg); }
  100%  { -webkit-transform:  rotate(-1deg); }
}
@keyframes wobble3  {
  0%  { -webkit-transform:  rotate(-1deg); }
  10%  { -webkit-transform:  rotate(1deg); }
  40%  { -webkit-transform:  rotate(-3deg); }
  100%  { -webkit-transform:  rotate(-1deg); }
}
nav a:nth-of-type(3):hover {
  -webkit-animation: wobble3 0.5s;
  animation: wobble3 0.5s;
}

nav a:nth-of-type(4) {
  top: 3px;
  left: 433px;
  background-image: url(../images/connect.png);
  -ms-transform: rotate(-16deg);
  -webkit-transform: rotate(-16deg);
  transform: rotate(-16deg);
}
@-webkit-keyframes wobble4  {
  0%  { -webkit-transform:  rotate(-16deg); }
  10%  { -webkit-transform:  rotate(-14deg); }
  40%  { -webkit-transform:  rotate(-12deg); }
  100%  { -webkit-transform:  rotate(-16deg); }
}
@keyframes wobble4  {
  0%  { -webkit-transform:  rotate(-16deg); }
  10%  { -webkit-transform:  rotate(-14deg); }
  40%  { -webkit-transform:  rotate(-12deg); }
  100%  { -webkit-transform:  rotate(-16deg); }
}
nav a:nth-of-type(4):hover {
  -webkit-animation: wobble4 0.5s;
  animation: wobble4 0.5s;
}

nav a:nth-of-type(5) {
  top: -47px;
  left: 567px;
  background-image: url(../images/shows.png);
  -ms-transform: rotate(-26deg);
  -webkit-transform: rotate(-26deg);
  transform: rotate(-26deg);
}
@-webkit-keyframes wobble5  {
  0%  { -webkit-transform:  rotate(-26deg); }
  10%  { -webkit-transform:  rotate(-24deg); }
  40%  { -webkit-transform:  rotate(-22deg); }
  100%  { -webkit-transform:  rotate(-26deg); }
}
@keyframes wobble5  {
  0%  { -webkit-transform:  rotate(-26deg); }
  10%  { -webkit-transform:  rotate(-24deg); }
  40%  { -webkit-transform:  rotate(-22deg); }
  100%  { -webkit-transform:  rotate(-26deg); }
}
nav a:nth-of-type(5):hover {
  -webkit-animation: wobble5 0.5s;
  animation: wobble5 0.5s;
}

@-webkit-keyframes bannerwobble  {
  0%  { -webkit-transform:  rotate(0deg); }
  10%  { -webkit-transform:  rotate(1deg); }
  40%  { -webkit-transform:  rotate(-1deg); }
  100%  { -webkit-transform:  rotate(0deg); }
}
@keyframes bannerwobble  {
  0%  { -webkit-transform:  rotate(0deg); }
  10%  { -webkit-transform:  rotate(1deg); }
  40%  { -webkit-transform:  rotate(-1deg); }
  100%  { -webkit-transform:  rotate(0deg); }
}
img.banner:hover {
  -webkit-animation: bannerwobble 0.5s;
  animation: bannerwobble 0.5s;
}