html {
	font-family: 'Open Sans', 'Segoe UI', 'Helvetica', sans-serif;
	font-size: 20px;
}

html, body {
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	overflow: hidden;
}

body {
	letter-spacing: 0.3px;
	background-color: #f9f9f9;
	color: #6d6d6d;
}

::-moz-selection {
	background-color: rgba(170,170,170,0.99); /* #e5e5e5, no transparency */
	color: #f9f9f9;
}

::selection {
	background-color: rgba(170,170,170,0.99); /* #e5e5e5, no transparency */
	color: #f9f9f9;
}

* {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

a {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}

.hidden { /* Hide text visually but keep it readable by screen readers */
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/**
 * 	Business card
 */

#outer-wrap {
	display: table;
	height: 100%;
	margin: 0 auto;
}

#inner-wrap {
	display: table-cell;
	vertical-align: middle;
}

div.origami {
	display: inline-block;
	margin: 0.5em 0;
	z-index: 20;
	
	background-repeat: no-repeat;
	
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-duration: 0.8s;
    
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 0.8s;
    
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 0.8s;
}

div.origami#whale {
	height: 165px;
	width: 376px;
	padding-bottom: 10px;
	
	background-image: url('img/whale.png');
	
	/* Initial animation */
    -moz-animation-name: fadeShiftIn;
    -webkit-animation-name: fadeShiftIn;
    animation-name: fadeShiftIn;
}

#business-card {
	max-width: 600px;
	padding: 48px 80px;
	text-align: center;
	position: relative;
	z-index: 10;
}

#business-card header p,
#contact-icons {
	z-index: 30;
	position: relative;
		
	/* Initial animation */
    -moz-animation-name: waitFadeIn;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-duration: 1.2s;
    
    -webkit-animation-name: waitFadeIn;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 1.2s;
    
    animation-name: waitFadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 1.2s;
}

#business-card header {
	font-weight: 100;
	margin-bottom: 8px;
}

#business-card header b {
	font-size: 1.15em;
	font-weight: bold;
}

#contact-icons {
	display: inline-block;
	width: 216px;
}

#contact-icons a {
	display: inline-block;
	height: 32px;
	width: 32px;
	margin: 8px;
	background-image: url('img/contact-icons.png');
	background-repeat: no-repeat;
}

a#github   { background-position:   0   0; }
a#email    { background-position: -32px 0; }
a#twitter  { background-position: -64px 0; }
a#linkedin { background-position: -96px 0; }

a#github:hover   { background-position:   0   -32px; }
a#email:hover    { background-position: -32px -32px; }
a#twitter:hover  { background-position: -64px -32px; }
a#linkedin:hover { background-position: -96px -32px; }


/**
 * 	Animation keyframes
 */

@-moz-keyframes waitFadeIn {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

@-webkit-keyframes waitFadeIn {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes waitFadeIn {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

@-moz-keyframes fadeShiftIn {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}
	
	20% {
		opacity: 0;
		transform: translateX(40px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@-webkit-keyframes fadeShiftIn {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}
	
	20% {
		opacity: 0;
		transform: translateX(40px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeShiftIn {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}
	
	20% {
		opacity: 0;
		transform: translateX(40px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}


/**
 * 	Responsive media queries
 */

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 192dpi) {
	#contact-icons {
		display: inline-block;
		width: 248px;
	}

	#contact-icons a {
		background-image: url('img/contact-icons-hidpi.png');
		background-size: 128px 64px;
		margin: 12px;
	}
	
	div.origami#whale {
		background-image: url('img/whale-hidpi.png?v2');
		background-size: 376px 165px;
	}
}

@media (max-width: 600px), (max-height: 420px) {
	body { font-size: 15px; }
	
	div.origami#whale {
		height: 124px;
		width: 282px;
		background-size: 282px 124px !important;
	}
	
	#business-card { padding: 40px 60px; }
}

@media (max-width: 400px), (max-height: 350px) {
	#business-card { padding: 0; }
	div.geometry, div.origami { display: none; }
}