.pricing {

	&.sp-menu {
		margin-top: 0;
	}

	.pack-active {
		padding: .50rem;

		.pack-border {
			box-shadow: 0 1px 15px #ccc;
			display: flex;
			flex-direction: column;
			height: 100%;
			padding: 5px;

			a {
				display: inline-block;
			}
			
			&.p-active {
				background-color: #f7f7f7;
			}
		}
	}

	.top-inactive {
		margin-top: 40px;
	}

	.pack-title {
		padding-bottom: 40px;
	}

	.hidden-div {
		padding: 0;
		overflow: hidden;
		position: relative;
	}

	a {
		display: block;
		margin-top: auto;

		p {
			text-align: center;
			border: 1px solid $brand-orange;
			margin-top: 20px;
			color: $brand-orange;
			padding: 10px 0;
			transition: all .2s linear;

			&.bni-btn {
				color: #ffc618;
				border: 1px solid #ffc618;

				&:hover {
					background-color: #ffc618;
					color: #fff;
				}
			}

			&:hover {
				background-color: $brand-orange;
				color: #fff;
			}

			&.colorA {
				color: $brand-orange;
				border: 1px solid $brand-orange;

				&:hover {
					background-color: $brand-orange;
					color: #fff;
				}
			}

			&.colorC {
				color: $brand-orange;
				border: 1px solid $brand-orange;
				background-color: #fff;

				&.button-active {
					background-color: $brand-orange;
					color: #fff;
					&:hover {
						background-color: #ff6600d3;
					}
				}

				&:hover {
					background-color: $brand-orange;
					color: #fff;
				}
			}
		}
	}

	ul {
		li {
			font-size: 16px;

			div {
				&:first-child {
					font-size: 30px;

					&.silver {
						color: #cccccc;
					}

					&.gold {
						color: #F9A602;
					}

					&.bronze {
						color: #f4b183;
					}
				}

				&:nth-child(2) {
					color: #4a4a4a;
					font-size: 25px;
				}

				&:nth-child(3) {
					position: absolute;
					top: 84px;
					right: -186px;
					background-color: $brand-orange;
					padding: 8px 38px;
					font-size: 11px;
					-webkit-transform: rotate(45deg) translateX(-100%);
					-moz-transform: rotate(45deg) translateX(-100%);
					transform: rotate(45deg) translateX(-100%);
					-webkit-transform-origin: 0 0;
					-moz-transform-origin: 0 0;
					transform-origin: 0 0;
					color: #fff;
					font-weight: 400;

					span {
						color: #fff;
					}

					&.most-popular {
						background-color: #ffc618;
					}
				}
			}

			&.grey-before {
				&::before {
					content: '\2713\0020';
					padding-right: 5px;
					padding-left: 5px;
					position: absolute;
					color: #767171;
				}
			}

			&.color-before {
				&::before {
					content: '\2713\0020';
					padding-right: 5px;
					padding-left: 5px;
					position: absolute;
					color: $brand-orange;
				}
			}

			&:first-child {
				padding: 10px 20px;
				color: $brand-orange;
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
			}

			// &.pack-title {
			// 	padding-bottom: 50px;
			// }

			&:nth-child(3) {
				&.bni-second {
					font-weight: 400;
					padding-left: 15px;
					color: #ffc618;
					font-size: 18px;
				}
			}

			&:nth-child(n+4) {
				font-weight: 400;
			}

			&:nth-child(n+2) {
				padding: 10px 0 0 0px;
			}

			&.content-grey {
				display: block;
				padding: 10px 0 0 30px;
				font-weight: 300;
				position: relative;

				&::before {
					content: '\2713\0020';
					padding-right: 5px;
					padding-left: 5px;
					position: absolute;
					left: 10px;
				}

				span {
					margin-left: 10px;
				}
			}

			&:nth-child(2) {
				// margin-top: 20px;

				&.bni-first {
					font-size: 20px;
					font-weight: 600;
					color: #000;
					padding: 25px 10px 10px 15px;
				}
			}

			span {
				color: #404040;
				;

				&.line-left {
					display: block;
					padding: 0 0 0 30px;
					font-weight: 300;
				}

				&.color-span {
					color: $brand-orange;
				}
			}
		}
	}
}