@charset "utf-8";
/* =============================================================================
	Author: Nufo Design :. www.nufo.com
   ============================================================================= */
   
/* == CONTACT FORM ======== */
#contact-form form {
	position: relative;
	width: 100%;
	overflow: hidden;
	}
	
form div {
	position: relative;
	margin-bottom: 1em;
	}

form label,
form input,
form textarea {
	font-weight: normal;
	font-size: 2em;
	padding-top: .5em;
	padding-bottom: .5em;
	}
	form .form-input {
		width: 100%;
		height: 100%;
		color: rgba(46,77,92,.8);
		padding-top: 20px;
		margin-top: 1.8em;
		border-bottom-width: 1.55px;
		border-bottom-style: solid;
		border-bottom-color: #DBD300;
		}
	
form .label-name {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	}
	form .label-name::after {
		content: "";
		position: absolute;
		/*left: 50%;*/
		left: 0;
		bottom: 0;
		/*width: 100%;*/
		width: 0;
		height: 100%;
		border-bottom: 2px solid #AC31B9;
		/* Animation */
		/*transform: translateX(-100%);*/
		/*transition: transform .3s ease;*/
		transition: width 0.3s linear 0s, left 0.3s linear 0s;
		}
		form #text-area .label-name::after {
			bottom: 4px;
			}

form .content-name {
	position: absolute;
	left: 0px;
	bottom: 8px;
	transition: all .3s ease;
	}
	form #text-area .content-name {
	position: absolute;
	top: 53px;
	}
	
form .form-input:hover {
	background-color: rgba(135,61,144,.06);
	}

/* -- Label animation -- */
form .form-input:focus + .label-name .content-name, 
form .form-input:valid + .label-name .content-name {
	transform: translateY(-155%);
	color: #AC31B9;
	font-weight: 500;
	}
	form #text-area .form-input:focus + .label-name .content-name,
	form #text-area .form-input:valid + .label-name .content-name {
		transform: translateY(-25%);
		}

/* -- Line animation -- */
form .form-input:hover + .label-name::after,
form .form-input:focus + .label-name::after/*,
form .form-input:valid + .label-name::after*/{
	/*transform: translateX(0%);*/
	width: 100%;
	left: 0;
	}
	
/* -- Button -- */	
form .button {
	width: 380px;
	font-size: 2.2em;
	font-weight: bold; /* Bold */
    font-style: normal;
	color: #1D1D1D;
	text-align: center;
	background-color: rgba(223,175,26,.9);
	background: linear-gradient(to right, rgba(223,175,26,.7) 0%,rgba(223,175,26,.9) 40%,rgba(223,175,26,1) 100%);
	padding-top: .6em;
	padding-right: 1em;
	padding-bottom: .6em;
	padding-left: 1em;
	margin-top: 1.2em;
	margin-bottom: 1.6em;
	border-radius: 25px;
		-webkit-box-shadow: 0px 6px 12px 0px rgba(137, 150, 160, 0.35);
		-moz-box-shadow: 0px 6px 12px 0px rgba(137, 150, 160, 0.35);
		box-shadow: 0px 6px 12px 0px rgba(137, 150, 160, 0.35);
	}
	@media screen and (max-width: 960px) {
	form .button {
		width: 39.5833vw;
		}
	}
	@media screen and (max-width: 490px) {
	form .button {
		width: 77.5510vw;
		}
	}
form .button:hover {
	color: #FDFDFD;
	background-color: rgba(45,134,114,.9);
	background: linear-gradient(to right, rgba(45,134,114,.7) 0%,rgba(45,134,114,.9) 40%,rgba(45,134,114,1) 100%);
	}