.wrap{width:300px;}
.inputing {
	margin-top: 10px;
	float: left;

}
.inputing_url {
	margin-top: 10px;
	float: left;
	width: 320px;
}
.radio:not(checked) {

	position: absolute;
	opacity: 0;

}
.rad_io{
	width: 180px;
	max-width: 180px;

}
@media screen and (max-width:479px) {
	.rad_io{
		width: 320px;
		max-width: 320px;
		margin-left: 12px;
		margin-bottom: 12px;
	}
}
.flex {
	display: -ms-flexbox;

	display: flex;
}
.radio:not(checked) + label {

	position: relative;
	padding: 0 0 0 20px;

}
.radio + label {

	cursor: pointer;

}
label {

	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: 400;

}
.radio:not(checked) + label::before {

	content: '';
	position: absolute;
	top: 4px;
	left: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #CDD1DA;
	border-radius: 50%;
	background: #FFF;

}
.radio:checked + label::after {

	opacity: 1;

}
.radio:not(checked) + label::after {

	content: '';
	position: absolute;
	top: 7px;
	left: 3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #87cc6b;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
	opacity: 0;
	transition: all .2s;

}

input::placeholder{
	color: #acafb1;
}
input{
	display:block;
	width: 180px;
	padding: 11px 0 11px 12px;
	font-family: "Arvo";
	font-weight: 400;
	color: #111;

	background: #fff;

	outline: none;

	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 4px;
	box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px  1px rgba(255,255,255,0.2);
	text-indent: 20px;
	transition: all .3s ease-in-out;
	position: relative;
	font-size: 16px;
}
@media screen and (max-width:479px) {
	input{
		display:block;
		width: 320px;
		padding: 11px 0 11px 12px;
		font-family: "Arvo";
		font-weight: 400;
		color: #111;

		background: #fff;
		border: none;
		outline: none;
		color: #fff;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
		border: 1px solid rgba(0,0,0,0.3);
		border-radius: 4px;
		box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px  1px rgba(255,255,255,0.2);
		text-indent: 20px;
		transition: all .3s ease-in-out;
		position: relative;
		font-size: 16px;
	}

}
input:focus{
	text-indent: 16px;
	box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2);

}

label{
	display: block;
	position: static;
	margin: 0;
	padding: 0;
	color:#fff;
	font-family: 'Arvo';
	font-size: 16px;
}

.wrap-label{
	width: 300px;
	height: 34px;
	position: relative;
	padding: 0;
	margin: 0;
	bottom: -15px;
	overflow: hidden;}

.iconicfill-pen-alt2{
	position: absolute;
	left: 10px;
	color: #fff;
	font-size:19px;
	opacity: 1;
	top: 0;
	transform:translateX(-100px);
}

/* ==== Pen animation ==== */
.move-pen{animation: move-pen 1s ease-in infinite alternate;}
@keyframes move-pen{
	from{transform:translateX(-4px) rotate(6deg);}
	to{transform:translateX(4px) rotate(-3deg);}
}

@media screen and (max-width:479px) {
.padding {
	padding-top: 50px;

}
}

@media screen and (max-width:479px) {
	.butop {
	margin-top: 10px;
}
}