@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'trashhandregular';
    src: url('../fonts/trashhandeot.eot');
    src: url('../fonts/trashhandeot.eot?#iefix') format('embedded-opentype'),
         url('../fonts/trashhandwoff.woff') format('woff'),
         url('../fonts/trashhandttf.ttf') format('truetype'),
         url('../fonts/trashhandsvg.svg#trashhandregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



* {
			font-family: "Fira Sans", serif;
			box-sizing: border-box;
			-o-box-sizing: border-box;
			-ie-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			margin: 0; padding: 0; border: 0;
		}

		html{
			/*background: #de9951 url(http://www.hww.ca/assets/wrapper/kaboom-background.jpg) top center no-repeat fixed;
			background-size: cover;*/
			background-color:#e6e6e6;
			overflow-x:hidden;
		}


		body{
			background: transparent;
			max-width: 960px; margin: 0 auto;
		}

		#bg{
			position:absolute;
  			 z-index:-100;
  			 top:0;
  			 left:0;
  			 right:0;
  			 width:100%;
  			 max-width:100%;
		}


		a{color:#000;}




		ul{
			padding-left: 40px;
		}

		ol{
			padding-left: 30px;
		}
		ol li{
			padding-left:10px;
		}


		.bande-couleur{
		width:100%;
		height:10px;
		background-color: rgb(153, 153, 153);	
		position:relative;
		}


		.couleur-wildlife{
			background: rgb(128, 214, 225);	
		}


		.couleur-wildspaces{
			background: rgb(102, 214, 164);	
		}

		.couleur-multimedia{
			background: rgb(115, 91, 164);	
		}

		.couleur-kids-zone{
			background: rgb(235, 0, 0);	
		}

		.couleur-issues{
			background: rgb(255, 236, 86);	
		}

		.couleur-things-you-can-do{
			background: rgb(255, 102, 97);	
		}


		header{
			font-size: 12px;
			padding: 16px;
			background: #326432;
			overflow: hidden;
			position: relative;
			z-index: 10;
		}

		header #logo{
			float: left;
			margin-top: 20px;
		}

		header,
		header a,
		header a:link{
			color: white;
			text-decoration: none;
		}

		header ul{
			list-style: none;
			overflow: hidden;
			border-bottom: 1px dotted #d0d0d0;
		}

		header ul li{
			list-style: none; float: left;
			padding: 1em 0 10pt;
		}

		header ul li a{
			border-left: 1px dotted #d0d0d0;
			padding: 0 0.5em;
			display: block;
		}

		header ul li a:hover{
			text-decoration: underline;
		}

		header ul li:nth-child(11) a, header ul li:nth-child(8) a, header ul li:nth-child(9) a, header ul li:nth-child(10) a{
			border-left: none;
		}

		header #mainMenu{
			float: right;
			text-transform: uppercase;
			margin-bottom: 10pt;
		}

		#mainMenu li a{
			font-size:10.5px;
			line-height: 23px;
			vertical-align: middle;
		}


		.header-form{
			display: inline-block;
			float: right;
		}

		.bt-langue{
			float:right;
			margin-left: 30px;
			line-height: 39px;
			vertical-align: middle;
			text-transform: uppercase;
		}

		header form#search{
			float: right;
		}

		header form#search #query{
			background: transparent url(http://www.hww.ca/assets/wrapper/search-icon.png) right center no-repeat;
			width: 320px;
			border: 1px solid white;
			padding: 0.5em 1em;
			margin: 0 0.3em 0 0;
			font-size: 12pt;
			color: white;
			font-style: italic;
		}

		header form#search #submit{
			display: none;
		}

		header form#search a{
			display: inline-block;
			text-transform: capitalize;
			vertical-align: middle;
		}

		#categoryMenu{
			background: rgba(255, 255, 250, 0.75);
			/*overflow: hidden;*/
			list-style: none;
			position: relative;
			z-index: 9;
			padding: 0;
		}

		#categoryMenu:before {
			content: " ";
			display: block;
			width: 100%;
			top: -3em;
			height: 3em;
			margin-bottom: -3em;
			border-radius: 100%;
			background: green;
			position: relative;
			box-shadow: rgba(0, 0, 0, 0.65) 0 5px 2em;

		}

		#categoryMenu:after {
			content: " ";
			display: block;
			width: 100%;
			clear: both;
		}
		#categoryMenu > li{
			transition: background-color 0.35s;
			-otransition: background-color 0.35s;
			-ie-transition: background-color 0.35s;
			-moz-transition: background-color 0.35s;
			-webkit-transition: background-color 0.35s;
			background: rgba(255, 255, 250, 0);
			width: 16.66%;
			min-width: 108px;
			float: left; clear: none;
			position: relative;
			list-style: none;

		}
		#categoryMenu > li:hover{
			background: rgba(255, 255, 250, 1);
		}

		#categoryMenu > li:before{
			content: " ";
			display: block;
			border-left: 2px dotted rgba(0, 0, 0, 0.65);
			float: left;
			width: 0;
			height: 100px;
			margin: 27px -1px 0;
		}

		#categoryMenu > li:first-child:before{
			content: none;
		}

		#categoryMenu > li > a,
		#categoryMenu > li > a:link{
			display: block;
			margin: 1em;
			text-align: center;
			color: black; text-decoration: none;
			/*text-shadow: rgba(0, 0, 0, 0.35) 0 1px 2px;*/
			font-weight: bold;
			color: #326432;
			line-height: 1em;

		}

		#categoryMenu > li > a img{
			display: block;
			margin: 2.5em auto 1em;

		}

		#categoryMenu > li .submenu{
			/*display: none; */ 
			height: 0; 
			overflow: hidden;
			list-style: none;
			color: white;
			background-color: rgba(0, 0, 0, 0.85);
			position: absolute;
			white-space: nowrap;
			transition: height 0.35s ease-out;
			-o-transition: height 0.35s ease-out;
			-ie-transition: height 0.35s ease-out;
			-moz-transition: height 0.35s ease-out;
			-webkit-transition: height 0.35s ease-out;
			box-shadow: black 0 4px 16px -2px;
			padding: 0;
		}

		#categoryMenu > li:hover:after{
			content: " ";
			display: block;
			position: absolute;
			bottom: 0; left: 0; right: 0;
			height: 10px;
			background: rgb(128, 214, 225);
			margin: 0 10px;
		}


		#categoryMenu > li:nth-child(2):hover:after{
			background: rgb(102, 214, 164);
		}

		#categoryMenu > li:nth-child(3):hover:after{
			background: rgb(115, 91, 164);
		}

		#categoryMenu > li:nth-child(4):hover:after{
			background: rgb(235, 0, 0);
		}

		#categoryMenu > li:nth-child(5):hover:after{
			background: rgb(255, 236, 86);
		}

		#categoryMenu > li:nth-child(6):hover:after{
			background: rgb(255, 107, 97);
		}
				

		.menu-wildlife > li:nth-child(1):after{
			content: " ";
			display: block;
			position: absolute;
			bottom: 0; left: 0; right: 0;
			height: 10px;
			background: rgb(128, 214, 225);
			margin: 0 10px;
		}

		.menu-wildspaces > li:nth-child(2):after{
			content: " ";
			display: block;
			position: absolute;
			bottom: 0; left: 0; right: 0;
			height: 10px;
			background: rgb(102, 214, 164);
			margin: 0 10px;
		}

		.menu-multimedia > li:nth-child(3):after{
			content: " ";
			display: block;
			position: absolute;
			bottom: 0; left: 0; right: 0;
			height: 10px;
			background: rgb(115, 91, 164);
			margin: 0 10px;
		}

		.menu-kids-zone > li:nth-child(4):after{
			content: " ";
			display: block;
			position: absolute;
			bottom: 0; left: 0; right: 0;
			height: 170px;
			background: rgb(235, 0, 0);
			margin: 0 10px;
			z-index:-1;
		}

		#categoryMenu.menu-kids-zone > li:nth-child(4):hover{
			background: rgb(235, 0, 0);
		}


		#categoryMenu.menu-kids-zone > li:nth-child(4) > a{
			color:#fff;
		}

		.menu-issues > li:nth-child(5):after{
			content: " ";
			display: block;
			position: absolute;
			bottom: 0; left: 0; right: 0;
			height: 10px;
			background: rgb(255, 236, 86);
			margin: 0 10px;
		}

		.menu-things-you-can-do > li:nth-child(6):after{
			content: " ";
			display: block;
			position: absolute;
			bottom: 0; left: 0; right: 0;
			height: 10px;
			background: rgb(255, 107, 97);
			margin: 0 10px;
		}

		#categoryMenu > li:nth-child(6) .submenu{
			right:0;
		}



		#categoryMenu > li:hover .submenu{
			display: block;
			height: auto;
			height: initial;
		}

		#categoryMenu > li .submenu > li > a:link,
		#categoryMenu > li .submenu > li > a{
			display: block;
			padding: 1em;
			border-top: 1px solid rgba(128, 128, 128, 0.65);
			text-decoration: none;
			color: white;
			font-size: inherit;
		}

		#categoryMenu > li .submenu > li:first-child > a:link,
		#categoryMenu > li .submenu > li:first-child > a{
			border-top: none;
		}

		#categoryMenu > li .submenu > li > a:link:hover,
		#categoryMenu > li .submenu > li > a:hover{
			text-decoration: underline;
		}
		
		#categoryMenu>li:nth-child(4n) img:nth-child(1n){
			display:block;
		}
		#categoryMenu>li:nth-child(4n) img:nth-child(2n){
			display:none;
		}


		#mainBanner {
			background: rgba(0, 0, 0, 0.5) url(http://www.hww.ca/assets/wrapper/Accueil-Bison3.jpg) center left no-repeat;
			box-shadow: rgba(0, 0, 0, 0.75) 0 8px 26px -4px;
			background-image: attr(data-background url);
			background-size: auto 100%;
			background-size: cover;
			position: relative;
			padding: 1.5em;
			width: 100%;
			height: 615px;
			color: white;
			overflow: hidden;
		}

		#mainBanner > img{
			position: absolute; top: 0; left: 0;
		}

		#mainBanner a,
		#mainBanner a:link{
			color: white; text-decoration: none;
		}

		#mainBanner section{
			padding: 1em;
			border-top: 28px solid rgb(128, 214, 225);
			background: rgba(0, 0, 0, 0.65);
			width: 446px;
			position: relative;
			box-shadow: black 0 4px 24px -5px;
		}

		#mainBanner h1{
			font-weight: 500;
			font-size: 22pt;
		}

		#mainBanner p{
			font-weight: 300;
			max-height: 9em;
			overflow: hidden;
		}

		#mainBanner aside{
			float: right;
			border-left: 2px dotted rgba(255, 255, 255, 0.5);
			padding-left: 0.5em;
			margin-left: 0.5em;
			font-size: 10pt;
			max-width: 25%;
			font-weight: 300;
			text-shadow: black 0 1px 3px;
		}

		#mainBanner aside a{
			display: block;
			margin-bottom: 1em;
		}

		#mainBanner aside a:hover{
			text-decoration: underline;
		}

		#mainBanner aside button{
			display: block;
			color: black;
			border-radius: 100%;
			font-size: 1.25em;
			width: 1em; height: 1em;
			line-height: 1.1em;
			background: rgb(128, 214, 225);
		}

		#mainBanner iframe{
			margin-top: 2em;
			margin-bottom: 2em;
		}

		#mainBanner nav{
			position: absolute;
			bottom: 1em; right: 1em;
			text-align: right;
		}

		#mainBanner nav a,
		#mainBanner nav a:link{
			width: 10px;
			height: 10px;
			display: inline-block;
			border: 1px solid #000;
			border-radius: 100%;
			margin: 0 0 0 0.5em;
			padding: 0;
			text-decoration: none;
			background-color: transparent;
			/*box-shadow: rgba(255, 255, 255, 0.35) 0 0 8px 3px, inset rgba(0, 0, 0, 0.35) 0 2px 3px 1px;*/
			transition: background-color 0.35s;
			-otransition: background-color 0.35s;
			-ie-transition: background-color 0.35s;
			-moz-transition: background-color 0.35s;
			-webkit-transition: background-color 0.35s;
		}

		#mainBanner nav a:hover,
		#mainBanner nav a:link:hover{
			background-color: rgba(0, 0, 0, 0.5);
		}

		#mainBanner nav a.active,
		#mainBanner nav a.active:link{
			background-color: rgba(0, 0, 0, 0.95);
		}



		#videos {
			padding: 1em 0;
		}

		#videos iframe{
			width: 33.33%;
			height: 245px;
			padding: 0 0 0 1em;
		}

		#videos h1+iframe{
			padding-left: 0;
		}





		main:before{

		}


		main {
			/* IE9 SVG, needs conditional override of 'filter' to 'none' */

			/*
			background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U3ZTdlNyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iI2U3ZTdlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlN2U3ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
			background: -moz-linear-gradient(top, rgba(230,230,230,0) 0%, rgba(230,230,230,1) 15%, rgba(230,230,230,1) 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,0)), color-stop(15%,rgba(230,230,230,1)), color-stop(100%,rgba(230,230,230,1)));
			background: -webkit-linear-gradient(top, rgba(230,230,230,0) 0%,rgba(230,230,230,1) 15%,rgba(230,230,230,1) 100%);
			background: -o-linear-gradient(top, rgba(230,230,230,0) 0%,rgba(230,230,230,1) 15%,rgba(230,230,230,1) 100%);
			background: -ms-linear-gradient(top, rgba(230,230,230,0) 0%,rgba(230,230,230,1) 15%,rgba(230,230,230,1) 100%);
			background: linear-gradient(to bottom, rgba(230,230,230,0) 0%,rgba(230,230,230,1) 15%,rgba(230,230,230,1) 100%);

			/*/
			/*background: rgb(230, 230, 230);
			border: 1px solid #e7e7e7;
			box-shadow: 0 8px 16px -4px;*/
			/* fun little trick: remove the "/*" above the "background" block to toggle which section is commented out*/


			overflow: hidden;
			padding: 2em;
			display:block;
			margin: 0 0 0;
			background-color:#e6e6e6;



		}





		main h1,
		main .feature1_title{
			font-size: 24pt; font-weight: 500;
			color: #222;
			/*text-shadow: #666 0 1px 4px;*/
		}

		.dotSeparator{
			display: block;
			font-size: 14pt;
			text-align: center;
			background: url(/assets/wrapper/nav/dot_separator.png) center center no-repeat;
			text-decoration: none;
			color: #222;
			margin: 2em auto;
		}

		.dotSeparator.more:before{
			content: "+";
			font-size: 1.25em;
			line-height: 121%;
			width: 1em;
			height: 1em;
			overflow: hidden;
			text-align: center;
			background-color: #222;
			display: inline-block;
			border-radius: 100%;
			margin-right: 0.5em;
			color: #e7e7e7;
			vertical-align: middle;
		}


#kids a{
	text-decoration:none;
}

		.circle{
			border-radius: 100%;
			background: white;
			color: rgb(235, 0, 0);
			text-align: center;
			display: block; float: left; clear: auto;
			margin-left: 4%;
			width: 130px; height: 130px;
			padding: 89px 12px 0;
			clear: auto;
			white-space: normal;
			font-family: 'trashhandregular';
			font-size:20px;
			line-height:18px;
			
			display:block;
		}
		
		.circle:last-child{
			padding: 80px 12px 0;
		}

		.big.circle{
			background-color: rgb(235, 0, 0);
			box-shadow: #333 2px 5px 24px -8px;
			width: 310px; height: 310px; margin: 0 auto 2em;
			padding-top: 0px;
			color: black;
			float: none;
			text-decoration:none;
			display:block;
			vertical-align:middle;
		}
		
		.big.circle img{
			margin:70px auto 0px;
			display:block;
		}
		
		.big.circle strong{
			font-family: 'trashhandregular';
			font-size:48px;
			line-height: 40px;
			text-align:center;
			text-transform:uppercase;
			display:block;
			margin:30px 0;
			color:#fff;
			text-decoration:none;
		}
		
		.big.circle p{
			display:block;
			margin:10px 0;
			color:#fff;
			text-decoration:none;
			font-size:14px;
		}

		.small.circle{
			background: silver;
			color: white;
			text-transform: uppercase;
			margin: 0 1em;
			height: 76px; width: 76px; padding-top: 0;
			font-family: "Fira Sans", serif;
			font-size:12px;
			cursor:pointer;
		}

		section#latestNews,
		section#kids{
			width: 50%; margin: 0 0 5em; clear: none;
		}
		section#latestNews{
			padding-right: 0.5em;
			float: left;
		}
		section#kids{
			padding-left: 0.5em;
			float: right;
		}

		section#kids div {
			overflow: hidden;
		}

		section#kids div .circle:first-child{
			margin: 0;
		}

		section#kids .circle#colouring{
			background: white url(../images/icone-videos.png) no-repeat center 10px;
		}
		section#kids .circle#learning{
			background: white url(../images/icone-jeux.png) no-repeat center 25px;
		}
		section#kids .circle#activities{
			background: white url(../images/icone-share.png) no-repeat center 15px;
		}

		section#kids .big.circle b{
			font-family: 'trashhandregular';
			font-size:48px;
			text-align:center;
			text-transform:uppercase;
			display:block;
			margin:30px 0;
			color:#fff;
			text-decoration:none;
		}

		

	

		section#kids .big.circle p{
			
		}

		


		div.mainpageSurvey{
			background: #282828;
			background: rgba(0, 0, 0, 0.75);
			overflow: hidden;
			clear: both;
			padding: 1em 1.5em 2em;
			margin: 2em 0 1em;
		}


		div.mainpageSurvey h1{
			border-bottom: 2px dotted silver;
			margin-bottom: 1em;
			color: #e7e7e7; text-shadow: none;
		}

		div.mainpageSurvey p{
			overflow: hidden; color: #e7e7e7;
		}
		div.mainpageSurvey p:nth-child(2n){
			width: 60%; margin: 0; float: left; padding-right: 1em;
		}

		div.mainpageSurvey p:nth-child(2n+1){
			width: 40%; margin: 0; float: right;
		}

		div.mainpageSurvey label{
			float: left; clear: left; margin-top: 0.5em; flont-size:12px;
		}

		div.mainpageSurvey input[type=submit]{
			float: none; margin: auto;
		}



		main article{
			clear: both;
		}


		footer{
			background: rgb(230,230,230);
			font-size: 9pt;
			color: #222;
			padding: 2em 1em 4em;
			width:100%;
			display:block;
			float: left;
		}

		footer a,
		footer a:link{
			color: #222;
		}


		footer section{
			overflow: hidden;
		}


		footer section:before{
			content: " "; display: block; height: 5px; background: url(/assets/wrapper/nav/dot_separator_single.png) center center repeat-x;
			margin: 2em 0;
		}

		footer section.sitemap ul{
			float: left; clear: none; width: 20%;  padding: 0 0.5em; border-left: 1px solid #888; list-style: none;
			line-height: 1.45em;
		}


		footer section.sitemap ul li{
			margin-left:10px;
		}

		footer section.sitemap ul a,
		footer section.sitemap ul a:link{
			text-decoration: none;
		}

		footer section.sitemap ul a:hover,
		footer section.sitemap ul a:link:hover{
			text-decoration: underline;
		}

		footer section.sitemap ul:first-child{
			border-left: none; padding-left: 0;
		}

		footer section.sitemap ul li.legend{
			text-transform: uppercase;
			margin-left: 0px;
		}

		footer div.links{
			float: right; clear: auto;
		}

		footer div.copy{
			float: left; clear: auto;
		}

		footer div.social{
			display: none;
		}




/*--------------------GENERAL----------------*/



p, h1, h2, h3{
	margin:20px 0;
}






.two-thirds{
	width:66%;
	float:left;
	padding:0 2%;
}




.one-third{
	width:33%;
	float:left;
	padding-left:5%;
}




.first-column{
	padding-left:0;
}



.content-black{
	padding: 2%;
	background: rgba(0, 0, 0, .65);
	color:#fff;
	overflow: auto;
	width: 100%
}

.content-black a{
	color:#fff;
}


.content-green{
	padding: 2%;
	background: rgba(61, 179, 110, .65);
	color:#000;
	overflow: auto;
	width: 100%;
	position: relative;
}

#kids-zone.content-green{
	overflow:visible;
}

.content-green.col-3{
	overflow: auto;
	}

.content-green a{
	color:#fff;
}

.content-green .breadcrumbComponent, .content-green .breadcrumbComponent a{
	color:#000;
}



.breadcrumbComponent{
	color: #a7a9ac;
	font-size: 0.8em;
}

.breadcrumbComponent a{
	color: #a7a9ac;
	}


	.bg-gris{
		background: rgb(230,230,230);
	}


#content-sidebar{
	display:none;
}




.title-border-top{
	padding-top: 10px;
	margin-top:10px;
	border-top:dotted 1px #fff;
}



.image{
	float:right;
	margin-left: 20px;
}

.image:nth-of-type(2n){
	float:left;
	margin-left: 0px;
	margin-right: 20px
}

.image p{
	font-size:0.8em;
	font-style: italic;
}

.full-width{
	width: 100%;
	text-align: center;
	float: none;
	margin:0 auto;
}

.legal div{
			display: block;
			float:none;
			width:100%;
			text-align:center;
		}




#fancybox-title-float-main{
	font-size:12px;
}


/*------------------------ACCUEIL-----------------------*/


	#latestNews #kaboom-newsList{
			padding: 0; margin: 0; border: 0;
			margin-right: 0.5em;
			padding-bottom: 2em;
			margin-top:2em;
		}
		
		
	#latestNews #kaboom-newsList div{	
		border-bottom: 1px solid black;
		padding-bottom:20px;
	}
		

		#latestNews #kaboom-newsList img{
			max-width: 100%;
}

		#latestNews #kaboom-newsList dt{
			padding: 0;
			border: 0;
			font-size: 18pt;
			color: #111;
			text-decoration: none;
			width:46%;
			margin-right: 4%;
			display:inline-block;
		}

		#latestNews #kaboom-newsList dt a{
			color: #111;
			text-decoration: none;
		}

		#latestNews #kaboom-newsList dt a:hover{
			text-decoration: underline;
		}

		#latestNews #kaboom-newsList dd{
			padding: 0;
			margin: 0;
			border: 0;
			width:48%;
			display: inline-block;
		}

		#latestNews #kaboom-newsList dd h2 a{
			color:#000;
			font-size:1em;
			text-decoration: none;
		}



.facebook_feed{border: none; visibility: visible; width: 440px; height: 330px;}



#videos ul{
	padding: 0;
}

#videos li{
	display:inline;
	list-style: none;
}

#videos li iframe{
	float: left;
}



.photo-credit-accueil{
		color: white;
display: inline;
position: absolute;
z-index: 2;
left: -20px;
bottom: 10px;
margin:0px;
font-size: 10px;
/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);


text-shadow: 1px 1px 1px #000;



transform-origin: top left;
	}





/*------------------------PAGES LEVEL1---------------------*/



.wildlife-list div ul{
	padding:0;
margin: 20px 0;
float: left;
width:100%;
}


		/*.col-3 .wildlife-list div ul li{
			list-style:none;
			border-right:1px dotted #fff;
			width:33%;
			padding: 1%;
			display: inline-block;
			height: 250px;
			
		}*/
		
		/*.col-3 .wildlife-list div ul li:nth-child(4n){
			border-right:1px dotted #fff;
		}

		.col-3 .wildlife-list div ul li:nth-child(3n),
		.col-3 .wildlife-list div ul li:nth-child(12n){
			border:0px;

		}*/

		.wildlife-list div ul li{
			list-style:none;
			border-right:1px dotted #fff;
			width:25%;
			padding: 1%;
			float:left;
			line-height: 1em;
			/*height: 210px;*/
			height:auto;
		}
		
		.wildlife-list div ul li:nth-child(4n){
			border:0px;
		}
		.wildlife-list div ul li:nth-child(4n+5){
			clear:both;
		}


		.wildlife-list div ul li .link{
			color:#fff;
			text-decoration: none;
			display:block;
			border-bottom: 1px dotted #fff;
			padding-bottom: 10px;
			height: 50px;
		}


		.wildlife-list div ul li .video, .wildlife-list div ul li .description, .wildlife-list div ul li #category_animals, .wildlife-list div ul li #photo-credit{
			display:none;

		}

		.wildlife-list div ul li img{
			max-width:100%;
			margin-bottom: 10px;

		}



		.wildlife-list div ul li a{
			text-decoration: none;
			color:#fff;

		}


		.wildlife-list div ul li .container-image{
			width:100%;
			height:0;
			padding-bottom: 64%;
			display:block;
			overflow:hidden;
			margin-bottom:10px;
			position:relative;
		}

.wildlife-list div ul li .container-image img{
width: 100%;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin-bottom: 0px;
margin: auto;
}



/*-------------------THINGS YOU CAN DO------------------*/


#things-you-can-do  div ul li:nth-child(n+4){
	display:none;
}

#things-you-can-do .wildlife-list div ul li:nth-child(3n){
			border-right:none;
		}




/*--------------------MULTIMEDIA-----------------*/


#multimedia  div ul li{
	display:none;
}


#multimedia  div ul li:nth-child(1), #multimedia  div ul li:nth-child(2), #multimedia  div ul li:nth-child(3){
	display:inline-block;
}

audio{
	max-width:100%;
	border-bottom: 1px dotted #fff;
	padding-bottom: 10px;
	margin-top: 20px;
}




/*---------------------------CONTACT-----------------------*/




		.contact-left{
			width:66%;
			float: left;
			padding:2%;
			background: rgb(230,230,230);
		}

		.form{
			width:100%;
		}

		.form div{
			font-size: 1em;
			color:#000;
			margin-top:10px;
			width:100%;
			font-weight: 500;
		}

		.form div input, .form div textarea, .form select{
			display:block;
			width:	100%;
			border: 1px solid rgb(89, 89, 89);
			background: rgb(230,230,230);
			padding: 6px 0;
		}

		.contact-right{
			min-height:650px;
			width:34%;
			float:left;
			padding:2%;
			background: rgba(0, 0, 0, .65);
			color:#fff;
		}

		.contact-right a{
			color:#fff;
		}

		.contact-right div{
			margin-top: 20px;
			padding-top:20px;
			border-top: 1px dotted #fff;
		}

.form div input[type="submit"]{
	width: auto;
padding: 10px 20px;
background: rgb(76,76,76);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgb(76,76,76) 0%, rgb(0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(76,76,76)), color-stop(100%,rgb(0,0,0)));
background: -webkit-linear-gradient(top, rgb(76,76,76) 0%,rgb(0,0,0) 100%);
background: -o-linear-gradient(top, rgb(76,76,76) 0%,rgb(0,0,0) 100%);
background: -ms-linear-gradient(top, rgb(76,76,76) 0%,rgb(0,0,0) 100%);
background: linear-gradient(to bottom, rgb(76,76,76) 0%,rgb(0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#000000',GradientType=0 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;
color: #fff;
margin-top: 10px;
font-size: 1em;
}


.form div input[type="file"]{
	border:0px;
}




/*-------------------------NEWS------------*/

.content-news{
	float:left;
	padding:5%;
	width:100%;
}


#BannerNews{
	width:100%;
	overflow:hidden;
	/*height:400px;*/
	height:auto;
	font-size:0px;
	/*max-height: 615px;*/
	box-shadow: rgba(0, 0, 0, 0.75) 0 8px 26px -4px;
	position:relative;
}

#BannerNews img{
	width:100%;
	/*position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;*/
    position:relative;
    margin: auto;
	}

	.photo-credit{
		color: white;
display: inline;
position: absolute;
z-index: 2;
left: 10px;
bottom: 10px;
margin:0px;
font-size: 10px;
/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);


text-shadow: 1px 1px 1px #000;



transform-origin: top left;
	}



	#kaboom-newsList{
			padding: 0; margin: 0; border: 0;
			margin-right: 0.5em;
			padding-bottom: 2em;
			margin-top:2em;
		}
		
		
	#kaboom-newsList div{	
		border-bottom: 1px dotted #111;
		padding-bottom:20px;
		margin-bottom: 20px;
	}

	#kaboom-newsList div:nth-child(2n){	
		margin-right:0;
	}
		

		#kaboom-newsList img{
			max-width: 100%;
}

		#kaboom-newsList dt{
			padding: 0;
			border: 0;
			font-size: 18pt;
			color: #111;
			text-decoration: none;
			width:36%;
			margin-right: 4%;
			display:inline-block;
		}

		#kaboom-newsList dt a{
			color: #111;
			text-decoration: none;
		}

		#kaboom-newsList dt a:hover{
			text-decoration: underline;
		}

		#kaboom-newsList dd{
			padding: 0;
			margin: 0;
			border: 0;
			width:58%;
			display: inline-block;
			vertical-align: top;
		}

		#kaboom-newsList dd h2 a{
			color:#000;
			font-size:1em;
			text-decoration: none;
		}




/*--------------------FACT SHEETS--------------------*/

.wrapper h2{
	display:block;
	width:100%;
	border-bottom: dotted #fff 2px;
}

.imagepanels ul{
	padding:0;
}

.imagepanels li:first-child{
	width: 22.8%;
    padding: 22.8%;
	}

.imagepanels li{
	display:block;
	width: 11%;
    padding: 11%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    float: left;
    margin:1%;/*0.8%*/
}

.imagepanels li img{
	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 160%;
    max-height: 160%;
}




.print_link{
	font-size: 12px;
	line-height: 26px;
	vertical-align: middle;
	color:#fff;
	text-decoration: none;
	font-style: italic;
	display: inline-block;
	margin-top:-14px;
}

.print_link img{
	margin-right: 6px;
	vertical-align: middle;
}

.socialbuttons{
	padding-top: 10px;
border-top: dotted 1px white;
display: inline-block;
}

.videos_iframe{padding: 0;}

.videos_iframe li{
	display:none;
}

.videos_iframe li:first-child{
	display: block;
}

.videos_iframe li:first-child iframe{
	min-height: 200px;
	max-width: 100%;
}

.video_clips_big li:first-child iframe{
width:100%;
margin-bottom:20px;
height:40%;
min-height:340px;
}



.more, .related{
	padding: 0px;
}

.more li, .related li{
	list-style: none;
	line-height: 1.8em;
	}

	.more li a, .related li a{
		color: white;
text-decoration: underline;
vertical-align: middle;
font-weight: 100;
font-size:0.9em;
	}

	.more li a img{
		vertical-align: middle;
		margin-right: 6px;
		text-decoration: none;
	}

	.more-plus{
		vertical-align: middle;
		margin-right: 6px;
	}



.bottommenu{
	display: inline-block;
text-align: center;
width: 100%;
vertical-align: middle;
margin: 40px auto;
position: relative;
overflow: hidden; 
color: #939598;
font-weight: bold;
text-decoration: none;
}

.bottommenu span {
  display: inline-block;
  position: relative; 
  
}
.bottommenu span:before,
.bottommenu span:after {
  content: "";
  position: absolute;
  height: 10px;
  border-bottom: 2px dotted #939598;
  top: 0;
  width: 600px;
}
.bottommenu span:before {
  right: 100%;
  margin-right: 20px;
}
.bottommenu span:after {
  left: 100%;
  margin-left: 20px;
}


.bottommenu img{
vertical-align: middle;
margin-right: 6px;
}



.liens-internes{
	padding-bottom: 10px;
	border-bottom: dotted 2px #000;
	margin-bottom: 20px;
}

.liens-internes a{
	color:#000;
	text-decoration: none;
}






/*-----------------------GLOSSARY-----------------------*/


.glossary_list{
	width: 25%;
	float: left;
}


/*--------------------Sitemap--------------------*/
.linksetLinkInternal{
	text-transform:uppercase;
	padding:2px 0;
}
.navigationSubMenu .linksetLinkInternal{
	text-transform:initial;
}
.navigationSubMenu{
	padding-left:20px;
}


/*-------------------------HINTERLAND'S HANGOUT-----------------*/



.hangout-title{
	float: left;
	margin-right: 60px;
	position: relative;
	display: inline-block;
	background-color: #CD0029;
	 border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    padding: 10px;
    height: 320px;
    width:320px;
    text-align: center;

    -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
    display: table;
    vertical-align: middle;
		margin-bottom: 75px;
}

.hangout-title span{
	display: table-cell;
	vertical-align: middle;
	font-family: 'trashhandregular';
	text-shadow: 2px 2px #999;
    color:#fff;
    font-size:65px;
    line-height: 55px;
    border:3px dotted rgb(255, 233, 0);
    border-radius: 50%;
}

.hangout-title #hangout-goose{
	position: absolute;
	bottom:-130px;
	right:-80px;
	-ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}


.hangout-bt{
	margin-right: 40px;
	position: relative;
	background-color: #CD0029;
	 border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    padding: 5px;
    height: 230px;
    width:230px;
    text-align: center;

   
    display: table-cell;
    vertical-align: middle;
}

.hangout-bt span{
	display: block;
	vertical-align: bottom;
	
    text-shadow: 1px 1px #999;
    font-size:40px;
    line-height: 40px;
    border:2px dotted #fff;
    border-radius: 50%;
    /*width: 220px;
		height: 220px;*/
		width: 100%;
		height: 100%;
     
}

.hangout-bt span a{
	font-family: 'trashhandregular';
    color:#fff;
    text-decoration: none;
    display:block;
    padding-top: 140px;
    -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);

}

.hangout-bt span a:hover{
    -ms-transform: rotate(-2deg); /* IE 9 */
    -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
    transform: rotate(-2deg);

}

#hangout-bt-share-your-experience span a{
	padding-top: 100px;
	}

#hangout-bt-videos{
	background-color: #2780DF;
	background-image: url(http://www.hww.ca/images/hinterland-hangout-videos.png);
	background-position: center 40%;
	background-repeat: no-repeat;
	background-size:42%;
}


#hangout-bt-games{
	background-color: #9727BE;
	background-image: url(http://www.hww.ca/images/hinterland-hangout-games.png);
	background-position: center 40%;
	background-repeat: no-repeat;
	background-size:45%;
}


#hangout-bt-share-your-experience{
	background-color: #E97D00;
	background-image: url(http://www.hww.ca/images/hinterland-hangout-share.png);
	background-position: center 40%;
	background-repeat: no-repeat;
	background-size:40%;
}



.hangout-bts{
	display:table;
	margin:0 auto;
	border-spacing: 10px;
    border-collapse: separate;
	clear:both;
}




.hangout-content{
	position:relative;
	float: left;
	text-align: center;
	font-weight: bold;
	font-size:20px;
	line-height: 1.4em;
	width: 50%;
}



#hangout-wolf{
	position: absolute;
	left:-220px;
	bottom:-60px;
}

#hangout-bat{
margin-top: -80px;
margin-bottom: -70px;
}



#hangout-beaver{
	position: absolute;
	bottom: -240px;
right: -320px;
}

 
.black-text div ul li .link{
	color:#000;
	border-bottom-color: #000;
}

.black-text div ul li{

	border-right-color: #000;
}



/*------------------------RESPONSIVE-----------------------*/


@media(max-width: 960px){
			
			section#kids, section#latestNews{
				float: none; clear: both;
				width: auto; padding: 0; margin-left: 0; margin-right: 0;
			}
			section#kids{
				text-align: center;
			}
			section#kids .big.circle{
				margin: 1em auto 2em;
			}
			section#kids .big.circle + *{
				clear: both;
			}
			section#kids .circle{
				float: none; display: inline-block;
			}



			#bg{
			display: none;
		}

		.facebook_feed{width:100%;}


		

}


@media(max-width: 900px){

header #mainMenu{
	float: none;
	padding:0;
	display:table;
	margin-right: auto;
	margin-left: auto;
}

header #mainMenu li{
	display:table-cell;
	float: none;
}

#logo{
	margin: 20px auto;
width: 100%;
text-align: center;
}


.header-form{
	margin: 20px auto;
width: 100%;
max-width: 470px;
float: none;
display: block;
}


	#hangout-wolf,
	#hangout-beaver,
	#hangout-bat{
		display:none;
	}


}


@media(max-width: 810px){



.two-thirds, .one-thirds{
	width:100%;
}

.sidbar.one-third{
	width:100%;
	padding: 2%;
}

#videos iframe{
	width: 50%;
}

#videos li:nth-of-type(3){display:none;}

/* wildlife-list affiche 3 par row*/

.wildlife-list div ul li{
	width:33.3%;
	height: auto;
}

.wildlife-list div ul li:nth-child(4n){
	border-right:1px dotted #fff;
}

.wildlife-list div ul li:nth-child(3n){
	border:0px none;
}

.wildlife-list div ul li:nth-child(3n+1){
		clear:left;
		border-right:1px dotted #fff;
	}
	
	/* Hangout */
	
	.menu-kids-zone > li:nth-child(4):after{
		margin:0 3px;
	}
	
	.hangout-title{
		height:300px;
		margin-bottom:70px;
		width:300px;	
	}

}


@media(max-width: 768px){
	#mainBanner section{
		width:100%;
	}
	
	.contact-left,
	.contact-right{
			width:100%;
	}
	.contact-right{
		min-height:initial;
	}
	
	/* Hangout */
	
	
	.hangout-title{
		float:none;
		margin:auto;
	}
	
	.hangout-content{
		width:100%;
		margin-top: 75px;
	}
	
	hangout-bts{
		margin-top:0;	
	}
	
	.hangout-bt{
		height:180px;
		width:180px;	
	}
	.hangout-bt span{
		font-size: 28px;
		line-height: 28px;
	}
	.hangout-bt span a{
		padding-top:106px;
		}
		
		
	
.glossary_list{
	width:33.3%
}
	
	#categoryMenu > li{
		min-width:95px;
	}
	
	#categoryMenu > li > a,
	#categoryMenu > li > a:link{
		font-size:14px;
	}
	
	#categoryMenu > li > a > img{
		width:75px;
	}
	
}

@media(max-width: 670px){

.sitemap{display:none;}

#kaboom-newsList dt,
#latestNews #kaboom-newsList dt{
	display:block;
	width:100%;
}

#kaboom-newsList dt img,
#latestNews #kaboom-newsList dt img{
	display:block;
	margin:auto;
}


#kaboom-newsList dd,
#latestNews #kaboom-newsList dd{
	display:block;
	width:100%;
}


/* wildlife-list affiche 2 par row*/

.wildlife-list div ul li,
.col-3 .wildlife-list div ul li{
	width:50%;
	max-height:37%;
}


.wildlife-list div ul li:nth-child(2n+1),
.col-3 .wildlife-list div ul li:nth-child(2n+1){
		clear:left;
		border-right:1px dotted #fff;
	}
	
.wildlife-list div ul li:nth-child(3n+1){
		clear:none;
	}

.wildlife-list div ul li:nth-child(2n),
.col-3 .wildlife-list div ul li:nth-child(4n){
	border:0px none;
}

}

@media(max-width: 643px){
	#categoryMenu li:nth-child(2n) br{
		display:none;
	}
}


@media(max-width: 600px){

	#videos iframe{
	width: 100%;
    }

    #videos li:nth-of-type(2){display:none;}


    #mainMenu li:nth-child(n+7){
	    display:none;
    }

	.hangout-bts{
		text-align:center;
	}
	.hangout-bt{
		display:block;
		margin-right:0;
	}

	/* Mobile menu */
	
	#categoryMenu{
		padding: 20px 0;
	}	
	
	#categoryMenu:before,
	#categoryMenu:after,
	.menu-kids-zone > li:nth-child(4):after{
		content:none;
	}
	
	#categoryMenu.menu-kids-zone > li:nth-child(4) > a{
		color:#326432;
	}
	
	#categoryMenu > li:before{
			border:none;
	}
	
	#categoryMenu > li{
		float:none;
		width:100%;
	}
	
	#categoryMenu > li:last-child > a,
	#categoryMenu > li:last-child > a:link{
		border-bottom: 1px dotted rgba(0, 0, 0, 0.64);
	}	
	
	#categoryMenu > li > a img{
		border:none;
		float:left;
		margin:0;
		position: absolute;
		top:0;
		width:46px;
	}
	
	#categoryMenu > li:hover{
			background:none;
	}
	
	#categoryMenu > li:hover:after{
		height:0;
	}
	
		#categoryMenu > li:hover .submenu{
			display: none;
		}
		
		#categoryMenu > li > a,
		#categoryMenu > li > a:link{
			border-top: 1px dotted rgba(0, 0, 0, 0.64);
			margin: 0px 1em;
			padding: 1em 0;
			
		}
		
		#categoryMenu > li br{
			display:none;
		}
		
		#categoryMenu > li:after{
			height:0!important;
		}
		#categoryMenu.menu-kids-zone > li:nth-child(4):hover{
			background:none;
		}
		
		#categoryMenu>li#kids-zone-icon img:nth-child(1n){
			display:none;
		}
		#categoryMenu li#kids-zone-icon img:nth-child(2n){
			display:block;
		}
         #newbar {
            display:none;
        }
}


@media(max-width: 520px){

	
	.header-form{
		text-align:center;
	}
	
	.bt-langue{
		float:none;
		margin-left:0;
	}
	
	
	#mainBanner section{
		width:100%;
	}
	
	/* hangout */
		.hangout-bt{
			display:block;
			margin:10px 0;
		}	
		
	.glossary_list{
		width:50%;
	}
	

}

@media(max-width: 400px){
	
	header #mainMenu{
		width:100%;
	}
	
	header #mainMenu li{
		width: 33.3%;
		float:left;
	}
	
	header form#search{
		float:none;
	}
	header form#search input#query{
		width:100%;
	}
	
	/* wildlife-list affiche 1 par row*/
	
	.wildlife-list div ul li,
	.col-3 .wildlife-list div ul li{
		border-right:0px none !important;
		clear:both;
		width:100%;
		
	}


.glossary_list{
		width:100%;
	}

}

#newbar{
    width:100%;
    background-color:#8f8f8f;
    height:41px;
}