html {font-size: 1em;}

body {
  background-color: white;
  font-family: 'open sans', sans-serif;
  font-weight: 400;
  line-height: 1.45;
  color: #171717;
}


h1, h2, h3, h4 {
 	font-weight: inherit;
 	line-height: 1.2;
}

h1 {
 	font-size: 1.827em;
	margin: 0;
	width: 100%;
	white-space: nowrap;
	padding-left: 0.25rem;
	overflow: hidden;
}

h2 {font-size: 1.827em;}

p {
	margin-bottom: 1.3em;}

h2, p { padding: 0 0.25rem;}

.small {font-size: 0.707em;}

a {color:#579ED6;
	text-decoration: none;}

a:hover {text-decoration: underline;}


header.flexcontainer {display:flex;
	border-bottom: #171717 0.25rem solid;
	align-items: center;}

.logo {
	padding: 0.25rem;
	border-right: #171717 0.25rem solid;
	line-height: 0;
}

.logo img {margin: 0;
	width: 3em;}

.hero {height: 10em;
	background-image: url("hero.jpg");
	background-position: bottom;
	background-size:100% ;
	border-bottom: #171717 0.25rem solid;
}


main {
	border: #171717 solid 0.25em;
	background-color: #fbf9f1;
}

article img {width: 100%;
	padding: 1rem 0.5rem;
	box-sizing: border-box;}

img.profile {
	width: 10rem;
	float: left;
	padding: 0;
	-webkit-shape-outside: circle(50% at 50% 50%);
	shape-outside: circle(50% at 50% 50%);
	margin: 1rem;
}

footer{	border-top: #171717 0.25rem solid;}

/*-----------------------------------------------------------650px--*/
@media screen and (min-width: 650px) {
main {margin: 3.77rem;}

h2, p, article img {padding: 0 3.77rem;}
}

/*-----------------------------------------------------------100px--*/
@media screen and (min-width: 1000px){

body {max-width: 88.75rem;
	margin: 0 auto;
}

article .flexcontainer {display:flex;
	align-items: baseline;}

.flexitem {width: 50%;}

.hero {background-position: 50% 90%;}

article img {max-width: 30rem;}
}