@charset "utf-8";
/* CSS Document */

body, ul, li {
	padding:0;
	margin:0;
}

.wrapper {
 min-height: 460px;
  position: absolute;
  overflow: hidden;
  display: table;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.sky {
  background:url(../Images/backgroundSky.jpg) no-repeat bottom left;
  background-size:cover;
  position: absolute;
  width: 110vw;
  min-height: 100vh !important;
  left:-5vw;
  top: 0;
  padding:0;
  margin:0;
}



.bg {
  background:url(../Images/House.png) no-repeat bottom left;
  background-size:100%;
  position: absolute;
  width: 110vw;
  min-height: 100vh !important;
  left:-5vw;
  top: 0;
  padding:0;
  margin:0;
}



.tower {
	background:url(../Images/LizTower.png) no-repeat;
	background-size:contain;
	width:1000px;
	min-height:190vh;
	position: absolute;
	left:75vw;
	top:-25vw;
}




.title2, .subTitle2, .justText {
  text-shadow: 0 6px 6px rgba(0, 0, 0, 0.2);
  position: absolute;
  width: 200vw;
  left:40vw;
  text-overflow:clip;
  text-wrap:none;
  color:#fff;
}

.title2 {
	 font-family: 'Lobster', cursive;
	  font-size: 5.2vw;
	  top: 28vh;
	  
}

.subTitle2 {
	font-family: 'Kaushan Script', cursive;
  	font-size: 1.5vw;
	top: 43vh; 
	letter-spacing:-0.1ex;
	line-height:1.5ex;
}

.justText {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  	font-size: 0.8vw;
	left: 41vw;
	top: 46vh; 
	letter-spacing:-0.1ex;
	line-height:2ex;
}
	


.titleBackPlate {	
	background:#000;
	opacity:0.2;
	border-radius: 10px;
	position: absolute;
    width: 35vw;
	height: 27vh;
    left:39vw;
	top: 27vh; 
	
}



.board {
  margin: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
}

.board.cloud-1 {
  background-image:url(../Images/cloud1.png);
  width: calc(369vw /20);
  height: calc(178vw /20);
}


.board.cloud-2 {
  background-image: url(../Images/cloud2.png);
  width: calc(783vw /20);
  height: calc(256vw /20);
  
}
.board.cloud-3 {
  background-image: url(../Images/cloud3.png);
    width: calc(609vw /20);
  	height: calc(277vw /20);
}
.board.cloud-4 {
  background-image: url(../Images/cloud4.png);
      width: calc(503vw /20);
  		height: calc(218vw /20);
}

.board.cloud-5 {
  background-image: url(../Images/cloud5.png);
      width: calc(401vw /20);
      height: calc(208vw /20);
}

.board.unionJack {
		background-image:url(../Images/UnionJack.gif);
		width: calc(3.26vw * 1.7);
		height: calc(2.72vw * 1.7);
		left: 14vw;
		top: 45vh;		
}

.board.flagPole {
	background-color:#D3C4A9;
	width:0.3vw;
	height:500px;
	left: 13.7vw;
	top: 45vh;
}

.hanger {
  position: absolute;
}
.hanger.position-1 {
  left: 12vw;
  top: 12vh;
}
.hanger.position-2 {
  left: 22vw;
  top: 28vh;
}
.hanger.position-3 {
  left: 50vw;
  top: 20vh;
  
}
.hanger.position-4 {
  left: 60vw;
  top: -10vh;
}
.hanger.position-5 {
  left: 75vw;
  top: -1vh;
}
.hanger.position-6 {
  left: 35vw;
  top: 5vh;
}
.hanger.position-7 {
  left: 5vw;
  top: 30vh;
}
.hanger.position-8 {
  left: -5vw;
  top: 2vh;
}
.hanger.position-9 {
  left: 90vw;
  top: 45vh;
}

.hanger.position-l {
  left: 93vw;
  top: 10vh;
}

.swing-sky {
  -webkit-animation: swing 10s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 10s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 10s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.swing-1 {
  -webkit-animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.swing-2 {
  -webkit-animation: swing 3.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 3.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 3.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.swing-3 {
  -webkit-animation: swing 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.swing-4 {
  -webkit-animation: swing 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.swing-5 {
  -webkit-animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: swing 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}






@-webkit-keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
  }

  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg);
  }

  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
  }

  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg);
  }

  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg);
  }
}

@-moz-keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
  }

  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg);
  }

  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
  }

  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg);
  }

  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg);
  }
}

@-ms-keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
  }

  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg);
  }

  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
  }

  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg);
  }

  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg);
  }
}

@keyframes tilt {
  0% {
    -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
  }

  25% {
    -webkit-transform: rotateX( 30deg);
    -moz-transform: rotateX( 30deg);
    transform: rotateX( 30deg);
  }

  50% {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
  }

  75% {
    -webkit-transform: rotateY( 30deg);
    -moz-transform: rotateY( 30deg);
    transform: rotateY( 30deg);
  }

  100% {
    -webkit-transform: rotateZ( 20deg);
    -moz-transform: rotateZ( 20deg);
    transform: rotateZ( 20deg);
  }
}

@-webkit-keyframes swing {
  0% {
/*     -webkit-transform: rotateZ(10deg);
    -moz-transform: rotateZ(10deg);
   	transform: rotateZ(10deg); */
	-webkit-transform:translate(50px,0px);
	-moz-transform: translate(50px,0px);
	transform: translate(50px,0px);
  }

  100% {
	-webkit-transform:translate(-50px,0px);
	-moz-transform: translate(-50px,0px);
	transform: translate(-50px,0px);
  }
}

@-moz-keyframes swing {
  0% {
	-webkit-transform:translate(50px,0px);
	-moz-transform: translate(50px,0px);
	transform: translate(50px,0px);
  }

  100% {
	-webkit-transform:translate(-50px,0px);
	-moz-transform: translate(-50px,0px);
	transform: translate(-50px,0px);
  }
}

@-ms-keyframes swing {
	0%	{
	-webkit-transform:translate(50px,0px);
	-moz-transform: translate(50px,0px);
	transform: translate(50px,0px);
  }

  100% {
	-webkit-transform:translate(-50px,0px);
	-moz-transform: translate(-50px,0px);
	transform: translate(-50px,0px);
  }
}

@keyframes swing {
  0% {
    	-webkit-transform:translate(50px,0px);
	-moz-transform: translate(50px,0px);
	transform: translate(50px,0px);
  }

  100% {
	-webkit-transform:translate(-50px,0px);
	-moz-transform: translate(-50px,0px);
	transform: translate(-50px,0px);
  }

}