@font-face {
	font-family: Martel;
	src: url(http://newsinteractive.post-gazette.com/includes/fonts/martel/Martel-Light.ttf) format('truetype');
	font-weight: 200;
}
@font-face {
	font-family: Martel;
	src: url(http://newsinteractive.post-gazette.com/includes/fonts/martel/Martel-Regular.ttf) format('truetype');
	font-weight: 400;
}
@font-face {
	font-family: Martel;
	src: url(http://newsinteractive.post-gazette.com/includes/fonts/martel/Martel-Bold.ttf) format('truetype');
	font-weight: 700;
}
@font-face {
	font-family: Martel;
	src: url(http://newsinteractive.post-gazette.com/includes/fonts/martel/Martel-Heavy.ttf) format('truetype');
	font-weight: 900;
}

		#related {
			font-family: 'proxima-nova', Helvetica, Verdana, Arial, sans-serif;
			font-size: 16px;
    		line-height: 22px;
   			padding: 10px;
		}
		
		#related text {
			width: 100%;
			height: auto;
			display: inline-block;
			text-align: center;
			/*margin-bottom: 10px;*/
		}
		
		#related pglogofull {
			background: url('../img/pglogo-full.png') center center no-repeat;
			background-size: contain;
			width: 180px;
			height: 22px;
    		display: inline-block;
    		margin: 0 8px;
		}
		
		#related divide {
		    width: 400px;
		    height: 1px;
		    display: block;
		    margin: 7px auto 10px auto;
		    background: rgba(0, 0, 0, 0.3);
		}
		
		#related boxes {
			display:flex;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    justify-content: center;
		    align-content: center;
		    align-items: flex-start;
		}
		
		#related previewbox {
		    width: 250px;
		    height: 200px;
		    margin: 0 5px;
		    background-size: cover !important;
		    border-radius: 3px;
		    display: flex;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    justify-content: center;
		    align-content: center;
		    align-items: flex-end;
		    transition: all cubic-bezier(0.77, 0, 0.175, 1) .5s;
		    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.50);
		}
		
		#related previewbox:hover {
			-webkit-transform: scale(1.01, 1.01);
    		transform: scale(1.01, 1.01);
    		opacity: .75;
		}
		
		#related previewbox h2 {
		    width: 100%;
		    font-size: 25px;
		    color: #fff;
		    text-align: center;
		    margin-bottom: 0;
		    font-family: 'proxima-nova', Helvetica, Verdana, Arial,sans-serif;
		    font-family: 'Martel', Georgia, serif;
		    font-weight: 700;
		    line-height: 28px;
		    text-shadow: 1px 1px 1px #000;
		    background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.65));
		    padding-bottom: 7px;
		    padding-top: 15px;
		}
		
		#related a {
		    width: 250px;
		    height: auto;
		    margin: 0 5px;
		}
		
		#related .desctext {
		    color: #000;
		    font-size: 15px;
		    line-height: 18px;
		    padding: 10px 0 0 5px;
		}
		
@media only screen and (max-width: 1100px) {
	#related boxes {
		flex-wrap: wrap;
	}
}

@media only screen and (max-width: 430px) {
	#related text {
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	    justify-content: center;
	    align-content: center;
	    align-items: center;
	}
	
	#related pglogofull {
		width: 100%;
		margin: 5px 8px;
	}
	
	#related divide {
		width: 100%;
	}
	
	#related previewbox, #related a {
		width: 300px;
	}
}