/*

--- CLASSES ---
To be added inside the first DIV
---------------

	callout - drops default St. Luke's yellow background color over the specified container
	rectangle - Max width of 290px;
	right_side - Pull container to the right;
	left_side - Pull container to the left;
	greenBox - GME color
	
	
--- ELEMENTS ---
HTML templates for desired content
---------------
1. Pick desired element
2. Copy and paste it onto the page
3. Update CAPITILIZED_TEXT_WITH_DASHES to corresponding content
4. Preview to make sure everything is working and linking correctly

	
	<!-- CALLOUT - CONTENT FLOAT BOX -->
	<div class="callout rectangle right_side">
		<img alt="IMAGE_DESCRIPTION" src="IMAGE_LINK" />
		<p>TEXTUAL_CONTENT</p>
	</div>
	
	
	<!-- CALLOUT - VIDEO -->
	<div class="row callout video">
		<div class="col-xs-12 iframe">
			<iframe src="IFRAME_EMBEDDED_LINK"></iframe>
		</div>
		<div class="col-xs-12 col-sm-10 title">
			<h2>VIDE_TITLE</h2>
		</div>
		<div class="col-xs-12 col-sm-2 link">
			<a href="LINK_TO_THE_VIDEO" target="_blank" rel="noopener noreferrer">Watch</a>
		</div>
	</div>
	
	
	<!-- CALLOUT - PDF -->
	<div class="row pdf">
		<div class="col-xs-12 col-sm-9 callout_pdf_title">
			<p class="quote_link margin_0">
				TEXT_BEFORE_PDF_GOES_HERE
				<a href="LINK_TO_PDF" title="PDF_TITLE" target="_blank" rel="noopener noreferrer">
					PDF_TITLE
				</a>
			</p>
		</div>
		<div class="hidden-xs col-sm-3 callout_pdf_image">
			<a href="LINK_TO_PDF" title="PDF_TITLE" target="_blank" rel="noopener noreferrer">
				<img alt="PDF_TITLE" src="IMAGE_LINK_GOES_HERE" />
			</a>
		</div>
	</div>
	
	
	<!-- CALLOUT - PERSON -->
	<div class="row callout text_image">
		<div class="col-xs-12 col-md-2 image">
			<a href="LINK_TO_PERSON_OR_FAD" target="_blank" rel="noopener noreferrer">
				<img class="doc_img center-block" alt="IMAGE_TITLE" src="PERSON_IMAGE_LINK" />
			</a>
		</div>
		<div class="col-xs-12 col-md-10 text">
			<a href="LINK_TO_PERSON_OR_FAD" target="_blank" rel="noopener noreferrer">
				<span>PERSON_NAME_AND_TITLE</span>
				<br />
				<em>
					PERSON_POSITION
				</em>
			</a>
			<p>
				INSERT_DESCRIPTION_OR_TEXT_HERE
				<blockquote>
					“INSERT_QUOTE_HERE”
					<br>
					<br>
					– PERSON_NAME_AND_TITLE
				</blockquote>
			</p>
		</div>
	</div>
	
*/

/* DEFAULT */
.callout { margin: 0px auto 15px; padding: 15px; background-color: #fef6d5; }
.callout *:last-child,
.callout ul li:last-child { margin-bottom: 0px; }
.callout img { height: auto; width: auto; max-width: 100%; }
.callout > img { display: block; margin: 0px auto 15px; }
.callout .image img { border: 1px solid #fdd100; }


/* ELEMENT - FLOAT BOX */
.callout.rectangle { max-width: 290px; }
.callout.right_side { float: right; margin-left: 30px; margin-bottom: 15px; }
.callout.left_side { float: left; margin-right: 30px; margin-bottom: 15px; }

/* ELEMENT - VIDEO */
.callout.video .iframe { position: relative; padding: 56.25% 0px 0px 0px; margin-bottom: 15px; }
.callout.video .iframe iframe { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; border: 1px solid #FDD100 !important; }
.callout.video .title { padding: 0px; }
.callout.video .title h2 { font-family: "UniversLTW01-67BoldCn"; font-size: 24px; color: #00427a; line-height: 26px; margin: 0px; }
.callout.video .link { padding-right: 0px; }
.callout.video .link a { display: block; background-color: #fdd100; text-align: center; text-decoration: none !important; color: #00427a; font-family: "UniversLTW01-67BoldCn"; font-size: 18px; line-height: 20px; padding: 15px 0px; text-transform: uppercase; }

/* ELEMENT - PDF */
.pdf { background-color: #ECFBE3; position: relative; margin-left: 0px; margin-right: 0px; margin-top: 15px; margin-bottom: 15px; }
.callout_pdf_title { margin-top: 2%; margin-bottom: 3%; }
.pdf p.quote_link { margin-bottom: 0px; text-align: left; }
.pdf p.quote_link a { font-family: "Univers LT W01 65 Bold"; text-decoration: none; border-bottom: 1px solid #5f5f5f; text-align: center; }
.callout_pdf_image { position: absolute; right: -15px; bottom: -12%; }

/* ELEMENT - PERSON */
.callout.text_image .image { padding: 0px; }
.callout.text_image .text > *:last-child { margin-bottom: 0px; }
.callout.text_image .text a { font-family: "Univers LT W01 65 Bold"; text-decoration: none; }
.callout.text_image .text a span { text-decoration: underline; }
.callout.text_image .text blockquote { padding: 0px 0px 0px 15px; border-left: 3px solid #fdd100; color: #5f5f5f; font-size: 18px; line-height: 22px; font-family: "Univers LT W01_55 Obliq1475962"; }

/* COLOR - GME */
.greenBox { background: #ECFBE3; }
.callout.video.greenBox .link a { background-color: #80c342; color: #fff; }
.callout.greenBox .image img,
.callout.video.greenBox .iframe iframe { border: 1px solid #80c342 !important; }
.callout.text_image.greenBox .text blockquote { border-left: 3px solid #80c342; }

/* COLOR - WOMENS */
.purpleBox { background: #f1e7f2; }
.callout.video.purpleBox .link a { background-color: #ae75b2; color: #fff; }
.callout.purpleBox .image img,
.callout.video.purpleBox .iframe iframe { border: 1px solid #ae75b2 !important; }
.callout.text_image.purpleBox .text blockquote { border-left: 3px solid #ae75b2; }



/* --- DESKTOP --- */
@media (max-width : 1199px) {


}


/* --- TABLET --- */
@media (max-width : 991px) {


}


/* --- MOBILE --- */
@media (max-width : 767px) {
	
/* ELEMENT - FLOAT BOX */
.callout.rectangle { max-width: 100%; }
.callout.right_side,
.callout.left_side { float: none; margin-right: 0px; margin-left: 0px; }

/* ELEMENT - VIDEO */
.callout.video .link { padding-left: 0px; }
.callout.video .title h2 { margin-bottom: 15px; }

/* ELEMENT - PERSON */
.callout .image img { margin-bottom: 10px; }

}