An error occurred while processing the template.
Expression video_staff is undefined on line 802, column 18 in 10157#10197#419869.
1<link href="/lsu-theme/images/preloader-fb.png" rel="prefetch" /> 
2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script> 
3<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/css/swiper.min.css"></script> 
4<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/js/swiper.min.js"></script> 
5<script src="https://cdn.jsdelivr.net/g/mustache.js@2.2.1,lodash@4.12.0,babel@6.0.16"></script> 
6<script src="http://athleticoffice.github.io/music-player-js/lib/aoMusicPlayer.min.js"></script> 
7 
8<style> 
9 
10#staff-profile.inactive { 
11	visibility: hidden; 
12			opacity: 0; 
13
14 
15#staff-profile { 
16        width: 100%; 
17        height: 100vh; 
18        background:#fdd023; 
19        		visibility: visible; 
20			opacity: 1; 
21			    -webkit-transition: opacity 1s ease; 
22        transition: opacity 1s ease; 
23        -webkit-transition-delay: .1s; 
24        transition-delay: .1s; 
25        -webkit-transition: opacity 1s ease; 
26        -webkit-transition-delay: opacity 1s ease; 
27
28.swiper-container.staff-profile { 
29        width: 100%; 
30        height: 100vh; 
31
32.staff-profile .swiper-slide { 
33height: auto; 
34min-height: auto; 
35padding: 15vh 0; 
36    position:relative; 
37    color: #fff; 
38        text-align: center; 
39        display: -webkit-box; 
40        display: -ms-flexbox; 
41        display: -webkit-flex; 
42        display: flex; 
43        -webkit-box-pack: center; 
44        -ms-flex-pack: center; 
45        -webkit-justify-content: center; 
46        justify-content: center; 
47        -webkit-box-align: center; 
48        -ms-flex-align: center; 
49        -webkit-align-items: center; 
50        align-items: center; 
51        -webkit-flex-direction: column; 
52        flex-direction: column; 
53
54 
55  .parallax-bg { 
56        position: absolute; 
57        left: 0; 
58        top: 0; 
59        width: 100%; 
60        height: 103%; 
61        -webkit-background-size: cover; 
62        background-size: cover; 
63        background-position: 50% 50%; 
64            background-color: rgba(70,29,124,0.87); 
65            background-position: 50% 25%; 
66      
67
68.peveto .intro-text { 
69font-size: 10vw; 
70
71.peveto #staff-name { 
72word-spacing: -2vw; 
73
74#staff-profile .bg-overlay { 
75background: rgba(17, 16, 16, 0.45); 
76background: rgba(11, 15, 39, 0.52); 
77
78.portlet-asset-publisher .asset-full-content .asset-content br { 
79display: none; 
80
81#staff-profile br { 
82display: block; 
83
84 
85#staff-profile hr { 
86    content: " "; 
87    height: 2px; 
88      background-image: linear-gradient(to right,rgba(57, 41, 148, 0.75),rgba(110, 19, 204, 0.35),rgba(0,0,0,0)); 
89    max-width: 150px; 
90    margin-bottom: 15px; 
91    margin-top: 5px; 
92    display: block; 
93    margin-left: auto; 
94    margin-right: auto; 
95    border: 0; 
96        margin-left: 0; 
97
98.intro-text { 
99    position: absolute; 
100    width: 100%; 
101    text-align: left; 
102    font-size: 13vw; 
103    bottom: 30%; 
104    line-height: 1; 
105    margin: 0; 
106    font-family: "bebas-neue","Oswald",sans-serif; 
107    font-weight: 400; 
108    text-transform: uppercase; 
109    color: #fdd023; 
110    opacity: .9; 
111    padding-left: 20px; 
112    letter-spacing: .5vw; 
113    z-index: 1; 
114    mix-blend-mode: screenn; 
115
116html.ios { 
117mix-blend-mode: unset; 
118
119.intro-text div { 
120display: inline-block; 
121
122.intro-text span { 
123    display: block; 
124    font-size: 50%; 
125    color: #fff; 
126    font-weight: 300; 
127    letter-spacing: 1vw; 
128    line-height: .5; 
129
130.staff-profile .swiper-slide.bio { 
131padding: 0; 
132
133ul.details { 
134margin-bottom: 30px; 
135
136ul.details li > span { 
137font-weight: 700; 
138
139#staff-profile dl { 
140padding: 0 10px; 
141
142.aui dt { 
143    position: relative; 
144    color: #fdd023; 
145    margin-top: 15px; 
146
147dt:before { 
148    content: ""; 
149    position: absolute; 
150    height: calc(100% + 30px); 
151    /* background: #fdd023; */ 
152    top: calc(100% - 5px); 
153    width: 2px; 
154    right: calc(100% + 15px); 
155    z-index: -1; 
156    display: block; 
157    border-right: 1px dotted #eee; 
158    /* bottom: 0; */ 
159    overflow: hidden; 
160
161dt:last-child:before { 
162display: none; 
163
164dt:after { 
165    content: ""; 
166    position: absolute; 
167    height: 10px; 
168    background: #fdd023; 
169    top: 50%; 
170    width: 10px; 
171    right: calc(100% + 10px); 
172    z-index: -1; 
173    display: block; 
174    border-top: 1px dotted #fdd023; 
175    border-radius: 50%; 
176    transform: translate(-0%,-50%); 
177
178#staff-profile dd { 
179    text-align: left; 
180    font-family: 'Oswald',sans-serif; 
181    text-transform: uppercase; 
182    font-weight: 400; 
183font-size: 14px; 
184
185#staff-profile dd.job-title { 
186 
187    text-transform: capitalize; 
188    font-weight: 400; 
189    font-family: inherit; 
190        font-size: 75%; 
191
192ul.career-highlights, 
193.aui .icons-ul.career-highlights { 
194padding: 0; 
195margin-left: 5px; 
196
197ul.career-highlights li { 
198    position: relative; 
199    margin-bottom: 15px; 
200    font-size: 12px; 
201
202ul.career-highlights i, 
203ul.career-highlights .lsu-icon { 
204color: #fdd023; 
205
206ul.career-highlights li:first-letter { 
207text-transform: uppercase; 
208
209 
210.contact-info .box { 
211margin-bottom: 45px; 
212 
213
214.contact-info .lsu-icon:before { 
215    font-size: 3em; 
216 display: block; 
217 color: #fdd023; 
218
219.contact-info .box > div { 
220color: #fff; 
221font-size: 12px; 
222
223.music-container .swiper-pagination.horiz { 
224    bottom: 0!important; 
225
226 
227.thomas .swiper-slide.music, 
228.jenkins .swiper-slide.music, 
229.johnson .swiper-slide.music, 
230.canada .swiper-slide.music, 
231.robinson .swiper-slide.music, 
232.joseph .swiper-slide.music { 
233display: none; 
234
235.staff-profile.thomas .swiper-slide.bio, 
236.staff-profile.jenkins .swiper-slide.bio, 
237.staff-profile.johnson .swiper-slide.bio, 
238.canada .swiper-slide.bio, 
239.robinson .swiper-slide.bio, 
240.joseph .swiper-slide.bio { 
241padding-bottom: 15vh; 
242
243 
244@media(max-width:768px){ 
245#controls-wrapper, 
246#player .progress { 
247display: none; 
248
249
250 
251 
252@media(min-width:768px){ 
253#staff-profile hr { 
254    height: 3px; 
255    max-width: 200px; 
256    margin-bottom: 20px; 
257    margin-top: 10px; 
258
259.intro-text span { 
260    letter-spacing: 8px; 
261
262 
263ul.career-highlights, 
264.aui .icons-ul.career-highlights { 
265margin: 0; 
266padding: 0; 
267
268ul.career-highlights li { 
269font-size: 16px; 
270
271#staff-profile dl { 
272padding: 0 0; 
273
274#staff-profile dd { 
275font-size: 20px; 
276
277#staff-profile dd.job-title { 
278        font-size: 85%; 
279
280dt:before { 
281    height: calc(100% + 40px); 
282
283.contact-info .lsu-icon:before { 
284    font-size: 6em; 
285    margin-bottom: 15px; 
286
287.contact-info .box > div { 
288font-size: 20px; 
289
290 
291.music h5 { 
292    font-size: 24px; 
293
294
295@media (min-width: 1200px) { 
296.intro-text { 
297padding-left: 100px; 
298    font-size: 10vw; 
299bottom: 10%; 
300     line-height: .9; 
301
302.peveto .intro-text { 
303font-size: 7vw; 
304
305.intro-text span { 
306letter-spacing: 1vw; 
307
308.swiper-slide.tweet h5 { 
309font-size: 64px; 
310
311.contact-info .lsu-icon:before { 
312    font-size: 6em; 
313
314.contact-info .box > div { 
315font-size: 20px; 
316
317.swiper-pagination.horiz { 
318display: none; 
319
320
321 
322 
323 
324 
325 
326 
327 
328 
329.spotify-logo { 
330  position: absolute; 
331  top: 0; 
332  left: 0; 
333  padding: 25px; 
334  z-index: 2; 
335  display: nonee; 
336
337 
338.music-container { 
339  height: auto!important; 
340  width: 100%; 
341              margin-right: auto; 
342    margin-left: auto; 
343
344 
345.music-container .swiper-slide { 
346  text-align: center; 
347  font-size: 18px; 
348  background: none; 
349  overflow: hidden; 
350  color: #fff; 
351   width: 90%; 
352        height: 85vw; 
353        min-height: auto; 
354  /* Center slide text vertically */ 
355  display: -webkit-box; 
356  display: -ms-flexbox; 
357  display: -webkit-flex; 
358  display: flex; 
359  -webkit-box-pack: center; 
360  -ms-flex-pack: center; 
361  -webkit-justify-content: center; 
362  justify-content: center; 
363  -webkit-box-align: center; 
364  -ms-flex-align: center; 
365  -webkit-align-items: center; 
366  align-items: center; 
367  background-size: cover; 
368  -webkit-flex-direction: column; 
369  flex-direction: column; 
370  padding: 10px; 
371
372.music-container .slide-inner { 
373position: relative; 
374overflow: hidden; 
375    height: 100%; 
376    width: 100%; 
377padding: 15px; 
378  display: -webkit-box; 
379  display: -ms-flexbox; 
380  display: -webkit-flex; 
381  display: flex; 
382  -webkit-box-pack: center; 
383  -ms-flex-pack: center; 
384  -webkit-justify-content: center; 
385  justify-content: center; 
386  -webkit-box-align: center; 
387  -ms-flex-align: center; 
388  -webkit-align-items: center; 
389  align-items: center; 
390  background-size: cover; 
391  -webkit-flex-direction: column; 
392  flex-direction: column; 
393  background-color: #000; 
394
395.bottom-stuff { 
396  padding: 0px 0 50px 0; 
397  background: #111; 
398  z-index: 999; 
399  bottom: 0; 
400  left: 0; 
401  right: 0; 
402  width: 100%; 
403  height: 33.333333vh; 
404  text-align: center; 
405
406 
407#controls-wrapper { 
408position: relative; 
409
410 
411#controls-wrapper .lsu-icon, 
412.music-container .music-play-control { 
413  color: #fdd023; 
414  font-size: 1.5em; 
415  vertical-align: middle; 
416
417 
418#controls-wrapper .lsu-icon:before, 
419.music-container .music-play-control:before { 
420  vertical-align: middle; 
421  border: 3px solid #fff; 
422  background: rgba(0, 0, 0, 0.15); 
423  padding: 15px; 
424  border-radius: 50%; 
425      display: inline-block; 
426    margin-bottom: 25px; 
427
428 
429 
430.music-container .music-play-control { 
431  font-size: 2em; 
432  margin-left: 15px; 
433  margin-right: 15px; 
434
435 
436.music-container .music-play-control:before { 
437    font-family: "lsu" !important; 
438    font-style: normal !important; 
439    font-weight: normal !important; 
440    font-variant: normal !important; 
441    text-transform: none !important; 
442    speak: none; 
443    line-height: 1; 
444    -webkit-font-smoothing: antialiased; 
445    -moz-osx-font-smoothing: grayscale; 
446    content: "\2d"; 
447 
448
449 
450.music-container.playing .music-play-control:before { 
451content: "\5c"; 
452    font-family: "lsu" !important; 
453    font-style: normal !important; 
454    font-weight: normal !important; 
455    font-variant: normal !important; 
456    text-transform: none !important; 
457    speak: none; 
458    line-height: 1; 
459    -webkit-font-smoothing: antialiased; 
460    -moz-osx-font-smoothing: grayscale; 
461
462 
463 
464 
465#player .progress { 
466    margin-top: 0; 
467    width: 35%; 
468    border-radius: 0px; 
469    height: 4px; 
470    margin: auto; 
471    position: absolute; 
472       top: calc(100% - 204px); 
473    z-index: 2; 
474    /* left: 0; */ 
475    /* width: 50%; */ 
476    left: 50%; 
477    -webkit-transform: translate(-50%,0%); 
478    transform: translate(-50%,0%); 
479    z-index: 999; 
480  overflow: hidden; 
481  background-color: rgba(0,0,0,0.4); 
482  -webkit-box-shadow: none; 
483  box-shadow: none; 
484
485 
486 
487 
488#player .progress-bar { 
489  float: left; 
490  width: 0; 
491  height: 100%; 
492  font-size: 12px; 
493  line-height: 20px; 
494  color: #fff; 
495  text-align: center; 
496  background-color: #fdd023; 
497  -webkit-box-shadow: none; 
498  box-shadow: none; 
499  -webkit-transition: width .6s ease; 
500  -o-transition: width .6s ease; 
501  transition: width .6s ease; 
502
503 
504 
505 
506.music-progress-bar.reset { 
507  width: 0%; 
508  -webkit-transition: none; 
509  transition: none; 
510
511 
512.playlist-name { 
513 
514    z-index: 2; 
515  text-transform: uppercase; 
516  color: #fff; 
517  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75); 
518  font-size: 120%; 
519    font-family: 'Lato', sans-serif; 
520  font-weight: 700; 
521  letter-spacing: 6px; 
522
523 
524 
525.music-track { 
526  padding: 0 10px; 
527  font-size: 32px; 
528  z-index: 2; 
529  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55); 
530  opacity: 0; 
531     -webkit-transition: all .5s ease; 
532    transition: all .5s ease; 
533
534.music-track-active .track-title { 
535  display: block; 
536  color: #fdd023; 
537    -webkit-animation-duration: .75s; 
538  animation-duration: .75s; 
539    -webkit-animation-fill-mode: both; 
540  animation-fill-mode: both; 
541    -webkit-animation-iteration-count: infinite; 
542  animation-iteration-count: infinite; 
543   -webkit-animation-name: bounce; 
544  animation-name: bounce; 
545  -webkit-transform-origin: center bottom; 
546  transform-origin: center bottom; 
547
548.music-container .swiper-slide-active .music-track { 
549opacity: 1; 
550
551.music-track .track-title { 
552  text-transform: uppercase; 
553    text-transform: uppercase; 
554    color: #fdd023; 
555    line-height: 1; 
556
557 
558.music-track .track-artist { 
559  color: #fff; 
560  font-size: 50%; 
561  letter-spacing: 1px; 
562  margin-top: 5px; 
563  font-family: 'Lato', sans-serif; 
564  font-weight: 700; 
565  font-size: 35%; 
566  line-height: 1; 
567
568 
569.music-track .track-album { 
570  font-family: 'Lato', sans-serif; 
571  font-weight: 300; 
572  font-size: 30%; 
573color: #eee; 
574
575.music-track .track-album span { 
576  font-weight: 700; 
577
578.music-container .swiper-slide .bg-image { 
579  position: absolute; 
580  top: 0; 
581  left: 0; 
582  height: 100%; 
583  width: 100%; 
584  background-size: cover; 
585      background-position: 50% 50%; 
586       -webkit-transition: all .5s ease; 
587    transition: all .5s ease; 
588    z-index: 0; 
589
590.music-container .swiper-slide-active .bg-image { 
591    opacity: .65; 
592
593 
594.music-track-active .artist-small-image { 
595  display: block; 
596
597.animated { 
598  -webkit-animation-duration: 1s; 
599  animation-duration: 1s; 
600  -webkit-animation-fill-mode: both; 
601  animation-fill-mode: both; 
602
603 
604.animated.infinite { 
605  -webkit-animation-iteration-count: infinite; 
606  animation-iteration-count: infinite; 
607
608@-webkit-keyframes bounce { 
609  from, 20%, 53%, 80%, to { 
610    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
611    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
612    -webkit-transform: translate3d(0,0,0); 
613    transform: translate3d(0,0,0); 
614
615 
616  40%, 43% { 
617    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
618    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
619    -webkit-transform: translate3d(0, -30px, 0); 
620    transform: translate3d(0, -30px, 0); 
621
622 
623  70% { 
624    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
625    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
626    -webkit-transform: translate3d(0, -15px, 0); 
627    transform: translate3d(0, -15px, 0); 
628
629 
630  90% { 
631    -webkit-transform: translate3d(0,-4px,0); 
632    transform: translate3d(0,-4px,0); 
633
634
635 
636@keyframes bounce { 
637  from, 20%, 53%, 80%, to { 
638    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
639    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
640    -webkit-transform: translate3d(0,0,0); 
641    transform: translate3d(0,0,0); 
642
643 
644  40%, 43% { 
645    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
646    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
647    -webkit-transform: translate3d(0, -30px, 0); 
648    transform: translate3d(0, -30px, 0); 
649
650 
651  70% { 
652    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
653    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
654    -webkit-transform: translate3d(0, -15px, 0); 
655    transform: translate3d(0, -15px, 0); 
656
657 
658  90% { 
659    -webkit-transform: translate3d(0,-4px,0); 
660    transform: translate3d(0,-4px,0); 
661
662
663 
664.bounce { 
665  -webkit-animation-name: bounce; 
666  animation-name: bounce; 
667  -webkit-transform-origin: center bottom; 
668  transform-origin: center bottom; 
669
670 
671@media(min-width:768px) { 
672.music-container { 
673    width: 750px; 
674
675.music-container .swiper-slide { 
676width: 33.333333%; 
677    height: calc(700px / 3); 
678
679  #player .progress { 
680      top: calc(970px / 3); 
681    width: 33.333333%; 
682    width: calc(33.333333% - 30px); 
683    left: calc(50% + 15px); 
684
685
686@media(min-width:992px) { 
687.music-container { 
688    width: 970px; 
689
690.music-container .swiper-slide { 
691width: 33.333333%; 
692    height: calc(1000px / 3); 
693
694  #player .progress { 
695    top: calc(970px / 3); 
696    width: 33.333333%; 
697    width: calc(33.333333% - 30px); 
698    left: 50%; 
699
700 
701    #controls-wrapper .ao-icon { 
702    font-size: 2em; 
703
704  .music-container .music-play-control { 
705    font-size: 4em; 
706    margin-left: 25px; 
707    margin-right: 25px; 
708
709 
710  #controls-wrapper .ao-icon:before, .music-container .music-play-control:before { 
711    vertical-align: middle; 
712    padding: 20px; 
713
714  .music-track { 
715  padding: 0 20px; 
716  font-size: 56px; 
717
718
719@media(min-width:1200px) { 
720.music-container { 
721    width: 1170px; 
722
723
724 
725 
726</style> 
727 
728 
729 
730 <div id="team-loader"> 
731   <div class="pulse-loader"></div> 
732   <div class="football-loader"></div> 
733</div> 
734 
735<section class="section inactive" id="staff-profile"> 
736 
737 
738 <div class="swiper-container staff-profile ${last_name.getData()?lower_case}"> 
739   
740   <div class="parallax-bg" style="background-image:url(${image_bg.getData()});" data-swiper-parallax="-3%"></div> 
741   <div class="bg-overlay" style="z-index: 0;"></div> 
742    
743   <div class="intro-text" data-swiper-parallax="-2000%"> 
744    <div class="font-lsu" id="staff-name">${first_name.getData()}<br>${last_name.getData()}</div> 
745  
746         <span>${job_title.getData()}</span> 
747         </div> 
748 
749        <div class="swiper-wrapper"> 
750 
751 
752            <div class="swiper-slide intro" style="min-height: 100vh!important;padding: 0;background: none;"> 
753                   
754</div> 
755 
756   
757 
758            <div class="swiper-slide bio"> 
759            <div class="container"> 
760                      
761            <div class="row row-flex"> 
762          
763<div class="col-sm-7 text-left"> 
764<h3 class="text-secondary">Career</h3> 
765<hr> 
766 
767<ul class="icons-ul career-highlights"> 
768 <#if highlights.getSiblings()?has_content> 
769 	<#list highlights.getSiblings() as cur_highlights> 
770 	 
771	<li><i class="icon-li icon-angle-right"></i> ${cur_highlights.getData()}</li> 
772	 
773		</#list> 
774</#if> 
775 
776</ul> 
777 
778<h3 class="text-secondary">Personal</h3> 
779<hr> 
780 
781<ul class="icons-ul career-highlights"> 
782 
783 
784<#if personal.getSiblings()?has_content> 
785	<#list personal.getSiblings() as cur_personal> 
786	<li><i class="icon-li icon-angle-right"></i> ${cur_personal.getData()}</li> 
787			</#list> 
788</#if> 
789</ul> 
790 
791 
792</div> 
793   <div class="col-sm-4 col-sm-offset-1 text-left"> 
794<h3 class="text-secondary text-left">Experience</h3> 
795<hr> 
796   ${timeline.getData()} 
797</div> 
798            </div> 
799            </div> 
800            </div> 
801             
802            <#if video_staff.getSiblings()?trim?has_content> 
803	<#list video_staff.getSiblings() as cur_video_staff> 
804	    <div class="swiper-slide video" id="staff-videos" style="padding: 15vh 0;"> 
805            <div class="container"> 
806<h1 class="font-alt text-uppercase text-secondary">Inside Look: Coach ${last_name.getData()} Mic'd Up</h1> 
807		<a class="btn btn-white" social-id="${cur_video_staff.getData()}" trigger vimeo overlay><span class="lsu-icon lsu-play-2 color-secondary"></span> Play Video</a> 
808		</div> 
809		</div> 
810	</#list> 
811</#if> 
812             
813             
814            <div class="swiper-slide music" style="min-height: 100vh!important;padding: 0;"> 
815 <h5 class="text-secondary">${last_name.getData()}'s Gameday Mix</h5> 
816           <hr style="margin-left: auto;"> 
817              <div class="swiper-container music-container" id="player"> 
818                      
819  <div class="progress"> 
820            <div class="progress-bar music-progress-bar reset" role="progressbar" id="bar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> 
821                <span class="sr-only">60% Complete</span> 
822            </div> 
823        </div> 
824           
825        <!-- wrapper template applied by javascript --> 
826        <div class="swiper-wrapper music-wrapper" id="tracks"></div> 
827         
828        <div class="swiper-pagination custom horiz"></div> 
829<div id="controls-wrapper"> 
830        <span id="prev" class="music-prev-control lsu-icon lsu-backward">&nbsp;</span> 
831        <span id="play" class="music-play-control">&nbsp;</span> 
832        <span id="next" class="lsu-icon lsu-forward music-next-control">&nbsp;</span> 
833   
834 
835    </div> 
836    </div> 
837             
838             
839            </div> 
840             
841 
842             
843             
844 
845             
846                  <div class="swiper-slide contact-info" style="padding-top: 0;padding-bottom: 30vh;"> 
847                 <div class="container"> 
848                  
849        
850                  <div class="row"> 
851                   
852                <div class="col-xs-6 col-lg-4 col-lg-offset-2"> 
853                    <a href="https://twitter.com/intent/follow?screen_name=${twitter.getData()}"> 
854                  <div class="box"> 
855                <span class="lsu-icon lsu-twitter"></span> 
856                <div>${twitter.getData()}</div> 
857                </div> 
858                </a> 
859                </div> 
860                 
861 
862             <div class="col-xs-6 col-lg-4"> 
863                                  <a href="mailto:football@lsu.edu?subject=To%20Coach%20${last_name.getData()}&amp;body=Coach%20${last_name.getData()}%2C"> 
864                 <div class="box"> 
865                    <span class="lsu-icon lsu-email"></span> 
866                    <div>football@lsu.edu</div> 
867             </div> 
868             </a> 
869             </div> 
870              
871             </div> 
872              
873               <div class="row"> 
874     <div class="col-xs-6 col-lg-4 col-lg-offset-2"> 
875             
876                 <div class="box"> 
877                    <span class="lsu-icon lsu-phone"></span> 
878                   <div>225-578-1151</div> 
879             </div> 
880              
881                </div> 
882                 
883                    <div class="col-xs-6 col-lg-4"> 
884                                  <a href="/-/recruiting-map"> 
885                 <div class="box"> 
886                    <span class="lsu-icon lsu-map"></span> 
887                    <div>Recruiting Areas</div> 
888             </div> 
889             </a> 
890             </div> 
891              
892                </div> 
893                </div> 
894                </div> 
895             
896             
897</div> 
898</div> 
899</section> 
900 
901 
902 
903   <script> 
904   var swiper; 
905 
906    var teamloader = document.querySelector('#team-loader'); 
907 
908   var quote = document.getElementById('staff-name'); 
909    quote.style.visibility = 'visible'; 
910    var ST = new SplitText("#staff-name", {type:"words,chars", wordsClass: "line++"}), chars=ST.chars , l=ST.chars.length; 
911	    tl = new TimelineMax({delay:.5}), 
912 
913 
914       
915       tl.staggerFrom(chars,1,{y:100,opacity:0,cycle:{delay:function(i){return Math.abs(Math.floor(l/2)-i)*0.1}},ease:Back.easeOut,  transform: "translateX( -100% ) rotateY( -180deg )"}); 
916         
917 
918    tl.from(".intro-text span", 1.5, {opacity: 0, y:50},'-=1.5'); 
919     
920     
921 
922    imagesLoaded(document.querySelectorAll('.preload'), { 
923        background: true 
924    }, function () { 
925 
926        document.querySelector('#staff-profile').classList.remove('inactive'); 
927 
928 
929 
930     swiper = new Swiper('.staff-profile', { 
931         paginationClickable: true, 
932        // paginationType: 'progress', 
933         nextButton:'.start-btn', 
934        direction: 'vertical', 
935		mousewheelControl: true, 
936		keyboardControl: true, 
937		parallax: true, 
938		speed: 900, 
939		 preventClicks: false, 
940        preventClicksPropagation: false, 
941         slidesPerView: 'auto', 
942          freeModeMomentum: true, 
943        freeModeMomentumBounce: false, 
944        freeMode: true, 
945        centeredSlides: false, 
946          onInit: function (swiper) { 
947                setTimeout(function () { 
948                    teamloader.parentNode.removeChild(teamloader); 
949                }, 2000); 
950            }, 
951        }); 
952 
953          tl.play(); 
954    }); 
955     
956     
957    
958    
959   
960       var tpl = "<div class='swiper-slide'>" + 
961           '<div class="slide-inner">' + 
962     '<div class="bg-image" style="background-image:url({{imageUrl}})"></div>' + 
963     '<div class="music-track" data-track="{{id}}" style="width:100%;">' + 
964     '<div class="track-title font-alt">{{name}}</div>' + 
965     '<div class="track-artist">{{artist}}</div>' + 
966     '</div>' + 
967      '</div>' + 
968     '</div>' 
969 
970   aoMusicPlayer.setTpl(tpl); 
971   var musicPlayer; 
972 
973   //    var player; 
974   var swiperMusic = new Swiper('.music-container', { 
975     pagination: '.swiper-pagination.horiz', 
976     paginationClickable: true, 
977     spaceBetween: 0, 
978     slideToClickedSlide: true, 
979     preventClicks: false, 
980     preventClicksPropagation: false, 
981     slidesPerView: 3, 
982     centeredSlides: true, 
983     loop: true, 
984     parallax: true, 
985     initialSlide: 3, 
986     autoplay: 3000, 
987    //loop: true, 
988     //loopedSlides: 6, 
989    //loopAdditionalSlides: 6, 
990         nextButton: '.music-next-control', 
991        prevButton: '.music-prev-control', 
992         
993         breakpoints: { 
994    // when window width is <= 640px 
995    767: { 
996      slidesPerView: 1, 
997
998
999    
1000   }); 
1001 
1002 
1003 
1004 
1005   // .create([music-container],[remote URL or data object],[returns player if successful]); 
1006   aoMusicPlayer.create('.music-container', 'http://athleticoffice.github.io/music-player-js/example/data/${last_name.getData()?lower_case}-playlist.json', function(player) { 
1007    
1008     swiperMusic.update(); 
1009     musicPlayer = player; 
1010     musicPlayer.on('trackchange', function(currentTrack, trackId) { 
1011       var idx = currentTrack; 
1012       swiperMusic.slideTo(idx); 
1013     }); 
1014   }); 
1015 
1016 
1017 
1018 
1019    </script>