/* --------------------------------- */
/* ----------- GENERICS ------------ */
/* --------------------------------- */
* {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

html, body {
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    height: 100%;
    max-height: 100%;
    background: #FAFAFA;
}

a{
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: underline;
}

@font-face {
    font-family: 'Authentic Sans';
    src: url('fonts/AUTHENTICSans-90.otf');
    font-weight: normal;
    font-style: normal;
}


/* ---- cool fades on the homepage ---- */
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
	from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    from {
    	opacity: 0;
    }
    to {
        opacity: 1;
    }
}



/* --------------------------------- */
/* ---------- FRONT PAGE ----------- */
/* --------------------------------- */
.home {
	height: 100%;
	min-height: 100%;
	min-width: 100%;
	width: 100%;
    position: relative;
    background-color: #FAFAFA;
}

.home main {
	text-align: left;
    position: relative;
    top: 75px;
    z-index: 10;
    max-width: 700px;
    left: 75px;
}

.home h1 {
	font-family: "Authentic Sans", helvetica, sans-serif;
	font-size: 50px;
	font-weight: bold;
	color: #000000;
}

.home .text {
	font-family: "Authentic Sans", helvetica, sans-serif;
	font-size: 40px;
	font-weight: bold;
	color: #000000;
	line-height: 1em;
	margin-top: 10px;
	max-width: 900px;

	animation: fadein 4s;
    -moz-animation: fadein 4s;
    -webkit-animation: fadein 4s;
}

.home .work {
	font-family: "Authentic Sans", helvetica, sans-serif;
	font-size: 40px;
	font-weight: bold;
	margin-top: 40px;
	margin-bottom: 40px;

	animation: fadein 6s;
    -moz-animation: fadein 6s;
    -webkit-animation: fadein 6s;
}

.home .contact {
	font-family: "Authentic Sans", helvetica, sans-serif;
	font-size: 30px;
	font-weight: bold;

	animation: fadein 6s;
    -moz-animation: fadein 6s;
    -webkit-animation: fadein 6s;
}


#email {
	cursor: url('images/email_cursor.png'), pointer;

}

#insta {
	cursor: url('https://static.xx.fbcdn.net/rsrc.php/yl/r/WjbGH9Owc-X.ico'), pointer;
}

#twitter {
	cursor: url('https://www.louderwithcrowder.com/wp-content/plugins/social-shares-count/assets/images/twitter.png'), pointer;
}

#dribbble {
	cursor: url('images/dribbble_cursor.png'), pointer;
}

#linkedin {
	cursor: url('images/linkedin_cursor.png'), pointer;
}



/* --------------------------------- */
/* ---------- RESPONSIVE ----------- */
/* --------------------------------- */
@media screen and (max-width: 960px) {
	.home main {
		text-align: left;
		position: relative;
		top: 75%;
		left: 10px;
		transform: translateY(-50%);
		margin: 0 auto;
	}

	.home .text {
	    max-width: 85%;
	}
}

@media only screen
  and (min-device-width: 320px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

	.home h1 {
		font-size: 40px;
	}

}