#hoverme {
  background: #70c48f;
  color: white;
  padding: 5px;
  text-decoration: none;
}

.visible {
  /*animation: movein 0.5s ease forwards;*/ 
  display:none;
  /*, stop 0.5s 1s ease forwards;*/
}

#notif {
/*  width: 200px;
  height: 100px;*/
  background: white;
  /*color: white;*/
  border-radius: 3px;
  /*font-size: 18px;*/
  display: block;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: -500px;
  z-index:12;
  left:20%;
  width:60%
}

/*#notif {
  left: 10px;
  opacity: 0;
}*/

@keyframes movein {
  from { top: -500px; }
  to   { top: 10px; }
}

@keyframes moveout {
  from { top: 10px; 
         display:block;}
  to   { top: -500px; 
/*         display: none;
         visibility:hidden*/
        }
}

/*@keyframes stop {
  to   { display: none;}
}*/

/*@keyframes movein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes moveout {
  from { opacity: 1; }
  to   { opacity: 0; }
}*/


#notif .notice
{
    margin:0px;
}


#notif .notice .head H2
{
    padding-right: 7px;
    padding-left: 9px;
    font-size: 0.9em;
    background-image:url(../img/repeat_heading.svg);
		background-repeat:repeat-x;
    padding-bottom: 5px;
    margin: 0px;
    color: #fff;
    padding-top: 6px
}

#notif .notice .head UL.head2icons
{
    display: inline;
    float: right;
    margin: 4px 7px 0px 0px
}

.notice .frame
{
    border-right: #cee3f8 2px solid;
    /*padding-right: 7px;*/
    border-top: #cee3f8 2px solid;
    padding-left: 10px;
    /*min-height: 9.3em;*/
    padding-bottom: 10px;
    border-left: #cee3f8 2px solid;
    padding-top: 5px;
    border-bottom: #cee3f8 2px solid
}

.notice .frame UL
{
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px 0px 5px;
    padding-top: 0px
}
.notice .frame UL LI
{
    padding-right: 0px;
    /*padding-left: 34px;*/
    padding-bottom: 0px;
    margin: 10px;
    vertical-align: top;
    line-height: 1.2em;
    padding-top: 0px;
    list-style-type: none
}