@import url(https://fonts.googleapis.com/css?family=Cabin|Pacifico|Raleway);
body{
	font-family: 'Raleway' , sans-serif;
	background:url('../img/main.jpeg') 50% 50% no-repeat;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
	font-family: 'Cabin', sans-serif;
}

.login{
	height:100vh;
	width:100%;
	background:rgba(51,51,51,0.5);
	position:relative;
}
.wrapper{
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	text-align: center;
	color:#fff;
}
.logo{
	margin-bottom: 0.5em;
}
.logo .logo-icon, .logo h1{
	display:inline-block;
	vertical-align: middle;
	margin:0 0px;
}
.logo-icon{
	width:2.3em;
	height:2.3em;
	background:url('../img/quill.svg') 50% no-repeat;
	background-size: cover;
}
.logo h1, .wrapper h6{
	font-family: 'Pacifico', sans-serif;
}

.form-trigger{
	margin: -1em 0 2em;
}
.form-trigger button{
	text-decoration: underline;
	padding:5px;
	background:transparent;
}
form{
	width:80vw;
	max-width: 500px;
	margin:0 auto 0;
	padding:0;
	font-family: 'Cabin', sans-serif;
	display:none;
}
form.active{
	display:block;
}
.social-buttons{
	margin:0 auto;
	width: 100%;
	text-align: center;
}
.social-login{
	margin:10px 30px;
	padding:8.5px 10px;
	width:6em;
	display:inline-block;
	border-radius: 1px;
}
.facebook{
	background: #325a97;
	vertical-align: middle;
}
.google{
	vertical-align: middle;
	margin: 0;
	padding: 0;
}
.twitter{
	background: #00aced;
}
.social-login span{
	margin-right:10px;
}
.input{
	width:15em;
	height:2em;
	display:block;
	margin:1.5em auto;
	position:relative;
	border:1px solid #fff;
	padding:3px 0 0;
	-webkit-transition:background 0.5s;
	-moz-transition:background 0.5s;
	-ms-transition:background 0.5s;
	transition:background 0.5s;
}
.input:hover, .input:focus{
	background:#fff;
	color:#333;
}
.input span, input{
	display:inline-block;
	vertical-align: middle;
	margin:0 5px;
}
.input input{
	width:12em;
	background:transparent;
}
.small{
	margin-top:2em;
}









































/* XSD Smartphones (THIS IS DEFAULT, SHOULDN'T USE)  *768px* */
@media screen and (max-width: 700px){}

/* SD Portrait-specific tablets *(min-width: 700px) and (max-width: 768px) and (orientation: portrait) * */
@media screen and (min-width: 700px){
	body{
		font-size:120% !important;
	}
	.social-login{
		margin:1em 5px;
		padding:5px 10px;
		width:7em;
		display:inline-block;
	}
	

	
}

/* Landscape-specific tablets *(min-width:768px) and (max-width: 1024px) and (orientation: landscape)* */
@media screen and (min-width:769px){
	body{
		
	}
	
}
/* MD Medium laptops */
@media screen and (min-width: 1025px){
	body{
		font-size:120% !important;
	}
	
	
}
/* LD Large laptops */
@media screen and (min-width: 1281px){
	body{
		font-size:150%;
	}

}
/* XLD Extra-large laptops */
@media screen and (min-width: 1921px){
	body{
		
	}

}

/* 4K, THAT'S RIGHT BABY! */
@media screen and (min-width: 3840px){
	body{
		
	}
	
}
/* 5K, WHAT THE HECK?! */
@media screen and (min-width: 5120px){
	body{
		
	}
}

/* CSS for Printing */
@media print{
	
}