/* Quantifier */

	/* 

		.quantifier

		Size

			Small: .small
			Medium: (default)
			Large: .large

		Orientation

			Vertical: (default)
			Horizontal: .horizontal

		Options

			Outlined buttons: .outlined

		Field size

			1 or 2 digits: (default)
			3 digits: .three
			4 digits: .four

		Buttons states

			Disabled: .disabled

		Snipet

			<div class="quantifier" data-callback="function_name">
				<div class="button up">+</div>
				<div class="field">
					<label>x</label> 
					<input type="text" name="field_name" value="99">
				</div>
				<div class="button down">-</div>
			</div>

	*/


		.quantifier {
			display: inline-block;
			font-size: 0px;
			
		}

		.quantifier * {
			font-family: "Gotham" !important;
		}

		.quantifier .field {
			display: inline-block;
			height: 31px;
			width: auto;
			padding-top: 1px;
			box-sizing: border-box;
		}

		.quantifier.small .field {
			height: 23px;
		}

		.quantifier.large .field {
			height: 35px;
		}

		.quantifier .field label {
			display: block;
			float: left;
			margin: 0px;
			font-size: 12px;
			line-height: 31px;
			text-align: center; 
		}

		.quantifier.small .field label {
			width: 10px;
			font-size: 12px;
			line-height: 23px;
		}

		.quantifier.large .field label {
			width: 10px;
			font-size: 14px;
			line-height: 35px;
		}

		.quantifier .field input {
			height: 32px;
			width: 18px;
			margin: 0px;
			padding: 0px;
			border: none;
			font-size: 13px;
			font-weight: 500;
			line-height: 32px;
			text-align: center;
			background-color: transparent;
		}

		.quantifier.small .field input {
			height: 24px;
			width: 15px;
			font-size: 11px;
			line-height: 24px;
		}

		.quantifier.large .field input {
			height: 36px;
			width: 20px;
			font-size: 14px;
			line-height: 36px;
		}

		.quantifier .button {
			display: block;
			height: 32px;
			width: 32px;
			margin: 0px auto 0px auto;
			padding: 0px;
			border: 1px solid transparent;
			border-radius: 0px;
			font-size: 20px;
			font-weight: 100;
			line-height: 32px;
			color: #3898F2;
			background-color: transparent;
			box-sizing: border-box;
			overflow: hidden;
			transition: 0.2s all ease-in-out;
		}

		.quantifier .button:hover {
			filter: brightness(50%) !important;
			border-color: rgba(0,0,0,0.6) !important;
		}

		.quantifier .button.disabled,
		.quantifier .button.disabled:hover {
			color: grey;
			opacity: 0.3;
			filter: brightness(100%)!important ;
			border-color: transparent !important;
		}

		.quantifier.small .button {
			height: 24px;
			width: 24px;
			font-size: 20px;
			line-height: 24px;
		}

		.quantifier.large .button {
			height: 36px;
			width: 36px;
			font-size: 26px;
			line-height: 36px;
		}

		.quantifier.horizontal .button,
		.quantifier.horizontal .field {
			float: right;
		}

		.quantifier.horizontal .field {
			margin-left: 8px;
			margin-right: 8px;
		}

		.quantifier.horizontal.small .field {
			margin-left: 0px;
			margin-right: 0px;
		}

		.quantifier.horizontal .field input {
			margin-left: 2px;
		}

		.quantifier.three .field input {
			width: 26px;
		}

		.quantifier.small.three  .field input {
			width: 22px;
		}

		.quantifier.large.three  .field input {
			width: 30px;
		}

		.quantifier.four  .field input {
			width: 36px;
		}

		.quantifier.small.four  .field input {
			width: 28px;
		}

		.quantifier.large.four  .field input {
			width: 38px;
		}

		.quantifier.outlined .button{
			border-color: rgba(0,0,0,0.2);
		}

		.quantifier.outlined .button.disabled,
		.quantifier.outlined .button.disabled:hover {
			border-color: rgba(0,0,0,0.1)!important;
		}

		/* Quantifier . Sizing */

			/* Extra small */
			@media (min-width: 10px) {

				.quantifier .field {
					height: 32px;
				}

			}

			/* Small */
			@media (min-width: 768px) {

				/* Headers font size */
				.content-body p { line-height: 18px; }

			}

			/* Medium */
			@media (min-width: 990px) {

				/* Headers font size */
				.content-body p { line-height: 18px; }

			}

			/* Large */
			@media (min-width: 1200px) {

				/* Headers font size */
				.content-body p { line-height: 18px; }

			}