@charset "utf-8";

header {
	background-color: #000;
}


#logo a {background-image:url(/images/blog/webydo/logo.png);}

#mainNav a, h1 {
	color: #FFF;
}

#mainNav a:hover {
	color: #02b5cf;
}


#content {
	color: #000;
}	


h2 {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #000;
	font-size: 2em;
	padding: 30px 12px 10px 12px;
	margin-bottom: 20px;
	text-align: center;
}

h3 {
	color: #000;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

article {
	padding: 0 14px;
	max-width: 1100px;
	margin: 0 auto;
}



figure {
	padding-bottom: 30px;
}

figure img {
	width: 98%;
	margin: 20px auto 0 auto;
	max-width: 1100px;
	-webkit-box-shadow: 2px 2px 7px rgba(0,0,0,.22), -2px -2px 7px rgba(0,0,0,.22);
	-moz-box-shadow: 2px 2px 7px rgba(0,0,0,.22), -2px -2px 7px rgba(0,0,0,.22);
	box-shadow: 2px 2px 7px rgba(0,0,0,.22), -2px -2px 7px rgba(0,0,0,.22);
}



article a {
	color: #02b5cf;
}

article a:hover {
	color: #08ddfc;
}

#toTop, #mainNav a#pull {
	background-color: #595c5c;
}

footer {
	background-color: #000;
}

footer p, footer h4 {
	color: #FFF;
}


@media screen and (min-width: 48em) { /* 768 and up */
h2 {
	font-size: 2.5em;
	padding: 30px 0 10px 0;
}

h3 {
	font-size: 1.7em;
	padding: .1em 0 .3em 0;
}




}


@media screen and (min-width: 60em) { /* 1024 and up */
h2 {
	font-size: 2.8em;
}	
	

}

@media screen and (min-width: 75em) { /* 1200 and up */
h2 {
	font-size: 3.5em;
}



}


@media screen and (max-width: 47.5em) { /* mobile nav */
#mainNav li {
	background-color: #595c5c;
}

#mainNav li:hover {
	background-color: #02b5cf;
}

img.left {
	float: none;
	margin: 0 auto 30px auto;
display: block;
}
}