/*////////////////////////////////////////////////
--------------------------------------------------
*	Style.css
-------------------------------------------------- 
////////////////////////////////////////////////*/

* {
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	       box-sizing: border-box; 
}

/*////////////////////////////////////////////////
--------------------------------------------------
*	Base
-------------------------------------------------- 
////////////////////////////////////////////////*/

html {
	min-height:100%;
	border:6px solid #eef0f3;
	color:#61666c;
	font-weight:400;
	font-size:1em;
	font-family:'Open Sans', sans-serif;
	line-height:1.5em;
}

body {
	padding:20px;
	-webkit-backface-visibility:hidden;
}

/*////////////////////////////////////////////////
--------------------------------------------------
*	Type
-------------------------------------------------- 
////////////////////////////////////////////////*/

h1,h2 {
	color:#2a2a2a;
	font-weight:400;
}

h1 {
	margin-bottom:1em;
}

h2 {
	margin-bottom:1em;
}

p {
	margin-bottom:1.5em;
}

small {
	font-size:.75em;
}

	small span {
		display:inline-block;
		margin-right:5px;
		width:15px;
		height:15px;
		border:1px solid #f32236;
		-webkit-border-radius:30px;
		   -moz-border-radius:30px;
		    -ms-border-radius:30px;
		     -o-border-radius:30px;
		        border-radius:30px;
		color:#f32236;
		text-align:center;
		font-weight:bold;
		line-height:15px;
	}

a {
	color:#9f2290;
	text-decoration:none;
}

a:hover {
	color:#8c007d;
}

ul {
	margin:0 0 1.5em 3em;
}

code,pre {
	color:#2a2a2a;
	font-family:consolas,monospace;	
}

pre {
	overflow:auto;
	margin-bottom:1.5em;
	padding:1em;
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
	    -ms-border-radius:3px;
	     -o-border-radius:3px;
	        border-radius:3px;
	background:#ECEEF1;
	font-size:inherit;
}

/*////////////////////////////////////////////////
--------------------------------------------------
*	Structure
-------------------------------------------------- 
////////////////////////////////////////////////*/

.island {
	margin:0 auto 1.5em auto;
	max-width:800px;
}

.header {
	margin-top:20px;
	margin-bottom:20px;
	text-align:center;
}

	.header img {
		margin-bottom:1em;
	}

	.header p {
		text-align:left;
	}

.example {
	text-align:center;
}

.tagline {
	text-align:center;
}

.bio {
        margin: 0 auto 1.5em auto;
        max-width: 640px;
        text-align: left;
}

	.example img {
		max-width:100%;
	}

.demo {
	margin-bottom:1.5em;
	padding:1em;
	background:#ECEEF1;
	text-align:center;
}

	.demo p {
		margin:0;
	}

.footer {
	padding:2em;
	font-size:80%;
	text-align:center;
}

	.footer p {
		margin:0;
	}

.pi {
        position: fixed;
        bottom: 8px;
        right: 10px;
        font-size: 10px;
        color: #eef0f3;
        opacity: 0.8;
}

/*////////////////////////////////////////////////
--------------------------------------------------
*	Animations
-------------------------------------------------- 
////////////////////////////////////////////////*/

@-webkit-keyframes fadeDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-ms-keyframes fadeDown {
	0% {
		opacity: 0;
		-ms-transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		-ms-transform: translateY(0);
	}
}

@-o-keyframes fadeDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeDown {
	-webkit-animation:fadeDown 1s ease;
	   -moz-animation:fadeDown 1s ease;
	    -ms-animation:fadeDown 1s ease;
	     -o-animation:fadeDown 1s ease;
	        animation:fadeDown 1s ease;
}

@-webkit-keyframes bewton {
	0% {background-position:0 0;}
	100% {background-position:-440px 0;}
}

@-moz-keyframes bewton {
	0% {background-position:0 0;}
	100% {background-position:-440px 0;}
}

@-ms-keyframes bewton {
	0% {background-position:0 0;}
	100% {background-position:-440px 0;}
}

@-o-keyframes bewton {
	0% {background-position:0 0;}
	100% {background-position:-440px 0;}
}

@keyframes bewton {
	0% {background-position:0 0;}
	100% {background-position:-440px 0;}
}

/*.bewton:hover {
	-webkit-animation: bewton 20s infinite linear;
	   -moz-animation: bewton 20s infinite linear;
	    -ms-animation: bewton 20s infinite linear;
	     -o-animation: bewton 20s infinite linear;
	        animation: bewton 20s infinite linear;
}*/