.debug {
	display:none; /* use 'none' to turn off debug, 'initial' to turn on */
}

.logininfo  select {
	width: 30%;
}

.logininfo  input[type=password] {
	width: 30%;
}

input[type=checkbox]
{
  vertical-align: middle;
}

input[type=checkbox]
{
  /* Quadruple-sized Checkboxes */
  transform: scale(2); /* Opera */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
}

.emailinfo .captcha {
	margin: 1em 0; 
	text-align: center;
}
.logininfo input[type=text]#captchatext,
.emailinfo input[type=text]#captchatext,
.emailinfo .captcha input[type=text],
.captcha img {
	display: inline;
	vertical-align: middle;
}
.logininfo input[type=text]#captchatext,
.emailinfo input[type=text]#captchatext,
.emailinfo .captcha input[type=text] {
	width: 30%;
}

/* 758px~=47em, 524~=32em, 420~=26em */
/* 20em~=320 px, 40em~=640, 60em~=960, 80em~=1280, 100em~=1600 */
	.debug::before {
		content: "default 100% width";
	}
	.logininfo,
	.emailinfo {
		width: 100%;
		margin: 0 auto;
		line-height: 1.5em;
	}
	.logininfo input[type=text] ,
	.emailinfo input[type=text] {
		width: 90%;
	}
	.logininfo  textarea,
	.emailinfo textarea {
		width: 90%;
	}
	.logininfo input[type=submit],
	.emailinfo input[type=submit] {
		width: 100%;
		
	}	
	.logininfo .submit,
	.emailinfo .submit {
		width: 30%;
		margin: 1em auto;
	}



/* Large screens ----------- */
@media only screen 
and (min-width : 118em) {
	.debug::before {
		content: "Large screens: 40% width, min-width : 118em ";
	}
	.logininfo,
	.emailinfo {
		width: 40%;
	}

}

/* Desktops and laptops ----------- */
@media only screen 
and (max-width : 118em)
and (min-width : 98em) {
	.debug::before {
		content: "Desktops and laptops: 50% width, max-width : 118em, min-width : 98em ";
	}
	.logininfo,
	.emailinfo {
		width: 50%;
	}
}

/* Conventional Desktops and laptops extra large tablets ----------- */
@media screen 
and (max-width : 98em)
and (min-width: 78em) {
	.debug::before {
		content: "Conventional Desktops and laptops extra large tablets: 60% width, max-width : 98em, min-width : 78em";
	}
	.logininfo,
	.emailinfo {
		width: 60%;
	}

}
/* Small Desktops and laptops large tablets ----------- */
@media screen 
and (max-width: 78em) 
and (min-width: 58em) {
	.debug::before {
		content: "Small Desktops and laptops large tablets: 75% width, max-width: 78em, min-width : 58em ";
	}
	.logininfo,
	.emailinfo {
		width: 70%;
	}
}
@media screen 
and (max-width: 58em)
and (min-width: 48em) {
	.debug::before {
		content: "medium tablets: 80% width, max-width: 58em, min-width : 48em ";
	}
	.logininfo,
	.emailinfo {
		width: 80%;
	}
}
@media screen 
and (max-width: 48em)
and (min-width: 38em) {
	.debug::before {
		content: "small tablets: 90% width, max-width: 48em, max-width: 48em, min-width : 38em ";
	}
	.logininfo,
	.emailinfo {
		width: 90%;
	}
}
@media screen 
and (max-width: 38em) 
and (min-width: 30em) {
	.debug::before {
		content: "large phones: 100% width, max-width : 38em, min-width: 30em";
	}
	.emailinfo {
		width: 100%;
	}
	.logininfo .submit,
	.emailinfo .submit {
		width: 50%;
	}

}
@media screen 
and (max-width: 30em) 
and (min-width: 20em) {
	.debug::before {
		content: "medium phones: 100% width, max-width : 30em, min-width: 20em";
	}
	.logininfo,
	.emailinfo {
		width: 100%;
	}
	.logininfo  select {
	width: 40%;
	}

	.logininfo  input[type=password] {
		width: 50%;
	}
	.logininfo .submit,
	.emailinfo .submit {
		width: 60%;
	}


}
@media screen 
and (max-width: 20em)
and (min-width: 12em) 
{
	.debug::before {
		content: "small phones: 100% width, max-width : 20em, min-width: 12em";
	}
	.logininfo,
	.emailinfo {
		width: 100%;
	}
	.logininfo  select {
	width: 60%;
	}

	.logininfo  input[type=password] {
		width: 60%;
	}
	.logininfo .captchatext,
	.emailinfo .captcha {
		text-align: left;
	}
	.logininfo .submit,
	.emailinfo .submit {
		width: 80%;
	}

}

@media screen 
and (max-width: 12em)
and (min-width: 6em) 
{
	.debug::before {
		content: "extra small phones or zoomed in content: 100% width, max-width : 12em, min-width: 6em ";
	}
	/*
	.emailinfo {
		width: 100%;
	}
	*/
	.logininfo .submit,
	.emailinfo .submit {
		width: 90%;
		margin: 1em 0;
	}
	.logininfo  select {
	width: 90%;
	}

	.logininfo  input[type=password] {
		width: 90%;
	}
	.logininfo .captchatext,
	.emailinfo .captcha {
		text-align: left;
	}
	.logininfo input[type=text]#captchatext,
	.emailinfo input[type=text]#captchatext,
	.emailinfo .captcha input[type=text] {
		width: 50%;
	}


}

@media screen 
and (max-width: 6em)
and (min-width: 0) 
{
	.debug::before {
		content: "super zoomed in content: 50% width, max-width : 6em, min-width: 0 ";
	}
	.logininfo .submit,
	.emailinfo .submit {
		width: 100%;
		margin: 1em 0;
	}
	.logininfo  select {
	width: 100%;
	}

	.logininfo  input[type=password] {
		width: 100%;
	}	
	.logininfo .captchatext,
	.emailinfo .captcha {
		text-align: left;
	}
	.logininfo input[type=text]#captchatext,
	.emailinfo input[type=text]#captchatext,
	.emailinfo .captcha input[type=text] {
		width: 50%;
	}

}