*
{
	margin:0;
	padding:0;
	box-sizing: border-box;
}

body
{
	float-size:14px;
	background: #FF00FF;
}

.container
{
	background: white;
	width: 500px;
	height:600px;
	padding: 25px;
	margin: 50px auto 0;
	border-top: 7px solid blue;
	box-shadow: 0 0 7px 5px green(0,0, 0, 5px);
	

}
.container h2
{
	font:size: 24px;
	color:blue;
	line-height: 24px;
	padding:15px;
	text-align:center;
	border-bottom:3px solid maroon;
}

.container h5
{
	font:size: 18px;
	color:maroon;
	line-height: 24px;
	padding:5px;
	text-align: center;
}
.input-name
{
	width: 90%;
	position: relative;
	margin: 20px auto;
}

.lock
{
	padding: 8px 11px;

}
.name
{
	width: 100%;
	padding: 8px 0 8px 40px; 
}

.input-name span
{
	margin-left: 35px;
}

.text-name
{
	width: 100%;
	padding: 9px 0px 9px 40px;
}

.input-name i
{
	position:absolute;
	font-size: 18px;
	color: blue;
	border: 1px solid #cccccc;
	margin-left:2px;
	border-radius:5px;
	
}

.email
{
	padding: 8px;
}

.text-name,.name
{
	border: 1px solid #cccccc;
	border-radius:5px;
	outline: none;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	transition: all 0.30s ease-in-out;
}

.text-name:hover, .name:hover
{
	background-color:#fafafa;
}

.text-name:focus, .name:hover
{
	border: 1px solid maroon;
}

.radio-button
{
margin-right: 4px
}

.country
{
	display: inline-block;
	width:100%;
	height: 35px;
	padding:0px 15px;
	cursor: pointer;
	border:1px solid #cccccc;
	border-radius:5px;
	color:#7b7b7b;
	border-right: o;
	background:white;
	appearance: non;
	-wekit-appearance: non;
	-moz-appearance:none;
	transition: all 0.2s ease;	
}

.counrty::ms-expand
{
	display: non;
}

.country:hover, .country:focus
{
	color: black;
	background:#fafafa;
	border-color: maroon;
	outline: none;	
}

.arrow
{
	position: absolute;
	top: cal(50% -4px);
	right: 7px;
	width: 0;
	height: 0;
	pointer-events: none;
	border-width: 0 0 0 0;
	border-style: solid;
	border-color: #7b7b7b transparent transparent transparent;
}

.country:hover + .arrow, .country:focus +arrow
{
	border-top-color: blue;		
}

.check
{
	margin-right: 7px;
	position: relative;
}

 .check::before
{
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	vertical-align: -2px;
	border: 2px solid #cccccc;
	padding:2.5px;
	background-color:transparent;
	background-clip: content-box;
	transition: all 0.2s ease;	
}

 .check::after
 {
 	border-right: 2px solid blue;
	border-top: 2px solid blue;
	content: "";
	height: 20px;
	left: 2ps;
	position: absolute;
	top: 1px;
	transform: scaleX(-1) rotate(135deg);
	transform-orgin: left top;
	width: 10px;
	display: none;	
 }
 
 .check-button
 {
 	border:0;
	clip:(0 0 0 0 );
	height:2px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:2px;	
 }
 .check-button:hover +.check::before
 {
 	border-color: black;
	
 }
 .check-button:checked +.check::befor
 {
 	border-color:black;
 }
 .check-button:checked +.check::after
 {
 	-moz-animation: check 0.4s ease 0s running;
	-webkit-animation: check 0.4s ease 0s running;
	animation: check 0.8s ease 0s running;
	display: block;
	width:10px;
	height:20px;
	border-color: green;	
 }
 
  @-webkit-keyframes ckeck
  {
  	0%{ height: 0; width: 0;}
	25%{ height: 0; width: 10px;}
	50%{ height: 0; width: 10px;} 
  }
  
  .button
  {
  	background-color: blue;
	color:white;
	height:35px;
	line-height:35ps;
	width:100%;
	border: none;
	outline: none;
	font-size:18px;
	cursor:pointer;
	margin-bottom:10px;
  }
 
 .button:hover
 {
 background: green;	
 } 
 
 
 @media (max-width: 480px)
{
. container
{
	width:100%;
}
.input-name
{
	margin-bottom: -10px;	
}

.name
{
	width: 100%;
	padding: 8px 0 8px 40px;
	margin-bottom:10px;	
}
.input-name span
{
	padding:0;
	margin:0;
}
.form-container
{
	border:2px solid;
	width:100%;
}
}