#notification-area {
  position:fixed;
  top: 38vh;
  right:10px;
  width:350px;
  height:25vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-top;
}
@media only screen and (max-width: 700px) {
    #notification-area {
      width: 100%;
      bottom: 0px;
      height: 12%;
      top: inherit;
      left:  10px;
    }
}


#notification-area .notification {
  position:relative;
  padding:15px 10px;
  background:#111;
  color:#f5f5f5;
  font-family:"Raleway";
  font-size:14px;
  font-weight:600;
  border-radius:5px;
  margin:5px 0px;
  opacity:0;
  left:350px;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
      
    }

    5% {
        display: block;
        opacity: 1;
        left: 0px;
    }
  
    75% {
        display: block;
        opacity: 1;
        left: 0px;
    }

    100% {
        display: block;
        opacity: 0;
        left: 350px;
    
    }
}
#notification-area .fade_out {
  -webkit-animation: fadeInFromNone 5s ease-out;
}

#notification-area .move_element_up {
  -webkit-animation: fadeInFromNone 5s ease-out;
}

#notification-area .do_after_goan{
   opacity: 1;
   overflow-y: hidden;
   visibility: hidden;
   left: 0px ;
   -webkit-animation: after_goan 0.5s;

}

@keyframes after_goan {
    0% {
        visibility:hidden;
        overflow-y: hidden;
    } 
    100% {
        padding: 0px;
        height: 0px;
    }
}


#notification-area .notification.success {
  background:rgba(42, 152, 120, 1);
}
#notification-area .notification.error {
  background: rgba(212, 0, 0, 1);
}
#notification-area .notification.info {
  background: rgba(0, 172, 238, 1);
}
@media only screen and (max-width: 700px) {
    #notification-area .notification.success {
      background:rgba(42, 152, 120, 0.0);
    }
    #notification-area .notification.error {
      background: rgba(212, 0, 0, 0.0);
    }
    #notification-area .notification.info {
      background: rgba(0, 172, 238, 0.0);
    }   
}