body { background-color: #FFF !important; }

.headline {
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	font-weight: 300;
	color: #333;
	margin-bottom: 20px;
	line-height: 1.2em;
}

.blurb {
	font-family: 'Arimo', sans-serif;
	font-size: 18px;
	color: #333;
	margin: 20px 0 40px 0;
}

p {
	font-family: 'Arimo', sans-serif;
	font-size: 14px;
	color: #333;
}

.btn {
	background-color: #23538e;
	padding: 10px 15px;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	font-weight: 100;
	color: #FFF;
	border-radius: 10px;
	display: inline-block;
	text-shadow: 1px 1px #000000;
}
.btn:hover {
	color: #FFF;
	background-color: #000;
	cursor: pointer;
}

.credits {
	font-family: 'Arimo', sans-serif;
	font-size: 12px;
	color: #999;
	margin-top: 10px;
}

.map {
	width: 620px;
	height: 413px;
	background-image: url(../images/whitehouse1.jpg);
	position: relative;
}

.south img {
	position: absolute;
	bottom: 56px;
	left: 295px;
	cursor: pointer;
}

.south p {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 20px;
    left: 276px;
		cursor: pointer;
}

.south h2 {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 64px;
    left: 306px;
		cursor: pointer;
}

.north img {
	position: absolute;
	bottom: 319px;
	left: 325px;
	cursor: pointer;
}

.north p {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 314px;
  left: 251px;
	cursor: pointer;
}

.north h2 {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 326px;
  left: 336px;
	cursor: pointer;
}

.treasury img {
	position: absolute;
	bottom: 273px;
	left: 538px;
	cursor: pointer;
}

.treasury p {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 226px;
  left: 482px;
	cursor: pointer;
}

.treasury h2 {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 281px;
  left: 549px;
	cursor: pointer;
}

.east img {
	position: absolute;
	bottom: 260px;
	left: 328px;
	cursor: pointer;
}

.east p {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 277px;
  left: 315px;
	cursor: pointer;
}

.east h2 {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 267px;
  left: 339px;
	cursor: pointer;
}

.security img {
	position: absolute;
	bottom: 36px;
	left: 151px;
	cursor: pointer;
}

.security p {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 0px;
  left: 88px;
	cursor: pointer;
}

.security h2 {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 43px;
  left: 162px;
	cursor: pointer;
}

.gate img {
	position: absolute;
	bottom: 130px;
	left: 434px;
	cursor: pointer;
}

.gate p {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 87px;
  left: 399px;
	cursor: pointer;
}

.gate h2 {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 137px;
  left: 445px;
	cursor: pointer;
}

.unknown img {
	position: absolute;
	bottom:260px;
	left: 297px;
	cursor: pointer;
}

.unknown p {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 201px;
  left: 270px;
	cursor: pointer;
}

.unknown h2 {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 268px;
  left: 307px;
	cursor: pointer;
}

.capitol img {
	position: absolute;
	bottom:353px;
	left: 107px;
	cursor: pointer;
}

.capitol p {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 315px;
  left: 97px;
	cursor: pointer;
}

.capitol h2 {
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 372px;
  left: 125px;
	cursor: pointer;
}

.street p {
	color: white;
	font-size: 10px;
	position: absolute;
	bottom: 352px;
    left: 255px;
		cursor: pointer;
}

.map p {
	text-shadow: 1px 1px #121212;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;

}

.map h2 {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #aa000d;
	font-size: 14px;

}

.map img {
	width: 5%;
}

.capitol img {
	width: 7%;
}

.location {
	background-color: #aa000d;
	color: #fff;
	padding: 10px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 18px;
	max-width: 620px;
}

.person img {
	border: 2px #ccc solid;
    width: 200px;
		height: 200px;
}


.person {
	padding: 0px;
	vertical-align: top;
	display: block;
	width: 620px;

}

.images {
	display: inline-block;
	vertical-align: top;
	width: 200px;
	height: 200px;
	margin-top: 10px;
}



.content {
	display: inline-block;
}

.name , .date , .area {
	font-family: 'Roboto', sans-serif;
	font-size: 26px;
	font-weight: 300;
	color: #333;
	margin-bottom: 10px;
	margin-top: 10px;
	line-height: 1.2em;
	padding: 5px;
}

.date {
	font-size: 18px;
}

.area {
	font-size: 14px;
}

.details {
	font-size: 13px;
	font-family: 'Arimo', sans-serif;
	padding: 5px;

}

.mobile {
	display: none;
}

@media (max-width: 900px ) {

}

@media (max-width: 500px ) {

	.desktop {
		display: none;
	}
	.mobile {
		display: inherit;
	}

	.person img {
		border: 2px #ccc solid;
	    width: 100%;
			height: auto;
	}

	.images {
		display: inline-block;
		vertical-align: top;
		width: 100%;
		height: auto;
		margin-top: 10px;
	}

}