.registerform input
		{
			width:100%;
            padding:6px;
			height: 35px;
			border-radius:3px;
      		border:1px solid #CCC;
      		display: block;
    	}

        .registerform sex 
        {
            width:10%;display:inline-block;
        }

        .registerform h3
		{
			font-weight: bolder;
			color: #DE8F5C;
            text-align: center;
    	}
@media screen and  (min-width:769px){
    .registerform
    {
        margin:20px auto;
	    width:48%;
	    height: 100%;
    }
    fieldset{
        /*width: 70%;*/
        padding: 5px 50px;
        height: 500px;
        margin-bottom: 10px;
        background: #EEE;
        border-radius: 3px;
        color: #808080;
        box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.5);
    }

}
.registerform input[type=radio]
		{
			width: 18px; 
      		display: inline-block;
            vertical-align:middle; 
    	}
.registerform input[type=checkbox]
		{
			width: 16px; 
      		display: inline-block;
            vertical-align:middle; 
    	}
 .registerform li
		{
			width:200px;
			list-style:none;
			font-size:18px;
    	}
 .registerform ul
		{
		
			margin-left: 5%;

		}


 .registerform button {
        padding: 10px 30px;
        border-radius: 14px;
	    border: 0px;
	 	color: white;
	    font-family: NotoSansHant-Regular;
	    font-size:20px; 
	    box-shadow: 0px 0px 6px 1px rgba(255, 165, 165, 0.53);
	    -webkit-transition: -webkit-transform 800ms;
	    transition: transform 800ms;
	    position: relative;
	    z-index: 10;
	}


@media (max-width: 463px){

        .registerform
    {
        margin:20px auto;
	    width:305px;
	    height: 100%;
    }
            fieldset{
        /*width: 70%;*/
        padding: 5px 14px;
        height: 500px;
        margin-bottom: 10px;
        background: #EEE;
        border-radius: 8px;
        color: #808080;
        box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.5);
    }

}

@media screen and (min-width:464px) and (max-width:768px) {
        .registerform
    {
        margin:20px auto;
	    width:70%;
	    height: 100%;
    }
            fieldset{
        /*width: 70%;*/
        padding: 5px 14px;
        height: 500px;
        margin-bottom: 10px;
        background: #EEE;
        border-radius: 8px;
        color: #808080;
        box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.5);
    }
}



.hvr-fade {
    width:190px;
    cursor:pointer;
    /*height:50px;*/
    color: white;
    background-color: #22ac38;
    border-radius: 5px;
    padding: 5px;
    font-size: 24px;
    display: inline-block;
    vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0px 0px 6px 1px rgba(165, 165, 255, 0.53);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color: green;
  color: white;
     box-shadow: 0px 0px 6px 1px rgba(120, 200, 120, 0.53);
}