.links{
	position: absolute;
	bottom: 20px;
	left: 20px;
}


#shape1_wrapper{
	width: 700px;
	margin-left: 20%;
	margin-right: 20%;
	min-width: 100%;
	background-color: black;
}
/*-----------------Shape 1 A-------------*/

#shape1_a div{
	animation: none;
}

#shape1_a div:hover {
   	display: inline-block;
  	animation: wiggle 10s infinite;
}

#shape1_a{
	padding-top: 15px;
	float: left;

}

#shape1_a div{
	width: 300px;
	height: 20px;
	margin: 10px;
	background-color: orange;


	animation: sideToSide 0.8s infinite cubic-bezier(.36,.07,.19,.97) both;
  	transform: translate3d(0, 0, 0);
  	perspective: 1000px;
  	

}

a{
	position: relative;
	bottom: 0px;
	left: 0px;
	margin: 50px;
}



/*------------SHAPE 1 B----------------*/

#shape1_b{
	position: absolute;
	top: 0;
	right: 20px;
}

#shape1_b div{
	width: 300px;
	height: 30px;
	margin: 20px;
	background-color: purple;
	opacity: 0.7;


	animation: shake 0.1s infinite cubic-bezier(.36,.07,.19,.97) both;
  	transform: translate3d(0, 0, 0);
  	backface-visibility: hidden;
  	perspective: 1000px;
}

#shape1_b:hover{
	animation: sideToSide 0.8s infinite cubic-bezier(.36,.07,.19,.97) both;
  	transform: translate3d(0, 0, 0);
  	perspective: 1000px;

}
/*------------SHape 1 animations--------------------------*/

@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(0deg); }
   95% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@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 shake {
  10%, 90% {
    transform: translate3d(-1px, 2px, 3px);
  }
  
  20%, 80% {
    transform: translate3d(2px, -1px, 1px);
  }

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

  40%, 60% {
    transform: translate3d(4px, -1px, 2px);
  }
}
  /*-------------------------Shape 2 A---------------*/
#shape2_wrapper{
	/*max-width: 200px;
	max-height: 200px;*/
	margin:200px;
}

/*-----------------------*/
#shape2_a {
  	width: 200px;
	height: 20px;	
  	background-color: orange;
	animation: sideToSide 10s infinite cubic-bezier(.36,.07,.19,.97) both;
}

#shape2_a:hover{
	animation: hoverSide 10s;

}
/*-----------------------*/


.shape2_b {
	width: 200px;
	height: 30px;
	margin: 20px;
	background-color: purple;	
	animation: sideToSide2 10s infinite cubic-bezier(.36,.07,.19,.97) both;
}

.shape2_b:hover{
	width: 800px;
}



/*----------------------*/


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

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

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


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

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

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

@keyframes hoverSide{
	10%, 90% {
    transform: translate3d(0px, 1px, 0px;);
  }
  
  20%, 80% {
    transform: translate3d(0px, 5px, 0px;);
  }

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

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

/*--------------Shape3-------------*/
.shape3_b{
	width: 200px;
	height: 30px;
	margin: 20px;
	background-color: purple;	
	animation: sideToSide3 20s infinite cubic-bezier(.36,.07,.19,.97) both;
}

#shape3_a{
	width: 200px;
	height: 30px;
	margin: 20px;
	background-color: purple;	
	animation: sideToSide3 20s infinite cubic-bezier(.36,.07,.19,.97) both;
}

.shape3_b:hover{
	height: 50px;
	transition: 0.2s;
}

#shape3_a:hover{
	height: 10px;
	transition: 0.2s;

}



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

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

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