@charset "UTF-8";

body#index #mobileBreadcrumb {
   background: #fff;
}

h2#heading {
   color: rgb(109, 184, 236);
}

.icon-chevron-up {
   background-image: url(../img/icon_sprites_2x.png);
   width: 41px;
   height: 23px;
   background-position: -464px -72px;
   background-size: 808px 109px;
}
.button .icon-chevron-up,
.button .icon-chevron-down {
   background: url(../dca/img/white_arrow.png) no-repeat;
   align-self: center;
   width:16px;
   height:16px;
}

.icon-bars:before {
   content: "\61";
}

.icon-times:before {
   content: "\65";
}

* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}
html, body, #wrapper {
   height:100%;
}

body {
   margin-top: 0;
}

#index #mainContent {
   background: white;
}

nav {
   width: 50px;
   transition: width 0.3s;
   display: none;
   flex: 1 auto;
}

nav.active {
   width: 250px;
   height: 100%;
   overflow-y: scroll;
}

.section {
   flex: 1 1 100%;
}

#index .banner {
   background: url("../dca/img/indexBG.png") 0 0 repeat;
   width: 100%;
   border-top: 4px solid #fff;
   background-size:contain;
}

#index .banner .group {
   max-width: 1024px;
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   justify-content: center;
   padding: 20px;
}

#index .banner .sprite1 {
   width: 86px;
   height: 86px;
   align-self: center;
}

#index .banner .sprite2 {
   display: none;
   align-self: center;
   height: 133px;
   width: 116px;
   margin-left:auto;
}

#index .banner #heading {
   align-self: center;
   margin: 0 0 0 20px;
   color: #fff;
   text-align: center;
}

.vocab.center {
   width: 100%;
   max-width: 663px;
}

.vocab.center.materials {
   margin-top:20px;
}

.video.center {
   width:80%;
   margin-bottom:80px;
}

#mainContent {
   position: absolute;
   top: 60px;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

h1#sectionHeading {
   max-width: 1024px;
   margin: 0 auto;
   padding: 20px;
}

#printHeader {
   display: none;
   margin:0;
}

#printHeader h1, #printHeader h2 {
   padding: 10px 0;
}
#printHeader p {
   margin: 10px 0;
}

#closeBox {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 99;
   background: rgba(255, 255, 255, 0.1);
   display: none;
}

#closeBox.active {
   display: block;
}

#footerContainer {
   max-width: 1024px;
   margin: 0 auto;
}

#footer {
   background: #fff;
   width: 100%;
   border-bottom: 12px solid #6db8ec;
}

#footer .group {
   margin: 43px 20px 0;
}

#footer .f8sprite {
   background-image: url(../img/f8_sprites_2x.png);
   clear: both;
   margin-left: 10px;
   width: 120px;
   height: 66px;
   background-position: -182px -2px;
   background-size: 318px 244px;
}

hr {
   clear: both;
}

a {
   color: #000;
   text-decoration: none;
}

.index.main #tagline {
   width: 100%;
   margin: 0 auto;
}

#content {
   padding: 20px;
   max-width: 804px;
   width: 100%;
   background: #fff;
   flex: 1 100%;
}

.hide {
   display: none;
}

p {
   margin: 20px 0;
}

#tagline p {
   padding: 5px 0;
}

p#tagline.cyo {
   margin-top:0;
}

ul .list ul.bullet-list {
   list-style: disc outside;
}
ul .list ol.bullet-list {
   list-style: decimal outside;
}

.bullet-list {
   margin: 20px 20px 20px 40px;
}

.bullet-list ul {
   margin-left:20px;
   list-style: disc outside;
}

.columns {
   columns: 2;
}

.centered {
   text-align: center;
   display: block;
   width: 80%;
   margin: 10px auto;
}

.menu,
.submenu {
   list-style-type: none;
   text-align: left;
}

.submenu {
   display: none;
   width: 100%;
}

.submenu-active .submenu {
   display: block;
}

.item.has-submenu.active {
   background: none;
}

.logo {
   font-size: 20px;
   min-width: 200px;
}

.item {
   flex-wrap: wrap;
   width: 100%;
   display: flex;
   text-align: left;
   order: 1;
}

.item.active,
.subitem.active,
.item.active:hover {
   background: #ffd166;
}

.item.active a {
   color: #003651;
}

.menu .lesson-button a.arrow.sprite1 {
   width: 213px;
   height: 87px;
   overflow: hidden;
   background: url(../dca/img/plans_button.png);
   margin: 0 auto;
   /*text-indent: -999px;*/
}
.menu .lesson-button a.arrow.sprite1 div {
   width:120px;
   font-family: source_sans_pro, sans-serif;
   color:#6db8ec;
   font-weight: bold;
   text-align: left;
   padding:6px 0 0 13px;
   font-size: 1.1rem;
   line-height: 1.5rem;
}
.menu .lesson-button a.arrow.sprite1:hover {
   background-position-y: -87px;
}

.menu .item .subitem.has-submenu a:hover {
   color: #000;
}

.item.overview:not(.active) a:hover,
.item .subitem:not(.active) a:hover,
.menu .item .subitem.has-submenu .subitem:not(.active) a:hover {
   color: #ffd166;
}

#navbar .main-breadcrumb a,
#navbar .main-breadcrumb span {
   color: #fff;
   padding: 18px 0;
   display: inline-block;
}

#navbar .main-breadcrumb a:hover {
   text-decoration: underline;
}

#navbar a.f8sprite {
   display: block;
   float: left;
   width: 40px;
   height: 60px;
   background-position: 4px 7px;
   background-repeat: no-repeat;
   margin-left: 15px;
   background-image: url(../img/f8_sprites_2x.png);
   padding: 0;
}

#navbar,
#mobileBreadcrumb {
   width: 100%;
   font-weight: 600;
   font-size: 1.18rem;
   line-height: 1.6rem;
}

.main-breadcrumb {
   display: none;
}

#mobileBreadcrumb {
   color: #8c8c8c;
   padding: 20px 0px 0px 20px;
}

#mobileBreadcrumb a:link,
#mobileBreadcrumb a:visited {
   color: #3954aa;
}

#navbar {
   height: 60px;
   position: fixed;
   z-index: 3;
   background: #6db8ec;
   color: #003651;
}

#navbar #mainButton {
   margin-left: auto;
   padding: 18px;
   background-image: url(../dca/img/button_home.png);
   width: 52px;
   height: 51px;
   text-indent: -99999px;
   margin-top: 5px;
   margin-right: 5px;
   cursor: pointer;
}

.breadcrumb-container {
   max-width: 1024px;
   margin: 0 auto;
   display: flex;
   white-space: nowrap;
   flex-wrap: wrap;
}

.flex-container {
   display: flex;
   flex-flow: row;
   justify-content: space-around;
}

#overview #content .big-buttons .button {
   border: 1px solid #333;
}

#overview #content .small-buttons .button {
   width: 33%;
}

#index #heading {
   margin: 0 auto;
}

#index .index-button {
   background: white;
   border: 3px solid #6db8ec;
   border-radius: 20px;
   margin: 1%;
}

#index .index-button:hover div, #index .index-button:hover {
   border-color: #78cdfe;
}
#index .index-button:hover div {
   background: #78cdfe;
}

.line-break {
   width: 100%;
}

#index .index-button.printables h3 {
   border-radius: 20px;
   background: #fff;
   border: 3px solid #6db8ec;
}

#index .index-button div {
   background: #6db8ec;
   border-radius: 14px 14px 0 0;
   padding: 10px;
}

#index .index-button h4 {
   text-align: left;
   color: #fff;
   padding-right: 40px;
}

#index .index-button p {
   padding: 10px;
   margin: 0;
}

#index .index-button .sprite1 {
   background-image: url(../img/icon_sprites_2x.png);
   background-position: -771px -12px;
   background-size: 808px 109px;
   width: 19px;
   height: 19px;
   margin: 0;
   float: right;
}

#index .index-button.printables {
   width: 300px;
   border: 0;
}

#content #box {
   width: 90%;
   margin: 0 auto;
   background: #ccc;
   display: flex;
   flex-wrap: wrap;
   padding: 1em;
   max-width: 500px;
}

#content .button {
   padding: 1em;
   margin: 1em 0;
   background: #6db8ec;
   border-radius: 16px;
   text-align: center;
   width: 40%;
   max-width: 250px;
   color: #fff;
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
}

#about #content .flex-container {
   flex-wrap: wrap;
}

#about #content .flex-container .button {
   width: 100%;
   max-width: 100%;
   background: #fff;
   border: 3px solid #6db8ec;
   border-radius: 20px;
   color: #003651;
   font-weight: bold;
   font-size: 1.5rem;
   padding: 18px 0;
}

#content .list-button {
   width: 100%;
   display: block;
   margin: 1rem 0;
}

#content .button.next {
   margin-left: auto;
}

#content .button:hover {
   background: #78cdfe;
}

#content .button.prev, #content .button.next {
   max-width:250px;
}

.button.prev .icon-chevron-up {
   margin-right:10px;
   transform: rotate(-180deg);
}

.button.next .icon-chevron-up {
   margin-left:10px;
}

#content #box div {
   width: 50%;
   text-align: center;
}

#content #modelNav:not(.venn) {
   display: none;
   flex-wrap: nowrap;
   flex-direction: row;
   justify-content: center;
   list-style: none;
   margin: 20px auto;
   padding: 0;
   text-align: center;
}

#modelNav.venn .outline-left,
#modelNav.venn .outline-right {
   position: absolute;
   /*border: 6px solid #6db8ec;*/
   border-radius: 50%;
   width: 280px;
   z-index: 3;
   opacity: 1;
   cursor: default;
   pointer-events: none;
}
#modelNav.venn .outline-right {
   right: 25px;
}

#modelNav.venn {
   position: relative;
   display: none;
   width: 490px;
   margin: 30px auto;
   list-style: none;
}

#modelNav.venn li {
   /*opacity: 0.6;*/
   color: #003651;
   text-align: center;
   margin: 0;
   padding: 0;
   width: 245px;
   height: 250px;
   z-index: 2;
}

#modelNav.venn li:not(.selected) span {
   text-decoration: underline;
}

#modelNav.venn li div.circle-container,
#modelNav.venn li .cross-section-left,
#modelNav.venn li .cross-section-right {
   width: 280px;
   height: 250px;
   border-radius: 50%;
   border: 3px solid #d9d9d9;
}

#modelNav.venn li span {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.cross-section-container,
.mask-left,
.mask-right {
   overflow: hidden;
   width: 100%;
   height: 250px;
   position: absolute;
}

.mask-left {
   width: 48px;
}
.mask-right {
   width: 48px;
   right: 3px;
}

#modelNav.venn li.selected.left .circle-container, #modelNav.venn li.selected.right .circle-container {
   background:#CBE6F8;
}

#modelNav.venn li .cross-section-left,
#modelNav.venn li .cross-section-right {
   position: absolute;
   background-color: #F9F9F9;
}

#modelNav.venn li.selected .cross-section-left,
#modelNav.venn li.selected .cross-section-right, #modelNav.venn li.select-left .cross-section-left, #modelNav.venn li.select-right .cross-section-right {
   border: 6px solid #6db8ec;
   background-color: #CBE6F8;
}
#modelNav.venn li.select-left .cross-section-left, #modelNav.venn li.select-right .cross-section-right {
   background-color:#F9F9F9;
}

#modelNav.venn .cross-section-right {
   right: 0;
}

#modelNav.venn li.left span {
   left: 37%;
}
#modelNav.venn li.right span {
   left: 80%;
}

#modelNav.venn li.selected.right:before {
   left: 70%;
}

#modelNav.venn li.cross-section {
   border: 0;
   position: absolute;
   left: 47.8%;
   width: 98px;
   transform: translate(-50%, 0%);
}

#modelNav.venn li.cross-section div.circle-container {
   border: none;
   width: 100%;
}

#modelNav.venn li.left div {
   background-color: #F9F9F9;
   padding-right: 60px;
}

#modelNav.venn li.right {
   margin-left: -60px;
}
#modelNav.venn li.right div {
   background-color: #F9F9F9;
   padding-left: 60px;
}

#modelNav.venn li.selected:not(.cross-section) div {
   border: 6px solid #6db8ec;
}
#modelNav.venn li.selected {
   color: #003651;
   opacity: 1;
   font-size: 1.3rem;
   line-height: 1.5rem;
}
#modelNav.venn
   li.selected:not(.cross-section):not(.outline-left):not(.outline-right) {
   z-index: 1;
}
#modelNav:not(.venn) li.selected:after,
#modelNav:not(.venn) li.selected:before {
   content: " ";
   transform: translate(-50%, 115%);
   z-index: -1;
   bottom: 0%;
   left: 50%;
   border: solid transparent;
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
}

#modelNav.venn li.selected:before {
   content: " ";
   transform: translate(50%, 0%);
   left: 46%;
   top: 86%;
   width: 3px;
   height: 96px;
   z-index: -1;
   background: #6db8ec;
   position: absolute;
}

#modelNav.square li.selected:after,
#modelNav.square li.selected:before {
   transform: translate(-50%, 127%);
}

#modelNav:not(.venn) li.selected:before {
   border-color: rgba(51, 51, 51, 0);
   border-bottom-color: #6db8ec;
   border-width: 25px;
   /*margin-left: -36px;*/
}

#modelNav:not(.venn) li.selected:after {
   border-color: rgba(51, 51, 51, 0);
   border-bottom-color: #fff;
   border-width: 25px;
   bottom: -4px;
   /*margin-left: -34px;*/
}

#content #modelNav.arrow {
   padding: 0 30px 0 0;
   justify-content: space-evenly;
   max-width: 600px;
}

#content #modelNav.arrow li {
   padding: 0 5px;
   width: 25%;
}

#content #modelList.number {
   padding: 0;
}

.step {
   font-size: 1.4rem;
   line-height: 1.7rem;
   padding-top: 7px;
}
.step-number {
   font-size: 2.5rem;
}

#modelNav .icon,
#modelList.number .icon {
   border: 5px solid #fff;
   border-radius: 50%;
   text-align: center;
   width: 95px;
   height: 95px;
   display: block;
   font-size: 30px;
   line-height: 90px;
   background-size: cover;
   background-position: center;
   margin: 0 auto;
}

#modelList.number .icon,
#modelNav.number .icon {
   background: #6db8ec;
   color: #fff;
   font-weight: bold;
   clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
   -webkit-clip-path: polygon(
      75% 0%,
      100% 50%,
      75% 100%,
      0% 100%,
      25% 50%,
      0% 0%
   );
   border: 0;
   border-radius: 0;
   width: 133px;
   margin-bottom: 10px;
   line-height: 35px;
   padding-top: 13px;
}

#modelList.number .icon {
   clip-path: polygon(0% 0%, 50% 25%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
   -webkit-clip-path: polygon(
      0% 0%,
      50% 25%,
      100% 0%,
      100% 75%,
      50% 100%,
      0% 75%
   );
   width: 95px;
   height: 133px;
   position: absolute;
   left: 50%;
   top: -30px;
   transform: translate(-50%, -100%);
   padding-top: 37px;
}

#modelNav.square .selected .icon,
#modelNav.square .icon {
   border-radius: 0;
   border: 0;
   width: 100%;
   margin-bottom: 10px;
   background-size: cover;
   background-position: center;
}

#modelNav.square li {
   border: 5px solid #fff;
   width: 168px;
   background: #eee;
}

#modelNav li {
   z-index: 1;
   font-size: 1rem;
   line-height: 1.2rem;
   color: #003651;
   font-weight: bold;
   cursor: pointer;
   vertical-align: top;
   padding: 1%;
   margin: 7px 0;
   width: 150px;
   position: relative;
}

#modelNav.number span {
   width: 108px;
   display: block;
   margin: 0 auto;
   text-align: center;
}

#modelNav.number li:nth-child(4) span {
   width: 120px;
}

#modelNav.number .selected .icon {
   background: #ffd166;
   color: #003651;
}
#modelNav.square .selected,
#modelNav.circle .selected .icon {
   border: 5px solid #6db8ec;
}

#modelList li.hide {
   display: block;
}

#modelList li,
#modelList li.hide {
   width: 100%;
   padding: 20px;
   margin: 20px auto;
   list-style: none;
   border: 3px solid #6db8ec;
   border-radius: 20px;
   position: relative;
}

#modelList.number li,
#modelList.number li.hide {
   padding: 20px;
   margin-bottom: 100px;
   margin-top: 200px;
}

#content #modelList {
   text-align: left;
   margin: 0;
}
#content #modelList.venn {
   padding: 20px 0;
}
#modelList.venn li,
#modelList.venn li.hide {
   position: relative;
   margin: 10px auto;
}

#model .slide div {
   bottom: 0;
   text-align: left;
}

#modelList img {
   margin: 0 auto;
   width:100%;
   max-width: 100%;
}

#modelNav.circle .icon {
   width: 80px;
   height: 80px;
}

#modelList.circle .model-list-content img {
   width: 70%;
   margin: 0 auto;
   float: none;
}

#modelList.circle .model-list-item {
   border: none;
   padding: 0 0 30px 0;
}

#modelList.circle .model-list-item hr {
   display: none;
}

.model-list-content {
   overflow: hidden;
}

#content .model-list-content ul {
   list-style-type: disc;
   clear: left;
}

#modelList li .model-list-content li {
   border: none;
   width: auto;
   margin: 0;
   padding: 0;
   display: list-item;
   overflow: unset;
}

#tns1 > .tns-item {
   position: relative;
}

.tns-nav {
   text-align: center;
}

.tns-nav button {
   border-radius: 20px;
   display: inline-block;
   vertical-align: top;
   width: 20px;
   height: 20px;
   background: rgba(52, 122, 170, 0.25);
   margin: 10px;
}

.tns-nav button.tns-nav-active {
   background: rgba(52, 122, 170, 1);
}

#btn-next-slide,
#btn-prev-slide {
   outline: none;
   border: none;
   position: absolute;
   width: 50px;
   cursor: pointer;
   height: 100%;
   z-index: 3;
   background: none;
   font-size: 3em;
   color: #fff;
   text-align: center;
}

button {
   outline: none;
   border: none;
}

#btn-next-slide {
   right: 0;
}

#btn-next-slide i {
   display: block;
   position: absolute;
   top: 50%;
   -webkit-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
}

#btn-prev-slide {
   left: 0;
}

#btn-prev-slide i {
   display: block;
   position: absolute;
   top: 50%;
   -webkit-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
}

.activ-slides {
   margin: 0 auto;
   overflow: hidden;
   max-width: 658px;
   min-height: 500px;
   background: #f5f5f5;
   position: relative;
}

.slider-container {
   max-width: 1000px;
   margin: 0 auto;
   overflow: hidden;
   position: relative;
   width: 100%;
}

.controls [aria-controls] {
   display: block;
}

.controls [disabled] {
   display: none;
}

.my-slider {
   position: relative;
}

.slide {
   width: 100%;
}

.slide div {
   position: absolute;
   bottom: 2.6rem;
   padding: 9px 2%;
   margin: 0 auto;
   color: #fff;
   background: rgba(0, 0, 0, 0.7);
   line-height: 1.5625rem;
   font-size: 1.25rem;
   width: 100%;
}

.slide img {
   margin: 0 auto;
   max-width: 98%;
   display: block;
   border: 0;
}

.slide img.screenshot {
   max-width:62%;
}

.slide.slide-in-left {
   left: -100%;
   -webkit-animation: slide 0.5s forwards;
   animation: slide 0.5s forwards;
}

.slide.slide-out-left {
   left: 0%;
   -webkit-animation: slideOut 0.5s forwards;
   animation: slideOut 0.5s forwards;
}

.slide.slide-in-right {
   left: 100%;
   -webkit-animation: slide 0.5s forwards;
   animation: slide 0.5s forwards;
}

.slide.slide-out-right {
   left: 0%;
   -webkit-animation: slideOutR 0.5s forwards;
   animation: slideOutR 0.5s forwards;
}

.collapsible-container {
   border: 3px solid #6db8ec;
   border-radius: 20px;
   padding: 1em;
   margin: 1em 0;
   width: 100%;
}

.collapsible {
   position: relative;
   display: block;
   width: 100%;
   user-select: none;
   cursor: pointer;
}

#content .collapsible h2 {
   padding: 0;
   margin: 0;
}

.collapsible .icon-chevron-up {
   position: absolute;
   right: 0;
   top: 20%;
   transition: transform 0.2s;
   transform: rotate(180deg);
}

.collapsible.active .icon-chevron-up {
   transform-origin: center;
   transform: rotate(0deg);
}

.collapsible-content {
   display: none;
   max-height: 0;
   overflow: hidden;
   width: 100%;
   padding: 20px 0 0 0;
   transition: max-height 0.2s ease-out;
}

.collapsible-content img {
   display: block;
   margin: 0 auto;
}

.collapsible-content a {
   text-decoration: underline;
}

#lessons #actContainer img {
   margin: 20px auto;
   display: block;
   width: 100%;
   max-width: 600px;
}

#details {
   display: none;
}

#activityContainer {
   padding: 20px;
   background: white;
   width: 100%;
}

#activityContainer #tagline {
   text-align: left;
}

#vocab,
#mobileVocab {
   border: 3px solid #6db8ec;
   border-radius: 16px;
   margin: 20px 0;
   padding: 10px;
}

#vocab h2,
#mobileVocab h2 {
   margin: 5px;
}

#content.index #vocab ul {
   margin: 0;
}

#vocab li,
#mobileVocab li {
   color: #707070;
   margin: 0 18px 5px 32px;
   font-size: 1.0625rem;
   line-height: 1.3125rem;
}

#details p, #mobileDetails p {
   color: #707070;
   margin: 0;
   font-size: 1.25rem;
   line-height: 1.68rem;
}

#info {
   flex: 1 100%;
   display: none;
   padding: 0 20px 20px 20px;
}

#lesson #content.index h1 {
   padding: 20px;
}

#direction li {
   margin: 20px 0 20px 20px;
}

.prompt,
.prompt.activity.goals {
   border: 3px solid #6db8ec;
   border-radius: 20px;
   height: auto;
   overflow: hidden;
   position: relative;
}

.prompt.research {
   margin-bottom: 20px;
   height: auto;
}

.prompt.research .toggle span {
   width: 80%;
}

.prompt.research .list,
.prompt.research .prompt-header,
.prompt .item {
   display: none;
}
.prompt.research.active .prompt-header {
   display: block;
}
.prompt.research.active .list {
   display: list-item;
}

.prompt.research .toggle a {
   display: flex;
}

.menu .lesson-button {
   font-size: 1rem;
   text-align: center;
   margin: 50px 0;
}

.menu .toggle a {
   color: #003651;
   font-weight: bold;
   font-size: 1.3rem;
   line-height: 1.5rem;
}

.prompt .toggle a {
   color: #003651;
   font-size: 1.8125rem;
   line-height: 2.1875rem;
   padding: 11px 57px 8px 15px;
   width: 100%;
   display: block;
   position: relative;
}

.toggle .sprite1 {
   display: inline;
}

.prompt.research .toggle .sprite1 {
   width: 41px;
   height: 38px;
}

.toggle span {
   width: 70%;
   display: inline-block;
   font-size: 1.3rem;
   margin-left: 10px;
}

.btn-expand {
   float: right;
   margin: 20px 0;
   width: 180px;
   cursor: pointer;
}

#goalsList {
   clear: both;
}

.prompt.activity p:first-child {
   margin:0 0 20px 0;
}

.prompt.materials .list img {
   width: 261px;
   display: inline-block;
   margin:0 20px 20px 0;
   vertical-align: top;
}

#lesson .prompt.materials .btn-small {
   margin-left:0;
}

#lesson .prompt.materials .btn-small .sprite {
   background-position: -642px -63px;
   background-image: url(../img/icon_sprites_2x.png);
   background-size: 808px 109px;
}

.prompt.materials .list ol ul {
   margin-left:40px;
}

.prompt.activity .toggle .act-title {
   margin: 0 17px 10px 0;
   flex:0 0 100%;
}

.prompt.activity .toggle .time {
   margin-left: 0;
   margin-right: 20px;
   width:auto;
}

.prompt.activity .toggle .sprite1 {
   align-self: center;;
}

.prompt.activity.goals .item {
   margin: 0;
}

.item.img img {
   max-width: 250px;
   width:100%;
}
.activity .item.img {
   padding:20px 0 20px 20px;
}

.prompt.activity.goals h5,
.prompt.activity.goals p {
   padding: 0 10px;
}
#direction .bullet-list li {
   margin: 0;
}
#direction .prompt .prompt-header {
   list-style: none;
}
#direction .prompt .toggle {
   margin: 0;
   user-select: none;
}

#lesson #activityContainer #model {
   width: 100%;
}

#lesson #activityContainer .quote {
   color: #6ba4e7;
   font-weight: bold;
}

.prompt.materials,
.prompt.goals {
   margin: 20px 0;
   list-style: none;
}

.prompt.materials .list {
   display: none;
}

.prompt.materials .list ol {
   margin-left: 20px;
   margin-right: 10px;
}

.prompt.materials .toggle a {
   font-size: 2.1875rem;
   line-height: 2.5rem;
}

.prompt.activity {
   display: flex;
   flex-wrap: wrap;
   margin: 10px 0;
   width: 100%;
}

.prompt.activity .toggle a {
   font-size: 1.4rem;
   line-height: 1.8rem;
   display: flex;
   flex-wrap: wrap;
}

#introContainer .goals {
   margin-left: 20px;
}

.activity .item,
.goals .item {
   flex: 1 100%;
   background: none;
   border: none;
   border-radius: 0;
   width: 100%;
   padding: 20px;
   margin: 0;
}

.goals .item,
.goals.active .item {
   display: list-item;
   list-style: disc outside;
   font-size: 1.2rem;
   line-height: 1.5rem;
   padding: 0px 5px;
   margin: 10px 20px 10px 30px;
   width: 95%;
}

.activity .item:hover,
.goals .item:hover {
   background: none;
}

.prompt.prep.goals .item,
.prompt hr,
.prompt.activity .item {
   display: none;
}

.prompt.prep.goals.active .item,
.prompt.active hr {
   display: list-item;
}

.prompt.activity.active .item {
   display: block;
}

.prompt.prep.goals li ul {
   margin-left: 0px;
}

.prompt.goals ul {
   list-style: disc outside;
   margin: 20px 0 20px 40px;
}

.prompt.goals ul li {
   margin: 5px;
}

.prompt .toggle {
   font-weight: bold;
   font-size: 1.5rem;
   line-height: 1.8rem;
}

.prompt.prep.goals .toggle a {
   padding-right: 60px;
}

.prompt.prep.goals .item {
   width: auto;
}

.prep.goals .toggle a,
.prep.goals div {
   font-size: 1.3rem;
   line-height: 1.5rem;
   padding: 20px 50px 20px 20px;
   color: #003651;
   font-weight: bold;
   width: 100%;
   display: flex;
   align-items: center;
}
.prep.goals div {
   padding: 20px;
}

.goals .item {
   list-style: disc;
}

.prompt .list,
#direction .prompt .list {
   list-style: disc outside;
   margin: 5px 5px 10px 40px;
}

.prompt.materials .list {
   display: none;
   margin-left: 20px;
}

.prompt.materials.active .list {
   display: block;
}

.toggle .sprite1.tablet-icon,
.toggle .sprite1.camera-icon {
   display: inline-block;
   width: 37px;
   height: 30px;
   margin-left: 0;
}

.toggle .sprite1.tablet-icon {
   background: url(../dca/img/tablet_icon.png) no-repeat 0 2px;
}
.toggle .sprite1.camera-icon {
   background: url(../dca/img/camera_icon.png) no-repeat 0 2px;
}

.activity-label.header {
   display: block;
   width: 270px;
   margin: 0 20px 20px 20px;
   margin-right: auto;
}

.activity-label .handson {
   background-image: url(../dca/img/handson_icon.png);
   background-repeat: no-repeat;
   background-position: 5px 16px;
}

.activity-label .app {
   /*background-image: url(../img/icon_sprites_2x.png);
   background-position: -687px -45px;*/
   background-image: url(../dca/img/tablet_icon.png);
   background-repeat: no-repeat;
   background-position: 12px 17px;
}

.activity-label .both {
   /*background-image: url(../img/icon_sprites_2x.png);
   background-position: -687px -45px;*/
   background-image: url(../dca/img/handsondigital_icon.png);
   background-repeat: no-repeat;
   background-position: 4px 14px;
}

.activity-label .sprite1 {
   float: left;
   margin-top: 5px;
   width: 60px;
   height: 60px;
   background-color: #fff;
   border-radius: 30px;
}

#details .activity-label p,
.activity-label p {
   font-size: 1.1875rem;
   line-height: 2.0625rem;
   margin: 3px 0 0 8px;
   color: #003651;
   display: inline-block;
   font-weight: 600;
   text-shadow: #e6bd44 1px 1px;
}

.activity-label {
   margin-bottom: 20px;
   height: 70px;
   max-width: 300px;
   overflow: hidden;
   white-space: nowrap;
   background: #fbd75c url(../img/label_stripe.png) repeat-x;
   border-left: 5px solid #fbd75c;
   border-radius: 35px 0 0 35px;
}

#mobileDetails .activity-label {
   display: none;
}

img.investigation-icon {
   margin: 0 0 20px 0;
   max-width: 83px;
}

#lessonHeader {
   display: flex;
   align-items: center;
   flex-flow: column wrap;
}

/* Mobile menu */

.menu {
   /*overflow-y: scroll;*/
   height: auto;
   position: relative;
}
#mobileNav .menu hr,
#mobileNav .menu .item,
#mobileNav .menu .lesson-button {
   display: none;
}
#mobileNav .menu.active hr,
#mobileNav .menu.active .item,
#mobileNav .menu.active .lesson-button {
   display: block;
}

.menu .toggle a {
   position: relative;
}

.menu li a {
   width: 100%;
   display: block;
   padding: 15px;
   border: 0;
   outline: 0;
}

.menu li.subitem a {
   padding: 15px 15px 15px 30px;
}

#mobileNav {
   border: 3px solid #6db8ec;
   border-radius: 20px;
   margin: 0 0 1rem 0;
}

#mobileNav .lesson-button a {
   border: 3px solid #6db8ec;
   border-radius: 20px;
   margin: 10px 5%;
   width: 90%;
   font-size: 1.5rem;
   line-height: 1.8rem;
   text-align: left;
   font-weight: bold;
   display: flex;
   align-items: center;
   padding: 5px 15px;
   color: #003651;
}

#mobileNav .lesson-button a:hover {
   background-color: rgba(107, 183, 234, 0.15);
}

#mobileNav .lesson-button .sprite1 {
   margin-left: auto;
}

#mobileNav .lesson-button a:hover {
   border: 3px solid #78cdfe;
}

.toggle .icon-chevron-up {
   position: absolute;
   right: 15px;
   top: 35%;
   transition: transform 0.2s;
   transform: rotateZ(0deg);
   color: #6db8ec;
}

.active .toggle .icon-chevron-up {
   transform: rotateZ(180deg);
}

#content #mobileNav .menu {
   margin: 0;
   padding: 0;
   height: 50px;
   overflow: hidden;
}

#content #mobileNav .menu.active {
   height: auto;
}

.toggle {
   font-size: 20px;
   display: block;
   width: 100%;
}

.toggle .time {
   background: #fbd75c;
   padding: 5px 8px 3px;
   margin: 9px 0 0 20px;
   font-size: 1.0625rem;
   line-height: 1.0625rem;
   text-transform: uppercase;
   color: #003651;
}

#lesson .prompt.activity .item,
#lesson nav .menu .item {
   font-size: 1rem;
   line-height: 1.2rem;
}

#lesson #heading {
   text-align: left;
}

.item {
   display: none;
}

.item {
   display: block;
   background: #6db8ec;
   border-radius: 20px;
   margin: 10px 10%;
   width: 80%;
   font-size: 1.3rem;
   line-height: 1.5rem;
}

#mobileNav .item {
   margin: 10px 5%;
   width: 90%;
}

.item a {
   font-weight: bold;
   color: #fff;
}

.item .text-link, a.text-link {
   color:#6db8ec;
   font-weight: bold;
   text-decoration: underline;
}

.item .text-link:hover {
   text-decoration: underline;
}

.item:hover {
   background: #78cdfe;
}

.active .item {
   display: block;
}

/* Submenu up from mobile screens */

.menu .submenu-active .has-submenu .submenu {
   display: none;
}

.menu .submenu-active .has-submenu.submenu-active .submenu {
   display: block;
}

.has-submenu .has-submenu .submenu .subitem {
   padding-left: 2em;
}

.submenu-active .submenu {
   display: block;
}

.has-submenu {
   cursor: pointer;
}

.has-submenu i {
   font-size: 12px;
}

.has-submenu .icon-chevron-up {
   font-family: "Font Awesome 5 Free";
   font-size: 12px;
   line-height: 16px;
   font-weight: 900;
   content: "\f078";
   margin-left: 1em;
   display: inline-block;
   transition: transform 0.2s;
   transform: rotate(90deg);
}

.has-submenu.submenu-active .icon-chevron-up {
   transform: rotate(180deg);
}

.subitem a {
   padding: 10px 15px;
}

.submenu-active {
   background-color: none;
   border-radius: 3px;
}

#content #lessons {
   width: 100%;
   max-width: 804px;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
}

#content #lessons h2,
#content #lessons p {
   flex: 1 100%;
}

#content #lessons p {
   margin-top:0;
}

#content .plan {
   margin: 0 auto;
}

#content .plan div {
   padding: 1em;
   margin: 1em;
   text-align: center;
   border: 3px solid #333;
   flex: 1 1 auto;
}

#content .plan img {
   margin: 0 auto;
   width: 100%;
}

#content .plan h3 {
   padding: 10px 10px 30px;
}

#content.index {
   max-width: 1024px;
}

#lesson #content.index {
   background: none;
   display: flex;
   flex-wrap: wrap;
   padding: 0;
}

#lesson #content.index h1,
#lesson #content.index #tagline,
#lesson #footer {
   flex: 1 100%;
}

.prompt .btn-small,
.collapsible-content a {
   background: #6db8ec;
   border-radius: 16px;
   color: #fff;
   font-weight: bold;
   padding: 6px 21px 5px 23px;
   text-decoration: none;
}

#lesson .prompt .btn-small {
   margin: 5px 20px 20px 16px;
   padding: 6px 21px 5px 23px;
   font-size: 1.25rem;
   line-height: 2.25rem;
   display: inline-block;
}

.prompt .btn-small:hover {
   background: #78cdfe;
}

#activityContainer .prev {
   float: left;
}

#activityContainer .next {
   float: right;
}

.center {
   display: block;
   margin: 0 auto;
   text-align: center;
}

.index-buttons-cont {
   display: grid;
   gap: 10px;
   margin: 30px 0;
   width: 100%;
}

.text-center {
   text-align: center;
   color: #707070;
}

.calendar-table {
   list-style: none;
   margin: 10px auto;
   width: 90%;
}

.calendar-table li {
   padding: 10px;
   font-size: 1.5rem;
   line-height: 1.8rem;
}

.calendar-table li b {
   padding-bottom: 10px;
   display: block;
}

.calendar-table li:nth-child(odd) {
   background-color: rgba(109, 184, 236, 0.3);
}

@media all and (orientation:landscape) {
   #modelList img {
      float:left;
      width:40%;
      margin: 0 20px 20px 0;
   }
}

@media only screen and (max-width: 768px) {
   #content > p {
      padding:10px 0;
   }
}