@import url(https://fonts.googleapis.com/css?family=Fredericka+the+Great);
@import url(https://fonts.googleapis.com/css?family=Architects+Daughter);

/*DEFAULT STYLES*/
@media all {
	*{
		/*transition: all 0.15s ease-in-out;*/
	}
	html, body {
		width: 100%;
		height: 100%;
		-webkit-font-smoothing: antialiased;
	}
	body {
		font: 0.875em/1.4 Arial, Helvetica, sans-serif; /*0.875em = 14px out of 16px which is browser default font size*/
	}
	.main-wrapper {
		position: relative;
	}
	h1 {
		font-size: 2.2857em;/*32px / 14*/
		line-height: 1.2;
		margin: 0 0 32px;
	}
	h2{
		font-size: 1.8571em; /*26px / 14*/
		margin: 0 0 16px;
	}
	p {
		margin-top: 0;
	}
	.error {
		color: #FF0000;
	}
	.clearfix {
	  *zoom: 1;
	}
	.clearfix:before,
	.clearfix:after {
	  display: table;
	  content: "";
	  line-height: 0;
	}
	.clearfix:after {
	  clear: both;
	}
	label {
		font-size: 1.1em;
		display: inline-block;
		margin-bottom: 5px;
	}
	textarea, input[type="text"], input[type='password'] {   
		padding: 7px 10px;
	    /*border: none;*/
	    /*outline: none;*/
	} 
	textarea:focus, input[type="text"]:focus, input[type='password']:focus {   
	    /*border-color: green;*/
	    /*box-shadow: 0 0 3px green;*/
	    outline: 1px solid green;
	}  
 	input[type='submit'] {
		
	} 
	input[type='submit']:focus {
		border-color: none;
	} 
	
	/*LOGIN FORM*/
	.login-form {
		font-family: 'Architects Daughter', cursive;
		color: #7a8114;
		
	}
	.login-form p {
		margin: 15px 0;
		font-size: 1.2em;
	}
	.login-form input[type='text'],
	.login-form input[type='password']
	{
		width: 100%;
		font-family: 'Arial', Helvetica, sans-serif;
	}
	
	.login-form input[type='submit'] {
		font-size: 1.4em;
		padding: 4px 10px;
		width: 100%;
		margin-top: 7px;
	}
	
	.logout-heading {
		font-family: 'Architects Daughter', cursive;
		color: #7a8114;
		margin: 15px;
	}
	.logout {
		padding: 15px;
		font-size: 1.2em;
	}
	.logout p {
		font-family: 'Architects Daughter', cursive;
		
	}
	
}


/* MOBILE STYLES */
@media screen and (max-width: 480px) {
	.main-wrapper {
		background: #f3f6f8;
	}
	
	/*LOGIN FORM*/
	.login-form {
		width: 100%;
		padding: 15px 3px;	
	}
	/* END LOGIN FORM */
}

/* TABLET PORTRAIT */
@media screen and (min-width: 481px) and (max-width: 767px) {
	.main-wrapper {
		width: 100%; 
		background: #f3f6f8;
	}
	.login-form {
		margin: 0 auto;
		max-width: 479px;
		padding: 15px;
	}
}

/* TABLET LANDSCAPE */
@media screen and (min-width: 768px) and (max-width: 991px) {
	.main-wrapper {
	    background: #f3f6f8;
	    width: 100%;
	}
	.login-form {
		margin: 0 auto;
		width: 36.15625%;
		padding: 15px;
	}

}

/* LAPTOP & DESKTOP */
@media screen and (min-width: 992px) {
	/* Styles */
	.main-wrapper {
	    margin: 0 auto;
	    background: #f3f6f8;
	    max-width: 1024px;
	}
	.login-form {
		margin: 0 auto;
		width: 36.15625%;
		padding: 15px;
	}
	
}