.banner { background-color:yellow; width:305px; @include position(fixed,null,10px,10px); @include flex-container();
  .icon-holder { @include flex-item(76px); padding: 10px; }
  .text-holder { @include flex-item(calc(100% - 76px)); padding-top:20px; padding-right: 20px; font-size:120%; }
  .text { color:$black; text-decoration: none;
    &:hover { text-decoration: underline; }
  }
  .close { @include position(absolute,5px,5px); cursor: pointer;
    svg { width:18px; height: 18px; }
    .fill { opacity: 0; }
    &:hover {
      .x { fill:yellow; }
      .fill { opacity: 1; }
    }
  }
  
}

.animated {
  animation-duration: 0.65s;
  animation-fill-mode: both;
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}