/**
 * Project:		Yukon Energy 2016
 * Style Sheet:	Yec Layout
 * Sites:		1 - Yukon Energy, 2 - Resource Plan
/* ---------------------------------------- */


	/* For aabreakpoint.js MediaQueryListener support */
	body:after {
		content: 'base';
		display: none;
		visibility: hidden;
		height: 0;
	}
		body.show-breakpoint:before,
		body.show-breakpoint:after {
			display: block;
			visibility: visible;
			position: absolute;
			top: 0;
			left: 50%;
			height: 1em;
			z-index: 301;
			font-size: 8px;
			line-height: 1em;
			text-transform: uppercase;
			color: rgb(128, 128, 128);
			border: 1px solid rgb(128, 128, 128);
			border-top: 0;
			padding: 0.3em 0.4em 0.15em;
		}
		body.show-breakpoint:before {
			content: 'bk.pt';
			background: rgb(205, 204, 204);
			color: rgb(255, 255, 255);
			margin-left: -3.4em;
		}



	/*
	 * BASIC TEXT STYLES
	 *
	 * Revert base h2 centerring (carry-over from resource plan). This should
	 * later be swapped, so default is left justified, and the Resource Plan
	 * website overrites the base style for it's right justification. This would
	 * best be done later during Resource Plan integration.
	 */
		h2 { text-align: left; }
	
		
		 
		 .one-column .body{
		 	text-align: left;
		 }		 
		.body ul, .body ol {
			line-height: 1.25em;
			margin: 0 0 1em 1.5em;
		}
			.body ul li ul, .body ol li ol {	
				margin: 0 0 0 1.5em;
			}
			.body ul { list-style: disc; }
			.body ol { list-style: decimal; }
		
		
		
		table{
			width: 100%;
			margin: 1em 0;
		}
			table td,
			table th{
				padding: .5em 1em;
				border-left: 1px solid rgb(230, 230, 230);	
				border-right: 1px solid rgb(230, 230, 230);
				border-top: 1px solid rgb(120, 190, 32);	
				border-bottom: 1px solid rgb(120, 190, 32);
			}		
			table tr th{
				border-top: none;
				background: rgb(0, 130, 186);
				color: rgb(255, 255, 255);
			}	
			table tr td:first-child,
			table tr th:first-child{
				border-left: none;				
			}
			table tr td:last-child,
			table tr th:last-child{
				border-right: none;				
			}
			table tr:last-child td{
				border-bottom: none;
			}
			table th{
				font-weight: 600;
			}
						
		

	/**
	 * LAYOUT BLOCKS
	 *
	 * Overwrite base .wrap base style (all wraps in YEC site are "wide").
	 */
		.wrap { max-width: 1770px; }



		iframe {
			margin: 0;
			border: none;
			overflow: hidden;
			width: 100%;
		}
			#fish-cam {
				margin: 0 0 1em;
				position: relative;
				overflow: hidden;
				padding: 56.25% 0 0;
			}
			#fish-cam:empty {
				display: none;
			}
				#fish-cam iframe {
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
				}
		

	/**
	 * HEADER
	 */

		header#title {
			position: relative;
			z-index: 300;
		}
		
		#logo {
			margin: 15px 0;
		}
			#logo a {
				width: 100px;
				height: 35px;
				display: block;
				background: #fff url("/assets/layout/yec_logo.png") no-repeat 0 0;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				text-indent: -9999px;
				font-weight: 600;
				font-size: 120%;
				text-transform: uppercase;
				text-decoration: none;
				color: rgb(236, 0, 140);
			}
			html[lang="fr"] #logo a {
				background-image: url("/assets/layout/yec_logo_fr.png");
			}

		ul#menu {
			font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
			font-weight: 300;
			font-size: 105%;
			margin: 2em 1em 0 0;
			float: right;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;	
		}
			ul#menu li {
				display: inline-block;
				float: left;
				margin: 0 0.4em;
			}
				ul#menu li a:link,
				ul#menu li a:visited {
					color: rgb(76, 76, 76);
				}
				ul#menu li:not(.social) a:active,
				ul#menu li:not(.social) a:hover {
					border-bottom: 1px solid rgb(76, 76, 76);
				}

			ul#menu li.lang { text-transform: uppercase; margin-right: 1.5em; }
			
			ul#menu li.social { margin: -0.2em 0.1em 0; }
				ul#menu li.social a:link,
				ul#menu li.social a:visited {
					display: block;
					color: rgb(0, 175, 215);
					font-size: 22px;
					width: 1em;
					height: 1em;
					padding: 0.1em;
					line-height: 1;
					white-space: nowrap;
					overflow: hidden;					
				}
					ul#menu li.social a:before { margin-right: 1em; }
			
				ul#menu li.social a:hover,
				ul#menu li.social a:active { color: rgb(76, 76, 76); }



		#menu-toggle {
			float: right;
			display: block;
			padding: 0.3em 0.5em;
			font-size: 90%;
			background: rgb(0, 175, 215);
			color: rgb(255, 255, 255);
		}


	/**
	 * MAIN NAV
	 */

		nav#main {
			position: relative;
			background: #fff;
			padding: 50px 0 0;
			text-align: right;
			border-bottom: 5px solid rgb(0, 175, 215);
			z-index: 200;
			line-height: 1em;
		}


			nav#main ul.main { margin: 0; }
			
			nav#main ul.main > li {
				display: inline-block;
			}
				nav#main ul.main > li > a {
					display: block;
					padding: 0.5em 1em 1em;
					text-decoration: none;
					text-transform: lowercase;
					font-family: 'ITC Avant Garde Gothic W01', Arial, Helvetica, sans-serif;
					font-weight: 600;
					font-size: 100%;
				}


				nav#main ul.main > li div.sub-slide {
					display: none;
					position: absolute;
					background: rgb(0, 175, 215);
					width: 100%;
					left: 0;
					min-height: 160px;
					padding-bottom: 1em;
				}
				html nav#main:not(.mobile) ul.main > li:hover div.sub-slide {
					display: block;
				}
					nav#main ul.main > li ul {
						text-align: left;
					}
						nav#main ul.main > li ul a {
							display: block;
							padding: 0.1em 0;
							color: rgb(255, 255, 255);
							text-decoration: none;
							font-size: 80%;
						}
						nav#main ul.main > li ul li.head a {
							display: block;
							padding: 0.5em 0;
							font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
							font-weight: 300;
							font-size: 110%;
						}
							nav#main ul.main > li ul li.head a img {
								display: none;
							}
					/*
					nav#main ul.main > li ul {
						width: 50%;
						max-width: 460px;
						margin: 0 auto;
						padding: 2em 0;
						columns: 2 220px;
						text-align: left;
					}
						nav#main ul.main > li ul > li a {
							display: block;
							padding: 0.3em 0.5em;
							color: #fff;
							text-decoration: none;
							font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
							font-weight: 300;
							font-size: 100%;
						}
					*/

		header#title.mobile {
			border-bottom: 5px solid rgb(0, 175, 215);
		}

			nav#main.mobile {
				display: none;
			}
			nav#main.mobile.open {
				display: block;
				position: absolute;
				top: 65px;
				padding: 20px 0 0;
				min-height: 100%;
				width: 100%;
				text-align: left;
			}

			nav#main.mobile ul.main > li {
				display: block;
			}

				nav#main.mobile ul.main > li > a {
					padding: 0.75em 1em 0.5em;
				}
			
				nav#main.mobile ul.main > li div.sub-slide {
					position: static;
					background: white;
				}
				
				
				html nav#main ul.main > li.selected div.sub-slide {
					display: block;
				}
				
					nav#main.mobile ul.main > li ul {
						margin-left: 1.5em;
					}
					
						nav#main.mobile ul.main > li ul a {
							color: rgb(76, 76, 76);
						}
		
						nav#main.mobile ul.main > li ul li.head a {
							padding: 0.5em 0 0.25em;
							margin-left: -0.5em;
						}
		

	/**
	 * SUB NAV
	 */
		ul.subnav {
			line-height: 1.2em;
			font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
			font-weight: 300;
			margin: 0 0 1.5em;
		}
		
			ul.subnav a:link,
			ul.subnav a:visited {
				text-decoration: none;
				display: block;
				padding: 0.4em 0.8em;
				color: rgb(76, 76, 76);
			}
		
				ul.subnav > li > a:link,
				ul.subnav > li > a:visited {
					background: rgb(230, 230, 230);
					line-height: 1em;
					padding: 0.7em 0.8em 0.6em;
					border-bottom: 3px solid #fff;
				}
				ul.subnav > li > a:hover,
				ul.subnav > li > a:active,
				ul.subnav > li.selected > a,
				ul.subnav > li.parent-selected > a {
					background: rgb(120, 190, 32);
					color: #fff;
				}
				
				ul.subnav > li > ul {
					margin: 0.25em 0 0.5em;
				}
					ul.subnav > li > ul a:hover,
					ul.subnav > li > ul a:active,
					ul.subnav > li > ul li.selected > a {
						color: rgb(120, 190, 32);
					}
						ul.subnav > li > ul ul {
							margin-left: 1em;
							font-size: 90%;
						}

				ul.subnav > li.ico-indicator:before,
				ul.subnav > li > ul ul li.ico-indicator:before {
					content: "";
					display: none;
				}
				ul.subnav > li > ul > li.ico-indicator {
					position: relative;
				}
				ul.subnav > li > ul > li.ico-indicator:before {
					position: absolute;
					color: rgb(240, 179, 35);
					top: 0.5em;
					left: -0.33em;
				}

	


	/**
	 * SLIDES
	 */

		.slide {
			/*width: 100%;*/
			background-color: transparent;
			background-size: cover;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			position: relative;
			z-index: 1100;
			padding: 4% 0;
			font-size: 90%;
		}
			.slide.nopad { padding: 0; }

		
		.slide.banner {
			padding: 0;
			background-color: rgb(205, 204, 204);
			background-repeat: no-repeat;
			background-position: 50% 50%;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}

			.slide.banner .wrap { width: 100%; }
			
			.slide.banner .wrap img.pad { width: 33.35%; }
			.home .slide.banner .wrap img.pad { width: 42.5%; }
			
			h1.home-tagline {
				font-size: 250%;
				position: absolute;
				left: 10%;
				right: 10%;
				top: 40%;				
				margin: 0 auto;
				text-transform: lowercase;
				text-align: center;				
			}



		.slide:not(.banner):not(.grid) h1 {
			color: rgb(0, 130, 186);
			text-shadow: none;
		}


		
			.slide.grid {
				padding: 10px 0;
			}
			
				.grid .col,
				.grid .col > a,
				.grid .col .home-boxed,
				.grid .col .content {
					-moz-box-sizing: border-box;
					 -ms-box-sizing: border-box;
						 box-sizing: border-box;
				}

				.grid .col {
					padding: 10px;
					background: transparent no-repeat 50% 50%;
					background-size: cover;
					background-origin: content-box;
					background-clip: content-box;
				}	

					.grid .col > a,
					.grid .col .home-boxed {
						display: block;
						position: relative;
						height: 0;
						padding: 0 0 65.517241%;
						color: inherit;
					}

					/*.grid .col img.pad { width: 65.517241%; }*/

					.grid .col .content {
						position: absolute;
						padding: 0.75em;
						height: 100%;
						width: 100%;
						overflow: hidden;
					}
					
					.grid .col .home-boxed .content { padding: 1.5em; }


				.grid.thumbs .col { background-color: rgb(0, 130, 186); }
					.grid.thumbs .col > a:hover,
					.grid.thumbs .col > a:active { background-color: rgba(0, 130, 186, 0.85); }
				
				
					
				.grid.news .col { clear: none !important; }
					.grid.news .col > a {
						border: 1px solid rgb(76, 76, 76);
					}
						.grid.news .col a.with-thumb {
							padding-bottom: 131.034482%;
							padding-top: 21px;
							background-repeat: no-repeat;
							background-size: contain;
							background-position: 50% 0;
							border: 1px solid rgb(76, 76, 76);
						}
						.grid.news .col > a.with-thumb .content {
							height: 50%;
							bottom: 0;
						}
					.grid.news .col .content { padding: 2em; }
						.grid.news .col .content:after {
							content: "";
							display: block;
							position: absolute;
							left: 0;
							bottom: 0;
							width: 100%;
							height: 2.5em;
							background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgb(255, 255, 255) 2em);
							background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgb(255, 255, 255) 2em);
							background-image:      -o-linear-gradient(top, rgba(255, 255, 255, 0), rgb(255, 255, 255) 2em);
							background-image:         linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255) 2em);
						}

	
					.grid.news .col.bluebg > a:not(.with-thumb) {
						background-color: rgb(0, 130, 186);
						border-color: rgb(0, 130, 186);
					}
					.grid.news .col.greenbg > a:not(.with-thumb) {
						background-color: rgb(120, 190, 32);
						border-color: rgb(120, 190, 32);
					}
						.grid.news .col.bluebg > a:not(.with-thumb),
						.grid.news .col.bluebg > a:not(.with-thumb) h2,
						.grid.news .col.bluebg > a:not(.with-thumb) h3,
						.grid.news .col.bluebg > a:not(.with-thumb) h4,
						.grid.news .col.bluebg > a:not(.with-thumb) h5,
						.grid.news .col.greenbg > a:not(.with-thumb),
						.grid.news .col.greenbg > a:not(.with-thumb) h2,
						.grid.news .col.greenbg > a:not(.with-thumb) h3,
						.grid.news .col.greenbg > a:not(.with-thumb) h4,
						.grid.news .col.greenbg > a:not(.with-thumb) h5 {
							color: rgb(255, 255, 255);
						}
						.grid.news .col.bluebg > a:not(.with-thumb) .content:after {
							background-image: -webkit-linear-gradient(top, rgba(0, 130, 186, 0), rgb(0, 130, 186) 2em);
							background-image:    -moz-linear-gradient(top, rgba(0, 130, 186, 0), rgb(0, 130, 186) 2em);
							background-image:      -o-linear-gradient(top, rgba(0, 130, 186, 0), rgb(0, 130, 186) 2em);
							background-image:         linear-gradient(to bottom, rgba(0, 130, 186, 0), rgb(0, 130, 186) 2em);
						}
						.grid.news .col.greenbg > a:not(.with-thumb) .content:after {
							background-image: -webkit-linear-gradient(top, rgba(120, 190, 32, 0), rgb(120, 190, 32) 2em);
							background-image:    -moz-linear-gradient(top, rgba(120, 190, 32, 0), rgb(120, 190, 32) 2em);
							background-image:      -o-linear-gradient(top, rgba(120, 190, 32, 0), rgb(120, 190, 32) 2em);
							background-image:         linear-gradient(to bottom, rgba(120, 190, 32, 0), rgb(120, 190, 32) 2em);
						}
						


									
				.grid h1 {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					margin: 0;
					padding: 1em 0.7em 0.55em 1em;
					font-size: 210%;
					line-height: 1.1em;
					-moz-box-sizing: border-box;
					 -ms-box-sizing: border-box;
						 box-sizing: border-box;
					background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.4) 2.5em);
					background-image:    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.4) 2.5em);
					background-image:      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.4) 2.5em);
					background-image:         linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4) 2.5em);
				}
					.grid h1 span { font-size: 90%; text-indent: 0; }
		
		
		
		.slide .downloads {
			border: 1px solid rgb(240, 179, 35);
			padding: 1em;
			margin: 1em 1em 1em 0;
			clear: both;
		}
			.slide .downloads h3 {
				font-size: 115%;
				margin-bottom: 1em;
			}

			.slide .downloads ul { line-height: 1.2em; }
			.slide .downloads ul li {
				display: block;
				padding: 0 0 0.6em 22px;
				text-indent: -22px;
				-webkit-column-break-inside: avoid; /* Chrome, Safari */
			    page-break-inside: avoid;           /* Theoretically FF 20+ */
			    break-inside: avoid-column;         /* IE 11 */
		    	display:table;                      /* Actually FF 20+ */
			}
			.slide .downloads ul li i.ico-right { margin-right: 8px; }
			.slide .downloads ul li i.ico-download.small { color: rgb(240, 179, 35); }
			.slide .downloads ul li a:hover { text-decoration: underline; }
		
	


		.slide.footer {
			background: rgb(128, 128, 128);
			color: rgb(255, 255, 255);
		}
			.slide.footer a:link,
			.slide.footer a:visited {
				color: rgb(255, 255, 255);
			}
			.slide.footer a:hover,
			.slide.footer a:active {
				color: rgb(0, 175, 215);
			}

	
	/**
	 * SLIDESHOW BANNER
	 */
	div.gallery{
		max-height: 760px;
		position: relative;
		z-index: 9
	}	
	div.gallery .banner:not(:first-child){
		display: none;
	}
	
		div.gallery ul.slidesjs-pagination{
			position: absolute; 
			z-index: 999;
		}
			div.gallery ul.slidesjs-pagination {		  
			  display: block;
			  position: absolute;
			  z-index: 99;
			  bottom: 20px;
			  right: 20px;
			}	
			div.gallery ul.slidesjs-pagination li {
			  float: left;
			  margin: 0 1px;
			}	
				div.gallery ul.slidesjs-pagination li a {
				  display: block;
				  width: 13px;
				  height: 0;
				  padding-top: 13px;
				  background-image: url(https://yukonenergy.ca/assets/layout/pagination.png);
				  background-position: 0 0;
				  float: left;
				  overflow: hidden;
				}	
				div.gallery ul.slidesjs-pagination li a.active,
				div.gallery ul.slidesjs-pagination li a:hover.active {
				  background-position: 0 -13px
				}	
				div.gallery ul.slidesjs-pagination li a:hover {
				  background-position: 0 -26px
				}	
	


	/**
	 * HOME BOXED CONTENT
	 */

	.home-boxed {
	}
		
		.home-boxed .content.home-tools ul {
			display: block;
			margin: 0 0 0 1.8em;
		}
			.home-boxed .content.home-tools ul li {
				display: block;
				border-bottom: 1px dotted rgb(255, 255, 255);
				padding: 0.3em 0;
			}
			.home-boxed .content.home-tools a {
				text-indent: -1.8em;
				color: inherit;
			}

			.home-boxed .content.home-tools [class^="ico-"]:before {
				padding-right: 0.5em;
				position: relative;
				top: 0.05em;
				font-size: 120%;
			}
			.home-boxed .content.home-tools [class^="ico-"]:after {
				top: 0.05em;
				font-size: 120%;
			}

		
		.home-boxed .content.tenders-proposals h2 {
			margin: 0 0 1em;
			font-size: 120%;
		}
		.home-boxed .content.tenders-proposals ul {
			display: block;
		}
			.home-boxed .content.tenders-proposals ul li {
				display: block;
				padding: .25em 0;		
				font-size: 90%;	
			}
				.home-boxed .content.tenders-proposals ul li span {
					display: inline-block;
					margin-right: 1em;
					color: rgb(0, 130, 186);
					text-transform: uppercase;
					width: 2em;
				}			
					.home-boxed .content.tenders-proposals ul li a.visit {
						display: inline-block;
						color: rgb(0, 130, 186);
					}
					.home-boxed .content.tenders-proposals ul li a.visit:hover {
						background: none;
					}
		.home-boxed .content.tenders-proposals li a.seeall {						
			font-size: 90%;	
			color: inherit;
			text-transform: uppercase;
			display: inline-block;
		}
		.home-boxed .content.tenders-proposals li a.seeall:hover {
			background: none;			
		}



	/* FORMS */ 			
	
	FORM:not(#search),
	.comment-form{
		max-width: 550px;
		margin-top: 50px;
	}
	FORM#comment_form{
		margin-top: 0;
	}
		FORM:not(#search) LABEL{
			font-weight: bold;
			display: block;
		}
		FORM#comment_form .comment-details LABEL{
			display: inline-block;
		}
		FORM#comment_form LABEL{
			margin-top: 1em;
		}
		FORM:not(#search) INPUT[type=text],
		FORM:not(#search) INPUT[type=email],
		FORM:not(#search) TEXTAREA{
			width: 100%;
			padding: .2em .5em;
			font-size: 18px;
			line-height: 22px;
			border: 1px solid #ccc;
		}
		FORM:not(#search) TEXTAREA{
			padding: .3em .5em;	
			height: 100px;			
		}
		FORM:not(#search) BUTTON{
			padding: .4em 1em;
			font-size: 18px;
			line-height: 22px;
			background: rgb(0, 130, 186);
			color: rgb(255, 255, 255);
			border: none;
			cursor: pointer;
		}
		FORM:not(#search) BUTTON:hover{
			background: rgb(120, 190, 32);
		}

	.comment-form h4{
		font-size: 150%;
	}	
	
	FORM span.errors{
		display: inline-block;
		margin-left: 1em;
		color: red;
		font-style: italic;
	}
	
	
	


	/**
	 * PROJECT PAGE
	 */
	 
	 div.video{
	 	margin: 2em 0;
	 }
	 
	 .body-two-cols{
	 	margin-top: 3em;
	 }
	 
		 .body-two-cols .col.half{
			padding: 0 4em 3em 0;
		 }	 
		 
		 .body-two-cols .col.half table ul{
		 	list-style-type: disc;
		 	margin-left: .5em;
		 }
		 
		 /*
			 .body-two-cols .col.half hr{
				border: none;
				height: 1px;
				color: rgb(120, 190, 32);
				background-color: rgb(120, 190, 32);
			 }
			  .body-two-cols .col.half ul li{
				padding-left: 25px;
			  }
			  .body-two-cols .col.half ul li:before{			  	
				content: "\2022"; 
				color: rgb(120, 190, 32);
				display: block;
				font-size: 1.5em;
				position: relative;
				width: 20px;
				height: 20px;
				margin-left: -25px;
				float: left;
			  }
		*/



	/**
	 * ELECTRICITY 101
	 */
	 
	 .slide.elec101{
		 padding-bottom: 1%;
	 }
		 .slide.elec101 h2{
			color: rgb(255, 255, 255);
			background: rgb(0, 130, 186);
			text-align: center;
			padding: 1em;
			margin: 0;
		 }

	.col.elec101 h2{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0;
		padding: 1em 0;
		font-size: 100%;		
		background: rgb(255, 255, 255);
	}


	/* TABLE */ 
	
	table.list tr td{
		padding-right: 1.5em;
	}
	table.list tr td:last-child{
		padding-right: 0;
	}
	table.list tr td.desc{
		font-size: 95%;
	}
	table.list tr td a.bluebullet{
		display: block;
		position: relative;
		top: .3em;
	}
		table.list tr td a.bluebullet img{
			max-width: none;
		}
		
		
		
	/**
	 * ACCORDION
	 */
	
	.accordion-title{ 
		cursor: pointer;
	}
	.accordion-title::before{
		  content: '+';
		  margin-right: 8px;
		  float: left;
	}
	.accordion-title.opened::before{
		  content: '-';
	}
	 .accordion-content{
	 	display: none;
	 }
	 		

	/**
	 * PEAK SMART
	 */
	 
	a.grey-btn{
		display: inline-block;
		background: rgb(230, 230, 230);
		color: rgb(0, 130, 186);
		text-transform: uppercase;
		font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
		font-weight: 600;
		font-size: 18px;
		padding: 10px 40px;
		margin: 20px 0 40px 0;
	}
	a.grey-btn:hover{
		background: rgb(0, 130, 186);
		color: rgb(230, 230, 230);
	}
	
	.peak-smart-process{
		margin-top: 50px;
		margin-bottom: 50px;
		width: 100%;
		position: relative;
	}	
	.peak-smart-process h2{
		color: rgb(120, 190, 32);
	}
	.peak-smart-process p{
		margin-bottom: 5px;
	}
	.peak-smart-process .flex{
		display: flex;
		flex-direction: row;
		align-content: stretch;
		padding-left: 40px;
	}
	.peak-smart-process .grad{
		background: linear-gradient(180deg, rgba(0,130,186,1) 0%, rgba(0,130,186,1) 35%, rgba(120,190,32,1) 100%);
		border-radius: 20px;
		margin: 0;
		width: 20px;
    	height: 100%;
    	float: left;
    	display: block; 
	}
	.peak-smart-process .grad-mobile{
		margin-right: 20px;
		position: absolute; 
		top: 40px;
		bottom: 0;
		height: auto;
	}
	.peak-smart-process .flex .col.grad-desktop{
		display: none;
	}
	.peak-smart-process .flex .col.half{
		flex: 100%;
		width: auto;
		margin: 0;
		padding:0;
	}
		.peak-smart-process .col.half .step{
			margin-bottom: 25px;
			margin-right: 25px;
		}
		.peak-smart-process .col.half h3{
			color: rgb(0, 130, 186);
			font-size: 46px;
			font-weight: 700;
			margin-bottom: 0;
		}
		.peak-smart-process .col.half em{
			color: rgb(0, 130, 186);			
		}
		.peak-smart-process .col.half .eight p{
			color: rgb(120, 190, 32);
			font-size: 22px;
			line-height: 26px;
			font-weight: 600;
		}

	
	.slide .peak-smart-footer {
			border: 1px solid rgb(240, 179, 35);
			padding: 1em;
			margin: 2.5em 1em 1em 0;
			clear: both;
		}
			.slide .peak-smart-footer h3 {
				font-size: 115%;
				margin-bottom: 1em;
			}

			.slide .peak-smart-footer ul { line-height: 1.2em; }
			.slide .peak-smart-footer ul li {
				display: block;
				padding: 0 0 0.6em 0;
				-webkit-column-break-inside: avoid; /* Chrome, Safari */
			    page-break-inside: avoid;           /* Theoretically FF 20+ */
			    break-inside: avoid-column;         /* IE 11 */
		    	display:table;                      /* Actually FF 20+ */
			}	


			
	/**
	 * TABS
	 */


	.tab-container {
		padding: 0;
		margin: 4em 0 0;
	}
	.tab-container .tabs {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
  		gap: 4px; 
	}
	.tab-container .tab {
		padding: 10px 20px;
		cursor: pointer;
		background: rgb(120, 190, 32);
		color: rgb(255, 255, 255);
		border: 1px solid rgb(120, 190, 32);
		text-transform: uppercase;
	}
	.tab-container .tab:first-child {
		margin-left: 0;
	}
	.tab-container .tab:last-child {
		margin-right: 0;
	}
	.tab-container .tab.active {
		position: relative;
		background: rgb(255, 255, 255);
		color: rgb(120, 190, 32);
		border-bottom: 1px solid rgb(255, 255, 255)!important;
	}
	.tab-container .tab.active::after {
		content: '';
		width: 100%;
		background: rgb(255, 255, 255);
		height:2px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -2px;
	}

	.tab-container .tab-content {
	display: none;
	padding: 50px 30px;
	border: 1px solid rgb(120, 190, 32);
	}

	.tab-container .tab-content.active {
	display: block;
	}
	/* mobile */
	@media (max-width: 640px){
	.tab-container .tab{
		flex: 1 1 calc(50% - 4px); /* 2 per row */
		text-align: center;
		padding: 10px 12px;
		white-space: normal;       /* allow wrapping inside tab */
	}
	}

	/* very small phones */
	@media (max-width: 380px){
	.tab-container .tab{
		flex: 1 1 100%;            /* 1 per row */
	}
	}
		

/**********************
		SMALL
**********************/

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

	body:after { content: 'small'; }


	/**
	 * SLIDES
	 */
		.slide.grid h1 { font-size: 125%; }
	
	
	h1.home-tagline {
		font-size: 350%;
	}
}






/**********************
		MEDIUM
**********************/

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

	body:after { content: 'medium'; }


	/**
	 * HEADER
	 */
	 
		#logo {
			float: left;
			margin: 30px 0 0;
		}
			#logo a {
				width: 220px;
				height: 77px;
			}

		#menu-toggle { display: none; }

	/**
	 * MAIN NAV
	 */

		nav#main { font-size: 110%; }
			

		.subnav {
			margin-left: 10%;
			float: right;
		}

		nav#main ul.main > li ul li.head a img {
			display: block;
			margin: 0.5em 0 0;
		}
		
		
	h1.home-tagline {
		font-size: 450%;
	}
		
		

	/**
	 * SLIDES
	 */
	 
	 .slide {
	 	font-size: 100%;
	 }

		.slide.grid h1 { font-size: 160%; }


	.home-boxed {
		font-size: 115%;
	}			
	

}



/**********************
	  MAX LARGE
**********************/

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

	.body-two-cols .col.half{
		width: 100%;
		float: none;
	}

}


/**********************
		LARGE
**********************/

@media only screen and (min-width: 1250px) and (min-height: 760px) {

	body:after { content: 'large'; }

	/**
	 * MAIN NAV
	 */

		nav#main { font-size: 120%; }

		.subnav{ 
			margin-left: 20%;
			min-width: 350px;
			float: right;
		}

	/**
	 * SLIDES
	 */
		.slide.grid h1 { font-size: 280%; }


	.home-boxed {
		font-size: 130%;
	}
	
	
	h1.home-tagline {
		font-size: 600%;
	}
	
	
	
	/* PEAK SMART */
	
	.peak-smart-process .flex{
		padding-left: 0;
	}
	.peak-smart-process .flex .col.half{
		flex: 50%;
		margin: 25px 0;
	}
	.peak-smart-process .grad-mobile{
		display: none;
	}
	.peak-smart-process .flex .col.grad-desktop{
		display: block;
		margin-right: 40px;
	}
	.peak-smart-process .col.half ul li{
		margin-left: 60px;
	}
	
	

}


/**********************
	  SHORT n WIDE
**********************/

@media only screen and (max-height: 760px) and (min-width: 900px) {

	body:after { content: 'short-wide'; }

	/**
	 * LAYOUT BLOCKS
	 *
	 * Overwrite base .wrap base style (all wraps in YEC site are "wide").
	 */
		.wrap {
			max-width: 1200px;
		}
	
}



/********************************************
	  PEAK SMART EVENTS TABLE
	  WHITEHORSE POWER CENTRES TABLE
********************************************/

@media only screen and (max-width: 1040px) {
	
	/* Force table to not be like tables anymore */
	.no-more-tables table, 
	.no-more-tables thead, 
	.no-more-tables tbody, 
	.no-more-tables th, 
	.no-more-tables td, 
	#no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	.no-more-tables tr {
		border-bottom: 2px solid rgb(120, 190, 32);
		width: 100%;
		display: block;
	}
	.no-more-tables tr:last-child {
		border-bottom: none;
	}
 
	.no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding: 5px 0 5px 135px;
		white-space: normal;
		text-align:left;
		width: 65%;
	}
	.no-more-tables td:last-child { border:none;}
 
	.no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0;
		bottom: 0;
		left: 0;
		padding: 5px 5px 5px 5px;
		width: 115px;
		white-space: nowrap;
		text-align:left;
    	background: rgb(0, 130, 186);
	    color: #ffffff;	    
	}
	.no-more-tables table tr:last-child td {
    	border-bottom: 1px solid #eee; 
	}
 
	/*
	Label the data
	*/
	.no-more-tables td:before { content: attr(data-title); }
	
	
	/* WHITEHORSE POWER CENTRES */

	ul.power-centres-images{
		list-style-type: none;
	}
	ul.power-centres-images li.map img{
		width: 100%;
	}
	ul.power-centres-images li:not(.map) img{
		width: 48%;
	}

	.no-more-tables.whitehorse-power-centres-table td { 
		border-bottom: 1px solid #eee; 
	}	
	.no-more-tables.whitehorse-power-centres-table tr td:last-child{
		padding-bottom: 30px;
	}
	.no-more-tables.whitehorse-power-centres-table td:before {
	    white-space: normal;	    
	}
	
	@media only screen and (max-width: 1040px) {
		.no-more-tables.wpcc-transmission-table tr{
			margin-bottom: 10px;
        	padding-bottom: 10px;
		}
		.no-more-tables.wpcc-transmission-table td:not(.no-label):before {
			display: none;
		}
		.no-more-tables.wpcc-transmission-table td:not(.no-label) {
			padding-left: 0;
			width: 100%;
		}
	}
	

}