@font-face { font-family: robotolight; src: url('../fonts/Roboto-Light.ttf'); }
@font-face { font-family: robotocondensedbold; src: url('../fonts/RobotoCondensed-Bold.ttf'); }

body { font-family: robotolight;  -webkit-font-smoothing:subpixel-antialiased;  -webkit-touch-callout: none; font-size:1.6em; color: #baabb2; }

article #intro { margin:0.5em; color: #503c55; }

article { margin-top:0; margin-left:1em; margin-right:0.5em; margin-bottom:3em; color: #503c55;  line-height:1.4em; clear: both;}

p:first-child:first-letter { font-size:3.3em; float:left; padding: 0.1em 0.15em 0em 0.25em; color:#503c55; line-height:1em; }

h1,h3 {color: rgb(244, 66, 26); margin-left:0.5em; margin-top:1em;clear: both;}

.items {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-top: -10px;
	clear: both;
}
.items .item {
	flex: 1 0 10em;
  box-sizing: border-box;
  background: #e0ddd5;
  color: #171e42;
  padding: 10px;
	margin-left: 10px;
	margin-top: 10px;
}


img #headerImage {
	width:100%
	margin-top:0.5em;
}

img#reviewimage{
		float:left;
		margin:1em;
		width:100px;
    }
	
	#nav {width:130px;}

@media screen and (max-width: 320px) {
    img {
		float:left;
		margin:0.4em;
		width:50%;
    }
	
	#nav {width:130px;}
}

@media screen and (max-width: 640px) and (min-width: 321px) {
    img {
		float:left;
		margin:0;
		padding:0;
		width:100%;
		clear:both;
    }

@media screen and (min-width: 641px) {
    img {
		float:left;
		margin:0;
		padding:0;
		width:100%;
		clear:both;
    }