* { font-family: 'Open Sans', Arial, sans-serif; margin: 0; padding: 0; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
.logo { float: right; margin: 0 0 1rem 1rem; max-width: 250px; }
body  { background: #ddd; }
header { width: 100%; background: #dddddd; position: relative; }
.content { width: 100%; background: #ffffff; }
.mobile, .tablet { display: none; }
.typing {
    overflow: hidden;
    white-space: nowrap;
    animation: typingAnim 5s steps(50);
}
footer {
	width: 100%; background: #dddddd; font-size: 0.7em; text-align: center;
	padding: 0.7em 0; color: #ffffff;
	text-shadow: 0px 0px 2px black;
}
ul li { margin-left: 2em; }
.content section { padding: 0.5em 1em; background: #fff; }
.content section:nth-child(2n) { background: #eee; }
@media (max-width: 600px) { /* Mobile-only styles */
	header { height: 12.5vw; background: #66818e url('header-mobile.jpg') center bottom; background-repeat: no-repeat; background-size: contain; background-position: center; }
	.content section { padding: 1em; }
	.desktop, .tablet { display: none; }
	.mobile { display: block; }
}
@media (max-width: 960px) { /* Tablet & mobile styles */
	footer { background: url('footer-960x100.jpg') center top; }
	.logo { max-width: 40%; }
}
@media (min-width: 601px) and (max-width: 960px) { /* Tablet-only styles */
	header { background: url('header-960x100.jpg') right top; height: 100px; }
	.mobile, .desktop { display: none; }
	.tablet { display: block; }
}
@media (min-width: 601px) { /* Desktop & tablet styles */
	header { height: 100px; }
	footer { background: url('footer-960x100.jpg'); }
}
@media (min-width: 961px) { /* Desktop-only styles */
	body { text-align: center; }
	#wrapper { width:960px; text-align: left; margin: 0px auto; box-shadow: 0px 0px 5px black; }
	header { height: 200px; background: url('header-960x200.jpg'); }
	.content { width: 960px; }
}
@keyframes typingAnim{
    from {width: 0}
    to {width: 60%}
}
p { margin: 1em 0; }