.navigation {
	width: 100%;
	margin: auto;
	/*position: absolute;*/
}


/*
.navigation img:hover { 
transform: rotate(8deg);
transition: 1s; 
}
*/

.navigation img:hover {
  animation: shake 0.5s;
  animation-iteration-count: 5s;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.imgActive {
	transform: rotate(9deg);
}

.active {
  filter: invert(1) !important;
}


/* frets */

.frets {
	float: left;
	text-align: center;
	height: 150px;
	/*min-width: 100px;*/
	border-left: 2px solid silver;
    border-right: 2px solid gold;
	background-color: #1a0d00;
	box-shadow: inset 2px 2px 35px 25px rgba(0,0,0,0.75), -1px 20px 14px 1px #eee;
    /*filter: grayscale(100%);*/
}

.frets:hover {
	filter: grayscale(0%) !important;
}


.fret0 {
  background-color: #ffffff;
  box-shadow: -1px 20px 14px 1px #eee;
  color: white;
  display: block;	
  width: 170px;
  padding: 7px;
  text-decoration: none;
  }

.fret0 img{
	filter: drop-shadow(2px 4px 6px black);
	transform: rotate(-25deg);
    max-width: 100%;
    max-height: 100%;
	height: auto;
	min-width: 140px;
}
  
  
.fret1 {
  border-left: 12px solid #ffffb3 !important;
  background-color: #331a00;
  color: white;
  display: block;	
  width: 6.5%;
  padding: 7px;
  text-decoration: none;
  }

.fret2 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 6%;
  padding: 7px;
  text-decoration: none;
}

.fret3 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 6%;
  padding: 7px;
  text-decoration: none;
}

.fret4 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 5.5%;
  padding: 7px;
  text-decoration: none;

}
.fret5 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 5%;
  padding: 7px;
  text-decoration: none;
}

.fret6 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 5%;
  padding: 7px;
  text-decoration: none;
}

.fret7 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 4.5%;
  padding: 7px;
  text-decoration: none;
}

.fret8 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 5%;
  padding: 7px;
  text-decoration: none;
}

.fret9 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 5%;
  padding: 7px;
  text-decoration: none;
}

.fret10 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 4.5%;
  padding: 7px;
  text-decoration: none;
}

.fret11 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 4%;
  padding: 7px;
  text-decoration: none;
}

.fret12 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 3.5%;
  padding: 7px;
  text-decoration: none;
}
.fret13 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 3%;
  padding: 7px;
  text-decoration: none;
}

.fret14 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 2%;
  padding: 7px;
  text-decoration: none;
}

.fret15 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 2%;
  padding: 7px;
  text-decoration: none;
}

.fret16 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 1.5%;
  padding: 7px;
  text-decoration: none;
}
.fret17 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 1.5%;
  padding: 7px;
  text-decoration: none;
}
.fret18 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 1%;
  padding: 7px;
  text-decoration: none;
}

.fret19 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 1%;
  padding: 7px;
  text-decoration: none;
}

.fret20 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 1%;
  padding: 7px;
  text-decoration: none;
}

.fret21 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 0.5%;
  padding: 7px;
  text-decoration: none;
}

.fret22 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 0.5%;
  padding: 7px;
  text-decoration: none;
}

.fret23 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 0.5%;
  padding: 7px;
  text-decoration: none;
}

.fret24 {
  background-color: #331a00;
  color: white;
  display: block;
  width: 0.5%;
  padding: 7px;
  text-decoration: none;
  border-right: 2px solid silver;
}


/*
@media only screen and (max-width: 1650px) {
	.fret24, .fret23 {
		display: none;
	}
}

@media only screen and (max-width: 1470px) {
	.fret22, .fret21 {
		display: none;
	}
}

@media only screen and (max-width: 1295px) {
	.fret20, .fret19 {
		display: none;
	}
}

@media only screen and (max-width: 1100px) {
	.fret18, .fret17 {
		display: none;
	}
}

@media only screen and (max-width: 925px) {
	.fret16 {
		display: none;
	}
}

*/

@media only screen and (max-width: 1450px) {
	.fret15, .fret14 {
		display: none;
	}
}

@media only screen and (max-width: 1390px) {
	.fret13, .fret12 {
		display: none;
	}
}

@media only screen and (max-width: 1100px) {
	.fret11, .fret10 {
		display: none;
	}
}

@media only screen and (max-width: 700px) {
	.navigation {
		display: none;
	}
}