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,font,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,hr{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;text-align:left;line-height:normal;}table{border-collapse:collapse;border-spacing:0;}ol,ul{list-style:none;}q:before,q:after,blockquote:before,blockquote:after{content:"";}strong{font-weight: bold;}table{width:100%;} * {outline: none;}

html, body {
	height: 100%;
}

body {
	overflow: hidden;
	margin: 0;
	background-color: #FFF;
	font-family: "HelveticaNeue-UltraLight", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
	font-weight: 300;
}

img.background {
	width: 100%;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
}

div.quote {
	position: absolute;	
}

div.panel {
	max-width: 600px;
	position: absolute;
	top: 50%;
	left: 50px;
	z-index: 1;
	margin-top: -182px;
	padding: 40px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 7px;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
	color: #FFF;
}

div.panel h1,
div.panel p {
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

div.panel h1 {
	margin-top: -12px;
	font-size: 80px;
	letter-spacing: 5px;
}

div.panel p {
	font-size: 20px;
}

div.panel ul {
	width: 100%;
	display: table;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed rgba(255, 255, 255, 0.3);
}

div.panel ul li {
	margin-right: 20px;
	float: left;
}

div.panel ul li a {
	-webkit-transition: all linear 0.5s;
}

div.panel ul.personal li a {
	padding: 5px 7px;
	background: #990000;
	border-radius: 5px;
	color: #FFF;
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 2px;
}

div.panel ul.personal li a:hover {
	background-color: red;
}

div.panel ul.social li a {
	width: 32px;
	height: 32px;
	display: block;
	text-indent: -2000px;
}

div.panel ul.social li a:hover {
	opacity: 0.5;
}

div.panel ul.social li.facebook a {
	background-image: url(/images/facebook.png);
}

div.panel ul.social li.twitter a {
	background-image: url(/images/twitter.png);
}

div.panel ul.social li.linkedin a {
	background-image: url(/images/linkedin.png);
}






@media screen and (orientation:portrait) and (device-width: 320px) {
	div.panel {
		max-width: 500px; 
		-webkit-transform: scale(1.8);
		margin-left: 150px;
	}
}