/* --------------------------------------------------

	Designer: Shane Guymon
	Website: http://www.shaneguymon.com
	Date: 03-11-2011
	©Copyright 2011 All Rights Reserved Shane Guymon

----------------------------------------------------- */

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
    }

body {
	background: #ec1c24;
}
figure {
  background: url(../images-home/shane-logo.png) no-repeat;
  height: 48px;
  width: 120px;
  margin: 50px;
  background-size: 120px;
  position: fixed;
}

section.bg {
  background: url(../images-home/shane-bg-website.jpg) fixed no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

section.contentbg {
  background: #2d2d29;
  width: 500px;
  right: 0;
  position: absolute;
  height: 100%;
  overflow-y: scroll;
  height: 100vh;
}

div.content {
  float: left;
  display: block;
  padding: 60px 40px;
}

div.content h1 {
  font-family: 'Arvo', Helvetica, sans-serif;
  font-size: 40px;
  line-height: 45px;
  font-weight: bold;
  color: #fff;
  padding: 0;
  margin: 0 0 20px 0;
}
div.content p {
  font-family: Helvetica, Verdana, sans-serif;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  padding: 0;
  margin: 0 0 20px 0;

}

div.extraspace {
	display: none;
	float: left;
	display: block;
	width: 100%;
	margin: 40px;
	padding: 0;
}

/* ------ Social ------ */

/* TWITTER */

div.twitter {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 15px 20px 0;
}

div.twitter a {
	background: url(../images-home/icons/twitter-a.png) no-repeat center top;
	background-size: 48px;
	float: left;
	width: 48px;
	height: 48px;
}

div.twitter a:hover, div.twitter a:focus {
	background: url(../images-home/icons/twitter-b.png) no-repeat center top;
	background-size: 48px;
}

div.twitter a span {
	visibility: hidden;
}

/* FACEBOOK */

div.facebook {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 15px 20px 0;
}

div.facebook a {
	background: url(../images-home/icons/facebook-a.png) no-repeat center top;
	background-size: 48px;
	float: left;
	width: 48px;
	height: 48px;
}

div.facebook a:hover, div.facebook a:focus {
	background: url(../images-home/icons/facebook-b.png) no-repeat center top;
	background-size: 48px;
}

div.facebook a span {
	visibility: hidden;
}

/* DRIBBBLE */

div.dribbble {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 15px 20px 0;
}

div.dribbble a {
	background: url(../images-home/icons/dribbble-a.png) no-repeat center top;
	background-size: 48px;
	float: left;
	width: 48px;
	height: 48px;
}

div.dribbble a:hover, div.dribbble a:focus {
	background: url(../images-home/icons/dribbble-b.png) no-repeat center top;
	background-size: 48px;
}

div.dribbble a span {
	visibility: hidden;
}

/* BEHANCE */

div.behance {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 15px 20px 0;
}

div.behance a {
	background: url(../images-home/icons/behance-a.png) no-repeat center top;
	background-size: 48px;
	float: left;
	width: 48px;
	height: 48px;
}

div.behance a:hover, div.behance a:focus {
	background: url(../images-home/icons/behance-b.png) no-repeat center top;
	background-size: 48px;
}

div.behance a span {
	visibility: hidden;
}

/* DELICIOUS */

div.delicious {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 15px 20px 0;
}

div.delicious a {
	background: url(../images-home/icons/delicious-a.png) no-repeat center top;
	background-size: 48px;
	float: left;
	width: 48px;
	height: 48px;
}

div.delicious a:hover, div.delicious a:focus {
	background: url(../images-home/icons/delicious-b.png) no-repeat center top;
	background-size: 48px;
}

div.delicious a span {
	visibility: hidden;
}

/* FLICKR */

div.flickr {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 15px 20px 0;
}

div.flickr a {
	background: url(../images-home/icons/flickr-a.png) no-repeat center top;
	background-size: 48px;
	float: left;
	width: 48px;
	height: 48px;
}

div.flickr a:hover, div.flickr a:focus {
	background: url(../images-home/icons/flickr-b.png) no-repeat center top;
	background-size: 48px;
}

div.flickr a span {
	visibility: hidden;
}

/* GOOGLE */

div.google {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 15px 20px 0;
}

div.google a {
	background: url(../images-home/icons/google-a.png) no-repeat center top;
	background-size: 48px;
	float: left;
	width: 48px;
	height: 48px;
}

div.google a:hover, div.google a:focus {
	background: url(../images-home/icons/google-b.png) no-repeat center top;
	background-size: 48px;
}

div.google a span {
	visibility: hidden;
}

/* INSTAGRAM */

div.instagram {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 15px 20px 0;
}

div.instagram a {
	background: url(../images-home/icons/instagram-a.png) no-repeat center top;
	background-size: 48px;
	float: left;
	width: 48px;
	height: 48px;
}

div.instagram a:hover, div.instagram a:focus {
	background: url(../images-home/icons/instagram-b.png) no-repeat center top;
	background-size: 48px;
}

div.instagram a span {
	visibility: hidden;
}

/* LINKEDIN */

div.linkedin {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 15px 20px 0;
}

div.linkedin a {
	background: url(../images-home/icons/linkedin-a.png) no-repeat center top;
	background-size: 48px;
	float: left;
	width: 48px;
	height: 48px;
}

div.linkedin a:hover, div.linkedin a:focus {
	background: url(../images-home/icons/linkedin-b.png) no-repeat center top;
	background-size: 48px;
}

div.linkedin a span {
	visibility: hidden;
}

/* MEDIUM */

div.medium {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 15px 20px 0;
}

div.medium a {
	background: url(../images-home/icons/medium-a.png) no-repeat center top;
	background-size: 48px;
	float: left;
	width: 48px;
	height: 48px;
}

div.medium a:hover, div.medium a:focus {
	background: url(../images-home/icons/medium-b.png) no-repeat center top;
	background-size: 48px;
}

div.medium a span {
	visibility: hidden;
}

/* TUMBLR */

div.tumblr {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 15px 20px 0;
}

div.tumblr a {
	background: url(../images-home/icons/tumblr-a.png) no-repeat center top;
	background-size: 48px;
	float: left;
	width: 48px;
	height: 48px;
}

div.tumblr a:hover, div.tumblr a:focus {
	background: url(../images-home/icons/tumblr-b.png) no-repeat center top;
	background-size: 48px;
}

div.tumblr a span {
	visibility: hidden;
}

/* YOUTUBE */

div.youtube {
	display: block;
	float: left;
	width: 48px;
	height: 48px;
	margin: 0 15px 20px 0;
}

div.youtube a {
	background: url(../images-home/icons/youtube-a.png) no-repeat center top;
	background-size: 48px;
	float: left;
	width: 48px;
	height: 48px;
}

div.youtube a:hover, div.youtube a:focus {
	background: url(../images-home/icons/youtube-b.png) no-repeat center top;
	background-size: 48px;
}

div.youtube a span {
	visibility: hidden;
}

.clear {
	clear: both;
}

/* ----------- FLICKR ----------- */

#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:visited {text-decoration: none !important; background:inherit !important;color:#000; padding: 5px 5px 20px 0; -webkit-transition: border .2s linear; display: inline-block;}
#flickr_badge_uber_wrapper a:link img,
#flickr_badge_uber_wrapper a:visited img{border: 1px solid rgba(255,255,255,.2); -webkit-transition: border .2s linear;}
#flickr_badge_uber_wrapper a:hover img{border: 1px solid #06aff0;}
#flickr_badge_wrapper {margin: 40px 0 0 0;}
#flickr_badge_uber_wrapper a img {
	width: 70px;
	height: 70px;
}

/* ----------- END OF FLICKR ----------- */

/* LINKAGE */

a:link, a:visited {
	color: #00ADEF;
	font-weight: bold;
	text-decoration: none;
	-webkit-transition: color .2s linear;
}
a:hover, a:active, a:focus {
	color: #fff;
	font-weight: bold;
}

/* -------------( BUTTON )----------------- */

div.btn {
	width: 0 auto;
	margin: 0 auto;
	padding: 20px 0;
	}
div.btn a {
	display: block;
	padding: 20px;
	font-size: 16px;
	line-height: 22px;
	font-family: 'Arvo', Helvetica, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	text-align: center;
	background: #ED1C24;
	border-radius: 5px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	transition: background-color .2s linear;
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	}
div.btn a:hover, div.btn a:focus {
	background-color: #B51C27;
	color: #fff;
	text-decoration: none;
	}

div.btn-alt {
	width: 0 auto;
	margin: 0 auto;
	padding: 20px 0;
	}
div.btn-alt a {
	display: block;
	padding: 20px;
	font-size: 16px;
	line-height: 22px;
	font-family: 'Arvo', Helvetica, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	text-align: center;
	background: #00AEEF;
	border-radius: 5px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	transition: background-color .2s linear;
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	}
div.btn-alt a:hover, div.btn-alt a:focus {
	background-color: #0485AD;
	color: #fff;
	text-decoration: none;
	}
/* --------------( CUSTOM SELECTION )-------------- */

/* Mozilla based browsers */
::-moz-selection {
    color: #fff;
	background: #EC1C24;
}

/* Works in Safari */
::selection {
    color: #fff;
	background: #EC1C24;
}

/* --------------( PRELOAD )-------------- */

#preload { display: none; }


/* --------------( MEDIA QUERIES )-------------- */

@media (max-width: 900px) {

	figure {
		background: url(../images-home/shane-logo.png) no-repeat;
		display: block;
		float: left;
		height: 36px;
		width: 90px;
		margin: 20px;
		background-size: 90px;
		position: relative;
	}

	section.bg {
		width: 100%;
		height: 400px;
		position: relative;
		background-position-x: center;
		background-attachment: scroll;
	}
	section.contentbg {
		background: #2d2d29;
		width: 100%;
		right: auto;
		position: relative;
		height: auto;
		overflow-y: scroll;
	}

	div.content {
		float: left;
		display: block;
		padding: 1em 2em;
	}

	div.content h1 {
		font-family: 'Arvo', Helvetica, sans-serif;
		font-size: 2.3em;
		line-height: 1.5em;
		font-weight: bold;
		color: white;
		padding: 0;
		margin: .8em 0;
	}

	div.content p {
		font-family: Helvetica, Verdana, sans-serif;
		font-size: 1.125em;
		line-height: 1.875em;
		color: white;
		padding: 0;
		margin: 0 0 1.250em 0;
	}

	div.extraspace {
		margin: 20px;
	}

	/* ------ Social ------ */

	/* TWITTER */

	div.twitter {
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 20px 0;
	}

	div.twitter a {
		background: url(../images-home/icons/twitter-a.png) no-repeat center top;
		background-size: 40px;
		float: left;
		width: 40px;
		height: 40px;
	}

	div.twitter a:hover, div.twitter a:focus {
		background: url(../images-home/icons/twitter-b.png) no-repeat center top;
		background-size: 40px;
	}

	div.twitter a span {
		visibility: hidden;
	}

	/* FACEBOOK */

	div.facebook {
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 20px 0;
	}

	div.facebook a {
		background: url(../images-home/icons/facebook-a.png) no-repeat center top;
		background-size: 40px;
		float: left;
		width: 40px;
		height: 40px;
	}

	div.facebook a:hover, div.facebook a:focus {
		background: url(../images-home/icons/facebook-b.png) no-repeat center top;
		background-size: 40px;
	}

	div.facebook a span {
		visibility: hidden;
	}

	/* DRIBBBLE */

	div.dribbble {
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 20px 0;
	}

	div.dribbble a {
		background: url(../images-home/icons/dribbble-a.png) no-repeat center top;
		background-size: 40px;
		float: left;
		width: 40px;
		height: 40px;
	}

	div.dribbble a:hover, div.dribbble a:focus {
		background: url(../images-home/icons/dribbble-b.png) no-repeat center top;
		background-size: 40px;
	}

	div.dribbble a span {
		visibility: hidden;
	}

	/* BEHANCE */

	div.behance {
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 20px 0;
	}

	div.behance a {
		background: url(../images-home/icons/behance-a.png) no-repeat center top;
		background-size: 40px;
		float: left;
		width: 40px;
		height: 40px;
	}

	div.behance a:hover, div.behance a:focus {
		background: url(../images-home/icons/behance-b.png) no-repeat center top;
		background-size: 40px;
	}

	div.behance a span {
		visibility: hidden;
	}

	/* DELICIOUS */

	div.delicious {
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 20px 0;
	}

	div.delicious a {
		background: url(../images-home/icons/delicious-a.png) no-repeat center top;
		background-size: 40px;
		float: left;
		width: 40px;
		height: 40px;
	}

	div.delicious a:hover, div.delicious a:focus {
		background: url(../images-home/icons/delicious-b.png) no-repeat center top;
		background-size: 40px;
	}

	div.delicious a span {
		visibility: hidden;
	}

	/* FLICKR */

	div.flickr {
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 20px 0;
	}

	div.flickr a {
		background: url(../images-home/icons/flickr-a.png) no-repeat center top;
		background-size: 40px;
		float: left;
		width: 40px;
		height: 40px;
	}

	div.flickr a:hover, div.flickr a:focus {
		background: url(../images-home/icons/flickr-b.png) no-repeat center top;
		background-size: 40px;
	}

	div.flickr a span {
		visibility: hidden;
	}

	/* GOOGLE */

	div.google {
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 20px 0;
	}

	div.google a {
		background: url(../images-home/icons/google-a.png) no-repeat center top;
		background-size: 40px;
		float: left;
		width: 40px;
		height: 40px;
	}

	div.google a:hover, div.google a:focus {
		background: url(../images-home/icons/google-b.png) no-repeat center top;
		background-size: 40px;
	}

	div.google a span {
		visibility: hidden;
	}

	/* INSTAGRAM */

	div.instagram {
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 20px 0;
	}

	div.instagram a {
		background: url(../images-home/icons/instagram-a.png) no-repeat center top;
		background-size: 40px;
		float: left;
		width: 40px;
		height: 40px;
	}

	div.instagram a:hover, div.instagram a:focus {
		background: url(../images-home/icons/instagram-b.png) no-repeat center top;
		background-size: 40px;
	}

	div.instagram a span {
		visibility: hidden;
	}

	/* LINKEDIN */

	div.linkedin {
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 20px 0;
	}

	div.linkedin a {
		background: url(../images-home/icons/linkedin-a.png) no-repeat center top;
		background-size: 40px;
		float: left;
		width: 40px;
		height: 40px;
	}

	div.linkedin a:hover, div.linkedin a:focus {
		background: url(../images-home/icons/linkedin-b.png) no-repeat center top;
		background-size: 40px;
	}

	div.linkedin a span {
		visibility: hidden;
	}

	/* MEDIUM */

	div.medium {
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 20px 0;
	}

	div.medium a {
		background: url(../images-home/icons/medium-a.png) no-repeat center top;
		background-size: 40px;
		float: left;
		width: 40px;
		height: 40px;
	}

	div.medium a:hover, div.medium a:focus {
		background: url(../images-home/icons/medium-b.png) no-repeat center top;
		background-size: 40px;
	}

	div.medium a span {
		visibility: hidden;
	}

	/* TUMBLR */

	div.tumblr {
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 20px 0;
	}

	div.tumblr a {
		background: url(../images-home/icons/tumblr-a.png) no-repeat center top;
		background-size: 40px;
		float: left;
		width: 40px;
		height: 40px;
	}

	div.tumblr a:hover, div.tumblr a:focus {
		background: url(../images-home/icons/tumblr-b.png) no-repeat center top;
		background-size: 40px;
	}

	div.tumblr a span {
		visibility: hidden;
	}

	/* YOUTUBE */

	div.youtube {
		display: block;
		float: left;
		width: 40px;
		height: 40px;
		margin: 0 10px 20px 0;
	}

	div.youtube a {
		background: url(../images-home/icons/youtube-a.png) no-repeat center top;
		background-size: 40px;
		float: left;
		width: 40px;
		height: 40px;
	}

	div.youtube a:hover, div.youtube a:focus {
		background: url(../images-home/icons/youtube-b.png) no-repeat center top;
		background-size: 40px;
	}

	div.youtube a span {
		visibility: hidden;
	}

	.clear {
		clear: both;
	}

@media (max-width: 600px) {

	section.bg {
		height: 250px;
		background-size: 100% auto;
	}
}