@charset "UTF-8";
/* CSS Document */

body {
	background-color: #fff;
	background-image: url(http://numode.net/madness2.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	margin-top: 150px;
	margin-left: 50px;
}

#container {
	border-top-color:#b4d5fc;
	border-top-width: 40px;
	height: 335px;
	margin-left: 0px;
	margin-top: 335px;
	
}

a {
	text-decoration: none;
	border-top-style: none;	
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;

}

img
	{  border-style: none;
}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	padding-top: 20px;
	color: #010101;	
	line-height: 24px;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #878787;
}



p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: rgba(204,204,204,0.7);
}


.layer1 {
	z-index: 1;
	background-color: rgba(204,204,204,0.7);
	background-image: url(http://numode.net/numo1.gif);
	background-repeat: no-repeat;
	background-position: center center;
	padding-bottom: 60px;
	border-bottom: 60px;
	border-bottom-color:#FFF;
	border-style: hidden;
	height: 300px;
	width: 1017px;
	position: absolute;

	
}

.layer2 {
	z-index: 2;
	background-image: url(http://numode.net/numo2.gif);
	background-repeat: no-repeat;
	background-position: center center;
	height: 350px;
	width: 1017px;
	position: absolute;
	-webkit-animation-name: shake2;
	-webkit-animation-duration: 0.05s;
	-webkit-animation-iteration-count: 3;
	-webkit-animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
}

.layer3 {
	z-index: 3;
	background-image: url(http://numode.net/numo3.gif);
	background-repeat: no-repeat;
	background-position: center center;
	height: 340px;
	width: 1017px;
	position: absolute;
	-webkit-animation-name: shake3;
	-webkit-animation-duration: 0.07s;
	-webkit-animation-iteration-count: 4;
	-webkit-animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
}


.layer1:hover {
  -webkit-animation: shake 1s infinite; /* Saf5, Chrome */
     -moz-animation: shake 1s infinite; /* FF5+ */
      -ms-animation: shake 1s infinite; /* IE10 */
}

.layer2:hover {
  -webkit-animation: resize 2s infinite; /* Saf5, Chrome */
     -moz-animation: resize 2s infinite; /* FF5+ */
      -ms-animation: resize 2s infinite; /* IE10 */
	  -webkit-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
   		-moz-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
   		 -ms-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
    		 -o-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
       			 transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

.layer3:hover {
  -webkit-animation: updown 1s infinite; /* Saf5, Chrome */
     -moz-animation: updown 1s infinite; /* FF5+ */
      -ms-animation: updown 1s infinite; /* IE10 */
}

@-webkit-keyframes updown {	
  0%   { opacity: 1.0; top: 0px; }
  50%  { opacity: 1.0; top: -2px; }
  100% { opacity: 1.0; top: 2px; }
}
@-moz-keyframes updown {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-ms-keyframes updown {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}


@-webkit-keyframes resize {
  0% { padding: 0; }
  50% { padding: 0 30px; background-color:rgba(255,0,0,0.2); }
  100% { padding: 0 140px; background-color:rgba(255,0,0,0.9); }
}

@-webkit-keyframes shake {
  0% { padding: padding-bottom: 60px; border-bottom: 60px; }
  50% { padding: -10 0; background-color:rgba(0,255,0,0.2); padding-bottom: 60px; border-bottom: 60px; }
  100% { padding: 10px 0; background-color:rgba(0,255,0,0.5); padding-bottom: 60px; border-bottom: 60px; }
}
	
	
@-webkit-keyframes shake2 {
  0% { padding: 0; }
  50% { padding: -2px 0; background-color:rgba(0,0,0,0.0); }
  100% { padding: 2px 0; background-color:rgba(0,0,0,0.0); }
}

@-webkit-keyframes shake3 {
  0% { padding: 0; }
  50% { padding: 0 -2px; background-color:rgba(0,0,0,0.0); }
  100% { padding: 0 2px; background-color:rgba(0,0,0,0.0); }
}

/*
#box {
	-webkit-animation-name: shake2;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-iteration-count: 4;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
}	*/


/*

-webkit-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
   -moz-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
    -ms-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
     -o-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
        transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860);  easeInOutCirc 


-webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
   -moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
    -ms-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
     -o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
        transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); easeInOutCirc */