.signup-page {
	&.general {
		.header-box {
			//background-image: url('../_images/background/join_header.jpg');

			.content-container {
				padding: 12rem 4rem;

				.content {
				}
			}
		}

		.page-body {
			padding: 50px 0 0 0;

			.benefits {
				margin-top: 20px;
				margin-bottom: 5px;

				.cust-icon {
					max-width: 100px;
					border-bottom: solid 3px #000;
					padding-bottom: 1rem;
				}

				h5 {
					font-size: 1.2rem;
				}

				ul {
					padding-left: 1.4rem;
				}
			}

			.signup-steps {
				background-color: #f9f9f9;
				padding: 40px 0;

				.badge {
					font-size: 1.5rem;
					font-weight: 300;
					vertical-align: top;
					margin-right: 0.9rem;
					margin-top: 0.6rem;
				}

				.step-icon {
					max-width: 100px;
				}
			}
		}
	}

	.page-body {
		padding: 100px 0;
	}

	&.membership {
		padding: 2% 0;

		.saving-box {
			position: absolute;
			width: 90px;
			top: -25px;
			right: 10px;

			img {
				width: 100%;
			}

			.saving-value {
				position: absolute;
				left: 30%;
				top: 15%;
				font-style: italic;
				color: #fff;
				font-weight: 700;

				.label {
					font-size: 18px;
					font-size: 1.05rem;
				}

				.value {
					font-size: 30px;
					font-size: 1.9rem;
				}
			}
		}
	}

	&.member-info {
		padding: 5% 0;

		.separate-optional {
			position: absolute;
			left: -10px;
			top: 36%;
			font-size: 0.9rem;
		}
	}

	&.confirmation {
		.page-body {
			padding: 50px 0;
			.comp-name{
				.trademark{
					top: -2rem;
				}
			}
		}
	}
}

@media (min-width: 1024px) and (max-width: 1366px) {
	.signup-page {

		&.general {
			.benefits-container {
				max-width: 90%;

				.benefits {
					h5 {
						font-size: 19px;
						font-size: 1.1rem;
					}

					ul {
						font-size: 16px;
						font-size: 1rem;
					}
				}
			}

			.steps-container {
				max-width: 90%;

				.step-desc {
					font-size: 16px;
					font-size: 1rem;
				}
			}
		}
	}
}

@media (min-width: 786px) and (max-width: 1024px) {
	.signup-page {

		&.general {
			.benefits-container {
				max-width: 95%;

				.benefits {
					h5 {
						font-size: 16px;
						font-size: 1rem;
					}

					ul {
						font-size: 16px;
						font-size: 1rem;
					}
				}
			}

			.steps-container {
				max-width: 95%;
			}

			.signup-steps {
				.step-desc {
					font-size: 16px;
					font-size: 1rem;
				}
			}
		}
	}
}

@media(max-width: 786px) {
	.signup-page {
		&.general {
			.header-box {
				.content-container {
					padding: 5rem 2rem;
				}
			}
		}

		&.membership {
			.saving-box {
				top: -15px;
			}
		}

		&.member-info {
			.separate-optional {
				position: relative;
				left: 0;
				top: 0;
				font-size: 0.9rem;
				margin-bottom: 5px;
			}
		}

		.autoship-check{
			display: block!important;
		}
	}
}
