.notification.closing
{
  animation: notificationClosing ease-out .25s; animation-iteration-count: 1; transform-origin: 50% 50%;
  -webkit-animation: notificationClosing ease-out .25s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%;
  -moz-animation: notificationClosing ease-out .25s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 50%;
  -o-animation: notificationClosing ease-out .25s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 50%;
  -ms-animation: notificationClosing ease-out .25s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 50%;

  opacity: 0;
}
@keyframes notificationClosing{ 0% { opacity:1.0; transform:  translate(0px,0px)  ; } 100% { opacity:0; transform:  translate(-100%,0px); display: none; } }
@-moz-keyframes notificationClosing{ 0% { opacity:1.0; -moz-transform:  translate(0px,0px)  ; } 100% { opacity:0; -moz-transform:  translate(-100%,0px); display: none; } }
@-webkit-keyframes notificationClosing { 0% { opacity:1.0; -webkit-transform:  translate(0px,0px)  ; } 100% { opacity:0; -webkit-transform:  translate(-100%,0px); display: none; } }
@-o-keyframes notificationClosing { 0% { opacity:1.0; -o-transform:  translate(0px,0px)  ; } 100% { opacity:0; -o-transform:  translate(-100%,0px); display: none; } }
@-ms-keyframes notificationClosing { 0% { opacity:1.0; -ms-transform:  translate(0px,0px)  ; } 100% { opacity:0; -ms-transform:  translate(-100%,0px); display: none; } }

body:not(.foundation-loaded) #notification-center {
	width: 350px;
}

body.foundation-loaded #notification-center {
	width: calc(100% - 16px);
}

#notification-center {
	position: fixed;
	left: 8px;
	bottom: 8px;
	box-sizing: border-box;
	z-index: 10000;
	vertical-align: bottom; display: table-cell;
}

#notifications
{
	 text-align: left;
}

#notifications .notification
{
	background: white; margin-top: 8px; box-shadow: 0 0 2px rgb(152, 152, 152);

	-moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;
}

body:not(.foundation-loaded) #notifications .notification {
	border-radius: 3px;
	width: 100%;
}

#notifications .notification[data-url]:hover
{
	background: #f7f7f7;
	cursor: pointer;
}

#notifications .notification-title-inner {
	padding: 4px 12px;
}

#notifications .notification-title
{
	background: #ff0000; letter-spacing: 1px; font-size: 20px; font-family: Abel, sans-serif;
	-moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;
}

#notifications .notification[data-url]:hover .notification-title
{
	background: #ff6600;
}

#notifications .showOnHover
{
	opacity: 0;
	-moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s;
}
#notifications .notification:hover .showOnHover
{
	opacity: 1;
}

#notifications .notification-title-text
{
	box-sizing: border-box; width: 85%; text-overflow: ellipsis; display: inline-block; white-space: nowrap; overflow: hidden;
	color: rgb(255, 255, 255); font-weight:700;
}

#notifications .notification-body
{
	padding: 6px; color: #555; float: left; width: 100%; box-sizing: border-box; font-size: 16px;
}

#notifications .notification-image
{
	width: 72px; margin-right: 6px; float: left; border: 1px solid #EEE;
	/*border-radius: 50%*/
}

#notifications .notification-title-text a
{ 
	color:#ffffff!important;
}