body{margin:0}
.notification .notification-back{
    background-color: white;
    border:0px solid black;
}
.notification .notification-back{
    height: 200px;
}
.notification .notification-contenido{
   
}
.notification .notification-contenido-span{
   background-color:#006B9D; color:#FFFFFF; padding:3px;
}
.notification .notification-link{
   text-transform: uppercase; font-weight: bold; margin-top: 5px; margin-bottom: 10px; font-size: 120%
}

.notification .notification-body{
    padding: 25px;
}

.notification .notification-back{
    display: table;
    height: 20vh;
    width: 100%;
}
.notification .notification-body{
    display: table-cell;
    vertical-align: middle;
}

.notification{
    padding: 0;
    position: fixed;
    left: 0;
    top:0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.75);
    z-index: 10051;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 500ms, visibility 500ms;
    transition: opacity 500ms, visibility 500ms;
}
.notification .notification-back{
    padding: 0;
    position: fixed;
    width:90%;
    left: 5%;
    top:0;
    
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    
    animation-name: fadeOut;
    top: 40vh;
}
.notification.show{
    visibility: visible;
    opacity: 1;
}

.notification.show .notification-back{
    animation-name: bounceInDown;
}

.notification, .notification .notification-body{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
}

.notification .notification-body{
    position: relative;
}

.notification .notification-close{
    position: absolute;
    top: 3px;
    right: 5px;
    width: 20px;
    height: 20px;
    font-size: 24px;
    cursor: pointer;
}

@media (min-width: 767px) {
    .notification .notification-back{
        width:80%;
        left: 10%;
    }
}

@media (min-width: 1200px) {
    .notification .notification-back{
        width:60%;
        left: 20%;
    }
}

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

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

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

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

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

  to {
    -webkit-transform: none;
    transform: none;
  }
}

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

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

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

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

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

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}