.uac-input {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 1em;
	max-width: 350px;
	width: calc(100% - 2em);
	vertical-align: top;
	.input__field {
		position: relative;
		display: block;
		float: right;
		padding: 0.8em;
		width: 60%;
		border: none;
		border-radius: 0;
		background: #f0f0f0;
		color: #aaa;
		font-weight: 400;
		font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
		-webkit-appearance: none; /* for box shadows to show on iOS */
	}

	.input__field:focus {
		outline: none;
	}

	.input__label {
		display: inline-block;
		float: right;
		padding: 0 1em;
		width: 40%;
		color: #696969;
		font-weight: bold;
		font-size: 70.25%;
		-webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
		-webkit-touch-callout: none;
		-khtml-user-select: none;
		user-select: none;
	}

	.input__label-content {
		position: relative;
		display: block;
		padding: 1.6em 0;
		width: 100%;
	}
	.graphic {
		position: absolute;
		top: 0;
		left: 0;
		fill: none;
	}

	.icon {
		color: #ddd;
		font-size: 150%;
	}
} // .uac-input
// -------------------------------- different themes --------------
/* Nao */
.uac-input.input--nao {
	overflow: hidden;
	padding-top: 1em;
	.input__field--nao {
		padding: 0.5em 0em 0.25em;
		width: 100%;
		background: transparent;
		color: #9da8b2;
		font-size: 1.25em;
	}

	.input__label--nao {
		position: absolute;
		top: 0.95em;
		font-size: 0.85em;
		left: 0;
		display: block;
		width: 100%;
		text-align: left;
		padding: 0em;
		pointer-events: none;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transition: -webkit-transform 0.2s 0.15s, color 1s;
		transition: transform 0.2s 0.15s, color 1s;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}

	.graphic--nao {
		stroke: #92989e;
		pointer-events: none;
		-webkit-transition: -webkit-transform 0.7s, stroke 0.7s;
		transition: transform 0.7s, stroke 0.7s;
		-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
		transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
	} 

	.input__field--nao:focus + .input__label--nao,
	&.input--filled .input__label--nao {
		color: #333;
		-webkit-transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
		transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
	}

	.input__field--nao:focus ~ .graphic--nao,
	&.input--filled .graphic--nao {
		stroke: #333;
		-webkit-transform: translate3d(-66.6%, 0, 0);
		transform: translate3d(-66.6%, 0, 0);
	}
}

/* Shoko */
.uac-input.input--shoko {
	overflow: hidden;
	padding-bottom: 2.5em;
	.input__field--shoko {
		padding: 0;
		margin-top: 1.2em;
		width: 100%;
		background: transparent;
		// color: #fff;
		color: #f18292;
		font-size: 1.55em;
	}

	.input__label--shoko {
		position: absolute;
		top: 2em;
		left: 0;
		display: block;
		width: 100%;
		text-align: left;
		padding: 0em;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #A09C9C;
		pointer-events: none;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transition: -webkit-transform 0.2s 0.1s, color 0.3s;
		transition: transform 0.2s 0.1s, color 0.3s;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}

	.graphic--shoko {
		stroke: #A09C9C;
		pointer-events: none;
		stroke-width: 2px;
		top: 1.25em;
		bottom: 0px;
		height: 3.275em;
		-webkit-transition: -webkit-transform 0.7s, stroke 0.7s;
		transition: transform 0.7s, stroke 0.7s;
		-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
		transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
	} 

	.input__field--shoko:focus + .input__label--shoko,
	&.input--filled .input__label--shoko {
		color: #A58282;
		-webkit-transform: translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1);
		transform: translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1);
	}

	.input__field--shoko:focus ~ .graphic--shoko,
	&.input--filled .graphic--shoko {
		stroke: #A58282;
		-webkit-transform: translate3d(-66.6%, 0, 0);
		transform: translate3d(-66.6%, 0, 0);
	}
}


/* Manami ---------*/
.uac-input.input--manami {
	overflow: hidden;
	.input__field--manami {
		width: 100%;
		background: transparent;
		padding: 0.5em;
		margin-bottom: 2em;
		color: #f9f7f6;
		z-index: 100;
		opacity: 0;
	}

	.input__label--manami {
		width: 100%;
		position: absolute;
		text-align: left;
		padding: 0.5em 0;
		pointer-events: none;
		font-size: 1em;
	}

	.input__label--manami::before,
	.input__label--manami::after {
		content: '';
		position: absolute;
		width: 100%;
		left: 0;
	}

	.input__label--manami::before {
		height: 100%;
		background: #A8A8A8;
		top: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
	}

	.input__label--manami::after {
		height: 2px;
		background: #A8A8A8;
		top: 100%;
		-webkit-transition: opacity 0.2s;
		transition: opacity 0.2s;
	}

	.input__label-content--manami {
		padding: 0;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transition: -webkit-transform 0.2s, color 0.2s;
		transition: transform 0.2s, color 0.2s;
	}

	.input__field--manami:focus,
	&.input--filled .input__field--manami {
		opacity: 1;
		-webkit-transition: opacity 0s 0.2s;
		transition: opacity 0s 0.2s;
	}

	.input__label--manami::before,
	.input__label--manami::after,
	.input__label-content--manami,
	.input__field--manami:focus,
	&.input--filled .input__field--manami {
		-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
		transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
	}

	.input__field--manami:focus + .input__label--manami::before,
	&.input--filled .input__label--manami::before {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	.input__field--manami:focus + .input__label--manami::after,
	&.input--filled .input__label--manami::after {
		opacity: 0;
	}

	.input__field--manami:focus + .input__label--manami .input__label-content--manami,
	&.input--filled .input__label--manami .input__label-content--manami {
		color: #cbc4c6;
		-webkit-transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1);
		transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1);
	}
}

/* Nariko */
.uac-input.input--nariko {
	overflow: hidden;
	padding-top: 2em;
	.input__field--nariko {
		width: 100%;
		background: transparent;
		opacity: 0;
		padding: 0.35em;
		z-index: 100;
		color: #f18292;
	}

	.input__label--nariko {
		width: 100%;
		bottom: 0;
		position: absolute;
		pointer-events: none;
		text-align: left;
		color: #8E9191;
		padding: 0 0.5em;
	}

	.input__label--nariko::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 4em;
		top: 100%;
		left: 0;
		background: #fff;
		border-top: 4px solid #9B9F9F;
		-webkit-transform: translate3d(0, -3px, 0);
		transform: translate3d(0, -3px, 0);
		-webkit-transition: -webkit-transform 0.4s;
		transition: transform 0.4s;
		-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
		transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	}

	.input__label-content--nariko {
		padding: 0.5em 0;
		-webkit-transform-origin: 0% 100%;
		transform-origin: 0% 100%;
		-webkit-transition: -webkit-transform 0.4s, color 0.4s;
		transition: transform 0.4s, color 0.4s;
		-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
		transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	}

	.input__field--nariko:focus,
	&.input--filled .input__field--nariko {
		cursor: text;
		opacity: 1;
		-webkit-transition: opacity 0s 0.4s;
		transition: opacity 0s 0.4s;
	} 

	.input__field--nariko:focus + .input__label--nariko::before,
	&.input--filled .input__label--nariko::before {
		-webkit-transition-delay: 0.05s;
		transition-delay: 0.05s;
		-webkit-transform: translate3d(0, -3.3em, 0);
		transform: translate3d(0, -3.3em, 0);
	}

	.input__field--nariko:focus + .input__label--nariko .input__label-content--nariko,
	&.input--filled .input__label-content--nariko {
		color: #6B6E6E;
		-webkit-transform: translate3d(0, -3.3em, 0) scale3d(0.81, 0.81, 1);
		transform: translate3d(0, -3.3em, 0) scale3d(0.81, 0.81, 1);
	}
}


/* Yoshiko */
.uac-input.input--yoshiko{ 
	.input__field--yoshiko {
		width: 100%;
		background-color: #d0d1d0;
		border: 2px solid transparent;
		-webkit-transition: background-color 0.25s, border-color 0.25s;
		transition: background-color 0.25s, border-color 0.25s;
	}
	.input__label--yoshiko {
		width: 100%;
		text-align: left;
		position: absolute;
		bottom: 100%;
		pointer-events: none;
		overflow: hidden;
		padding: 0 1.25em;
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
		-webkit-transition: -webkit-transform 0.25s;
		transition: transform 0.25s ;
		-webkit-transition-timing-function: ease-in-out;
		transition-timing-function: ease-in-out;
	}
	.input__label-content--yoshiko {
		color: #8B8C8B;
		padding: 0.25em 0;
		-webkit-transition: -webkit-transform 0.25s;
		transition: transform 0.25s;
		-webkit-transition-timing-function: ease-in-out;
		transition-timing-function: ease-in-out;
	}
	.input__label-content--yoshiko::after {
		content: attr(data-content);
		position: absolute;
		font-weight: 800;
		bottom: 100%;
		left: 0;
		height: 100%;
		width: 100%;
		color: #a3d39c;
		padding: 0.25em 0;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-size: 0.85em;
	}
	.input__field--yoshiko:focus + .input__label--yoshiko,
	&.input--filled .input__label--yoshiko {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	.input__field--yoshiko:focus + .input__label--yoshiko .input__label-content--yoshiko,
	&.input--filled .input__label-content--yoshiko {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
	.input__field--yoshiko:focus,
	&.input--filled .input__field--yoshiko {
		background-color: transparent;
		border-color: #a3d39c;
	}
}


/* Chisato */

.uac-input.input--chisato {
	padding-top: 1em;
	.input__field--chisato {
		width: 100%;
		padding: 0.8em 0.5em;
		background: transparent;
		border: 2px solid;
		color: #b5b5b5;
		-webkit-transition: border-color 0.25s;
		transition: border-color 0.25s;
	}

	.input__label--chisato {
		width: 100%;
		position: absolute;
		top: 0;
		text-align: left;
		overflow: hidden;
		padding: 0;
		pointer-events: none;
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}

	.input__label-content--chisato {
		padding: 0 1em;
		font-weight: 400;
		color: #b5b5b5;
	}

	.input__label-content--chisato::after {
		content: attr(data-content);
		position: absolute;
		top: -200%;
		left: 0;
		color: #da6484;
		font-weight: 800;
	}

	.input__field--chisato:focus,
	&.input--filled .input__field--chisato {
		border-color: #da6484;
	}

	.input__field--chisato:focus + .input__label--chisato,
	&.input--filled .input__label--chisato {
		-webkit-animation: anim-chisato-1 0.25s forwards;
		animation: anim-chisato-1 0.25s forwards;
	}

	.input__field--chisato:focus + .input__label--chisato .input__label-content--chisato,
	&.input--filled .input__label-content--chisato {
		-webkit-animation: anim-chisato-2 0.25s forwards ease-in;
		animation: anim-chisato-2 0.25s forwards ease-in;
	}
}



@-webkit-keyframes anim-chisato-1 {
	0%, 70% {
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	71%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes anim-chisato-2 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	70%, 71% {
		-webkit-transform: translate3d(0, 125%, 0);
		transform: translate3d(0, 125%, 0);
		opacity: 0;
		-webkit-animation-timing-function: ease-out;
	}
	100% {
		color: transparent;
		-webkit-transform: translate3d(0, 200%, 0);
		transform: translate3d(0, 200%, 0);
	}
}

@keyframes anim-chisato-1 {
	0%, 70% {
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	71%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes anim-chisato-2 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	70%, 71% {
		-webkit-transform: translate3d(0, 125%, 0);
		transform: translate3d(0, 125%, 0);
		opacity: 0;
		-webkit-animation-timing-function: ease-out;
	}
	100% {
		color: transparent;
		-webkit-transform: translate3d(0, 200%, 0);
		transform: translate3d(0, 200%, 0);
	}
}

/* Kozakura */
.uac-input.input--kozakura {
	overflow: hidden;
	margin-top: -1em;
	// padding-bottom: 1em;
	.input__field--kozakura {
		padding: 0.25em 0.5em;
		margin-top: 1.25em;
		width: 100%;
		background: transparent;
		color: #2F3238;
		font-size: 1.55em;
		opacity: 0;
	}

	.input__label--kozakura {
		width: 100%;
		text-align: left;
		position: absolute;
		top: 1em;
		pointer-events: none;
		overflow: hidden;
		padding: 0 0.25em;
		-webkit-transform: translate3d(1em, 2.75em, 0);
		transform: translate3d(1em, 2.75em, 0);
		-webkit-transition: -webkit-transform 0.3s;
		transition: transform 0.3s;
	}

	.input__label-content--kozakura {
		color: #A4A5A6;
		padding: 0.4em 0 0.25em;
		-webkit-transition: -webkit-transform 0.3s;
		transition: transform 0.3s;
	}

	.input__label-content--kozakura::after {
		content: attr(data-content);
		position: absolute;
		font-weight: 800;
		top: 100%;
		left: 0;
		height: 100%;
		width: 100%;
		// color: #fff;
		padding: 0.25em 0;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-size: 0.85em;
	}

	.graphic--kozakura {
		fill: #494E57;
		pointer-events: none;
		top: 1em;
		bottom: 0px;
		height: 4.5em;
		z-index: -1;
		-webkit-transition: -webkit-transform 0.7s, fill 0.7s;
		transition: transform 0.7s, fill 0.7s;
		-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
		transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
	} 

	.input__field--kozakura:focus,
	&.input--filled .input__field--kozakura {
		-webkit-transition: opacity 0s 0.35s;
		transition: opacity 0s 0.35s;
		opacity: 1;
	}

	.input__field--kozakura:focus + .input__label--kozakura,
	&.input--filled .input__label--kozakura {
		-webkit-transition-delay: 0.15s;
		transition-delay: 0.15s;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	.input__field--kozakura:focus + .input__label--kozakura .input__label-content--kozakura,
	&.input--filled .input__label-content--kozakura {
		-webkit-transition-delay: 0.15s;
		transition-delay: 0.15s;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	.input__field--kozakura:focus ~ .graphic--kozakura,
	&.input--filled .graphic--kozakura {
		fill: #fff;
		-webkit-transform: translate3d(-66.6%, 0, 0);
		transform: translate3d(-66.6%, 0, 0);
	}
}


/* Ruri */
.uac-input.input--ruri{ 
	.input__field--ruri {
		width: 100%;
		background: transparent;
		padding: 0.5em 0;
		margin-bottom: 2em;
		// color: #fff;
	}
	.input__label--ruri {
		width: 100%;
		position: absolute;
		text-align: left;
		font-size: 1em;
		padding: 10px 0 5px;
		pointer-events: none;
	}

	.input__label--ruri::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 7px;
		background: #B7C3AC;
		left: 0;
		top: 100%;
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
		transition: transform 0.3s, background-color 0.3s;
	}

	.input__label-content--ruri {
		padding: 0;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transition: -webkit-transform 0.3s, color 0.3s;
		transition: transform 0.3s, color 0.3s;
	}

	.input__field--ruri:focus + .input__label--ruri::after,
	&.input--filled .input__label--ruri::after {
		background: #a3d39c;
		-webkit-transform: scale3d(1, 0.25, 1);
		transform: scale3d(1, 0.25, 1);
	}

	.input__field--ruri:focus + .input__label--ruri .input__label-content--ruri,
	&.input--filled .input__label--ruri .input__label-content--ruri {
		color: #a3d39c;
		-webkit-transform: translate3d(0, 2em, 0) scale3d(0.655, 0.655, 1);
		transform: translate3d(0, 2em, 0) scale3d(0.655, 0.655, 1);
	}
}



