*,
:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
* {
  -webkit-transition: 100ms all linear;
  transition: 100ms all linear;
  backface-visibility: hidden;
}
body {
  position: relative;
  margin: 0 auto;
  text-align: center;
}
section { 
  position: relative; width: 100%; height: 100vh; display: inline-block; background: #CCC; }
section img { width: 100%; height: auto;}
button { margin-top: 100px; padding: 20px; }
aside { 
  display: inline-block; 
  border-top: 5px solid green;
  padding: 10px 20px 0px;
  background: #FFF;
  box-shadow: 0 0 5px;
}
.banner_alert  {
  position: absolute;
  min-width: 280px;
  height: 50px;
  min-height: 50px;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  -webkit-animation: slideup 0.5s forwards;
  -webkit-animation-delay: 500s;
  animation: slideup 0.5s forwards;
  animation-delay: 500ms;
}
.banner_alert.banner-note {
  -webkit-animation: slidedown 0.5s forwards;
  animation: slidedown 0.5s forwards;
}

@-webkit-keyframes slideup { 100% { bottom: 50px; opacity: 1; } }
@keyframes slideup { 100% { bottom: 50px; opacity: 1;} }

@-webkit-keyframes slidedown { 
  0% { bottom: 50px; opacity: 1; }
  100% { bottom: 0; opacity: 0; } 
}
@keyframes slidedown { 
  0% { bottom: 50px; opacity: 1; }
  100% { bottom: 0; opacity: 0;} 
}
@media only screen and (max-width: 735px) {
  .banner_alert  {
    width: calc(100% - 40px);
  }
}