<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY copy   "&#169;">
<!ENTITY nbsp "&#xa0;">
]>
<!--
07/26/2016	-	Don't display line if only one row.
07/26/2016	-	Center 1st column on 1st Row if not 2nd column 
-->

<xsl:stylesheet version="3.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:xs="http://www.w3.org/2001/XMLSchema"
	xmlns:ou="http://omniupdate.com/XSL/Variables"
	xmlns:fn="http://omniupdate.com/XSL/Functions"
	xmlns:ouc="http://omniupdate.com/XSL/Variables"
	xmlns="http://www.w3.org/1999/xhtml"
	exclude-result-prefixes="ou xsl xs fn ouc">

	<xsl:import href="common.xsl"/>

	<xsl:template name="common-layout">
 			<xsl:call-template name="common-header" /> 
			<xsl:call-template name="page-content" />
 			<xsl:call-template name="common-footer" /> 
	</xsl:template>

	<xsl:template name="page-content">	
		<xsl:param name="updated-date" select="$ou:modified" />
		<xsl:variable name="banner_type_1" select="banner-items/banner-1/ouc:div[@label='display-type-1']" />
		<xsl:variable name="banner_type_2" select="banner-items/banner-2/ouc:div[@label='display-type-2']" />
		<xsl:variable name="banner_type_3" select="banner-items/banner-3/ouc:div[@label='display-type-3']" />
		<xsl:variable name="video_banner_1" select="banner-items/banner-1/ouc:div[@label='banner-video']" />
		<xsl:variable name="video_banner_2" select="banner-items/banner-2/ouc:div[@label='banner-video']" />
		<xsl:variable name="video_banner_3" select="banner-items/banner-3/ouc:div[@label='banner-video']" />
		
		<xsl:variable name="slider-title-1" select="slider-items/slider-1/ouc:div[@label='slider-title-1']" />
<xsl:variable name="slider-title-2" select="slider-items/slider-2/ouc:div[@label='slider-title-2']" />
<xsl:variable name="slider-title-3" select="slider-items/slider-3/ouc:div[@label='slider-title-3']" />
<xsl:variable name="slider-title-4" select="slider-items/slider-4/ouc:div[@label='slider-title-4']" />
<xsl:variable name="slider-title-5" select="slider-items/slider-5/ouc:div[@label='slider-title-5']" />
		
		<xsl:variable name="announcement-1" select="slider-items/slider-1/ouc:div[@label='slider-desc-1']" />
		<xsl:variable name="announcement-2" select="slider-items/slider-2/ouc:div[@label='slider-desc-2']" />
		<xsl:variable name="announcement-3" select="slider-items/slider-3/ouc:div[@label='slider-desc-3']" />
		<xsl:variable name="announcement-4" select="slider-items/slider-4/ouc:div[@label='slider-desc-4']" />
		<xsl:variable name="announcement-5" select="slider-items/slider-5/ouc:div[@label='slider-desc-5']" />
		
        <div id="HomeSlider" class="progress-carousel carousel slide with_video" data-interval="false" role="region" aria-label="Marquee Image Slider">
	
					<xsl:choose> <!-- Banner 1-->
						<xsl:when test="$banner_type_1 ='Image'">
							<div class="carousel-item active">
								<img src="{banner-items/banner-1/ouc:div[@label='banner-image-1']}" alt="{banner-items/banner-1/ouc:div[@label='banner-image-alt-1']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_1 ='Video'">
							<div class="carousel-item active">
								<div id="video_1" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
					<xsl:choose> <!-- Banner 2-->
						<xsl:when test="$banner_type_2 ='Image'">
							<div class="carousel-item">
								<img src="{banner-items/banner-2/ouc:div[@label='banner-image-2']}" alt="{banner-items/banner-2/ouc:div[@label='banner-image-alt-2']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_2 ='Video'">
							<div class="carousel-item">
								<div id="video_2" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
					<xsl:choose> <!-- Banner 3-->
						<xsl:when test="$banner_type_3 ='Image'">
							<div class="carousel-item">
								<img src="{banner-items/banner-3/ouc:div[@label='banner-image-3']}" alt="{banner-items/banner-3/ouc:div[@label='banner-image-alt-3']}" class="w-100"/>
							</div>
						</xsl:when>
						<xsl:when test="$banner_type_3 ='Video'">
							<div class="carousel-item">
								<div id="video_3" class="carousel-video-item"></div>
							</div>
						</xsl:when>
						<xsl:otherwise>
						</xsl:otherwise>
					</xsl:choose>
				<!-- <xsl:if test="$video_banner != ''"> 
					<div class="carousel-item active">
						<div id="video"></div>
					</div>
					<div class="carousel-item">
						<img src="{banner-items/banner-1/ouc:div[@label='banner-image-1']}" alt="{banner-items/banner-1/ouc:div[@label='banner-image-alt-1']}" class="w-100"/>
					</div>
				</xsl:if>
				<xsl:if test="$video_banner = ''"> 
                <div class="carousel-item active">
                    <img src="{banner-items/banner-1/ouc:div[@label='banner-image-1']}" alt="{banner-items/banner-1/ouc:div[@label='banner-image-alt-1']}" class="w-100"/>
                </div>
				</xsl:if>
				
				<xsl:if test="$banner2 != ''"> 
				<div class="carousel-item">
					<img src="{banner-items/banner-2/ouc:div[@label='banner-image-2']}" alt="{banner-items/banner-1/ouc:div[@label='banner-image-alt-2']}" class="w-100"/>
				</div>
				</xsl:if>
				<xsl:if test="$banner3 != ''"> 
					<div class="carousel-item">
						<img src="{banner-items/banner-3/ouc:div[@label='banner-image-3']}" alt="{banner-items/banner-2/ouc:div[@label='banner-image-alt-3']}" class="w-100"/>
					</div>
				</xsl:if> -->
            
<xsl:choose>
     <xsl:when test="$banner_type_2 ='Image' or $banner_type_2 ='Video'">
					<a class="carousel-control-prev" href="#HomeSlider" role="button" data-slide="prev" onClick="pauseVideo()">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#HomeSlider" role="button" data-slide="next" onClick="pauseVideo()">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
					</xsl:when>
     <xsl:otherwise>
		  </xsl:otherwise>
   </xsl:choose>
			
			<!-- 
			<a class="carousel-control-prev" href="#HomeSlider" role="button" data-slide="prev" onClick="pauseVideo()">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#HomeSlider" role="button" data-slide="next" onClick="pauseVideo()">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
			-->
			
				
				
		</div>
		<!--             <hr class="transition-timer-carousel-progress-bar" /> -->
<script type="text/javascript" src="/js/youtubebackground.js"></script><script type="text/javascript">

				$('#video_1').YTPlayer({
					playerVars: {
					  controls: 0,
					  showinfo: 0,
					  branding: 0,
					  rel: 0
    				},
					fitToBackground: true,
					videoId: '<xsl:value-of select="$video_banner_1" />'
				});
				$('#video_2').YTPlayer({
					playerVars: {
					  controls: 0,
					  showinfo: 0,
					  branding: 0,
					  rel: 0
    				},
					fitToBackground: true,
					videoId: '<xsl:value-of select="$video_banner_2" />'
				});
				$('#video_3').YTPlayer({
					playerVars: {
					  controls: 0,
					  showinfo: 0,
					  branding: 0,
					  rel: 0
    				},
					fitToBackground: true,
					videoId: '<xsl:value-of select="$video_banner_3" />'
				});
			function pauseVideo()
			{
			/*
				if($('#video_1'))
				{
					var player1 = $('#video_1').data('ytPlayer').player;
					player1.pauseVideo();
				}
				if($('#video_2'))
				{
					var player2 = $('#video_2').data('ytPlayer').player;
					player2.pauseVideo();
				}
				if($('#video_3'))
				{
					var player3 = $('#video_3').data('ytPlayer').player;
					player3.pauseVideo();
				}
			*/
			}
</script>

<style type="text/css">
	
/** Apply Now **/

.apply-now-content-advancement {
    /*position: relative;*/
    background: #fff;
    padding: 15px 20px;
    margin-left: 0;

}

.apply-now-content-advancement .apply-now-advancement {
    max-width: 100%;
    padding: 0 6px;
    background-color: #ffffff;
    border-left: 4px solid #f8c23a;
}

.apply-now-content-advancement .apply-now-advancement h3 {
    font-size: 21px;
    text-transform: uppercase;
}

.apply-now-content-advancement .apply-now-advancement p {
    font-size: 12px;
}

.apply-now-content-advancement .apply-now-advancement .more-link {
    font-family: "Raleway-Bold";
    font-size: 12px;
    color: #000;
    text-transform: uppercase;
}

.apply-now-content-advancement .apply-now-advancement p,
.apply-now-content-advancement .apply-now-advancement h3,
.apply-now-content-advancement .apply-now-advancement .more-link {
    margin: 0;
    padding: 0;
    line-height: inherit;
}







@media (min-width: 768px) {


    .apply-now-content-advancement {
        margin-left: -15px;
        padding: 0;
        background: transparent;
    }
    .apply-now-content-advancement .apply-now-advancement {
        max-width: 247px;
        padding: 10px 20px;
        position: absolute;
        bottom: 50%;
        left: 15%;
    }
    .apply-now-content-advancement .apply-now-advancement p,
    .apply-now-content-advancement .apply-now-advancement h3,
    .apply-now-content-advancement .apply-now-advancement .more-link {
        line-height: inherit;
        font-size: 10.56px;
        padding: 0;
        margin: 0;
    }
    .apply-now-content-advancement .apply-now-advancement h3 {
        font-size: 18.48px;
    }
}



@media (min-width: 1200px) {  
.apply-now-content-advancement {
        margin-left: -15px;
        padding: 0;
        background: transparent;
    }
    .apply-now-content-advancement .apply-now-advancement {
        border-left: 8px solid #f8c23a;
        max-width: 400px;
        padding: 15px 30px;
        position: absolute;
        bottom: 50%;
        left: 15%;
    }
    .apply-now-content-advancement .apply-now-advancement h3 {
        font-size: 28px;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    .apply-now-content-advancement .apply-now-advancement p,
    .apply-now-content-advancement .apply-now-advancement .more-link {
        font-size: 16px;
        padding-left: 10px;
        line-height: 28px;
    }
}

	
</style>
		
<div class="col-sm-12-advancement apply-now-content-advancement" role="region" aria-label="Give Today Callout Header">
               <div class="apply-now-advancement">
                  <h3>Make a gift.<br />Make an impact.</h3>
                  <a href="/advancement/make-a-gift.aspx" class="more-link" title="Learn More">Give Today!</a>
	 </div>
</div>
		

		
		<div class="container card-container undergraduate" role="main" id="main">
            <nav class="nav-breadcrumb" aria-label="breadcrumb">
            	<ol class="breadcrumb">
					<xsl:call-template name="breadcrumb" />
				</ol>
			</nav>
        <div class="row sm-hide">
            <!-- <div class="col-sm-12 padding-lrt">
                <xsl:call-template name="navigation" />
            </div>
-->
        </div>
			
												
			
		<p class="audienceHeaderLarge"><br /><xsl:apply-templates select="ouc:div[@label = 'page-title']" /></p>
        <div class="row row-container row-top-md">
            <div class="col-md-8">
				
				<div>
					
					<xsl:apply-templates select="ouc:div[@label = 'page-content']" />
                </div>
				
                <div class="row padtop30px">
                    <div class="col-md-6">
						<div class="img-container img-alone">
							<xsl:apply-templates select="ouc:div[@label = 'image']" />
						</div>
                    </div>
                    
				<div class="col-md-6">
						<div class="img-container img-alone">
							<xsl:apply-templates select="ouc:div[@label = 'image_2']" />
						</div>
                    </div>
					
                    <div class="col-sm-12 ratio-img-sm">
<!-- 						<xsl:apply-templates select="ouc:div[@label = 'image_1']" /> -->
                    </div>
                </div>
                <!--<div class="padtop30px">
					
					<xsl:apply-templates select="ouc:div[@label = 'page-content']" />
                </div>-->
            </div>
            <div class="col-md-4">
                <div class="ratio-img-md">
					<xsl:apply-templates select="ouc:div[@label = 'image_1']" />
                </div>
				<xsl:apply-templates select="ouc:div[@label = 'apply-now']" />
            </div>
        </div>
			
			<div class="row row-container row-top-md">
            <div class="col-md-4 flip-top flip-image-container">
                <div class="img-container flip-item top-sm">
                    <img src="{flip-items/flip-4/ouc:div[@label='flip-image-4']}" alt="{flip-items/flip-4/ouc:div[@label='flip-image-alt-4']}"/>
                    <div class="flip">
                        <p class="flip-title"><xsl:value-of select="flip-items/flip-4/ouc:div[@label='flip-title-4']" /></p>
                        <p class="flip-text"><xsl:value-of select="flip-items/flip-4/ouc:div[@label='flip-description-4']" /></p>
                        <a href="{flip-items/flip-4/ouc:div[@label='flip-more-link-4']}" class="learn-more" title="Learn More"><xsl:value-of select="flip-items/flip-4/ouc:div[@label='flip-more-4']" /></a>
                    </div>
                </div>
            </div>
            <div class="col-md-8 top-sm">
				<div class="img-container img-alone">
					<xsl:apply-templates select="ouc:div[@label = 'image-minor-major']" />
				</div>
			</div>
        </div>
			
			<div class="row row-container flip-image-container row-top-md">
            <div class="col-md-6">
                <div class="flip-item">
                    <img src="{flip-items/flip-2/ouc:div[@label='flip-image-2']}" class="img-fluid img-width" alt="{flip-items/flip-2/ouc:div[@label='flip-image-alt-2']}"/>
                    <div class="flip-item-content">
                        <p><xsl:value-of select="flip-items/flip-2/ouc:div[@label='flip-title-2']" />
                            <br/><xsl:value-of select="flip-items/flip-2/ouc:div[@label='flip-title-desc-2']" /></p>
                    </div>
                    <div class="flip">
                        <p class="flip-title"><xsl:value-of select="flip-items/flip-2/ouc:div[@label='flip-subtitle-2']" /></p>
                        <p class="flip-text"><xsl:value-of select="flip-items/flip-2/ouc:div[@label='flip-description-2']" /></p>
                        <a href="{flip-items/flip-2/ouc:div[@label='flip-more-link-2']}" class="learn-more" title="Learn More"><xsl:value-of select="flip-items/flip-2/ouc:div[@label='flip-more-2']" /></a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 top-sm">
                <div class="flip-item">
                    <img src="{flip-items/flip-3/ouc:div[@label='flip-image-3']}" class="img-fluid img-width" alt="{flip-items/flip-3/ouc:div[@label='flip-image-alt-3']}"/>
                    <div class="flip-item-content">
                        <p><xsl:value-of select="flip-items/flip-3/ouc:div[@label='flip-title-3']" /><br/>
							<xsl:value-of select="flip-items/flip-3/ouc:div[@label='flip-title-desc-3']" /></p>
                    </div>
                    <div class="flip">
                        <p class="flip-title"><xsl:value-of select="flip-items/flip-3/ouc:div[@label='flip-subtitle-3']" /></p>
                        <p class="flip-text"><xsl:value-of select="flip-items/flip-3/ouc:div[@label='flip-description-3']" /></p>
                        <a href="{flip-items/flip-3/ouc:div[@label='flip-more-link-3']}" class="learn-more" title="Learn More"><xsl:value-of select="flip-items/flip-3/ouc:div[@label='flip-more-3']" /></a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row row-container row-top-md">
            <div class="col-md-6 top-sm">
				<div class="img-height img-alone">
                	<xsl:apply-templates select="ouc:div[@label = 'image-employer']" />
				</div>
                <!--<div class="undergrads-img img-alone undergrads-img-sm">
                    <xsl:apply-templates select="ouc:div[@label = 'image-undergrads']" />
                </div> -->
            </div>
            <div class="col-md-6 ">
                <div id="employers-carousel" class="employers-carousel carousel slide w-100" data-ride="carousel">
                    <div class="carousel-inner card">
<!--  1st Carousel -->
<div class="carousel-item active">
  <div class="emp-img"> <img src="{slider-items/slider-1/ouc:div[@label='slider-img-link-1']}" class="w-100 img-fluid" alt="{slider-items/slider-1/ouc:div[@label='slider-img-alt-1']}"/> </div>
  <div class="emp-content"> 
    
    <!-- <h2><xsl:value-of select="slider-items/slider-1/ouc:div[@label='slider-title-1']" /></h2> -->
    <h2><xsl:value-of select="substring($slider-title-1, 1, 34)" />
      <xsl:if test="string-length($slider-title-1) &gt; 34">
        ...
      </xsl:if>
    </h2>
    
    <!-- <span>Updated <xsl:value-of select="format-dateTime($updated-date,'[MNn] [D], [Y0001]')" /> </span> -->
    
    <p><xsl:value-of select="substring($announcement-1, 1, 106)" />
      <xsl:if test="string-length($announcement-1) &gt; 106">
        ...
      </xsl:if>
    </p>
    
    <!-- <p><xsl:value-of select="slider-items/slider-1/ouc:div[@label='slider-desc-1']" /></p> --> 
    
  </div>
  <div class="col-md-12">
    <div class="col-md-5" style="float:left;"> <a href="{slider-items/slider-1/ouc:div[@label='slider-link-1']}" class="read-more" title="Read More"><xsl:value-of select="slider-items/slider-1/ouc:div[@label='slider-more-1']" />&nbsp;<span class="read-more-icon">></span></a> </div>
	  
	  <xsl:if test="ou:pcf-param('slider') &gt;= '2'">
		  
    <div class="col-md-7 bottomArrowsEmp" style="float:left;">
      <div style="float: right;"><a class="carousel-control-prev" href="#employers-carousel" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#employers-carousel" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
		
      <!-- <xsl:if test="string-length($announcement-1) &lt; 82">
			<br /><br />
		</xsl:if>
--> 
      
    </div>
		  </xsl:if>
  </div>
</div>

<!--  2nd Carousel -->
<xsl:if test="ou:pcf-param('slider') &gt;= '2'">
  <div class="carousel-item">
    <div class="emp-img"> <img src="{slider-items/slider-2/ouc:div[@label='slider-img-link-2']}" class="w-100 img-fluid" alt="{slider-items/slider-2/ouc:div[@label='slider-img-alt-2']}"/> </div>
    <div class="emp-content"> 
      
      <!-- <h2><xsl:value-of select="slider-items/slider-2/ouc:div[@label='slider-title-2']" /></h2> -->
      <h2><xsl:value-of select="substring($slider-title-2, 1, 34)" />
        <xsl:if test="string-length($slider-title-2) &gt; 34">
          ...
        </xsl:if>
      </h2>
      
      <!-- <span>Updated <xsl:value-of select="format-dateTime($updated-date,'[MNn] [D], [Y0001]')" /> </span> -->
      
      <p><xsl:value-of select="substring($announcement-2, 1, 106)" />
        <xsl:if test="string-length($announcement-2) &gt; 106">
          ...
        </xsl:if>
      </p>
      
      <!-- <p><xsl:value-of select="slider-items/slider-2/ouc:div[@label='slider-desc-2']" /></p> --> 
      
    </div>
    <div class="col-md-12">
      <div class="col-md-5" style="float:left;"> <a href="{slider-items/slider-2/ouc:div[@label='slider-link-2']}" class="read-more" title="Read More"><xsl:value-of select="slider-items/slider-2/ouc:div[@label='slider-more-2']" />&nbsp;<span class="read-more-icon">></span></a> </div>
      <div class="col-md-7 bottomArrowsEmp" style="float:left;">
        <div style="float: right;"><a class="carousel-control-prev" href="#employers-carousel" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#employers-carousel" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
        <!-- <xsl:if test="string-length($announcement-2) &lt; 82">
			<br /><br />
		</xsl:if>
--> 
        
      </div>
    </div>
  </div>
</xsl:if>

<!--  3rd Carousel -->
<xsl:if test="ou:pcf-param('slider') &gt;= '3'">
  <div class="carousel-item">
    <div class="emp-img"> <img src="{slider-items/slider-3/ouc:div[@label='slider-img-link-3']}" class="w-100 img-fluid" alt="{slider-items/slider-3/ouc:div[@label='slider-img-alt-3']}"/> </div>
    <div class="emp-content"> 
      
      <!-- <h2><xsl:value-of select="slider-items/slider-3/ouc:div[@label='slider-title-3']" /></h2> -->
      <h2><xsl:value-of select="substring($slider-title-3, 1, 34)" />
        <xsl:if test="string-length($slider-title-3) &gt; 34">
          ...
        </xsl:if>
      </h2>
      
      <!-- <span>Updated <xsl:value-of select="format-dateTime($updated-date,'[MNn] [D], [Y0001]')" /> </span> -->
      
      <p><xsl:value-of select="substring($announcement-3, 1, 106)" />
        <xsl:if test="string-length($announcement-3) &gt; 106">
          ...
        </xsl:if>
      </p>
      
      <!-- <p><xsl:value-of select="slider-items/slider-3/ouc:div[@label='slider-desc-3']" /></p> --> 
      
    </div>
    <div class="col-md-12">
      <div class="col-md-5" style="float:left;"> <a href="{slider-items/slider-3/ouc:div[@label='slider-link-3']}" class="read-more" title="Read More"><xsl:value-of select="slider-items/slider-3/ouc:div[@label='slider-more-3']" />&nbsp;<span class="read-more-icon">></span></a> </div>
      <div class="col-md-7 bottomArrowsEmp" style="float:left;">
        <div style="float: right;"><a class="carousel-control-prev" href="#employers-carousel" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#employers-carousel" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
        <!-- <xsl:if test="string-length($announcement-3) &lt; 82">
			<br /><br />
		</xsl:if>
--> 
        
      </div>
    </div>
  </div>
</xsl:if>

<!--  4th Carousel -->
<xsl:if test="ou:pcf-param('slider') &gt;= '4'">
  <div class="carousel-item">
    <div class="emp-img"> <img src="{slider-items/slider-4/ouc:div[@label='slider-img-link-4']}" class="w-100 img-fluid" alt="{slider-items/slider-4/ouc:div[@label='slider-img-alt-4']}"/> </div>
    <div class="emp-content"> 
      
      <!-- <h2><xsl:value-of select="slider-items/slider-4/ouc:div[@label='slider-title-4']" /></h2> -->
      <h2><xsl:value-of select="substring($slider-title-4, 1, 34)" />
        <xsl:if test="string-length($slider-title-4) &gt; 34">
          ...
        </xsl:if>
      </h2>
      
      <!-- <span>Updated <xsl:value-of select="format-dateTime($updated-date,'[MNn] [D], [Y0001]')" /> </span> -->
      
      <p><xsl:value-of select="substring($announcement-4, 1, 106)" />
        <xsl:if test="string-length($announcement-4) &gt; 106">
          ...
        </xsl:if>
      </p>
      
      <!-- <p><xsl:value-of select="slider-items/slider-4/ouc:div[@label='slider-desc-4']" /></p> --> 
      
    </div>
    <div class="col-md-12">
      <div class="col-md-5" style="float:left;"> <a href="{slider-items/slider-4/ouc:div[@label='slider-link-4']}" class="read-more" title="Read More"><xsl:value-of select="slider-items/slider-4/ouc:div[@label='slider-more-4']" />&nbsp;<span class="read-more-icon">></span></a> </div>
      <div class="col-md-7 bottomArrowsEmp" style="float:left;">
        <div style="float: right;"><a class="carousel-control-prev" href="#employers-carousel" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#employers-carousel" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
        <!-- <xsl:if test="string-length($announcement-4) &lt; 82">
			<br /><br />
		</xsl:if>
--> 
        
      </div>
    </div>
  </div>
</xsl:if>

<!--  5th Carousel -->
<xsl:if test="ou:pcf-param('slider') &gt;= '5'">
  <div class="carousel-item">
    <div class="emp-img"> <img src="{slider-items/slider-5/ouc:div[@label='slider-img-link-5']}" class="w-100 img-fluid" alt="{slider-items/slider-5/ouc:div[@label='slider-img-alt-5']}"/> </div>
    <div class="emp-content"> 
      
      <!-- <h2><xsl:value-of select="slider-items/slider-5/ouc:div[@label='slider-title-5']" /></h2> -->
      <h2><xsl:value-of select="substring($slider-title-5, 1, 34)" />
        <xsl:if test="string-length($slider-title-5) &gt; 34">
          ...
        </xsl:if>
      </h2>
      
      <!-- <span>Updated <xsl:value-of select="format-dateTime($updated-date,'[MNn] [D], [Y0001]')" /> </span> -->
      
      <p><xsl:value-of select="substring($announcement-5, 1, 106)" />
        <xsl:if test="string-length($announcement-5) &gt; 106">
          ...
        </xsl:if>
      </p>
      
      <!-- <p><xsl:value-of select="slider-items/slider-5/ouc:div[@label='slider-desc-5']" /></p> --> 
      
    </div>
    <div class="col-md-12">
      <div class="col-md-5" style="float:left;"> <a href="{slider-items/slider-5/ouc:div[@label='slider-link-5']}" class="read-more" title="Read More"><xsl:value-of select="slider-items/slider-5/ouc:div[@label='slider-more-5']" />&nbsp;<span class="read-more-icon">></span></a> </div>
      <div class="col-md-7 bottomArrowsEmp" style="float:left;">
        <div style="float: right;"><a class="carousel-control-prev" href="#employers-carousel" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#employers-carousel" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
        <!-- <xsl:if test="string-length($announcement-5) &lt; 82">
			<br /><br />
		</xsl:if>
--> 
        
      </div>
    </div>
  </div>
</xsl:if>
                    </div>
                    
                </div>
                <!-- <div class="undergrads-img img-alone undergrads-img-md">
                    <img src="/_resources/images/undergrads.png" class="img-fluid" alt="undergrads"/>
                </div> -->
            </div>
        </div>
        <div class="row row-container row-top-md top-sm" role="region" aria-label="Social Media Links">
            <div class="col-lg-8 col-md-7 col-sm-6">
                <div class="connect-social-link">
                    <p>Stay Connected!</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-5 col-sm-6 social-link-content">
                <ul class="social-link-img">
                    <li>
                        <a target="_blank" href="{social-links/facebook/ouc:div[@label='facebook-link']}" title="facebook" ><img src="/_resources/images/facebook-icon.png" class="img-fluid" alt="facebook"/></a>
                    </li>
                    <li>
                        <a target="_blank" href="{social-links/instagram/ouc:div[@label='instagram-link']}" title="instagram"><img src="/_resources/images/instagram-icon.png" class="img-fluid" alt="instagram"/></a>
                    </li>
                    <li>
                        <a target="_blank" href="{social-links/twitter/ouc:div[@label='twitter-link']}" title="X"><img src="/_resources/images/x-icon.png" class="img-fluid" alt="X"/></a>
                    </li>
                    <li>
                        <a target="_blank" href="{social-links/youtube/ouc:div[@label='youtube-link']}" title="youtube"><img src="/_resources/images/youtube-icon.png" class="img-fluid" alt="youtube"/></a>
                    </li> 
                     <li>
                        <a target="_blank" href="{social-links/linkedin/ouc:div[@label='linkedin-link']}" title="linkedin"><img src="/_resources/images/linkedin-icon.png" class="img-fluid" alt="linkedin"/></a>
                    </li>
                </ul>
            </div>
			
        </div>
		<div class="row row-container row-top-md">
			<div class="col-xs-12 col-sm-12 col-md-12">
				<ul class="instagram-lite"></ul>
			</div>
		</div>
			

	</div>
	</xsl:template>
</xsl:stylesheet>

