/*
 * Layout.css
 * CSS du site de la TÉLUQ 2015
 * Styles de menus, positionnements, footer, etc.
 * Programmeurs : Andy Harvey, François Martel
 * Note : Les prefixes CSS sont gérés par prefixfree.js
 */

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries */

/* #Site Styles
================================================== */
* { background-repeat:no-repeat; }
body { background-color:#fff; }

/* Header alternatif avec image à 100% */
.pageEntete {
	position:relative;
}
.pageEntete .banniere{
	background-color: #000000;
	height: 80px;
	/* text-align: right; */
}
.pageEntete .banniere img{
	height: 80px;
	margin-right: 25px;
}
.pageEntete .bgImage{
	background:url(../img/img_entete.jpg) top left no-repeat;
	background-size:cover;
	height: 343px;
	display: flex;
	align-items: center;
}
.pageEntete .fondBlanc {
	background-color:#fff;
	background-color:rgba(255,255,255,0.8);
	padding:20px 0 40px 0;
	color:#333333;
}
.pageEntete .fondBlanc ul {
	width: 100%;
}
.pageEntete h1.titrePage {
	text-transform:uppercase;
	padding:55px 0;
}

.sQuiz {
	padding:50px 0;
}
.sQuiz h2 {
	margin-bottom:30px;
}
.sQuiz h3 {
	font-size:1.466666666666667em; /* 22/15 */
	color:#000;
}
#contenu {
	font-size:1.066666666666667em; /* 16/15 */
}

.textReg{
	font-weight: normal;
	font-size: 14px;
}

/*****************************/
/* Styles du quiz (importés) */
/*****************************/

/* zoneContenu : contenu général */
#contenu p,
#contenu span,
#contenu ul,
#contenu ol,
#contenu table,
#contenu label{
	font-size: 0.9375em; /* 15/16 */
	line-height: 1.533333333333333; /* 23/15 */
	color: #333333;
}
#contenu p,
#contenu ul,
#contenu ol,
#contenu table,
#contenu img,
#contenu figure{
	margin: 0px 0px 15px 0px;
}
#contenu p.sansMarge,
#contenu ul.sansMarge,
#contenu ol.sansMarge,
#contenu table.sansMarge,
#contenu img.sansMarge,
#contenu .sansMarge{
	margin-bottom: 5px;
}
#contenu a:link,
#contenu a:visited{
	color: #003366;
	text-decoration: underline;
}
#contenu a:active,
#contenu a:hover{
	text-decoration: none;
}
#contenu .note,
#contenu .source{
	font-size: 0.875em; /* 14/16 */
	line-height: 1.357142857142857; /* 19/14 */
	color: #828282;
}
#contenu strong{
	font-weight: 500;
}
#contenu figcaption{
	margin: 0px 0px 10px 0px;
	font-size: 0.875em; /* 14/16 */
	line-height: 1.357142857142857; /* 19/14 */
	color: #828282;
}

#contenu ul ul,
#contenu ul ol,
#contenu ol ol,
#contenu ol ul,
#contenu ul p,
#contenu ol p,
#contenu ul span,
#contenu ol span,
#contenu ul label,
#contenu ol label{
	font-size: 1em; /* 15/15 */
}

/* Boîte : questions */
#contenu .boiteQuiz{
	margin: 0px 0px 15px 0px;
	padding: 10px 10px 10px 10px;
	background-color: #eeeeee;
}
#contenu .boiteQuiz .lstQuestions,
#contenu .boiteQuiz .lstChReponses,
#contenu .controles .navigation ul{
	padding-left: 0px;
	list-style-type: none;
	list-style-image: none;
}
#contenu .boiteQuiz .lstQuestions{
	margin: 0px 0px 30px 0px;
}
#contenu .boiteQuiz .lstQuestions li{
	position: relative;
}

/* Boîte : questions : texte */
#contenu .boiteQuiz .txtQuestion{
	padding-left: 25px;
}
#contenu .boiteQuiz .txtQuestion:before{
	position: absolute;
	left: 0;
	content: attr(data-numero) ".";
	font-weight: 600;
}
#contenu .boiteQuiz .txtQuestion p,
#contenu .boiteQuiz .txtQuestion span,
#contenu .boiteQuiz .txtQuestion ul,
#contenu .boiteQuiz .txtQuestion ol{
	font-weight: 600;
}
#contenu .boiteQuiz .txtQuestion > ul,
#contenu .boiteQuiz .txtQuestion > ol,
#contenu .boiteQuiz .txtQuestion div > ul,
#contenu .boiteQuiz .txtQuestion div > ol{
	margin-bottom: 15px;
}
#contenu .boiteQuiz .txtQuestion.imgPosDroite{
	min-height: 175px;
	padding-right: 190px; /* 175(lg)+15(mg) */
	margin-bottom: 15px; /* assure une marge même si le contenu est plus petit que l'image */
}
#contenu .boiteQuiz .txtQuestion .posDroite{
	position: absolute;
	top: 0;
	right: 0;
}

/* Boîte : questions : choix de réponses */
#contenu .boiteQuiz .lstChReponses li{
	margin: 15px 0px 0px 0px;
	padding-left: 26px; /* Largeur + 15px de marge */
}
#contenu .boiteQuiz .lstChReponses li:first-child{
	margin-top: 0px;
}
#contenu .boiteQuiz input.custom[type="checkbox"],
#contenu .boiteQuiz input.custom[type="radio"]{
	display: none;
}
#contenu .boiteQuiz .ie8 input.custom[type="checkbox"],
#contenu .boiteQuiz .ie8 input.custom[type="radio"]{
	display: inline-block;
}
#contenu .boiteQuiz input.custom[type="checkbox"] + label:before{
	position: absolute;
	top: 3px; /* Ajustement au line-height */
	left: 0;
	display: inline-block;
	width: 16px;
	height: 16px;
	content: "";
	cursor: pointer;
	font-size: 16px;
	line-height: 16px;
	vertical-align: middle;
	background-color: #ffffff;
	border: 1px solid #959595;
}
#contenu .boiteQuiz input.custom[type="checkbox"]:checked + label:before{
	background-color: #959595;
	background: url(../img/nuovem_ico_crochet.svg) center center #ffffff no-repeat;
}
.no-svg #contenu .boiteQuiz input.custom[type="checkbox"]:checked + label:before{
	background-image: url(../img/nuovem_ico_crochet.png);
}
#contenu .boiteQuiz input.custom[type="radio"] + label:before{
	position: absolute;
	top: 3px; /* Ajustement au line-height */
	left: 0;
	display: inline-block;
	width: 16px;
	height: 16px;
	content: "";
	cursor: pointer;
	font-size: 16px;
	line-height: 16px;
	border-radius: 50%;
	vertical-align: middle;
	background-color: #ffffff;
	border: 1px solid #959595;
}
#contenu .boiteQuiz input.custom[type="radio"]:checked + label:before{
    border: 3px solid #ffffff;
	background-color: #959595;
}
#contenu .boiteQuiz label{
	display: inline-block;
	cursor: pointer;
}
#contenu .boiteQuiz input.custom[type="checkbox"] + label,
#contenu .boiteQuiz input.custom[type="radio"] + label{}

/* Boîte : questions : choix de réponses (ordre) */
#contenu .boiteQuiz .ordre li{
	display: block;
	width: 75%;
	padding: 0px 15px 0px 15px;
	background-color: #d6cace;
	border: solid 1px #959595;
	cursor: pointer;
}
#contenu .boiteQuiz .ordre p{
	margin: 5px 0px 5px 0px;
}
#contenu .boiteQuiz li.placeholder{
	position: relative;
	margin: 0;
    padding: 0;
    border: none;
}
#contenu .boiteQuiz li.placeholder:before{
	position: absolute;
	content: "";
	width: 0;
    height: 0;
	margin-top: 0px;
	left: -6px;
	top: 1px;
	border: 6px solid transparent;
	border-left-color: #333333;
	border-right: none;
}
#contenu .boiteQuiz li.placeholder:first-child:before{
	top: -14px;
}
#contenu .boiteQuiz li.dragged:first-child + li.placeholder:before{
	top: -14px;
}
#contenu .boiteQuiz li.dragged{
	position: absolute;
	background-color: #ebe7e9;
	z-index: 2000;
}

/* Boîte : questions répondues */
#contenu .boiteQuiz .qRepondue .lstChReponses{
	opacity: 0.6;
}
#contenu .boiteQuiz .qRepondue input.custom[type="checkbox"] + label:before,
#contenu .boiteQuiz .qRepondue input.custom[type="radio"] + label:before,
#contenu .boiteQuiz .qRepondue label{
	cursor: default;
}
#contenu .boiteQuiz .qRepondue .ordre li{
	cursor: default;
}

/* Boîte : questions : contrôles */
#contenu .boiteQuiz .controles{
	display: table;
	width: 100%;
	margin: 0px 0px 0px 0px;
}
#contenu .boiteQuiz .controles > div{
	display: table-cell;
	vertical-align: bottom;
}
#contenu .boiteQuiz .validation	{ text-align: left; }
#contenu .boiteQuiz .status		{ text-align: center; }
#contenu .boiteQuiz .navigation	{ text-align: right; }
#contenu .boiteQuiz .validation,
#contenu .boiteQuiz .navigation{
	width: 30%;
}
#contenu .boiteQuiz .controles div > *{
	margin: 0px;
}
#contenu .boiteQuiz .validation button{
	padding: 0px 25px 0px 25px;
	font-size: 0.9375em; /* 15/16 */
	line-height: 2; /* 30/15 */
	background-color: #555555;
	color: #ffffff;
}
#contenu .boiteQuiz .status p{
	font-size: 0.875em; /* 14/16 */
	line-height: 1;
	color: #828282;
}
#contenu .boiteQuiz .navigation li{
	display: inline-block;
	vertical-align: bottom;
	margin: 0px;
	padding: 0px;
}
#contenu .boiteQuiz .navigation a:link,
#contenu .boiteQuiz .navigation a:visited{
	display: block;
	width: 30px;
	height: 30px;
	background-color: #555555;
	background-position: center center;
	background-repeat: no-repeat;
}
#contenu .boiteQuiz .navigation li.prec a{ background-image: url(../img/nuovem_ico_quizbt_prec.svg); }
#contenu .boiteQuiz .navigation li.suiv a{ background-image: url(../img/nuovem_ico_quizbt_suiv.svg); }
.no-svg #contenu .boiteQuiz .navigation li.prec a{ background-image: url(../img/nuovem_ico_quizbt_prec.png); }
.no-svg #contenu .boiteQuiz .navigation li.suiv a{ background-image: url(../img/nuovem_ico_quizbt_suiv.png); }
#contenu .boiteQuiz .navigation a:hover,
#contenu .boiteQuiz .navigation a:active,
#contenu .boiteQuiz .validation button:hover{
	background-color: #005d7b;
	
	/* Transition/animation */
	transition: all 0.3s ease-out;
}
#contenu .boiteQuiz .validation button:focus{
	outline: none;
}

/* Boîte : questions : rétroactions */
#contenu .boiteQuiz .retro{
	margin: 15px 0px 0px 0px;
	padding: 10px 10px 0px 40px;
	background-color: #ffffff;
}
#contenu .boiteQuiz .retro strong{
	font-weight: 700;
}
#contenu .boiteQuiz .retro > ul,
#contenu .boiteQuiz .retro > ol,
#contenu .boiteQuiz .retro div > ul,
#contenu .boiteQuiz .retro div > ol{
	margin-bottom: 15px;
}
#contenu .boiteQuiz .retro > ul li,
#contenu .boiteQuiz .retro > ol li,
#contenu .boiteQuiz .retro > ul p,
#contenu .boiteQuiz .retro > ol p{
	margin: 0px 0px 5px 0px;
}
#contenu .boiteQuiz .retro .lib{
	display: block;
	font-weight: 600;
}
#contenu .boiteQuiz .retro.correcte{
	border: solid 1px #5d756a;
	background-image: url(../img/nuovem_ico_quizretro_correct.svg);
	background-repeat: no-repeat;
	background-position: top left;
}
#contenu .boiteQuiz .correcte .lib{
	color: #5d756a;
}
#contenu .boiteQuiz .retro.incorrecte{
	border: solid 1px #b92025;
	background-image: url(../img/nuovem_ico_quizretro_incorrect.svg);
	background-repeat: no-repeat;
	background-position: top left;
}
#contenu .boiteQuiz .incorrecte .lib{
	color: #b92025;
}
#contenu .boiteQuiz .retro.neutre{
	border: solid 1px #5f5b7b;
	background-image: url(../img/nuovem_ico_quizretro_neutre.svg);
	background-repeat: no-repeat;
	background-position: top left;
}
#contenu .boiteQuiz .neutre .lib{
	color: #5f5b7b;
}
#contenu .boiteQuiz .lstChReponses .retro{
	margin-top: 15px;
}

/* Boîte : questions : états */
#contenu .boiteQuiz .etats{
	margin: 0;
	padding: 0;
	text-align: center;
}
#contenu .boiteQuiz ul.msg{
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-image: none;

	font-weight: 500;
}
#contenu .boiteQuiz ul.msg.erreur{
	color: #ba2025;
}
#contenu .boiteQuiz ul.msg li{
	margin: 5px 0px 0px 0px;
}

/*=======================================
*
*	Video général
*
*========================================*/

/* video YOUTUBE */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin-top: 30px;
}	

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* jWPLAYER */

.boiteAnimVideo{
	margin-top: 30px;
}

figure figcaption{
	font-size: 14px;
	font-weight: bold;
	color: #333333;
}

.animVideoPlaylist ul{
	list-style-type: none;
	padding: 0;
	margin: 0px;
}

.animVideoPlaylist figure object{
	border: 2px solid black;
	background-color: black;
}

.animVideoPlaylist ul li{
	display:block;
	width: 50%;
	float: left;
	margin-top: 2px;
}

.animVideoPlaylist ul li a{
    text-decoration: none;
    display: block;
    text-align: center;
    color: white;
    background: #707070;
    font-size: 15px;
    font-weight: 700;
    -webkit-transition: all 200ms ease-out; /* Safari */
    transition: all 200ms ease-out;
    min-height: 67px;
    padding: 14px 10px;
}
.animVideoPlaylist ul li a:hover, .animVideoPlaylist ul li a.active{
	background: #2e8804;
}
.animVideoPlaylist ul li:first-of-type a{
	margin-right: 10px;
}
.animVideoPlaylist ul li:nth-of-type(2) a{
	margin-left: 10px;
}


/*=======================================
*
*	Section général
*
*========================================*/

section .bgImage{
	padding: 50px 0;
}

section a{
	outline: none !important;
}
section #svg1{
	outline: none !important; 
}

blockquote{
	font-size: 28px;
    font-style: italic;
    width: 100%;
    position: relative;
}

.source{
	font-size: 13px;
	color: #333333;
}
.jwplayer:first-of-type {
	border: none;
}
.jwplayer {
	border: 1px solid rgba(36, 36, 36, 0) !important;
	margin-top: 20px !important;
	background-color: none !important;
}

/*=======================================
*
*	Section Le service technopédagogique
*
*========================================*/
.presentation {
	padding: 50px 0px;
}
.presentation ul {
	column-count: 2;
	padding-left: 0;
}
.presentation ul li {
	position: relative; 
	left: 20px;
	line-height: 26px;
	font-size: 18px;
}
.presentation ul li{
	margin-right: 20px;
}

.presentation h2 {
	margin-top: 0;
	margin-bottom: 5px;
	text-align: left;
	margin-left: 0;
	font-weight: 600;
	font-size: 3.4rem;
}
.presentation__video {
	background-image: url('../img/AdobeStock_235857038.jpeg');
	background-size: cover;
	background-position: center center;
	width: 100%;
	text-align: center;
	height: 710px;
}
.presentation__video .video_wrapper {
	max-width: 645px;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 20px;
	margin: 0 auto;
	margin-top: 30px;
	height: 0;
}
.presentation__video figure {
	max-width: 100%;
	margin-top: 54px;
}
.presentation__video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}
.service_techno ul li {
	font-size: 18px;
	line-height: 26px;
}
@media screen and (max-width:1280px){
	.avantage .processus .bg_img {
		top: -10px !important;
	}
}
@media screen and (max-width:1040px){
	.pourquoi .adapte.portable .adapte__bg {
			left: 10px !important;
	}
	.avantage .processus .bg_img {
		background-position: center center !important;
	}
}
@media screen and (max-width:960px){
	.presentation__video {
		background-image: inherit;
		height: inherit;
	}
	.presentation__video .video_wrapper {
		max-width: inherit;
		padding-top: inherit;
	}
}

@media screen and (max-width:768px){
	.titrePage .block {
		display: inline;
	}
	.presentation ul li, .service_techno ul li {
		font-size: 16px;
		line-height: 24px;
	}
	p, span, li {
		font-size: 1.6rem;
		line-height: 26px;
	}
	.sIngenierie .bloc-texte, .pourquoi p, .avantage .processus p, .avantage .expertise .left p {
		font-size: 16px !important;
		line-height: 24px !important;
	}
	.pageEntete h1.titrePage span {
		font-size: 34px !important;
	}
	h2 {
		line-height: 32px !important;
		margin-top: 30px;
		font-size: 2.8rem !important;
	}
	h3 {
		font-size: 2.8rem !important;
	}
	.pageEntete .banniere{
		height: 50px;
	}
	.avantage {
		padding: 30px 0px !important;
	}
	.presentation {
		padding: 30px 0px;
	}
	.presentation ul {
		column-count: inherit;
	}
	.presentation li {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.service_techno h2 {
		margin-bottom: 20px !important;
	}
	.service_techno .bg {
		display: none;
	}
	.service_techno .description {
		display: block !important;
	}
	.service_techno .description .left{
		background: #2e8804;
		text-align: center;
		padding: 10px 5px;
		font-size: 1.8rem;
		margin-bottom: 20px;
	}
	.service_techno .description .right{
		padding-left: 0 !important;
	}
	.sIngenierie .bgImage {
		padding: 20px 0px !important;
	}
	.sIngenierie .bloc-texte {
		margin-bottom: 0px !important;
	}
	.pourquoi{
		padding-top: 0 !important;
	}
	.pourquoi .qualite .qualite__bg {
		display: none !important;
	}
	.pourquoi .qualite.souris h2:last-of-type {
		margin-top: 20px !important;
	}
	.pourquoi .souris .qualite__bg{
		display: none !important;
	}
	.pourquoi .content {
		display: block !important;
	}
	.pourquoi .adapte .adapte__bg {
		display: none;
	}
	.pourquoi .adapte h3 {
		margin-top: 20px !important;
	}
	.pourquoi .adapte h3, .pourquoi .adapte p {
		text-align: left;
	}
	.pourquoi .qualite__bg {
		height: 100px !important;
		margin-bottom: 50px !important;
		margin-top: 50px !important;
	}
	.pourquoi .adapte.portable .adapte__bg {
		display: none !important;
	}
	.pourquoi .adapte.portable .adapte__bg:last-of-type {
		position: inherit !important;
		background-position: center center !important;
		width: 100% !important;
	}
	.pourquoi .adapte.portable h2 {
		text-align: left !important;
	}
	.soucis {
		padding: 50px 0px !important;
		background-position: center center !important;
	}
	.soucis .content {
		padding: 0 !important;
	}
	.soucis p {
		font-size: 1.6rem !important;
	}
	.avantage .expertise, .avantage .processus{
		display: block !important;
	}
	.avantage .processus .bg_img{
		position: inherit !important;
		margin: 20px 0px !important;
	}
	.avantage .processus .right, .avantage .processus .right h2{
		text-align: left !important;
	}

	.avantage .bg_img {
		display: none !important;
	}
}

.service_techno {
	position: relative;
}
.service_techno h2 {
	margin-bottom: 15px;
}
.service_techno .contentWrap{
 	position: unset;
}
.service_techno .description {
	display: flex;
	align-items: center;
}
.service_techno .bg {
	background: #2e8804;
	position: absolute;
	left: 0;
	height: 140px;
	width: 45%;
	z-index: 1;
}
.service_techno .left {
	flex: 0 0 45%;
	color: #fff;
	/* padding: 30px 25px 30px 230px; */
	padding-right: 70px;
	font-size: 2.5rem;
	line-height: 34px;
	font-style: italic;
	text-align: right;
	z-index: 2;
}
.service_techno .right {
	flex: 0 0 55%;
	padding-left: 20px;
}
.pourquoi {
	padding: 55px 0px;
	overflow: hidden !important;
}
.pourquoi .content .adapte h3 {
	margin-top: 370px;
}
.pourquoi .content h3{
	font-size: 3.4rem;
	color: black;
	margin-bottom: 15px;
}
.pourquoi .content {
	display: flex;
	justify-content: space-between;
}
.pourquoi .qualite {
	flex: 0 0 44%;
}
.pourquoi .qualite p{
	line-height: 26px;
}
.pourquoi p {
	font-size: 1.8rem;
}
.pourquoi .qualite.souris .qualite__bg:first-of-type{
	background: url('../img/img_souris.jpg');
	background-size: contain;
	background-position: left center;
	width: 50%;
	display: block;
	height: 255px;
	background-repeat: no-repeat;
	margin: 0 auto;
	position: absolute;
	left: 0px;
}
.pourquoi .qualite.souris h2:last-of-type {
	margin-top: 300px;
}
.pourquoi .qualite.souris .qualite__bg:last-of-type{
	background: url('../img/img_ecouteurs.jpg');
	background-size: contain;
	background-position: left center;
	width: 50%;
	height: 450px;
	background-repeat: no-repeat;
	margin: 0 auto;
	position: absolute;
	left: -0;
	margin-top: 75px;
}
.pourquoi .qualite__bg {
	background: url('../img/img_lunettes.jpg');
	background-size: contain;
	background-position: center center;
	width: 75%;
	display: block;
	height: 195px;
	background-repeat: no-repeat;
	margin: 0 auto;
	margin-top: 20px;
}
.pourquoi {
	position: relative;
}
.pourquoi .contentWrap {
	position: unset;
}
.pourquoi .adapte__bg {
	background: url('../img/img_clavier.jpg');
	background-size: contain;
	background-position: center center;
	width: 30%;
	display: block;
	height: 395px;
	background-repeat: no-repeat;
	z-index: -1;
	position: absolute;
	right: 0px;
	margin: 0 auto;
}
.pourquoi .adapte.portable .adapte__bg {
	background: url('../img/img_portable.jpg');
	background-size: contain;
	background-position: center center;
	width: 100%;
	display: block;
	height: 275px;
	background-repeat: no-repeat;
	position: relative;
	left: 0;
	margin-bottom: 50px;
}
.pourquoi .adapte.portable {
	text-align: right;
	margin-top: 10px;
}

.pourquoi .adapte.portable h2{
	text-align: right;
}
.pourquoi .adapte.portable .adapte__bg:last-of-type {
	background: url('../img/img_cafe.jpg');
	background-size: contain;
	background-position: right center;
	width: 262px;
	display: block;
	height: 265px;
	background-repeat: no-repeat;
	position: relative;
	margin: 50px 0px;
	margin-bottom: 70px;
	left: 310px;
}
.pourquoi p {
	line-height: 24px;
}
.pourquoi small {
	font-size: 1.4rem;
	display: block;
	line-height: 20px;
}
.pourquoi .adapte.portable p {
	font-size: 1.8rem;
}

.pourquoi .adapte h2 {
	line-height: 46px;
}
.pourquoi .adapte{
	flex: 0 0 45%;
	text-align: right;
}

.pourquoi img{
	margin-top: 10px;
	margin-bottom: 5px;
}
.soucis {
	background: url('../img/img_bg_soucis-inclusion.jpg');
	background-size: cover;
	background-position: 0px -740px;
	color: white;
	background-repeat: no-repeat;
	padding: 180px 0px;
}
.soucis .content {
	padding: 0px 50px;
}
.soucis h2 {
	color: white;
	margin-top: 0;
}
.soucis p {
	font-size: 1.8rem;
	margin-bottom: 0;
	line-height: 24px;
}
.avantage {
	padding: 100px 0px;
}
.avantage .expertise{
	display: flex;
	justify-content: space-between;
}
.avantage .expertise .right{
	flex: 0 0 42%;
}
.avantage .expertise .left{
	flex: 0 0 44%;
}
.avantage .expertise .left p{
	font-size: 1.8rem;
}
.avantage .processus {
	display: flex;
	justify-content: space-between;
}
.avantage .processus .left {
	flex: 0 0 38%;
}
.avantage .processus .right {
	flex: 0 0 62%;
	text-align: right;

}
.avantage .processus p {
	color: #2E8804;
	font-size: 2.5rem;
	font-style: italic; 
}
.avantage .processus small {
	color: black;
}
.avantage .processus .right p:first-of-type {
	margin-bottom: 0;
}
.avantage .processus h2 {
	text-align: right;
}
.avantage .processus .bg_img{
	background: url('../img/img_crayon.jpg');
	height: 350px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right center;
	position: relative;
	left: -70px;
	top: -70px;
}
/*=======================================
*
*	Section Le service technopédagogique
*
*========================================*/
.sTechno {
    background: #2e8804;
    color: #fff;
}
.sTechno h2{
	color: #fff;
}
.sTechno blockquote{
	color: #fff;
	max-width: 390px;
    margin-left: 15%;
    margin-top: 6px;
}
.sTechno blockquote .texte{
	display: block;
	padding: 0 24px;
}
.sTechno blockquote .guillement{
	display: block;
	background: url(../img/guillemets-blanc.svg) 0 0 no-repeat;
	width: 64px;
    height: 64px;
    opacity: 0.2;
    position: absolute;
}
.sTechno blockquote .guillement:first-of-type{
	left: -49px;
    top: 6px;
}

.sTechno blockquote .guillement:last-of-type{
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
    right: -16px;
    top: 6px;
}
/*=======================================
*
*	Section ingénierie pédagogique
*
*========================================*/
.sIngenierie .contentWrap{
	/* padding: 0 20px; */
	text-align: center;
}
.sIngenierie .contentWrap .bloc-texte{
	display: block;
	margin-bottom: 50px;
}
.sIngenierie .contentWrap > h2{
	margin-bottom: 15px;
}
.sIngenierie .contentWrap > p{
    display: inline-block;
    /* padding: 0 80px 30px; */
    position: relative;
    text-align: left;
}

.sIngenierie .contentWrap > p.info{
	border-bottom: 1px solid #7fbc6d;
    padding: 0 0 10px 41px;
    display: inline-block;
    position: relative;
    font-weight: 700;
    height: 37px;
    line-height: 35px;
}

.sIngenierie .contentWrap > p.info:before{
	content: "";
    display: block;
    background: url(http://benhur.teluq.uquebec.ca/teluqmin/css/../img/ico_fleche_vert.svg) no-repeat center center #62922f;
    background-size: 28px;
    width: 36px;
    height: 36px;
    position: absolute;
    left: 0;
}
.sIngenierie .contenant-svg{
	position: relative;
	text-align: center;
	margin-top: 30px;
}

.sIngenierie .contenant-svg svg{
	max-width: 408px;
	z-index: 10;
	min-height: 402px;
}
.sIngenierie .contenant-svg svg text, .sIngenierie .contenant-svg svg text tspan{
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}
.sIngenierie .contenant-svg ul{
	position: absolute;
	z-index: -1;
	list-style-type: none;
	display: inline-block;
	-webkit-transition: all 500ms ease-out; /* Safari */
    transition: all 500ms ease-out;
	
}
.sIngenierie .contenant-svg ul:before{
	content: "";
	display: block;
	width: 40px;
	position: absolute;
	border-bottom: 1px black solid;
}
.sIngenierie .contenant-svg #listes ul li:first-of-type{
	display:none;
	text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    margin-bottom: 5px;
} 
.sIngenierie .contenant-svg ul li{
	margin: 0px;
	font-size: 15px;
	line-height: 17px;
	padding-bottom: 7px;
}
.sIngenierie .contenant-svg ul#liste1, .sIngenierie .contenant-svg ul#liste4{
	text-align: right;
	border-right: 1px solid black;
	padding-right: 10px;
}
.sIngenierie .contenant-svg ul#liste2, .sIngenierie .contenant-svg ul#liste3, .sIngenierie .contenant-svg ul#liste5{
	text-align: left;
	border-left: 1px solid black;
	padding-left: 10px;
}
.sIngenierie .contenant-svg ul#liste1{
	left: 30px;
	top: 0px;
	width: 224px;
}
.sIngenierie .contenant-svg ul#liste1:before{
	top: 90px;
	right: -41px;
}
.sIngenierie .contenant-svg ul#liste2{
	right: 86px;
	top: 0px;
	width: 172px;
}
.sIngenierie .contenant-svg ul#liste2:before{
	left: -41px;
    top: 70px;
}
.sIngenierie .contenant-svg ul#liste3{
	top: 143px;
	right: 42px;
	width: 216px;
}
.sIngenierie .contenant-svg ul#liste3:before{
	width: 140px;
	top: 48px;
	left: -140px;
}
.sIngenierie .contenant-svg ul#liste4{
	left: 119px;
    top: 290px;
    width: 134px;
}
.sIngenierie .contenant-svg ul#liste4:before{
	top: 37px;
	right: -40px;
}
.sIngenierie .contenant-svg ul#liste5{
	top: 330px;
	right: 64px;
	width: 194px;
}
.sIngenierie .contenant-svg ul#liste5:before{
	width: 65px;
	top: 25px;
	left: -65px;
}

.sIngenierie svg circle{
	opacity: 0;
	cursor: pointer;
}

.sIngenierie .bloc-texte {
	font-size: 18px;
	line-height: 26px;
}

.hide, .hideme{
	opacity: 0;
}


/*=======================================
*
*	Section équipe multidisciplinaire
*
*========================================*/

.sEquipe, .sEquipe h2{
	color: #000;
}

.sEquipe .contentWrap > p{
	margin-bottom: 20px;
}
.sEquipe .bgImage{
    background: url(../img/bg_equipe_multi.jpg) center center no-repeat #333;
    background-size: cover;
}

/*=======================================
*
*	Section Expertise pédagogique 
*
*========================================*/

.sPedago{
	background-color: #fff;
	clear: both;
}

.sPedago .contentWrap{
	padding: 0 20px;
	max-width: 1300px;
	
}

/* jWPLAYER - Visionneuse de la section Expertise pédago */

.animVideoPlaylist.listeThumb .visionneuse{
	width: 66%;
	float: left;
}

.animVideoPlaylist.listeThumb .listeOnglets{
	width: 34%;
	float: left;
	padding-left: 15px;
	height: 342px;
	overflow-y: scroll;
}

.visionneuse .boiteAnimVideo{
	margin-top: 0;
}
.visionneuse .videos_desc{
	display: none;
}

.visionneuse .videos_desc.active{
	display: block;
}

.visionneuse .videos_desc h3{
	font-size: 18px;
	font-weight: bold;
	color: #333333;
}

.animVideoPlaylist.listeThumb .listeOnglets{
	position: relative;
}

.animVideoPlaylist.listeThumb .listeOnglets ul li{
	margin-top: 0;
	float: none;
	width: 100%;
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a{
	background-color: #eeeeee;
	font-size: 14px;
	padding: 0;
	min-height: 72px;
	background-repeat: no-repeat;
	text-align: left;
	position: relative;
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a:hover,
.animVideoPlaylist.listeThumb .listeOnglets ul li a.active{
	background-color: #d2d2d2;
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a:hover .titre,
.animVideoPlaylist.listeThumb .listeOnglets ul li a.active .titre{
	text-decoration: underline;
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span[class^="video"]{
	display: block;
	width: 100%;
	max-width: 90px;
	height: 50px;
	float: left;
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span.video1{
	background-image: url("../img/vignette-mini_pm5.jpg");
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span.video2{
	background-image: url("../img/vignette-mini_pm6.jpg");
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span.video3{
	background-image: url("../img/vignette-mini_pm7.jpg");
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span.video4{
	background-image: url("../img/vignette-mini_pm8.jpg");
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span.video5{
	background-image: url("../img/vignette-mini_iga.jpg");
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span.video6{
	background-image: url("../img/vignette-mini_jp.jpg");
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span.video7{
	background-image: url("../img/vignette-mini_pm9.jpg");
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span.video8{
	background-image: url("../img/vignette-mini_pm10.jpg");
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span.video9{
	background-image: url("../img/vignette-mini_pm11.jpg");
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span.video10{
	background-image: url("../img/vignette-mini_pm12.jpg");
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span.video11{
	background-image: url("../img/vignette-mini_pm13.jpg");
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a span.video12{
	background-image: url("../img/vignette-mini_pm14.jpg");
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a .temps{
	color: #ffffff;
    background-color: #00000;
    background-color: rgba(0, 0, 0, 0.8);
    width: 42px;
    height: 23px;
    line-height: 24px;
    font-weight: 600;
    position: absolute;
    left: 0;
    z-index: 10;
    text-align: center;
}

.animVideoPlaylist.listeThumb .listeOnglets ul li a .titre{
	display: inline-block;
    font-weight: 600;
    color: #000000;
    width: 59%;
    max-width: 280px;
    text-align: left;
    margin-top: 5px;
    margin-left: 10px;
}

.animVideoPlaylist.listeThumb ul li:nth-of-type(2) a {
    margin-left: 0px;
}

.animVideoPlaylist.listeThumb ul li:first-of-type a {
    margin-right: 0px;
}


/*=======================================
*
*	Section L’ALIGNEMENT PÉDAGOGIQUE 
*
*========================================*/
.sAlignement{
	background: #333333;
	color: #fff;
	text-align: center;
}

.sAlignement h2{
	color: #fff;
	text-align: center;
	margin-bottom: 70px;
	max-width: inherit;
	margin-top: 0;
}
.sAlignement .columnf p{
	margin-bottom: 0;
}
.sAlignement .bgImage{
	/* background: url(../img/pattern-vert.png) 0 0 repeat; */
}

.sAlignement .ico{
	width: 60px;
	height: 60px;
	margin: 0 auto 25px auto;
	/* background-color: #fff; */
	border-radius: 20px;
	position: relative;
	margin-bottom: 5px;
}
.sAlignement .ico span{
	display: block;
	background: url("../img/icone fleche.svg") center center no-repeat;
	position: absolute;
    width: 40px;
    height: 40px;
    left: 7px;
    top: 6px;
    -webkit-transition: all 200ms ease-out; /* Safari */
    transition: all 200ms ease-out;
    
}

.sAlignement .contentWrap > div:hover .ico span{
	top: 10px;
}

@media only screen and (max-width: 767px){
	.banniere a img{
		display: none;
	}
	
	.banniere a{
		background: url("../img/logos/logo_teluq_nb_xs.png") center center no-repeat;
		display: block;
	    width: 46px;
	    height: 50px;
	    float: right;
	    margin-right: 10px;
	}
	
	.pageEntete .bgImage{
		background-position-x: 60%;
		height: 250px;
	}

	.sAlignement .contentWrap > div > p {
		width: 60%;
		margin-left: auto;
		margin-right: auto;
	}
	.sAlignement .contentWrap > div:not(:last-of-type) {
	    margin-bottom: 45px;
	}
	
	.sTechno blockquote{
		margin-left: 0;
		margin-top: 20px;
		max-width: none;
	}
	
	.sTechno blockquote .guillement:first-of-type {
	    left: 0;
	    top: 6px;
	}
	
	.sTechno blockquote .guillement:last-of-type {
		right: 0;
		top: 6px;
	}
	
	.sTechno blockquote .texte{
		padding: 0px 84px 0px 84px;
		font-size: 25px;
	}
}



/*=======================================
*
*	Section Développement de notre expertise
*
*========================================*/

.sDeveloppement .bgImage{
    background: url(../img/bg_developpement.jpg) top right no-repeat #ECE6DA;
    background-size: cover;
}

.sDeveloppement .contentWrap > p, .sDeveloppement .contentWrap > ul{
	max-width: 725px;
    margin: 0 auto;
}

.sDeveloppement .contentWrap > p{
    width: 81%;
}

.sDeveloppement .contentWrap > ul{
    width: 80%;
}

.sDeveloppement h2{
	width: 80%;
}

.sDeveloppement ul{
	list-style-image: url(../img/ico_check.svg);
    margin-left: 10px;
}

/*=======================================
*
*	Section Diversité de ressources
*
*========================================*/

.sDiversite, .sDiversite h2{
	color: #ffffff;
}

.sDiversite .contentWrap{
	padding: 0;
}

.sDiversite .columnf{
	padding: 0 100px !important;
}

.sDiversite .columnf p:last-of-type{
	margin: 50px 0 20px 0;
}
.sDiversite .bgImage{
	background: #1b1b1b;
}

.sDiversite .animVideoPlaylist{
	background: #313131;
	position: relative;
	padding: 0 100px;
}

.sDiversite .interTitre span{
	display: block;
	padding: 15px 0 0 10px;
}

.sDiversite .interTitre .titre{
	text-transform: uppercase;
	font-weight: 700;
}

.sDiversite .fleche-slider{
	width: 80px;
	height: 100%;
	position: absolute;
	
}

.sDiversite .fleche-slider.prev{
	left: 0px;
	top: 0px;
}

.sDiversite .fleche-slider a{
	display: block;
	background: url(http://benhur.teluq.uquebec.ca/test_akwa/css/../img/ico_fleche_slider.svg) center center no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    -webkit-transition: all 200ms ease-out; /* Safari */
    transition: all 200ms ease-out;
}
.sDiversite .fleche-slider a:hover{
	background-color: #444444;
	background-position-x: 25px;
}

.sDiversite .fleche-slider.next{
	top: 0;
	right: 0px;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);

}

.sDiversite .listeOnglets{
	text-align: center;
	padding-bottom: 20px;
}

.sDiversite .listeOnglets ul{
	display: inline-block;
}

.sDiversite .listeOnglets li{
	width: 15px;
    height: 15px;
    margin: 20px 8px 0 8px;
}

.sDiversite .listeOnglets li a{
	margin: 0px !important;
    border-radius: 10px;
    height: inherit;
    background-color: #eeeeee;
}

.sDiversite .listeOnglets li a:hover, .sDiversite .listeOnglets li a.active{
	background-color: #7d7d7d;
}

/*=======================================
*
*	Animation slider
*
*========================================*/

@-webkit-keyframes slideNext {
  0%   { opacity: 1;}
  25% { opacity: 0; transform: translate(-40px) }
  50% { opacity: 0; transform: translate(40px)}
  100% { opacity: 1; transform: translate(0px)}
}
@-moz-keyframes slideNext {
  0%   { opacity: 1;}
  25% { opacity: 0; transform: translate(-40px) }
  50% { opacity: 0; transform: translate(40px)}
  100% { opacity: 1; transform: translate(0px)}
}
@-o-keyframes slideNext {
  0%   { opacity: 1;}
  25% { opacity: 0; transform: translate(-40px) }
  50% { opacity: 0; transform: translate(40px)}
  100% { opacity: 1; transform: translate(0px)}
}
@keyframes slideNext {
	
  0%   { opacity: 1;}
  25% { opacity: 0; transform: translate(-40px) }
  50% { opacity: 0; transform: translate(40px)}
  100% { opacity: 1; transform: translate(0px)}
}

.animNext{
	-webkit-animation: slideNext 1s 1; /* Safari 4+ */
  	-moz-animation:    slideNext 1s 1; /* Fx 5+ */
  	-o-animation:      slideNext 1s 1; /* Opera 12+ */
  	animation:  	   slideNext 1s 1; /* Opera 12+ */
}

@-webkit-keyframes slidePrev {
  0%   { opacity: 1;}
  25% { opacity: 0; transform: translate(40px) }
  50% { opacity: 0; transform: translate(-40px)}
  100% { opacity: 1; transform: translate(0px)}
}
@-moz-keyframes slidePrev {
  0%   { opacity: 1;}
  25% { opacity: 0; transform: translate(40px) }
  50% { opacity: 0; transform: translate(-40px)}
  100% { opacity: 1; transform: translate(0px)}
}
@-o-keyframes slidePrev {
  0%   { opacity: 1;}
  25% { opacity: 0; transform: translate(40px) }
  50% { opacity: 0; transform: translate(-40px)}
  100% { opacity: 1; transform: translate(0px)}
}
@keyframes slidePrev {
	
  0%   { opacity: 1;}
  25% { opacity: 0; transform: translate(40px) }
  50% { opacity: 0; transform: translate(-40px)}
  100% { opacity: 1; transform: translate(0px)}
}

.animPrev{
	-webkit-animation: slidePrev 1s 1; /* Safari 4+ */
  	-moz-animation:    slidePrev 1s 1; /* Fx 5+ */
  	-o-animation:      slidePrev 1s 1; /* Opera 12+ */
  	animation:  	   slidePrev 1s 1; /* Opera 12+ */
}

/*=======================================
*
*	section Ouverture MOOC
*
*========================================*/

.sOuverture h2{
	margin-bottom: 30px;
	  width: 74%;
}

.sOuverture .contentWrap >p{
	margin-bottom: 0px;
}

/*=======================================
*
*	section L'AVANTAGE TÉLUQ
*
*========================================*/

.sAvantage .bgImage{
    background: url(../img/bg_avantage.jpg) top left no-repeat #ECE6DA;
    background-size: cover;
}

.sAvantage .quote{
	float: left;
	width: 80%;
	margin-bottom: 80px;
}
    
.sAvantage blockquote{
	width: 100%;
    max-width: 650px;
} 
    
.sAvantage blockquote .guillement{
	display: block;
	background: url(../img/guillemets-noir.svg) 0 0 no-repeat;
	width: 64px;
    height: 64px;
    opacity: 0.2;
    position: absolute;
}
.sAvantage blockquote .guillement:first-of-type{
	left: -78px;
    top: 6px;
}

.sAvantage blockquote .guillement:last-of-type{
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
    right: -18px;
    top: 6px;
}

blockquote .texte{
	display: block;
	width: 90%;
}

.sAvantage .iconeWrapper{
	position: relative;	
	float: left;
}

.sAvantage .iconeWrapper .icone{
	background: url("../img/ico_chapeau.svg") center center no-repeat;
	width: 130px;
    height: 100px;
    background-size: 130px 100px;
    position: absolute;
    top: 27px;
    left: 74px;
}

.sAvantage .contentWrap > p{
	margin-bottom: 30px;
}

.sAvantage .animVideoPlaylist{
	margin-bottom: 70px;
}

.sAvantage .boiteAnimVideo {
    margin-top: 15px;
}

@media only screen and (max-width: 780px) {
	.sAvantage .quote{
		width: 100%;
		margin-bottom: 0px;
	}
	.sAvantage .source{
		padding: 0 72px;
	}
	.sAvantage .iconeWrapper{
		width: 100%;
		margin-top: 25px;
		margin-bottom: 25px;
	}
	
	.sAvantage .iconeWrapper .icone{
	    position: static;
	    margin: 0 auto;
	}
	
	.sAvantage blockquote .guillement:first-of-type{
		left: 0px;
	    top: 6px;
	}
	
	.sAvantage blockquote .guillement:last-of-type{
	    right: 0px;
	    top: 6px;
	}
	
	blockquote .texte{
		display: inline-block;
    	padding: 0 72px;
    	font-size: 20px;
    	width: 100%;
	}
	
}

@media only screen and (min-width: 768px) and (max-width: 780px) {
	.sTechno blockquote .texte{
		max-width: 247px;
		font-size: 19px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 875px) {
	.sDeveloppement .bgImage{
		background-position-x: 90%;
	}
	
	.animVideoPlaylist.listeThumb .listeOnglets ul li a span[class^="video"]{
		width: 60px;
		background-size: contain;
	}
}


/*=======================================
*
*	autres
*
*========================================*/

.sVideo {
	padding:50px 0;
}
.sVideo.fondGris {
	background-color:#ccc;
}
.sVideo h2 {
	margin-bottom:30px;
}
figure.graphique {
	border:1px solid #000;
	background-color:#fff;
	padding:15px;
	text-align:center;
}
figure.graphique figcaption p {
	margin:10px 0 0 0;
	/*text-align:left;*/
}


.titreVideo {
	font-size:0.8666666666666667em; /* 13/15 */
	font-weight:700;
	margin-bottom:5px;
}


.sSolutions {
	color:#fff;
}
.sSolutions .bgImage {
	padding:50px 0;
	background:url(../img/bg_solutions.jpg) 0 0 no-repeat #333;
	background-size:cover;
}
.sSolutions .textWrap {
	max-width:600px;
}
.sSolutions .fondNoir {
	padding:50px 0;
	background-color:#333;
}
.sSolutions h2 {
	color:#fff;
}
.sSolutions a {
	color:#fff;
}


.sMediasSociaux {
	padding:50px 0;
}
.sMediasSociaux .cssTable {
	display:table;
	width:100%;
	table-layout:fixed;
}
.sMediasSociaux .coteImage {
	display:table-cell;
	vertical-align:top;
	width:64.58333333333333%; /* 620/960*100 */
	padding:0;
}
.sMediasSociaux .coteTexte {
	display:table-cell;
	vertical-align:middle;
	font-size:1.133333333333333em; /* 17/15 */
	width:35.41666666666667%; /* 340/960*100 */
	padding:20px;
	border-left:1px solid #707070;
}
.sMediasSociaux .coteTexte > *:last-child {
	margin-bottom:0;
}
.sMediasSociaux .mediasSlider {
	border:1px solid #707070;
	border-bottom:0;
	margin-bottom:0;
}
.sMediasSociaux .pagingInfo {
	/*margin-bottom:30px;*/
	background-color:#013f7c;
	color:#fff;
	text-align:center;
	padding:5px;
}


.sFAQ {
	background-color:#ebebeb;
}
.sFAQ .cssTable {
	display:table;
	table-layout:fixed;
	width:100%;
}
.sFAQ .coteGauche {
	display:table-cell;
	vertical-align:top;
	width:65%;
	border-right:40px solid transparent;
}
.sFAQ .coteDroit {
	display:table-cell;
	vertical-align:top;
	width:35%;
}

.sPartenaires {
	padding:50px 0;
}
.sPartenaires h2 {
	font-size:0.8em; /* 12/15 */
	color:#666;
	margin:20px 0 10px 0;
}
.sPartenaires .g1-4.large {
	width:30%;
}
.sPartenaires .g1-4.petit {
	width:20%;
}


/* Footer des pages */
#LiensFooter {
	padding:25px 0 30px 0;
	background-color:#000;
	text-align:center;
}
#LiensFooter .mediasSociaux {
	margin:0 0 10px 0;
}
#LiensFooter .mediasSociaux a {
	display:inline-block;
	margin:0 10px 20px;
	-webkit-transition: all 200ms ease-out; /* Safari */
    transition: all 200ms ease-out;
}
#LiensFooter .mediasSociaux a:hover {
	transform: scale(1.1);
}
#LiensFooter .liensPrimaires {
	font-weight:600;
	text-transform:uppercase;
	margin-bottom:25px;
}
#LiensFooter .liensPrimaires a {
	display:inline-block;
	margin:0 30px 0 0;
}
#LiensFooter .liensPrimaires a:last-child {
	margin-right:0;
}
#LiensFooter .liensSecondaires {
	text-transform:uppercase;
	margin-bottom:0;
	font-size:0.85em;
	line-height:1.5em;
}
#LiensFooter a {
	text-decoration:none;
}
#LiensFooter a:hover {
	text-decoration:underline;
}
#Copyrights {
	padding:20px 0;
	font-size:0.85em;
	line-height:1.5em;
	background-color:#2e8804;
}
#Copyrights p, 
#Copyrights a,
#LiensFooter p,
#LiensFooter a {
	color:#fff;
}

/* #Page Styles
================================================== */



/* #Media Queries
================================================== */
/* Écran PAS assez large pour voir l'ensemble du site (moins de 1024px) */
@media only screen and (max-width: 1024px) {
	
}


/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	/* .container = width de 768px */
	
	.sSolutions .bgImage {
		background-position:center top;
	}
	.sSolutions .textWrap {
		max-width:500px;
	}
}

@media only screen and (min-width: 701px) and (max-width: 979px) {
	
	.sOuverture .animVideoPlaylist ul li a{
		min-height: 117px;
		
	}
}


/*  #Mobile (Portrait)
================================================== */
@media only screen and (max-width: 700px) {
	.animVideoPlaylist ul li{
		width: 100%;
	}
	.animVideoPlaylist ul li a{
		margin: 0px !important;
		
	}
	.animVideoPlaylist .navigation{
		position: relative;
		width: 100%;
		height: 60px;
	}
	.animVideoPlaylist .navigation .fleche-slider{
		width: 50%;
	}
	
	.sDiversite .fleche-slider a {
		background: url(http://benhur.teluq.uquebec.ca/test_akwa/css/../img/ico_fleche_slider.svg) 40px center no-repeat;
	}
	
	.sDiversite .animVideoPlaylist{
		padding: 0px;
	}
	.sDiversite .interTitre span.titre{
		padding-top: 50px !important;
		padding-bottom: 10px;
	}
	.sDiversite figure, .sDiversite .interTitre span{
		padding: 0 20px;
	}
	.animVideoPlaylist .navigation{
		width: 100%;
	}
	.sIngenierie #listes{
		position: relative;
		max-height: 300px;
	}
	
}
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	
	/* Padding réduit de toutes les strates */
	.sQuiz,
	.sVideo,
	.sSolutions .bgImage,
	.sSolutions .fondNoir,
	.sMediasSociaux,
	.sPartenaires {
		padding:30px 0;
	}
	.pageEntete .fondNoir ul{
		width: 100%;
	}
	
	.sDeveloppement .bgImage{
		    background: url(../img/bg_developpement.jpg) top left no-repeat #ECE6DA;
	}
	
	.sDiversite .columnf {
		padding: 0 20px !important;
	}
	.columnf.g1-2.first > ul,
	.columnf.g1-2.first > ul li:last-child {
		margin-bottom:0;
	}
		
	.sQuiz .columnf.last,
	.sSolutions .columnf.last {
		padding-left:0;
		padding-top:30px;
	}
	
	.sSolutions .bgImage {
		background-image:url(../img/bg_solutions_mobile.jpg);
	}
	
	.sMediasSociaux .coteTexte {
		font-size:1em; /* 15/15 */
	}
	
	.sFAQ .cssTable {
		display:block;
	}
	.sFAQ .coteGauche {
		display:block;
		width:100%;
		border-right:0;
	}
	.sFAQ .coteDroit {
		display:block;
		width:100%;
	}
	
	.sPartenaires p,
	.sPartenaires h2 {
		text-align:center;
	}
	
	.sPartenaires .g1-4.large,
	.sPartenaires .g1-4.petit {
		width:100%;
	}
	
	
	/* Styles pour mobiles (tout en une colonne) */	
	#LiensFooter, #Copyrights { padding-left:10px; padding-right:10px; }
	#Copyrights p { text-align:center; width:100%; display:block; float:none; }
	#Copyrights p:first-child { padding-bottom:5px; }
	#Copyrights a { display:inline-block; }
	
	.sDeveloppement .bgImage{
		 background: url(../img/bg_developpement_mobile.jpg) bottom center no-repeat #ECE6DA;
	}
}

/* Très petite résolution */
@media only screen and (max-width: 390px) {
	
	h1.titrePage{
		font-size: 1.4em;
	}
}


/* Entre 2 résolutions (pas encore téléphone) */
@media only screen and (max-width: 599px) {

	.sMediasSociaux .cssTable,
	.sMediasSociaux .coteImage,
	.sMediasSociaux .coteTexte {
		display:block;
		width:100%;
		border:0;
	}
	.sMediasSociaux .coteTexte {
		border-top:1px solid #707070;
		padding:15px;
	}
	
	#LiensFooter .liensPrimaires a {
		display:block;
		margin:0 0 10px 0;
	}
}



/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 767px et moins */
@media only screen and (max-width: 767px) {
	
	.sPedago blockquote {
		margin-left: auto;
		margin-right: auto;
		max-width: 330px;
		width: 100%;
		margin-top: 20px;
	}
	.sPedago blockquote .guillement:nth-of-type(2){
		right: -48px;
	}
	
	.animVideoPlaylist.listeThumb .visionneuse, .animVideoPlaylist.listeThumb .listeOnglets{
		width: 100%;
		clear: both;
	}
	
	.animVideoPlaylist.listeThumb .listeOnglets{
		padding-left: 0px;
		min-height:354px;
		margin-top: 10px;
	}
}

@media only screen and (max-width: 420px) {
	.animVideoPlaylist.listeThumb .listeOnglets ul li a span[class^="video"]{
		background-image: none !important;
		max-width: 40px;
	}
	
	.animVideoPlaylist.listeThumb .listeOnglets ul li a .titre{
		width: 68%;
	}
}

p.contenu-mobile{
	display:none !important;
}

@media only screen and (min-width: 1196px) {
	.animVideoPlaylist.listeThumb .listeOnglets ul li a .titre{
		width: 70%;
	}
}

/* Problème avec le schéma ingenierie pédago
================================================== */
@media only screen and (max-width: 960px) {
	p.contenu-mobile{
		display: inline-block !important;
	}
	p.contenu-table{
		display: none !important;
	}
	.sIngenierie .bgImage {
		padding-bottom: 40px;
	}
	
	.sIngenierie .contentWrap > p.info {
    	padding: 0px 0px 10px 0px;
    	line-height: inherit;
    	height: inherit;
    	width: 100%;
    	max-width: 410px;
    	text-align: center;
	}
	
	.sIngenierie .contentWrap > p.bloc-texte {
    	padding: 0 0 30px 0;
	}
	
	.sIngenierie .contentWrap > p.info:before {
    	background: url(../img/ico_fleche_vert_mobile.svg) center center no-repeat;
    	display: block;
    	position: static;
    	width: 100%;
    	margin-bottom: 10px;
	}

	.sIngenierie .contenant-svg #listes{
		min-height: 220px;
		position: relative;
	}
	
	.sIngenierie .contenant-svg #listes ul{
		position: absolute;
		//position: static;
	    display: block;
	    text-align: left !important;
	    width: 100%;
	    max-width: 300px;
	    border: none !important;
	    margin: 0 auto;
	    top: 0 !important;
	    left: 0 !important;
	    right: 0 !important;
	    padding: 0px !important;
	}
	.sIngenierie .contenant-svg ul:before{
		content: none;
	}
	.sIngenierie .contenant-svg #listes ul li:first-of-type{
		display: block;
	}
	
	.sPedago blockquote{
		font-size: 30px;
		max-width: 320px;
		margin-left: 15%;
	}
}
@media only screen and (max-width: 767px) {
	.sPedago blockquote{
		font-size: 40px;
		max-width: 330px;
		margin-left: auto;
		
	}
}
@media only screen and (max-width: 500px) {
	.sPedago blockquote{
		font-size: 25px;
    	max-width: 214px;
    	margin-left: auto;
	}
	.sPedago blockquote .guillement:first-of-type{
		top: 7px;
		left: -60px;
	}
	.sPedago blockquote .guillement:nth-of-type(2){
		right: -40px;
		bottom: 6px;
	}
}
@media only screen and (max-width: 767px) {
	.container .sCheminement .palm100.columnf.last{
		margin-top: 20px;
	}
}

@media only screen and (max-width: 450px) {
	html{
		overflow-x: hidden;
	}
	.sIngenierie .contenant-svg svg{
		min-height: initial;
	}
	.pageEntete .block {
		display: inherit;
		margin-bottom: 10px;
	}
	.pageEntete h1.titrePage span {
		font-size: 2.3rem !important;
	}
}


/* Styles d'impression */
@media print {
	/* Black prints faster: h5bp.com/s */
	* { background: transparent !important; color: black !important; border-color:black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
	
	/* Liens */
	a, a:visited { text-decoration: underline !important; }
	a[href]:after { content: " (http://www.teluq.ca" attr(href) ")"; }
	a[href^="http://"]:after, a[href^="https://"]:after, a[href^="mailto:"]:after  { content: " (" attr(href) ")"; }
	abbr[title]:after { content: " (" attr(title) ")"; }
	
	/* Don't show links for images, or javascript/internal links, ni les liens avec la classe "nlp" */
	.ir a:after, a.nlp:after, 
	a[href^="javascript:"]:after, 
	a[href^="#"]:after, 
	#LiensFooter a:after,
	#Copyrights a:after { content: "" !important; }

	
	/* Contenu */
	blockquote { margin:10px 0; width:auto; page-break-inside: avoid; }
	fieldset { border: 1px solid #000; margin:10px 0; width:auto; }
	thead { display: table-header-group; }
	tr, img { page-break-inside: avoid; }
	img { max-width:100% !important; }
	@page { margin: 1cm; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; }
	h2 { 
		padding:0; 
		background-color:transparent;
	}
	
	/* Ajustements du layout/contenu */
	#Page { width:auto; margin:0; padding:0; }
	h1.titrePage { margin-top:15px; }
	#Copyrights { border-top:1px solid #000; }
	#Copyrights * { padding:0; }
	#Copyrights p { padding-bottom:5px; text-align:left; width:100%; display:block; float:none; }
	
	
	/* Taille réduite du titre principal, exactement comme pour mobile */
	h1.titrePage {
		/* font-size:4rem; 30/15px */
		font: 42rem/51px;
		border-bottom:0;
		margin-bottom:30px;
		padding-bottom: 0;
	}
	
	
	
	/* Accordeon */
	.accordeon .toggler { border-bottom: 0; }
	.accordeon > div { display:block!important; }
	.accordeon .visuallyhidden { clip:auto; height:auto; margin:auto; overflow:auto; position:inherit; width: auto; }
	
	/* On cache les zones non importantes à l'impression */
	#LiensFooter, .navFooter {display:none!important;}
	
	/* Grid Layout ajustements */
	.container, .row, .column { float:none !important; display:block !important; width:100% !important; margin-left:0; margin-right:0 }
	.container .columnf { padding-left: 2%; padding-right: 2%; }
	.print_only { display:block!important; visibility:visible!important; }
	.screen_only { display:none!important; }
	
	hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
	
}