Linux lhjmq-records 5.15.0-118-generic #128-Ubuntu SMP Fri Jul 5 09:28:59 UTC 2024 x86_64
Your IP : 3.145.80.247
<?php
include_once './includes/common.php';
$f_lang = $_GET['lang'];
if(! isset($_GET['lang']))
{
$f_lang = 'fr';
}
if($f_lang != 'en')
{
if($f_lang != 'fr')
{
$f_lang = 'fr';
}
}
?>
<!DOCTYPE html>
<html lang="<?php echo $_SESSION['lang']; ?>" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta property="og:title" content="<?= $lang['META_TITLE']; ?>">
<meta property="og:image" content="assets/img/meta-ogimage.png">
<meta property="og:site_name" content="<?= $lang['META_SITE_NAME']; ?>">
<meta property="og:url" content="http://www.lhjmq-records.qc.ca/xsl/records/book/?lang=<?php echo $_SESSION['lang']; ?>">
<meta property="og:description" content="<?= $lang['META_DESCRIPTION']; ?>">
<meta property="og:type" content="website">
<title><?= $lang['PAGE_TITLE']; ?></title>
<!-- detection -->
<script src="assets/js/vendor/modernizr-custom.js"></script>
<!-- stylesheet -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700,800" rel="stylesheet" type="text/css">
<link href="assets/css/main.min.css" rel="stylesheet" type="text/css">
<!-- SC -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/css/jquery.mmenu.all.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/theme-lhjmq.min.css">
<!-- **********-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/js/jquery.mmenu.all.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$('nav#menu').mmenu({
extensions : [ 'theme-lhjmq' ],
searchfield : false,
scrollBugFix : {
fix : true
},
counters : false,
offCanvas : {
position : "right",
zposition : "front"
},
onClick : {
preventDefault : false
},
navbar : {
title : ''
},
navbars : [
/*{
position : 'top',
content : [
'prev',
'title',
'close'
]
},*/
{
position : 'bottom',
content : [
'<a href="/">LHJMQ</a>'
]
}
]
});
var API = $("nav#menu").data( "mmenu" );
$(".close_menu").click(function() {
API.close();
});
});
</script>
</head>
<body class="timeline">
<!-- ########################################################## nav ########################################################## -->
<div class="wrapper mm-page mm-slideout" id="mm-0">
<div style="background:#005BAE;">
<!--<nav class="nav__main">-->
<div class="container">
<div class="row">
<div class="col-xs-10">
<nav class="nav__main" style="position:relative;">
<a href="/xsl/records/book/" class="logo-lhjmq"><img src="assets/img/logo-LHJMQ-border.png" style="max-height:46px;"></a>
<div class="nav1">
<a href="/xsl/records/book/index2.php?lang=<?=$f_lang;?>"><?= $lang['MENU_1']; ?></a>
<a href="#" class="record selected"><?= $lang['MENU_2']; ?></a>
<a href="http://www.lhjmq-records.qc.ca/lang_<?=$f_lang;?>/index.php?&page=3429" target="_blank"><?= $lang['MENU_3']; ?></a>
<a href="/xsl/records/book/index.php?lang=<?=$switch_lang;?>"><?=$switch_lang;?></a>
</div>
</nav>
</div>
<div class="col-xs-2">
<div style="float:right;margin-top:20px;"><a href="#menu" class="hamburger"><img src="assets/img/records/menu.svg" alt="" class="img-responsive center" /></a></div>
</div>
</div>
</div>
<!--</nav>-->
</div>
</div>
<nav id="menu">
<div>
<div class="text-right"><p><a href="#" class="close_menu"><img src="assets/img/records/close.svg" alt=""></a></p></div>
<? if($f_lang=="fr") { ?>
<div class="menu_wrap">
<div class="level1"><a href="http://www.lhjmq-records.qc.ca/xsl/records/book/index2.php?lang=fr">RECORDS</a></div>
<div class="level1"><a href="http://www.lhjmq-records.qc.ca/xsl/records/book/index.php?lang=fr">HISTORIQUE</a></div>
<div class="level1"><a href="http://www.lhjmq-records.qc.ca/lang_fr/index.php?&page=3429">NOS FRANCHISES</a></div>
<div class="level1"><a href="https://www.facebook.com/groups/729180980448730/" target="_blank">CLUB DES AMBASSADEURS</a></div>
<div class="level1"><a href="https://chl.ca/lhjmq/temple-renommee-fr/" target="_blank">TEMPLE DE LA RENOMMÉE</a></div>
<div class="level1"><a href="https://chl.ca/lhjmq/stats" target="_blank">STATISTIQUES</a></div>
<div class="level1"><a href="https://chl.ca/lhjmq/schedule" target="_blank">SOMMAIRES DES MATCHS</a></div>
<div class="level1"><a href="https://chl.ca/lhjmq/searchpeople" target="_blank">RECHERCHEZ UN JOUEUR</a></div>
<div class="level1"><a href="https://chl.ca/lhjmq/" target="_blank">SITE OFFICIEL</a></div>
<hr/>
<div class="level1"><a href="http://www.lhjmq-records.qc.ca/xsl/records/book/index.php?lang=<?=$switch_lang;?>"><?=$switch_lang;?></a></div>
</div>
<? } else { ?>
<div class="menu_wrap">
<div class="level1"><a href="http://www.lhjmq-records.qc.ca/xsl/records/book/index2.php?lang=en">RECORDS</a></div>
<div class="level1"><a href="http://www.lhjmq-records.qc.ca/xsl/records/book/index.php?lang=en">HISTORY</a></div>
<div class="level1"><a href="http://www.lhjmq-records.qc.ca/lang_en/index.php?&page=3429">OUR FRANCHISES</a></div>
<div class="level1"><a href="https://www.facebook.com/groups/729180980448730/" target="_blank">AMBASSADORS CLUB</a></div>
<div class="level1"><a href="http://theqmjhl.ca/hall-of-fame-en/" target="_blank">HALL OF FAME</a></div>
<div class="level1"><a href="http://theqmjhl.ca/stats/" target="_blank">STATISTICS</a></div>
<div class="level1"><a href="http://theqmjhl.ca/schedule/184" target="_blank">GAME SUMMARIES</a></div>
<div class="level1"><a href="http://theqmjhl.ca/searchpeople" target="_blank">SEARCH A PERSON</a></div>
<div class="level1"><a href="http://theqmjhl.ca/" target="_blank">OFFICIAL QMJHL WEBSITE</a></div>
<hr/>
<div class="level1"><a href="http://www.lhjmq-records.qc.ca/xsl/records/book/index.php?lang=<?=$switch_lang;?>"><?=$switch_lang;?></a></div>
</div>
<? } ?>
</div>
</nav>
<div id="skrollr-body">
<a name="top"></a>
<!-- ########################################################## hero ########################################################## -->
<div class="videoWrapper" id="hero" data-emit-events data--200-top="opacity: 1;" data-200-top-bottom="opacity: 0;">
<div class="pagetitle">
<p class="txt-subtitle"><a class="" href="/xsl/records/book/"><?= $lang['HEADER_SUBTITLE']; ?></a></p>
<h1 class="txt-title"><?= $lang['HEADER_TITLE']; ?></h1>
<p class="txt-desc"><?= $lang['HEADER_DESC']; ?></p>
<p class="txt-btn"><a href="#start" class="btn-down"><img src="assets/img/btn-down.svg"></a></p>
</div>
<video id="video-intro" width="100%" poster="assets/img/transparent.png" loop="true" autoplay="true" preload="metadata" muted="true" class="img-responsive">
<source src="assets/video/intro-optim.mp4" type="video/mp4">
</video>
</div>
<a name="start"></a>
<div class="year-box" id="year" data-start="@class:year-box pos-relative"";" data-75-top="@class:year-box pos-fixed"";" style="top:inherit;bottom:20px;">
<div>1969<br>1970</div>
</div>
<!-- ########################################################## 1 ########################################################## -->
<section data-section="1" class="histo">
<div class="container">
<div class="row">
<div class="col-sm-6 bloc--txt color-h2">
<div class="bloc--txt-right-bottom">
<h2><?= $lang['SECTION_1']['TXT_1']; ?></h2>
</div>
</div>
<div class="col-sm-6 bg-dark bloc--logo" data-anchor-target="#hero" data-bottom-top="transform: translate3d(0, -100px, 0);" data-top-bottom="transform: translate3d(0, 0, 0);">
<img src="assets/img/section1__69-70--map.png" class="img-responsive center-block">
</div>
</div><!-- /.row -->
</div><!-- /.container -->
<div class="bloc--logos">
<div class="container">
<div class="row">
<div class="col-sm-12 ">
<img src="assets/img/section1__c-1.png" class="img-responsive" data-bottom-top="opacity: 0; transform: scale(0);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section1__c-2.png" class="img-responsive" data-20-bottom-top="opacity: 0; transform: scale(0);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section1__c-3.png" class="img-responsive" data-40-bottom-top="opacity: 0; transform: scale(0);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section1__c-4.png" class="img-responsive" data-60-bottom-top="opacity: 0; transform: scale(0);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section1__c-5.png" class="img-responsive" data-80-bottom-top="opacity: 0; transform: scale(0);" data-center="opacity: 1; transform: scale(1);"><br>
<img src="assets/img/section1__c-6.png" class="img-responsive" data-100-bottom-top="opacity: 0; transform: scale(0);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section1__c-7.png" class="img-responsive" data-120-bottom-top="opacity: 0; transform: scale(0);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section1__c-8.png" class="img-responsive" data-140-bottom-top="opacity: 0; transform: scale(0);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section1__c-9.png" class="img-responsive" data-160-bottom-top="opacity: 0; transform: scale(0);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section1__c-10.png" class="img-responsive" data-180-bottom-top="opacity: 0; transform: scale(0);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section1__c-11.png" class="img-responsive" data-200-bottom-top="opacity: 0; transform: scale(0);" data-center="opacity: 1; transform: scale(1);">
<h3><?= $lang['SECTION_1']['TXT_2']; ?></h3>
<p><?= $lang['SECTION_1']['TXT_3']; ?></p>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div>
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6">
<img src="assets/img/section1__rlebel.png" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<p><strong><?= $lang['SECTION_1']['TXT_4']; ?></p>
<p><strong><?= $lang['SECTION_1']['TXT_5']; ?></p>
</div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12">
<h3><?= $lang['SECTION_1']['TXT_6']; ?></h3>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-3" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section1__gmeloche.jpg" class="img-responsive center-block"> <span class="legend"><?= $lang['SECTION_1']['TXT_7']; ?></span>
</div>
<div class="col-sm-3" data-bottom-top="opacity: 0; transform: translate3d(0, 120px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section1__loconnor.jpg" class="img-responsive center-block"> <span class="legend"><?= $lang['SECTION_1']['TXT_8']; ?></span>
</div>
<div class="col-sm-3" data-bottom-top="opacity: 0; transform: translate3d(0, 140px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section1__jlapierre.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_1']['TXT_9']; ?></span>
</div>
<div class="col-sm-3" data-bottom-top="opacity: 0; transform: translate3d(0, 160px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section1__glafleur-mfilion.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_1']['TXT_10']; ?></span>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(-400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section1__lsimard.jpg" class="img-responsive center-block">
<span class="legend translucide move-up"><?= $lang['SECTION_1']['TXT_11']; ?></span>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section1__leducrichard.jpg" class="img-responsive">
<!--<img class="b-lazy img-responsive center-block"
src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
data-src="assets/img/section1__leducrichard.jpg"
alt="Luc Simard"
/>-->
<span class="legend translucide move-up"><?= $lang['SECTION_1']['TXT_12']; ?></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 2 ########################################################## -->
<section data-section="2" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3 class="bloc--vertical bloc--vertical-right"><?= $lang['SECTION_2']['TXT_1']; ?></h3>
<div class="pad-40">
<div class="bloc--vertical bloc--vertical-ajust1"><span><?= $lang['SECTION_2']['TXT_2']; ?></span></div>
<img src="assets/img/section2__asavard.jpg" class="img-responsive img-circle" data-bottom-top="opacity: 0; transform: scale(0.75);" data-center="opacity: 1; transform: scale(1);">
</div>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section2__feuille.jpg" class="img-responsive align-center">
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(-400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<div class="bloc--vertical"><div class="pad-20"><?= $lang['SECTION_2']['TXT_3']; ?></div></div>
<img src="assets/img/section2__grad.jpg" class="img-responsive hidden-xs">
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section2__glafleur.jpg" class="img-responsive">
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<video preload="none" poster="assets/video/LHJMQ_JrsVedettes_HSTLigue_LafleurGuy.jpg" class="img-responsive center-block video-vedette" onended="videoEnded(this)">
<source src="assets/video/LHJMQ_JrsVedettes_HSTLigue_LafleurGuy.mp4" type="video/mp4">
</video>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section2__EQ_MemCpChampions1971.jpg" class="img-responsive">
<span class="legend translucide move-up"><p><strong><?= $lang['SECTION_2']['TXT_4']; ?></strong></p></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 3 ########################################################## -->
<section data-section="3" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="cover">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="bloc--txt" data-bottom-top="opacity: 0;" data-center="opacity: 1;" style="transform:translateY(25vh);">
<h2><?= $lang['SECTION_3']['TXT_1']; ?></h2>
<h3><?= $lang['SECTION_3']['TXT_2']; ?></h3>
<p><?= $lang['SECTION_3']['TXT_3']; ?></p>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.cover -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<h3><?= $lang['SECTION_3']['TXT_4']; ?></h3>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-3" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section3__pemond.jpg" class="img-responsive center-block"> <span class="legend"><?= $lang['SECTION_3']['TXT_5']; ?></span>
</div>
<div class="col-sm-3" data-bottom-top="opacity: 0; transform: translate3d(0, 120px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section3__rbrodeur.jpg" class="img-responsive center-block"> <span class="legend"><?= $lang['SECTION_3']['TXT_6']; ?></span>
</div>
<div class="col-sm-3" data-bottom-top="opacity: 0; transform: translate3d(0, 140px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section3__otessier.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_3']['TXT_7']; ?></span>
</div>
<div class="col-sm-3" data-bottom-top="opacity: 0; transform: translate3d(0, 160px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section3__dhawerchuk.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_3']['TXT_8']; ?></span>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<video preload="none" poster="assets/video/LHJMQ_JrsVedettes_HSTLigue_Hawerchuk.jpg" class="img-responsive center-block video-vedette" onended="videoEnded(this)">
<source src="assets/video/LHJMQ_JrsVedettes_HSTLigue_Hawerchuk.mp4" type="video/mp4">
</video>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 4 ########################################################## -->
<section data-section="4" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: scale(0.75);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section4__rsauve.jpg" class="img-responsive center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_4']['TXT_1']; ?></h3>
</div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_4']['TXT_2']; ?></h3>
<p><?= $lang['SECTION_4']['TXT_3']; ?></p>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: scale(0.75);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section4__jfsauve.jpg" class="img-responsive center-block">
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 5 ########################################################## -->
<section data-section="5" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6 cover1" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<h3><?= $lang['SECTION_5']['TXT_1']; ?></h3>
</div>
<div class="col-sm-6 cover2" data-bottom-top="opacity: 0; transform: translate3d(-100px, 200px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<h3><?= $lang['SECTION_5']['TXT_2']; ?></h3>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12 cover1b" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<h3><?= $lang['SECTION_5']['TXT_3']; ?></h3>
</div>
</div>
<div class="row row-spacing nospace">
<div class="col-sm-12">
<h3><?= $lang['SECTION_5']['TXT_4']; ?></h3>
</div>
</div>
<div class="row">
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section5__plarouche.jpg" class="img-responsive center-block"> <span class="legend translucide"><?= $lang['SECTION_5']['TXT_5']; ?></span>
</div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 120px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section5__mdeziel.jpg" class="img-responsive center-block"> <span class="legend translucide"><?= $lang['SECTION_5']['TXT_6']; ?></span>
</div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 140px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section5__jcossette.jpg" class="img-responsive center-block">
<span class="legend translucide"><?= $lang['SECTION_5']['TXT_7']; ?></span>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<video preload="none" poster="assets/video/LHJMQ_JrsVedettes_HSTLigue_LarouchePierre.jpg" class="img-responsive center-block video-vedette" onended="videoEnded(this)">
<source src="assets/video/LHJMQ_JrsVedettes_HSTLigue_LarouchePierre.mp4" type="video/mp4">
</video>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12 cover3" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<h3><?= $lang['SECTION_5']['TXT_8']; ?></h3>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 6 ########################################################## -->
<section data-section="6" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section6__jlphaneuf.jpg" class="img-responsive center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_6']['TXT_1']; ?></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_6']['TXT_2']; ?></h3>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<p><img src="assets/img/section6__jlphaneufintro.jpg" class="img-responsive"></p><br>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section6__jgagnon.jpg" class="img-responsive img-circle center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_6']['TXT_3']; ?></h3>
<p><?= $lang['SECTION_6']['TXT_4']; ?></p>
<p class="footnote"><?= $lang['SECTION_6']['TXT_5']; ?></p>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 7 ########################################################## -->
<section data-section="7" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6">
<div class="text-spacing">
<h3><?= $lang['SECTION_7']['TXT_1']; ?></h3>
</div>
<img src="assets/img/section7__mmarois.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(-400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<p class="legend"><?= $lang['SECTION_7']['TXT_2']; ?></p>
</div>
<div class="col-sm-6">
<div class="text-spacing">
<h3><?= $lang['SECTION_7']['TXT_3']; ?></h3>
</div>
<img src="assets/img/section7__ldeblois.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<p class="legend"><?= $lang['SECTION_7']['TXT_4']; ?></p>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6">
<div class="text-spacing">
<h3><?= $lang['SECTION_7']['TXT_5']; ?></h3>
<p><?= $lang['SECTION_7']['TXT_6']; ?></p>
</div>
<img src="assets/img/section7__ndupont.jpg" class="img-responsive img-circle center-block" data-bottom-top="opacity: 0; transform: translate3d(-400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
</div>
<div class="col-sm-6">
<div class="text-spacing">
<h3><?= $lang['SECTION_7']['TXT_7']; ?></h3>
</div>
<img src="assets/img/section7__pemond.jpg" class="img-responsive img-circle center-block" data-bottom-top="opacity: 0; transform: translate3d(400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_7']['TXT_8']; ?></h3>
<p><?= $lang['SECTION_7']['TXT_9']; ?></p>
<p class="footnote"><?= $lang['SECTION_7']['TXT_10']; ?></p>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section7__mbossy.jpg" class="img-responsive img-circle center-block">
</div>
</div><!-- /.row -->
</div><!-- /.container -->
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<video preload="none" poster="assets/video/LHJMQ_JrsVedettes_HSTLigue_BossyMichel.jpg" class="img-responsive center-block video-vedette" onended="videoEnded(this)">
<source src="assets/video/LHJMQ_JrsVedettes_HSTLigue_BossyMichel.mp4" type="video/mp4">
</video>
</div>
</div><!-- /.row -->
</div>
</section>
<!-- ########################################################## 8 ########################################################## -->
<section data-section="8" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<video preload="none" poster="assets/video/LHJMQ_JrsVedettes_HSTLigue_SavardCyrTremblay_TroisDenis.jpg" class="img-responsive center-block video-vedette" onended="videoEnded(this)">
<source src="assets/video/LHJMQ_JrsVedettes_HSTLigue_SavardCyrTremblay_TroisDenis.mp4" type="video/mp4">
</video>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-4">
<img src="assets/img/section8__tbernhardt.jpg" class="img-responsive img-rounded center-block" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<div class="text-spacing">
<h3><?= $lang['SECTION_8']['TXT_1']; ?></h3>
<p><?= $lang['SECTION_8']['TXT_2']; ?></p>
</div>
<p class="legend"><?= $lang['SECTION_8']['TXT_3']; ?></p>
</div>
<div class="col-sm-4">
<img src="assets/img/section8__3denis.jpg" class="img-responsive img-rounded center-block" data-bottom-top="opacity: 0; transform: translate3d(0, 200px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<div class="text-spacing">
<h3><?= $lang['SECTION_8']['TXT_4']; ?></h3>
</div>
<p class="legend"><?= $lang['SECTION_8']['TXT_5']; ?></p>
</div>
<div class="col-sm-4">
<img src="assets/img/section8__mgoulet.jpg" class="img-responsive img-rounded center-block" data-bottom-top="opacity: 0; transform: translate3d(0, 300px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<div class="text-spacing">
<h3><?= $lang['SECTION_8']['TXT_6']; ?></h3>
</div>
<p class="legend"><?= $lang['SECTION_8']['TXT_7']; ?></p>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<section data-section="81" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset" style="background:#9bbaea;">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12">
<div class="bloc--txt-center-top"><h4><?= $lang['SECTION_8']['TXT_12']; ?></h4></div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6">
<div class="text-spacing">
<h3><?= $lang['SECTION_8']['TXT_8']; ?></h3>
<p><?= $lang['SECTION_8']['TXT_9']; ?></p>
</div>
<img src="assets/img/section8__gguilbault.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(-400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
</div>
<div class="col-sm-6">
<div class="text-spacing">
<h3><?= $lang['SECTION_8']['TXT_10']; ?></h3>
<p><?= $lang['SECTION_8']['TXT_11']; ?></p>
</div>
<img src="assets/img/section8__gdelage.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
</div>
</div><!-- /.row -->
<div class="row" style="margin-top:30px;">
<div class="col-sm-12">
<p><img src="assets/img/section8__castor.jpg" class="img-responsive"></p><br>
<p class="legend move-up"><?= $lang['SECTION_8']['TXT_13']; ?></p><br><br>
</div>
</div><!-- /.row -->
</div>
</section>
<!-- ########################################################## 9 ########################################################## -->
<section data-section="9" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="cover">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="bloc--txt" data-bottom-top="opacity: 0;" data-center="opacity: 1;" style="transform:translateY(25vh);">
<p><?= $lang['SECTION_9']['TXT_1']; ?></p>
<h2><?= $lang['SECTION_9']['TXT_2']; ?></h2>
<h3><?= $lang['SECTION_9']['TXT_3']; ?></h3>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.cover -->
<div class="container">
<div class="row row-spacing">
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section9__mbergeron.jpg" class="img-responsive center-block"> <span class="legend move-up"><?= $lang['SECTION_9']['TXT_4']; ?></span>
</div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 120px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section9__placroix.jpg" class="img-responsive center-block"> <span class="legend move-up"><?= $lang['SECTION_9']['TXT_5']; ?></span>
</div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 140px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section9__jcloutier.jpg" class="img-responsive center-block">
<span class="legend move-up"><?= $lang['SECTION_9']['TXT_6']; ?></span>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6">
<img src="assets/img/section9__klowe.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<div class="text-spacing">
<h3><?= $lang['SECTION_9']['TXT_7']; ?></h3>
<h4><?= $lang['SECTION_9']['TXT_8']; ?></h4>
</div>
<p><?= $lang['SECTION_9']['TXT_9']; ?></p>
</div>
<div class="col-sm-6">
<img src="assets/img/section9__rbourque.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(0, 120px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<div class="text-spacing">
<h3><?= $lang['SECTION_9']['TXT_10']; ?></h3>
<h4><?= $lang['SECTION_9']['TXT_11']; ?></h4>
</div>
<p><?= $lang['SECTION_9']['TXT_12']; ?></p>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 10 ########################################################## -->
<section data-section="10" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6">
<div class="cover1" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);" style="max-height:498px;">
<h3><?= $lang['SECTION_10']['TXT_1']; ?></h3>
</div>
<p><span class="legend translucide"><?= $lang['SECTION_10']['TXT_2']; ?></span></p>
</div>
<div class="col-sm-6">
<div class="cover2" data-bottom-top="opacity: 0; transform: translate3d(-100px, 200px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);" style="max-height:498px;">
<h3><?= $lang['SECTION_10']['TXT_3']; ?></h3>
</div>
<p><span class="legend translucide"><?= $lang['SECTION_10']['TXT_4']; ?></span></p>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_10']['TXT_5a']; ?></h3>
<p><?= $lang['SECTION_10']['TXT_5']; ?></p>
<p><?= $lang['SECTION_10']['TXT_6']; ?></p>
</div>
</div>
<div class="col-sm-6">
<img src="assets/img/section10__naubin.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 11 ########################################################## -->
<section data-section="11" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6">
<img src="assets/img/section11__jrougeau.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_11']['TXT_1a']; ?></h3>
<p><?= $lang['SECTION_11']['TXT_1']; ?></p>
<p><?= $lang['SECTION_11']['TXT_2']; ?></p>
</div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_11']['TXT_3a']; ?></h3>
<p><?= $lang['SECTION_11']['TXT_3']; ?></p>
<p><?= $lang['SECTION_11']['TXT_4']; ?></p>
</div>
</div>
<div class="col-sm-6">
<img src="assets/img/section11__cverret.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 12 ########################################################## -->
<section data-section="12" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<video preload="none" width="100%" poster="assets/video/LHJMQ_JrsVedettes_HSTLigue_LafontainePat.jpg" class="img-responsive center-block video-vedette" onended="videoEnded(this)">
<source src="assets/video/LHJMQ_JrsVedettes_HSTLigue_LafontainePat.mp4" type="video/mp4">
</video>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6">
<img src="assets/img/section12__jplafontaine.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(-100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<div class="text-spacing">
<h3><?= $lang['SECTION_12']['TXT_1']; ?></h3>
</div>
</div>
<div class="col-sm-6">
<img src="assets/img/section12__jplafontaine2.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(100px, 120px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<div class="text-spacing">
<h3><?= $lang['SECTION_12']['TXT_2']; ?></h3>
<p><?= $lang['SECTION_12']['TXT_3']; ?></p>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 13 ########################################################## -->
<section data-section="13" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="cover">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="bloc--txt-intro" data-bottom-top="opacity: 0;" data-center="opacity: 1;">
<h2><?= $lang['SECTION_13']['TXT_1']; ?></h2>
<h3><?= $lang['SECTION_13']['TXT_2']; ?></h3>
<p><?= $lang['SECTION_13']['TXT_3']; ?></p>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.cover -->
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<video preload="none" poster="assets/video/LHJMQ_JrsVedettes_HSTLigue_LemieuxMario.jpg" class="img-responsive center-block video-vedette" onended="videoEnded(this)">
<source src="assets/video/LHJMQ_JrsVedettes_HSTLigue_LemieuxMario.mp4" type="video/mp4">
</video>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section13__lemieux.jpg" class="img-responsive">
<span class="legend translucide move-up"><?= $lang['SECTION_13']['TXT_4']; ?></span>
<br><br>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section13__vdamphouse.jpg" class="img-responsive img-circle center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_13']['TXT_5']; ?></h3>
<p><?= $lang['SECTION_13']['TXT_6']; ?></p>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 14 ########################################################## -->
<section data-section="14" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section14__wgretzky.jpg" class="img-responsive">
<span class="legend translucide"><?= $lang['SECTION_14']['TXT_1']; ?></span>
</div>
</div>
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section14__hcharles.jpg" class="img-responsive img-rounded center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_14']['TXT_2']; ?></h3>
<p><?= $lang['SECTION_14']['TXT_3']; ?></p>
</div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_14']['TXT_4']; ?></h3>
<p><?= $lang['SECTION_14']['TXT_5']; ?></p>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section14__clemieux.jpg" class="img-responsive img-rounded center-block">
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section14__sduchesne.jpg" class="img-responsive img-rounded center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_14']['TXT_6']; ?></h3>
<p><?= $lang['SECTION_14']['TXT_7']; ?></p>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 15 ########################################################## -->
<section data-section="15" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12">
<h3><?= $lang['SECTION_15']['TXT_1']; ?></h3>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6">
<img src="assets/img/section15__gcourteau.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<span class="legend"><?= $lang['SECTION_15']['TXT_2']; ?></span>
</div>
<div class="col-sm-6">
<div class="text-spacing">
<p><?= $lang['SECTION_15']['TXT_3']; ?></p>
</div>
<img src="assets/img/section15__gcourteau2.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_15']['TXT_4']; ?></h3>
<p><?= $lang['SECTION_15']['TXT_5']; ?></p>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section15__pburn.jpg" class="img-responsive center-block">
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="pad-20 bloc--txt"><h3><?= $lang['SECTION_15']['TXT_6']; ?></h3></div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section15__lrobitaille.jpg" class="img-responsive center-block">
<span class="legend"><strong><?= $lang['SECTION_15']['TXT_7']; ?></strong></span>
</div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 120px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section15__grouleau.jpg" class="img-responsive center-block">
<span class="legend"><strong><?= $lang['SECTION_15']['TXT_8']; ?></strong></span>
</div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 140px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section15__scote.jpg" class="img-responsive center-block">
<span class="legend"><strong><?= $lang['SECTION_15']['TXT_9']; ?></strong></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 16 ########################################################## -->
<section data-section="16" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section16__mfortier.jpg" class="img-responsive img-rounded center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_16']['TXT_1']; ?></h3>
<p><?= $lang['SECTION_16']['TXT_2']; ?></p>
</div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_16']['TXT_3']; ?></h3>
<p><?= $lang['SECTION_16']['TXT_4']; ?></p>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section16__sturgeon.jpg" class="img-responsive img-rounded center-block">
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section16__1erchoix_1122x1224.jpg" class="img-responsive">
<span class="legend translucide"><?= $lang['SECTION_16']['TXT_5']; ?></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 17 ########################################################## -->
<section data-section="17" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section17__lefevre-lebeau.jpg" class="img-responsive">
<span class="legend translucide"><?= $lang['SECTION_17']['TXT_1']; ?></span>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6">
<h3 class="bloc--vertical bloc--vertical-right"><?= $lang['SECTION_17']['TXT_2']; ?></h3>
<div class="pad-40">
<div class="bloc--vertical bloc--vertical-ajust1"><span><?= $lang['SECTION_17']['TXT_3']; ?></span></div>
<img src="assets/img/section17__edesjardins.jpg" class="img-responsive img-circle" data-bottom-top="opacity: 0; transform: scale(0.75);" data-center="opacity: 1; transform: scale(1);">
</div>
</div>
</div><!-- /.row -->
<div class="row ">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(-400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<div class="bloc--vertical"><div class="pad-20"><?= $lang['SECTION_17']['TXT_4']; ?></div></div>
<img src="assets/img/section2__grad.jpg" class="img-responsive hidden-xs">
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section17__mgelinas.jpg" class="img-responsive">
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 18 ########################################################## -->
<section data-section="18" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section18__pbrisebois.jpg" class="img-responsive img-rounded center-block">
</div>
<div class="col-sm-6">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_18']['TXT_1a']; ?></h3>
<p><?= $lang['SECTION_18']['TXT_1']; ?></p>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 19 ########################################################## -->
<section data-section="19" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_19']['TXT_1']; ?></h3>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section19__fpotvin.jpg" class="img-responsive img-circle center-block">
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="pad-20 bloc--txt"><h3><?= $lang['SECTION_19']['TXT_2']; ?></h3></div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section19__mbiron.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_19']['TXT_3']; ?></span>
</div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 120px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section19__pcouture.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_19']['TXT_4']; ?></span>
</div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 140px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section19__nriopel.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_19']['TXT_5']; ?></span>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section19__yperreault.jpg" class="img-responsive img-circle center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_19']['TXT_6']; ?></h3>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 20 ########################################################## -->
<section data-section="20" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section20__mrheaume.jpg" class="img-responsive">
<span class="legend translucide"><?= $lang['SECTION_20']['TXT_1']; ?></span>
</div>
</div>
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section20__mbrodeur.jpg" class="img-responsive">
<span class="legend translucide"><?= $lang['SECTION_20']['TXT_2']; ?></span>
<span class="framing"><?= $lang['SECTION_20']['TXT_3']; ?></span>
</div>
</div>
</div><!-- /.container -->
</section>
<!-- ########################################################## 21 ########################################################## -->
<section data-section="21" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6">
<img src="assets/img/section21__rlapointe.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(100px, 120px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
</div>
<div class="col-sm-6 text-left">
<h2><?= $lang['SECTION_21']['TXT_1']; ?></h2>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12">
<h3 class="pad-20"><?= $lang['SECTION_21']['TXT_2']; ?></h3>
<img src="assets/img/section21__rlapointe-cataractes.jpg" class="img-responsive center-block" data-bottom-top="opacity: 0; transform: translate3d(-100px, 120px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_21']['TXT_3']; ?></h3>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section21__mlapointe.jpg" class="img-responsive center-block">
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(-100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section21__titanlaval.jpg" class="img-responsive center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_21']['TXT_4']; ?></h3>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 22 ########################################################## -->
<section data-section="22" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12">
<h3><?= $lang['SECTION_22']['TXT_1']; ?></h3>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: scale(0.5);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section22__bblackned.jpg" class="img-responsive img-circle center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_22']['TXT_2']; ?></h3>
</div>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: scale(0.5) rotate(15deg);" data-center="opacity: 1; transform: scale(1) rotate(0deg);">
<img src="assets/img/section22__mooseheads9495.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_22']['TXT_3']; ?></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 23 ########################################################## -->
<section data-section="23" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="cover" data-bottom-top="opacity: 0;" data-center="opacity: 1;">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="bloc--txt-intro" data-bottom-top="opacity: 0;" data-center="opacity: 1;">
<h2><?= $lang['SECTION_23']['TXT_1']; ?></h2>
<h3><?= $lang['SECTION_23']['TXT_2']; ?></h3>
<h4><?= $lang['SECTION_23']['TXT_3']; ?></h4>
<p><?= $lang['SECTION_23']['TXT_4']; ?></p>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.cover -->
</section>
<!-- ########################################################## 24 ########################################################## -->
<section data-section="24" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12">
<h2><?= $lang['SECTION_24']['TXT_1']; ?></h2>
<h3><?= $lang['SECTION_24']['TXT_2']; ?></h3>
<h4><?= $lang['SECTION_24']['TXT_3']; ?></h4>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section24__predateurs9596.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_24']['TXT_4']; ?></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 25 ########################################################## -->
<section data-section="25" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section25__dbriere.jpg" class="img-responsive center-block">
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12">
<h3><?= $lang['SECTION_25']['TXT_1']; ?></h3>
<h4><?= $lang['SECTION_25']['TXT_2']; ?></h4>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: scale(0.5);" data-center="opacity: 1; transform: scale(1);">
<video preload="none" poster="assets/video/LHJMQ_JrsVedettes_HSTLigue_BriereDaniel.jpg" class="img-responsive center-block video-vedette" onended="videoEnded(this)">
<source src="assets/video/LHJMQ_JrsVedettes_HSTLigue_BriereDaniel.mp4" type="video/mp4">
</video>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-12 bloc--txt">
<div class="framing">
<h4><?= $lang['SECTION_25']['TXT_3']; ?></h4>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 26 ########################################################## -->
<section data-section="26" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_26']['TXT_1']; ?></h3>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section26__mlachapelle.jpg" class="img-responsive img-rounded center-block">
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section26__LHJMQ_temple9899.jpg" class="img-responsive img-rounded center-block">
<span class="legend translucide"><?= $lang['SECTION_26']['TXT_2']; ?></span>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section26__llachapelle.jpg" class="img-responsive img-rounded center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_26']['TXT_3']; ?></h3>
<p><?= $lang['SECTION_26']['TXT_4']; ?></p>
</div>
</div>
</div><!-- /.row -->
</div>
</section>
<!-- ########################################################## 27 ########################################################## -->
<section data-section="27" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6">
<div class="cover1" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);" style="position:relative;padding-top:25vh;">
<h3><?= $lang['SECTION_27']['TXT_1']; ?></h3>
<span class="legend translucide" style="background:#f5f5f5!important;color:#3B367D!important;position:absolute;bottom:0;"><?= $lang['SECTION_27']['TXT_2']; ?></span>
</div>
</div>
<div class="col-sm-6">
<div class="cover2" data-bottom-top="opacity: 0; transform: translate3d(-100px, 200px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);" style="position:relative;padding-top:25vh;">
<h3><?= $lang['SECTION_27']['TXT_3']; ?></h3>
<span class="legend translucide" style="background:#f5f5f5!important;color:#3B367D!important;position:absolute;bottom:0;"><?= $lang['SECTION_27']['TXT_4']; ?></span>
</div>
</div>
</div><!-- /.row -->
<!-- insert fix -->
<div class="row row-spacing fix-mar-top-80">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(-100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section27__brichards.jpg" class="img-responsive img-circle center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_27']['TXT_5']; ?></h3>
</div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_27']['TXT_6']; ?></h3>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section27__DLabonte-MTanguay.jpg" class="img-responsive img-circle center-block">
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 28 ########################################################## -->
<section data-section="28" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_28']['TXT_1']; ?></h3>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section28__sgamache.jpg" class="img-responsive center-block">
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section28__sgamache-foreurs.jpg" class="img-responsive center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_28']['TXT_2']; ?></h3>
</div>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_28']['TXT_3']; ?></h3>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section28__mabergeron.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_28']['TXT_4']; ?></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 29 ########################################################## -->
<section data-section="29" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section29__dgroulx.jpg" class="img-responsive img-rounded center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_29']['TXT_1']; ?></h3>
<p><?= $lang['SECTION_29']['TXT_2']; ?></p>
</div>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="pad-20 bloc--txt"><h3><?= $lang['SECTION_29']['TXT_3']; ?></h3></div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section29__rpicard.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_29']['TXT_4']; ?></span>
</div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 120px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section29__psevigny.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_29']['TXT_5']; ?></span>
</div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 140px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section29__bcampbell.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_29']['TXT_6']; ?></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 30 ########################################################## -->
<section data-section="30" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_30']['TXT_1']; ?></h3>
<p><?= $lang['SECTION_30']['TXT_2']; ?></p>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section30__mvaillancourt.jpg" class="img-responsive img-rounded center-block">
</div>
</div><!-- /.row -->
<div class="row">
<div class="pad-20 bloc--txt"><h3><?= $lang['SECTION_30']['TXT_3']; ?></h3></div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section30__pdesgagne.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_30']['TXT_4']; ?></span>
</div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 120px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section30__rtrottier.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_30']['TXT_5']; ?></span>
</div>
<div class="col-sm-4" data-bottom-top="opacity: 0; transform: translate3d(0, 140px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section30__ncaisse.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_30']['TXT_6']; ?></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 31 ########################################################## -->
<section data-section="31" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section31__mtalbot.jpg" class="img-responsive img-circle center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_31']['TXT_1']; ?></h3>
<p><?= $lang['SECTION_31']['TXT_2']; ?></p>
</div>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_31']['TXT_3']; ?></h3>
<p><?= $lang['SECTION_31']['TXT_4']; ?></p>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section31__msaumier.jpg" class="img-responsive img-circle center-block">
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 32 ########################################################## -->
<section data-section="32" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="cover" data-bottom-top="opacity: 0;" data-center="opacity: 1;"></div><!-- /.cover -->
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12">
<div data-bottom-top="opacity: 0;" data-center="opacity: 1;">
<h2><?= $lang['SECTION_32']['TXT_1']; ?></h2>
<h3><?= $lang['SECTION_32']['TXT_2']; ?></h3>
<p><?= $lang['SECTION_32']['TXT_3']; ?></p>
</div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section32__scrosby-trophes.jpg" class="img-responsive">
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(-100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<video preload="none" poster="assets/video/LHJMQ_JrsVedettes_HSTLigue_CrosbySidney.jpg" class="img-responsive center-block video-vedette" onended="videoEnded(this)">
<source src="assets/video/LHJMQ_JrsVedettes_HSTLigue_CrosbySidney.mp4" type="video/mp4">
</video>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section32__oceanic20042005.jpg" class="img-responsive">
<span class="legend translucide move-up"><?= $lang['SECTION_32']['TXT_4']; ?></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 33 ########################################################## -->
<section data-section="33" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section33__aradulov.jpg" class="img-responsive img-circle center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_33']['TXT_1']; ?></h3>
<p><?= $lang['SECTION_33']['TXT_2']; ?></p>
</div>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section33__rempart1.jpg" class="img-responsive">
<span class="legend translucide"><p><?= $lang['SECTION_33']['TXT_3']; ?></p></span>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section33__rempart2.jpg" class="img-responsive">
<span class="legend translucide"><?= $lang['SECTION_33']['TXT_4']; ?></span>
</div>
</div><!-- /.row -->
</div>
</section>
<!-- ########################################################## 34 ########################################################## -->
<section data-section="34" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_34']['TXT_1']; ?></h3>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section34__cgiroux.jpg" class="img-responsive img-rounded center-block">
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<p><img src="assets/img/section34__bgroulx.jpg" class="img-responsive img-rounded center-block"></p>
<span class="legend translucide move-up"><?= $lang['SECTION_34']['TXT_2']; ?></span>
<br><br>
</div>
</div><!-- /.row -->
</div>
</section>
<!-- ########################################################## 35 ########################################################## -->
<section data-section="35" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12 text-left">
<h3><img src="assets/img/section35__rmartel.jpg" class="pull-left pad-0-20" data-bottom-top="opacity: 0; transform: rotate(-20deg) translate3d(0, 100px, 0);" data-center="opacity: 1; transform: rotate(0deg) translate3d(0, 0, 0);"><br><?= $lang['SECTION_35']['TXT_1']; ?></h3>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<h3><?= $lang['SECTION_35']['TXT_2']; ?></h3>
</div>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section35__trophe.jpg" class="img-responsive center-block">
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section35__ggallant.jpg" class="img-responsive center-block">
</div>
<div class="col-sm-12 bloc--txt">
<h3><?= $lang['SECTION_35']['TXT_3']; ?></h3>
<h4 class="pad-20"><?= $lang['SECTION_35']['TXT_4']; ?></h4>
</div>
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<span class="legend"><?= $lang['SECTION_35']['TXT_5']; ?></span>
<img src="assets/img/section35__records.jpg" class="img-responsive center-block">
</div>
</div><!-- /.row -->
</div>
</section>
<!-- ########################################################## 36 ########################################################## -->
<section data-section="36" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12">
<h3><?= $lang['SECTION_36']['TXT_1']; ?></h3>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section36__2011.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_36']['TXT_2']; ?></span>
</div>
</div><!-- /.row -->
<div>
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(-100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section36__2012.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_36']['TXT_3']; ?></span>
</div>
</div><!-- /.row -->
<div>
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section36__2013.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_36']['TXT_4']; ?></span>
</div>
</div><!-- /.row -->
</div>
</section>
<!-- ########################################################## 37 ########################################################## -->
<section data-section="37" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="cover" data-bottom-top="opacity: 0;" data-center="opacity: 1;">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="bloc--txt-intro" data-bottom-top="opacity: 0;" data-center="opacity: 1;">
<h2><?= $lang['SECTION_37']['TXT_1']; ?></h2>
<h3><?= $lang['SECTION_37']['TXT_2']; ?></h3>
<p><?= $lang['SECTION_37']['TXT_3']; ?></p>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.cover -->
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section37__proy-2.jpg" class="img-responsive img-circle center-block">
</div>
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-left-top">
<h3><?= $lang['SECTION_37']['TXT_4']; ?></h3>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 38 ########################################################## -->
<section data-section="38" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section38__jdrouin.jpg" class="img-responsive center-block">
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12">
<h3><?= $lang['SECTION_38']['TXT_1']; ?></h3>
<h4><?= $lang['SECTION_38']['TXT_2']; ?></h4>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 39 ########################################################## -->
<section data-section="39" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12">
<h3><?= $lang['SECTION_39']['TXT_1']; ?></h3>
<h4><?= $lang['SECTION_39']['TXT_2']; ?></h4>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<p><img src="assets/img/section39__zfucale.jpg" class="img-responsive center-block"></p><br>
</div>
</div><!-- /.row -->
<div class="row" class="fix-mar-top-40">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<p><img src="assets/img/section39__lpguindon.jpg" class="img-responsive center-block"></p><br>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12">
<h3><?= $lang['SECTION_39']['TXT_3']; ?></h3>
<h4><?= $lang['SECTION_39']['TXT_4']; ?></h4>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section39__rdesjardins.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_39']['TXT_5']; ?></span>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section39__dtremblay.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_39']['TXT_6']; ?></p></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 40 ########################################################## -->
<section data-section="40" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(-400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section40__echarron.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_40']['TXT_1']; ?></span>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section40__scarpentier.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_40']['TXT_2']; ?></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
<div class="bg-variance">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-7 bloc--txt">
<div class="bloc--txt-right-bottom">
<?php if($f_lang=="fr") { ?>
<h3 style="line-height:3rem;"><span style="font-size:2rem;">Le gardien</span><br>Chase Marchand<br><span style="font-size:2rem;">renouvelle les records des séries</span></h3>
<p>Moyenne de buts alloués sensationnelle<br><span style="font-size:2.2rem;">1,35</span></p>
<p>Pourcentage d'arrêts de<br><span style="font-size:2.2rem;">,938</span></p>
<p><span style="font-size:2.2rem;">6</span><br>blanchissages au total</p>
<p>Une séquence sans allouer de buts de<br><span style="font-size:2.2rem;">223</span><br>minutes et 23 secondes!</p>
<?php } else { ?>
<h3 style="line-height:3rem;"><span style="font-size:2rem;">The goaltender</span><br>Chase Marchand<br><span style="font-size:2rem;">signed new QMJHL records during the 2016 Playoffs!</span></h3>
<p>Goals against average<br><span style="font-size:2.2rem;">1.35</span></p>
<p>Save Percentage<br><span style="font-size:2.2rem;">.938</span></p>
<p>Shutouts<br><span style="font-size:2.2rem;">6</span></p>
<p>Streak - No goal allowed during<br><span style="font-size:2.2rem;">223</span><br>minutes and 23 seconds!</p>
<?php } ?>
</div>
</div>
<div class="col-sm-5" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/records/marchand-chase.jpg" class="img-responsive img-rounded center-block">
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(-400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/records/fitz-patrick-evan.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_40']['TXT_4']; ?></span>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section40__sgirard.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_40']['TXT_5']; ?></span>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section40__MorandVelenoComtois.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_40']['TXT_7']; ?></span>
<br>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div>
</section>
<!-- ########################################################## 41 ########################################################## -->
<section data-section="41" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: scale(0.5) rotate(15deg);" data-center="opacity: 1; transform: scale(1) rotate(0deg);">
<img src="assets/img/section41__champions2017.jpg" class="img-responsive center-block">
<span class="legend">
<?= $lang['SECTION_41']['TXT_1']; ?>
<?= $lang['SECTION_41']['TXT_2']; ?>
</span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 42 ########################################################## -->
<section data-section="42" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-md-8" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section42__intronisation2018.jpg" class="img-responsive center-block">
<span class="legend">
<?= $lang['SECTION_42']['TXT_3']; ?>
<?= $lang['SECTION_42']['TXT_4']; ?>
</span>
</div>
<div class="col-md-3 col-md-offset-1 this_spacing" data-bottom-top="opacity: 0; transform: scale(0.5);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section42__eric_taylor.jpg" class="img-responsive img-circle center-block">
<span class="legend legend--smaller">
<?= $lang['SECTION_42']['TXT_5']; ?>
</span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
<div class="bg-variance">
<div class="container">
<div class="row row-spacing">
<div class="col-md-12">
<h3><?= $lang['SECTION_42']['TXT_6']; ?></h3>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section42__champions2018.jpg" class="img-responsive center-block">
<span class="legend">
<?= $lang['SECTION_42']['TXT_7']; ?>
</span>
</div>
</div>
</div><!-- /.container -->
</div>
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(-100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<h2><?= $lang['SECTION_42']['TXT_8']; ?></h2>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section42__champions2018-2.jpg" class="img-responsive">
<span class="legend opaque move-up"><p><?= $lang['SECTION_42']['TXT_9']; ?></p></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 43 ########################################################## -->
<section data-section="43" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: scale(0.5) rotate(15deg);" data-center="opacity: 1; transform: scale(1) rotate(0deg);">
<img src="assets/img/section43__logo50.png" class="img-responsive center-block">
<!--
<div class="framing">
<h4><?= $lang['SECTION_43']['TXT_1']; ?></h4>
</div>
-->
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(-100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<video preload="none" poster="assets/video/LHJMQ_50ans.jpg" class="img-responsive center-block video-vedette video-shadow" onended="videoEnded(this)">
<source src="assets/video/LHJMQ_50ans.mp4" type="video/mp4">
</video>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section43__Top50_1969_2019.png" class="img-responsive center-block">
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(-100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<h2><?= $lang['SECTION_43']['TXT_3']; ?></h2>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section43__ROU_BANNIERES_RECORDS_<?= $f_lang ?>.png" class="img-responsive center-block">
</div>
</div><!-- /.row -->
</div><!-- /.container -->
<div class="bg-variance">
<div class="container">
<div class="row row-spacing">
<div class="col-md-8" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<?= $lang['SECTION_43']['TXT_5']; ?>
<img src="assets/img/section43__LHJMQ_intronisation2019TempleRenommee.jpg" class="img-responsive center-block">
<span class="legend">
<?= $lang['SECTION_43']['TXT_6']; ?>
<?= $lang['SECTION_43']['TXT_7']; ?>
</span>
</div>
<div class="col-md-4 this_spacing" data-bottom-top="opacity: 0; transform: scale(0.5);" data-center="opacity: 1; transform: scale(1);">
<img src="assets/img/section43__MurrayRobert_AurelJoliat_RecrueAnnee_197172.jpg" class="img-responsive center-block">
<span class="legend legend--smaller">
<?= $lang['SECTION_43']['TXT_8']; ?>
</span>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-12">
<h3><?= $lang['SECTION_43']['TXT_9']; ?></h3>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section43__LHJMQ_MurChampions_CoupeMemorial2019.jpg" class="img-responsive center-block">
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.bg-variance -->
</section>
<!-- ########################################################## 44 ########################################################## -->
<section data-section="44" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row" class="fix-mar-top-40">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<p><img src="assets/img/section44__she_champion_troph_jrougeau_51_victoires_2_20200320_credit_yanka_dumas_cadre.jpg" class="img-responsive center-block"></p><br>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12">
<h3><?= $lang['SECTION_44']['TXT_1']; ?></h3>
<h4><?= $lang['SECTION_44']['TXT_2']; ?></h4>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 45 ########################################################## -->
<section data-section="45" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section45__ellis-lemieux.jpg" class="img-responsive">
<span class="legend translucide"><?= $lang['SECTION_45']['TXT_1']; ?></span>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6">
<h3 class="bloc--vertical bloc--vertical-right"><?= $lang['SECTION_45']['TXT_2']; ?></h3>
<div class="pad-40">
<div class="bloc--vertical bloc--vertical-ajust1"></div>
<img src="assets/img/section45__champions_regular_season_202021_min.png" class="img-responsive img-circle" data-bottom-top="opacity: 0; transform: scale(0.75);" data-center="opacity: 1; transform: scale(1);">
</div>
</div>
</div><!-- /.row -->
<div class="row ">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(-400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<div class="bloc--vertical"><div class="pad-20"><?= $lang['SECTION_45']['TXT_3']; ?></div></div>
<img src="assets/img/section2__grad.jpg" class="img-responsive hidden-xs">
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section45__vic_champions_coupe_president2021_carre.jpg" class="img-responsive">
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 46 ########################################################## -->
<section data-section="46" class="histo" data-bottom-top="@class:histo active" data-top-bottom="@class: " data-edge-strategy="reset">
<div class="container">
<?/*
<div class="row row-spacing">
<div class="col-sm-12">
<h2><?= $lang['SECTION_46']['TXT_1']; ?></h2>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(-400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section44__RIM_LafreniereAlexis_201920.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_46']['TXT_2']; ?></span>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section44__CHA_CormierLukas_201920.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_46']['TXT_3']; ?></span>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: translate3d(0, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section44__SHA_CoulombeAntoine_201920.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_46']['TXT_4']; ?></span>
<br>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(-400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section44__SHE_PoulinSamuel_201920.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_46']['TXT_5']; ?></span>
</div>
<div class="col-sm-6" data-bottom-top="opacity: 0; transform: translate3d(400px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="assets/img/section44__MON_PelletierJakob_201920.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_46']['TXT_6']; ?></span>
</div>
</div><!-- /.row -->
*/?>
<div class="row row-spacing">
<div class="col-sm-12" data-bottom-top="opacity: 0; transform: scale(0.5) rotate(15deg);" data-center="opacity: 1; transform: scale(1) rotate(0deg);">
<img src="assets/img/section46__crosby_lafleur.jpg" class="img-responsive center-block">
<span class="legend">
<?= $lang['SECTION_46']['TXT_7']; ?>
<?= $lang['SECTION_46']['TXT_8']; ?>
</span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<?php
// shorten url for twitter
$url = urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);
$fp = fopen( 'http://tinyurl.com/api-create.php?url='.$url, 'r');
if($fp) {
$tinyurl = fgets($fp);
if($tinyurl && !empty($tinyurl)) {
// if we get a response set the new short URL variable
$returnurl = $tinyurl;
fclose($fp);
}
}
//echo $returnurl;
?>
<!-- ########################################################## footer ########################################################## -->
<footer class="end">
<p><a href="#top" title="Haut de page" class="btn-up"><img src="assets/img/btn-up.svg"></a></p>
<!-- Facebook -->
<div class="sharing-btns">
<p class="pad-20"><?= $lang['FOOTER_SHARE']; ?></p>
<a href="http://www.facebook.com/sharer.php?u=<?=urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'])?>" target="_blank" class="sharing facebook"></a>
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?url=<?=$returnurl?>&text=<?= $lang['META_TITLE']; ?>&hashtags=<?=($_SESSION['lang']=="fr")?"LHJMQ":"QMJHL"?>" target="_blank" class="sharing twitter"></a>
</div>
<? if($f_lang=="fr") { ?>
<p class="legal"><small>© <?= date("Y"); ?> <?= $lang['FOOTER_LEGAL']; ?></small> <a href="https://www.facebook.com/LHJMQPageOfficielle/" target="_blank" style="margin:0 10px;"><img src="assets/img/facebook.png"></a><a href="https://twitter.com/lhjmq" target="_blank"><img src="assets/img/twitter.png"></a></p>
<? } else { ?>
<p class="legal"><small>© <?= date("Y"); ?> <?= $lang['FOOTER_LEGAL']; ?></small> <a href="https://www.facebook.com/qmjhl" target="_blank" style="margin:0 10px;"><img src="assets/img/facebook.png"></a><a href="https://twitter.com/qmjhl" target="_blank"><img src="assets/img/twitter.png"></a></p>
<? } ?>
</footer>
</div><!-- /#skrollr-body -->
<script src="assets/js/vendor/rAF.min.js"></script>
<script src="assets/js/vendor/skrollr.min.js"></script>
<script>
// video intro stuff
var vid = document.getElementById("video-intro");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
//
// Reshow the poster frame when a video end
function videoEnded(video) {
video.load();
};
//
// START: JQUERY DOM READY
$(document).ready(function() {
// Start loading html5 video for Chrome.
var videointro = document.getElementById("video-intro");
// Show loading animation.
var playPromise = videointro.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
// Click the poster image for HTML5 video plays
$("video.video-vedette").click(function(e){
//stop all videos from playing
$('video.video-vedette').not(this).each(function() {
$(this).get(0).load();
});
// toggles play / pause
this.paused ? this.play() : this.pause();
});
//
// Btn top of page
$("a[href='#top']").click(function(e) {
//e.preventDefault();
if( $('html').hasClass('no-touchevents') ) {
$('html, body').animate({ scrollTop: 0 }, "slow");
return false;
}
});
// Btn content of page
$("a[href='#start']").click(function(e) {
//e.preventDefault();
if( $('html').hasClass('no-touchevents') ) {
$('html, body').animate({ scrollTop: $("section[data-section='1']").offset().top-100 }, "slow");
return false;
}
});
});
// END: JQUERY DOM READY.
function deactivateSkrollr() {
var s = skrollr.init();
s.destroy();
}
function activateSkrollr() {
window.onload = function() {
var s = skrollr.init({
forceHeight: false,
keyframe: function(element, name, direction) {
//name will be one of data500, dataTopBottom, data_offsetCenter
//console.log(name);
if (name === "data-200Top") {
playVid();
}
if (name === "data200TopBottom") {
pauseVid();
}
},
render: function(data) {
//Lazy load img
/*
var bLazy = new Blazy({
//container: '#skrollr-body' // Default is window
});
*/
}
});
} //end.onload
}
// CONDITION: EXECUTE ONLY ON LARGE SCREEN
// debulked onresize handler
function on_resize(c,t){onresize=function(){clearTimeout(t);t=setTimeout(c,100)};return c};
if (document.documentElement.clientWidth > 600) {
activateSkrollr();
} else {
deactivateSkrollr();
}
on_resize(function() {
// handle the resize event here
if (document.documentElement.clientWidth > 600) {
activateSkrollr();
} else {
deactivateSkrollr();
}
});
//end.CONDITION
//check for year
function repeatOften() {
// Change date when they enter in viewport
if( $('section[data-section="46"]').hasClass('active') ) {
$('#year > div').html('2021<br>2022');
}
else if( $('section[data-section="45"]').hasClass('active') ) {
$('#year > div').html('2020<br>2021');
}
else if( $('section[data-section="44"]').hasClass('active') ) {
$('#year > div').html('2019<br>2020');
}
else if( $('section[data-section="43"]').hasClass('active') ) {
$('#year > div').html('2018<br>2019');
}
else if( $('section[data-section="42"]').hasClass('active') ) {
$('#year > div').html('2017<br>2018');
}
else if( $('section[data-section="41"]').hasClass('active') ) {
$('#year > div').html('2016<br>2017');
}
else if( $('section[data-section="40"]').hasClass('active') ) {
$('#year > div').html('2015<br>2016');
}
else if( $('section[data-section="39"]').hasClass('active') ) {
$('#year > div').html('2014<br>2015');
}
else if( $('section[data-section="38"]').hasClass('active') ) {
$('#year > div').html('2013<br>2014');
}
else if( $('section[data-section="37"]').hasClass('active') ) {
$('#year > div').html('2012<br>2013');
}
else if( $('section[data-section="36"]').hasClass('active') ) {
$('#year > div').html('2011<br>2012');
}
else if( $('section[data-section="35"]').hasClass('active') ) {
$('#year > div').html('2010<br>2011');
}
else if( $('section[data-section="34"]').hasClass('active') ) {
$('#year > div').html('2007<br>2008');
}
else if( $('section[data-section="33"]').hasClass('active') ) {
$('#year > div').html('2005<br>2006');
}
else if( $('section[data-section="32"]').hasClass('active') ) {
$('#year > div').html('2004<br>2005');
}
else if( $('section[data-section="31"]').hasClass('active') ) {
$('#year > div').html('2003<br>2004');
}
else if( $('section[data-section="30"]').hasClass('active') ) {
$('#year > div').html('2002<br>2003');
}
else if( $('section[data-section="29"]').hasClass('active') ) {
$('#year > div').html('2001<br>2002');
}
else if( $('section[data-section="28"]').hasClass('active') ) {
$('#year > div').html('2000<br>2001');
}
else if( $('section[data-section="27"]').hasClass('active') ) {
$('#year > div').html('1999<br>2000');
}
else if( $('section[data-section="26"]').hasClass('active') ) {
$('#year > div').html('1998<br>1999');
}
else if( $('section[data-section="25"]').hasClass('active') ) {
$('#year > div').html('1996<br>1997');
}
else if( $('section[data-section="24"]').hasClass('active') ) {
$('#year > div').html('1995<br>1996');
}
else if( $('section[data-section="23"]').hasClass('active') ) {
$('#year > div').html('1994<br>1995');
}
else if( $('section[data-section="22"]').hasClass('active') ) {
$('#year > div').html('1994<br>1995');
}
else if( $('section[data-section="21"]').hasClass('active') ) {
$('#year > div').html('1992<br>1993');
}
else if( $('section[data-section="20"]').hasClass('active') ) {
$('#year > div').html('1991<br>1992');
}
else if( $('section[data-section="19"]').hasClass('active') ) {
$('#year > div').html('1990<br>1991');
}
else if( $('section[data-section="18"]').hasClass('active') ) {
$('#year > div').html('1988<br>1989');
}
else if( $('section[data-section="17"]').hasClass('active') ) {
$('#year > div').html('1987<br>1988');
}
else if( $('section[data-section="16"]').hasClass('active') ) {
$('#year > div').html('1986<br>1987');
}
else if( $('section[data-section="15"]').hasClass('active') ) {
$('#year > div').html('1985<br>1986');
}
else if( $('section[data-section="14"]').hasClass('active') ) {
$('#year > div').html('1984<br>1985');
}
else if( $('section[data-section="13"]').hasClass('active') ) {
$('#year > div').html('1983<br>1984');
}
else if( $('section[data-section="12"]').hasClass('active') ) {
$('#year > div').html('1982<br>1983');
}
else if( $('section[data-section="11"]').hasClass('active') ) {
$('#year > div').html('1981<br>1982');
}
else if( $('section[data-section="10"]').hasClass('active') ) {
$('#year > div').html('1979<br>1980');
}
else if( $('section[data-section="9"]').hasClass('active') ) {
$('#year > div').html('1978<br>1979');
}
else if( $('section[data-section="8"]').hasClass('active') ) {
$('#year > div').html('1977<br>1978');
}
else if( $('section[data-section="81"]').hasClass('active') ) {
$('#year > div').html('1977<br>1978');
}
else if( $('section[data-section="7"]').hasClass('active') ) {
$('#year > div').html('1976<br>1977');
}
else if( $('section[data-section="6"]').hasClass('active') ) {
$('#year > div').html('1974<br>1975');
}
else if( $('section[data-section="5"]').hasClass('active') ) {
$('#year > div').html('1973<br>1974');
}
else if( $('section[data-section="4"]').hasClass('active') ) {
$('#year > div').html('1971<br>1975');
}
else if( $('section[data-section="3"]').hasClass('active') ) {
$('#year > div').html('1971<br>1972');
}
else if( $('section[data-section="2"]').hasClass('active') ) {
$('#year > div').html('1970<br>1971');
}
else {
$('#year > div').html('1969<br>1970');
}
requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);
</script>
</body>
</html>
|