.loginwrapper { width: 400px; margin: 40px auto 0 auto;}

.loginwrapper p { margin: 20px 0; }
.loginwrapper p:first-child { margin-top: 0; }
.loginwrapper p:last-child { margin-bottom: 0; }
.logintitle { 
	padding: 15px; text-transform: uppercase; line-height: 21px; border: 1px solid #bbb; font-size: 18px; border-bottom: 0;
	-moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; color: #666;
}
.logintitle span.iconfa-lock { font-size: 24px; margin-top: 0px; float: left; margin-right: 10px; }
.logintitle span.subtitle { font-size: 12px; font-weight: normal; display: block; margin-left: 32px; text-transform: none; color: #999; }
.loginwrapperinner { 
	padding: 20px; background: #444; 
	-moz-border-radius: 0 0 2px 2px; -webkit-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px;
}

.loginwrapper input { 
	width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	padding: 10px; min-height: 44px; font-size: 14px !important; border: 0; color: #999;
	background: #eee; padding-left: 30px; 
}

.loginwrapper input#username.error,
.loginwrapper input#password.error { background-color: #ffeaea; color: #ff0000; }
.loginwrapper input:focus { 
	background-color: #fff;
	color: #666 !important; 
	box-shadow: 0 0 8px rgba(0,0,0,0.8) !important;
}
.loginwrapper button.btn { 
	padding: 12px 5px; border: 0; text-transform: uppercase; font-size: 13px; text-shadow: 1px 1px rgba(0,0,0,0.2);
	box-shadow: 0 2px 3px rgba(0,0,0,0.3); cursor:pointer; width:180px; margin:0px auto; 
}
.loginwrapper a { color: #999; }
.loginwrapper input, .loginwrapper a { 
	-moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; 
	
}

.loginwrapper button.btn { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;}

.modalLogin{
  	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 999998;
	background-color:rgba(0,0,0,0.5);
}
.logintitle { 
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); 
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); 
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
 .logintitle {
	background: rgb(237,237,237);
	background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(222,222,222,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,237,237,1)), color-stop(100%,rgba(222,222,222,1)));
	background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
	background: -o-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
	background: -ms-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
	background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 );
}

/* Add your Custom CSS here, do not forget to activate this file in the Backend Options of the Template */

.closebox{
	position: absolute; z-index: 999999; margin-left: -20px; margin-top: 10px;  border: 0px solid white; cursor: pointer;
}	

/* -------------------------------------------------------------------------------- /
	[11] MEDIA QUERIES

	@media (max-width: 1200px) { 
		.closebox{
			position: absolute; z-index: 999999; margin-left: -20px; margin-top: 10px;  border: 2px solid yellow;
		}
	}
	@media (max-width: 1000px) { 
		.closebox{
			position: absolute; z-index: 999999; margin-left: -20px; margin-top: 10px;  border: 2px solid pink;
		}
	}
	@media (max-width:979px) {
		.closebox{
			position: absolute; z-index: 999999; margin-left: -20px; margin-top: 10px; border: 2px solid red;
		}		
	}
	
	@media (max-width:767px) { 
		.closebox{
			position: absolute; z-index: 999999; margin-left: -20px; margin-top: 10px; border: 2px solid green;
		}		
	}/ -------------------------------------------------------------------------------- */