.funnel-background {
	position: relative;
	background-image: url('funnel.png');
	background-position: left top;
	background-repeat: no-repeat;
	font-family: 'Lato', sans-serif;
	height: 600px;
}

.funnel, #awareness {height: 600px;}

/**headings**/

h2.stage {
	position: absolute;
	top: 6px;
	font-weight: 900;
}
#main-content h2.stage a {color: #414042; text-decoration: none;}
#main-content h2.stage a:hover {text-decoration: underline;}
#awareness h2.stage {left: 80px;}
#development h2.stage {left: 420px;}
#implementation h2.stage {left: 740px;}

/**providers**/

.provider {
	position: absolute;
	top: 48px;
	color: white;
	background-color: #502D7C;
	font-size: 1.1rem;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 4px;
}
#main-content p.provider a {color: white; text-decoration: none;}
#main-content p.provider a:hover {text-decoration: underline;}
#awareness p.provider {left: 11px;}
#development p.provider {left: 480px;}
#implementation p.provider {left: 746px;}

/** things in circles **/

.editor-link {
	position: absolute;
	top: 88px;
	left: 322px;
	background-color: lightGrey;
	padding: 2px 4px;
	border-radius: 2px;
}

.circle {
	position: relative;
	border-radius: 50%;
	height: 140px;
	width: 140px;
	color: white;
	text-align: center;
	font-size: 1.1rem;
}

#main-content .circle dt {
	position: absolute;
	bottom: 70px;
	width: 140px;
	font-weight: 900;
}

#main-content .circle dd {
	position: absolute;
	top: 70px;
	width: 140px;
	margin: 0;
}

#main-content .circle a {color: white; text-decoration: none;}
#main-content .circle a:hover {text-decoration: underline;}

dt.circle {font-family: 'Lato', sans-serif; font-weight: 900;}
dl.provision dd {position: absolute; color: white; font-size: 1rem;}

.provision-1 {top: 110px; left: 32px; background-color: #75A541;}
.provision-2 {top: 2px; left: 182px; background-color: #30A35F;}
.provision-3 {top: -82px; left: 312px; background-color: #02B8A0;}
.provision-4 {top: -192px; left: 18px; background-color: #00676E;}
.provision-5 {top: -300px; left: 160px; background-color: #3893A2;}
.provision-6 {top: -450px; left: 410px; background-color: #1E7762;}

/** popups **/

.circle-container {
	position: relative;
	width: 350px;
	height: 350px;
}

.provision-1 .circle-container {top: 40px; left: 40px;}
.provision-2 .circle-container {top: -16px; left: -110px;}
.provision-3 .circle-container {top: -97px; left: -240px;}
.provision-4 .circle-container {top: -152px; left: 54px;}
.provision-5 .circle-container {top: -208px; left: -88px;}
.provision-6 .circle-container {top: -223px; left: -338px;}

.circle-background {
	border-radius: 50%;
	background-color: inherit;
	opacity: 0.9;
	height: 350px;
	width: 350px;
	z-index: 9;
	position: absolute;
	border: 4px solid white;
	top: -4px;
	left: -4px;
}

.provision-more {
	height: 250px;
	width: 250px;
	z-index: 10;
	position: absolute;
	vertical-align: middle;
	text-align: center;
	color: black;
	font-size: 0.9rem;
	top: 50px;
	left: 50px;
}

#main-content .provision-more h6 {color: black; font-size: 1.4rem;}
#main-content .provision-more p {margin-bottom: 0;}
#main-content .provision-more a {color: black; text-decoration: underline;}
#main-content .provision-more a:hover {color: #3588bc;}

#main-content .provision-4 .provision-more {color: white;}
#main-content .provision-4 .provision-more h6 {color: white;}
#main-content .provision-4 .provision-more p {color: white;}
#main-content .provision-4 .provision-more a {color: white;}
#main-content .provision-4 .provision-more a:hover {color: lightGrey;}

#main-content .provision-6 .provision-more {color: white;}
#main-content .provision-6 .provision-more h6 {color: white;}
#main-content .provision-6 .provision-more p {color: white;}
#main-content .provision-6 .provision-more a {color: white;}
#main-content .provision-6 .provision-more a:hover {color: lightGrey;}

.mceContentBody .provision-more {display: none;}

.close-circle {
	position: absolute;
	right: 54px;
	top: 23px;
	background-image: url('close.png');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 18px;
	height: 17px;
	border-radius: 50%;
	border-width: 4px;
	border-style: solid;
	z-index: 11;
	cursor: pointer;
}

.network {
	height: 84px;
	width: 108px;
	padding: 36px 6px 0;
	top: -328px;
	left: 650px;
	background-color: #2D998C;
}

/** things in boxes **/

#main-content .funnel ul {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style: none;
}

.funnel ul li {
	position: absolute;
	border-width: 2px;
	border-style: solid;
	border-radius: 4px;
	padding: 4px;
	text-align: center;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -1px;
}

#development ul {top: 110px; left: 416px;}
#development ul li {width: 10em; border-color: #3D3C56;}
li#pg {top: 38px; left: 76px;}
li#ug {top: 114px; left: 88px;}

#implementation ul {top: 92px; left: 700px;}
#implementation ul li {border-color: #C11F45;}
li#ip {top: 50px; left: 72px; width: 10em;}
li#funds {top: 98px; left: 60px; width: 10em;}
li#licencing {top: 148px; left: 72px; width: 5em;}
li#spin {top: 194px; left: 88px; width: 8em;}
li#angel {top: 246px; left: 92px; width: 9em;}
li#venture {top: 294px; left: 66px; width: 10em;}

#development ul a, #implementation ul a {color: black; text-decoration: none;}
#development ul a:hover, #implementation ul a:hover {color: black; text-decoration: underline;}

/** stuff at the bottom **/

.arrows {
	display: none;
}

p.exit {
	position: absolute;
	bottom: 10px;
	left: 355px;
	z-index: 1;
	font-weight: 700;
	font-size: 1rem;
}

h2.stage, dl.provision dt {font-family: 'Lato', sans-serif; font-weight: 900;}