html
	{
	height: 100%;
	}

 body
	{
	margin: 0;
	padding: 0;
	background-color: #28aafa;
	font-family: 'Segoe UI Light';
	font-size: 14px;
	height: 100%;
	}

 #wrapper
	{
	position: relative;
	margin: 0 auto;
	top: 50%;
	margin-top: -300px;
	width: 315px;
	text-align: center;
	*border: 1px solid red;
	}

@media (max-height: 630px) 
 {
 #wrapper
	{
	top: 0px;
	margin-top: 30px;
	}
 }

/*----------------- LANGUAGES -----------------------------------------------------------------------------------------------------------------------------*/

 #languages
	{
	margin: 35px 0;
	text-align: center;
	}

 .lang
	{
	display: inline-block;
	width: 65px;
	line-height: 48px;
	font-size: 16px;
	color: #ffffff;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	}
 .lang.active
	{
	border: 1px solid #a9ddfd;
	}


/*----------------- ERROR -------------------------------------------------------------------------------------------------------------------*/

 .error
	{
	margin-bottom: 10px;
	padding: 5px 10px;
	background-color: #53bbfb;
	padding-left: 33px;
	background-image: url('images/error.png');
	background-position: 7px center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	color: #ffffff;
	text-align: left;

	-webkit-animation: ERROR-ANIM 1.5s 1;
  	-moz-animation:    ERROR-ANIM 1.5s 1;
  	-o-animation:      ERROR-ANIM 1.5s 1;
  	animation:         ERROR-ANIM 1.5s 1;
	}

 @-webkit-keyframes ERROR-ANIM
	{
  	0%   { background-color: #ff4040; }
  	100% { background-color: #53bbfb; }
	}
 @-moz-keyframes ERROR-ANIM
	{
  	0%   { background-color: #ff4040; }
  	100% { background-color: #53bbfb; }
	}
 @-o-keyframes ERROR-ANIM
	{
  	0%   { background-color: #ff4040; }
  	100% { background-color: #53bbfb; }
	}
 @keyframes ERROR-ANIM
	{
  	0%   { background-color: #ff4040; }
  	100% { background-color: #53bbfb; }
	}

/*----------------- LOGIN FORM -------------------------------------------------------------------------------------------------------------------*/

 #login-form > div
	{
	margin: 20px 0;
	text-align: left;
	}

 #login-form label
	{
	font-size: 16px;
	color: #ffffff;
	}

 #login-form .field
	{
	width: 100%;
	box-sizing: border-box;
	padding: 18px 25px;
	background-color: #7eccfc;
	border: 1px solid #d8effe;
	font-family: inherit;
	font-size: 16px;
	color: #ffffff;
	outline: none;
	}
 #login-form .field:focus
	{
	background-color: RGBA(255,255,255,0.2);
	border: 1px solid #92e8f5;
	}

 ::-webkit-input-placeholder {color: #ffffff;}
 ::-moz-placeholder {color: #ffffff;}  

 #log-in
	{
	float: right;
	display: inline-block;
	padding: 9px 15px;
	border: none;
	background-color: #7eccfc;
	font-size: 14px;
	color: #ffffff;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;

	-webkit-transition: background 0.3s ease-in;
	-moz-transition: background 0.3s ease-in;
	-o-transition: background 0.3s ease-in;
	transition: background 0.3s ease-in;
	}
 #log-in:hover
	{
	background-color: RGBA(255,255,255,0.23);
	}


/*----------------- CHECKBOX -------------------------------------------------------------------------------------------------------------------*/

 input[type=checkbox]
	{  
  	opacity: 0;  
	}

 input[type=checkbox] + label:before
	{
	content: '';
	position: relative;
	z-index: 10;
  	display: inline-block;
	margin: 0 8px -5px -23px;
	width: 17px;
	height: 17px;
	line-height: 17px;
	border: 1px solid #d8effe;
	cursor: pointer;
	}

 input[type=checkbox]:checked + label:before
	{ 
	background: url('images/check.png') center center no-repeat;
	background-size: 14px auto;
	background-color: #7eccfc;
	}