.messages {
 position:relative;
 z-index:5;
 background-color:none;
 padding: 0;
}
.messages .buttons {
 margin-left:1em
}
.messages>ul {
 margin-top:0;
 margin-bottom:0;
 padding-left:0;
 position:relative;
 top:-100px;
 opacity:0
}
.messages>ul,.messages>ul>li {
 list-style-type:none;
 font-style:normal
}
.messages>ul>li {
 padding:1.6em 3em 1.6em 1.6em;
 color:#fff !important
}
.messages>ul>li:before {
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 margin-right:.5em;
 font-size:1.5em;
 vertical-align:middle
}
.messages .msg-error {
 background-color:#cd3238
}
.messages .msg-error:before {
 font-family:wagtail;
 content:"!"
}
.messages .msg-warning {
 background-color:#e9b04d
}
.messages .msg-warning:before {
 font-family:wagtail;
 content:"!"
}
.messages .msg-info {
 background-color:#5080f0;
 color:#D0D0D0
}
.messages .msg-success {
 background-color:#189370
}
.messages .msg-success:before {
 font-family:wagtail;
 content:"9"
}
.messages .msg-success .button:hover {
 background-color:#246060
}
.messages .button-secondary {
 border-color:hsla(0,0%,100%,.5);
 color:hsla(0,0%,100%,.8)
}
.messages .button-secondary:hover {
 border-color:transparent;
 color:#fff
}
.messages .msg-errorlist {
 margin:.5em 0 0 1em
}
.messages.new>ul {
 transition:none;
 top:-100px
}
.messages.appear>ul, .messages>ul {
 transition:top .5s ease,opacity .5s ease,max-height 1.2s ease;
 opacity:1;
 top:0
}
@media screen and (min-width:50em) {
 .messages>ul>li {
  padding-left:1.6em;
  padding-right:3em
 }
}