@charset "UTF-8";

:root {
  --ws-gutter: 1.5em;
}

/* TYPOGRAPHY ------------------------------ */
h1 {
  font-size: 1.5em;
}

h2, h3, h4 {
  font-size: 1em;
}

button#read-more:not(.clicked)::before {
  bottom: 2em;
}

/* HEADER ------------------------------- */

body>header {
  background: #FFF;
  padding-block: 1.25em 0;
  position: relative;
}

body>header::before {
  background-color: #000;
  content: '';
  display: block;
  height: 100vh;
  left: 100vw;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: left 0s ease .2s, opacity .2s ease;
  width: 100vw;
  z-index: 3;
}

body.slideNav>header::before {
  left: 0;
  opacity: .5;
  transition: left 0s ease 0s, opacity .2s ease;
}

body>header .logo {
  margin: 0 auto 1em;
  max-width: 25em;
  width: 100%;
}

#navContainer {
  background-color: var(--dk-blue);
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  left: 100%;
  overflow: auto;
  position: fixed;
  top: 0;
  transition: left .2s ease;
  width: 75%;
  -webkit-overflow-scrolling: touch;
  z-index: 3;
}

#navContainer aside {
  color: #FFF;
  line-height: 3;
  padding: 0 1em;
}

#navContainer aside>span {
  font-size: 2.25em;
  line-height: 0;
  margin: 0 .125em 0 0;
  position: relative;
  top: .1875em;
}

#navContainer>nav:first-of-type {
  display: flex;
  flex-direction: column-reverse;
}

#navContainer>nav>ul>li {
  border-top: 1px solid rgba(255,255,255,.2);
  transition: all .3s ease;
}

#navContainer>nav>ul>li {
  padding-inline: 1em;
}

#navContainer>nav>ul>li>a {
  color: #FFF;
  display: block;
  line-height: 3;
}

#navContainer>nav>ul>li.open {
  background: rgba(255,255,255,.2);
}

#navContainer>nav>ul>li>ul {
  display: block;
  height: 0;
  overflow: hidden;
  transition: all .3s ease;
}

#navContainer>nav>ul>li.open {
  padding-bottom: .5em;
}

#navContainer>nav>ul>li>ul>li {
  padding-inline: 1em;
}

#navContainer>nav>ul>li>ul>li>a {
  color: #FFF;
  display: block;
  line-height: 2;
}

#navContainer li>span {
  display: block;
  height: 2.75em;
  position: absolute;
  right: .3125em;
  top: .125em;
  width: 2.75em;
}

#navContainer li>span::before,
#navContainer li>span::after {
  background-color: #FFF;
  content: '';
  display: block;
  height: 0.0625rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform-origin: center center;
  width: 50%;
}

#navContainer li>span::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

#navContainer li>span::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

#navContainer li.open > span:before {
  transform: translate(-50%, -50%) rotate(0deg);
}

#navContainer form {
  margin: 1em 0;
  padding-inline: 1em;
}

#navContainer form button {
  right: 1em;
}

.hamburger {
  background-color: var(--dk-blue);
  display: block;
  height: 2em;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 2em;
  z-index: 1;
}

.hamburger.on {
  opacity: .75;
}

.hamburger svg {
  height: 1.375em;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 1.375em;
}

body.slideNav {
  overflow: hidden;
}

body.slideNav #navContainer {
  left: 25%;
}

#navContainer ul.cd li a {
  padding: 0.25em 0.5em 0.25em 2.875em;
}

#mobilenav {
  background: var(--dk-blue);
}

#mobilenav ul {
  display: flex;
}

#mobilenav ul li {
  flex: 1 0 auto;
  text-align: center;
}

#mobilenav ul li a,
#mobilenav ul li span {
  color: #FFF;
  cursor: pointer;
  display: block;
  line-height: 2.25;
}

#mobilenav .menu svg {
  height: 1em;
  margin-left: .25em;
  pointer-events: none;
  position: relative;
  top: .1875em;
}

/* FOOTER ------------------------------- */
body>footer .wrap nav li:first-of-type a:before {
  display: none;
}


/* FORM ------------------------------ */

/* Grades ----- */
.grades {
  flex-wrap: wrap;
}

.grades>p {
  width: 100%;
}


/* HOMEPAGE RIBBONS ------------------------------- */
.home>.wrap {
  flex-direction: column;
  padding-inline: 0;
}

.left {
  padding-block: 0;
}


.left .fixed-wrapper {
  display: contents;
}

.left img {
  left: 50%;
  max-width: 30vw;
  top: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
}

ul.collage li:nth-of-type(n+5) {
  display: none;
}

.right::before {
  background: rgba(var(--light-rgb), .3);
  content: '';
  display: block;
  height: 100%;
  left: -50%;
  position: absolute;
  right: -50%;
  top: 0;
  z-index: -1;
}

.right .intro {
  padding-block: 2em 1em;
}

.find {
  padding-block: 1.5em 2em;
}

.find input[type=search] {
  padding: .625em;
}


/* LANDING PAGES ------------------------------ */
.landing {
  padding-bottom: 2.5em;
}

/* PAGEHEADER ------------------------------ */
.pageheader {
  padding-block: 1em;
}

.pageheader .breadcrumb {
  margin: 0 0 .5em;
}

.pageheader .details {
  margin: .5em 0 0 1.5rem;
}

/* SEARCH PAGE ------------------------------ */
#search form {
  margin: 0 0 1.5em;
  text-align: center;
}

#search form > label {
  display: block;
  margin: 1em 0;
}

#search form > label {
  display: block;
  margin: 1em 0;
}

#search form input[type=search]{
  margin: 0 0 1em;
  width: 100%
}

#search form .grades {
  justify-content: center;
}

#search table a {
  display: block;
  min-width: 15em;
}

#search form {
  padding-inline: var(--ws-gutter);
}

#search section>.wrap {
  padding: 0;
}


/* RESPONSIVE TABLES ------------------------------ */
.table > .wrap {
  padding-inline: 0;
}

.table-responsive {
  border: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: var(--ws-gutter);
  position: relative;
  width: 100%;
  z-index: 0
}

.table-responsive table {
  min-width: 100%;
}

.table-wrap {
  padding-top: 1.5em;
  position: relative;
}

.table-wrap::before,
.table-wrap::after {
  color: #666;
  font-size: .8em;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all .3s ease;
}

.table-wrap::before {
  content: '\2039\00A0scroll';
  left: .5em;
}

.table-wrap::after {
  content: 'scroll\00A0\203A';
  right: .5em;
}

.table-wrap.scroll-left::before,
.table-wrap.scroll-right::after {
  opacity: 1;
}

.table-wrap .scroll {
  position: relative
}

.table-wrap .scroll::before,.table-wrap .scroll::after {
  bottom: 0;
  content: '';
  height: 100%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: all .3s ease;
  width: 4em;
  z-index: 1
}

.table-wrap .scroll::before {
  background: linear-gradient(90deg,rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
  left: 0
}

.table-wrap .scroll::after {
  background: linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(0,0,0,.3) 100%);
  right: 0
}

.table-wrap.scroll-left .scroll::before,.table-wrap.scroll-right .scroll::after {
  opacity: 1
}

.table-responsive th {
  padding-inline: .5em;
  white-space: nowrap;
}

.table-responsive td {
  padding-inline: .5em
}

colgroup col:first-of-type,
colgroup col:last-of-type {
  width: 1%;
}

/* INTRODUCTION RIBBON ------------------------------ */
.introduction {
  padding-block: 1.5em;
}

#course .introduction .wrap {
  flex-direction: column-reverse;
}

#course .introduction .details {
  margin-bottom: 2em;
  padding-inline: 1.5em;
}

#course .textbox>div {
  max-height: 15em;
}

#lesson .introduction .textbox>div {
  max-height: 20em
}


/* ACCORDIONS RIBBON ------------------------------ */
.accordions.gray {
  padding-block: .75em;
}


/* ~~~~~~~~~~~~~~~ STYLE-M.CSS ~~~~~~~~~~~~~~~ */