html {
    height: 100%;
}

body {
    background-image: url("bg.png");
    background-repeat: repeat;
    animation: animatedBackground 4s linear infinite;
    margin: 0px;
    height: 100%;
}

@keyframes animatedBackground {
	from { background-position: 283px 0; }
	to { background-position: 0 0; }
}

@keyframes animateLeft {
	from { background-position: 1024px 0; }
	to { background-position: 0 0; }
}

@keyframes animateRight {
	from { background-position: 0 bottom; }
	to { background-position: 1024px bottom; }
}

@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active, .myImg:hover, .myImg:focus, .myImg:active {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.hvr-pulse {
  display: inline-block;
  vertical-align: middle;
  /* -webkit-transform: translateZ(0); */
  /* transform: translateZ(0); */
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes hvr-rotate {
  50% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
}

.version {
    position:absolute;
    height: 20%;
    width: 20%;
    left:80%;
    top:0%;
}

.versionImg {
    max-width: 100%;
    max-height: 100%;
    display:block;
    float: right;
}

.myLogo {
    display:block;
    margin: auto;
    max-width: 200%;
    max-height: 200%;
    padding-top: 10px;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
    -webkit-animation-name: hvr-rotate;
    animation-name: hvr-rotate;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animatedTop {
    background-image: url("topbg.png");
    background-repeat: repeat-x;
    height: 10%;
    width: 100%;
    animation: animateLeft 2s linear infinite;
}

.animatedBot {
    background-image: url("botbg.png");
    background-repeat: repeat-x;
    height: 10%;
    width: 100%;
    animation: animateRight 2s linear infinite;
    display: table;
}

.myImg {
    max-width: 100%;
    max-height: 100%;
    display:block;
    margin: auto;
}

.myImgNoAnim {
    max-width: 100%;
    max-height: 100%;
    display:block;
    margin: auto;
}

.midLink {
    
}

.marginBox {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: 50%;
    min-width: 100px;
}

.middleTop {
    height: 15%;
    width: 100%;
}

.middleBox {
    height: 65%;
    width: 100%;
    display: table;
}

.slider {
    height: 100%;
    width: 50%;
    display: table-cell;
    vertical-align: middle;
    padding-left:2%;
    padding-right:2%;
}

.buttons {
    height: 100%;
    width: 50%;
    display: table-cell;

}

.playonline {
    height: 50%;
    width: 100%;
    display: table;
}

.playonlinecell{
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    padding:5%;
}

.downloadrow {
    height: 50%;
    width: 100%;
    display: table;
}

.download {
    height: 100%;
    width: 40%;
    display: table-cell;
    vertical-align: middle;
}

.dlicon {
    height: 100%;
    width: 20%;
    display: table-cell;
    vertical-align: middle;
    padding:1%;
}