@keyframes tempshow_fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes tempshow_fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}


.tempshow_notif_wrapper {
  box-sizing: border-box;
  position: absolute;
  color: #fff;
  background: #000;
  width: 100%;
  animation: tempshow_fadein 1s;
  -webkit-box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.33);
  -moz-box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.33);
  box-shadow: 2px 2px 7px 0px rgba(0,0,0,0.33);
  z-index: 11111111;
}
.tempshow_notif_wrapper.remove {
  animation: tempshow_fadeout 1s;
}
.tempshow_notif_wrapper.horizontal_left {
  left: 0;
}
.tempshow_notif_wrapper.horizontal_right {
  right: 0;
}
.tempshow_notif_wrapper.horizontal_center {
  left: 0;
  right: 0;
  margin: 0 auto;
}
.tempshow_notif_wrapper.vertical_top {
  top: 0;
}
.tempshow_notif_wrapper.vertical_bottom {
  bottom: 0;
}
.tempshow_notif_wrapper.vertical_center {
  top: 40vh;
}

.tempshow_notif_wrapper .msg {
    padding: 10px;
}
.tempshow_notif_wrapper .exit {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    cursor: pointer;
}
.tempshow_notif_wrapper .exit:hover {
    background-color: rgba(255,255,255, 0.25);
}
.tempshow_notif_wrapper.type_info {
    background-color: #8888ff;
}
.tempshow_notif_wrapper.type_warning {
    background-color: #aaa;
}
.tempshow_notif_wrapper.type_success {
    background-color: #88dd88;
}
.tempshow_notif_wrapper.type_fail {
    background-color: #ff8888;
}
.tempshow_notif_wrapper.type_subscribe_thanks {
    background: rgba(0,0,0,0.7);
    padding: 30px;
    text-align: center;
}

@media only screen and (max-width: 409px) {
  .tempshow_notif_wrapper {
    max-width: 100% !important;
  }
}