/*---------- CSS 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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
	}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
	display: block;
	}
body{
	line-height: 1;
	}
ol, ul{
	list-style: none;
	}
blockquote, q{
	quotes: none;
	}
blockquote:before, blockquote:after,
q:before, q:after{
	content: ''; content: none;
	}
table{
	border-collapse: collapse; border-spacing: 0;
	}
b{
	font-weight: bold;
	}
select, input, textarea, button{
	font-family: inherit; font-size: inherit;
	}
button, input, select, textarea{
	margin: 0; padding: 0;
	}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
	}
::-webkit-selection { 
	background: rgb(107,174,51); color: rgb(255,255,255); text-shadow: none;
	}
::-moz-selection { 
	background: rgb(107,174,51); color: rgb(255,255,255); text-shadow: none;
	}
::selection { 
	background: rgb(107,174,51); color: rgb(255,255,255); text-shadow: none;
	}
strong{
	font-weight: bold;
	}
	
/*---------- Animation ----------*/

.animate{
	-webkit-animation: 3s ease;
	-moz-animation: 3s ease;
	-ms-animation: 3s ease;
	-o-animation: 3s ease;
	animation: 3s ease;
	}
	
.animate_fast{	
	-webkit-animation: 1s ease;
	-moz-animation: 1s ease;
	-ms-animation: 1s ease;
	-o-animation: 1s ease;
	animation: 1s ease;
	}

@-webkit-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}
	
	60% {
		opacity: 1;
		-webkit-transform: translateX(30px);
	}
	
	80% {
		-webkit-transform: translateX(-10px);
	}
	
	100% {
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}
	
	60% {
		opacity: 1;
		-moz-transform: translateX(30px);
	}
	
	80% {
		-moz-transform: translateX(-10px);
	}
	
	100% {
		-moz-transform: translateX(0);
	}
}

@-ms-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-ms-transform: translateX(-2000px);
	}
	
	60% {
		opacity: 1;
		-ms-transform: translateX(30px);
	}
	
	80% {
		-ms-transform: translateX(-10px);
	}
	
	100% {
		-ms-transform: translateX(0);
	}
}

@-o-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-2000px);
	}
	
	60% {
		opacity: 1;
		-o-transform: translateX(30px);
	}
	
	80% {
		-o-transform: translateX(-10px);
	}
	
	100% {
		-o-transform: translateX(0);
	}
}

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}
	
	60% {
		opacity: 1;
		transform: translateX(30px);
	}
	
	80% {
		transform: translateX(-10px);
	}
	
	100% {
		transform: translateX(0);
	}
}
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-50px);
	}
	
	60% {
		opacity: 0;
		-webkit-transform: translateY(-50px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-50px);
	}
	
	60% {
		opacity: 0;
		-webkit-transform: translateY(-50px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

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

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-ms-transform: translateY(-50px);
	}
	
	100% {
		opacity: 1;
		-ms-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-50px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
	
/*---------- Layout ----------*/

body{
	background: #fff;
	font-size: 13px; /* Base Font Size */
	line-height: 1.462; /* 19px */
	color: #575757;
	font-family: "Open Sans",Helvetica Neue,Helvetica,Arial,sans-serif;
	}
	
a{
	color: #6bae33;
	text-decoration: none;
	}
	
a:hover{
	text-decoration: underline;
	}
	
h1,h2,h3,h4,h5,h6{
	font-weight: bold;
	}
	
h1{
	font-size: 1.154em;
	margin: 0 0 10px 0;
	}
	
#wrapper{
	width: 950px;
	padding: 0 0 30px 50px;
	}
	
@media screen and (min-width: 768px) {
    #wrapper{
        min-height: 1240px;
    }
}
	
#logo{
	margin: 35px 0;
	height: 50px;
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-ms-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
	}
	
#introduction{
	margin: 0 0 35px -50px;
	overflow: hidden;
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-ms-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
	}
	
	#introduction img{
		float: left;
		display: inline;
		width: 680px;
		height: 300px;
		}
		
	#introduction .text{
		background: #6bae33;
		color: #fff;
		width: 280px;
		height: 260px;
		float: left;
		display: inline;
		padding: 20px;
		}
		
	#introduction .text ::-webkit-selection { 
		background: rgb(45,45,45); color: rgb(255,255,255); text-shadow: none;
		}
		
	#introduction .text ::-moz-selection { 
		background: rgb(45,45,45); color: rgb(255,255,255); text-shadow: none;
		}
		
	#introduction .text ::selection { 
		background: rgb(45,45,45); color: rgb(255,255,255); text-shadow: none;
		}
			
		#introduction .text p{
			margin: 0 0 15px 0;
			}
		
		#introduction .text a{
			color: #fff;
			text-decoration: underline;
			}
			
#currently{
	width: 440px;
	float: left;
	display: inline;
	margin: 0 20px 0 0;
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-ms-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
	}
	
	#currently h1{
		margin: 0 0 15px 0;
		}
	
	#currently h1 a{
		color: #295bb6;
		}
		
	#currently p{
		font-weight: bold;
		color: #909090;
		margin: 0 0 15px 0;
		}
	
#twitter{
	width: 490px;
	float: left;
	display: inline;
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-ms-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
	}
	
	#twitter h1{
		margin: 0 0 15px 0;
		}
	
	#twitter h1 a{
		color: #33ccff;
		}
		
	#twitter ul{
		width: 505px;
		margin: 0 0 0 -15px;
		}
		
	#twitter li{
		background: #27C6D6;
		color: #fff;
		width: 217px;
		position: relative;
		float: left;
		display: inline;
		margin: 0 0 15px 15px;
		padding: 10px 10px 12px 10px;
		}
		
	#twitter li.retweet{	
		background: url("../images/retweet.png") no-repeat scroll right top #27C6D6;
		}
		
	#twitter li:after{
		background: url("../images/tweet.png") no-repeat scroll 0 0 transparent;
    	bottom: -11px;
    	content: "";
    	height: 11px;
    	left: 10px;
    	position: absolute;
    	width: 11px;
		}
		
		#twitter li a{
			color: #0D6068;
			}
			
		#twitter li a:hover{
			color: #0D6068;
			}