.outcomes-detail{
	width: 100%;
}

.content_wrapper{
	padding: 30px 120px;
}

.outcomes-detail section{
	position: relative;
	width: 100vw;
	height: auto;
	padding-bottom: 130px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.outcome-logo{
	width: 23%;
	float: right;
}

.headertext{
	display: inline-flex;
	width: 77%;
	font-size: 18px;
	color: #731f5c;
	font-weight: 600;
	max-height: 90px;
}

.headericon{
	width: 2.8%;
	height: 89px;
	margin-right: 15px;
}

.headertext .firstspan{
	padding-top: 18px;
}

.headertext .location{
	font-size: 14px;
	color: #000;
	font-weight: 400;
	font-style: normal;
}

@media (min-width: 768px) {
	.outcomes-detail section{
		min-height: -webkit-fill-available;
		/*padding-bottom: 0;*/
	}
	.outcomes-detail .graph{
		min-height: -webkit-fill-available;
		/*padding-bottom: 0;*/
	}
}

@media (min-width: 1500px) {
	.outcomes-detail section{
		width: 100%;
	}
}

section#title-section h1{
	margin-top: 6vw;
}

section#title-section .intro p:first-child{
	border-top: 2px solid #2c85c7;
	/* border-bottom: 2px solid #2c85c7; */
}

section#title-section .intro p:last-child{
	/* border-top: 2px solid #2c85c7; */
	border-bottom: 2px solid #2c85c7;
	margin-bottom: 90px;
}

section#title-section .intro p{
	float: left;
	clear: left;
	/* margin: 20px 0; */
	width: 100%;
	background: none;
	font-size: 18px;
	line-height: 26px;
	color: #fff;
	padding: 5px 20px;
	color: #2c85c7;
	padding: 20px;
}

@media (min-width: 1024px) {
	section#title-section .intro p{
		font-size: 24px;
		line-height: 32px;
	}
}

/*Arrow*/
.outcomes-detail section .arrow{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 35px;
	cursor: pointer;
}

@media (min-width: 768px) {
	.outcomes-detail section .arrow{
		bottom: 0;
		width: 40px;
	}
}

@media (min-width: 1024px) {
	.outcomes-detail section .arrow{
		bottom: 0;
		width: 50px;
	}
}

.outcomes-detail section:last-of-type .arrow{
	display: none;
}

/* TITLE BAR */

.title-bar{
	margin-top: 6vw;
}

.title-bar img{
	width: 5%;
	position: absolute;
	left: 12.5px;
	background-color: #fff;
}

.title-bar h2{
	border: none !important;
	color: #fff;
	font-size: 60px;
	font-weight: 600;
	padding: 0 40px;
	margin: 9px 0;
	margin-bottom: 60px
}

@media (max-width: 376px) {
	.title-bar h2{
		font-size: 30px;
	}
}

.white-title-bar{
	margin-top: 6vw;
}

.white-title-bar img{
	width: 5%;
	position: absolute;
	left: 12.5px;
	background-color: #fff;
}

.white-title-bar h2{
	border: none !important;
	color: #2C85C7;
	font-size: 50px;
	font-weight: 600;
	padding: 0 40px;
	margin: 9px 0;
	margin-bottom: 80px
}

#holder10 .title-bar{
	margin-top: 6vw;
}

#holder10 .title-bar img{
	width: 5%;
	position: absolute;
	left: 12.5px;
	background-color: #fff;
}

#holder10 .title-bar h2{
	border: none !important;
	color: #2C85C7;
	font-size: 50px;
	font-weight: 600;
	padding: 0 40px;
	margin: 9px 0;
	margin-bottom: 80px
}

.content-area p{
	color: #fff;
	font-size: 20px;
	padding: 0 40px;
	margin-bottom: 18px;
}

.content-area p strong{
	font-size: 22px;
}

.content-area ul{
	padding: 0 60px;
}

.content-area ul li{
	color: #fff;
	list-style: initial;
	font-size: 20px;
}

.white-content-area p{
	color: #2C85C7;
	font-size: 18px;
	padding: 0 40px;
	margin-bottom: 18px;
}

#holder10 .content-area p{
	color: #2C85C7;
	font-size: 18px;
	padding: 0 40px;
	margin-bottom: 18px;
}

.graph-stats-list{
	display: block;
	margin-top: 9vw;
}

.graph-stats-list .statusListHolder{
	width: 49%;
	display: inline-flex;
	padding: 0 40px;
	margin-bottom: 6vw;
}

.graph-stats-list .container{
	width: 50%;
	display: inline-flex;
}

.graph-stats-list .container .active-border{
	width: 100%;
	padding-right: 20%;
}

.graph-stats-list .container .active-border .circle{
	background-image: url('_resources/themes/stah/images/bg-circle.png');
	background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
	text-align: center;
	border-radius: 50%;
	font-size: 30px;
	color: #fff;
	padding: 33% 0;
}

.graph-stats-list .containertext{
	width: 79%;
	display: inline-flex;
}

.graph-stats-list .containertext h2{
	color: #fff;
	font-size: 24px;
	display: contents;
	margin-bottom: 5px;
}

.graph-stats-list .containertext p{
	color: #fff;
	font-size: 18px;
	display: contents;
	line-height: 80px;
}

.graph-stats-list .containertext-w{
	width: 79%;
	display: inline-flex;
	padding: 6% 0;
}

.graph-stats-list .containertext-w h2{
	color: #2C85C7;
	font-size: 24px;
	display: contents;
	margin-bottom: 5px;
}

.graph-stats-list .containertext-w p{
	color: #2C85C7;
	font-size: 18px;
	display: contents;
	line-height: 80px;
}

.owl-theme .owl-controls .owl-buttons div{
	background: #2C85C7;
	width: 100px;
	height: 100px;
	padding: 10px 10px;
}

.owl-theme .owl-wrapper-outer .content-area p{
	color: #2C85C7;
	font-size: 20px;
	padding: 0 40px;
	margin-bottom: 18px;
	text-align: center;
	font-weight: 600;
}

/*#holder3 h1,
#holder3 h2,
#holder3 h3,
#holder3 p{
	color: #fff !important;
}

#holder5 h1,
#holder5 h2,
#holder5 h3,
#holder5 p{
	color: #fff !important;
}

#holder6 h1,
#holder6 h2,
#holder6 h3,
#holder6 p{
	color: #2C85C7 !important;
}

#holder8 .title-bar h2{
	color: #2C85C7 !important;
}*/

.upcoming-events{
	width: 100%;
	border-radius: 8px;
	min-height: 545px;
}

.upcoming-events h2{
	color: #fff;
	font-size: 28px;
	padding: 20px;
	border: 0px;
	position: relative;
}

.upcoming-events h2:before{
	position: absolute;
	bottom: -10px;
	left: 20px;
	height: 3px;
	width: 80px;
	background: #fff;
	content: '';
}

.upcoming-events p{
	color: #fff;
	padding: 15px 20px;
	font-size: 18px;
	min-height: 130px;
}

.upcoming-events a .button{
	margin: 20px;
	width: 90%;
	background: #fff;
	color: #2c85c6;
	transition: 0.5s ease-in-out;
}

.upcoming-events a .button:hover{
	background: #2c85c6;
	color: #fff;
}

.upcoming-events img{
	height: 240px;
	width: 100%;
	object-fit: cover;
}







.holder1808{
	min-height: 1000px;
}

#holder9{
	min-height: 850px;
}

#holder1{
	min-height: 1009px;
}

#holder2{
	min-height: 2000px;
}

#holder10{
	min-height: 870px;
}

@media (max-width: 576px) {
	#holder10{
		min-height: 1200px;
	}
	#holder5{
		min-height: 1850px;
	}
}

#holder3{
	height: 2100px;
}

#holder4{
	min-height: 2100px;
}

#holder5{
	min-height: 2000px;
}

#holder6{
	min-height: 850px;
}

#holder7{
	min-height: 950px;
}






section.purple-section{
   background-image: url("_resources/themes/stah/images/purple-background.jpg");
}

section.blue-section{
   background-image: url("_resources/themes/stah/images/blue-background.jpg");
}
section.green-section{
   background-image: url("_resources/themes/stah/images/green-background.jpg");
}










/*Sidebar*/
/*---------------------------------------------------------------------*/
.outcomes-detail section .sidebar{
	position: absolute;
	top: auto;
	bottom: 0;
	right: 0;
	width: 50%;
	left: 0;
	margin: 0 auto;
	text-align: center;
}

@media (max-width: 1440px) {
	.graph-stats-list .container .active-border .circle{
	}
}

@media (min-width: 768px) {
	.outcomes-detail section .sidebar{
	}
}

@media (min-width: 1024px) {
	.outcomes-detail section .sidebar{
		top: 7vw;
		bottom: auto;
		right: 0;
		left: auto;
		text-align: unset;
	}
}

@media (max-width: 1024px) {
	.graph-stats-list .container .active-border .circle{
	}
}

@media (min-width: 1500px) {
	.outcomes-detail section .sidebar{
		top: 6vw;
	}
}

.outcomes-detail section .sidebar li{
	position: relative;
	padding: 0;
	margin: 0 1px;
	overflow: auto;
	width: auto;
	cursor: pointer;
	display: inline-block;
	overflow: hidden;
}

@media (min-width: 1024px) {
	.outcomes-detail section .sidebar li{
		margin: 0 0 6px;
		width: 70px;
		display: block;
		float: right;
		clear: right;
	}

	.outcomes-detail section .sidebar li.active{
		width: 100%;
	}
}

.outcomes-detail section .sidebar li img{
	width: 35px;
	float: right;
}

@media (min-width: 768px) {
	.outcomes-detail section .sidebar li img{
		width: 50px;
	}
}

@media (min-width: 1500px) {
	.outcomes-detail section .sidebar li img{
		width: 55px;
	}
}

.outcomes-detail section .sidebar li img:first-of-type{
	display: none;
	width: 50px;
}

@media (min-width: 768px) {
	.outcomes-detail section .sidebar li img:first-of-type{
		width: 65px;
	}
}

@media (min-width: 1500px) {
	.outcomes-detail section .sidebar li img:first-of-type{
		width: 70px;
	}
}

.outcomes-detail section .sidebar li img:last-of-type{
	display: block;
}

.outcomes-detail section .sidebar li p{
	display: none;
	position: absolute;
	right: 65px;
	color: #fff;
	font-size: 22px;
	font-weight: 500;
	font-family: 'din_next';
	padding: 17px 20px;
	background: #fff;
	color: #2C85C6;
	width: auto;
	height: 75px;
}

@media (min-width: 1500px) {
	.outcomes-detail section .sidebar li p{
		font-size: 30px;
		padding: 17px 20px;
		right: 74px;
	}
}

/*Active*/
/*.outcomes-detail section .sidebar.active{
width: 100%;
}

.outcomes-detail section .sidebar li.active{
width: 100%;
}*/

.outcomes-detail section .sidebar li.active img:first-of-type{
	display: block;
}

.outcomes-detail section .sidebar li.active img:last-of-type{
	display: none;
}

.outcomes-detail section .sidebar li.active p{
	display: block;
}


/*Current*/
.outcomes-detail section .sidebar li.current img:first-of-type{
	display: block !important;
}

.outcomes-detail section .sidebar li.current img:last-of-type{
	display: none !important;
}



/*Nav arrows*/
/*---------------------------------------------------------------------*/
.outcomes-detail .nav-arrow{
	position: absolute;
	bottom: 70px;
}

@media (min-width: 768px) {
	.outcomes-detail .nav-arrow{
		bottom: 100px;
	}
}

@media (min-width: 1024px) {
	.outcomes-detail .nav-arrow{
		bottom: 0;
	}
}


.outcomes-detail .nav-arrow.left{
	left: 0;
}

.outcomes-detail .nav-arrow.right{
	right: 0;
}

.outcomes-detail .nav-arrow a{
	height: 30px;
	float: left;
	font-size: 12px;
	background: #393939;
	color: #fff;
	padding: 7px 15px;
}

@media (min-width: 768px) {
	.outcomes-detail .nav-arrow a{
		height: 65px;
		font-size: 18px;
		padding: 20px 15px;
	}
}

@media (min-width: 1500px) {
	.outcomes-detail .nav-arrow a{
		height: 75px;
		font-size: 24px;
		padding: 25px 15px;
	}
}

.outcomes-detail .nav-arrow img{
	height: auto;
	width: 30px;
	float: left;
}

@media (min-width: 768px) {
	.outcomes-detail .nav-arrow img{
		width: 65px;
	}
}

@media (min-width: 1500px) {
	.outcomes-detail .nav-arrow img{
		width: 75px;
	}
}


/* If the section has coloured background make text white */
.outcomes-detail section.white-text .title{
	color: #fff!important;
}
.outcomes-detail section.white-text .white-content-area p{
	color: #fff!important;
}
.outcomes-detail section.white-text .content-area p{
	color: #fff!important;
}
.outcomes-detail section.white-text h2{
	color: #fff!important;
}

/* If the section is blue make text white */
.outcomes-detail section.white-section .title{
	color: #2c85c7!important;
}
.outcomes-detail section.white-section .white-content-area p{
	color: #2c85c7!important;
}
.outcomes-detail section.white-section .content-area p{
	color: #2c85c7!important;
}
.outcomes-detail section.white-section h2{
	color: #2c85c7!important;
}
.outcomes-detail section.white-section li{
	color: #2c85c7!important;
	/* width: 100%; */
}

.outcomes-detail section.white-section .upcoming-events h2{
	color: #fff !important;
}


@media only screen and (max-width: 1000px){
	.content_wrapper{
		padding: 30px 20px;
	}
	.outcome-logo{
		width: 65%;
		float: left;
	}
	.headertext{
		display: none;
	}
	.sidebar{
		display: none;
	}




	.graph-stats-list{
		display: block;
		margin-top: 9vw;
	}

	.graph-stats-list .statusListHolder{
		width: 100%;
		display: inline-flex;
		padding: 0 40px;
		margin-bottom: 6vw;
	}

	.graph-stats-list .container{
		width: 100%;
		display: inline-flex;
	}

	.graph-stats-list .container .active-border{
		width: 100%;
		padding-right: 20%;
	}

	.graph-stats-list .containertext{
		width: 100%;
		display: inline-flex;
	}

	.graph-stats-list .containertext h2{
		color: #fff;
		font-size: 24px;
		display: contents;
		margin-bottom: 5px;
	}

	.graph-stats-list .containertext p{
		color: #fff;
		font-size: 18px;
		display: contents;
		line-height: 80px;
	}

	.graph-stats-list .containertext-w{
		width: 100%;
		display: inline-flex;
		padding: 6% 0;
	}

	.graph-stats-list .containertext-w h2{
		color: #2C85C7;
		font-size: 24px;
		display: contents;
		margin-bottom: 5px;
	}

	.graph-stats-list .containertext-w p{
		color: #2C85C7;
		font-size: 18px;
		display: contents;
		line-height: 80px;
	}
	#holder3{
		min-height: 2800px;
	}
}

.owl-prev{
	position: absolute;
	left: -6.5%;
	top: 15%;
}

.owl-next{
	position: absolute;
	right: -6.5%;
	top: 15%;
}

@media only screen and (max-width: 1500px){
	.owl-prev{
		left: -9%;
	}

	.owl-next{
		right: -9%;
	}
}

@media only screen and (max-width: 1300px){
	.owl-prev{
		left: -10%;
	}

	.owl-next{
		right: -10%;
	}
}

@media only screen and (max-width: 1200px){
	.owl-prev{
		left: -11%;
	}

	.owl-next{
		right: -11%;
	}
}

@media only screen and (max-width: 1100px){
	.owl-prev{
		position: relative;
		left: 0;
		top: 0;
	}

	.owl-next{
		position: relative;
		right: 0;
		top: 0;
	}
}






/*JH code*/
/*-----------------------------------------------------------------------------------------------*/
.outcomes-detail .section-selector{
	padding-bottom: 60px;
}

/*Making all sections a min height of 98% viewport height to accomodate for potentially huge sidebar*/
.outcomes-detail > section{
	min-height: 100vh !important;
}

@media (min-width: 1300px){
	.outcomes-detail > section{
		min-height: 98vh !important;
	}
}


/*Sidebar*/
/*Adjust width to stop overlaying content*/
@media (min-width: 1024px){
	.outcomes-detail section .sidebar{
		width: 70px;
	}

	.outcomes-detail section .sidebar.active{
		width: 100%;
	}
}

/*Horizontally center sidebar*/
@media (min-width: 1024px){
	.outcomes-detail section .sidebar{
		top: 0;
		bottom: 0;
		margin: auto 0;
	}
}