:root {
    --si-path-bkgd-stem: #E08E45; /* orange */
    --si-path-bkgd-arts: #86BA90; /* sage */
    --si-path-bkgd-english: var(--si-orange); 
    --si-path-bkgd-semester: #a9a9a9;
/*     --si-path-bkgd-math: #F4D06F; */
/*     --si-path-bkgd-science: #2AB7CA; */
    --si-path-bkgd-math: var(--si-gold);
    --si-path-bkgd-science: var(--si-green);
    --si-path-bkgd-language: var(--si-lt-blue);
	--fade-dur: .4s;
/* 
    --si-path-bkgd-religious-studies: #729EA1;
    --si-path-bkgd-science: #2AB7CA;
    --si-path-bkgd-language: #FF8811;
 */
	box-sizing: border-box;
}


.path-container .subj-item.hide-subj,
.path-container .subj-item.hideMe {
/* 	display: none; */
}
.subj-cont {
}
.level {
	display: flex;
	justify-content: space-around;
	margin-bottom: 10px;
	column-gap: 10px;
	flex-wrap: wrap;
    row-gap: 10px;
}
.level.level-2,
.level.level-3 {
	display: none;
    flex-wrap: wrap;
    row-gap: 10px;
	padding: 10px;
	border-bottom: 2px solid lightgray;
    text-align: center;
    margin: 0 auto 10px;
}

.level.level-2.visible,
.level.level-3.visible {
    display: flex;
}


/* item */
.subj-item {
    display: none;
    opacity: 0;
    justify-content: center;
    align-items: center;
/* 	width: 200px; */
	text-align: center;
	font-size: 14px;
    padding: 5px 10px;
	border-radius: 10px;	
	position: relative;
	border-width: 2px;
    border-style: solid;
	transition: all .5s ease;
    transition-duration: var(--fade-dur);
}
.subj-item.level-1 {
    display: flex;
    opacity: 1;
	font-weight: 600;
}
.subj-item:hover,
.subj-item.active {
	color: white;
    cursor: pointer;
/* 	background: var(--si-red); */
	transition: all .5s ease;
    transition-duration: var(--fade-dur);
}
.path-container .subj-item.mathematics:hover,
.path-container .subj-item.active.mathematics,
.path-container .subj-item.level-1.mathematics,
.path-container .path-content .col .mathematics {
	background: var(--si-path-bkgd-math);
}
.path-container .subj-item.mathematics {
	border-color: var(--si-path-bkgd-math);
}
.path-container .subj-item.science:hover,
.path-container .subj-item.active.science,
.path-container .subj-item.level-1.science,
.path-container .path-content .col .science {
	background: var(--si-path-bkgd-science);
}
.path-container .subj-item.science {
	border-color: var(--si-path-bkgd-science);
}
.path-container .subj-item.language:hover,
.path-container .subj-item.active.language,
.path-container .subj-item.level-1.language,
.path-container .path-content .col .language {
	background: var(--si-path-bkgd-language);
}
.path-container .subj-item.language {
	border-color: var(--si-path-bkgd-language);
}
.path-container .subj-item.active.english,
.path-container .subj-item.level-1.english,
.path-container .path-content .col .english {
	background: var(--si-path-bkgd-english);
}
.path-container .subj-item.english {
	border-color: var(--si-path-bkgd-english);
}
.path-container .subj-item.showMe {
	display: flex;
	opacity: 1;
	animation-duration: var(--fade-dur);
	animation-timing-function: ease-in;
	animation-name: fadeIn;
	animation-fill-mode: forwards;
}

/* content */
p.legend span.semester {
    width: 18px;
    display: inline-block;
    height: 18px;
    background: linear-gradient(45deg, white 50%, var(--si-path-bkgd-semester) 0%);
}

.path-content-container {
/* 	height: 400px; */
    width: 100%;
/*     background: aliceblue; */
}
.col-cont {
	display: flex;
	flex-direction: column;
    flex-wrap: nowrap;
	gap: 10px;
}
.col-cont .col {
    flex: 1;
	text-align: center;
}
.col-cont.grades {
    margin-bottom: 0;
    margin-right: 20px;
}
.col-cont.courses {
	width: calc(100% - 94px);
}
.col-cont.grades .col {
	font-size: 18px;
	font-weight: 600;
	display: flex;
    justify-content: center;
    align-items: center;
}
.col-cont.courses .col {
    display: flex;
	column-gap: 10px;
}
.col-cont .col .item {
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	position: relative;
	height: 50px;
	color: white;
	display: flex;
    justify-content: center;
    align-items: center;
	margin: 0;
    margin-bottom: 10px;
    padding: 5px;
    flex: 1;
}
.col-cont.courses .item.mathematics.semester {
	background: linear-gradient(45deg, var(--si-path-bkgd-math) 90%, var(--si-path-bkgd-semester) 0%);
}
.col-cont.courses .item.science.semester {
	background: linear-gradient(45deg, var(--si-path-bkgd-science) 90%, var(--si-path-bkgd-semester) 0%);
}
.col-cont.courses .item.language.semester {
	background: linear-gradient(45deg, var(--si-path-bkgd-language) 90%, var(--si-path-bkgd-semester) 0%);
}
.col-cont .col .item.conn-or {
    margin-bottom: 0;
	margin-right: 10%;
}
.col-cont .col .item.conn-or:after {
content: "OR";
    position: absolute;
    right: -63%;
    color: black;
    /* background: aquamarine; */
    width: 100%;
    font-size: 14px;
    line-height: 14px;
}

.col-cont .col .item a {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.path-item {
    display: none;
    opacity: 0;
}
.path-item.showMe {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-evenly;
	opacity: 1;
	animation-duration: var(--fade-dur);
	animation-timing-function: ease-in;
	animation-name: fadeIn;
	animation-fill-mode: forwards;
}
.path-item .link {
    margin-top: 20px;
    width: 100%;
}
.path-item .link p {
    text-align: center;
    font-size: 18px;
}
.path-item .link p a {
	text-decoration: underline;
}

@keyframes fadeIn {
	0% {opacity: 0}
	1% {opacity: 0}
	100% {opacity: 1}
}
@media only screen and (min-width: 600px) {

.col-cont {
	flex-direction: row;
}
.col-cont.grades {
    margin-bottom: 10px;
    margin-right: 0;
}
.col-cont.courses {
    width: 100%;
}
.col-cont.courses .col {
    display: initial;
}
.col-cont .col .item.conn-or {
    margin-bottom: 26px;
	margin-right: 0;
}
.col-cont .col .item.conn-or:after {
content: "OR";
    position: absolute;
    right: unset;
    bottom: -20px;
    color: black;
    /* background: aquamarine; */
    width: 100%;
    font-size: 14px;
    line-height: 14px;
}

.path-item.showMe {
    display: initial;
}
.subj-item {
	font-size: 18px;
    padding: 5px 30px;
	border-width: 4px;
}






}