%field {
	width: 100%;
	font-size: 20px;
	color: #ababab;
	padding: 15px 0;
	border-bottom: 2px solid #808080;
	margin-bottom: 40px;
	outline: none;
}
.form {
	width: 100%;
	display: block;
	text-align: center;

	&__title {
		font-size: 24px;
		font-weight: bold;
		color: #ed2f59;
		position: relative;
		margin-bottom: 40px;
		text-align: left;

		&::after {
			content: 'Contato';
			font-size: 200px;
			font-weight: bold;
			letter-spacing: 14.4px;
			color: #fafafa;
			position: absolute;
			left: -100px;
			top: -124px;
			z-index: -1;
		}
		&.--agenda {
			&::after {
				content: 'Agenda';
			}
		}
	}

	&__input {
		@extend %field;

		&.parsley-error {
			border-color: #d02e2e;
		}

		&::placeholder {
			color: #ababab;
		}
	}

	&__select {
		@extend %field;
		appearance: none;
		background: url('./assets/img/icons/arrow-user.svg') no-repeat #fff;
		background-position-x: calc(100% - 20px);
		background-position-y: center;
		background-size: 14px;
	}

	&__file {
		display: block;
		height: 50px;
		border: 1px solid #808080;
		margin-top: 20px;
		padding: 0 40px 0 10px;
		border-radius: 6px;
		position: relative;
		color: #808080;
		text-align: left;
		position: relative;
		&:after {
			content: '';
			position: absolute;
			top: -1px;
			bottom: -1px;
			right: -1px;
			width: 40px;
			background: #808080 url(../img/layout/icon-upload-white.svg)
				no-repeat center right 14px;
			background-size: 14px auto;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			transition: all 250ms ease-out;
		}

		strong {
			z-index: 1;
			position: relative;
			font-size: 11px;
			line-height: 50px;
			text-transform: uppercase;
		}

		&.error {
			border-color: #d02e2e;
		}

		.file-name {
			position: absolute;
			top: 100%;
			left: 0;
			right: 60px;
			font-size: 12px;
			text-align: left;
			padding-top: 7px;
			color: #808080;
		}

		input {
			width: 0.1px;
			height: 0.1px;
			opacity: 0;
			overflow: hidden;
			position: absolute;
			z-index: -1;
		}

		&:hover {
			color: #fff;
			&:after {
				width: calc(100% + 3px);
				background: #ed2f59 url(../img/layout/icon-upload-white.svg)
					no-repeat center right 14px;
				background-size: 14px auto;
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
				right: -1px;
			}
		}
	}

	.form-group {
		width: 100%;
		margin-bottom: 40px;
	}

	&__label {
		width: 100%;
		font-size: 20px;
		display: block;
		margin-bottom: 15px;
		text-align: left;
	}

	&__text {
		width: 100%;
		height: 280px;
		font-size: 20px;
		color: #ababab;
		border: 1px solid #808080;
		border-radius: 10px;
		padding: 15px;
	}

	&__btn {
		width: 190px;
		height: 55px;
		background-color: #ed2f59;
		border: none;
		border-radius: 5px;
		color: #fff;
		text-transform: uppercase;
		font-size: 16px;
		font-weight: bold;
		letter-spacing: 2px;
		margin: 0 auto;
		transition: 0.3s color ease-in-out, 0.3s background-color ease-in-out;

		&:hover {
			background-color: #971531;
		}

		&.--loading {
			background-image: url('../img/layout/load.svg');
			background-size: 45px;
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	@media screen and (max-width: 576px) {
		&__title {
			display: none;

			&::after {
				display: none;
			}
		}

		&__input,
		&__label,
		&__text {
			font-size: 14px;
		}

		&__input {
			border-bottom: 1px solid #808080;
			margin-bottom: 30px;
		}

		&__text {
			height: 200px;
		}
	}
}
