/* ----------- Reset ---------------------------------*/
/* Remove input arrow on input[type=number] */
#subscription-form input[type="number"]::-webkit-inner-spin-button,
#subscription-form input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#subscription-form input[type=number] {
	-moz-appearance: textfield;
}

/* Remove background color chrome form autocomplete */
#subscription-form input:-webkit-autofill {
	background-color: white;
}

#subscription-form input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* ----------- Base ---------------------------------*/
#subscription-form {
	position: fixed;
	z-index: 10000;
	box-sizing: border-box;
}

	#subscription-form * {
		box-sizing: border-box;
	}

	#subscription-form .close-button:before,
	#subscription-form .close-button:after {
		position: absolute;
		content: "";
		display: block;
		width: 15px;
		height: 15px;
		border-left: 2px solid #ccc;
		cursor: pointer;
	}

	#subscription-form .close-button:before {
		top: 15px;
		right: 5px;
		-ms-transform: rotate(45deg); /* IE 9 */
		-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
		transform: rotate(45deg);
	}

	#subscription-form .close-button:after {
		top: 5px;
		right: 5px;
		-ms-transform: rotate(-45deg); /* IE 9 */
		-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
		transform: rotate(-45deg);
	}

	#subscription-form .subscription-form_row {
		width: 100%;
		content: " ";
		display: table;
		clear: both;
		padding: 0;
	}

	#subscription-form .subscription-form_two-col {
		float: left;
		width: 48%;
		padding: 0;
	}

		#subscription-form .subscription-form_two-col:nth-child(odd) {
			margin-right: 2%;
		}

		#subscription-form .subscription-form_two-col:nth-child(even) {
			margin-left: 2%;
		}

	#subscription-form input {
		margin: 0;
	}

	/* Feedback message */
	#subscription-form .success-message-post-subscription {
		display: block;
		width: 100%;
		padding: 20px;
		margin: 20px 0;
		border: 2px solid transparent;
		border-radius: 4px;
		text-align: center;
	}

		#subscription-form .success-message-post-subscription p,
		#subscription-form .error-message-post-subscription p {
			margin: 0;
		}

			#subscription-form .success-message-post-subscription p:before {
				content: "";
				display: block;
				width: 12px;
				height: 6px;
				margin: 0 auto 10px;
				border: 3px solid transparent;
				border-top: none;
				border-right: none;
				-ms-transform: rotate(-45deg); /* IE 9 */
				-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
				transform: rotate(-45deg);
			}

	#subscription-form .subscription-form_submit {
		cursor: pointer;
	}

		#subscription-form .subscription-form_submit:focus {
			outline: none;
		}

	#subscription-form .subscription-form_button-centered {
		display: block;
		width: 180px !important;
		margin: 0 auto !important;
		position: relative;
	}

	/* ----------- Position ---------------------------------*/
	/* Position -- top left */
	#subscription-form.position_top-left {
		top: 30px;
		left: 30px;
	}

	/* Position -- top right */
	#subscription-form.position_top-right {
		top: 30px;
		right: 30px;
	}

	/* Position -- bottom right */
	#subscription-form.position_bottom-right {
		bottom: 30px;
		right: 30px;
	}

	/* Position -- bottom left */
	#subscription-form.position_bottom-left {
		bottom: 30px;
		left: 30px;
	}


	/* ----------- Size ---------------------------------*/
	/* Size -- small */
	#subscription-form.size_small {
		padding: 20px 30px;
		max-width: 340px;
	}

		#subscription-form.size_small .subscription-form_row {
			margin-bottom: 10px;
		}

		#subscription-form.size_small .subscription-form_row-bottom-thin {
			margin-bottom: 5px;
		}

		#subscription-form.size_small h1 {
			font-size: 20px;
			font-weight: normal;
			text-align: center;
			margin: 15px 0;
			letter-spacing: 0;
		}

		#subscription-form.size_small h2 {
			font-size: 13px;
			font-weight: bold;
			text-align: center;
			margin-top: 20px;
		}

		#subscription-form.size_small label {
			display: block;
			font-size: 13px;
			line-height: 1.8em;
			font-weight: bold;
			text-align: left;
			padding-bottom: 0;
		}

			#subscription-form.size_small label.label_privacy {
				font-size: 11px;
				text-align: left;
				opacity: 0.8;
				line-height: 1.2em;
				position: relative;
				left: 25px;
				width: 90%;
			}

		#subscription-form.size_small input[type="email"],
		#subscription-form.size_small input[type="number"] {
			width: 100%;
			padding: 0 5px;
			font-size: 13px;
			line-height: 1.8em !important;
			min-height: 38px;
		}

	#subscription-form input[type="number"].is-invalid,
	#subscription-form input[type="email"].is-invalid {
		border-color: #FE6A56;
	}

	#subscription-form input[type="checkbox"].is-invalid {
		outline: 2px solid #FE6A56;
	}

	#subscription-form.size_small .subscription-form_submit {
		width: 100%;
		padding: 10px;
		font-size: 16px;
		letter-spacing: 0.03em;
		font-weight: normal;
		text-align: center;
	}

	#subscription-form input[type="checkbox"] {
		position: absolute;
	}

	/* ----------- Stile ---------------------------------*/
	/* Style -- light */
	#subscription-form.style_light {
		border-radius: 6px;
		font-family: Arial, sans serif;
		background-color: white;
		border: 2px solid white;
		color: #7D7D7D;
		box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
	}

		#subscription-form.style_light h1 {
			color: #545454;
			font-weight: bold;
			letter-spacing: 0.03em;
		}

		#subscription-form.style_light h2 {
			color: #545454;
		}

		#subscription-form.style_light label {
			color: #545454;
			opacity: 0.7;
		}

		#subscription-form.style_light input {
			background-color: white;
			border: 2px solid #E6E6E6;
			border-radius: 2px;
			color: #818181;
		}

		#subscription-form.style_light a {
			color: #12BF6D;
		}

		#subscription-form.style_light .subscription-form_submit {
			font-family: Arial, sans serif;
			border-color: #12BF6D;
			background-color: #12BF6D;
			transition: background-color 0.2s;
			color: white;
			border-radius: 3px;
			font-weight: bold;
		}

			#subscription-form.style_light .subscription-form_submit:hover {
				border-color: #0BA059;
				background-color: #0BA059;
			}

		/* Loading del submit */
		#subscription-form.style_light .subscription-form_is-loading {
			color: #ffffff !important;
			background-color: #d1d1d1 !important;
			border-color: #d1d1d1 !important;
			pointer-events: none;
			cursor: default;
		}

		/* Messaggi di feedback */
		#subscription-form.style_light .success-message-post-subscription {
			border-color: #12BF6D;
		}

			#subscription-form.style_light .success-message-post-subscription p {
				color: #12BF6D;
				font-weight: bold;
				font-size: 14px;
			}

				#subscription-form.style_light .success-message-post-subscription p:before {
					border-color: #12BF6D;
				}

		#subscription-form.style_light .error-message-post-subscription p {
			color: #FF5630;
			font-weight: bold;
			font-size: 14px;
			text-align: left;
			margin-bottom: 10px;
		}


	/* Style -- dark */
	#subscription-form.style_dark {
		border-radius: 6px;
		font-family: Arial, sans serif;
		background-color: #2C3E50;
		border: 2px solid #2C3E50;
		color: #FFFFFF;
		box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
	}

		#subscription-form.style_dark h1 {
			color: #FFFFFF;
			font-weight: bold;
			letter-spacing: 0.03em;
		}

		#subscription-form.style_dark h2 {
			color: #FFFFFF;
		}

		#subscription-form.style_dark label {
			color: #FFFFFF;
		}

		#subscription-form.style_dark input {
			background-color: #51677D;
			border: 2px solid #647585;
			border-radius: 2px;
			color: #FFFFFF;
		}

		#subscription-form.style_dark a {
			color: #1BBC9B;
		}

		#subscription-form.style_dark .subscription-form_submit {
			font-family: Arial, sans serif;
			border-color: #1BBC9B;
			background-color: #1BBC9B;
			transition: background-color 0.2s;
			color: white;
			border-radius: 3px;
			font-weight: bold;
		}

			#subscription-form.style_dark .subscription-form_submit:hover {
				border-color: #19977E;
				background-color: #19977E;
				color: white;
			}

		/* Loading del submit */
		#subscription-form.style_dark .subscription-form_is-loading {
			color: #b5b5b5 !important;
			background-color: #d1d1d1 !important;
			border-color: #d1d1d1 !important;
			pointer-events: none;
			cursor: default;
		}

		#subscription-form.style_dark .success-message-post-subscription {
			border-color: #1BBC9B;
		}

			#subscription-form.style_dark .success-message-post-subscription p {
				color: #1BBC9B;
				font-weight: bold;
				font-size: 14px;
			}

				#subscription-form.style_dark .success-message-post-subscription p:before {
					border-color: #1BBC9B;
				}

/* ----------- Media query ---------------------------------*/
@media only screen and (max-device-width : 600px) {
	#subscription-form {
		max-width: none !important;
		left: 30px !important;
		right: 30px !important;
	}
}

@media only screen and (max-device-width : 400px) {
	#subscription-form {
		max-width: none !important;
		left: 10px !important;
		right: 10px !important;
	}
}

/* Portrait */
@media only screen and (max-device-width : 480px) and (orientation: landscape) {
	#subscription-form {
		max-width: none !important;
		position: absolute !important;
		top: 10px !important;
		bottom: auto !important;
		left: 30px !important;
		right: 30px !important;
	}

		#subscription-form .close-button::after {
			top: 25px;
			right: 25px;
		}

		#subscription-form .close-button::before {
			top: 36px;
			right: 25px;
		}
}

@media only screen and (max-device-width : 700px) and (orientation: landscape) {
	#subscription-form {
		max-width: none !important;
		position: absolute !important;
		top: 10px !important;
		bottom: auto !important;
		left: 30px !important;
		right: 30px !important;
	}

		#subscription-form .close-button::after {
			top: 25px;
			right: 25px;
		}

		#subscription-form .close-button::before {
			top: 36px;
			right: 25px;
		}
}