.xmashat {
	top: 24px;
	width: 60px;
	height: 60px;
	position: absolute;
}
.xmashat .cap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("../images/xmas-hat-cap.png");
	background-size: 100%;
	background-repeat: no-repeat;
}
.xmashat .pom {
	width: 16px;
	left: -7px;
	height: 40px;
	position: absolute;
	background-image: url("../images/xmas-hat-pompom.png");
	background-size: 100%;
	background-repeat: no-repeat;
	z-index: 1;
	top: 0px;
	-webkit-transform-origin: top right;
	-ms-transform-origin: top right;
	transform-origin: top right;
	-webkit-animation: waveHat 1.5s ease-in-out infinite;
	animation: waveHat 1.5s ease-in-out infinite;
}
@keyframes         waveHat{0%,100%{-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);}50%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}}
@-webkit-keyframes waveHat{0%,100%{-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);}50%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}}

@media screen and (max-width: 767px) {
  .xmashat {
    top: 40px;
  }
}