@charset "utf-8";

/* GENERAL FORM ATTR */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #C5C5C5;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #C5C5C5;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #C5C5C5;
}

input[type="submit"]{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type="text"]{
	grid-column: 2 / 12;
	width: 100%;
	height: 44px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	margin: 10px 0 34px 0;
	padding-left: 15px;
}
input[type="date"]{
	grid-column: 2 / 12;
	width: 100%;
	height: 44px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	margin: 10px 0 34px 0;
	padding-left: 15px;

	font-family: Open sans; 
	font-size: 14px; 
	color: #999999;
}
select{
	grid-column: 2 / 12;
	width: 100%;
	height: 44px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	margin: 10px 0 34px 0;
	padding-left: 15px;

	font-family: Open sans; 
	font-size: 14px; 
	color: #999999;
}
textarea{
	font-family: Open sans; 
	font-size: 14px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	color: #999999;
}
/* STYLE GREEN THE RADIO BUTTONS */
input[type="radio"]{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	width: 20px;
	height: 20px;
	padding: 4px;
	/* background-color only for content */
	background-clip: content-box;
	border: 1px solid #bbbbbb;
	background-color: #e7e6e7;
	border-radius: 50%;
}
	input[type="radio"]:checked{
		border: 1px solid #35CC62;
		background-color: #35CC62;
	}
/* STYLE GREEN THE CHECKBOX BUTTONS */
input[type="checkbox"]{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	width: 20px;
	height: 20px;
	padding: 0px;
	/* background-color only for content */
	background-clip: content-box;
	border: 1px solid #bbbbbb;
	background-color: #e7e6e7;
}
	input[type="checkbox"]:checked{
		border: 1px solid #35CC62;
		background-color: #35CC62 !important;
	}

/* ERRORS */
.highlight{
	background-color: #E42233 !important;
}
.error{
	display: none;
	font-family: Montserrat;
	font-size: 12px;
	line-height: 14px;
	font-weight: 500;
	letter-spacing: 1.2px;
	color: #F01F1F;
}

/* MENU ATTR */
nav{
	background-color: #FFFFFF;
}
	nav #logo{
		background: url(../img/logos/logo_inverted.png) no-repeat;
		background-size: 100%;
		background-position: center;
	}
	nav li a{
		color: #011745;
	}
/* FORM CONFIRMATION */
#confirmation{
	height: calc(100vh - 328px);
	color: #FFFFFF;
	text-align: center;
}
	#confirmation .grid_container{
		grid-template-rows: repeat(24, 1fr);
	}
	#confirmation img{
		grid-column: 6 / 8;
		grid-row: 10 / 12;
		display: block;
		width: 48px;
		height: 44px;
		object-fit: contain;
		justify-self: center;
	}
	#confirmation h2{
		grid-column: 2 / 12;
		grid-row: 13 / 14;
		font-family: Montserrat;
		font-size: 21px;
		line-height: 32px;

		color: #333333;
	}
	#confirmation p{
		grid-column: 2 / 12;
		grid-row: 15 / 17;
		font-family: Open Sans;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0.1px;

		color: #666666;
	}
	#confirmation a{
		margin-bottom: 40px;
		grid-column: 2 / 12;
		grid-row: 20 / 21;
		font-family: Open Sans;
		font-size: 16px;
		line-height: 23px;
		font-weight: 600;
		letter-spacing: 0.114286px;
		text-decoration: underline;

		color: #333333;
	}
/* FORM POLITICA */
#politica{
	min-height: calc(100vh - 416px);
	color: #FFFFFF;
	padding-top: 130px;
}
	#politica #content{
		grid-column: 2 / 12;
		text-align: left;
	}
	#politica h3{
		color: #333333;
		margin: 25px 0;
	}
	#politica p{
		margin-bottom: 7px;
		font-family: Open Sans;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0.1px;

		color: #666666;
	}
	#politica a{
		margin: 25px 0 75px 0;
		font-family: Open Sans;
		font-size: 16px;
		line-height: 23px;
		font-weight: 600;
		letter-spacing: 0.114286px;
		text-decoration: underline;

		color: #333333;
	}

/* FORM HEADER */
#form_header{
	height: 462px;
	color: #FFFFFF;
	background: url(../img/form_head.png) no-repeat;
	background-size: cover;
	background-position: center;
}
	#form_header .grid_container{
		grid-template-rows: repeat(21, 1fr);
	}
		#form_header h1{
			grid-column: 2 / 12;
			grid-row: 7 / 10;
			font-family: Montserrat;
			font-size: 37px;
			line-height: 42px;
			color: #FFFFFF;
		}
		#form_header h3{
			grid-column: 2 / 12;
			grid-row: 13 / 14;
			font-family: Montserrat;
			font-size: 12px;
			line-height: 21px;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 1.2px;

			color: #FFFFFF;
		}
		#form_header ul{
			grid-column: 2 / 12;
			grid-row: 15 / 20;
			list-style-type: none;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
			#form_header ul li{
				font-family: Open Sans;
				font-size: 16px;
				line-height: 24px;
				letter-spacing: 0.1px;

				color: #FFFFFF;
			}

/* FORM PRODUCT */
	#form_producto{
		min-height: 869px;
	}
			#form_producto p#general_info{
				grid-column: 2 / 12;
				color: #666666;
				color: #E42233;
				margin: 64px 0 14px 0;
			}
			#form_producto h2{
				grid-column: 2 / 12;
				margin: 24px 0 34px 0;
				font-family: Montserrat;
				font-size: 21px;
				line-height: 32px;

				color: #333333;
			}
			#form_producto ul{
				grid-column: 2 / 12;
				margin: 0 0 14px 0;
				list-style-type: none;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
				#form_producto li{
					height: 134px;
				}
				#form_producto h5{
					margin-top: 2px;
					text-transform: none;
					font-family: Open Sans;
					font-size: 14px;
					line-height: 21px;
					letter-spacing:  0.0875px;

					color: #666666;
				}
				/* RADIO-IMAGE BUTTONS */
				/* HIDE RADIO */
				#form_producto .radio_img{
					width: 100%;
					height: 88px;
					object-fit: cover;
				}
				#form_product_type input[type=radio] { 
				  position: absolute;
				  opacity: 0;
				  width: 0;
				  height: 0;
				}

				/* IMAGE STYLES */
				#form_product_type input[type=radio] + img {
				  cursor: pointer;
				}

				/* CHECKED STYLES */
				#form_product_type input[type=radio]:checked + img {
				  outline: 2px solid #f00;
				}

			#form_producto #label_quantity{
				grid-column: 2 / 12;
				font-family: Open Sans;
				font-size: 14px;
				line-height: 23px;
				font-weight: 600;
				letter-spacing:  0.1px;

				color: #333333;
			}
				#label_quantity a{
					display: inline-block;
					margin-top: 10px;
				    content: "";
				    width: 14px;
				    height: 14px;
				    background: url('../img/form/alert.png') no-repeat;
				    background-size: 100%;
				}
			#form_producto #form_quantity{
				grid-column: 2 / 12;
			}
			#form_producto ul#client_selector{
				grid-column: 2 / 12;
				height: 48px;
				margin-top: 20px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-family: Montserrat;
				font-size: 16px;
				line-height: 24px;
				font-weight: normal;

				color: #333333;
			}
				#form_producto ul#client_selector input{
					color: #35CC62;
				}
				#form_producto ul#client_selector li{
					width: 50%;
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					justify-content: flex-start;
				}
					#client_selector input[type="radio"]{
						margin-right: 7%;
						margin-top: 7px;
					}

			#form_producto #msg_quantity, #form_producto #msg_client{
				display: none;
				grid-column: 2 / 12;
				margin-bottom: 27px;
				font-size: 14px;
			}
				#form_producto #msg_quantity{
					color: #B80000;
				}

/* FORM DATA */
	#form_data{
		max-height: 2107px;
	}
		#form_data fieldset{
			grid-column: 2 / 12;
		}
			#form_data legend{
				margin-bottom: 40px; 
				width: 100%; 
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				font-family: Montserrat;
				font-size: 21px;
				line-height: 32px;
				font-weight: normal;

				color: #333333;
			}
				#form_data legend:after{
					display: block;
					float: right;
					margin-top: 10px;
				    content: "";
				    width: 15px;
				    height: 10px;
				    background: url('../img/icons/ic_arrow_up.png') no-repeat;
				    background-size: 100%;
				    transition: .5s;
				}
				#form_data .toggleAfter:after{
					display: block;
					float: right;
					margin-top: 10px;
				    content: "";
				    width: 15px;
				    height: 10px;
				    background: url('../img/icons/ic_arrow_down.png') no-repeat;
				    background-size: 100%;
				    transition: .5s;
				}
					#form_data legend:hover:after{
						margin-top: 0;
					}
		#form_data label{
			grid-column: 2 / 12;
			font-family: Open Sans;
			font-size: 14px;
			line-height: 23px;
			font-weight: 600;
			letter-spacing: 0.1px;

			color: #333333;
		}
		#field_entrega{
			margin-top: 64px;
		}

		/* DESKTOP IMGS */
		#form_data ul#form_delivery_time{
			display: none;
		}
		#form_data ul#form_delivery_time_M{
			grid-column: 2 / 12;
			height: 88px;
			list-style-type: none;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
			#form_delivery_time_M li{
				width: 32%;
			}
			/* RADIO-IMAGE BUTTONS */
				/* HIDE RADIO */
				#form_delivery_time_M .radio_img{
					width: 100%;
					height: 88px;
					border: 1px solid rgba(0, 0, 0, 0.1);
					object-fit: contain;
				}
				#form_delivery_time_M input[type=radio] { 
				  position: absolute;
				  opacity: 0;
				  width: 0;
				  height: 0;
				}

				/* IMAGE STYLES */
				#form_delivery_time_M input[type=radio] + img {
				  cursor: pointer;
				}

				/* CHECKED STYLES */
				#form_delivery_time_M input[type=radio]:checked + img {
				  outline: 2px solid #f00;
				}

		#p_preferencia{
			color: #666666;
		}
		#horario_msg{
			color: #666666;
			margin: 24px 0 50px 0;
		}
		#form_data ul#payment_method{
			grid-column: 2 / 12;
			grid-row: 34 / 37;
			margin-top: 15px;
			list-style-type: none;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-family: Montserrat;
			font-size: 16px;
			line-height: 24px;
			font-weight: normal;

			color: #333333;
		}
			#form_data ul#payment_method input{
				color: #35CC62;
			}
			#form_data ul#payment_method li{
				width: 50%;
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-start;
			}
				#payment_method input[type="radio"]{
					margin-right: 7%;
					margin-top: 7px;
				}
		#msg_payment{
			margin: 23px 0 30px 0;
		}
			

		#form_data textarea{
			width: 100%;
			height: 221px;
			margin-top: 15px;
		}

		#form_data #politica_container, #captchaBox{
			grid-column: 2 / 12;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: flex-start;
			margin-top: 30px;
		}
			#politica_container label, #politica_container a{
				display: inline !important;
			}
			#politica_container input[type="checkbox"]{
				margin-right: 5%;
				margin-top: 7px;
			}
			#politica_container a{
				width: 80%;
				display: block;
				font-family: Open Sans;
				font-style: normal;
				font-weight: 600;
				font-size: 14px;
				line-height: 23px;

				/* identical to box height, or 150% */
				text-decoration: underline;
				letter-spacing: 0.1px;
				color: #999999;
			}

		#form_data input[type="submit"]{
			grid-column: 2 / 12;
			width: 100%;
			height: 44px;
			background-color: #011745;
			padding-left: 0;
			margin: 65px 0;
			font-family: Montserrat;
			font-style: normal;
			font-weight: 300;
			font-size: 14px;
			line-height: 44px;

			border-radius: 0;

			/* identical to box height, or 150% */
			text-align: center;
			letter-spacing: 1px;
			color: #FFFFFF;
		}
/* DESKTOP MEDIA QUERIES*/
@media only screen and (min-width: 768px) {
/* MAIN INPUT */
	input[type="text"]{
		grid-column: 2 / 6 !important;
	}
/* FORM PRODUCTO */
	#form_producto{
		min-height: 490px;
	}
		#form_producto ul{
			grid-column: 2 / 8;
			margin: 0 0 74px 0;
			list-style-type: none;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
			#form_producto li{
				width: 198px;
				height: 88px;
			}
		#form_producto #msg_client{
			margin-top: -74px;
		}
		#form_producto input[type="radio"]{
			margin-top: 4px;
		}
		#form_producto ul#client_selector{
    		grid-column: 2 / 6;
    	}
/* FORM DATA */
	#form_data fieldset{
		grid-column: 2 / 8;
	}
		#form_data input{
			display: block;
			width: 66%;
		}
		select {
			width: 66%;
		}
		#form_data ul#payment_method{
			width: 66%;
		}
		#form_data input[type="radio"]{
			width: 20px;
			margin: 3px 10px 0 0;
		}
		#form_data input[type="checkbox"]{
			width: 20px;
			margin: 3px 10px 0 0;
		}
/* SUBMIT */
	#form_data input[type="submit"]{
		width: 155px;
		height: 44px;
	}
}