/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CAREER PATHWAYS  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

Heavy CSS to create boxes with arrows as we point to the stackable degrees in certain areas.  */

#career-pathway {
	font-size:0.75em;
}

#career-pathway section {
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	position:relative;
}
#career-pathway section.community-college {
	margin:35px 0 35px 0;
}

#career-pathway section > div {
	padding:10px 10px 10px 10px;
}
#career-pathway section.community-college > div {
	padding-bottom:0;
}

#career-pathway section > div h4 {
	border-bottom:2px solid;
	font-size:0.875em;
	font-weight:600;
	margin:0 0 0 0;
	text-transform:uppercase;
	width:fit-content;
}

#career-pathway section > div p {
	margin:5px 0 10px 0;
}

#career-pathway section a {
	color:#ffd659;
	text-decoration:underline;
}
#career-pathway section a:hover {
	color:#ffffff;
}
#career-pathway section#high-school > div:nth-of-type(1) a {
	color:#21669c;
}
#career-pathway section#high-school > div:nth-of-type(1) a:hover {
	color:#252525;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ›››››››››››››››››››››››››››››››››››››››› HIGH SCHOOL SECTION  */

#career-pathway section#high-school > div {
	position:relative;
}

#career-pathway section#high-school > div:nth-of-type(1) {
	background-color:#ffd659;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	border-radius:5px 5px 0 0;
	z-index:50;
}
#career-pathway section#high-school > div:nth-of-type(2) {
	background-color:#252525;
	-moz-border-radius:0 0 5px 5px;
	-webkit-border-radius:0 0 5px 5px;
	border-radius:0 0 5px 5px;
	color:#ffffff;
}

#career-pathway section#high-school > div p:nth-of-type(1) {
	font-weight:300;
}

#career-pathway section#high-school > div:nth-of-type(1).arrow-down {
	background:#ffd659;
	border-color:#ffd659;
}
#career-pathway section#high-school > div:nth-of-type(1).arrow-down:after,
#career-pathway section#high-school > div:nth-of-type(1).arrow-down:before {
	border-color:rgba(0,0,0,0);
	border-top-color:#ffd659;
}
#career-pathway section#high-school > div:nth-of-type(1).arrow-down:after {
	border-width:17px;
	margin-left:-17px;
}
#career-pathway section#high-school > div:nth-of-type(1).arrow-down:before {
	border-width:10px;
	margin-left:-10px;
}

#career-pathway section#high-school > div:nth-of-type(2).arrow-down {
	background:#252525;
	border-color:#252525;
}
#career-pathway section#high-school > div:nth-of-type(2).arrow-down:after {
	border-color:rgba(220,138,13,0);
	border-top-color:#252525;
	left:16.5%;
}
#career-pathway section#high-school > div:nth-of-type(2).arrow-down:before {
	border-color:rgba(220,138,13,0);
	border-top-color:#252525;
	left:16.5%;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ›››››››››››››››››››››››››››››››››››››››› COMMUNITY COLLEGE SECTION  

This section is switched from id to a class because there can be more than one community-college section.  */

#career-pathway section.community-college {
	background-color:#21669c;
	color:#ffffff;
	display: block;
	display: flex;
	min-height:150px;
}

#career-pathway section.community-college > div:nth-of-type(2) {
	background-color:#48a2e8;
}
#career-pathway section.community-college > div:nth-of-type(2),
#career-pathway section.community-college > div:nth-of-type(3) {
	padding-left:25px;
}

#career-pathway section.community-college > div {
	float:left;
	min-height:inherit;
	width:33.333%;
}
#career-pathway section.community-college.full-width > div {
	float:none;
	width:100%;
}

#career-pathway section.community-college > div.arrow-right:after,
#career-pathway section.community-college > div.arrow-right:before {
	border-color:rgba(0,0,0,0);
	position:absolute;
	top:50%;
}
#career-pathway section.community-college > div.arrow-right:nth-of-type(1):after,
#career-pathway section.community-college > div.arrow-right:nth-of-type(1):before {
	border-left-color:#21669c;
	left:33.333%;
}
#career-pathway section.community-college > div.arrow-right:nth-of-type(2):after,
#career-pathway section.community-college > div.arrow-right:nth-of-type(2):before {
	border-left-color:#48a2e8;
	left:66.666%;
}

#career-pathway section.community-college > div.arrow-down {
	bottom:0;
	min-height:0;
	padding:0 0 0 0;
	position:absolute;
}
#career-pathway section.community-college > div.arrow-down:after,
#career-pathway section.community-college > div.arrow-down:before {
	border-color:rgba(0,0,0,0);
	border-top-color:#21669c;
}

	#career-pathway section#post-degree div.arrow-down{
		display: none;
	}

#career-pathway section.community-college p strong {
	display:block;
}

@media screen and (min-width:768px) {
	#career-pathway section.community-college {
		min-height:135px;
	}
}

@media screen and (min-width:1024px) {
	#career-pathway section.community-college {
		min-height:110px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ›››››››››››››››››››››››››››››››››››››››› UNIVERSITY SECTION  */

#career-pathway section#university {
	background-color:#252525;
	color:#ffffff;
}

#career-pathway section#university > div {
	float:left;
	height:100%;
	width:33.333%;
}

#career-pathway section#university > div a {
	color:#ffd659;
	text-decoration:underline;
}
#career-pathway section#university > div a:hover {
	color:#ffffff;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ›››››››››››››››››››››››››››››››››››››››› ARROW

Creating an arrow using :after and :before on the sections or div.  */

#career-pathway .arrow-down:after,
#career-pathway .arrow-down:before,
#career-pathway .arrow-right:after,
#career-pathway .arrow-right:before {
	border:solid transparent;
	content:"";
	height:0;
	left:50%;
	pointer-events:none;
	position:absolute;
	top:100%;
	width:0;
}
#career-pathway .arrow-right:after,
#career-pathway .arrow-right:before {
	left:100%;
	top:50%;
}
#career-pathway .arrow-down:after {
	border-width:30px;
	margin-left:-30px;
}
#career-pathway .arrow-right:after {
	border-width:10px;
	margin-top:-10px;
}
#career-pathway .arrow-down:before {
	border-width:20px;
	margin-left:-20px;
}
#career-pathway .arrow-right:before {
	border-width:17px;
	margin-top:-17px;
}