#toolMain #choices label span.info,
#jobsList .jobInnerWrap>span {
	display: inline-block;
	height: 16px;
	width: 16px;
	background-size: cover;
	margin-left: 2px;
	position: relative;
	top: 2px;
	position: relative
}

#toolMain #choices label span.info+span,
#jobsList .jobInnerWrap>span+span {
	position: absolute;
	bottom: -10px;
	left: 20px;
	width: 250px;
	display: none;
	padding: 10px;
	color: #17837c;
	font-size: 0.85em;
	font-family: "Flama";
	line-height: 1.3;
	background: #e1f4ef;
	border: 1px solid #fff;
	z-index: 2;
	pointer-events: none
}

#toolMain>span,
#jobsList>div>span {
	position: absolute;
	white-space: nowrap;
	color: #151b1e;
	font-size: 0.9em;
	transform: translate(-50%, 100%);
	z-index: 999
}

#toolMain .slider {
	background-color: white;
	display: inline-block;
	margin: 5px 0 0;
	vertical-align: top;
	position: relative
}

#toolMain .slider.slider-horizontal {
	width: 100%;
	height: 20px
}

@media (min-width: 768px) {
	#toolMain .slider.slider-horizontal {
		width: 60%
	}
}

#toolMain .slider.slider-horizontal .slider-track {
	height: 10px;
	width: 100%;
	margin-top: -15px;
	top: 50%;
	left: 0
}

#toolMain .slider.slider-horizontal .slider-selection,
#toolMain .slider.slider-horizontal .slider-track-low,
#toolMain .slider.slider-horizontal .slider-track-high {
	height: 100%;
	top: 0;
	bottom: 0
}

#toolMain .slider.slider-horizontal .slider-tick,
#toolMain .slider.slider-horizontal .slider-handle {
	margin-left: -10px
}

#toolMain .slider.slider-horizontal .slider-tick.triangle,
#toolMain .slider.slider-horizontal .slider-handle.triangle {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	border-width: 0 10px 10px 10px;
	width: 0;
	height: 0;
	border-bottom-color: #0480be;
	margin-top: 0
}

#toolMain .slider.slider-horizontal .slider-tick-container {
	white-space: nowrap;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%
}

#toolMain .slider.slider-horizontal .slider-tick-label-container {
	white-space: nowrap
}

#toolMain .slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
	margin-top: 24px;
	display: inline-block;
	text-align: center
}

#toolMain .slider.slider-vertical {
	height: 210px;
	width: 20px
}

#toolMain .slider.slider-vertical .slider-track {
	width: 10px;
	height: 100%;
	margin-left: -5px;
	left: 25%;
	top: 0
}

#toolMain .slider.slider-vertical .slider-selection {
	width: 100%;
	left: 0;
	top: 0;
	bottom: 0
}

#toolMain .slider.slider-vertical .slider-track-low,
#toolMain .slider.slider-vertical .slider-track-high {
	width: 100%;
	left: 0;
	right: 0
}

#toolMain .slider.slider-vertical .slider-tick,
#toolMain .slider.slider-vertical .slider-handle {
	margin-top: -10px
}

#toolMain .slider.slider-vertical .slider-tick.triangle,
#toolMain .slider.slider-vertical .slider-handle.triangle {
	border-width: 10px 0 10px 10px;
	width: 1px;
	height: 1px;
	border-left-color: #0480be;
	margin-left: 0
}

#toolMain .slider.slider-vertical .slider-tick .slider-tick-label-container,
#toolMain .slider.slider-vertical .slider-handle .slider-tick-label-container {
	white-space: nowrap
}

#toolMain .slider.slider-vertical .slider-tick .slider-tick-label-container .slider-tick-label,
#toolMain .slider.slider-vertical .slider-handle .slider-tick-label-container .slider-tick-label {
	padding-left: 4px
}

#toolMain .slider.slider-disabled .slider-handle {
	background-color: #f7f7f7;
	background-image: -moz-linear-gradient(top, #dfdfdf, #bebebe);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dfdfdf), to(#bebebe));
	background-image: -webkit-linear-gradient(top, #dfdfdf, #bebebe);
	background-image: -o-linear-gradient(top, #dfdfdf, #bebebe);
	background-image: linear-gradient(to bottom, #dfdfdf, #bebebe);
	background-repeat: repeat-x
}

#toolMain .slider.slider-disabled .slider-track {
	background-color: #f7f7f7;
	background-image: -moz-linear-gradient(top, #e5e5e5, #e9e9e9);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e5e5), to(#e9e9e9));
	background-image: -webkit-linear-gradient(top, #e5e5e5, #e9e9e9);
	background-image: -o-linear-gradient(top, #e5e5e5, #e9e9e9);
	background-image: linear-gradient(to bottom, #e5e5e5, #e9e9e9);
	background-repeat: repeat-x;
	cursor: not-allowed
}

#toolMain .slider input {
	display: none
}

#toolMain .slider .tooltip-inner {
	white-space: nowrap;
	max-width: none
}

#toolMain .slider .tooltip {
	position: absolute;
	z-index: 1070;
	display: block;
	font-size: 12px;
	line-height: 1.4;
	background: #333;
	border-radius: 3px;
	padding: 7px 12px;
	color: #fff;
	visibility: visible;
	opacity: 0
}

#toolMain .slider .tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: #333
}

#toolMain .slider .tooltip.in {
	opacity: 1
}

#toolMain .slider .tooltip.top {
	margin-top: -36px
}

#toolMain .slider .tooltip.tooltip-min,
#toolMain .slider .tooltip.tooltip-max {
	display: none
}

#toolMain .slider .hide {
	display: none
}

#toolMain .slider-track {
	position: absolute;
	cursor: pointer;
	background: #e1f3ef;
	border-radius: 999em
}

#toolMain .slider-selection {
	position: absolute;
	background: #c8e7e0;
	border-radius: 999em
}

#toolMain .slider-selection.tick-slider-selection {
	background-color: #f7f7f7;
	background-image: -moz-linear-gradient(top, #89cdef, #81bfde);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#89cdef), to(#81bfde));
	background-image: -webkit-linear-gradient(top, #89cdef, #81bfde);
	background-image: -o-linear-gradient(top, #89cdef, #81bfde);
	background-image: linear-gradient(to bottom, #89cdef, #81bfde);
	background-repeat: repeat-x
}

#toolMain .slider-track-low,
#toolMain .slider-track-high {
	position: absolute;
	background: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: slider_border-radius(999em)
}

#toolMain .slider-handle {
	position: absolute;
	top: 0;
	width: 20px;
	height: 20px;
	background-color: #337ab7;
	background-color: #0e90d2;
	background-image: -moz-linear-gradient(top, #149bdf, #0480be);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
	background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
	background-image: -o-linear-gradient(top, #149bdf, #0480be);
	background-image: linear-gradient(to bottom, #149bdf, #0480be);
	background-repeat: repeat-x;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	border: 0px solid transparent
}

#toolMain .slider-handle.round {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px
}

#toolMain .slider-handle.triangle {
	background: transparent none
}

#toolMain .slider-handle.custom {
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: #4a4a4a;
	box-shadow: none;
	cursor: ew-resize
}

#toolMain .slider-tick {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: #f7f7f7;
	background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5));
	background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5);
	background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5);
	background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
	background-repeat: repeat-x;
	-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	filter: none;
	opacity: 0.8;
	border: 0px solid transparent
}

#toolMain .slider-tick.round {
	border-radius: 50%
}

#toolMain .slider-tick.triangle {
	background: transparent none
}

#toolMain .slider-tick.custom {
	background: transparent none
}

#toolMain .slider-tick.custom::before {
	line-height: 20px;
	font-size: 20px;
	content: '\2605';
	color: #726204
}

#toolMain .slider-tick.in-selection {
	background-color: #f7f7f7;
	background-image: -moz-linear-gradient(top, #89cdef, #81bfde);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#89cdef), to(#81bfde));
	background-image: -webkit-linear-gradient(top, #89cdef, #81bfde);
	background-image: -o-linear-gradient(top, #89cdef, #81bfde);
	background-image: linear-gradient(to bottom, #89cdef, #81bfde);
	background-repeat: repeat-x;
	opacity: 1
}

#mainWrap {
	background: #fff;
	font-family: "Flama", arial, helvetica, sans-serif;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased
}

#topWrap {
	min-height: calc(100vh - 46.5px)
}

#mastHead {
	background: #17837c;
	padding: 1.2em 0;
	font-family: "Klavika";
	font-weight: 600
}

@media (min-width: 768px) {
	#mastHead {
		padding: 2.2em 0
	}
}

#mastHead h1 {
	margin: 0 0 0.3em;
	font-size: 2.3em;
	line-height: 1;
	font-family: "Klavika";
	font-weight: 600;
}

#mastHead h1+span {
	font-size: 1em
}

@media (min-width: 768px) {
	#mastHead h1 {
		margin: 0;
		font-size: 3.3em;
		line-height: 1
	}

	#mastHead h1+span {
		font-size: 1.275em
	}
}

#mastHead h1,
#mastHead h1+span {
	color: #fff
}

#underHead {
	background: #e1f4ef;
	padding: 1.4em 0
}

@media (min-width: 768px) {
	#underHead p:not(.msg) {
		float: left;
		width: calc(50% - 16px);
		padding: 0
	}

	#underHead p:not(.msg):first-child {
		margin-right: 32px
	}
}

@media (min-width: 1024px) {
	#underHead p:not(.msg) {
		width: calc(50% - 24px)
	}

	#underHead p:not(.msg):first-child {
		margin-right: 48px
	}
}

#underHead p {
	padding: 0 0 1em;
	line-height: 1.53
}

#toolMain {
	overflow: hidden
}

#toolMain h3 {
	margin: 1.4em 0 1em;
	font-family: "Klavika";
	font-weight: 600;
	font-size: 0.9em
}

@media (min-width: 768px) {
	#toolMain h3 {
		font-size: 1.35em
	}
}

@media (min-width: 768px) {

	#toolMain #choices,
	#toolMain .diagram {
		float: left;
		width: calc(50% - 16px)
	}
}

#toolMain #choices {
	margin: 0 0 2em
}

@media (min-width: 768px) {
	#toolMain #choices {
		margin-right: 32px
	}
}

@media (min-width: 1024px) {
	#toolMain #choices {
		width: calc(50% - 24px);
		margin-right: 48px
	}
}

#toolMain #choices #scale {
	overflow: hidden
}

@media (min-width: 768px) {
	#toolMain #choices #scale {
		float: right;
		width: 60%
	}
}

#toolMain #choices #scale div {
	margin: 0 0 6px
}

#toolMain #choices #scale div::after {
	clear: both;
	content: "";
	display: block
}

#toolMain #choices #scale div:first-child span {
	font-size: 0.8em
}

#toolMain #choices #scale div:first-child span:first-child {
	float: left
}

#toolMain #choices #scale div:first-child span:last-child {
	float: right
}

#toolMain #choices #scale div:last-child span {
	float: left;
	height: 6px;
	width: calc(16.66% - 0.5px);
	border-left: 1px solid #17837c
}

#toolMain #choices #scale div:last-child span:last-child {
	border-right: 1px solid #17837c
}

#toolMain #choices form {
	clear: both
}

#toolMain #choices fieldset {
	margin: 0;
	padding: 0.25em 0;
	border: 0
}

@media (min-width: 768px) {
	#toolMain #choices fieldset {
		padding: 0.5em 0
	}
}

#toolMain #choices label {
	display: block;
	margin: 0 0 0.2em;
	font-family: "Klavika";
	font-weight: 600;
	font-size: 0.9em;
	position: relative;
}

@media (min-width: 768px) {
	#toolMain #choices label {
		float: left;
		width: 40%;
		margin: 0;
		font-size: 1em
	}
}

#toolMain #choices label div {
	position: relative;
	display: inline
}

#toolMain #choices label span.info {
	background: url("/assets/svg/resources/icon-util-question-mark.svg") no-repeat;
	cursor: help
}

#toolMain #choices label span.info:hover {
	background-image: url("/assets/svg/resources/icon-util-question-mark-hover.svg")
}

@media (min-width: 768px) {
	#toolMain #choices input {
		float: right;
		width: 60%
	}
}

#toolMain #choices button {
	display: block;
	width: 100%;
	margin: 1em 0 0;
	padding: 0.5em;
	border: 0;
	border-radius: 3px;
	text-align: center;
	font-family: "Klavika";
	font-weight: 600;
	font-size: 1.4em;
	color: #fff;
	background: #17837c;
	transition: background 200ms
}

@media (min-width: 768px) {
	#toolMain #choices button {
		margin: 2em 0 0
	}
}

#toolMain #choices button:hover {
	background: #11625d
}

#toolMain #choices button:disabled {
	background: rgba(23, 131, 124, 0.3);
	cursor: not-allowed
}

#toolMain #choices button:focus {
	outline: 4px #17837c
}

#toolMain #choices #arty .slider-handle {
	background: #e5db53
}

#toolMain #choices #conv .slider-handle {
	background: #5d8fe2
}

#toolMain #choices #enter .slider-handle {
	background: #83749a
}

#toolMain #choices #invest .slider-handle {
	background: #ec4e61
}

#toolMain #choices #real .slider-handle {
	background: #a8e565
}

#toolMain #choices #social .slider-handle {
	background: #78ded7
}

#toolMain .diagram {
	display: none;
	height: 0;
	padding: 0 0 50% 1.5em;
	position: relative
}

@media (min-width: 768px) {
	#toolMain .diagram {
		display: block;
		width: calc(50% - 16px)
	}
}

@media (min-width: 1024px) {
	#toolMain .diagram {
		width: calc(50% - 48px)
	}
}

#toolMain .diagram::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	height: 45px;
	width: 45px;
	border-radius: 50%;
	background: #fff;
	transform: translate(-50%, -50%)
}

#toolMain .diagram div {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 39px;
	width: 39px;
	border-radius: 999em;
	background: #ccc;
	transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1) 100ms
}

#toolMain .diagram div.arty {
	background: rgba(221, 206, 25, 0.75);
	transform: translate(0, -50%) rotate(-65deg);
	transform-origin: center left
}

@media (min-width: 1025px) {
	#toolMain .diagram div.arty:hover {
		background: #ddce19
	}
}

#toolMain .diagram div.conv {
	background: rgba(38, 105, 217, 0.75);
	transform: translate(0, -50%)
}

@media (min-width: 1025px) {
	#toolMain .diagram div.conv:hover {
		background: #2669D9
	}
}

#toolMain .diagram div.enter {
	background: rgba(89, 70, 120, 0.75);
	transform: translate(0, -50%) rotate(65deg);
	transform-origin: center left
}

@media (min-width: 1025px) {
	#toolMain .diagram div.enter:hover {
		background: #594678
	}
}

#toolMain .diagram div.invest {
	background: rgba(229, 18, 44, 0.75);
	transform: translate(-100%, -50%) rotate(-65deg);
	transform-origin: center right
}

@media (min-width: 1025px) {
	#toolMain .diagram div.invest:hover {
		background: #E5122C
	}
}

#toolMain .diagram div.real {
	left: auto;
	right: 50%;
	background: rgba(138, 221, 49, 0.75);
	transform: translate(0, -50%)
}

@media (min-width: 1025px) {
	#toolMain .diagram div.real:hover {
		background: #8add31
	}
}

#toolMain .diagram div.social {
	background: rgba(74, 211, 201, 0.75);
	transform: translate(0, -50%) rotate(-115deg);
	transform-origin: center left
}

@media (min-width: 1025px) {
	#toolMain .diagram div.social:hover {
		background: #4ad3c9
	}
}

#jobsList {
	background: #e1f4ef;
	color: #0d5471
}

#jobsList::after {
	clear: both;
	content: "";
	display: block
}

#jobsList h2 {
	flex: 1 0 100%;
	padding: 1.9em 0 1.2em;
	margin: 0;
	font-weight: normal;
	font-size: 1.5em;
	text-align: center
}

@media (min-width: 768px) {
	#jobsList h2 {
		font-size: 1.8em
	}
}

#jobsList>div {
	text-align: center
}

#jobsList>div#jobs p span {
	display: block
}

#jobsList>div#allJobs {
	padding-bottom: 3em
}

#jobsList>div>div {
	display: inline-block;
	width: calc(50% - 18px);
	height: 205px;
	margin: 0 5px 10px;
	vertical-align: top;
	cursor: pointer;
	transition: height 650ms ease
}

@media (min-width: 414px) {
	#jobsList>div>div {
		width: calc(50% - 20px);
		height: 240px
	}
}

@media (min-width: 768px) {
	#jobsList>div>div {
		width: 265px;
		height: 340px;
		margin: 0 7px 14px
	}
}

@media (min-width: 510px) and (max-width: 767px) and (orientation: portrait) {
	#jobsList>div>div {
		width: calc(33% - 20px);
		height: 250px
	}
}

@media (min-width: 1024px) and (max-width: 1120px) {
	#jobsList>div>div {
		width: 23%;
		height: 300px
	}
}

#jobsList>div>div.expanded .jobInnerWrap::after {
	opacity: 1;
	transform: translateY(0);
	transition: transform 400ms 500ms
}

@media (min-width: 1025px) {
	#jobsList>div>div .jobInnerWrap:hover::before {
		opacity: 1
	}
}

#jobsList>div>div#prefs {
	flex-direction: column;
	padding: 0;
	background: none;
	border: 2px solid #fff;
	border-radius: 6px;
	position: relative
}

#jobsList>div>div#prefs:hover a {
	color: #0C6963
}

#jobsList>div>div#prefs:hover>span {
	transform: rotate(360deg)
}

#jobsList>div>div#prefs a {
	display: block;
	font-size: 0.8em;
	line-height: 1.1;
	color: #17837c;
	margin: 0 0 8px;
	padding: 10px 30px 0 10px;
	text-align: left;
	transition: color 200ms
}

@media (min-width: 768px) {
	#jobsList>div>div#prefs a {
		font-size: 0.9em
	}
}

#jobsList>div>div#prefs>span {
	position: absolute;
	top: 10px;
	right: 12px;
	height: 16px;
	width: 16px;
	background-image: url("/assets/svg/resources/icon-util-refresh-thin.svg");
	transition: transform 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86)
}

#jobsList>div>div#prefs hr {
	border: 0;
	border-top: 2px solid #fff;
	color: #fff
}

#jobsList .jobInnerWrap {
	height: 205px;
	padding: 10px;
	margin: 0 0 25px;
	border-radius: 6px;
	background: #fff;
	text-align: left;
	position: relative
}

@media (min-width: 414px) {
	#jobsList .jobInnerWrap {
		height: 240px
	}
}

@media (min-width: 768px) {
	#jobsList .jobInnerWrap {
		height: 340px
	}
}

@media (min-width: 510px) and (max-width: 767px) and (orientation: portrait) {
	#jobsList .jobInnerWrap {
		height: 250px
	}
}

@media (min-width: 1024px) and (max-width: 1120px) {
	#jobsList .jobInnerWrap {
		height: 300px
	}
}

#jobsList .jobInnerWrap::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-shadow: 5px 5px 0 0 #fff, -5px -5px 0 0 #fff, -5px 5px 0 0 #fff, 5px -5px 0 0 #fff;
	border-radius: 6px;
	opacity: 0;
	transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

#jobsList .jobInnerWrap::after {
	position: absolute;
	top: calc(100% + 15px);
	left: 50%;
	content: "";
	height: 0;
	width: 0;
	margin: -20px 0 0 -15px;
	pointer-events: none;
	border: solid transparent;
	border-bottom-color: #fff;
	border-width: 15px;
	opacity: 0;
	transform: translateY(100%);
	transition: none
}

#jobsList .jobInnerWrap p {
	color: #0d5471;
	padding-right: 20px;
	font-family: "Klavika";
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.1
}

@media (min-width: 768px) {
	#jobsList .jobInnerWrap p {
		padding-right: 30px;
		font-size: 0.95em
	}
}

#jobsList .jobInnerWrap p span {
	display: none
}

#jobsList .jobInnerWrap>span {
	position: absolute;
	top: 10px;
	right: 10px;
	background: url("/assets/svg/resources/icon-util-info.svg") no-repeat
}

@media (min-width: 1025px) {
	#jobsList .jobInnerWrap:hover>span {
		background-image: url("/assets/svg/resources/icon-util-info-hover.svg")
	}
}

#jobsList .chart,
#jobsList #prefs .diagram {
	position: absolute;
	bottom: 0;
	left: 10px;
	height: 0;
	width: calc(100% - 20px);
	padding: 0 0 100%;
	margin: 0
}

@media (min-width: 768px) {

	#jobsList .chart,
	#jobsList #prefs .diagram {
		bottom: 20px
	}
}

@media (max-width: 767px) and (orientation: landscape) {

	#jobsList .chart,
	#jobsList #prefs .diagram {
		padding-bottom: 0;
		height: 90%;
		width: 60%;
		left: 20%
	}
}

#jobsList .chart::after,
#jobsList #prefs .diagram::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: #fff;
	transform: translate(-50%, -50%)
}

@media (min-width: 768px) {

	#jobsList .chart::after,
	#jobsList #prefs .diagram::after {
		height: 30px;
		width: 30px
	}
}

#jobsList .chart>div,
#jobsList #prefs .diagram>div {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 18px;
	width: 18px;
	padding: 0;
	border-radius: 999em;
	background: #ccc;
	transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1) 100ms
}

@media (min-width: 768px) {

	#jobsList .chart>div,
	#jobsList #prefs .diagram>div {
		height: 28px;
		width: 28px
	}
}

#jobsList .chart>div.arty,
#jobsList #prefs .diagram>div.arty {
	background: rgba(221, 206, 25, 0.75);
	transform: translate(0, -50%) rotate(-65deg);
	transform-origin: center left
}

@media (min-width: 1025px) {

	#jobsList .chart>div.arty:hover,
	#jobsList #prefs .diagram>div.arty:hover {
		background: #ddce19
	}
}

#jobsList .chart>div.conv,
#jobsList #prefs .diagram>div.conv {
	background: rgba(38, 105, 217, 0.75);
	transform: translate(0, -50%)
}

@media (min-width: 1025px) {

	#jobsList .chart>div.conv:hover,
	#jobsList #prefs .diagram>div.conv:hover {
		background: #2669D9
	}
}

#jobsList .chart>div.enter,
#jobsList #prefs .diagram>div.enter {
	background: rgba(89, 70, 120, 0.75);
	transform: translate(0, -50%) rotate(65deg);
	transform-origin: center left
}

@media (min-width: 1025px) {

	#jobsList .chart>div.enter:hover,
	#jobsList #prefs .diagram>div.enter:hover {
		background: #594678
	}
}

#jobsList .chart>div.invest,
#jobsList #prefs .diagram>div.invest {
	background: rgba(229, 18, 44, 0.75);
	transform: translate(-100%, -50%) rotate(-65deg);
	transform-origin: center right
}

@media (min-width: 1025px) {

	#jobsList .chart>div.invest:hover,
	#jobsList #prefs .diagram>div.invest:hover {
		background: #E5122C
	}
}

#jobsList .chart>div.real,
#jobsList #prefs .diagram>div.real {
	left: auto;
	right: 50%;
	background: rgba(138, 221, 49, 0.75);
	transform: translate(0, -50%)
}

@media (min-width: 1025px) {

	#jobsList .chart>div.real:hover,
	#jobsList #prefs .diagram>div.real:hover {
		background: #8add31
	}
}

#jobsList .chart>div.social,
#jobsList #prefs .diagram>div.social {
	background: rgba(74, 211, 201, 0.75);
	transform: translate(0, -50%) rotate(-115deg);
	transform-origin: center left
}

@media (min-width: 1025px) {

	#jobsList .chart>div.social:hover,
	#jobsList #prefs .diagram>div.social:hover {
		background: #4ad3c9
	}
}

#jobsList #socialBar {
	flex: 1 0 100%;
	align-items: center;
	padding: 1.1em 0;
	margin: 2em 0 0;
	background: #fff;
	text-align: center
}

#jobsList #socialBar p {
	color: #0d5471;
	margin: 0 30px 10px
}

@media (min-width: 768px) {
	#jobsList #socialBar p {
		display: inline-block;
		margin: 0 24px 0 0
	}
}

#jobsList #socialBar p span {
	display: block
}

@media (min-width: 414px) {
	#jobsList #socialBar p span {
		display: inline
	}
}

#jobsList #socialBar a {
	display: -ms-inline-flexbox;
	-ms-flex-pack: justify;
	-ms-flex-align: center;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	border-radius: 3px;
	padding: 0 15px;
	color: #fff;
	font-size: 0.8em;
	text-decoration: none;
	vertical-align: middle;
	transition: background 250ms
}

@media (min-width: 768px) {
	#jobsList #socialBar a {
		height: 44px;
		padding: 0 20px;
		font-size: 0.9em
	}
}

#jobsList #socialBar a.fb {
	margin-right: 7px;
	background: #3a5998
}

#jobsList #socialBar a.fb:hover {
	background: #2f487a
}

#jobsList #socialBar a.tw {
	background: #1da1f2
}

#jobsList #socialBar a.tw:hover {
	background: #0d8cda
}

#jobsList #socialBar a img {
	max-width: 17px;
	max-height: 17px;
	margin-right: 12px
}

@media (min-width: 768px) {
	#jobsList #socialBar a img {
		max-width: none;
		max-height: none;
		margin-right: 14px
	}
}

@media (max-width: 767px) {
	#msgBar {
		display: block !important
	}
}

@media (min-width: 962px) and (max-width: 990px) {
	#msgBar .wrapper {
		width: 96%
	}
}

#msgBar p {
	padding: 0;
	color: #151b1e;
	cursor: pointer
}

#msgBar p img {
	display: none;
	margin-left: 12px;
	vertical-align: middle
}

@media (min-width: 768px) {
	#msgBar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		min-height: 46.5px;
		background: #e1f4ef;
		padding: 0.7em 0;
		z-index: 2
	}

	#msgBar p {
		color: #0d5471
	}

	#msgBar p img {
		display: inline-block
	}
}

#jobExpanded {
	display: none;
	position: absolute;
	top: auto;
	right: 0;
	left: 0;
	background: #fff;
	width: 100%;
	height: 0;
	margin: 0px 0 1px;
	text-align: left;
	overflow: hidden;
	z-index: 999;
	cursor: default;
	transition: height 500ms ease
}

#jobExpanded .expanderClose {
	position: absolute;
	top: 14px;
	right: 14px;
	height: 22px;
	width: 22px;
	background: url("/assets/svg/resources/icon-util-close-circle.svg") no-repeat center;
	cursor: pointer
}

@media (min-width: 768px) {
	#jobExpanded .expanderClose {
		right: 48px
	}
}

#jobExpanded .expandedInner {
	padding: 38px 0 0;
	width: 80%;
	max-width: 850px;
	margin: 0 auto;
	overflow: hidden
}

@media (min-width: 768px) {
	#jobExpanded .expandedInner {
		width: 90%
	}
}

#jobExpanded .expandedInner>div {
	overflow: hidden;
	position: relative
}

#jobExpanded .expandedInner>div:last-child {
	margin: 0 auto 2em
}

@media (min-width: 768px) {
	#jobExpanded .expandedInner>div {
		float: left;
		width: calc(50% - 1.5em);
		margin-bottom: 2em
	}

	#jobExpanded .expandedInner>div:first-of-type {
		margin-right: 3em
	}
}

@media (min-width: 1024px) {
	#jobExpanded .expandedInner>div {
		float: left;
		width: calc(50% - 1.75em)
	}

	#jobExpanded .expandedInner>div:first-of-type {
		margin-right: 3.5em
	}
}

#jobExpanded h3,
#jobExpanded h4,
#jobExpanded blockquote {
	font-family: "Klavika";
	font-weight: 600
}

#jobExpanded h3 {
	font-size: 1.3em
}

#jobExpanded h3 span {
	border-left: 2px solid;
	padding-left: 10px;
	margin-left: 8px
}

#jobExpanded p {
	margin: 12px 0 1.3em;
	line-height: 1.5;
	color: #0d5471;
}

#jobExpanded h4 {
	margin: 0 0 0.5em
}

#jobExpanded h4+p {
	font-size: 0.95em
}

#jobExpanded h4+p span {
	display: block;
	margin: 10px 0 0
}

#jobExpanded h4+p span a {
	color: #151b1e
}

#jobExpanded h4+p span a:hover {
	color: #000
}

#jobExpanded blockquote {
	display: block;
	margin: 1.5em 0 0.8em;
	font-size: 1.1em;
	color: #17837c;
	line-height: 1.35;
	clear: both
}

#jobExpanded blockquote img {
	margin-right: 10px
}

#jobExpanded #skillBars {
	overflow: hidden
}

#jobExpanded #skillBars>div {
	float: left
}

#jobExpanded #skillBars>div:first-child {
	width: 40%
}

@media (max-width: 767px) and (orientation: landscape) {
	#jobExpanded #skillBars>div:first-child {
		width: 17.5%
	}
}

#jobExpanded #skillBars>div:first-child span {
	display: block;
	font-size: 0.8em;
	line-height: 1.7
}

#jobExpanded #skillBars>div:last-child {
	position: relative;
	height: 94%;
	width: 60%
}

#jobExpanded #skillBars>div:last-child hr {
	position: absolute;
	top: 7px;
	bottom: 0;
	left: 0;
	width: 1px;
	background: none;
	border: 0;
	border-left: 1px solid rgba(200, 230, 224, 0.61);
	color: rgba(200, 230, 224, 0.61);
	z-index: -1
}

#jobExpanded #skillBars>div:last-child hr:nth-of-type(2) {
	left: 14.28%
}

#jobExpanded #skillBars>div:last-child hr:nth-of-type(3) {
	left: 28.57%
}

#jobExpanded #skillBars>div:last-child hr:nth-of-type(4) {
	left: 42.84%
}

#jobExpanded #skillBars>div:last-child hr:nth-of-type(5) {
	left: 57.12%
}

#jobExpanded #skillBars>div:last-child hr:nth-of-type(6) {
	left: 71.4%
}

#jobExpanded #skillBars>div:last-child hr:nth-of-type(7) {
	left: 85.68%
}

#jobExpanded #skillBars>div:last-child hr:nth-of-type(8) {
	left: calc(100% - 1px)
}

#jobExpanded #skillBars>div:last-child div {
	height: 5px;
	width: 0;
	margin: 6px 0 16px
}

#jobExpanded #skillBars>div:last-child div:nth-of-type(1) {
	background: #e5db53
}

#jobExpanded #skillBars>div:last-child div:nth-of-type(2) {
	background: #5d8fe2
}

#jobExpanded #skillBars>div:last-child div:nth-of-type(3) {
	background: #83749a
}

#jobExpanded #skillBars>div:last-child div:nth-of-type(4) {
	background: #ec4e61
}

#jobExpanded #skillBars>div:last-child div:nth-of-type(5) {
	background: #a8e565
}

#jobExpanded #skillBars>div:last-child div:nth-of-type(6) {
	background: #78ded7;
	margin-bottom: 0
}

#jobExpanded #jobInfo {
	margin: 12px 0 1.5em
}

#jobExpanded #jobInfo div {
	margin: 0 0 2px
}

#jobExpanded #jobInfo div:last-child {
	margin-bottom: 0
}

#jobExpanded #jobInfo div div {
	display: inline-block;
	width: 21px;
	margin-right: 8px;
	vertical-align: top
}

#jobExpanded #jobInfo img {
	max-width: 100%;
	vertical-align: middle
}

#jobExpanded #jobInfo span:first-of-type {
	display: inline-block;
	width: 40%;
	font-size: 0.8em;
	color: #798d95
}

@media (max-width: 767px) and (orientation: landscape) {
	#jobExpanded #jobInfo span:first-of-type {
		width: 28%
	}
}

#jobExpanded #jobInfo span:last-of-type {
	width: calc(60% - 34px);
	display: inline-block;
	vertical-align: top
}

#jobExpanded #jobInfo>a {
	display: inline-block;
	margin: 0.7em 0;
	color: #000;
	font-size: 0.8em;
	text-decoration: underline;
}

#jobExpanded #careerInfo p {
	margin-bottom: 0.6em;
	line-height: 1.2
}

#jobExpanded #careerInfo ul {
	list-style: disc outside;
	padding-left: 18px;
	color: #0d5471;
}

#jobExpanded #careerInfo a {
	display: block;
	margin: 2.5em 0 0;
	color: #0d5471;
	font-family: "Klavika";
	font-weight: 600;
	font-size: 1.05em;
	text-decoration: none
}

#jobExpanded #careerInfo a:hover span:first-child {
	border-bottom: 1px solid #0d5471
}

#jobExpanded #careerInfo a span:first-child {
	display: inline-block;
	border-bottom: 1px solid rgba(13, 84, 113, 0.5);
	font-size: 0.75em
}

@media (min-width: 414px) {
	#jobExpanded #careerInfo a span:first-child {
		font-size: 0.9em
	}
}

@media (min-width: 1024px) {
	#jobExpanded #careerInfo a span:first-child {
		font-size: 1em
	}
}

#jobExpanded #careerInfo a span:last-child {
	display: none;
	height: 12px;
	width: 12px;
	background: url("/assets/svg/resources/icon-util-link-arrow-circle.svg") no-repeat center;
	background-size: cover;
	padding-left: 8px;
	margin-left: 3px;
	vertical-align: bottom;
	position: relative;
	top: -3px
}

@media (min-width: 414px) {
	#jobExpanded #careerInfo a span:last-child {
		height: 16px;
		width: 16px
	}
}

#filters {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 250px;
	background: #17837c;
	color: #fff;
	transform: translateX(-100%);
	z-index: 999
}

@media (min-width: 414px) {
	#filters {
		width: 272px
	}
}

#filters .scroller {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 2.5em 2.5em 3em 19px;
	overflow: auto;
	-webkit-overflow-scrolling: touch
}

#filters.shown #tab>span {
	background-image: url("/assets/svg/resources/icon-util-close-filter.svg")
}

#filters #tab {
	position: absolute;
	top: 50%;
	left: calc(100% - 1px);
	padding: 10px 8px 10px 10px;
	background: #126f69;
	border-radius: 0 3px 3px 0;
	white-space: nowrap;
	transform: translate(-100%, -50%);
	transition: background 250ms
}

@media (min-width: 768px) {
	#filters #tab {
		top: 50%;
		padding: 8px 10px 12px;
		cursor: pointer
	}
}

#filters #tab:hover {
	background: #0c4c48
}

#filters #tab>span {
	display: block;
	height: 18px;
	width: 18px;
	margin: 6px auto 0;
	background: url("/assets/svg/resources/icon-util-open-filter.svg") no-repeat center;
	background-size: contain
}

@media (min-width: 768px) {
	#filters #tab>span {
		height: 23px;
		width: 23px
	}
}

#filters h3 {
	margin: 1.2em 0;
	font-family: "Klavika";
	font-weight: 600;
	font-size: 0.95em
}

#filters h4 {
	display: inline-block;
	font-size: 0.95em;
	font-weight: normal;
	vertical-align: middle
}

@media (min-width: 768px) {
	#filters h4 {
		font-size: 1.2em
	}
}

#filters ul {
	margin: 0 0 2em;
	font-family: "Flama", arial, helvetica, sans-serif;
	font-size: 0.95em;
	color: #fff
}

#filters ul li {
	cursor: pointer;
	font-size: 1em;
	list-style: none;
	margin: 1em 0;
	user-select: none
}

#filters ul li.selected.course span {
	background: url("/assets/svg/resources/icon-util-tick.svg") no-repeat center 20px
}

#filters ul li.selected span {
	background-position: center
}

#filters ul li.course span {
	background-position: center
}

#filters ul li span {
	position: relative;
	top: 2px;
	display: inline-block;
	height: 15px;
	width: 15px;
	margin-right: 8px;
	border-radius: 2px;
	border: 1px solid #fff;
	background: url("/assets/svg/resources/icon-util-tick.svg") no-repeat center 20px
}

#filters a {
	font-family: "Klavika";
	font-size: 0.95em;
	font-weight: 600;
	color: #fff
}

.wrapper {
	width: 85%;
	max-width: 1120px;
	margin: 0 auto;
	color: #0d5471
}

.wrapper::after {
	clear: both;
	content: "";
	display: block
}

@media (min-width: 768px) {
	.wrapper {
		width: 92.5%
	}
}

#sourcesMain .wrapper div {
	width: 90%;
	max-width: 550px;
	padding: 0 0 2em
}

#sourcesMain h2 {
	margin: 1.4em 0 1.2em;
	color: #0d5471;
	font-family: "Klavika";
	font-weight: 600;
	font-size: 1.3em
}

#sourcesMain p {
	color: #151b1e;
	line-height: 1.53;
	margin-bottom: 15px;
}

#sourcesMain p a {
	color: #17837c;
	text-decoration: underline
}

#sourcesMain h3 {
	display: block;
	font-size: 1.17em;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	font-weight: bold;
	font-family: "Flama", arial, helvetica, sans-serif;
}