.-.-.-.-.-

/**
 * Black Friday announcements styles
 *
 * @since 3.7.3
 */

@import "variables";

@include body-class(true) {

#smush-black-modal-content {
		text-align: center;

.smush-black-title {
			margin: 0 0 5px;
			color: palette(gray, dark);
			font: bold 18px/24px $font;
			letter-spacing: -0.3px;
		}

.sui-screen-reader-text {

// FIX: Prevent paragraph from adding
			// unnecessary space to visually hidden element.
			&:last-of-type:not(:last-child) {
				margin-bottom: 0;
			}
		}

.smush-black-price {
			margin: 30px 0 25px;

p {
				margin: 0;
				color: palette(gray, dark);
				font: 400 14px/19px $font;
				letter-spacing: -0.3px;

del {
					color: $red;
					font-size: 18px;
					font-weight: bold;
				}

ins {
					font-size: 42px;
					font-weight: bold;
					letter-spacing: -0.8px;
					text-decoration: none;
				}

+ p {
					margin-top: 6px;
					font-size: 13px;
					line-height: 18px;
				}
			}

@include media(min-width, md) {
				margin: 50px 0 35px;
			}
		}

.smush-black-benefits-title {
			display: flex;
			align-items: center;
			margin: #{$sui-gutter-md + 10px} 0 $sui-gutter-md;
			color: palette(gray, dark);
			font: 500 13px/18px $font;
			letter-spacing: -0.2px;

&:before,
			&:after {
				content: " ";
				min-width: 1px;
				height: 1px;
				flex: 1;
				background-color: #F2F2F2;
			}

&:before {
				margin-right: $sui-gutter-md;

@include media(min-width, md) {
					margin-right: $sui-gutter;
				}
			}

&:after {
				margin-left: $sui-gutter-md;

@include media(min-width, md) {
					margin-left: $sui-gutter;
				}
			}

@include media(min-width, md) {
				margin: #{$sui-gutter + 10px} 0 $sui-gutter;
			}
		}

.smush-black-benefits-list {
			margin: 0 0 -20px;
			text-align: left;

li {
				position: relative;
				margin: 0 0 20px;
				padding-right: 10px;
				padding-left: 22px;
				color: palette(gray, dark);
				font: 500 13px/18px $font;
				letter-spacing: -0.2px;

[class*="sui-icon-"] {
					display: block;
					position: absolute;
					top: 3px;
					left: 0;
					color: palette(purple);

&:before {
						display: block;
						color: inherit;
					}
				}

@include media(min-width, md) {
					width: 50%;
					flex: 0 0 auto;
				}
			}

@include media(min-width, md) {
				display: flex;
				flex-flow: row wrap;
				align-items: flex-start;
			}
		}

@include media(min-width, md) {
			padding-top: 50px;
		}
	}
}

@include body-class(false) {

#smush-black-notice-content {
		padding: 0;
		border-width: 0;
		border-left-width: 0;
		background-color: transparent;
		box-shadow: none;

.sui-wrap {
			margin: 0;
			padding: 10px 30px 0 10px; // Override incoming style.
			border: 0;
			display: block; // Override incoming style.

.smush-black-notice-header {
				display: flex;
				flex-flow: row wrap;
				align-items: center;
				padding: 11px 30px;
				border-radius: $border-radius $border-radius 0 0;
				background: #040404;
				background: linear-gradient(to right,  #040404 0%,#2E2E2E 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#040404', endColorstr='#2E2E2E',GradientType=1 );

.smush-black-ribbon {
					flex: 0 0 auto;
					display: block;
					position: relative;
					margin-left: -30px;
					padding: 11px 22px 9px 10px;
					background: #6B217D;
					background: linear-gradient(270deg, #6B217D 0%, #CF2C3B 100%);
					color: $white;
					font: bold 13px/18px $font;
					letter-spacing: normal;

&:after {
						content: " ";
						position: absolute;
						top: 2px;
						right: -23px;
						border: 19px solid #040404;
						border-top-width: 15px;
						border-left-width: 15px;
						border-right-color: transparent;
						border-bottom-color: transparent;
						transform: rotate(-45deg);
					}

+ .smush-black-title {
						margin-left: 12px;

@include media(min-width, md) {
							margin-left: 34px;
						}
					}

@include media(min-width, md) {
						padding-left: 22px;
						font-size: 14px;
						line-height: 19px;
					}
				}

.smush-black-title {
					min-width: 1px;
					flex: 1;
					margin: 0;
					color: $white;
					font: bold 14px/19px $font;
					letter-spacing: normal;

@include media(min-width, md) {
						font-size: 16px;
					}
				}

.smush-black-timer-container {
					display: flex;
					flex-flow: row wrap;
					align-items: center;
					flex: 0 0 100%;
					padding: #{$sui-gutter / 2} 0 #{$sui-gutter - 11px};

.smush-black-timer-slogan {
						margin: 0 $sui-gutter-md 0 0;
						padding: 0 0 0 #{$sui-gutter-md * 2};
						border: 0;
						color: $white;
						font: 400 13px/19px $font;
						letter-spacing: normal;

@include media(max-width, md) {
							display: none;
						}
					}

.smush-black-timer {
						display: flex;
						flex-flow: row wrap;
						align-items: center;
						margin: 0 auto;

.smush-black-time {
							flex: 0 0 auto;

p {
								margin: 0;
								padding: 0;
								color: #AAAAAA;
								font: 500 10px/19px $font;
								letter-spacing: normal;
							}

div {
								display: flex;
								flex-flow: row wrap;
								align-items: center;
								color: $white;
								font: bold 15px/19px $font;
								letter-spacing: normal;

span {
									width: 30px;
									display: block;
									flex: 0 0 auto;
									padding: 3px 0;
									text-align: center;
									border-radius: #{$border-radius / 2};
									background-color: rgba(255, 255, 255, 0.2);

+ span {
										margin-left: 5px;
									}
								}
							}
						}

.smush-black-timer-dots {
							display: block;
							flex: 0 0 auto;
							align-self: flex-end;
							padding: 0 10px 10px;

&:before,
							&:after {
								content: " ";
								width: 2px;
								height: 2px;
								display: block;
								background-color: #D8D8D8;
							}

&:before {
								margin-bottom: 3px;
							}
						}

@include media(min-width, md) {
							margin-top: -8px;
						}
					}

@include media(min-width, md) {
						flex: 0 0 auto;
						padding: 0;
					}
				}
			}

.smush-black-notice-body {
				padding: $sui-gutter $sui-gutter-md;
				border-radius: 0 0 $border-radius $border-radius;
				background-color: $white;

p {
					margin: 0;
					padding: 0;
					color: palette(gray, dark);
					font: 500 13px/22px $font;
					letter-spacing: normal;

+ p {
						margin-top: 10px;

@include media(min-width, md) {
							margin-top: 0;
						}
					}

&.smush-black-notice-statement {
						font-weight: 300;

@include media(max-width, md) {
							font-size: 11px;
						}
					}
				}

.sui-button {
					margin: 15px 0 0;
					padding: 11px 25px;
					font-size: 13px;
					line-height: 18px;
					font-weight: bold;
					letter-spacing: -0.4px;
					text-transform: none;

@include media(min-width, md) {
						display: block;
						flex: 0 0 auto;
						margin-top: 0;
						margin-right: $sui-gutter-md;
					}
				}

.smush-black-notice-dismiss {
					display: block;
					margin: 20px 0 0;
					padding: 0;
					border: 0;
					background: transparent;
					background-color: transparent;
					color: #AAA;
					font: 500 13px/18px $font;
					letter-spacing: -0.2px;
					cursor: pointer;

@include media(min-width, md) {
						flex: 0 0 auto;
						margin-top: 0;
					}
				}

.smush-black-notice-content {

@include media(min-width, md) {
						min-width: 50px;
						flex: 1;
						padding-right: #{$sui-gutter + 10px};
					}
				}

@include media(min-width, md) {
					min-height: 126px;
					display: flex;
					flex-flow: row wrap;
					align-items: center;
					padding-left: 154px;
					background-image: url('#{$img--path}/black-friday-banner-bg.png');
					background-repeat: no-repeat;
					background-position: left 20px bottom;
					background-size: auto 108px;

@media
					(-webkit-min-device-pixel-ratio: 2),
					(min-resolution: 192dpi) {
						background-image: url('#{$img--path}/black-friday-banner-bg@2x.png'),
					}
				}
			}
		}
	}
}

/home/batcwwjx/old/public_html/./wp-content/plugins/wp-smushit/_src/scss/modules/_black-friday.scss