* Grow Shadow Logo */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
	width: 40%;
	margin-left:30%;
	
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Grow Rotate */
	.hvr-grow-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
	

		
            background-size: 100%; 
		background-position: top;
		background-repeat: no-repeat;
            background-color: transparent;
   

  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 3vw;
  margin: 0%;
		
  cursor: pointer;
		border: none;
}
.hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active {
  -webkit-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
}


/* Bounce In Logo */
.hvr-bounce-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
		width: 80%;
	margin-top:10%;
	margin-left:10%;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	
	
}

/* Bounce In Square */
.hvr-bounce-in-square {
 
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
		
}
.hvr-bounce-in-square:hover, .hvr-bounce-in-square:focus, .hvr-bounce-in-square:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	
	
}





.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("images/bg.png");
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/*load slide in*/

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background-color: transparent;
  padding: 30px;
}


.embossTile {
  box-shadow: inset 0 2px 13px 0px rgba(255, 255, 255, 0.6), inset 0 -9px 10px -5px rgba(0, 0, 0, 0.9), 0 5px 10px -5px transparent;
}
.noTouchy {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
@keyframes "wobble" {
  0% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -o-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
  50% {
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  100% {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
@-moz-keyframes wobble {
  0% {
    -moz-transform: translateX(0%);
    transform: translateX(0%);
  }
  50% {
    -moz-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  100% {
    -moz-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
@-webkit-keyframes "wobble" {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  50% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  100% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
@-ms-keyframes "wobble" {
  0% {
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
  50% {
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  100% {
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
@-o-keyframes "wobble" {
  0% {
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
  50% {
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  100% {
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "MyWebFont";
  background-image: url("images/solve_bg.png");
	background-attachment: fixed;
		background-size: cover;
}
body * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.embossTile {
  box-shadow: inset 0 2px 13px 0px rgba(255, 255, 255, 0.6), inset 0 -9px 10px -5px rgba(0, 0, 0, 0.9), 0 5px 10px -5px black; 
	-webkit-transform: translateZ(0);
}
.noTouchy {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	-webkit-transform: translateZ(0);
}
@keyframes "wobble" {
  0% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -o-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
  50% {
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  100% {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
@-moz-keyframes wobble {
  0% {
    -moz-transform: translateX(0%);
    transform: translateX(0%);
  }
  50% {
    -moz-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  100% {
    -moz-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
@-webkit-keyframes "wobble" {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  50% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  100% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
@-ms-keyframes "wobble" {
  0% {
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
  50% {
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  100% {
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
@-o-keyframes "wobble" {
  0% {
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
  50% {
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  100% {
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
.scramble {
  margin: 30px auto;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	
	
}
.scramble * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	
}
.scramble .scrambled-letter {

  display: inline-block;
  margin: 0;
  background: transparent;
  padding: 12px;
  color: #ffffff;
  text-shadow: -1px -1px 3px #928c86;
  cursor: move;
  width: 8%;
  height: px;
  font-size: 9vw;
  font-family: "MyWebFont";
  border-radius: 14%;
  vertical-align: middle;
  z-index: 10;
	-webkit-transform: translateZ(0);
}
.scramble .scrambled-letter.invisible {
  opacity: 0;
	-webkit-transform: translateZ(0);
}
.scramble .scrambled-letter.drag-clone {
  cursor: move;
  position: absolute;
  pointer-events: none;
  z-index: 9999;
	-webkit-transform: translateZ(0);
}
.scramble .scrambled-letter.drag-clone.snap-to-place {
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  transition: all 500ms ease;
	-webkit-transform: translateZ(0);
}
.scramble .spacer {
  display: inline-block;
  width: 20px;
  height: 92.5px;
  vertical-align: middle;
	-webkit-transform: translateZ(0);
}
.scramble.dragging .spacer {
  -webkit-transition: width 500ms ease;
  -moz-transition: width 500ms ease;
  -o-transition: width 500ms ease;
  -ms-transition: width 500ms ease;
  transition: width 500ms ease;
  width: 30px;
	-webkit-transform: translateZ(0);
}
.scramble.dragging .spacer.hover {
  width: 10%;
	-webkit-transform: translateZ(0);
}
.scramble.dragging .spacer.hover:before {
  content: "\25bc";
  color: #928c86;
	background-image
  position: relative;
  top: -30%;
	width:100%;
	-webkit-transform: translateZ(0);
}
.scramble.dragging .scrambled-letter {
  -webkit-animation: wobble 300ms infinite;
  -moz-animation: wobble 300ms infinite;
  -ms-animation: wobble 300ms infinite;
  -o-animation: wobble 300ms infinite;
  animation: wobble 300ms infinite;
		-webkit-transform: translateZ(0);
}
.scramble.dragging .drag-clone {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  -o-animation: none;
  animation: none;
	-webkit-transform: translateZ(0);
}
.scramble.solved {
  background-color: #b74fd1;
}

@font-face{
	font-family: 'MyWebFont';
	src:url("fonts/FrankfurterNickJr.ttf");
}

#loadOverlay{display: none;}

/*bganimate*/
*{
    margin: 0px;
    padding: 0px;
}

body{
    font-family: 'Exo', sans-serif;
	
}


.context {
    width: 100%;
    position: absolute;
    top:50vh;
    
}

.context h1{
    text-align: center;
    color: ;
    font-size: 50px;
}


.area{
    background: ;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
    width: 100%;
    height:100vh;
    
   
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

	
	
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20%;
    height: 20%;
    background: rgba(transparent);
    animation: animate 25s linear infinite;
    bottom: -150px;
	
	
   
}

.circles li:nth-child(1){
    left: 25%;
     width: 17%;
    height: 11%;
    animation-delay: 0s;
	
}


.circles li:nth-child(2){
    left: 10%;
    width: 17%;
    height: 11%;
    animation-delay: 2s;
    animation-duration: 12s;
	
}

.circles li:nth-child(3){
    left: 70%;
    width: 17%;
    height: 11%;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
     width: 17%;
    height: 11%;
    animation-delay: 0s;
    animation-duration: 8s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 17%;
    height: 11%;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 17%;
    height: 11%;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
     width: 17%;
    height: 11%;
    animation-delay: 0s;
}

.circles li:nth-child(8){
    left: 50%;
     width: 17%;
    height: 11%;
    animation-delay: 0s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
     width: 17%;
    height: 11%;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
     width: 17%;
    height: 11%;
    animation-delay: 0s;
    animation-duration: 11s;
}

.nextlevel {
  font-family: 'Lato', sans-serif;
  font-size: 1.5em;
  text-transform: uppercase;
	margin-left: 42%;
-webkit-transform: translateZ(0);
	width: 16%;
	margin-top: 2%;
	
		
}

.letsplay {
  font-family: 'Lato', sans-serif;
  font-size: 1.5em;
  text-transform: uppercase;
	margin-left: 40%;
-webkit-transform: translateZ(0);
	width: 20%;
	
		
}





.instructions {
  font-family: 'Lato', sans-serif;
  font-size: 1.5em;
  text-transform: uppercase;
	margin-left: 20%;
-webkit-transform: translateZ(0);
	width: 60%;
	margin-top:0%;
	
		
}

.correct {
  font-family: 'Lato', sans-serif;
  font-size: 1.5em;
  text-transform: uppercase;
	margin-left: 35%;
-webkit-transform: translateZ(0);
	width: 30%;
	margin-top:3%;
	-webkit-box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
-moz-box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
		
}

.square1 {
  font-family: 'Lato', sans-serif;
  font-size: 1.5em;
  text-transform: uppercase;
	margin-left: 35%;
-webkit-transform: translateZ(0);
	width: 15%;
	margin-top:3%;
	-webkit-box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
-moz-box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
		
}

.square2 {
  font-family: 'Lato', sans-serif;
  font-size: 1.5em;
  text-transform: uppercase;
	margin-left: ;
-webkit-transform: translateZ(0);
	width: 15%;
	margin-top:3%;
	-webkit-box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
-moz-box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
		
}

.square3 {
  font-family: 'Lato', sans-serif;
  font-size: 1.5em;
   text-transform: uppercase;
		margin-left: 35%;
-webkit-transform: translateZ(0);
	width: 15%;
	margin-top:1%
	;
	-webkit-box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
-moz-box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
		
}

a {
    color: #0060B6;
    text-decoration: none;
}

a:hover 
{
     color:#00A0C6; 
     text-decoration:none; 
     cursor:pointer;  
}

.square4 {
  font-family: 'Lato', sans-serif;
  font-size: 1.5em;
  text-transform: uppercase;
	margin-left: ;
-webkit-transform: translateZ(0);
	width: 15%;
	margin-top:1%;
	-webkit-box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
-moz-box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
box-shadow: -12px 14px 5px 0px rgba(0,0,0,0.44);
	
	
		
}

.answer {
  font-family: 'Lato', sans-serif;
  font-size: 1.5em;
  text-transform: uppercase;
	margin-left: 8%;
-webkit-transform: translateZ(0);
	width: 15%;
	margin-top:3%;
	
	
		
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 100%;
        border-radius: 0;
	
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 100%;
        border-radius: 50%;
			 
    }

}



.hidden {
    display: none;
}