/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

@import "variables";
@import "mixins";

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/**/
body {
	background: #fff;
	color: @color-black;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 2.7rem;
	line-height: 1.5em;

	img {
		height: auto;
	}

	//Color settings
	&.green {
		h1, h2, h3, h4, h5 {
			color: @color-green;
		}

		.content.subpage {
			//Look like a tab
			background: fade(@color-green, 10%);
			border-color: @color-green;

			ul {
				li::before  {
					color: @color-green;
				}
			}
		}

		nav.tabs {
			> a {
				&.selected {
					background-color: @color-green;
				}
			}
		}
	}

	&.yellow {
		h1, h2, h3, h4, h5 {
			color: @color-yellow;
		}

		.content.subpage {
			//Look like a tab
			background: fade(@color-yellow, 10%);
			border-color: @color-yellow;

			ul {
				li::before  {
					color: @color-yellow;
				}
			}
		}

		nav.tabs {
			> a {
				&.selected {
					background-color: @color-yellow;
				}
			}
		}
	}


	&.blue {
		h1, h2, h3, h4, h5 {
			color: @color-blue;
		}

		.content.subpage {
			//Look like a tab
			background: fade(@color-blue, 10%);
			border-color: @color-blue;

			ul {
				li::before  {
					color: @color-blue;
				}
			}
		}

		nav.tabs {
			> a {
				&.selected {
					background-color: @color-blue;
				}
			}
		}

	}

	&.orange {
		h1, h2, h3, h4, h5 {
			color: @color-orange;
		}

		.content.subpage {
			//Look like a tab
			background: fade(@color-orange, 10%);
			border-color: @color-orange;

			ul {
				li::before  {
					color: @color-orange;
				}
			}
		}

		nav.tabs {
			> a {
				&.selected {
					background-color: @color-orange;
				}
			}
		}
	}

	&.green-dark {
		h1, h2, h3, h4, h5 {
			color: @color-green-dark;
		}

		.content.subpage {
			//Look like a tab
			background: fade(@color-green-dark, 10%);
			border-color: @color-green-dark;

			ul {
				li::before  {
					color: @color-green-dark;
				}
			}
		}

		nav.tabs {
			> a {
				&.selected {
					background-color: @color-green-dark;
				}
			}
		}
	}

	&.blue-dark {
		h1, h2, h3, h4, h5 {
			color: @color-blue-dark;
		}

		.content.subpage {
			//Look like a tab
			background: fade(@color-blue-dark, 10%);
			border-color: @color-blue-dark;

			ul {
				li::before  {
					color: @color-blue-dark;
				}
			}
		}

		nav.tabs {
			> a {
				&.selected {
					background-color: @color-blue-dark;
				}
			}
		}
	}

}

a {
	color: @color-black;
}

.button {
	//Reset
	background-color: transparent;
	border-radius: 0;
	padding: 0;

	text-decoration: none;
	text-transform: uppercase;
    text-align: left;
    font-size: 2.2rem;
	font-weight: 600;
	color: @color-blue;
	line-height: 1em;
    padding-bottom: 0.2em;
    border-bottom: @color-blue 0.3em solid;
    display: inline-block;

	a {
		text-decoration: none;
	}

    span {
        display: block;
        // letter-spacing: 0.05em;
    }

	&:hover, &:visited, &:focus {
		color: @color-blue;
	}

	&.icon {
		padding-right: 5rem;
		background-color: transparent;
		background-position: right top;
		background-repeat: no-repeat;
		background-size: 4rem;

		&.donate {
			background-image: url("../img/icon-donate.svg");
		}
		&.calendar {
			background-image: url("../img/icon-calendar-add.svg");
		}
		&.facebook {
			background-image: url("../img/icon-fb.svg");
			padding-right: 4rem;
		}
		&.see-more, &.show-all {
			background-image: url("../img/icon+.svg");
			&.active {
				background-image: url("../img/icon-.svg");
			}
		}
	}
}
button[type=submit] {
    border-top: 0; border-left: 0; border-right: 0;
}
.has-white-color {
	color: white !important;
	border-bottom-color: white;

	a {
		color: white !important;
		border-bottom-color: white;
	}
}
.has-yellow-color {
	color: @color-yellow !important;
	border-bottom-color: @color-yellow;

	a {
		color: @color-yellow !important;
		border-bottom-color: @color-yellow;
	}
}
.has-green-color {
	color: @color-green !important;
	border-bottom-color: @color-green;

	a {
		color: @color-green !important;
		border-bottom-color: @color-green;
	}
}

.btn-container {
    background-color: @color-green;
    text-align: center;

    .button {
        margin: 1em;
    }
}

a.back-to-top {
	text-decoration: none;
	text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    font-size: 2rem;
	font-weight: 600;
	color: @color-nav-blue;
	background: transparent url("../img/icon-top.svg") center top no-repeat;
	background-size: 2.3em;
	padding: 2.3em 0 0 0;
	display: block;
}

.hide {
	display: none !important;
	visibility: hidden;
    // height: 0;
    // width: 0;
    // max-height: 0;
    // padding: 0;
    // margin: 0;
    // overflow: hidden;
    // border: 0;
    // clip: rect(0 0 0 0);
}

nav.prev-next a,
.prev-next a {
	font-size: 2rem;
	text-decoration: none;
	color: @color-nav-blue;

	background-color: transparent;
	background-repeat: no-repeat;
	background-size: contain;
	line-height: 2.5em;
	.flex(1);


	&[rel="prev"] {
		background-image: url("../img/icon-prev.svg");
		background-position: right center;
		margin-right: 1em;
		padding-right: 6rem;
		text-align: right;
	}
	&[rel="next"] {
		background-image: url("../img/icon-next.svg");
		background-position: left center;
		margin-left: 1em;
		padding-left: 6rem;

	}
}

nav.prev-next {
	.flex-display();
    .flex-flow(row nowrap);
    .justify-content(center);
	// .align-content(stretch);
}

.title-h1 {
	margin: 0;
	padding-bottom: 0;
	text-transform: uppercase;
	font-size: 4.2rem;
	font-weight: 600;
}

.title-h2 {
	.title-h1;
	font-size: 2.8rem;
	line-height: normal;
}

.color-green,
.has-green-color {
	color: @color-green;
}
.color-blue,
.has-blue-color {
	color: @color-blue;
}
.color-yellow,
.has-yellow-color {
	color: @color-yellow;
}
.color-nav-blue,
.has-blue-nav-color {
	color: @color-nav-blue;
}
.color-nav-blue-light,
.has-blue-nav-light-color {
	color: @color-nav-blue-light;
}

.has-blue-background-color { background-color: @color-blue; }
.has-green-background-color { background-color: @color-green; }
.has-yellow-background-color { background-color: @color-yellow; }
.has-yellow-light-background-color { background-color: @color-yellow-light; }
.has-blue-nav-background-color { background-color: @color-nav-blue; }
.has-blue-nav-light-background-color { background-color: @color-nav-blue-light; }


.h-icon {
	.title-h2;
	margin-bottom: 0.8em;

	.flex-display();
    .flex-flow(row nowrap);
	.align-items(center);

	img {
		height: 8rem !important;
		width: 8rem !important;
		margin-right: 0.5em;
	}

}

.inecc-box {
	margin: @vh-spacing -@vw-spacing;
	padding: @vw-spacing @vw-spacing 2rem @vw-spacing;

	h1, h2, h3, h4 {
		.title-h2;
		margin-bottom: 0.5em;
	}
}

.inecc-center > div {
	.flex-display();
	.flex-flow(row nowrap);
	.align-items(center);
	.align-content(center);

	margin-bottom: 1em;

	p {
		text-align: center;
		margin: 0 auto;
		padding: 0.1em 0.7em 0.5em 0.7em;
	}
}



/*=====================
HEADER
=====================*/

header.main-header {
	padding: 4rem @vw-spacing;

    .flex-display();
    .flex-flow(row wrap);
    .justify-content(space-between);

    h1.logo {
		color: @color-green;
		padding: 0; margin: 0;

        span {
			display: none;
		}
		img {
			width: 24rem;
			height: auto;
		}
	}

	> a.donate {
		border-bottom: 0;
		background-size: 4rem;
		background-position: center;
		margin-right: 10rem;
	}

	nav.main-nav {
		//hidden
		position: absolute;
		right: -100000px;
		top: -100000px;
		overflow: visible;

		padding: @vw-spacing;

		background-color: @color-green;
		// background-color: fade(grey, 80%);

		.flex-display();
		.flex-flow(column nowrap);

		> ul > li {
			padding-bottom: 0.5em;
		}

		ul {
            list-style-type: none;
            margin: 0;
            padding: 0;

			.flex-order(1);

			li {
				margin-bottom: 0.2em;
				&:first-child {
					margin-top: 1rem;
				}

				a {
					text-decoration: none;
					text-transform: uppercase;
					font-weight: bold;
					font-size: 3.5rem;
					color: white;

					&:hover {
						text-decoration: underline;
					}
				}

				ul {
					padding-left: 1em;

					li {
						border: 0;

						a {
							text-transform: none;
						}
					}
				}

				&.menu-item-has-children {

					ul li a {
						font-size: 3rem;
					}
				}

				&.menu-item-356 { //Donate link
					> a {
						background: transparent url("../img/icon-donate-white.svg") no-repeat right center;
	        			background-size: contain;
	                    padding-right: 1.5em;
					}

                }
			}
		}

		.social-links {
			margin: 2rem 0 8rem 0;
			.flex-order(2);

	        a {
				&[title="Facebook"] {
					background-image: url("../img/icon-fb-white.svg");
				}
				&[title="Google Groups"] {
					background-image: url("../img/icon-messenger-white.svg");
				}
				&[title="Instagram"] {
					background-image: url("../img/icon-instagram-white.svg");
				}
				&[title="Twitter"] {
					background-image: url("../img/icon-twitter-white.svg");
				}
				&[title="Email"] {
					background-image: url("../img/icon-email-white.svg");
				}
				&[title="Map"] {
					background-image: url("../img/icon-pin-white.svg");
				}
				&[title="Phone"] {
					background-image: url("../img/icon-phone-white.svg");
				}
	        }
	    }

		div.buttons {
			.flex-order(0);
			padding: 1rem 0 2rem 0;

			> a {
				display: inline-block;
			}

			a.logo {
				img {
					width: 10rem;
				}
			}

			a.menu {
				background: fade(#fff, 50%) url("../img/icon-menu.svg") no-repeat 0 0;
				background-size: 4rem;
				background-position: center;
				color: transparent;
				font-size: 0;
				.icon-size(8rem);
				overflow: hidden;
				border-radius: 50%;

				position: fixed;
				right: @vw-spacing;
				top: 4rem;
				z-index: 999999;

				&.open {
					background-color: @color-green;
					background-image: url("../img/icon-cross.svg");
				}
			}

		}

		&.open {
			position: fixed;
			right: 0; left: 0;
			top: 0; bottom: 0;
			z-index: 9999;
			overflow: scroll;
		}
	}

	a.sw-tab {
		display: none;
    }



	// nav.main-nav {
	// 	.flex-display();
	//     .flex-flow(row nowrap);
	// 	.align-items(flex-end);
	//
	// 	a.donate {
	// 		color: @color-nav-blue;
	// 		margin-right: 8rem;
	// 		padding-right: 5rem;
	// 		background: transparent url("../img/icon-donate.svg") no-repeat right top;
	// 		background-size: 2em;
	// 		height: 2em;
	// 		display: table;
	//
	// 		//Reset
	// 		padding-bottom: 0;
	// 		border: 0;
	//
	// 		span {
	// 			border-bottom: @color-nav-blue 0.3em solid;
	// 			letter-spacing: normal;
	// 			padding-bottom: 0.2em;
	// 			margin-top: -0.5em;
	// 			display: table-cell;
	// 			vertical-align: bottom;
	//
	// 			display: none;
	// 		}
	// 	}
	//
	// 	a.menu {
	// 		background: fade(#fff, 50%) url("../img/icon-menu.svg") no-repeat 0 0;
	// 		background-size: 3.5rem;
	// 		background-position: center;
	// 		color: transparent;
	// 		font-size: 0;
	// 		.icon-size(5rem);
	// 		padding: 1.6rem;
	// 		overflow: hidden;
	// 		.align-self(center);
	// 		border-radius: 50%;
	//
	// 		position: fixed;
	// 		top: 6.1rem;
	// 		right: 0.7rem;
	// 		z-index: 9999;
	//
	// 		&:hover {
	// 			background-color: fade(#fff, 90%);
	// 			background-image: url("../img/icon-menu-green.svg");
	// 		}
	//
	// 		&.open {
	// 			background-color: @color-green;
	// 			background-image: url("../img/icon-cross.svg");
	// 			position: absolute;
	// 			top: 4.3rem;
	// 		}
	// 	}
	// }

}


/*MAIN */
main {

    header.cover {
		//background-color: @color-green;
		padding: 4rem @vw-spacing 0rem @vw-spacing;
		margin-bottom: 4rem;
		position: relative;

		&:before {
			content: "";
			background-color: @color-green;
			position: absolute;
			width: 100vw;
			height: 100%;
			left: calc(50% - 50vw);
			top: 0;
			z-index: 0;
		}

        .flex-display();
        .flex-flow(column wrap);

		h1 {
			.title-h1;
			color: white;
			margin-bottom: -0.08em;
			position: relative;
			z-index: 1;
		}
        h2 {
			font-size: 3rem;
			font-weight: 600;
			line-height: 1.3em;
			color: white;

		}

		a.button {
			.align-self(flex-start);
            margin-bottom: 3rem;
		}
	}
}

/*TABS*/
nav.tabs {
	.flex-display();
    .flex-flow(row nowrap);
	.justify-content(center);

	> a {
		background: fade(@color-nav-blue, 20%);
		color: @color-nav-blue;
		font-size: 1.9rem;
		line-height: 1em;
		font-weight: bold;
		text-decoration: none;

		padding: 1.5rem 1rem 1rem 1rem;
		margin: 0 0.5rem 1rem 0.5rem;

		// .flex(0 0 ((100vw / 3) - (@vw-spacing * 2) - (0.5rem * 3) - 0.1rem) );
		.flex(0 0 32.2%);
		.flex-display();
		.flex-flow(row nowrap);

		span {
			border-bottom: @color-nav-blue 0.5rem solid;
			padding-bottom: 0.5em;

			.align-self(flex-end);
			.flex(0 0 100%);
		}

		&:first-of-type {
			margin-left: 0;
		}
		&:last-of-type {
			margin-right: 0;
		}

		&.selected {
			color: white;
			// padding: 3rem 1rem 2.3rem 1rem;
			padding-bottom: 4rem;
			margin-bottom: -0.5rem;

			span {
				border: none;
				padding: 0;
			}
		}
	}

	&.sub {
	//When tabs are shown in the bottom
		> a {
			background-color: transparent;
			padding: 0;
			margin: 0;
			.flex(1 1 50%);

			img {
				width:8rem;
				height: 100%;
				margin-right: 0.5em;
			}

			span {
				.flex(1 1 auto);
			}

			&:first-of-type {
				margin-right: 2rem;
			}
			&:last-of-type {
				margin-left: 2rem;
			}
			&.resilience {
				color: @color-green;
				span {
					border-bottom-color: @color-green;
				}
			}
			&.education {
				color: @color-yellow;
				span {
					border-bottom-color: @color-yellow;
				}
			}
			&.research {
				color: @color-blue;
				span {
					border-bottom-color: @color-blue;
				}
			}

		}
	}

	// &.sub {
	// 	//When tabs are shown in the bottom
	// 	.align-items(auto);
	//
	// 	> a {
	//
	// 		background-color: transparent;
	//
	// 		&::before { //Add icon
	// 			content: "";
	// 			width: 100%; height: 10rem;
	// 			background-image: url('../img/icon-community.svg');
    // 			background-size: contain;
	// 			background-repeat: no-repeat;
	// 			background-position: left bottom;
	// 			margin-right: 1rem;
	// 			.flex(0 0 50%);
	// 		}
	//
	// 		span {
	//
	// 		}
	//
	// 		&.resilience {
	// 			color: @color-green;
	// 			span {
	// 				border-bottom-color: @color-green;
	// 			}
	// 			&::before {
	// 				background-image: url('../img/icon-community.svg');
	// 			}
	// 		}
	// 		&.education {
	// 			color: @color-yellow;
	// 			span {
	// 				border-bottom-color: @color-yellow;
	// 			}
	// 			&::before {
	// 				background-image: url('../img/icon-education.svg');
	// 			}
	// 		}
	// 		&.research {
	// 			color: @color-blue;
	// 			span {
	// 				border-bottom-color: @color-blue;
	// 			}
	// 			&::before {
	// 				background-image: url('../img/icon-research.svg');
	// 			}
	// 		}
	//
	// 		&:first-of-type {
	// 			margin-left: -1rem;
	// 			margin-right: 12rem;
	// 		}
	//
	// 	}
	// }
}



/*=====================
FOOTER
=====================*/

footer.main-footer {
    padding: @vh-spacing 0;
    text-align: center;
    font-size: 2.2rem;

    a.button.donate,
    a.button.sitemap {
        display: none;
	}

	img {
		margin: 3rem auto;
		width: 300px;
		height: auto;
	}
}

.social-links {
	.flex-display();
	.flex-flow(row nowrap);
	.justify-content(space-around);

	a {
		background-color: transparent;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		color: transparent;
		font-size: 0;
		width: 5rem;
		height: 5rem;

		img {
			width: 2.3em;
		}

		&[title="Facebook"] {
			background-image: url("../img/icon-fb-black.svg");
		}
		&[title="Google Groups"] {
			background-image: url("../img/icon-messenger-black.svg");
		}
		&[title="Instagram"] {
			background-image: url("../img/icon-instagram-black.svg");
		}
		&[title="Twitter"] {
			background-image: url("../img/icon-twitter-black.svg");
		}
		&[title="Email"] {
			background-image: url("../img/icon-email-black.svg");
		}
		&[title="Map"] {
			background-image: url("../img/icon-pin-black.svg");
		}
		&[title="Phone"] {
			background-image: url("../img/icon-phone-black.svg");
		}
	}
}

/*=====================
HOME
=====================*/

body.home {

	main {
		header.cover {
			background: @color-green url("../img/cover_960x640_green_1.jpg") center center no-repeat;
			background-size: cover;
			padding-bottom: 4rem;
			position: relative;

			&:before {
				display: none;
			}

			h2 {
				color: @color-blue;
			}

			a.sw-tab {
				// background: transparent url("../img/icon-sustainable-website.svg") 0 0 no-repeat;
				// background-color: red;
				background-image: url("../img/icon-sw.svg"), url("../img/sustainble-website-tab-bottom.svg");
				background-position: 6.8rem 3.2rem, center center;
				background-repeat: no-repeat, no-repeat;
				background-size: 5.5rem, contain;

				font-size: 1.6rem;
				font-weight: bold;
				line-height: 1.1em;
				text-decoration: none;
				text-transform: uppercase;
				text-align: center;
				color: @color-green;

				width: 16rem;
				height: 16rem;

				position: absolute;
				bottom: -3.2rem;
				right: @vw-spacing;
				overflow: hidden;

				> span {
					position: absolute;
					bottom: 2.4rem;
					left: 3rem;

					span {
						display: block;
						font-size: 1.2rem;
						line-height: 1em;
					}
				}
			}
		}
	}

	section {
		padding: 0 @vw-spacing;
		clear: both;

	    header {
	        h1 {
	            .title-h1;
	        }
	        h2 {
	            margin: 0;
	            font-weight: normal;
	            font-size: 3rem;
	        }
	    }
	    > h1 {
	        .title-h1;
	    }

	    &.our-work {

	        header {
				margin-bottom: 4rem;

	            h1 {
	                color: @color-green;
	            }
	        }

	    }

	    &.our-reach {
			// background-color: transparent;
			// background: url("../img/map.svg") bottom right no-repeat, url("../img/square_100_grey.svg") 0 @vh-spacing no-repeat;
			// background-size: contain, cover;
			background: transparent url("../img/square_100_grey.svg") 0 10rem no-repeat;
			background-size: cover;
			// background-color: @color-nav-blue-light;
			margin: 0 0 @vh-spacing 0;
			padding: @vh-spacing @vw-spacing;
			padding-top: 10rem + @vh-spacing;
			position: relative;
			overflow: hidden;

	        header {
				margin-bottom: @vh-spacing;
				position: relative;
				z-index: 99;

	            h1 {
	                color: @color-blue;
	            }
				h2 {
					width: 45vw;
				}
				.button {
					margin-top: 1em;
				}
	        }

			figure {
				position: absolute;
				right: -15%;
				top:0; bottom: 0;
				z-index: 9;

				img {
					height: 55rem;
					width: auto;
				}
			}
	    }

	    &.events {
			margin-bottom: @vh-spacing;

	        header h1 {
				background: transparent url("../img/icon-calendar.svg") left center no-repeat;
				background-size: 3em;
				padding: 1.3rem 3.5em;
				margin-bottom: 1em;
				line-height: 1.2em;
				color: @color-orange;
	        }

			nav.prev-next {
				margin-top: 2rem;
			}
	    }

	    &.co-create {
	        background: @color-blue url("../img/bkg-co-create.png") right center no-repeat;
			background-size: 70%;
	        color: white;
			padding: @vh-spacing @vw-spacing;

			.col {
				.flex-display();
				.flex-flow(column nowrap);
			}

	        h1,
	        h2 {
	            color: @color-yellow-light;
	            margin: 0; padding: 0;
	        }

	        h1 {
	            padding-bottom: 0.5em;
	        }

	        h2, p {
	            font-size: 3rem;
	        }

	        p {
	            margin: 0;

				a {
					color: inherit;
				}
	        }

	        figure {
	            margin: 0;

				&.logo-ecoethic {
					margin: 1em 0 2em 0;

					img {
						width: 40%;
					}
				}
				&.icon-donate {
					margin: 0.5em 0;
					.align-self(center);
					img {
						width: 14rem;
					}
				}
	        }

			span {
				background-color: @color-yellow-light;
				padding: 0.4em 1em 0.8em 1em;
				margin-bottom: 1em;
				.align-self(center);
			}
			.button {
				color: #000;
				border-bottom-color: #000;
			}
	    }

	    &.testimonials {
	        background-color: @color-green;
			padding: @vw-spacing;
			margin-top: -3rem;

	        blockquote {
	            margin: 0; padding: 0;
	            font-size: 2rem;
	            line-height: 1.3em;
	            // margin-bottom: -40px;

	            .flex-display();
	            .flex-flow(row nowrap);

				.content {
					margin: 0; padding: 0;
	                margin-left: 1.5em;
	                .flex-order(1);
	                position: relative;

					&:before, &:after  {
	                    font-weight: bold;
	                    font-size: 8em;
	                    color: @color-blue;
	                    position: absolute;
	                }
	                &:before {
	                    content: open-quote;
	                    top: -20px;
	                    left: -130px;

	                }
	                &:after {
	                    content: close-quote;
	                    bottom: -100px;
	                    right: 0;
	                }
				}

	            footer {

	                .flex-display();
	                .flex-flow(column wrap);
	                .flex-order(0);

					div.col {
						.flex-order(1);
					}

	                cite {
	                    font-style: normal;
	                    line-height: 1.2em;

	                    &.author {
	                        font-weight: bold;
	                        color: @color-blue;
	                        margin-bottom: 0.5em;

	                    }
	                    &.title {
	                        color: white;

	                    }
	                }

	                figure {
	                    margin: 0;
	                    .icon-size (30vw);
	                    border-radius: 50%;
	                    overflow: hidden;
	                    .flex-order(0);
	                    position: relative;
	                    margin-bottom: 0.7em;

						background: #E5E5E5 url("../img/icon-thumb.svg") center center no-repeat;
						background-size: 3em;

	                    img {
	                        height: inherit;
	                        position: absolute;
	                        left: 50%;
	                        top: 50%;
	                        transform: translate(-50%, -50%);
	                    }

	                }
	            }
	        }

			nav.prev-next {
				margin-top: 1em;

				a {
					color: fade(#fff, 50%);;

					&[rel="prev"] {
						background-image: url("../img/icon-prev-white.svg");
					}
					&[rel="next"] {
						background-image: url("../img/icon-next-white.svg");
					}
				}
			}
	    }
	}

    ul.index {
        list-style-type: none;
        margin: 0; padding: 0;

        li {
            .flex-display();
            .flex-flow(row nowrap);
			background: transparent url("../img/icon-arrow.svg") no-repeat center right;
			background-size: 6rem;

            > a {
				.title-h2;
				color: @color-black;
				text-transform: uppercase;
                text-decoration: none;
                margin-left: 1.5em;
				padding-right: 8rem;

                .flex-order(1);
                .align-self(center);

            }

            > img {
                .icon-size (15rem);
                .flex-order(0);
                .flex( 0 0 13rem );

                // background: red;
            }

			&.green {
				> a {
					color: @color-green;
				}
			}
			&.yellow {
				> a {
					color: @color-yellow;
				}
			}
			&.blue {
				> a {
					color: @color-blue;
				}
			}
        }

		hr:last-of-type {
			display: none;
		}
    }

	aside.cta {
	    padding: 4rem @vw-spacing;

	    h1 {
	        .title-h1;
			margin-bottom: 0.3em;

	        span {
	            text-transform: none;
	            font-weight: lighter;
	            display: block;
	            color: @color-black;
	        }
	    }
		h2 {
			margin-top: 0;
			font-size: 3rem;
			font-weight: normal;
			line-height: 1.3em;
		}

	    a.button {
	        .align-self(flex-start);
	        // margin-bottom: 2rem;
	    }

	    &.eco-website {
			background: transparent url("../img/icon-sustainability.svg") right bottom no-repeat;
			background-size: 60vw;
			height: 70vw;

	        h1 {
	            color: @color-green;
	        }
			h2 {
				width: 45%;
			}

			ul.col {
				display: none;
			}
	    }
	}
}

/*=====================
PAGE
=====================*/

.page {

	header.main-header {
		h1.logo {
			img {
				width: 10rem;
			}
		}
	}

	section {
		padding: 0 @vw-spacing;
	}

	main {

		section.content {
			h2 {
				.title-h2;
				margin-bottom: 0.5em;
			}
			h3, h4 {
				margin-bottom: 0.5em;
			}
			p {
				margin-top: 0;
			}

			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;

				li {
					margin-left: 2.5rem;
                    margin-bottom: 1em;
					position: relative;
				}

				li::before  {
					content: "\2022";
					font-size: 1.5em;
					font-weight: bold;

					position: absolute;
					left: -2.5rem;
				}
			}

		}

		nav.tabs {
			margin: 0 @vw-spacing;
			&.sub {
				margin-top: @vh-spacing;
			}
		}
	}

	h2, h3, h4, h5 {
		font-size: 3.1rem;
	}
}


hr {
	border-color: fade(@color-nav-blue, 30%);
	border-width: 2px;
	margin: 2rem auto;
}



/*=====================
TEMPLATE LIST EVENTS
=====================*/

section.events {
	padding: 0;

    > div.search-results-header {
        color: @color-orange;
        border-color: @color-orange;
    }

	.event {

		> h1,
		> h2 {
			margin: 0;
			margin-bottom: 0.5em;
			font-size: 3rem;
			color: @color-black;

			a {
				text-decoration: none;
			}
		}

		.row {
			.flex-display();
			.flex-flow(row nowrap);

			position: relative;
			font-size: 2rem;
			line-height: normal;

			> .col {
				.flex(0 0 50%);
			}

		}

		time {
			position: absolute;
			background-color: fade(#000, 60%);
			color: #fff;
			text-align: center;
			text-transform: uppercase;
			padding: 0.3em 0.6em 0.5em 0.6em;
			font-size: 0.8em;
			line-height: 1.4em;

			span {
				display: block;
				font-size: 1.5em;
			}

		}
		.img {
			background: #E5E5E5 url("../img/icon-thumb.svg") center center no-repeat;
			background-size: 3em;
			width: 25rem;
			// 16:9 proportion
			//height: calc(46vw * 0.5625);
			//height: 56.25%;
			//height: 100%;
			height: calc(25rem * 0.5625);
			overflow: hidden;

			img {
				width: 100%;
				height: auto;
			}
		}

		address {
			background: transparent url("../img/icon-place.svg") left top no-repeat;
			background-size: 1.3em;
			padding-left: 1.5em;
			line-height: 1.3em;
			margin-bottom: 0.5em;
			font-style: normal;
		}
		p {
			margin: 0;
			padding-bottom: 1em;
		}

		footer {
			.flex-display();
			.flex-flow(row nowrap);
			margin: 1rem 0;
		}

		.button {
			color: @color-orange;
			border-bottom-color: @color-orange;
		}

	}

	hr {
		margin: 4rem 0 3rem 0;
		&:last-of-type {
			display: none;
		}
	}
}

/*=====================
TEMPLATE LIST PRESS
=====================*/
section.press {
	padding: 0;

    > div.search-results-header {
        color: @color-green-dark;
        border-color: @color-green-dark;
    }

	article {
		h2 {
			font-size: inherit;
			margin-bottom: auto;
		}
		time {
			font-size: 2rem;
		}
	}

	hr {
		margin: 2rem auto;
	}
}


/*=======================
TEMPLATE LIST PUBLICATIONS
========================*/
section.publications {
	padding: 0;

    > div.search-results-header {
        color: @color-blue-dark;
        border-color: @color-blue-dark;
    }

	article {
		margin-bottom: 3rem;

		h2 {
			font-size: inherit;
			color: inherit;
			margin-bottom: 0.5em;
		}

		.row {
			.flex-display();
			.flex-flow(row nowrap);

			.col {
				.flex(1 1 30%);

				&.content {
					.flex(1 1 70%);
				}
			}
		}

		figure {
			//background: #E5E5E5 url("../img/icon-thumb.svg") center center no-repeat;
			background: url("../img/icon-thumb.svg") center center no-repeat;
			background-size: 3em;

			height: 21.3rem; //A4 proportion
			margin: 0;
			margin-right: 0.5em;
			overflow: hidden;

			img {
				height: 100%;
				width: auto;
			}
		}

		.content {
			font-size: 2rem;
			line-height: normal;

			time {
				font-weight: bold;
				display: block;
				margin: -0.5em 0 1em 0;
			}

			.button {
				font-size: 2rem;
				color: @color-blue-dark;
				border-color: @color-blue-dark;
			}
		}
	}

	hr {
		margin: 2rem auto;
	}
}


nav.pagination {
	text-align: right;
	margin: 1em 0;
	.button {
		color: @color-nav-blue;
		border-color: @color-nav-blue;
		&.show-all {
			background-image: url("../img/icon+_nav-blue.svg");
			&.active {
				background-image: url("../img/icon-_nav-blue.svg");
			}

			> span {
				letter-spacing: 0.06em;
			}
		}
	}
}



/*=====================
PAGE ABOUT-US
=====================*/

body.page-about-us {
	main {
		section.content {
			.inecc-box,
			.our-history  {
				p {
					&:first-of-type {
						margin-bottom: 0;
					}
				}
			}
		}
	}
}

.team {
	margin-bottom: 4rem;

	h2, h3, h4, h5, h6 {
		padding: 0;
		margin: 0;
	}

	> div:first-of-type {
		> h2, > h3, > h4, > h5 {
			padding-bottom: 0.7em;
		}
	}

	.team-member {
		.flex-display();
		.flex-flow(row nowrap);
		.align-items(center);

		margin-bottom: 3rem;

		h6 {
			font-size: 2.7rem;
			font-weight: normal;
		}

		p {
			margin: 0;
			font-size: 2rem;
			line-height: normal;
		}

	}

	&.executive-committee {
		.team-member {

			figure {
				border-radius: 50%;
				overflow: hidden;
				width: 35%;
			}

			.wp-block-media-text__content {
				padding: 0;
				padding-left: @vw-spacing;
				width: 65%;
			}
		}
	}
}

.our-history-phases {
	position: relative;
	margin-bottom: @vh-spacing;

	h2, h3, h4, h5, h6 {
		padding: 0;
		margin: 0;
	}

	.phase {
		padding: @vw-spacing;

		.header {
			text-align: center;
			text-transform: uppercase;
			font-size: 4rem;
		}

		.date {
			font-weight: bold;
			text-align: center;
			border-bottom: @color-nav-blue 1px solid;
			padding-bottom: 0.5em;
		}

		h4 {
			font-size: 3rem;
			line-height: 1em;
			margin-bottom: 0.5em;
		}

		ul {
			li::before  {
				color: @color-yellow;
			}
		}

		&.hide {
			.hide;
		}
	}

	.prev-next {
		a {
			width: 1em; height: 5rem;
			overflow: hidden;
			font-size: 0;
			display: block;
			position: absolute;
			top: 4rem;

			&[rel="prev"] {
				background-image: url("../img/icon-prev.svg");
				background-position: center center;
				left: 2rem;
			}
			&[rel="next"] {
				background-image: url("../img/icon-next.svg");
				background-position: center center;
				right: 2rem;
			}
		}
	}
}

/*=====================
PAGE OUR-WORK
=====================*/

div.search-results-header {
    color: #000;
    border: 1px solid #000;
    padding: 0.5em;
    margin-bottom: 1em;
}

body.page-template-page-our-work,
body.page-template-page-our-work-search {

	section.content {

		&.subpage {
			//Look like a tab
			border-top-style: solid;
			border-bottom-style: solid;
			border-top-width: 0.7rem;
			border-bottom-width: 0.7rem;
			padding: 2rem;
			margin: 0 @vw-spacing;

			header {
				.flex-display();
			    .flex-flow(row nowrap);
				.align-items(center);
				margin: 0 0 4rem 0;

				h1, h2 {
					.title-h2;
					line-height: 1.1em;
					.flex-order(1);
				}

				img.icon {
					width: auto;
					height: 5em;
					.flex-order(0);
					margin-right: 4rem;
				}
			}

			> h1, > h2, > h3 {
                text-transform: uppercase;
            }

            article > h2 {
                text-transform: none;
            }
		}
	}

	aside.content.parent {
		//Make it look like main content
		padding: 0 @vw-spacing;

		header {
			background-color: @color-green;
			padding: 4rem @vw-spacing 0rem @vw-spacing;
			margin: 0 -@vw-spacing 0 -@vw-spacing;
			.flex-display();

			position: relative;
	
			&:before {
				content: "";
				background-color: @color-green;
				position: absolute;
				width: 100vw;
				height: 100%;
				left: calc(50% - 50vw);
				top: 0;
				z-index: 0;
			}

			h3 {
				.title-h1;
				color: white;
				margin-bottom: -0.08em;
				position: relative;
				z-index: 1;
			}
		}
	}

    //SEARCH + FILTER
	aside.search-filter {
		background-color: @color-nav-blue-light;
        margin: (@vh-spacing) -(@vw-spacing+2rem) -2rem;
        position: relative;
        overflow: hidden;

        .tabs {

            .btn-container {
                background-color: @color-nav-blue;
                width: 50%;

                .button {
                    color: @color-green;
                    border-color: @color-green;
                    margin: 1.2em;
                }

                &:first-of-type {
                    float: right;
                }
            }
        }

        button.button.close {
            position: absolute;
            top: 10rem;
            right: 7rem;
            z-index: 999;
            border: 0;

            &:after {
                content: url("../img/icon-cross-blue.svg");
                position: absolute;
                zoom: 5;
            }
        }

		section.search, section.filter {
            display: none;
			padding: 3rem @vw-spacing;
			background-color: @color-nav-blue-light;
            position: relative;

			h2 {
				color: @color-green;
				padding-bottom: 3rem;
				text-align: center;
				border-bottom: 2px solid rgba(@color-nav-blue, .4);
			}

			form {

                fieldset {
                    //reset
                    margin: 0; padding: 0;
                    border: 0;

                    margin-bottom: 1em;

                    .flex-display();
    			    .flex-flow(row wrap);

                    legend {
                        margin-bottom: 2rem;
                        font-weight: bold;

                        em {
                            display: block;
                            font-weight: normal;
                            font-style: normal;
                            font-size: 0.9em;
                        }
                    }

                    label {
                        flex: 1 1 50%;
                        font-weight: normal;
                        margin-bottom: 0.5em;

                        .flex-display();
        			    .flex-flow(nowrap);
                        .align-items(baseline);

                        input {
                            margin-right: 0.7em;

                            &[type=radio] {
                                transform: scale(2);
                            }
                        }
                    }

                    &.filter-by-location {
                        label {
                            display: none;
                        }
                    }
                }
			}

            &.active {
                display: block;
            }
		}

        section.search {

            form {

                input[type=text] {
                    width: 100%;
                    line-height: 2em;
                    margin: 1rem 0 2rem;
                    padding: 0 0.5rem;
                }
            }

            .btn-container.tab {
                left: auto; right: 0;
            }
        }

        section.filter {

            form {

                select {
                    display: block;
                    padding: .5em;
        			width: 100%; max-width: 100%;
                    line-height: 1.3;
                    box-sizing: border-box;
                    margin: 0;

                    option {
                        
                    }
        		}
            }
        }

		// #filter:target, #search:target {
        //     display: block;
		// }
	}
}

body.page-template-page-our-work.page-child,
body.page-template-page-our-work-search {

	//Change order of sections for SEO reasons
	.flex-display();
	.flex-flow(column wrap);

	main {
		.flex-order(1);
	}
	aside.content {
		.flex-order(0);
	}
	aside.search-filter {
		.flex-order(2);
	}
	footer {
		.flex-order(3);
	}
}

body.page-template-page-our-work-search {

	section.content {

		&.subpage {
            border-bottom: 0;

			header {
				margin-bottom: 1em;

				h1, h2 {
					// padding-right: 10em;
					max-width: 5em;
				}

				img.icon {
					height: 3em;
					margin-right: 3rem;
				}
			}

			.event {
				.img {
					margin-left: -2rem;
				}
				time {
					left: -2rem;
				}
			}
		}
	}
}

/*=====================
PAGE CONTACT US
=====================*/

body.page-contact-us {
	section.content {
        .people-at-inecc > div > div {
            margin-bottom: 4rem;

            h3 {
    			margin-bottom: 0;
                padding-bottom: 0;
    		}
        }
	}
}


/*=====================
PAGE ECOETHIC
=====================*/

.newsletter-archive {
	.display_archive {
		margin-top: 0.5em;
		.campaign {
			padding: 1em 0;
			border-bottom: @color-nav-blue 1px solid;
			font-weight: bold;
			> a {
				font-weight: normal;
			}
		}
	}
}

/*=====================
PAGE DONATE
=====================*/

body.page-donate {
	section.content {

		.cover.donate {
			margin: -4rem -@vw-spacing 4rem -@vw-spacing;
			width: auto;

			h2 {
				text-transform: uppercase;
				padding: 0 2.5em;
				margin-bottom: 0;
			}
			p {
				margin-bottom: 0.5em;
			}
			figure {
				margin: 0 auto -2rem;
			}
		}

		.faq {
			color: @color-nav-blue;

            h2:first-of-type {
                padding: 2rem 0;
            }
		}
	}
}

.inecc-dropdown {
	h1, h2, h3 {
		.title-h2;
		padding: 1em 0;
	}
	h2:first-of-type { //Dropdown header
		margin-top: -1em;
		border-bottom: @color-nav-blue 1px solid;
	}

	.block {
		border-bottom: @color-nav-blue 1px solid;

		h3:first-of-type { //Block header
			background: transparent url("../img/icon+_nav-blue-light.svg") right center no-repeat;
			background-size: 5rem;
			padding-right: 6rem;
			cursor: pointer;
		}

		.content {
			visibility: hidden;
			height: 0;
			overflow: hidden;
			margin: 0;

			figure {
				margin: 0;
			}
		}

		&.active {
			h3:first-of-type { //Block header
				background-image: url("../img/icon-_nav-blue-light.svg");
			}

			.content {
				visibility: visible;
				height: auto;
			}
		}

	}
}


/*=====================
MENU (PAGE)
=====================*/

body.page-menu {
	background-color: @color-green;

	nav.menu {
		padding: 0 @vw-spacing;

		> ul > li {
			padding-bottom: 0.5em;
		}

		ul {
			list-style-type: none;
			padding-left: 0;

			li {
				margin-bottom: 0.2em;
				&:first-child {
					margin-top: 1rem;

				}

				a {
					text-decoration: none;
					text-transform: uppercase;
					font-weight: bold;
					font-size: 3.5rem;
					color: white;

					&:hover {
						text-decoration: underline;
					}
				}

				ul {
					padding-left: 1em;

					li {
						border: 0;

						a {
							text-transform: none;
						}
					}
				}

				&.menu-item-has-children {

					ul li a {
						font-size: 3rem;
					}
				}
			}
		}
	}

	.social-links {
		margin-top: -5rem;

        a {
			&[title="Facebook"] {
				background-image: url("../img/icon-fb-white.svg");
			}
			&[title="Google Groups"] {
				background-image: url("../img/icon-messenger-white.svg");
			}
			&[title="Instagram"] {
				background-image: url("../img/icon-instagram-white.svg");
			}
			&[title="Twitter"] {
				background-image: url("../img/icon-twitter-white.svg");
			}
			&[title="Email"] {
				background-image: url("../img/icon-email-white.svg");
			}
			&[title="Map"] {
				background-image: url("../img/icon-pin-white.svg");
			}
			&[title="Phone"] {
				background-image: url("../img/icon-phone-white.svg");
			}
        }
    }
}


//PAGE SITEMAP
body.page-sitemap {
	section.content {

        nav.sitemap-nav {

            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;

                li {
					margin-left: 0rem;
                    margin-bottom: 0.2em;
                    &:before {
                        display:none;
                    }
                    &:first-child {
                        margin-top: 0.5em;
                    }

                    a {
                        text-decoration: none;
                        text-transform: uppercase;
                        font-weight: 600;
                        letter-spacing: 0.04em;
                        //font-size: 1.3rem;
                        line-height: 1.3em;
                        color: @color-black;

                        &:hover {
                            text-decoration: none;
                            color: @color-black;
                        }
                    }

                    ul {
                        //padding-left: 1em;

                        li {
                            border: 0;

                            a {
                                text-transform: none;
                            }
                        }
                    }

                    &.menu-item-has-children {
                        ul.sub-menu {
                            margin-bottom: 1em;
                            li {
								margin-left: 2rem;
                                a {
                                    font-weight: 400;
                                }
                            }
                        }
                    }

                    &.menu-item-670 { //Donate link
                        > a {
                            background: transparent url("../img/icon-donate-black.svg") no-repeat right center;
                            background-size: contain;
                            padding-right: 1.5em;
                        }
                   }
                }
            }
        }

    }
}

// SIDEBAR
aside.sidebar {
    display: none;
}
