@keyframes mozog {
    0%   {background-position: 0px -10px;}
    50%  {background-position: -80px -10px;}
    100% {background-position: 0px -10px;}
}
@keyframes animatedBackground {
    0%   {background-position: 0 0; background-size: 120% auto;}
    50%  {background-position: 100% 0; background-size: 120% auto;}
    100% {background-position: 0 0; background-size: 120% auto;}
}
body, html {
  height: 100%;
  margin: 0;
  font-family: 'Slabo 27px', serif;
}

.bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.95;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bgimg-1 {
position: relative;
	display: block;
	min-height: 100%;

}
.bgimg-1::after {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../img/hatter-1.jpg");
      animation-name: animatedBackground;
    animation-duration: 40s;
	animation-iteration-count:infinite;
	  content: "";
  opacity: 0.8;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
}

.bgimg-2 {
  background-image: url("../img/hatter-2.jpg");
  min-height: 650px;
}

.bgimg-3 {
  position: relative;
	display: block;
  min-height: 400px;
	z-index: -1;
}
.bgimg-3::after {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../img/hatter-4.jpg");
  min-height: 400px;
	content: "";
	  opacity: 0.8;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
}
.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #ff6600;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 2px;
}
.bgimg-1 h1 {
	margin-top: 3%;
	text-align: center;
	font-size: 5vh;
	line-height: 5vh;
color: white;
text-shadow: 2px 2px 8px #000;	
	border-left: 0px;
}
.bgimg-1 h2 {
	text-align: center;
	font-size: 7vh;
	line-height: 7vh;
text-shadow: 2px 0px 20px #fff;		
}

@media screen and (max-width: 900px) {
	.bgimg-2 {
  min-height: 1020px;
}
@media screen and (max-width: 700px) {
	.bgimg-2 {
  min-height: 810px;
}
}
@media screen and (max-width: 600px) {
.bgimg-1 {
	background-image: url("../img/hatter-1.jpg");
  position: relative;
  opacity: 0.95;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bgimg-1::after {
  background: none;
}
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
    }
}