/* 
	===== TEMPLATE =====
	<!-- Callout - Profile -->
	<section class="callout_profile">
		<div class="portrait">
			<img alt="Jessica Wagner" src="~/media/6F34DD2978FC47AAB10884E18F8E83A3.ashx" />
		</div>
		<div class="summary">
			<p>
				“I chose Temple / St.&nbsp;Luke’s because I felt like the program provided an unparalleled opportunity to become an integral part of the health care system as a medical student.  The small class size, tight-knit community and state-of-the-art hospital present a unique setting in which to begin a lifelong career.”
				<br />
				<em>&ndash; Jessica Wagner, Class of 2016</em>
			</p>
		</div>
	</section>
	===================
*/

.callout_profile { background-color: #EDF4FB; padding: 15px; margin-bottom: 15px; }
.callout_profile .portrait { display: inline-block; padding-right: 15px; }
.callout_profile .summary { display: inline-block; max-width: 82%; vertical-align: top; }
.callout_profile .portrait img { width: 100%; height: auto; max-width: 120px; border: 1px solid #5f5f5f; }
.callout_profile .summary p, 
.callout_profile .summary ul, 
.callout_profile .summary ul li:last-of-type { margin: 0px; }
.callout_profile .summary ul { margin-top: 5px; }
.callout_profile .summary p em { display: block; margin-top: 15px; }

/* --- --- --- DESKTOP --- --- --- */
@media(max-width : 1199px){
.callout_profile .summary { max-width: 78%; }
}

/* --- --- --- TABLET --- --- --- */
@media(max-width : 991px){
.callout_profile .summary { max-width: 70%; }
}

/* --- --- --- MOBILE --- --- --- */
@media(max-width : 767px){
.callout_profile .portrait { padding-right: 0px; display: block; }
.callout_profile .portrait img { margin-bottom: 15px; margin-left: auto; margin-right: auto; display: block; }
.callout_profile .summary { max-width: 100%; }
}