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



	/**
	 * SLIDES
	 */

		.projects .slide.banner { padding: 0; }

			.projects div.project_map {
				width: 100%;
				height: 0;
				padding-bottom: 42.5%;
			}

			.projects .popup-template {
				display: none;
			}

			.projects .leaflet-popup {
				font-family:'Frutiger W01', Arial, Helvetica, sans-serif;
				font-weight: 400;
				font-size: 0.9rem;
				line-height: 1.4em;
			}

				.projects .leaflet-popup-tip {
					box-shadow: 0 3px 7px rgba(0,0,0,.3);
				}

				.projects .leaflet-container a.leaflet-popup-close-button {
					display: block;
					padding: 0px;
					width: 1em;
					height: 1em;
					font-size: 0.9rem;
					position: absolute;
					top: 1em;
					right: 0.25em;
					cursor: pointer;
					transform: rotate(45deg);
				}
					.projects .leaflet-container a.leaflet-popup-close-button:before {
						z-index: 2;
					}
					.projects .leaflet-container a.leaflet-popup-close-button:after {
						position: absolute;
						left: 0;
						z-index: 1;
					}

				.projects .leaflet-popup-content-wrapper {
					border-radius: 0;
					padding: 0;
					background: rgb(255, 255, 255);
				}

					.projects .leaflet-popup-content {
						width: 150px;
						border: 0;
						margin: 0;
					}

						.projects .leaflet-popup-content .thumb {
							display: none;
							padding-top: 55%;
							background: transparent no-repeat 50% 50%;
							-webkit-background-size: cover;
							-moz-background-size: cover;
							-o-background-size: cover;
							background-size: cover;
						}

						.projects .leaflet-popup-content .categories {
							border-top: 6px solid rgb(0, 130, 186);
							margin: 0;
							padding: 0.5em 5%;
						}
							.projects .leaflet-popup-content .categories svg {
								font-size: 250%;
								vertical-align: -90%;
							}

						.projects .leaflet-popup-content h3 {
							font-size: 105%;
							line-height: 1.15em;
							margin-right: 10%;
						}

						.projects .leaflet-popup-content h5 {
							font-size: 90%;
							line-height: 1em;
						}

						.projects .leaflet-popup-content p,
						.projects .leaflet-popup-content a {
							font-size: 90%;
						}

						.projects .leaflet-popup-content p.excerpt {
							display: none;
							overflow: hidden;
							position: relative;
							line-height: 1.2em;
							max-height: 3.6em;
							margin: 0 5%;
						}
						.projects .leaflet-popup-content p.excerpt:after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 1.5em;
							background-image: linear-gradient(to top, rgb(255, 255, 255), rgba(255, 255, 255, 0));
						}

						.projects .leaflet-popup-content a.more {
							display: block;
							padding: 0 5% 0.8em;
						}
							.projects .leaflet-popup-content a.more .ico-right {
								vertical-align: -7%;
								margin-left: 0.25em;
							}




		/* Project category type color definitions */
		.projects .cat-facilities svg,
		.projects .cat-facilities h5			{		 color: rgb(27, 165, 194) !important; }
		.projects .cat-facilities .categories	{ border-color: rgb(27, 165, 194) !important; }

		.projects .cat-projects svg,
		.projects .cat-projects h5				{		 color: rgb(228, 110, 49) !important; }
		.projects .cat-projects .categories		{ border-color: rgb(228, 110, 49) !important; }

		.projects .project .categories {
			background: rgb(255, 255, 255);
			position: absolute;
			width: 97%;
			margin: 1.5%;
			border-bottom: 6px solid rgb(0, 130, 186);
			-moz-box-sizing: border-box;
			 -ms-box-sizing: border-box;
				 box-sizing: border-box;
		}
			.projects .project .categories .project-meta {
				float: right;
				max-width: 45%;
				margin: 1em 2em 0 1em;
				text-align: right;
			}
			.projects .project .categories h5 {
				float: none;
				margin: 0;
				font-size: 80%;
			}
			.projects .project .categories .project-status {
				display: block;
				margin-top: 0.2em;
				font-size: 65%;
				font-weight: 600;
				line-height: 1.2em;
				color: rgb(76, 76, 76);
			}
				.projects .project .categories .project-status:before {
					content: '';
					display: inline-block;
					width: 0.55em;
					height: 0.55em;
					border-radius: 50%;
					margin-right: 0.4em;
					background-color: rgb(228, 185, 56);
					vertical-align: 0.05em;
				}
			.projects .project .categories h3 {
				display: inline-block;
				margin: 0;
				color: rgb(76, 76, 76);
			}
			.projects .project .categories svg {
				font-size: 250%;
				vertical-align: -70%;
			}





	.projects .slide.head {
		padding-bottom: 2%;
	}


	.projects .slide.filters {
		padding: 0;
	}
		.projects .slide.filters h2 {
			padding: 0 5% 0.4em 1.5%;
			margin-bottom: 0.2em;
			border-bottom: 6px solid rgb(230, 230, 230);
		}
		.projects .slide.filters ul {
			padding: 0 1.5%;
			font-size: 110%;
		}
			.projects .slide.filters li.active {
				font-weight: 600;
			}
				.projects .slide.filters i {
					float: right;
				}
				.projects .slide.filters i:after {
					color: rgb(0, 130, 186);
				}

	.projects .grid.thumbs .col.project-empty {
		background-color: transparent;
	}
		.projects .project-empty p {
			margin: 0;
		}



		/* Southern Lakes Enhancement */
		
		h2.southern-title::before{
			content: '';
			position: relative;
			display: block;
			width: 150px;
			height: 150px;	
			background-size: cover;
			margin-bottom: .5em;						
			margin-top: 1em;
		}
		h2.southern-title{
			position: relative;
			
		}
		h2#southern-groundwater::before{
			background-image: url('/media/site_images/Projects-Facilities/Southern_Lakes_Enhancement/southernlakes_groundwater.png');			
		}
		h2#southern-erosion::before{
			background-image: url('/media/site_images/Projects-Facilities/Southern_Lakes_Enhancement/southernlakes_erosion.png');			
		}
		h2#southern-fish::before{
			background-image: url('/media/site_images/Projects-Facilities/Southern_Lakes_Enhancement/southernlakes_wildlife.png');			
		}
		h2#southern-traditional::before{
			background-image: url('/media/site_images/Projects-Facilities/Southern_Lakes_Enhancement/southernlakes_traditionalknowledge.png');			
		}
		
		
		form#southern-lakes-input{
			max-width: 600px;		
			margin-top: 1em;
		}
			form#southern-lakes-input .errors.help-block{
				display: inline-block;
				margin-left: 1em;
				color: red;
				font-style: italic;
				font-size: 90%;
			}
			form#southern-lakes-input .alert-success{
				color: green;
			}
			
		

		/* New Thermal Generation */

		.page-children-thermal img{
			border: 1px solid rgb(205, 204, 204);
		}
		.page-children-thermal:hover img{
			border: 1px solid rgb(240, 179, 35);
		}
		.page-children-thermal:hover a{
			color: rgb(240, 179, 35);
		}
		.page-children-thermal h3{
			margin-top: 0;
		}
		
		
		/* Future-focused Portfolio */
	
		.future-focused{
			padding: 4% 0;
		}
			.future-focused .col.quarter{
				text-align: center;
				margin-bottom: 2em;
			}
			.future-focused .col.quarter strong{
				display: block;
				min-height: 30px;
			}
		
		
		
		
		/* New Thermal Generation - MAP Location Options */
		
		.body-two-cols .col.half .location:not(:first-child) {
			display: none;
		}

		.map {
			border: 1px solid rgb(128, 128, 128);
			position: relative;
			display: inline-block;
  		}
  			.map img {
  				width: 100%;
  				max-width:100%;
				display: block;
  			}
			.map .box {
				position: absolute;
				font-size: 25px;
				width:40px;
				height:40px;
				line-height: 40px;
				background: rgb(0, 130, 186);
				color: rgb(255, 255, 255);
				border: 2px solid rgb(0, 130, 186);
				border-radius: 40px;
				-moz-border-radius: 40px;
				-webkit-border-radius: 40px;
				text-align: center;
			}
			.map .box:hover,
			.map .box.active {
				background: rgb(120, 190, 32);
				border-color: rgb(120, 190, 32);
				cursor: pointer;
			}

			.map #pin1 {
				top:1%;
				left:60%;
			}
			.map #pin2 {
				top:35%;
				left:60%;
			}
			.map #pin3 {
				top:50%;
				left:35%;
			}
			.map #pin4 {
				top:80%;
				left:45%;
			}
			.map #pin5 {
				top:85%;
				left:40%;
			}

		table.fuel-options{
			width: 100%;
			margin: 1em 0;
		}
			table.fuel-options td{
				border: 1px solid #ccc;
				padding: .5em 1em;
			}


    .projects .col.third:nth-child(3n+4) {
      clear: none;
    }

	

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

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

		.projects div.project_map {
			padding-bottom: 48%;
		}

		.projects .leaflet-popup-content {
			width: 250px;
		}

			.projects .leaflet-popup-content h3 {
				font-size: 130%;
				margin-right: 5%;
			}

			.projects .leaflet-popup-content p.excerpt {
				display: block;
			}

			.projects .leaflet-popup-content a.more {
				padding-top: 0.4em;
			}
			
	

}




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

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

	.projects .leaflet-popup {
		font-size: 1rem;
	}

		.projects .leaflet-container a.leaflet-popup-close-button {
			top: 0.25em;
			font-size: 1rem;
		}

		.projects .leaflet-popup-content {
			width: 275px;
		}

			.projects .leaflet-popup-content .thumb {
				display: block;
			}

			.projects .leaflet-popup-content h3 {
				font-size: 150%;
				margin-right: 0;
			}

				.projects .leaflet-popup-content p.excerpt {
					max-height: 4.8em;
				}						

}

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

@media only screen and (max-width: 1250px) {
	.colgroup.colgroup-battery .col.half{
		width: 100%;
		float: none;
	}
	.projects .project .categories h3 {
		font-size: 100%;
	}
}

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

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

		.projects div.project_map {
			padding-bottom: 42.5%;
		}

		.projects .leaflet-popup-content {
			width: 325px;
		}

			.projects .leaflet-popup-content .thumb {
				padding-top: 65.517241%;
			}

			.projects .leaflet-popup-content p.excerpt {
				max-height: 6em;
			}
	
	h2.southern-title::before{
		display: inline-block;
		top: 70px;
		margin-right: 1em;
		margin-bottom: 0;						
		margin-top: 1em;
	}
	h2.southern-title{
		display: inline-block;
		margin-bottom: 120px;
		margin-top: -50px;
	}

}




/**********************
	  SHORT n WIDE
**********************/
/*
@media only screen and (max-height: 760px) and (min-width: 900px) {
}
*/