/* ------------------
 * GLOBAL STYLESHEET
 * ------------------
 * Media: all
 */

@import url("entypo/entypo.css");

/* -----------------
 * BASIC RESET
 * ----------------- */
html, body, blockquote, form, fieldset,
p, pre, dl, dd, li, ul, ol,
h1, h2, h3, h4, h5, h6
{ margin: 0; padding: 0; }

/* -----------------
 * DEFAULT STYLING
 * ----------------- */
html, input, select, table, th, td {
	font-size: 100%;
}

body {
	background-color: #fff;
	color: #101010;
	font: 62.5%/1.5 Lora, serif;
	text-align: center;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Lato', serif;
	font-weight: bold;
}

h1 {
	font-size: 2em;
	text-transform: normal;
}

h2 {
	color: #888;
	font-size: 0.75em;
	font-weight: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
}

ul {
	list-style: none;
}

a {
	color: #388cea;
	text-decoration: none;
}

@keyframes cycle {
	0% { color: #388cea; }
	25% { color: #cf21b3; }
	50% { color: #c429b7; }
	75% { color: #2e93ed; }
}

@-webkit-keyframes cycle {
	0% { color: #388cea; }
	25% { color: #cf21b3; }
	50% { color: #c429b7; }
	75% { color: #2e93ed; }
}

/* -----------------
 * ICONS
 * ----------------- */
.icon {
	color: #101010;
	display: inline-block;
	font-family: "entypo", "entypo-social";
	font-style: normal;
	font-weight: normal;
	vertical-align: middle;
	font-size: 42px;
	line-height: 42px;
	margin-right: 0.15em;
}

.icon-twitter:before { content: "\F316"; }
.icon-linkedin:before { content: "\F319"; }
.icon-email:before { content: "\2709"; }

/* -----------------
 * TOOLTIPS
 * ----------------- */
.tooltip {
	position: absolute;
	z-index: 100;
	display: block;
	font-family: "Lato";
	font-size: 0.75em;
	letter-spacing: 1px;
	opacity: 0.8;
	text-transform: uppercase;
	visibility: visible;
}

.tooltip.top { margin-top: -5px; padding-bottom: 5px; }
.tooltip.right { margin-left: 5px; padding-left: 5px; }
.tooltip.bottom { margin-top: 5px; padding-top: 5px; }
.tooltip.left { margin-left: -5px; padding-right: 5px; }

.tooltip.top .tooltip-arrow {
	bottom: 0;
	left: 50%;
	margin-left: -5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #000;
}

.tooltip.left .tooltip-arrow {
	top: 50%;
	right: 0;
	margin-top: -5px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #000;
}

.tooltip.bottom .tooltip-arrow {
	top: 0;
	left: 50%;
	margin-left: -5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #000;
}

.tooltip.right .tooltip-arrow {
	top: 50%;
	left: 0;
	margin-top: -5px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 5px solid #000;
}

.tooltip-inner {
	background-color: #000;
	color: #fff;
	max-width: 200px;
	padding: 4px 10px;
	text-align: center;
	text-decoration: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.tooltip-arrow {
	position: absolute;
	width: 0;
	height: 0;
}

/* -----------------
 * LAYOUT
 * ----------------- */
#lazy {
	background: #fff;
	background: -moz-linear-gradient(left, #7f5ad0 0%, #08b6fe 25%, #7f5ad0 50%, #fe08a5 75%, #7f5ad0 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#7f5ad0), color-stop(25%,#08b6fe), color-stop(50%,#7f5ad0), color-stop(75%,#fe08a5), color-stop(100%,#7f5ad0));
	background: -webkit-linear-gradient(left, #7f5ad0 0%, #08b6fe 25%, #7f5ad0 50%, #fe08a5 75%, #7f5ad0 100%);
	background: -o-linear-gradient(left, #7f5ad0 0%, #08b6fe 25%, #7f5ad0 50%, #fe08a5 75%, #7f5ad0 100%);
	background: -ms-linear-gradient(left, #7f5ad0 0%, #08b6fe 25%, #7f5ad0 50%, #fe08a5 75%, #7f5ad0 100%);
	background: linear-gradient(to right, #7f5ad0 0%, #08b6fe 25%, #7f5ad0 50%, #fe08a5 75%, #7f5ad0 100%);
	height: 2px;
}

#page {
	font-size: 1.8em;
	margin: 0 auto;
	padding: 80px 0 40px;
	width: 600px;
}

/* Header */
#header h1 {
	margin-top: 20px;
}

/* Profile */
#header img {
	display: block;
	margin: 0 auto;
}

/* About */
#about {
	margin: 40px 0;
	padding: 0 35px;
}

#about a {
	animation-name: cycle;
	animation-duration: 600s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	-webkit-animation-name: cycle;
	-webkit-animation-duration: 600s;
	-webkit-animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
}

/* Divider */
#divider:before {
	content: "++++++++++++++++++++++++++++++++++++++++++";
	font-size: 14px;
	color: #bbb;
	letter-spacing: 7px;
}

#divider {
	margin: 40px 0;
}

/* Contact */
#contact {
	font-size: 0.85em;
	font-family: "Lato";
}

#contact a {
	color: #999;
}

#contact a:hover, #contact a:focus, #contact a:active {
	color: #666;
}

#contact .icon {
	color: #aaa;
}

#contact a:hover .icon, #contact a:focus .icon, #contact a:active .icon {
	color: #666;
}

#contact li {
	display: inline-block;
	margin: 0 1em;
}

#contact li strong {
	font-weight: normal;
}

/* -----------------
 * BREAK POINTS
 * ----------------- */
@media only screen and (max-width: 600px) {
	#page { padding-top: 40px; width: 320px; }
	#divider:before { content: "++++++++++++++++++++++"; }
	#divider { margin: 20px 0; }
	#about { margin: 20px 0; padding: 0; }
	#contact li strong { display: none; }
	#contact li .icon { font-size: 84px; margin: 0; }
}