Linux lhjmq-records 5.15.0-118-generic #128-Ubuntu SMP Fri Jul 5 09:28:59 UTC 2024 x86_64
Your IP : 18.188.233.69
<?php
include_once './includes/common.php';
?>
<!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">
</head>
<body class="timeline">
<!-- ########################################################## nav ########################################################## -->
<nav class="nav__main">
<div class="container">
<a href="/" class="logo-lhjmq"><img src="assets/img/logo-lhjmq.svg"></a>
<a href="/xsl/records/book/index2.php"><?= $lang['MENU_1']; ?></a>
<a href="#" class="selected"><?= $lang['MENU_2']; ?></a>
<a href="/xsl/records/book/index.php?lang=<?=$switch_lang;?>"><?=$switch_lang;?></a>
</div>
</nav>
<div id="skrollr-body">
<a name="top"></a>
<!-- ########################################################## hero ########################################################## -->
<div class="videoWrapper" id="hero" >
<div class="pagetitle">
<p class="txt-subtitle"><?= $lang['HEADER_SUBTITLE']; ?></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>
<!-- <img src="assets/img/placeholder.png" class="img-responsive" data-top="opacity: 1;" data-200-top-bottom="opacity: 0;"> -->
<video id="video-intro" loop autoplay poster="assets/img/placeholder.png" class="img-responsive" data-emit-events data--200-top="opacity: 1;" data-200-top-bottom="opacity: 0;">
<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"";">
<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">
<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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="assets/img/section1__leducrichard.jpg" class="img-responsive">
<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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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;">
<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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="assets/img/section3__otessier.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, 160px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="assets/img/section3__dhawerchuk.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_3']['TXT_7']; ?></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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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">
<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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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 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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="assets/img/section6__jlphaneufintro.jpg" class="img-responsive">
<span class="legend"><?= $lang['SECTION_6']['TXT_2']; ?></span>
</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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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 -->
</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 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 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-12">
<img src="assets/img/section8__castor.jpg" class="img-responsive">
<p class="legend move-up"><?= $lang['SECTION_8']['TXT_13']; ?></p>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</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;">
<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 cover1" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<h3><?= $lang['SECTION_10']['TXT_1']; ?></h3>
<p><?= $lang['SECTION_10']['TXT_2']; ?></p>
</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_10']['TXT_3']; ?></h3>
<p><?= $lang['SECTION_10']['TXT_4']; ?></p>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-sm-6 bloc--txt">
<div class="bloc--txt-right-bottom">
<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">
<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">
<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">
<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_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>
</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.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_1']; ?></h3>
</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 cover1" data-bottom-top="opacity: 0; transform: translate3d(100px, 100px, 0);" data-center="opacity: 1; transform: translate3d(0, 0, 0);">
<h3><?= $lang['SECTION_27']['TXT_1']; ?></h3>
<span class="legend move-down translucide"><?= $lang['SECTION_27']['TXT_2']; ?></span>
</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_27']['TXT_3']; ?></h3>
<span class="legend move-down translucide"><?= $lang['SECTION_27']['TXT_4']; ?></span>
</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);">
<img src="assets/img/section34__bgroulx.jpg" class="img-responsive img-rounded center-block">
<span class="legend translucide move-up"><?= $lang['SECTION_34']['TXT_2']; ?></span>
</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);"> <?= $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);">
<img src="assets/img/section39__zfucale.jpg" class="img-responsive center-block">
</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);">
<img src="assets/img/section39__lpguindon.jpg" class="img-responsive center-block">
</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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="assets/img/section40__scarpentier.jpg" class="img-responsive center-block">
<span class="legend"><?= $lang['SECTION_40']['TXT_2']; ?></span>
</div>
</div><!-- /.row -->
<div class="row row-spacing">
<div class="framing"><h4><?= $lang['SECTION_40']['TXT_3']; ?></h4></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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="assets/img/section40__cgarland.jpg" class="img-responsive center-block">
<span class="legend translucide"><?= $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="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="assets/img/section40__sgirard.jpg" class="img-responsive center-block">
<span class="legend translucide"><?= $lang['SECTION_40']['TXT_5']; ?></span>
</div>
</div><!-- /.row -->
<div class="row">
<div class="pad-20 bloc--txt"><h3><?= $lang['SECTION_40']['TXT_6']; ?></h3></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);">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="assets/img/section40__MorandVelenoComtois.jpg" class="img-responsive center-block">
<span class="legend translucide"><?= $lang['SECTION_40']['TXT_7']; ?></span>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- ########################################################## 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=http://url.com" target="_blank" class="sharing facebook"></a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=http://url.com&text=Change%20Share%20Text&hashtags=LHJMQ" target="_blank" class="sharing twitter"></a>
</div>
<p class="legal"><small><?= $lang['FOOTER_LEGAL']; ?></small></p>
</footer>
</div><!-- /#skrollr-body -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="assets/js/vendor/rAF.min.js"></script>
<script src="assets/js/vendor/skrollr.min.js"></script>
<script src="assets/js/vendor/jquery.unveil.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();
};
//
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
// START: JQUERY DOM READY
$(document).ready(function(){
var s = skrollr.init();
//Lazy load img
$("img").unveil(200, function() {s.refresh()});
// 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.
//check for year
function repeatOften() {
// Change date when they enter in viewport
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="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>
|