@import "settings/mixins";
@import "settings/variables";

.civi-view-demo {
	text-align: center;

	.civi-box {
		position: relative;
		display: block;
	}

	.image {
		box-shadow: 0 0 40px rgba(51, 51, 51, 0.1);
		border-radius: 5px;

		> img {
			width: 100%;
			border-radius: inherit;
		}
	}

	.heading {
		font-size: 20px;
		line-height: 1.5;
		margin: 29px 0 0;
	}

	.badge {
		font-size: 14px;
		font-weight: 500;
		text-transform: uppercase;
		color: #fff;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 50px;
		height: 50px;
		padding-left: 8px;
		padding-right: 8px;
		top: 30px;
		right: 0;
		border-radius: 30px;
		z-index: 2;
		@include transform(translateX(50%));
		@include box-shadow(0 0 20px 0 rgba(0, 0, 0, 0.15));

		&.hot {
			background-color: #ef2107;
		}

		&.new {
			background-color: #294afb;
		}

		&.coming {
			background-color: $accent_color;
		}
	}
}
