@import "variables";

.body-landing {
	.b-annr {
		& > .closer,
		& > .overlink {
			display: none !important;
		}
	}
}

//banners
.flip-clock-simple {
	min-width: 255px;
	min-height: 50px;
}
.b-annr-logo {
	background: $white;
	position: relative;
	z-index: 333;
	img {
		display: block;
		width: 80px;
		@media(min-width: 991px){
			position: absolute; top: 0; left: 0;
			width: 64px;
		}
	}
}
.b-annr {
	position: relative;
	.closer {
		background: $color_white;
		opacity: 0.7;
		@include border-radius(2px);
		@include transition(all 0.25s linear 0s);
		&:hover {
			//@include transform(rotate(180deg));
			cursor: pointer;
			opacity: 0.9;
		}
	}
	.b-annr__bg {
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute; top: 0; bottom: 0; left: 0; right: 0;
		z-index: 1;
	}
	.b-annr__body {
		position: absolute; top: 0; bottom: 0; left: 0; right: 0;
		z-index: 2;
	}

	.filtersClock__head { white-space: nowrap; }

	.highlighter-sep {
		height: 4px;
		@media(min-width: 768px){
			height: 8px;
		}
	}

	&.b-annr_termo {
		background: $color_dark;
		color: $color_white;
		height: 90px;
		@media (max-width: 767px) {
			height: 135px;
		}
		.left {
			position: absolute; top: 50%; right: 50%;
			margin: -25px 30px 0 0;
			font-size: 16px;
			line-height: 25px;
			text-align: right;
			@media (max-width: 991px){
				margin: -20px 30px 0 0;
				font-size: 14px;
				line-height: 20px;
			}
			@media (max-width: 767px) {
				position: relative; top: auto; right: auto;
				margin: 0;
				padding: 10px;
				text-align: left;
				text-shadow: 1px 1px 0 $color_gray_80;
			}
		}
		.right {
			position: absolute; top: 50%; left: 50%;
			margin: -40px 0 0 120px;
			.big {
				margin-bottom: 8px;
				font-size: 20px;
				line-height: normal;
				font-weight: bold;
			}
			@media (max-width: 991px){
				margin: -35px 0 0 100px;
				.big { font-size: 13px; }
			}
			@media (max-width: 767px) {
				position: relative; top: auto; left: auto; right: auto;
				margin: 0;
				padding: 0 10px 10px;
				text-align: left;
				.big {
					text-shadow: 1px 1px 0 $color_gray_80;
				}
			}
		}
	}

	&.b-annr_mapco {
		background: $color_white url(../images/examples/mapco-bg.jpg) no-repeat 50% 50%;
		background-size: cover;

		.closer {
			top: 6px; right: 6px;
			width: 16px; height: 16px;
			@media (max-width: 767px) {
				top: 8px; right: 8px;
				width: 20px; height: 20px;
			}
		}

		.pull-left {
			max-width: 600px;
			padding: 16px;
			.media {
				margin: 0;
				font-weight: bold;
				.media-left {
					img { display: block; width: 80px; }
				}
				.media-body {
					h6 {
						margin: 0;
						font-size: 18px;
					}
				}
			}
		}
		.pull-right {
			padding: 4px 16px 4px;
			.mapcoClock__head {
				margin-bottom: 4px;
				font-size: 13px;
			}
		}

		@media (max-width: 991px){
			.pull-left {
				float: none !important;
				padding: 8px 16px 0;
			}
			.pull-right {
				float: none !important;
				padding-top: 0;
			}
		}

		@media (max-width: 767px){
			.pull-left {
				.media {
					.media-body {
						h6 {
							.color-red {
								display: block;
							}
						}
						.description { display: none; }
					}
				}
			}
		}

		@media (max-width: 449px){
			.pull-left {
				.media {
					.media-left {
						display: none;
						width: auto;
						margin: 0;
						padding: 0 0 10px 0;
					}
					.media-body {
						display: block;
						width: auto;
					}
				}
			}
		}

	}

	&.b-annr_brakes {
		background: url(../images/examples/b-annr_brakes-bg.png) no-repeat 50% 50%;
		background-size: cover;
		position: relative;
		.closer {
			background: none;
			top: 6px; right: 6px;
			width: 16px; height: 16px;
			@media (max-width: 767px) {
				top: 8px; right: 8px;
				width: 20px; height: 20px;
			}
		}
		.pull-left {
			padding: 20px;
			h6 { margin: 0; }
		}
		.pull-right {
			padding: 4px 20px;
			.brakesClock__head {
				font-size: 12px;
			}
		}
		@media (max-width: 800px){
			.pull-left {
				float: none !important;
				padding-bottom: 0;
				.description { display: none; }
			}
			.pull-right {
				float: none !important;
				.brakesClock__head {
					font-size: 14px;
				}
			}
		}
	}

	&.b-annr_filters {
		background: url(../images/examples/b-annr_001.png) no-repeat 50% 50%;
		background-size: cover;
		position: relative;
		color: $color_white;
		h6 { color: inherit; }
		.highlight {
			background: $color_dark;
			background: rgba(0,0,0,0.75);
			display: inline-block;
			vertical-align: top;
			padding: 0 8px 1px;
		}
		.closer {
			background: none;
			top: 6px; right: 6px;
			width: 16px; height: 16px;
			&:before, &:after { background: $color_white; }
			&:hover {
				&:before, &:after { background: $color_red; }
			}
			@media (max-width: 767px) {
				top: 8px; right: 8px;
				width: 20px; height: 20px;
			}
		}
		.pull-left {
			padding: 20px 12px 16px;
			h6 { margin: 0 0 4px 0; }
		}
		.pull-right {
			padding: 4px 12px;
			.brakesClock__head {
				font-size: 12px;
			}
		}
		@media (max-width: 800px){
			.pull-left {
				float: none !important;
				padding-bottom: 0;
				.description { display: none; }
			}
			.pull-right {
				float: none !important;
				.brakesClock__head {
					font-size: 14px;
				}

				.clock-highlight {
					background: $color_dark;
					background: rgba(0,0,0,0.75);
					display: inline-block;
					vertical-align: top;
					padding: 4px 8px;
				}
			}
		}
		.flip-clock-wrapper.flip-clock-simple .flip-clock-divider .flip-clock-label {
			color: $color_white !important;
		}
		.flip-clock-dot { background: $color_white !important; }
	}

	&.b-annr_type-a {
		background-color: $color_gray_90;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		color: $color_white;

		.b-annr__bg {}
		.b-annr__body {
			position: relative;
			overflow: hidden;
		}
		h5 { margin: 0; color: inherit; }
		h6 { margin: 0 0 4px 0; color: inherit; }
		.highlight {
			background: $color_dark;
			background: rgba(0,0,0,0.75);
			display: inline-block;
			vertical-align: top;
			padding: 0 8px 1px;
			&.highlight-sm {
				@media (min-width: 992px) {
					background: transparent;
				}
			}
		}
		.closer {
			background: none;
			top: 6px; right: 6px;
			width: 16px; height: 16px;
			@include transition(all 0.15s ease-out 0s);
			&:before, &:after {
				background: $color_white;
				@include transition(all 0.15s ease-out 0s);
			}
			&:hover {
				&:before, &:after { background: $color_red; }
			}
			@media (max-width: 767px) {
				top: 8px; right: 8px;
				width: 20px; height: 20px;
			}
			&.square {
				background: $color_dark;
				background: rgba(0,0,0,0.75);
				&:before, &:after {
					background: $color_white !important;
					@include transition(none);
				}
				&:hover {
					background: $color_red;
				}
			}
			&.highlight-xs {
				@media (max-width: 767px) {
					background: $color_dark;
					background: rgba(0,0,0,0.75);
				}
			}
		}
		.pull-left {
			padding: 20px 12px 16px;
		}
		.pull-right {
			padding: 4px 12px;
			.brakesClock__head {
				font-size: 12px;
			}
		}

		.filtersClock__head {
			padding-bottom: 2px;
		}
		.flip-clock-wrapper.flip-clock-simple .flip-clock-divider .flip-clock-label {
			padding-top: 2px;
			color: $color_white !important;
		}
		.flip-clock-dot { background: $color_white !important; }

		@media (max-width: 800px){
			.pull-left {
				float: none !important;
				padding-bottom: 0;
				.description { display: none; }
			}
			.pull-right {
				float: none !important;
				.brakesClock__head {
					font-size: 14px;
				}

				.clock-highlight {
					background: $color_dark;
					background: rgba(0,0,0,0.75);
					display: inline-block;
					vertical-align: top;
					padding: 4px 8px;
				}
			}
		}

		&.color-gray-80 {
			.flip-clock-wrapper.flip-clock-simple .flip-clock-divider .flip-clock-label {
				color: $color_gray_80 !important;
			}
			.flip-clock-dot { background: $color_gray_80 !important; }
		}

		.b-annr_type-a__price-highlight {
			background: $color_red;
			display: inline-block;
			vertical-align: top;
			padding: 2px 8px 4px;
			color: $color_white;
			font-size: 24px;
			@include border-radius(3px);
		}
	}

	&.b-annr_type-b {
		position: relative;
		min-height: 96px;
		color: $color_white;
		//@media (max-width: 767px){ text-align: center; }

		.b-annr__bg {
			background-color: #ebeff2;
			background-position: right center;
			background-repeat: no-repeat;
			background-size: cover;
			@media (max-width: 767px) { background-position: left center; }
			.b-annr__bg__left {
				position: absolute; top: 0; bottom: 0; left: 0; right: 0;
				z-index: 2;
				background-position: 0 0;
				background-repeat: no-repeat;
				background-size: auto 100%;
			}
			.b-annr__bg__right {
				position: absolute; top: 0; bottom: 0; left: 0; right: 0;
				z-index: 1;
				background-position: top right;
				background-repeat: no-repeat;
				background-size: auto 100%;
			}
			img { display: block; height: 100%; }
		}
		.b-annr__body {
			position: relative;
			overflow: hidden;
			.media {
				.media-left { padding: 8px 16px; }
				.media-right { padding: 8px 16px 0 0; }
				.media-body { padding: 8px 16px; }
				@media (max-width: 767px){
					.media-left { padding: 8px 16px 0; }
					.media-right { padding: 0 16px 8px 0; }
					.media-body {
						padding: 8px 16px;
						padding-left: 0;
						&.text-xs-right {
							padding-right: 24px;
						}
					}
				}
				@media (max-width: 575px){
					.media-body {
						padding: 8px 0;
					}
				}
			}
			.highlighter {
				padding-left: 220px;
				white-space: nowrap;
				@media (max-width: 1199px){ padding-left: 160px; }
				@media (max-width: 991px){ padding-left: 80px; }
				@media (max-width: 767px){
					display: inline-block;
					vertical-align: top;
					padding-left: 0;
					//text-align: left;
				}
				&.text-wrap {
					white-space: normal;
				}
				.title {
					position: relative;
					margin-top: -8px;
					strong {
						background: $color_yellow;
						color: $color_black;
					}
				}
				.description {
					position: relative;
					strong {
						background: #006ECC;
						color: $color_white;
					}
				}
				.addition {
					padding: 8px 8px 0;
					font-size: 11px;
				}
				.title strong, .description strong, .title .description__line, .description .description__line {
					border: 0 !important;
					position: relative;
					display: inline-block;
					vertical-align: top;
					margin: 0 16px;
					padding: 0 2px;
					font-size: 18px;
					line-height: 32px;
					//font-weight: bold;
					//white-space: nowrap;
					text-transform: uppercase;
					& + strong {
						margin-left: 13px;
						&:before {
							display: block !important;
						}
					}
					@media (max-width: 991px){
						font-size: 16px;
						line-height: 28px;
					}
					@media (max-width: 767px){
						margin: 0;
						padding: 0 8px;
						font-size: 14px; line-height: 24px;
					}
					@media (max-width: 459px){
						margin: 0;
						padding: 0 8px;
						//&:before, &:after { display: none; }
					}
					span, .description__inner-line { position: relative; z-index: 5; }
					.dash-link {
						border-bottom-width: 1px;
						border-color: lighten($blue, 25%);
					}
					&:hover {
						.dash-link {
							border-color: $blue;
						}
					}

					&.bg-black { background: $color_dark; color: $color_white; }
					&.bg-violet { background: #80099b; }
					&.bg-red { background: #D90100; color: $color_white; }
					&.bg-dark-blue { background: #003665; }

					&:before {
						content: '';
						background: inherit;
						position: absolute; top: 0; bottom: 0; left: 0;
						width: 50px;
						margin-left: -15px;
						@include transform(skewX(-24deg));
					}
					&:after {
						content: '';
						background: inherit;
						position: absolute; top: 0; bottom: 0; right: 0;
						width: 50px;
						margin-right: -15px;
						@include transform(skewX(-24deg));
						@media (max-width: 767px){
							margin-right: -7px !important;
						}
					}
				}
				&:not(.corner){
					.title strong, .description strong, .title .description__line, .description .description__line {
						@media (max-width: 459px){
							&:before { display: none; }
							//&:after { display: none; }
						}
					}
				}
				&.corner {
					@media (max-width: 459px){
						padding-left: 8px;
					}
					.title strong, .description strong, .title .description__line, .description .description__line {
						@media (max-width: 459px){
							&:before {
								margin-left: -8px;
							}
							&:after {
								margin-right: -8px;
							}
						}
					}
				}
			}
		}
		.closer {
			background: none;
			top: 6px; right: 6px;
			width: 16px; height: 16px;
			@include transition(all 0.15s ease-out 0s);
			&:before, &:after {
				background: $color_white;
				@include transition(all 0.15s ease-out 0s);
			}
			&:hover {
				&:before, &:after { background: $color_red; }
			}
			@media (max-width: 767px) {
				top: 8px; right: 8px;
				width: 20px; height: 20px;
			}
			&.square {
				background: $color_dark;
				background: rgba(0,0,0,0.75);
				&:before, &:after {
					background: $color_white !important;
					@include transition(none);
				}
				&:hover {
					background: $color_red;
				}
				&.square-white {
					background: $color_white;
					background: rgba(255,255,255,0.75);
					&:before, &:after { background: $color_black !important; }
					&:hover {
						background: $color_red;
						&:before, &:after { background: $color_white !important; }
					}
				}
			}
			&.highlight-xs {
				@media (max-width: 767px) {
					background: $color_dark;
					background: rgba(0,0,0,0.75);
				}
			}
		}

		&.sm {
			min-height: 80px;
			.closer {
				top: 4px;
				right: 4px;
				width: 16px;
				height: 16px;
			}

			.b-annr__body .media .media-right {
				padding-top: 0;
			}
		}

		.media-right-link {
			padding: 0 40px 0 0;
			white-space: nowrap;
			font-size: 22px;
			color: $blue;
			@media (max-width: 767px){
				padding: 0 0 0 10px;
				font-size: 14px;
			}
		}
		.media-right-link-2 {
			padding: 16px 40px 0 0;
			white-space: nowrap;
			font-size: 22px;
			color: $white;
			@media (max-width: 767px){
				padding: 0 0 0 10px;
				font-size: 14px;
				color: $blue;
			}
		}

		.text-container {
			padding-top: 8px;
			padding-left: 8px;
			font-size: 16px;
			color: $color_dark;
			text-transform: uppercase;
			@media(max-width: 767px){
				padding-top: 0;
				padding-left: 8px;
				font-size: 14px;
			}
		}
	}

	&.b-annr_type-c {
		position: relative;
		min-height: 96px;
		color: $color_white;
		.b-annr__bg {
			background-color: #ebeff2;
			background-position: right center;
			background-repeat: no-repeat;
			background-size: cover;
			@media (max-width: 767px) { background-position: left center; }
			.b-annr__bg__left {
				position: absolute; top: 0; bottom: 0; left: 0; right: 0;
				z-index: 2;
				background-position: 0 0;
				background-repeat: no-repeat;
				background-size: auto 100%;
			}
			.b-annr__bg__right {
				position: absolute; top: 0; bottom: 0; left: 0; right: 0;
				z-index: 1;
				background-position: top right;
				background-repeat: no-repeat;
				background-size: auto 100%;
			}
			img { display: block; height: 100%; }
		}
		.b-annr__body {
			position: relative;
			overflow: hidden;
			.media {
				.media-left {
					padding: 0;
				}
				.media-right {
					padding: 0;
				}
				.media-body {
					padding: 0;

					font-size: 24px;
					font-weight: bold;
					color: #ffc300;
					text-transform: uppercase;
					@media (min-width: 768px){
						text-align: center;
					}

					.highlighter {
						position: relative;
						display: inline-block;
						margin: 0 16px;
						//padding: 0 16px;
						white-space: nowrap;
						span {
							position: relative;
							z-index: 2;
						}
						&:before {
							content: '';
							background: inherit;
							position: absolute; top: 0; left: 0;
							display: block;
							width: 100%;
							height: 100%;
							transform-origin: 0 0;
							@include transform(skewX(-25deg));
						}
						&:after {
							content: '';
							background: inherit;
							position: absolute; top: 0; right: 0;
							display: block;
							width: 100%;
							height: 100%;
							transform-origin: 0 100%;
							@include transform(skewX(-25deg));
						}

					}
					.line-a {}
					.line-b {}
					.line-c {
						position: relative;
						overflow: hidden;
						display: block;
						width: 100%;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					@media (max-width: 991px){
						font-size: 18px;
						.line-a {
							display: block;
						}
						.line-b {}
					}
					@media (max-width: 767px){
						padding-left: 32px;
						font-size: 16px;
						.line-a {
							display: block;
							padding-left: 24px;
						}
						.line-b {
							display: block;
						}
					}
					@media (max-width: 575px){
						padding-left: 18px;
						font-size: 14px;
						.line-a {
							padding-left: 20px;
						}
					}
				}
			}
		}
		.b-annr-gnarled {
			background: $white;
			position: relative;
			padding: 2px;
			&.b-annr-gnarled_image {
				min-width: 50px;
				min-height: 96px;
				padding: 2px 16px;
				img {
					display: block;
					height: 92px;
				}
				@media (max-width: 767px){
					min-height: 76px;
					padding: 2px;
					img {
						display: block;
						height: 72px;
					}
				}
			}
			&.b-annr-gnarled_countdown {
				min-width: 50px;
				min-height: 96px;
				padding: 8px 16px 2px 8px;
			}
			.b-annr-gnarled__body {
				position: relative;
				z-index: 5;
			}
			.b-annr-gnarled__right-right {
				background: inherit;
				position: absolute; top: 0; left: 0;
				overflow: hidden;
				display: block;
				width: 100%;
				height: 100%;
				transform-origin: 100% 100%;
				@include transform(skewX(-25deg));
			}
			.b-annr-gnarled__left-left {
				background: inherit;
				position: absolute; top: 0; right: 0;
				overflow: hidden;
				display: block;
				width: 100%;
				height: 100%;
				transform-origin: 0 100%;
				@include transform(skewX(25deg));
			}
		}
		.closer {
			background: none;
			top: 6px; right: 6px;
			width: 16px; height: 16px;
			@include transition(all 0.15s ease-out 0s);
			&:before, &:after {
				background: $color_white;
				width: 70%;
				@include transition(all 0.15s ease-out 0s);
			}
			&:hover {
				&:before, &:after { background: $color_red; }
			}
			&.square {
				background: $color_dark;
				background: rgba(0,0,0,0.75);
				&:before, &:after {
					background: $color_white !important;
					@include transition(none);
				}
				&:hover {
					background: $color_red;
				}
			}
			&.square-white {
				background: $color_white;
				background: rgba(255,255,255,0.75);
				&:before, &:after { background: $color_black !important; }
				&:hover {
					background: $color_red;
					&:before, &:after { background: $color_white !important; }
				}
			}
		}
	}

	&.b-annr-free-shipping-ee {
		.b-annr__bg {
			&.bg-lg {
				@media (max-width: 1199px) { background-position: left center;}
				@media (max-width: 767px) { display: none; }
			}
			&.bg-sm {
				@media (min-width: 768px) {
					display: none;
				}
			}
		}
		.b-annr-free-shipping-ee__inner {
			min-height: 95px;
			.title {
				background: $color_yellow;
				position: absolute; top: 16px; left: 250px;
				height: 40px;
				line-height: 40px;
				margin: 0;
				padding: 0 8px;
				font-size: 18px;
				font-weight: bold;
				color: $color_black;
				white-space: nowrap;
				text-transform: uppercase;

				&:before {
					content: '';
					border-bottom: 40px solid $color_yellow;
					border-left: 35px solid transparent;
					position: absolute; top: 0; right: 100%;
				}
				&:after {
					content: '';
					border-top: 40px solid $color_yellow;
					border-right: 35px solid transparent;
					position: absolute; top: 0; left: 100%;
				}
			}
			@media (max-width: 767px) {
				min-height: 80px;
				.title {
					top: 0; left: 50%;
					height: 24px;
					line-height: 24px;
					font-size: 12px;
					@include transform(translateX(-50%));
					&:before {
						border-bottom: 24px solid $color_yellow;
						border-left: 20px solid transparent;
					}
					&:after {
						border-top: 24px solid $color_yellow;
						border-right: 20px solid transparent;
					}
				}
			}
		}
	}

	&.b-annr-brakes {
		.closer { top: 8px; right: 8px; }
		.b-annr__bg {
			background-position: left center;
			&.bg-lg {
				@media (max-width: 767px) { display: none; }
			}
			&.bg-sm {
				@media (min-width: 768px) { display: none; }
			}
		}
		.b-annr__body {
			min-height: 100px;
			@media (max-width: 767px){ text-align: center; }
			.media-right { padding: 8px; }
			.title {
				position: relative;
				margin-left: 235px;
				font-size: 18px;
				font-weight: bold;
				line-height: 32px;
				text-transform: uppercase;
				@media (max-width: 1199px){ margin-left: 160px; }
				@media (max-width: 991px){
					margin-left: 80px;
					font-size: 16px;
					line-height: 28px;
				}
				@media (max-width: 767px){
					display: inline-block;
					margin-left: 0;
					font-size: 14px;
					line-height: 24px;
					text-align: left;
				}
				strong {
					background: #FFC300;
					position: relative;
					display: inline-block;
					padding: 0 4px;
					color: $color_black;
					&:before {
						content: '';
						border-bottom: 32px solid #FFC300;
						border-left: 20px solid transparent;
						position: absolute; top: 0; right: 100%;
						@media (max-width: 991px){ border-bottom-width: 28px; border-left-width: 18px; }
						@media (max-width: 767px){ border-bottom-width: 24px; border-left-width: 14px; }
					}
					&:after {
						content: '';
						border-top: 32px solid #FFC300;
						border-right: 20px solid transparent;
						position: absolute; top: 0; left: 100%;
						@media (max-width: 991px){ border-top-width: 28px; border-right-width: 18px; }
						@media (max-width: 767px){ border-top-width: 24px; border-right-width: 14px; }
					}
				}
				span {
					background: #006ECC;
					position: relative;
					display: inline-block;
					padding: 0 4px;
					&:before {
						content: '';
						border-bottom: 32px solid #006ECC;
						border-left: 20px solid transparent;
						position: absolute; top: 0; right: 100%;
						@media (max-width: 991px){ border-bottom-width: 28px; border-left-width: 18px; }
						@media (max-width: 767px){ border-bottom-width: 24px; border-left-width: 14px; }
					}
					&:after {
						content: '';
						border-top: 32px solid #006ECC;
						border-right: 20px solid transparent;
						position: absolute; top: 0; left: 100%;
						@media (max-width: 991px){ border-top-width: 28px; border-right-width: 18px; }
						@media (max-width: 767px){ border-top-width: 24px; border-right-width: 14px; }
					}
				}
			}
			.b-filtersClock {
				display: inline-block;
				padding: 4px;
				@media (max-width: 1199px){
					background: rgba(0,0,0,0.5);
				}
			}
		}
	}

	.mobile-deadline {
		background: $color_white;
		background: rgba(255,255,255,0.75);
		position: absolute; bottom: 0; left: 0;
		z-index: 55;
		padding: 2px 4px;
		font-size: 11px;
		line-height: 14px;
		color: $color_dark;
		&.dark {
			background: $color_dark;
			color: $color_white;
			&:after {
				content: '';
				position: absolute; bottom: 0; left: 100%;
				border-bottom: 18px solid $color_dark;
				border-right: 8px solid transparent;
			}
		}
		&.pink {
			background: #f3205f;
			color: $color_white;
			&:after {
				content: '';
				position: absolute; bottom: 0; left: 100%;
				border-bottom: 18px solid #f3205f;
				border-right: 8px solid transparent;
			}
		}
	}

}

.b-annr-icarousel {
	cursor: pointer;
	&:not(.b-annr) {
		position: absolute;
		z-index: 5;
	}
}

.t-informer {
	background: #FFDA6F;
	background: radial-gradient(circle, #F3B500 0%, #FFDA6F 100%);
	position: relative;
	overflow: hidden;
	padding: 12px 16px;
	font-size: 18px;
	line-height: 1.2em;
	color: $color_dark;
	@media (max-width: 991px) {
		font-size: 14px;
		line-height: 1.4em;
	}
	.type-link {
		border-bottom-color: $color_blue;
		color: $color_blue;
		&:hover {
			border-bottom: 1px solid rgba(13,97,171,0.3);
		}
	}
}

.b-annr__modal {
	background: #D9E9F7;
	position: absolute; top: 100%; left: 50%;
	z-index: 999;
	display: block; width: 400px;
	margin-left: -200px;
	padding: 24px;
	color: $color_dark;
	@include border-radius(5px);
	@include box-shadow(0 0 8px $color_gray_50);
	display: none;
	.closer {
		&:before, &:after {
			background: $color_dark !important;
		}
		&:hover {
			&:before, &:after {
				background: $color_red !important;
			}
		}
	}
	.h {
		margin-bottom: 12px;
		font-size: 18px;
	}

	@media (max-width: 449px){
		width: 320px;
		margin-left: -160px;
	}
}
.b-annr.modal-show .b-annr__modal { display: block; }

//
.b-annr-with-conditions {
	position: relative;
	.b-annr-modal-toggler {
		height: auto;
		bottom: -38px;
	}
	.b-annr-conditions-toggle {
		border: none;
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 5;
		display: block;
		@media (min-width: 992px){ display: none; }
	}
	&.wide {
		.b-annr-conditions__shorter {
			max-height: none !important;
		}
	}
}
.b-annr-conditions {
	background: $white;
	padding: 12px 16px;
	font-size: 12px;
	color: $blue;
	line-height: 14px;
	.b-annr-conditions__shorter {
		position: relative;
		overflow: hidden;
		@media (max-width: 991px){
			max-height: 28px;
		}
	}
	&.sm {
		padding: 4px 12px 5px;
	}
	&.fs-11 {
		font-size: 11px;
		line-height: 13px;
		.b-annr-conditions__shorter {
			@media (max-width: 991px){
				max-height: 26px;
			}
		}
	}
	&.fs-13 {
		font-size: 13px;
		line-height: 16px;
		.b-annr-conditions__shorter {
			@media (max-width: 991px){
				max-height: 32px;
			}
		}
	}
	&.fs-14 {
		font-size: 14px;
		line-height: 16px;
		.b-annr-conditions__shorter {
			@media (max-width: 991px){
				max-height: 32px;
			}
		}
	}
}

/*.b-annr-container {
	pre {
		position: relative;
		overflow-y: auto;
		display: block;
		max-height: 200px;
	}
}*/
.code-container {
	position: relative;
	.code-container__controls {
		background: #fff;
		border: 1px solid $color_gray_20;
		position: absolute; top: 0; right: 0;
		z-index: 55;
		padding: 12px 16px;
		font-size: 18px;
		@include border-radius(0 2px 0 2px);
	}
	.code-container__btn {
		display: block;
		float: left;
		width: 20px;
		height: 20px;
		color: $blue;
		&:not(:first-child){
			margin-left: 4px;
		}
		&:hover {
			cursor: pointer;
			opacity: 0.75;
		}
		&.copyToClipboard {
			background: url(../images/icons/i-copy.png) no-repeat 50% 50% / auto 100%;
		}
	}
}

.b-annr-description {
	padding: 4px 24px 6px;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.25;
	@media(max-width: 767px){
		padding-left: 12px;
		padding-right: 12px;
	}
	&.primary {}
	&.info {
		background: #eef1f5;
	}
}

.u-modal-exit-intent {
	.u-result {
		margin-bottom: 20px;
		img {
			display: block;
			margin-left: auto;
			margin-right: auto;
			max-width: 100%;
			max-height: 200px;
		}
	}
	.u-head {
		display: flex;
		padding-left: 16px;
		.u-head__icon {
			padding-right: 24px;
			img {
				display: block;
				height: 90px;
			}
		}
		.u-head__text {
			align-self: center;
			flex-grow: 1;
			font-size: 30px;
			font-weight: bold;
			line-height: 1;
		}
		@media(max-width: 575px){
			padding-left: 8px;
			.u-head__icon {
				padding-right: 8px;
				img {
					height: 48px;
				}
			}
			.u-head__text {
				font-size: 24px;
			}
		}
	}
	.u-body {}
	.u-footer {
		padding-top: 36px;
		text-align: center;
		.btn {
			padding-left: 48px;
			padding-right: 48px;
		}
	}
	.form-group {
		& + .form-group {
			margin-top: 20px;
		}
	}
	.form-check.active + .form-group.hide {
		display: block !important;
	}
}