:root{
	--color-1: #095f20;
	--color-2: #e60065;
	--color-3: #282250;
	--color-3-overlay: #ffffff;
	--color-4: #40a537;
	--color-4-overlay: #ffffff;
	--color-text: #3d3d3b;
	--color-background: #f7f7f4;
	--color-green: var(--color-1);
	--color-red: var(--color-2);
	--color-amber: var(--color-2);
}

/****/

@font-face{
font-family: "Body"; font-style: normal; font-weight: 400;
src: url("../_lib/_media/fonts/roboto-regular.woff2") format("woff2");
}

@font-face{
font-family: "Body"; font-style: normal; font-weight: 700;
src: url("../_lib/_media/fonts/roboto-medium.woff2") format("woff2");
}

@font-face{
font-family: "Header"; font-style: normal; font-weight: 700;
src: url("../_lib/_media/fonts/roboto-regular.woff2") format("woff2");
}

/****/

header h1 svg, header h1 img{
	min-width: 70px;
	max-width: 70px;
}

/****/

#footerWrap{
	padding-left: 0;
	padding-right: 0;
    background: #ffffff;
}

footer .copyright{
	font-weight: 700;
}

/****/

.navMenu li a{
	text-transform: uppercase;
	color: var(--color-text);
	border: 3px solid transparent;
}

.navMenu li a.current, .navMenu li a:hover, .navMenu li a:focus{
	border-bottom-color: var(--color-2);
}

.navToggle{
	color: var(--color-text);
}

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

	.navMenu li a.current, .navMenu li a:hover, .navMenu li a:focus{
		border-bottom-color: transparent;
		background: var(--color-2);
		color: var(--color-2-overlay);
	}

}

/****/

.adminModule{
    background: #ffffff;
    border-color: transparent;
}

.adminModule h1{
	color: var(--color-1);
	text-transform: uppercase;
}

.adminModule h2{
	font-size: 1.2em;
	text-transform: uppercase;
}

.adminModule .showcaseHeader{
    margin: -1.5em -1.5em 0 -1.5em;
    padding: 0;
    background: var(--color-1);
    text-align: center;
}

.adminModule .showcaseHeader h1{
    color: #ffffff;
    padding: 1em;
    margin: 0;
}

.adminModule p{
    margin: 2em auto;
}

.adminModule p.introduction{
    font-size: 1.2em;
    font-weight: 700;
    margin-top: 2em;
}

/****/

.betterWorldLogo{
	max-width: 150px;
	margin: 2em auto 0 auto;
}

.target{
	margin: 2em auto;
	padding: 1.5em;
	border-radius: 20px;
	background: var(--color-4);
	color: var(--color-4-overlay);
}

.commitments{
	margin: 1em;
}

.commitment{
	margin: 1em 0;
	padding: 2em;
	background: var(--color-background);
}

.commitment .title{
	color: var(--color-4);
	margin-bottom: 0.5em;
	font-family: "Header", sans-serif;
	font-size: 1.3em;
}

.commitment.sustainable .title{
	color: var(--color-3);
}

.subcommitment{
	display: flex;
	align-items: center;
	margin: 0 auto;
}

.subcommitment .image{
	padding: 30px;
	background: var(--color-4);
	color: var(--color-4-overlay);
	border-radius: 100px;
	margin-right: -80px;
	margin-top: 20px;
	z-index: 1;
}

.sustainable .subcommitment .image{
	background: var(--color-3);
	color: var(--color-3-overlay);
}

.subcommitment .detail{
	margin: 0 auto;
	padding: 2em;
	border-radius: 10px;
}

.subcommitment .title{
	font-size: 1em;
	margin-left: 40px;
	margin-bottom: 10px;
}

.subcommitment .description{
	margin: 0.5em 0;
	padding: 1.5em 4em;
	border-radius: 20px;
	background: var(--color-4);
	color: var(--color-4-overlay);
}

.sustainable .subcommitment .description{
	background: var(--color-3);
}

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

	.subcommitment description{
		padding: 1.5em 1em;
	}

	.subcommitment .title{
		margin-left: 0;
	}

	.subcommitment .image{
		display: none;
	}

}

/****/

.maturityTopic{
    padding-bottom: 0;
}

.maturityTopic .showcaseHeader .percentage{
    color: #ffffff;
    padding-bottom: 1em;
    margin: 0;
    font-weight: 700;
    font-size: 0.8em;
}

.maturityTopic .showcaseHeader .resultGraph .barWrap{
	margin: 0.5em auto 0 auto;
    width: 300px;
    height: 0.5em;
    border: 1px solid #ffffff;
}

.maturityTopic .showcaseHeader .resultGraph .bar{
	background: #ffffff;
    height: 100%;
    overflow: hidden;
}

.maturityTopic .showcaseHeader svg{
    width: auto;
    height: 3em;
    position: absolute;
    left: 2em;
    top: 0.4em;
}

.maturityTopic.completeness .showcaseHeader svg{
    height: 4em;
}

.maturityTopic .showcaseHeader.displayToggle:after{
    font-family: "FontAwesome";
  	font-weight: 400;
    content: "\f067";
    position: absolute;
    top: 2.2em;
    right: 2em;
    color: #ffffff;
}

.maturityTopic .showcaseHeader.displayToggle.expanded:after{
    content: "\f068";
}

.maturityLevels{
	padding-bottom: 1.5em;
}

.resourceTypeName{
	text-align: center;
}

.maturityLevelName{
	text-transform: uppercase;
	background: var(--color-4);
	color: #ffffff;
	padding: 0.5em;
	border-radius: 3px;
	display: inline-block;
}

.maturityLevelName:after{
    font-family: "FontAwesome";
  	font-weight: 400;
    content: "\f054";
    margin-left: 0.5em;
}

.maturityTopic .maturityIndicator{
	margin: 1.5em 0;
	padding: 1.5em 0;
	text-align: left;
	align-items: center;
	border-bottom: 1px solid var(--color-text);
}

.maturityTopic .maturityIndicatorContent{
	margin: 1.5em;
}

.maturityTopic .maturityIndicator .name{
	font-weight: 700;
    margin: 1em 0;
    font-size: 1.2em;
}

.maturityTopic .maturityIndicatorCompletedToggle{
	font-size: 2em;
}

.maturityTopic .maturityIndicator:hover a .maturityIndicatorCompletedToggle i{
	color: #ffffff;
}

.maturityTopic .maturityIndicatorCompletedToggle button{
	padding: 0.15em 0.3em;
}

.maturityTopic .maturityIndicatorCompletedToggle .tickCross{
	font-size: 0.8em;
	padding: 0.15em 0.3em;
}

.maturityTopic .resource{
	margin: 0.2em auto;
	padding: 1em;
	background: var(--color-4);
	color: var(--color-4-overlay);
	text-align: left;
	display: flex;
	align-items: center;
	max-width: 500px;
	position: relative;
	border-radius: 3px;
}

.maturityTopic .resource:hover{
	background: var(--color-2);
	color: var(--color-2-overlay);
}

.maturityTopic .resource.completed{
	background: var(--color-1);
	color: var(--color-1-overlay);
}

.maturityTopic .resource:hover:after{
    font-family: "FontAwesome";
    font-weight: 400;
    content: "\f08e";
    font-size: 1rem;
	color: var(--color-2-overlay);
    position: absolute;
    top: 10px;
    right: 10px;
}

.maturityTopic .resource .name .location{
	margin-left: 0.5em;
}

.maturityTopic .resource .name .source{
	margin-top: 0.5em;
}

.maturityTopic .resource a{
	color: #ffffff;
}

.maturityTopic .resource{
	flex: 5;
}