.container {
	display: none;
	text-align: center;
	vertical-align: middle;
	position: center;
	margin-top: 100px;

}
.body { 
  background-color: white;
  
}




.container {
  display: none;
}

.morning { background-image: url("../images/chat1.jpg");
    position: center;
  padding: 500px 0;
  top: 300px; bottom: 100px; left: 100px; width: 700px;
  background-repeat: no-repeat;
  animation: shake 5s;
  animation-iteration-count: infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;


}
.noon { 
    background: url("../images/noon.png");
  display:block;
    position: center;
  padding: 500px 0;
  top: 100px; bottom: 100px; left: 0px; right: 100px; width: 800px;
  background-repeat: no-repeat;
  animation: shake 2s;
  animation-iteration-count: infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;

}
.evening {
    background-image: url("../images/evening.png");
  display:block;
    position: center;
  padding: 500px 0;
  top: 100px; bottom: 100px; left: 30px; right: 100px; width: 900px;
  background-repeat: no-repeat;
  animation: shake .2s;
  animation-iteration-count: infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}


.odd {
    background-color:red;
  display:block;
    position: center;
  padding: 500px 0;
  top: 100px; bottom: 100px; left: 30px; right: 100px; width: 900px;
  background-repeat: no-repeat;
  animation: shake .2s;
  animation-iteration-count: infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}




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

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

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