/* ----------- 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;
}

#subscription-form input[type="checkbox"]{
	    left: 31px;
}

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

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

#subscription-form a{
	text-decoration: none;
}

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

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

#subscription-form .close-button{
	position: absolute;
	top: 8px;
	right: 8px;
}

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

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

#subscription-form .close-button:after{
	top: 0;
	right: 0;
	-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;
}

/* ----------- 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;
  min-width: 240px;
}

#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,
#subscription-form.size_small p.subscription-popup-title {
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	margin: 15px 0;
	letter-spacing: 0;
	line-height: 1.2em;
}

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

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

#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,
#subscription-form.size_small .subscription-form_social-btn{
	width: 100%;
	padding: 10px;
	font-size: 16px;
	letter-spacing: 0.03em;
	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 1px rgba(0, 0, 0, 0.3);
}

#subscription-form.style_light h1,
#subscription-form.style_light p.subscription-popup-title {
	color: #545454;
	font-weight: bold;
	letter-spacing: 0.03em;
	line-height: 1.2em;
}

#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;
}

/* Chrome/Opera/Safari */
#subscription-form.style_light ::-webkit-input-placeholder {
  color: #707070;
}
/* Firefox 19+ */
#subscription-form.style_light ::-moz-placeholder {
  color: #707070;
}
/* IE 10+ */
#subscription-form.style_light :-ms-input-placeholder {
  color: #707070;
}
/* Firefox 18- */
#subscription-form.style_light :-moz-placeholder {
  color: #707070;
}

#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{
	font-family: Arial, sans serif;
	background-color: #2C3E50;
	border: 2px solid #2C3E50;
	color: #FFFFFF;
	border-radius: 3px;
	box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.5);
}

#subscription-form.style_dark h1,
#subscription-form.style_dark p.subscription-popup-title {
	color: #FFFFFF;
	font-weight: bold;
	letter-spacing: 0.03em;
	line-height: 1.2em;
}

#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;
}
/* Chrome/Opera/Safari */
#subscription-form.style_dark ::-webkit-input-placeholder {
  color: #D0D0D0;
}
/* Firefox 19+ */
#subscription-form.style_dark ::-moz-placeholder {
  color: #D0D0D0;
}
/* IE 10+ */
#subscription-form.style_dark :-ms-input-placeholder {
  color: #D0D0D0;
}
/* Firefox 18- */
#subscription-form.style_dark :-moz-placeholder {
  color: #D0D0D0;
}

#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;
}

/* Bottoni iscrizione sui social */
#subscription-form .subscription-form_social-btn{
	position: relative;
	display: inline-block;
	font-family: Arial, sans serif;
	font-weight: bold;
	border-radius: 3px;
	transition: background-color 0.2s;
	padding-left: 35px !important;
}

#subscription-form .subscription-form_icon-btn {
    position: absolute;
    left: 12px;
}

#subscription-form .subscription-form_messenger-btn{
	background-color: #006dff;
	color: white !important;
}

#subscription-form .subscription-form_messenger-btn:hover{
	background-color: #0057b5;
	color: white !important;
}

#subscription-form .subscription-form_telegram-btn{
	background-color: #36aee2;
	color: white !important;
}

#subscription-form .subscription-form_telegram-btn:hover{
	background-color: #1c92d2;
	color: white !important;
}

#subscription-form.container_word-to-separate{
	word-wrap: break-word;
}

#subscription-form.container_word-to-break{
	word-break: break-all;
}

#subscription-form.container_break-word{
	word-break: break-word;
}

/* ----------- 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;
	}
}
