@import url('https://fonts.googleapis.com/css?family=Open+Sans:400');

.widget-AlertBox {
    position: relative;
}
body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#wrap {
    position: absolute;
    height: 100%;
    width: 100%;
}
#alert-box {
    height: 100%;
    width: 100%;
    position: absolute;
}
#alert-box.hidden,
.hidden {
    opacity: 0;
}
#alert-text {
  	text-align: absolute;
  	text-transform: uppercase;
    font-family: "Open Sans", sans-serif;
  	color: #ffffff;
    font-size: 12px;
  	text-shadow: 0px 0px 6px #000000;
}

#alert-message-box {
  position: absolute;
  width: 750px; height: 40px;
  left: 380px; top: 330px;
  transform: translate(0%, -50%);
  overflow: hidden;
  /*
  	Container animation goes here
  */
}

#alert-user-message-box {
  position: absolute;
  width: 550px; height: 125px;
  left: 50%; top: 236px;
  transform: translate(0%, -50%);
  overflow: hidden;
  animation: slideIn 6s linear; -webkit-animation: slideIn 6s linear;
  /*
  	Container animation goes here, fade?
  */
}

.alert-message-anim {
  /*Message text animation goes here*/
  	transform: translateX(-100%);
  	animation: slideIn 6s linear; -webkit-animation: slideIn 6s linear;
}

.alert-user-message-anim {
  /*User Message text animation goes here*/
    transform: translateX(-100%);
    animation: slideIn 6s linear; -webkit-animation: slideIn 6s linear;
}

#alert-message {
}

#alert-user-message {

}

#alert-user-message img {
    vertical-align: middle;
    height: 1em;
}
#alert-image {
    position: relative;
}

#alert-message > span > span {
    display: inline-block;
}
#alert-image {
    z-index: 6;
    position: relative;
}
#alert-text {
    z-index: 6;
    position: relative;
}
#alert-text-wrap {
    z-index: 6;
    position: relative;
}

@-webkit-keyframes slideIn {
    7% {left: 427px; animation-timing-function: cubic-bezier(0.77, 0.00, 0.91, 0.50);}
    13% {left: 294px; animation-timing-function: cubic-bezier(0.05, 0.19, 0.46, 1.05);}
  	15% {left: 251px; animation-timing-function: cubic-bezier(0.31, 0.06, 0.73, 1.00);}
  	19% {left: 298px; animation-timing-function: cubic-bezier(0.33, 0.00, 0.67, 1.00);}
  	23% {left: 284px; animation-timing-function: cubic-bezier(0.33, 0.00, 0.67, 1.00);}
  	27% {left: 287px; animation-timing-function: linear;}
    85% {left: 287px; animation-timing-function: cubic-bezier(0.51, 0.00, 0.50, 1.00);}
    94% {left: 432px; animation-timing-function: linear;}
}

@keyframes slideIn {
    7% {left: 427px; animation-timing-function: cubic-bezier(0.77, 0.00, 0.91, 0.50);}
    13% {left: 294px; animation-timing-function: cubic-bezier(0.05, 0.19, 0.46, 1.05);}
  	15% {left: 251px; animation-timing-function: cubic-bezier(0.31, 0.06, 0.73, 1.00);}
  	19% {left: 298px; animation-timing-function: cubic-bezier(0.33, 0.00, 0.67, 1.00);}
  	23% {left: 284px; animation-timing-function: cubic-bezier(0.33, 0.00, 0.67, 1.00);}
  	27% {left: 287px; animation-timing-function: linear;}
    85% {left: 287px; animation-timing-function: cubic-bezier(0.51, 0.00, 0.50, 1.00);}
    94% {left: 432px; animation-timing-function: linear;}
}


@-webkit-keyframes slideOut {
    0% {transform: translateX(-100%); animation-timing-function: cubic-bezier(0.59, 0.00, 0.97, 0.91);}
    13% {transform: translateX(0%); animation-timing-function: linear;}

    83% {transform: translateX(0%); animation-timing-function: cubic-bezier(0.77, 0.00, 0.37, 1.00);}
    92% {transform: translateX(-100%); animation-timing-function: linear;}
}

@keyframes slideOut {
    6% {transform: translateX(-100%); animation-timing-function: cubic-bezier(0.59, 0.00, 0.97, 0.91);}
    13% {transform: translateX(0%); animation-timing-function: linear;}

    83% {transform: translateX(0%); animation-timing-function: cubic-bezier(0.77, 0.00, 0.37, 1.00);}
    92% {transform: translateX(-100%); animation-timing-function: linear;}
}


@-webkit-keyframes fadeOut {
  	0% {opacity: 1; animation-timing-function: linear;}
    90% {opacity: 1; animation-timing-function: linear;}
    95% {opacity: 0; animation-timing-function: linear;}
}

@keyframes fadeOut {
  	0% {opacity: 1; animation-timing-function: linear;}
    90% {opacity: 1; animation-timing-function: linear;}
    95% {opacity: 0; animation-timing-function: linear;}
}