﻿/*Entete commun pour CNESST.gouv.qc.ca*/
@media (max-width: 680px) {
	.hide-680{
		display:none!important;
	}
	.show-680{
		display:block!important;
	}
}
@media (min-width: 680px) {
	.show-680{
		display:none!important;
	}
	/*body{
		overflow:scroll!important;
	}*/

}
/*Nav toggle (mobile)*/
#nav-toggle { 
position: absolute; 
right: 15px; top: 35px; 
}
#nav-toggle { 
cursor: pointer; 
padding: 15px 35px 16px 0px; 
margin-top: -15px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;  
border-radius: 1px; 
height: 4px;  
width: 30px;  
background: #414141;  
position: absolute;  
display: block;  
content: '';
}
#nav-toggle span:before {  
top: -10px; 
}
#nav-toggle span:after {  
bottom: -10px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
-webkit-transition:all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#nav-toggle.active span {  
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {  
-webkit-transform: rotate(45deg);/* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-o-transform:rotate(45deg);
-moz-transform-rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-toggle.active span:after { 
-webkit-transform: rotate(-45deg);/* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-moz-transform: rotate(-45deg);
-o-transform-rotate(-45deg);
-o-transform-rotate(-45deg);
transform: rotate(-45deg);
}


/*Menu caché*/
#mobile-nav{
	position:absolute;
	z-index:999;
	top:70px;	
	left:-200%;
	display:block;
	background:#fff;	
	background:rgba(255,255,255,1);	
	height:0;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

}
#mobile-nav.active{		
	height:100%;
	left:0;
	right:0;	
	
}
#mobile-nav.active .mobile-wrap{
   position: relative;
    width: 100%;
    height:320px;
    height: 80vh;   
    overflow: hidden; 
}
#mobile-nav.active .inner-mobile{ 
 	height: 100%;   
    width: 100%;
    /*overflow-y: scroll;*/
}
#mobile-nav .inner-mobile ul{
	list-style:none;
	padding:20px;	
}
#mobile-nav .inner-mobile ul li{
	width:250px;
	margin:0 auto;
	padding:10px 0;	
	opacity:0;
	-webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
#mobile-nav.active .inner-mobile ul li{
	opacity:1;
}
#mobile-nav .inner-mobile ul li.secteur{
	text-transform:uppercase;
	border-bottom:1px solid #ccc;
	padding:15px 0;	
}
#mobile-nav .inner-mobile ul li a{
	/*font-family:'thesansbold';*/	
	color:#414141;
}

#mobile-nav .inner-mobile ul li a:hover{
	text-decoration:none;
	color:#50A129;
}
#mobile-nav .inner-mobile ul li:first-of-type{
	border:none;
	padding:20px 0 0 0;
}
#mobile-nav .inner-mobile ul li:nth-child(5){margin-top:10px;}

/*./nav-mobile*/

#menu-commun{	
	width:100%;
	background:none;		
	letter-spacing:0.6px;
	text-transform:uppercase;
	background:#1b1b1b;
}

#menu-commun .col-xs-4{
	padding:0;
	border-right:1px solid #0B0B0B;
	border-left:1px solid #373737;
}
#menu-commun .col-xs-4:first-of-type{
	border-left:none;
}
#menu-commun .col-xs-4:last-of-type{
	border-right:none;
}

#menu-commun .col-xs-4 a{
color:#fff!important;
height:30px;
display:block;
padding:5px 0 10px;
width:100%;
margin:0 auto;
text-align:center;
position:relative;
font-size:16px;
/*font-family: 'thesansbold';*/
font-family:'roboto';
border-top:1px solid #484848;
background:#1b1b1b;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased!important;
  -moz-osx-font-smoothing: grayscale!important;

}
@media only screen and (min-width:680px) and (max-width: 991px) {	
	#menu-commun .col-xs-4 a{
		font-size:13px;
		padding-top:7px!important; 
		height:30px;
	}
}


#menu-commun .col-xs-4:first-of-type a{
border-top:none;
}
#menu-commun .col-xs-4:last-of-type a{
border-bottom:none;
}

@media (max-width: 680px){
	#menu-commun .col-xs-4 a{
	font-size:17px;
	padding-top:0px!important; 
	height:25px!important;
	}
}


#menu-commun .col-xs-4 a:hover{
text-decoration:none;
background:#414141!important;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

}

#menu-commun .col-xs-4 a.active{
color:#fff!important;
background:#50A129!important;
border-bottom:1px solid #50a129;
border-top:1px solid #50a129;
}
#menu-commun .col-xs-4 a.active:hover{
cursor:default;
}

@media (min-width: 768px) {
#menu-commun .col-xs-4 a.active::after{
position:absolute;
left:49%;
bottom:-6px;
content:"";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #4fa129 transparent transparent transparent;
}
}

@media (max-width: 991px) {
#headerwrap h1.logo svg{
	width:70%;
	text-align:left!important;
	}
#headerwrap #logo-svg-fix{
	width:92px!important;
	height:34px!important;
}
#headerwrap .logo-label{
	font-size:12px;
	line-height:16px;
	margin:-2px 0 0 10px!important;
	text-align:left;
	}
#headerwrap .header-small-nav{
	margin:0 0 20px 0!important;
	text-align:right!important;
}
}
@media (max-width: 680px) {
#headerwrap h1.logo svg{
	width:60%;
	text-align:left!important;
}
}
@media (max-width: 629px) {
#headerwrap #banner .col-xs-2{
	width:30%!important;
	text-align:center;
}
#headerwrap #banner .col-xs-5{
	width:0%!important;
}
#headerwrap #banner .col-xs-4{
	display:none!important;
	
}

#headerwrap .header-small-nav{	
	text-align:center!important;
	font-size:12px;
}
}
@media (max-width: 480px) {

	#headerwrap  #banner .col-xs-2{
	width:100%!important;
	text-align:center;
	}
	#headerwrap #banner .col-xs-5{
		width:80%!important;		
	}
	#headerwrap #banner .col-xs-5 .recherche{
	float:none!important;
	margin:0 auto;
	margin:0 0 10px 4px;
	padding-left:0;
	padding:0;
	}
	#headerwrap #banner .col-xs-4{
	display:none!important;
	}

	#headerwrap .header-small-nav li{	
	border-left:none;
	line-height:20px;
	text-align:left;	
	}
	#headerwrap .header-small-nav li:before{
	content: "\f105";
    font-family: FontAwesome;
    color: #50A129;
    font-weight: bold;
    margin-right: 4px;	
	}

}


/**Bouton monespace**/
.wrap-search-btn-me{
	float:left;
	width:180px;
	position:relative;
}
@media (min-width:768px){
	.wrap-search-btn-me{
	   width:215px;
	   }
}
.monespace{
	background:#50a129!important;
	color:#fff!important;
	padding:0px 8px!important;
	margin:0;
	font-weight:300;
	font-size:12px!important;	
}
@media only screen and (min-width:630px) and (max-width: 680px){
	.btn.monespace{
		position:absolute;
		right:50px;
	}
}
@media only screen and (min-width:480px) and (max-width: 629px){
	.btn.monespace{
		position:absolute;
		right:-50px;		
	}
}
@media only screen and (min-width:380px) and (max-width: 480px){
	.btn.monespace{
		position:absolute;
		right:-140px;
		top:-49px;
	}
}

@media only screen and (min-width:320px) and (max-width: 380px){
	.btn.monespace{
		position:absolute;
		right:-110px;
		top:-49px;
	}
}

 .monespace:hover{
	background:#59B72D!important;
	color:#fff!important;	
}
.monespace.active{
	background: #414141!important;
    color: #fff!important;
}
 .monespace span{
	display:inline-block!important;
	padding:4px 5px 4px 0!important;	
	/*border-width:0;*/
	font-size:14px;
	/*border-right:1px solid #5CB731!important;*/
	position:relative!important;		
	background: none!important;
 	margin: 0 5px 0 0!important;
  	border-left: none!important; 
  	font-weight:100;	
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;	
}
 .monespace:hover span{
		color:#fff!important;	
}
 .monespace:hover span::after{
	background:#63C635;		
}


/**Champs de recherche**/
.search-wrap{
	display:block;
	position:relative;
	width:100%;	
	text-align:right;
}
#bouton-recherche-principal,#bouton-recherche-constellio,#bouton-recherche-mobile{	
    color: transparent!important;
    font-size: 0;
    line-height: 0!important; 
    width:10%;
    height: 30px!important;
    box-sizing: content-box!important;
    overflow: hidden!important;
    filter: none!important;
    background: transparent!important;
    z-index:99;
    border: none;
   	display:inline-block;
   	vertical-align:middle;
  	padding:0;
  	position:absolute;
	right:0;
	top:0;
	max-width: 30px!important; 
	background:#f2f2f2;
}
.search-wrap span.search-ico:after,.search-wrap span.search-ico:after{
	display:block;
	font-size:18px;
	font-family:'FontAwesome';
	content:'\f002';
	color:#999;
	position:absolute;
	right:1px;
	top:1px;
	text-align:center;
	padding-top:2px;
	max-width: 30px;   
    width:10%;
    height: 26px;
    box-sizing: content-box;
	background:#f2f2f2;	
	border-left:1px solid #ccc;
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;

}
.search-wrap span.search-ico:hover:after,.search-wrap span.search-ico:hover:after{
	background:#008a00;
	color:#fff;
	right:0px;
	top:0px;
	padding-top:3px;
 	height: 27px;
}
#champ-recherche-principal,#champ-recherche-constellio,#champ-recherche-mobile{
    position: relative;
    display:inline-block;
    height: 30px;
    border: 1px solid #ccc; 
    font-size:1.6rem;
    font-size:16px;
    width:100%;
    padding-right:10%;
    line-height: 14px!important;
    padding-left: 5px!important;
    text-align: middle!important;
    vertical-align:middle;	
    border-top-right-radius:4px;
	border-bottom-right-radius:4px;
	color:#666;
}
#champ-recherche-principal:focus,#champ-recherche-constellio:focus,#champ-recherche-mobile:focus{
    outline:none;
    -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd;
    -moz-box-shadow: inset 2px 2px 2px 0px #dddddd;
    box-shadow: inset 2px 2px 2px 0px #dddddd;
}


/*Résultats recherche spellcheck*/
#spellCheck-recherche{
	font-weight:bold;
	font-size:20px;
}
#spellCheck-recherche img{
	display:none;
}
#spellCheck-recherche .spellcheck{
	font-weight:normal;
	display:block;
	font-size:16px;
}
/**Print**/
@media print
{    
    .no-print, .no-print *,#headerwrap,#footerwrap,.menu-horizontal #menu1,.bande-pleine.container-fluid
    {
        display: none !important;
    }
}