/* 
	Author : Julien Escalas
*/

body,
a{font-family: 'El Messiri', sans-serif; color: #e1d3af;}
a{transition: color 0.2s ease-in-out;}
a:hover{color: #a97936;}
*{box-sizing: border-box;}

/* PAGE LOGIN */

body#loginpage{width: 100%; height: 100vh; background: url(../images/texture.png) repeat center center #1e0c02; max-width: 620px; min-width: 620px; margin: 0 auto;}
body#loginpage:before{content: ""; width: 100px; height: 100px; position: fixed; top: 0; left: 0; background: url(../images/corner.png) repeat center center transparent;}
body#loginpage:after{content: ""; width: 100px; height: 100px; position: fixed; top: 0; right: 0; background: url(../images/corner.png) repeat center center transparent; transform: rotate(90deg)}

#loginpage .loginpage {padding: 60px 40px; width: 600px; height: 600px; background: url(../images/Square.png) no-repeat center center transparent; margin: 0 auto; top: 50%; margin-top: -300px; position: relative;}
#loginpage .loginpage:before{content: ""; width: 100px; height: 100px; position: fixed; bottom: 0; left: 0; background: url(../images/corner.png) repeat center center transparent; transform: rotate(-90deg)}
#loginpage .loginpage:after{content: ""; width: 100px; height: 100px; position: fixed; bottom: 0; right: 0; background: url(../images/corner.png) repeat center center transparent; transform: rotate(180deg)}

#loginpage .loginform{margin: 30px auto 0; width: 94%;}
#loginpage .loginform p{font-size: 18px; line-height: 24px; margin-bottom: 10px; width: 100%; text-align: center; border-radius: 4px; border: 1px solid #e1d3af; padding: 8px; background-color: rgba(0,0,0,0.25)}

#loginpage .loginform form{display: block; width: 100%;}
#loginpage .loginform label{font-size: 16px; color: #c7954e; display: block; text-align: center; margin: 25px 0 8px; -webkit-appearance: none;}
#loginpage .loginform input[type=password]{display: block; width: 100%; border-radius: 4px; margin: 5px 0; padding: 6px; font-size: 18px; border: 1px solid #a97936; text-align: center; -webkit-appearance: none;}
#loginpage .loginform input[type=submit]{background-color: #c7954e; color: #FFFFFF; font-size: 13px; padding: 12px 20px 13px; border-radius: 4px; border: 1px solid #a97936; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; line-height: 10px; display: block; margin: 15px auto 0; cursor: pointer; transition: color 0.2s ease-in-out; -webkit-appearance: none;}
#loginpage .loginform input[type=submit]:hover{background-color: #a97936;}
#loginpage .loginform input[type=submit][disabled]{background-color: #5bcf53; border: 1px solid #42ad3b;}

#loginpage header{text-align: center;}
#loginpage header h1{font-size: 26px; text-transform: uppercase; letter-spacing: 1px; line-height: 30px; margin-bottom: 10px;}
#loginpage header h2{border-top: 1px dashed #e1d3af; margin-top: 0; padding: 15px 20px 0; display: inline-block; text-transform: uppercase; letter-spacing: 1px;}

#loginpage footer{margin: 25px auto 0; width: 90%; font-size: 15px; line-height: 20px; text-align: center; border-radius: 4px; padding: 12px 8px 13px; background-color: rgba(0,0,0,0.25)}

.error{display: block; text-align:center; color: red; margin-top: 6px}

.footer{position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 11px; font-style: italic; left: 0;}

/****************/
/*MEDIA QUERIES*/
/**************/

@media screen and ( max-width: 650px ) {

	#loginpage .loginpage {top: 0; margin-top: 0; position: relative;}
	body#loginpage:before,
	body#loginpage:after,
	#loginpage .loginpage:before,
	#loginpage .loginpage:after{content: none;}

	body#loginpage{position: relative; width: 100%; height: auto; background: url(../images/texture.png) repeat center center #1e0c02; max-width: 600px; min-width: 100%; margin: 0 auto;}
	#loginpage .loginpage {padding: 30px 20px; width: 100%; max-width: 600px; height: auto; background: none; margin: 0 auto; top: 0; margin-top: 0; position: relative;}

	.footer{position: relative; bottom: 0; width: 100%; text-align: center; font-size: 11px; font-style: italic;}

}

@media screen and ( max-height: 650px ) {
	body#loginpage:before,
	body#loginpage:after,
	#loginpage .loginpage:before,
	#loginpage .loginpage:after{content: none;}

	body#loginpage{position: relative; width: 100%; height: auto; background: url(../images/texture.png) repeat center center #1e0c02; max-width: 600px; min-width: 100%; margin: 0 auto;}
	#loginpage .loginpage {padding: 30px 20px; width: 100%; max-width: 600px; height: auto; background: none; margin: 0 auto; top: 0; margin-top: 0; position: relative;}


}