/* Alerts */
.alert-placeholder {
	width: 100%;
	margin: 0 auto;
	position: fixed;
	height: 0;
	text-align: center;
	clear: both;
	top:0;
	z-index:10001;
    left:0;
}

.alert-box {
	z-index: 4;
	position: relative;
	top: 0;
  left:0;
  right:0;
  display:table; 
  margin:0 auto 12px;
  padding: 8px 32px 8px 18px;
  text-align: center;
  border: 1px solid #3d444c;
  background-color: #5a6169;
  color:#fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  -webkit-animation: alertShow 420ms;
  -moz-animation: alertShow 420ms;
  -o-animation: alertShow 420ms;
  animation: alertShow 420ms;
}

.alert-box.inverse {
  background-color: #dde4e6;
  color: #495d62;
  border-color: #b5bcbe;
}
.alert-box.error {
  background-color: #fb663b;
  color: #fff;
  border-color: #e94213;
}
.alert-box.important {
  background-color: #e74c3c;
  color: #fff;
  border-color: #cc1906;
}
.alert-box.secondary {
  color: #333;
  border-color: #f0c36d;
  background-color: #f9edbe;
}
.alert-box p {
	margin: 0;
}
.alert-box a:not(.button) {
	color: inherit;
	text-decoration: underline;
}
.alert-box a.button {
	margin: 0 6px;
}
.alert-box .close-alert {
  font-size: 1em;
  padding: 4px;
  line-height: 0;
  position: absolute;
  text-decoration: none;
  top: 5px;
  right: 5px;
  opacity: 0.4;
  cursor: pointer;
  -webkit-transition: opacity 180ms;
	transition: opacity 180ms;
}
.alert-box .close-alert:before {
	color: #fff;
}
.alert-box .close-alert:hover, .alert-box .close-alert:focus {
  opacity: 0.9;
}
.alert-box.inverse .close-alert:before, .alert-box.secondary .close-alert:before {
	color: #333;
}
.alert-box.slow-message{
  max-width:300px;
}



@-webkit-keyframes alertShow {
  0%   {opacity: 0; top:-50px;}
  50%  {opacity: 0.1; top:-10px;}
  100% {opacity: 1; top:0;}
}
@-moz-keyframes alertShow {
  0%   {opacity: 0; top:-50px;}
  50%  {opacity: 0.1; top:-10px;}
  100% {opacity: 1; top:0;}
}
@-o-keyframes alertShow {
  0%   {opacity: 0; top:-50px;}
  50%  {opacity: 0.1; top:-10px;}
  100% {opacity: 1; top:0;}
}
@keyframes alertShow {
  0%   {opacity: 0; top:-50px;}
  50%  {opacity: 0.1; top:-10px;}
  100% {opacity: 1; top:0;}
}


.message-impt {
  padding-left: 72px;
  border: 1px solid #f2d716;
  background: #fffad4;
	color: #555; 
	position: relative;
	margin: 3px 0 12px;
}
.message-impt:before {
	position: absolute;
	left: 18px;
	color: #EAE1A2;
	font-size: 42px;
	margin-right: 18px;
	top: 6px;
}
.message-impt p {
	margin:0;
}

.cart-notify {
	background: #EBF5D5;
	border-color: #cedbb4;
	padding: 18px 15px 18px 48px;
	border-radius: 5px;
	margin-bottom: 18px;
	position: relative;
	font-size: 0.875em;
}
.cart-notify:before {
	font-size: 30px;
	color: #78A21C;
	position: absolute;
	left: 12px;
	top: 12px;
}
.cart-notify .view-cart {
	margin-left: 8px;
}
/*Cart Notify CTA from WEB-36084*/
.cart-notify {padding:10px 18px 10px 48px; overflow: auto;}
.cart-notify:before {top: 22px;}
.cart-notify span {display:inline-block; padding-top:18px!important;}
.cart-notify .checkout-button {margin:0; float:right;}
.cart-notify .checkout-button[data-icon]:before {color: #FFF; margin: 7px 7px 0 0;}

/*ie*/
.ie8 .message-impt:before,
.ie9 .message-impt:before,
.ie10 .message-impt:before,
.ie11 .message-impt:before {
    line-height:1;
}

/* !--- rwd: large --- */
@media screen and (min-width:801px) {
	.item {position: relative;}
	.offer-item-required {position: absolute; top:0; left:0;}
}


/* !--- rwd: amall AND medium --- */
@media screen and (max-width:801px) {
	.alert-box {border-radius: 0;}
	.bundle-includes {display: none;}
}


/* !--- rwd: small --- */
@media screen and (max-width:599px) {
	.alert-box {padding: 3% 3% 30px;}
	.alert-box .close-alert {top:auto; bottom: 18px; right: 0; width: 100%; padding: 0; color: inherit; opacity: 1; font-size: 0.8125em; display: block;}
	.alert-box .close-alert:after {content:'Dismiss'; color: inherit; text-decoration: underline;}
	.alert-box .close-alert:before {display: none;}
	.message-impt {padding-left: 48px;}
	.message-impt:before {font-size: 30px; left: 10px;}
}


/* !--- rwd: medium --- */
@media screen and (max-width:801px) and (min-width:599px) {
	.alert-box p {font-size: 0.6875em;}
}