/* hide on default, then once everything has loaded,
fadeIn() our content using jquery */
/*#container { display: none; border: none; }*/


/* ----------------------------------------
	Helpers
---------------------------------------- */
/*div { border: solid blue 1px; }*/


/* ----------------------------------------
	Character Defaults
---------------------------------------- */

/* any shared qualities between your two characters */
.character { 
	width: 300px;
}

.thing-1 { 
	height: 20px;
	margin: 10px;
	background-color: orange;
}

.thing-2 { 
	height: 30px;
	margin: 17px;
	background-color: purple;
	opacity: 0.7;
}

#thing-1-container{
	padding-top: 8px;
  padding-right: 50px;
  display: block;
  height: auto;
}

#thing-2-container{
  display: block;
  padding-left: 50px;
  height: auto;
}



/* ----------------------------------------
	Character States
	for each character, there are 5 states ... 

	1. default : what we see when we land on the page
	2. hover : when our cursor is over the character
	3. click : when we click on the character
	4. hover-response : how character responds to its partner being hovered on
	5. click-response : how character responds to its partner being clicked on;
---------------------------------------- */

/* THING 1 */
.thing-1  {
	animation: sideToSide 1s infinite alternate;
}
.thing-1:hover {
	animation: wiggle 10s infinite;
}
.thing-1.click {}

/* THING 1 responding to thing 2 */
.thing-1.hover-response {}
.thing-1.click-response {}


/* THING 2 */
.thing-2 {
	animation: shake 0.1s infinite cubic-bezier(.36,.07,.19,.97) both;
}
#thing-2-container:hover {
	animation: sideToSideTwo 5s infinite cubic-bezier(.36,.07,.19,.97) both;
 	transform: translate3d(0, 0, 0);
}
.thing-2.click {}

/* THING 2 responding to thing 1 */
.thing-2.hover-response {}
.thing-2.click-response {}








@keyframes sideToSide{
  10%, 90% {
    transform: translate3d(-20px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(40px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-40px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(20px, 0, 0);
  }
}

@keyframes sideToSideTwo{
  10%, 90% {
    transform: translate3d(-100px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(30px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-100px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(30px, 0, 0);
  }
}


@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0px, 3px);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0px, 1px);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0px, -3px);
  }

  40%, 60% {
    transform: translate3d(4px, 0px, 2px);
  }
}


@keyframes wiggle {
  10%, 90% {
    transform: translate(-80px, 0);
  }
  
  20%, 80% {
    transform: translate(10px, 0);
  }

  30%, 50%, 70% {
    transform: translate(-100px, 0);
  }

  40%, 60% {
    transform: translate(10px, 0);
  }
}