/****** LOGIN CONTENT ******/

#page-content { 
	width: 100%; 
	height: auto; 
	margin: 0;
	padding-top: 160px; }

.page-content { 
	width: 980px;
	height: auto; 
	margin: 0 auto; }

#login { 
	width: 100%;
	height: auto;
	display: inline-block; }

.login { 
	width: 404px;
	height: auto;
	margin: 0 auto; }

.user-id,
.user-passowrd,
.user-pin { 
	float: left;
	width: 100%; }

.user-name,
.user-password,
.user-pinid {
	float: left;
	margin-right: 20px;
	padding: 10px 0px;
	width: 88px; } 

.user-name p,
.user-password p,
.user-pinid p { 
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	line-height: 12px;
	margin: 0;
	text-transform: uppercase;
	font-weight: 600; }

.un-field,
.up-field,
.pin-field {
	float: left; }

.un-field p, 
.up-field p, 
.pin-field p {
	margin: 0 0 20px; }

input {
	border: 1.5px solid #202020;
	padding: 6px 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	line-height: 12px; 
	color: #202020; 
	width: 100%; } 

.pin-field input {
	width: 140px; } 

.submit-button {
	width: fit-content;
	height: auto; 
	margin: 0;
	float: right; }

.submit {
	width: fit-content;
	height: auto; 
	margin: 0 auto; }

.submit-button button {
	background: #202020;
	color: #eee;
	text-transform: uppercase;
	padding: 9px 20px; 
	min-width: 102px;
	font-weight: 600;
	letter-spacing: 1px;
	transition: all 0.2s ease-in-out;
	cursor: pointer; 
	border: none; }

.submit-button button:hover {
	background: #ff5400; }

#blocked {
	width: 100%; 
	height: auto;
	margin: 20px auto 0; }

#blocked p { 
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-size: 12.5px; 
	line-height: 14px;
	font-weight: 500; 
	color: #d80000;
	width: 320px;
	margin: 0 auto; }

.submit-mobile {
	display: none; }
	
	@media screen and (min-width: 300px) and (max-width: 1079px) { 
		
		#page-content { 
			width: 100%; 
			height: auto;
			display: inline-block;
			padding: 154px 0 100px; }
		
		.page-content {
			width: 320px; } 
		
		#login { 
			height: auto;
			margin-top: 0; }
		
		.login { 
			width: 100%; }
		
		.un-field p,
		.up-field p,
		.pin-field p {
			width: 208px; }
		
		.submit-button { 
			display: none; } 
		
		.submit-mobile {
			margin-top: 20px;
			display: inline-block;
			width: 100%; }
		
		.submit {
			width: fit-content;
			margin: 0 auto; }
		
		.submit-mobile button { 
			background: #202020; 
			color: #eee;
			text-transform: uppercase;
			padding: 9px 20px; 
			min-width: 102px; 
			font-weight: 600; 
			letter-spacing: 1px;
			transition: all 0.2s ease-in-out;
			cursor: pointer;
			border: none; }
		
		.submit-mobile button:hover { 
			background: #ff5400; } 

        }
	
	@media screen and (min-width: 300px) and (max-width: 350px) {
		
		.page-content { 
			width: 276px; }
		
		.un-field p,
		.up-field p, 
		.pin-field p {
			width: 168px; }
		
		#blocked p { 
			width: 230px; }

        }
	
	@media screen and (min-width: 350px) and (max-width: 400px) { 
		
		#page-content {
			padding: 170px 0 100px; } 
		
		.page-content {
			width: 310px; }
		
		.un-field p,
		.up-field p,
		.pin-field p {
			width: 200px; }

        }
	
	@media screen and (min-width: 400px) and (max-width: 500px) {
		
		#page-content {
			padding: 176px 0 100px; }
		
		.page-content {
			width: 354px; }
		
		.user-name,
		.user-password,
		.user-pinid {
			float: left;
			margin-right: 20px;
			padding: 11px 0px; 
			width: 98px; } 
		
		.user-name p, 
		.user-password p, 
		.user-pinid p { 
			font-size: 16px;
			width: 230px; } 
		
		.un-field p,
		.up-field p,
		.pin-field p { 
			width: 230px; }
		
		#blocked p { 
			width: 220px; }
		
		#blocked p { 
			line-height: 14px; 
			width: 260px; 
			font-size: 14px;
			margin-top: 4px; } 

        }
	
	@media screen and (min-width: 500px) and (max-width: 600px) {
		
		#page-content {
			padding: 206px 0 100px; } 
		
		.page-content {
			width: 464px; } 
		
		.login {
			width: 422px; }
		
		.user-name,
		.user-password,
		.user-pinid { 
			float: left; 
			margin-right: 20px;
			padding: 14px 0px; 
			width: 122px; } 
		
		.user-name p, 
		.user-password p,
		.user-pinid p { 
			font-size: 20px; }
		
		.un-field p,
		.up-field p,
		.pin-field p { 
			width: 278px; }
		
		input {
			padding: 8px 12px;
			font-size: 14px; } 
		
		#blocked p { 
			width: 220px; }
		
		.submit-mobile button { 
			padding: 13px 28px;
			min-width: 110px; 
			font-size: 16px; }
		
		#blocked p {
			line-height: 16px;
			width: 300px;
			font-size: 16px;
			margin-top: 6px; }

        }	
	
	@media screen and (min-width: 600px) and (max-width: 700px) {
		
		#page-content {
			padding: 260px 0 120px; }
		
		.page-content {
			width: 516px; }
		
		.login { 
			width: 434px; }
		
		.user-name,
		.user-password,
		.user-pinid { 
			float: left;
			margin-right: 20px; 
			padding: 25px 0px; 
			width: 134px; } 
		
		.user-name p, 
		.user-password p, 
		.user-pinid p { 
			font-size: 22px; }
		
		.un-field p,
		.up-field p,
		.pin-field p {
			width: 278px;
			margin: 0 0 26px; } 
		
		input { 
			padding: 14px 24px;
			font-size: 20px; } 
		
		#blocked p {
			width: 220px; }
		
		.submit-mobile button {
			padding: 18px 30px; 
			min-width: 110px; 
			font-size: 20px; }
		
		#blocked p { 
			line-height: 20px;
			width: 380px; 
			font-size: 20px; 
			margin-top: 10px; }
 
        }
	
	@media screen and (min-width: 700px) and (max-width: 800px) { 
		
		#page-content { 
			padding: 300px 0 160px; }
		
		.page-content { 
			width: 612px; }
		
		.login { 
			width: 542px; }
		
		.user-name,
		.user-password,
		.user-pinid { 
			float: left;
			margin-right: 20px;
			padding: 34px 0px;
			width: 160px; } 
		
		.user-name p,
		.user-password p,
		.user-pinid p {
			font-size: 26px; } 
		
		.un-field p, 
		.up-field p, 
		.pin-field p {
			width: 360px; }
		
		.un-field p,
		.up-field p,
		.pin-field p {
			margin: 0 0 30px; }
		
		input { 
			padding: 20px 26px;
			font-size: 24px; }
		
		#blocked p { 
			width: 220px; }
		
		.submit-mobile button { 
			padding: 22px 38px;
			min-width: 110px;
			font-size: 24px; }
		
		#blocked p { 
			line-height: 25px;
			width: 542px; 
			font-size: 22px;
			margin-top: 12px; }

        }
	
	@media screen and (min-width: 800px) and (max-width: 1100px) {
		
		#page-content {
			padding: 300px 0 160px; }
		
		.page-content { 
			width: 612px; }
		
		.login { 
			width: 542px; }
		
		.user-name,
		.user-password,
		.user-pinid { 
			float: left;
			margin-right: 20px;
			padding: 34px 0px;
			width: 160px; }
		
		.user-name p,
		.user-password p, 
		.user-pinid p { 
			font-size: 26px; }
		
		.un-field p,
		.up-field p, 
		.pin-field p { 
			width: 360px; }
		
		.un-field p, 
		.up-field p, 
		.pin-field p {
			margin: 0 0 30px; }
		
		input { 
			padding: 20px 26px;
			font-size: 24px; }
		
		#blocked p { 
			width: 220px; }
		
		.submit-mobile button { 
			padding: 22px 38px;
			min-width: 110px;
			font-size: 24px; }
		
		#blocked p { 
			line-height: 25px;
			width: 542px;
			font-size: 22px;
			margin-top: 12px; } 

        }