@-webkit-keyframes plainbox {
  0% {
      opacity: 0.5;
  }

  100% {
      opacity: 1;
  }
}

@-moz-keyframes plainbox {
  0% {
      opacity: 0.5;
  }

  100% {
      opacity: 1;
  }
}


@-webkit-keyframes glowingbox {
  0% {
      opacity: 1;
  }

  100% {
      opacity: 0.5;
  }
}


@-moz-keyframes glowingbox {
  0% {
      opacity: 1;
  }

  100% {
      opacity: 0.5;
  }
}

#back, #front {
  transition-property: transform;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 1s;
}

.behind {
  transform: translate(50px, 50px);
  -webkit-transform: translate(50px, 50px);
  -moz-transform: translate(50px, 50px);
}

.ahead {
  transform: translate(0px, 100px);
  -webkit-transform: translate(0px, 100px);
  -moz-transform: translate(0px, 100px);
}


.box {
  top: 30px;
  left: 50px;
  color: white;
  transform-style: preserve-3d;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-duration: 1s;
  -webkit-animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-duration: 1s;
  -moz-animation-direction: alternate;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
}

.plain {
  animation-name: plainbox;
  -webkit-animation-name: plainbox;
  -moz-animation-name: plainbox;
  text-shadow: 0 0 2px white, 0 0 2px white;
}

.glowing {
  animation-name: glowingbox;
  -webkit-animation-name: glowingbox;
  -moz-animation-name: glowingbox;
  text-shadow: 0 0 20px white, 0 0 50px white;
}

.Golddust{ position:fixed; top:0; left:0; width:100%; height:113%; pointer-events:none; z-index:99;} 
#Golddust{ pointer-events:none; }

.shiny {
  -webkit-mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
  mask-image: linear-gradient(45deg,#000000 25%,rgba(0,0,0,.2) 50%,#000 75%);
  -webkit-mask-size: 800%;
  mask-size: 800%;
  -webkit-mask-position: 0;
  mask-position: 0;
}

.shiny:hover {
  transition: mask-position 2s ease,-webkit-mask-position 2s ease;
  -webkit-mask-position: 120%;
  mask-position: 120%;
  opacity: 1;
}

/* Effect and Animation */

.floating{animation: float 3s ease-in-out infinite;}
.floating2{	animation: float2 3s ease-in-out infinite;}
.floating3{	animation: float3 4s ease-in-out infinite;}
.floating4{	animation: float4 6s ease-in-out infinite;}
.floating5{	animation: float5 4s ease-in-out infinite;}
.floating6{	animation: float5 3s ease-in-out infinite;}

@keyframes float {
	0% {transform: translatey(0px);}
	50% {transform: translatey(-16px);}
	100% {transform: translatey(0px);	}
}

@keyframes float2 {
	0% {transform: translatey(0px);}
	50% {transform: translatey(20px);}
	100% {transform: translatey(0px);	}
}
@keyframes float3 {
	0% {transform: translatey(0px);}
	50% {transform: translatey(30px);}
	100% {transform: translatey(0px);	}
}

@keyframes float4 {
	0% {transform: translatey(0px);}
	50% {transform: translatey(40px);}
	100% {transform: translatey(0px);	}
}

@keyframes float5 {
	0% {transform: translatey(0px);}
	50% {transform: translatey(-25px);}
	100% {transform: translatey(0px);	}
}
@keyframes float6 {
	0% {transform: translatey(0px);}
	50% {transform: translatey(-155px);}
	100% {transform: translatey(0px);	}
}

@media (max-width: 768px) {
  @keyframes float2 {
    0% {transform: translatey(0px);}
    50% {transform: translatey(10px);}
    100% {transform: translatey(0px);	}
  }
  @keyframes float4 {
    0% {transform: translatey(0px);}
    50% {transform: translatey(30px);}
    100% {transform: translatey(0px);	}
  }
}