

.main-nav-close {
    bottom: 0.5em;
    color: #666;
    font-size: 1.25em;
    position: absolute;
    right: 1.65em;
    text-decoration: none;
}


#navigation > ul,
#navigation > ul > li > ul
{
	margin: 0;
	padding: 0;
}

#navigation > ul > li {
	list-style: none;
	padding-bottom: 0.2em;
	cursor: pointer;
	font-weight: 500;
	font-size: 1em;

	display: block;
}

#navigation-control-bar {
	/*
	font-family: open-sans,sans-serif;
	font-weight: 600;
	width: 100%;
	background-color: #004681;
	border: none;
	margin: 0;
	box-sizing: border-box;
	*/
	font-size: 0.6em;
	font-family: open-sans,sans-serif;
	height: 5em;
	letter-spacing: 0.15em;;
	text-transform: uppercase;
}

#navigation-trigger::before {
	background-color: #000;
	bottom: 4em;
	box-shadow: 0 0.4em transparent,
				0 0.8em #000,
				0 1.2em transparent,
				0 1.6em #000;
	box-sizing: border-box;
	content: "";
	height: 0.4em;
	position: absolute;
	transition: box-shadow 500ms ease 0s, background-color 500ms ease 0s;
	width: 3.4em;
}

#navigation-trigger {
	display: block;
	border: 0 none;
	color: #fff;
	/*font-size: 0.6em;*/
	height: 5em;
	line-height: 7.5em;
	margin: 0;
	position: absolute;
	right: 2em;
}


#sitesearch-trigger {
	background-image: url("/images/template/icons/search.png");
	background-position: center center;
	background-repeat: no-repeat;
	display: inline-block;
	font-size: 1em;
	height: 2em;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	position: relative;
	text-align: left;
	text-indent: -9999px;
	width: 2em;
	cursor: pointer;
}

#sitesearch-trigger {
	display: none;
}

#secondary-navigation-control-bar {
	background-color: #ebebeb;
	text-align: right;
	cursor: pointer;
	margin: 0;
	padding: 0 10% 0.5em;
	position: relative;
	display: none;
}

#secondary-navigation-trigger {
	background: rgba(0, 0, 0, 0) url("/images/template/accordionb.png") no-repeat scroll center top;
	color: #da0000;
	content: "";
	display: inline-block;
	height: 8px;
	width: 15px;
	overflow: hidden;
	text-indent: -9999px;
	text-align: center;
	position: relative;
}


@media screen and (max-width: 1590px){
	.js #navigation .submenu > ul.content {
		max-width: none;
		width: auto;
		/* REMOVED WHEN SWITCHING TO SUBMENU-HEADER-INLINE *?
		/*padding: 0;
		margin-left: 300px;*/
	}
	.js #navigation .submenu-header {
		max-width: 290px;
	}
}


@media screen and (min-width: 800px){

	#myontarioFilter-form {
		padding: 0.5em;
		text-align: center;
		line-height: 2em;
	}

	#myontarioFilter-form fieldset {
		margin: 0;
		padding-top: 0;
		-webkit-box-shadow: none;
		-moz-box-shadow:    none;
		box-shadow:         none;
	}
	#myontarioFilter-form fieldset,
	#myontarioFilter-form div,
	#myontarioFilter-form dl,
	#myontarioFilter-form dt,
	#myontarioFilter-form dd,
	#myontarioFilter-form #fields-mos_type {
		display: inline-block;
		margin: 0;
		padding: 0;
	}
	#myontarioFilter-form dt,
	#myontarioFilter-form dd,
	#myontarioFilter-form #fields-mos_type {
		white-space: nowrap;
	}
	#myontarioFilter-form dt { display: none; }
	#myontarioFilter-form dd {
		margin-right: 1em;
	}
	#myontarioFilter-form dt#fields-mos_search-field-dt {
		display: inline;
	}

	input#fields-mos_search {
		width: 12em;
	}
	#myontarioFilter-form input[type="submit"] {
		padding: 0.2em 0.5em 0em;
		margin: 0;
		position: relative;
		top: -1px;
		display: inline-block;
	}
	#myontario_form_trigger {
		display: none;
	}
	#myontarioFilter-form {
		max-height: none;
	}
}


@media screen and (min-width: 600px){

	#navigation-control-bar {
		height: 0;
		margin-left: -9999px;
		position: absolute;
	}

	/* spacing */

	.js #navigation .submenu-header {
		font-size: 200%;
		left: 0.75em;
		top: 0.5em;
	}

	.js #navigation > ul {
		overflow: hidden;
		word-wrap: none;
		white-space: nowrap;
		clear: both;
	}

	.js #navigation > ul > li {
		display: inline-block;
		/*width: 14.28571428571429%;*/
		padding: 0;
		margin: 0;
		text-align: center;
	}


	.js #navigation > ul > li > a, .js #navigation > ul > li > a:hover, .js #navigation > ul > li > a:focus {
		color: #fff;
		text-decoration: none;
		width: 100%;
		height: 100%;
		display: block;
		text-transform: uppercase;
		line-height: 1.5em;
	}

	.js #navigation ul li .submenu {
		position: absolute;
		left: 0;
		text-align: left;
		white-space: initial;
		background-color: #fff;
		opacity: 0.93;
		margin: 0;
		width: 100%;

		/* animation */
		padding-top:    0;
		padding-bottom: 0;
		max-height: 0;
		overflow: hidden;
		-webkit-transition: all 0.3s ease;
		-moz-transition:    all 0.3s ease;
		-o-transition:      all 0.3s ease;
		transition:         all 0.3s ease;
	}
	.js #navigation ul li.open .submenu {
		padding-top: 1.5em;
		padding-bottom: 1.5em;

		/* animation */
		max-height: 10em;
		min-height: 5em;
		box-shadow:         0 1px 8px 0 #777;
		-o-box-shadow:      0 1px 8px 0 #777;
		-ms-box-shadow:     0 1px 8px 0 #777;
		-moz-box-shadow:    0 1px 8px 0 #777;
		-webkit-box-shadow: 0 1px 8px 0 #777;
	}

	.js #navigation ul li .submenu ul {
		-webkit-columns: 3 13em;
		-moz-columns:    3 13em;
		columns:         3 13em;
		margin-top: 0.6em;
	}

	.js #navigation ul li .submenu li {
		list-style: none;
		line-height: 1.25em;
		padding: 0 0 0.5em;
		font-weight: 500;
		white-space: normal;
	}
	.js #navigation ul li .submenu li.submenu-header {
		margin: 0;
		padding: 0;
		position: absolute;
	}
	.js #navigation ul li .submenu li.submenu-header-inline {
		font-weight: bold;
		line-height: 65%;
		font-size: 150%;
	}
	.js #navigation ul li .submenu li.submenu-header-inline a:after {
		content: ": ";
	}
	.fr.js #navigation ul li .submenu li.submenu-header-inline a:after {
		content: " : ";
	}



	.js #navigation > ul > li > a, .js #navigation > ul > li > a:hover, .js #navigation > ul > li > a:focus {
		line-height: 2.5em;
	}
	.js #navigation ul li .submenu li a, .js #navigation ul li .submenu li a:hover, .js #navigation ul li .submenu li a:focus {
		color: #000;
		text-decoration: none;
		text-transform: none;
	}
	.js #navigation a:hover, .js #navigation a:focus { text-decoration: underline!important; }

	.js #navigation > ul > li:first-child                                    { background: #004681; }
	.js #navigation > ul > li:first-child + li                               { background: #3E8275; }
	.js #navigation > ul > li:first-child + li + li                          { background: #8D441B; }
	.js #navigation > ul > li:first-child + li + li + li                     { background: #DC8913; }
	.js #navigation > ul > li:first-child + li + li + li + li                { background: #004681; }
	.js #navigation > ul > li:first-child + li + li + li + li + li           { background: #3E8275; }
	.js #navigation > ul > li:first-child + li + li + li + li + li + li      { background: #8D441B; }
	.js #navigation > ul > li:first-child + li + li + li + li + li + li + li { background: #DC8913; }

	.js #navigation > ul > li:first-child                                    ul li.submenu-header a { color: #004681; }
	.js #navigation > ul > li:first-child + li                               ul li.submenu-header a { color: #3E8275; }
	.js #navigation > ul > li:first-child + li + li                          ul li.submenu-header a { color: #8D441B; }
	.js #navigation > ul > li:first-child + li + li + li                     ul li.submenu-header a { color: #DC8913; }
	.js #navigation > ul > li:first-child + li + li + li + li                ul li.submenu-header a { color: #004681; }
	.js #navigation > ul > li:first-child + li + li + li + li + li           ul li.submenu-header a { color: #3E8275; }
	.js #navigation > ul > li:first-child + li + li + li + li + li + li      ul li.submenu-header a { color: #8D441B; }
	.js #navigation > ul > li:first-child + li + li + li + li + li + li + li ul li.submenu-header a { color: #DC8913; }

	.js #navigation > ul > li:first-child                                    ul li.submenu-header-inline a { color: #004681; }
	.js #navigation > ul > li:first-child + li                               ul li.submenu-header-inline a { color: #3E8275; }
	.js #navigation > ul > li:first-child + li + li                          ul li.submenu-header-inline a { color: #8D441B; }
	.js #navigation > ul > li:first-child + li + li + li                     ul li.submenu-header-inline a { color: #DC8913; }
	.js #navigation > ul > li:first-child + li + li + li + li                ul li.submenu-header-inline a { color: #004681; }
	.js #navigation > ul > li:first-child + li + li + li + li + li           ul li.submenu-header-inline a { color: #3E8275; }
	.js #navigation > ul > li:first-child + li + li + li + li + li + li      ul li.submenu-header-inline a { color: #8D441B; }
	.js #navigation > ul > li:first-child + li + li + li + li + li + li + li ul li.submenu-header-inline a { color: #DC8913; }

	.bythenumbers ul > li:first-child                                    { background: #004681; }
	.bythenumbers ul > li:first-child + li                               { background: #3E8275; }
	.bythenumbers ul > li:first-child + li + li                          { background: #8D441B; }
	.bythenumbers ul > li:first-child + li + li + li                     { background: #DC8913; }
	.bythenumbers ul > li:first-child + li + li + li + li                { background: #004681; }
	.bythenumbers ul > li:first-child + li + li + li + li + li           { background: #3E8275; }
	.bythenumbers ul > li:first-child + li + li + li + li + li + li      { background: #8D441B; }
	.bythenumbers ul > li:first-child + li + li + li + li + li + li + li { background: #DC8913; }



	/**** New Menu Option ****/

	.js #navigation ul li .submenu ul {
		display: flex;
		flex-wrap: wrap;
	}

	.js #navigation ul li .submenu ul li {
		margin-right: 2em;
	}
}

@media screen and (max-width: 1250px){

	#navigation-wrapper {
		font-size: 0.9em;
	}
	.fr #navigation-wrapper {
		font-size: 0.8em;
	}
	#navigation > ul > li {
		letter-spacing: 0;
	}
	/* REMOVED WHEN SWITCHING TO SUBMENU-HEADER-INLINE *?
	/*.js #navigation .submenu > ul.content {
		margin-left: 200px;
	}
	.js #navigation .submenu-header {
		max-width: 190px;
	}*/

	#content > #home-ewg-slider {
		margin: 1em 0;
	}
	#home-ewg-slider .home-ewg-content {
		width: 50%;
		left: 5%;
	}

}

@media screen and (max-width: 800px){

	.background-grid .grid.inner-left > *,
	.background-grid .grid.inner-right > * {
		text-align: left;
		padding: 0;
	}

	h1 {
		padding-bottom: 0;
	}

	dt label {
		white-space: normal;
	}

	.hspacer {
		margin: 0;
		padding: 0;
		height: 0;
	}
/*
	.wide {
		margin-left: -5%;
		padding-left: 5%;
		padding-right: 5%;
		width: 100%;
	}
*/

	.grid {
		padding-right: 0;
		margin-bottom: 25px;
	}

	.slider > li .slider-simple-content {
		margin-bottom: 2em;
		padding-bottom: 2em;
	}

	.slider > li .slider-simple-content h3 {
		font-size: 2em;
	}

	.grid, .column, .grid.first, .grid.last, .column.first, .column.last {
		width: 100%!important;
		float: none!important;
	}

	.grid {
		margin-bottom: 0;
		paing: 0;
	}

	.grid.right, .column.right, .grid.content-right, .column.content-right {
		text-align: left!important;
	}

	.image-center figure {
		max-width: 100%;
	}

	form#sitesearch input[type="textbox"] {
		width: 8em;
	}

	#secondary-navigation-control-bar {
		display: block;
	}

	#secondary_navigation {
		max-height: 0;
		overflow: hidden;
		-webkit-transition: all 0.3s ease;
		-moz-transition:    all 0.3s ease;
		-o-transition:      all 0.3s ease;
		transition:         all 0.3s ease;
	}

	#secondary_navigation.open {
		max-height: 30em;
		padding: 0.2em 0;
	}

	#secondary_navigation li {
		float: none;
		display: block;
	}
	#secondary_navigation li.active {
		border-top-width: 0;
		border-left: 0.2em solid;
	}
	#secondary_navigation li a {
		padding: 0.2em 1em;
	}
	#secondary_navigation li.active a {
		padding: 0.2em 0.8em;
	}

	#secondary_navigation ul li#sectionhome a {
		background-size: 0.8em;
		padding-left: 1em;


		/*
		-webkit-transform: rotate(270deg);
		-sand-transform:   rotate(270deg);
		-moz-transform:    rotate(270deg);
		-ms-transform:     rotate(270deg);
		-o-transform:      rotate(270deg);
		transform:         rotate(270deg);*/
	}

	#banner_controls {
		z-index: 100;
	}

	#banner_controls .bx-custom-controls {
		margin-top: 0;
	}

	#event-date-controller.event_date_select, #event-date-controller.event_date_select:focus, #event-date-controller.event_date_select:hover {
		margin: 0 -15%;
		padding: 0;
		width: 130%;

		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	.upcoming_events {
		position: relative;
		padding-top: 15em;
	}

	#event-date-controller {
		position: absolute;
		top: 0;
		height: 15em;
	}

	#date-events-title {
		margin: 0;
	}

	.event_date_select h4 {
		height: 4em;
		background-color: #fff;
		background-image: url("/images/template/bgtriangle.png");
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100% 4em;
		padding: 0.5em 0 0;
		margin: 0;
		width: 100%;
		overflow-x: hidden;
	}

	.ielt9 .event_date_select h4 {
		background-color: red;
		background-image: none!important;
	}

	.event_date_select h4::after {
		display: none;
	}

	#event-date-visual {
		margin-top: 0.5em;
	}

	ul.slider > li .slider-simple-content > .slider-title { font-size: 2em; }


	#home-ewg-slider > .content {
		height: auto;
		position: relative;
	}

	#home-ewg-slider .bx-wrapper {
		display: none;
	}

	#home-ewg-slider .home-ewg-content {
		width: 90%;
		left: 5%;
		height: auto;
		position: initial;
	}

	#home-ewg-slider ul.slider { display: none; }

	#footer .featherlight-content .fb-oht img,
	#footer .featherlight-content .fb-ewg img {
		padding: 0 0 0 0;
	}


}

@media screen and (max-width: 600px){


.main-nav-close { display: none!important; }

	/* general padding */
	.content {                 padding-left: 5%; padding-right: 5%; }
	#navigation-wrapper.open { padding-left: 5%; padding-right: 5%; }
	ul.slider > li .slider-simple-content {  width: 90%; }
	.background-grid .grid.inner-left > * {  width: 90%; }
	.background-grid .grid.inner-right > * { width: 90%; }


	/* header padding */
	#header {                 padding:        0 0 0; height: 4em; }
	#header-logo {            margin-bottom:  0; }

	#header-logo {            margin-left:  1.5em; }
	ul#header-social.social { margin:     0 1.5em; }
	#language_select {        height:       1.5em;}

	#page-homepage ul#banner.slider > li .slider-simple-content {
		bottom: 2em;
	}
	#navigation-control-bar {
		padding: 0;
		margin: 1.5em 0 0;
	}

	#oht-logo img {
		height: 3em;
	}

	#language_select {
		float: left;
		margin: 0.8em 0 0;
		padding: 0;
	}

	.bx-pager {
		display: none!important;
	}

	#banner_controls {
		position: absolute;
		right: 45%;
	}

	.slider > li .slider-simple-content {
		margin-bottom: 0em;
		padding-bottom: 1em;
		font-size: 0.8em;
	}

	.slotted:before {
		display: none;
	}

	.slotted:after {
		width: 100%;
		top: 0;
		left: 0;
		height: 10em;
		-webkit-box-shadow: 7px 0 0 0 #fff, -7px 0 0 #fff, 0 0 5px 0 #000;
		-moz-box-shadow:    7px 0 0 0 #fff, -7px 0 0 #fff, 0 0 5px 0 #000;
		box-shadow:         7px 0 0 0 #fff, -7px 0 0 #fff, 0 0 5px 0 #000;;
	}

	.slotted {
		padding: 0;
		margin: 30px auto;
		width: 17.5em;
		max-width: 100%;
	}

	.slotted ul {
		padding: 0;
		margin: 0;
	}

	.slotted .bx-wrapper .bx-controls-direction a.bx-prev {
		top: -15px;
		background-position: 0 -96px;

		-webkit-transform: rotate(90deg);
		-sand-transform:   rotate(90deg);
		-moz-transform:    rotate(90deg);
		-ms-transform:     rotate(90deg);
		-o-transform:      rotate(90deg);
		transform:         rotate(90deg);
	}

	.slotted .bx-wrapper .bx-controls-direction a.bx-next {
		top: auto;
		bottom: -25px;
		background-position: -32px -96px;
	}

	.slotted .bx-wrapper .bx-controls-direction a.bx-prev,
	.slotted .bx-wrapper .bx-controls-direction a.bx-next {
		left: 41%;
		-webkit-transform: rotate(90deg);
		-sand-transform:   rotate(90deg);
		-moz-transform:    rotate(90deg);
		-ms-transform:     rotate(90deg);
		-o-transform:      rotate(90deg);
		transform:         rotate(90deg);
	}

	#page-homepage .slider > li .slider-simple-content {
		margin-bottom: 3em;
		padding-bottom: 1em;
		font-size: 0.8em;
	}

	.grid-watermark-image {
		position: relative;
		right: 0;
		bottom: 0;
		margin: 2em 1em 0;
	}

	#navigation-wrapper {
		clear: both;
		background-color: #fff;
		opacity: 0.93;
		box-shadow:         0 5px 4px 0 rgba(112,112,112,0.5);
		-o-box-shadow:      0 5px 4px 0 rgba(112,112,112,0.5);
		-ms-box-shadow:     0 5px 4px 0 rgba(112,112,112,0.5);
		-moz-box-shadow:    0 5px 4px 0 rgba(112,112,112,0.5);
		-webkit-box-shadow: 0 5px 4px 0 rgba(112,112,112,0.5);
	}

	#navigation-wrapper.open {
		padding-top: 1em;
		padding-bottom: 1em;
	}

	#navigation-wrapper,
	#navigation > ul > li > ul {
		max-height: 0;
		overflow: hidden;
		-webkit-transition: all 0.3s ease;
		-moz-transition:    all 0.3s ease;
		-o-transition:      all 0.3s ease;
		transition:         all 0.3s ease;
	}

	#navigation > ul > li {
		width: auto!important;
	}

	.js #navigation .submenu > ul.content {
		padding: 0;
		margin: 0 1em;
	}

	#navigation-wrapper.open {
		max-height: 30em;
	}

	#navigation > ul > li.open > ul {
		max-height: 20em;
	}

	#navigation li {
		list-style: none;
		padding-left: 1em;
		margin: 0;
		padding: 0;
	}

	#navigation > ul > li {
		text-transform: uppercase;
	}

	#navigation > ul > li li {
		text-transform: none;
	}

	#navigation li a {
		text-decoration: none;
		color: #000;
		display: block;
		width: 100%;
		padding: 0.1em 0;
	}

	#navigation li a:hover, #navigation li a:focus {
		text-decoration: underline;
	}

	.js #navigation .submenu > ul {
		margin-left: 1em;
	}


	.js #navigation ul li .submenu {
		/* animation */
		padding-top:    0;
		padding-bottom: 0;
		max-height: 0;
		overflow: hidden;
		-webkit-transition: all 0.6s ease;
		-moz-transition:    all 0.6s ease;
		-o-transition:      all 0.6s ease;
		transition:         all 0.6s ease;
	}
	.js #navigation ul li.open .submenu {
		/* animation */
		max-height: 15em;
		min-height: 3em;
	}

	#sitesearch {
		clear: both;
		float: none;
		margin: 0;
		padding: 0.8em 0;
		width: auto;
	}

	ul#header-social.social {
		padding-left: 3px;
	}

	#header-logo {
		width: 43%!important;
		float: left;
		padding: 0 0 0 0.25em;
	}

	ul#header-social.social {
		padding: 0;
		margin: 0;
	}

	form#sitesearch input[type="textbox"] {
		width: 100%;
		padding-right: 10px;
	}

	#header > .grid.first img {
	}

	#oht-logo {
		margin: 0.5em 3px 0.5em 0;
	}

	#oht-logo img {
		max-width: 100%;
	}
	.event-list-item, .event-list-item.has-image {
		padding: 1em;
	}

	.event-list-item.has-image {
		padding-bottom: 21em;
	}

	.event-list-item figure.event-list-image {
		bottom: 0;
		height: 20em;
		left: 0;
		max-width: none;
		position: absolute;
		top: auto;
		width: 100%;
	}

	.event-list-item .calendar-id {
		width: auto;
		text-align: center;
	}

	#article-header .bx-next,
	#article-header .bx-prev {
		display: none;
	}

	.js #donate, .fr.js #donate {
		right: auto;
		top: auto;
		bottom: -5em;
		width: 100%;
		font-weight: 300;
		padding: 1.5em 3em 1.3em 5%;
		box-sizing: border-box;
	}

	 .fr.js #donate {
	 	 bottom: -6.25em;
	 }

	.js #donate h2, .fr.js #donate h2 {
		position: absolute;
		top: 0.25em;
		left: 0;
		margin: 0;
		padding: 0;
		width: 100%;
		height: auto;
		font-weight: 300;
		line-height: 1em;
		font-size: 1.1em;
		-webkit-transform: none;
		-sand-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	}

	.js #donate-close {
		display: none;
	}

	.js #donate.open {
		cursor: initial;
		max-width: none;
		bottom: 0;
		right: auto;
	}

	.js #donate.open #donate-close {
		display: block;
	}

	/* MyOntario Hack */
	.background-grid .grid.inner-left .hp-inner-content-wrapper br {
		display: none;
	}

	/* IE Rules */
	body.ielt9 #donate h2 { display: none; }
	body.ielt8 #navigation-trigger { font-size: 2em; color: #000; right: 1em; line-height: 2em; }
	body.ielt8 #final-menu UL LI { border: none; float: none; }
	body.ielt8.js #navigation > UL { background-color: #fff; }
	body.ielt8.js #navigation > UL > LI { float: none; }
	body.ielt8.js #navigation UL LI .submenu LI { float: none; width: auto; }
	body.ielt8.js #navigation > UL > LI { width: 100%!important; }


	/* POW */

	#pow-results table {
		font-size: 0.8em;
	}
}