@import url('https://fonts.googleapis.com/css?family=Arimo');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');

body { font-family: 'Arimo', Arial, sans-serif; font-size:1em; background-color:#f16334; }

h1 { margin:0.35em 0; padding:0; font-size:3.5em; }
h2 { margin:0.3em 0; padding:0; font-size:2em; }

.left { float:left; }
.right { float:right; }

#menuBar { background-color:#f16334; color:white; }
#menuBar img { vertical-align:middle; }
nav#menu { display:flex; padding-left:2em; align-items:center; }
nav#menu a, nav#mobileMenu a { padding:0.5em; vertical-align:middle; color:white; text-decoration:none; font-size:1.6em; text-transform:uppercase; letter-spacing:-1px; }
nav#menu #logo { padding-right:1.5em; }

nav#mobileMenu { background:black; }
nav#mobileMenu a { display:block; text-align:center; line-height:2em; padding:0; }

#mobileMenuLink { margin: 0 2em 0 auto; }

footer { background-color:#f16334; min-height:300px; padding:2.5em 1em; color:white; }

article { background-color:white; min-height:500px; text-align:left; padding:0 0 3em 0; }
div.contentWrapper { max-width:900px; margin:0 auto; padding:3em 1em 0 1em; }

#deIntro { background-color:white; margin:0 0 -3em 0; }
#dePortrait1 { max-height:650px; float:right; padding:0 2em 0 0; }
#deAbout { min-height:500px; max-width:450px; display:flex; align-items:center; justify-content:center; }
#deIntro strong { font-size:1.6em; }
#deAbout p { font-size:1.2em; }

h1.title { display:block; color:#f16334; font-size:3.0em; font-weight:bold; text-transform:uppercase; }
h2 { display:block; }

div.contentBox { background-color:white; margin:0 auto; min-width:300px; max-width:600px; padding:1em 2em 2em 1.5em; text-align:center; }
div.contentBox .icon64 { padding:10px; }
div.contentBox h2 { color:#f16334; text-transform:uppercase; font-size:2.2em; font-weight:normal; }

div.buttonWhite { display:inline-block; color:#f16334; border:1px solid #f16334; text-align:center; text-transform:uppercase; font-size:1.1em; font-weight:700; padding:1em 2em; }
div.buttonWhite:hover { cursor:pointer; color:white; background-color:#f16334; }

input[type="submit"] { background-color:white; color:#f16334; border:1px solid #f16334; text-align:center; text-transform:uppercase; font-size:1.1em; font-weight:700; padding:1em 2em; }
input[type="submit"]:hover { cursor:pointer; color:white; background-color:#f16334; }

#copyright { text-align:center; font-size:0.8em; color:white; border-top:1px solid #f38662; padding:1em 2em; margin-top:3em; }

div.padded { padding:1em; }

form.box { border:1px solid #f16334; padding:2em; }

div.infoMessage { color:white; font-size:1.5em; font-weight:bold; text-align:center; background-color:#3477f1; padding:1em 2em; }

img.gravatar { border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }

div.post { margin:0 0 3em 0; }
div.post img { max-width:100%; }

div.postComment { border:1px solid #f0f0f0; background-color:#fff4f1; border-radius:5px; margin:1em 0; padding:1em 2em; }
div.postComment .date { font-size:0.8em; color:#444; font-weight:bold; }
div.postComment .avatar { margin:0 0 0.7em 0; }

blockquote { background-color:#f5f5f5; padding:1.5em 2em; border-radius:5px; }

@media (max-width: 768px) {
	#dePortrait1 { display:none; }
	#dePortrait2 { display:block !important; max-width:400px; margin:0 auto; }
	#deAbout { display:block; min-height:300px; max-width:500px; margin:0 auto; padding-bottom:3em; }

	input[type="text"], textarea { min-width:90% !important; }
	
	#menuLinks { display:none !important; }
	#mobileMenuLink { display:block !important; }
}