#messages {
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 110;
  top: 60px;
  transition: top 0.2s;
}
.preventscroll #messages {
  z-index: 300;
}
#messages:not(:empty) {
  top: 96px;
}
@media screen and (max-width: 800px){
  #messages {
    top: 0;
  }
  #messages:not(:empty) {
    top: 60px;
  }
}
#messages.fixed {
  position: fixed;
  top: 25px;
}
#messages.fixed:not(:empty) {
  top: 60px;
}
#messages .messages {
  margin: 0;
  border: 0;
  padding: 10px 10px;
  background-image: none;
  color: #fff;
}
#messages.fixed .messages {
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}
#messages .messages.error {
  background: #ff273e;
}
#messages .messages.warning {
  background: #FFC53E;
}
#messages .messages.status {
  background: #afdd22;
}
#messages .messages .wrap {
  position: relative;
  max-width: 1130px;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
#messages .messages .wrap:before {
  content: '!';
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: inline-block;
  text-align: center;
  line-height: 19px;
  font-size: 18px;
  font-weight: bold;
}
#messages .messages ul,
#messages .messages p { 
  margin: 0 10px;
  display: inline-block;
  width: calc(100% - 75px);
  font-weight: 300;
}
#messages .messages ul {
  list-style: none;
}
#messages .messages .close-btn {
  background: url(../../images/icons/clear-white.svg) no-repeat;
  width: 17px;
  height: 17px;
  cursor: pointer;
  border: 0;
  display: inline-block;
  background-size: contain;
}