/* variables */
:root {
    --color-primary: #daaa00;
    --color-secondary: #37174a;
    --color-muted: #d0d1db;
}
h2.section-title {
	padding-top: 40px;
}
@media (min-width: 960px) {
  h2.section-title {
    padding-top: 70px;
  }
}
/* pathway options */
.pathway-options {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
.pathway-options>.option-primary,
.pathway-options>.option-secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    flex-direction: column;
    padding: 1rem;
    min-height: 12rem;
	cursor: pointer;
}
.pathway-options h4 {
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}
.pathway-options p {
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.4rem;
	line-height: 130%;
}

.pathway-options>.option-primary {
    background-color: var(--color-primary);
    text-decoration: none;
}
.pathway-options>.option-primary.inactive {
    background-color: #ecd47f;
}
.pathway-options>.option-primary h4,
.pathway-options>.option-primary p {
    color: var(--color-secondary);
}
.pathway-options>.option-primary.inactive>h4,
.pathway-options>.option-primary.inactive>p {
    color: #85746e;
}

.pathway-options>.option-secondary {
    background-color: var(--color-secondary);
    text-decoration: none;
}
.pathway-options>.option-secondary.inactive {
    background-color: #95849f;
}
.pathway-options>.option-secondary>h4,
.pathway-options>.option-secondary>p {
    color: #fff;
}
.pathway-options>.option-secondary.inactive>h4,
.pathway-options>.option-secondary.inactive>p {
    color: #c7c4d6;
}


/* course schedule */
.path-session {
    margin-top: 3rem;
}
.path-session>.path-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
.path-session>.path-row-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem -6px;
}
.path-session .course,
.path-session .operator {
    display: flex;
    justify-content: center;
    align-items: center;
}
.path-session>.path-row>.course-outer {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.path-session>.path-row>.course-outer:hover {
    text-decoration: none;
}
.uk-badge {
	padding: 4px 0 0 0;
}
.path-session .operator .uk-badge {
    width: 40px;
    height: 40px;
    position: absolute;
    border: 4px solid #fff;
    background-color: var(--color-secondary);
    text-transform: uppercase;
    font-weight: bold;
    bottom: calc(-20px - 0.5rem);
}
.path-session .path-row-divider .uk-badge {
    background-color: var(--color-secondary);
    text-transform: uppercase;
    font-weight: bold;
    width: 100%;
}
.path-session .course {
    background-color: var(--color-primary);
    padding: 1rem;
    flex-grow: 1;
    min-height: 12rem;
}
.path-session .course h4 {
    color: var(--color-secondary);
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
	font-size: 1.8rem;
	line-height: 130%;
}

.path-session .operator {
    position: relative;
}


/* medium screens */
@media (min-width: 800px) {
    .pathway-options {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .path-session>.path-row {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .path-session>.path-row>.course-outer {
        display: flex;
        flex-direction: row;
    }
    .path-session .operator .uk-badge {
        right: calc(-20px - 0.5rem);
        bottom: auto;
    }
}

/* large screens */

/* modal typography */
#course-modal .uk-modal-header .uk-modal-title {
	font-size: 2.6rem;
	padding-left: 0;
	margin-bottom: 0.5rem;
}
#course-modal .uk-modal-header .twyppinstructor {
	font-size: 1.4rem;
	padding-left: 0;
	margin: 0;
}
#course-modal .uk-modal-footer .twyppshortcourse,
#course-modal .uk-modal-footer .twyppcredit {
	color: var(--color-secondary);
	font-size: 1.4rem;
	font-weight: bold;
	text-transform: uppercase;
}
#course-modal .uk-modal-footer .twyppshortcourse { float: left; }
#course-modal .uk-modal-footer .twyppcredit { float: right; }

/* custom close button for modal */
.uk-modal-dialog #modal-close {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    display: inline-block;
    padding: 0;
    vertical-align: top;
    cursor: pointer;
    z-index: 9;
    transform:scale(0.5);
}
.uk-modal-dialog #modal-close .search-toggle-button {
    position: relative;
    width: 5rem;
    height: .4rem;
    display: block;
    margin: 1.6rem 0;
    padding: 0;
    transform: rotate(45deg);
    transition: all .3s ease;
}
.uk-modal-dialog #modal-close .search-toggle-button .bar.top {
    top: 0;
}
.uk-modal-dialog #modal-close .search-toggle-button .bar.top:before, 
.uk-modal-dialog #modal-close .search-toggle-button .bar.top:after {
    bottom: 0;
}
.uk-modal-dialog #modal-close .search-toggle-button .bar.top:before, 
.uk-modal-dialog #modal-close .search-toggle-button .bar.bottom:before {
    left: 0;
}
.uk-modal-dialog #modal-close .search-toggle-button .bar.top:before, 
.uk-modal-dialog #modal-close .search-toggle-button .bar.top:after, 
.uk-modal-dialog #modal-close .search-toggle-button .bar.bottom:before, 
.uk-modal-dialog #modal-close .search-toggle-button .bar.bottom:after {
    content: "";
    position: absolute;
    width: .4rem;
    height: .8rem;
    display: block;
    margin: 0;
    padding: 0;
    background: var(--color-secondary);
}
.uk-modal-dialog #modal-close .search-toggle-button .bar.top:after, 
.uk-modal-dialog #modal-close .search-toggle-button .bar.bottom:after {
    right: 0;
}
.uk-modal-dialog #modal-close .search-toggle-button .bar.middle {
    transform: rotate(90deg);
    transform-origin: center;
}
.uk-modal-dialog #modal-close .search-toggle-button .bar {
    width: 3rem;
    height: .4rem;
    position: absolute;
    display: block;
    left: 0;
    margin: 0;
    padding: 0;
    background: var(--color-secondary);
    transition: all .3s ease;
}
.uk-modal-dialog #modal-close .search-toggle-button .bar.bottom {
    top: 0;
}
.uk-modal-dialog #modal-close .search-toggle-button .bar {
    width: 5rem;
    height: .4rem;
    position: absolute;
    display: block;
    left: 0;
    margin: 0;
    padding: 0;
    background: var(--color-secondary);
    transition: all .3s ease;
}
.uk-modal-dialog #modal-close .search-toggle-button .bar.bottom:before, 
.uk-modal-dialog #modal-close .search-toggle-button .bar.bottom:after {
    top: 0;
}
.uk-modal-dialog #modal-close .search-toggle-button .bar.top:before, 
.uk-modal-dialog #modal-close .search-toggle-button .bar.bottom:before {
    left: 0;
}
.uk-modal-dialog #modal-close .search-toggle-button .bar.top:before, 
.uk-modal-dialog #modal-close .search-toggle-button .bar.top:after, 
.uk-modal-dialog #modal-close .search-toggle-button .bar.bottom:before, 
.uk-modal-dialog #modal-close .search-toggle-button .bar.bottom:after {
    content: "";
    position: absolute;
    width: .4rem;
    height: .6rem;
    display: block;
    margin: 0;
    padding: 0;
    background: var(--color-secondary);
}
.uk-modal-dialog #modal-close .search-toggle-button .bar.top:after, .uk-modal-dialog #modal-close .search-toggle-button .bar.bottom:after {
    right: 0;
}
body:not(.touch-device) .uk-modal-dialog #modal-close:hover .search-toggle-button {
    transform: rotate(90deg);
}

/* Parent Theme Overrides */
#grad {
	display:none;
}
@media (min-width: 840px) {
    .row.has-sidenav .row-primary {
        width: 100%;
    }
}
@media (min-width: 1080px) {
    .row.has-sidenav .row-primary {
        width: 66.666667%;
    }
}