	.contentBanner {
		max-width:1600px;
		height: 650px;
	    position: relative;
		background-position:center;
		background-size:cover;
		background-repeat:no-repeat;
		overflow: hidden;
	}
	
	.container {
	  position: relative;
	}
	
	.round {
	  position: absolute;
	  width: 1000px;
	  height: 650px;
	}
	.content-winning-the-genius-transit-challenge .title {
	  color: #fff;
	  padding: 50px 20px;
	  position: absolute;
	  z-index: 300;
	}
	
	.content-winning-the-genius-transit-challenge .hed {
		color: #fff;
	  margin: 260px 40px 40px 40px;
	  width: 350px;
	  font-size: 109.5px;
	  line-height: 70%;
	  text-transform: uppercase;
	  margin-bottom: -8px;
	}
	
	.hed span {
	    font-size: 55px;
	}
	
	.content-winning-the-genius-transit-challenge .dek {
	  padding-left: 40px;
	  width: 330px;
	  font-size: 21px;
	  color: #ec9632;
	  font-family: 'Yanone Kaffeesatz', sans-serif;
	}
	
	.green {
	  background-image: url("https://media.giphy.com/media/QVQmETeV37Rq8/giphy.gif");
	  width: 1000px;
	  height: 500px;
	  overflow: hidden;
	  opacity: 0.75;
	  z-index: 200;
	  mix-blend-mode: screen;
	}
	
	.blue {
	  background-image: url("/bostonia/wpassets/issues/fall18/man-with-a-plan/images/banner-hero-image.jpg");
	  background-color: black;
	}
	
	.readMore {
		margin-top: 40px;
	}
	
	.readMore a:hover {
		background-color: #fff;
	}
	
	.entry .readMore {
		margin-left: 30%;
	}
	
	.readMore a {
		background: #f1aa2f;
		box-shadow: 6px 6px 0 #DC4D4D;
	    color: #000 !important;
	    font-family: 'Raleway', sans-serif;
	    padding: 15px;
	    border-radius: 10px;
	    font-size: 16px;
	    font-weight: 600;
	}
	
	a.button, a.button:visited {
		color: #000000;
		background: #d0e03d;
	}
	
	a.button:hover {
		color: #fff;
		background-color: #d0e03d;
	}
	
	.firstcharacter {
	  color: #f1aa2f;
	  text-shadow:17px 17px 0 #DC4D4D, 16px 16px 0 #DC4D4D, 15px 15px 0 #DC4D4D, 14px 14px 0 #DC4D4D, 13px 13px 0 #DC4D4D, 12px 12px 0 #DC4D4D, 11px 11px 0 #DC4D4D, 10px 10px 0 #DC4D4D, 9px 9px 0 #DC4D4D, 8px 8px 0 #DC4D4D, 7px 7px 0 #DC4D4D, 6px 6px 0 #DC4D4D, 5px 5px 0 #DC4D4D, 4px 4px 0 #DC4D4D, 3px 3px 0 #DC4D4D, 2px 2px 0 #DC4D4D, 1px 1px 0 #DC4D4D;
	  float: left;
	  font-family: Georgia;
	  font-size: 100px;
	  line-height: 60px;
	  padding-top: 5px;
	  padding-right: 30px;
	  margin-left:-10px;
	}

@media only screen and (max-width: 900px) {

	.contentBanner {
		max-width: 950px;
		max-height: 650px;
	}
	}

@media only screen and (max-width: 700px) {

	.blue {
		background-position:right top;
	}
	
	.green {
	 	-webkit-transform: scaleX(-1);
	    transform: scaleX(-1);
	    margin: 20px 0 0 -390px;
	    }
	}

@media only screen and (max-width: 650px) {
	 .contentBanner {
		max-width:550px;
		max-height: 620px;
	}
	
	.blue {
		height: 650px;
		margin-top:-30px;
	}
	}

@media only screen and (max-width: 500px) {

	.contentBanner {
		padding:0;
	}
	
	.blue {
		margin-left: -220px;
	}
	.green {
		margin: 160px 0 0 -390px;
	}
	.hed {
		font-size: 95px;
		text-shadow: 2px 2px 5px #000;
		margin: 270px 5px 0 0;
		text-align: right;
	}
	
	.hed span {
		font-size: 45px;
	}
	.dek {
		background-color: black;
		padding: 5px 5px 5px 10px;
		font-size: 18px;
		text-align:right;
	}
	
		.readMore {
			margin-top: 30px;
		}
	}


