img[data-sizes="auto"] { 
    display: block; 
    width: 100%; 
}

img {
    border: solid;
    border-color: #82cfad;
    border-width: 2px;
}

.mainnav {
    margin-bottom: 0;
}

.banner-container {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 30px 0;
}

@media only screen and (max-width: 40em) {
    .banner-container {
        padding: 10px 0;
    }
}

.product .button:hover {
    animation: shake 0.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); }
}

.first.button.expanded {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
    animation: pulse 3s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}
.first.button.expanded:hover {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
    animation: none;
}