@charset "utf-8";

/* set up the fonts */
body{
	font-family:Verdana, sans-serif;
}
h1,h2,h3,h4{
	font-family:Georgia, serif;
}

/*style a few links */

.box {
	float: left;
	margin: 6px;
	padding: 10px;
	width: 285px;
	height: 480px;
	border: 1px solid black;
	background-color: white;
  }
.box a:hover{
	text-decoration:underline;
}

/* position the content */
.wrapper {
	margin: 0 auto;
	width: 960px;
	padding: 0 10px;
  }

/* style the header and footer */
#footer, #header{
	float:left;
	clear:both;
	padding: 10px;
	text-align:center;
	width:100%;
}

/* create the floating boxes */
.box {
	float: left;
	margin: 6px;
	padding: 10px;
	width: 285px;
	height: 480px;
	border: 1px solid black;
	background-color: white;
  }
/* style the box content */ 
.box img{
	width: 280px; /* alternatively set the image width in your HTML */
}
.box h3, .box p{
	text-align:center;
}

#content {
	float: left;
	width: 100%;
	background-color: #F0ECEC;
  }

  @media screen and (max-width: 640px) {
	.wrapper {
	  width: 100%;
	}
  
	.box {
	  width: 90%;
	  height: auto;
	  float: none;
	  margin: 10px auto;
	}
  
	.box img {
	  width: 100%;
	}
  
	h1, h2, h3, h4, p {
	  word-wrap: break-word;
	}
  
	#header {
	  padding: 0;
	}
}