body {
overflow: hidden;
}

#homelink {
display: none;
color: white;
text-decoration: none;
line-height: 3em;
font-size: 1.2em;
font-weight: bold;
}

#celebration-wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

#celebration-wrapper > canvas {
position: absolute;
left : 0;
top: 0;
pointer-events: none;
z-index: 1000;
}

/* The Real Styles */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mig resets */

button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1;
margin: 0;
padding: 0;
outline: none;
border: none;
}

button,
select { 
text-transform: none;
}

/* -------------------------------- 

Fonts

-------------------------------- */

@font-face {
    font-family: 'open_sans_regular';
    src: url('../fonts/opensans-regular.woff2') format('woff2'),
         url('../fonts/opensans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'open_sans_light_italic';
    src: url('../fonts/opensans-lightitalic.woff2') format('woff2'),
         url('../fonts/opensans-lightitalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'open_sans_light';
    src: url('../fonts/opensans-light.woff2') format('woff2'),
         url('../fonts/opensans-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'open_sans_italic';
    src: url('../fonts/opensans-italic.woff2') format('woff2'),
         url('../fonts/opensans-italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'open_sans_extrabold_italic';
    src: url('../fonts/opensans-extrabolditalic.woff2') format('woff2'),
         url('../fonts/opensans-extrabolditalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'open_sans_extrabold';
    src: url('../fonts/opensans-extrabold.woff2') format('woff2'),
         url('../fonts/opensans-extrabold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'open_sans_bold_italic';
    src: url('../fonts/opensans-bolditalic.woff2') format('woff2'),
         url('../fonts/opensans-bolditalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'open_sans_bold';
    src: url('../fonts/opensans-bold.woff2') format('woff2'),
         url('../fonts/opensans-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* -------------------------------- 

Base HTML Elements

-------------------------------- */
body {
    font-family: open_sans_regular;
    font-size: 1.5vw;
    line-height: 1;
    color: #fff;
    background: #338cfe;
}

html, 
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}

/* Page level elements */
.page-head-block {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
background: #33A7FF;
color: #fff;
z-index: 1;
}

.home-back-nav {
background: url(../ui/home-button.svg) right center no-repeat;
  
display: block;
width: 8.75vw;
height: 4.584vw;
position: relative;
}

.home-back-nav em {
background: url(../ui/back-arrow.svg) right center no-repeat;
  
text-indent: -999em;
position: absolute;
width: 3vw;
height: 3vw;
top: 50%;
margin-top: -1.5vw;
}

/* utils */
.scrollable::-webkit-scrollbar {
display: none;
}

.scrollable {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
scroll-behavior: smooth; 
  
overflow-y: scroll;
}

.hidden {
display: none;
}

.modal-overlay {
position: absolute;
z-index: 100;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
opacity: 0;
pointer-events: none;
  
transition: opacitiy 1s;
}

.modal-overlay.show {
opacity: 1;
pointer-events: all;
}

.modal-overlay > .modal-container,
.modal-overlay > .video-js{
width: 82vw;
height: 47vw;
left: 50%;
top: 50%;
margin: -23.5vw 0 0 -41vw;
border: 1.5vw solid #fff;
}

.modal-overlay > .close {
width: 5vw;
height: 5vw;
position: absolute;
right: 50%;
top: 50%;
z-index: 1;
margin-right: -42.5vw;
margin-top: -24.5vw;
border-radius: 5vw;
text-indent: -999em;
background: url(../ui/BTL_close-btn.svg) 50% 50% no-repeat;
}

.modal-overlay > .close:hover {
cursor: pointer;
}

/* -------------------------------- 

Lander View

-------------------------------- */

.lander-view .page-head-block .logo {
display: block;
text-indent: -999em;
position: absolute;
width: 15vw;
background: url('../ui/BTL_flag-logo.svg') 50% 50% no-repeat;
height: 10vw;
z-index: 1;
top: 0.5vw;
}

.lander-view .page-head-block .nav-block {
    position: absolute;
    background: #8833ff;
    width: 9vw;
    left: 1.5vw;
    top: 1.5vw;
    border-radius: 2vw;
    padding: 9vw 0 2vw 0;
    display: flex;
    flex-direction: column;
}

.lander-view .page-head-block .nav-block .nav-item {
flex: 0 0 9vw;
margin: 0;
border-radius: 2vw 0 0 2vw;
text-indent: -999em;
background: url(../ui/nav-icons_home.svg) top center no-repeat;
background-size: 80%;
}

.lander-view .page-head-block .nav-block .nav-item.active { 
background-image: url(../ui/nav-icons_home.svg), url(../ui/nav-button-bkgrnd.svg);
background-position: bottom right, center right;
background-size: 95%, cover;
background-repeat: no-repeat;
margin: 0 -1px 0 1.5vw;
}

.lander-view .page-head-block .nav-block .nav-item.video {
background-image: url('../ui/nav-icons_video.svg');
}

.lander-view .page-head-block .nav-block .nav-item.video.active {
background-image: url(../ui/nav-icons_video.svg), url(../ui/nav-button-bkgrnd.svg); 
}

.lander-view .page-head-block .nav-block .nav-item.profile {
background-image: url('../ui/nav-icons_profile.svg');
}

.lander-view .page-head-block .nav-block .nav-item.profile.active {
background-image: url(../ui/nav-icons_profile.svg), url(../ui/nav-button-bkgrnd.svg); 
}

.lander-view .page-head-block .nav-block .nav-item.home-links {
background-image: url('../ui/nav-icons_home-links.svg');
}

.lander-view .page-head-block .nav-block .nav-item.home-links.active {
background-image: url(../ui/nav-icons_home-links.svg), url(../ui/nav-button-bkgrnd.svg); 
}

.lander-view .content-wrapper {
display: block;
width: 86vw;
padding: 4vw 4vw 0 0;
position: absolute;
top: 8vw;
bottom: 0;
right: 0;
}

.lander-view .content-wrapper::-webkit-scrollbar {
width: 1em;
display: block;
}

.lander-view .content-wrapper::-webkit-scrollbar-thumb {
background-color: #b5bd23;
border-radius: 1vw;
}

.lander-view .content-wrapper::-webkit-scrollbar-corner {
opacity: 0;
}

.lander-view .page-head-block {
height: 8vw;
position: static;
width: 100vw;
}

.lander-view .page-head-block .page-title {
font-family: open_sans_extrabold;
font-size: 2vw;
text-transform: uppercase;
position: absolute;
left: 16vw;
line-height: 8vw;
color: #acd9f4;
}

.lander-view .page-head-block .logout-btn {
position: absolute;
right: 2vw;
top: 2vw;
width: 4vw;
height: 4vw;
border-radius: 50%;
background: #08659f url(../ui/log-out.svg) 50% 50% no-repeat;
background-size: 60%;
/* text-indent: -999em; */ /* Until there is a user for class filters */
}

.lander-view .page-head-block .logout-btn em {
color: #acd9f4;
font-family: 'open_sans_regular';
font-size: 1.4vw;
position: relative;
left: -6.5vw;
top: -0.2vw;
text-transform: uppercase;
}

.lander-view .page-head-block .logout-btn:hover {
cursor: pointer;
background-color: #acd9f4;
background-image: url(../ui/log-out_hover.svg);
}

[data-id=class-group-select] {
position: absolute;
right: 7vw;
top: 2vw;
  
display: none; /* Until there is a user for class filters */
}

[data-id=class-group-select] .label {
display: inline-block;
vertical-align: middle;
margin-right: 0.5vw;
}

[data-id=class-group-select] .select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';

display: inline-block;
font-family: open_sans_extrabold;
font-size: 1.4vw;
text-transform: uppercase;
line-height: 3.5vw;
color: #fff;
padding: 0 4.5vw 0 1.5vw;
border-radius: 2vw;
vertical-align: middle;
background: #0766a0 url(../ui/swap-icon.svg) 94% 50% no-repeat;
background-size: 2.4vw;
border: 0.25vw solid #0966A0;
}

[data-id=class-group-select] .select:hover {
border-color: #a9dafd;
color: #fff;
cursor: pointer;
}


.content-cta {
display: block;
padding: 3vw 0 3vw 12vw;
background: #3341ff;
border-radius: 30px;
position: relative;
}

.content-cta h3 em {
font-family: open_sans_extrabold;
font-size: 3vw;
display: block;
margin: 1vw 0;
width: 46vw;
line-height: 1.2;
}

.content-cta h3 b{
width: 44vw; 
display: block;
line-height: 1.2;
}

.hero-cta {
position: relative;
}

.hero-cta .hero-image {
width: 100%;
}

.hero-cta .arrow-btn {
width: 26vw;
bottom: 2vw;
top: auto;
line-height: 6vw;
}

#resume-block:before {
content: '';
display: block;
width: 8vw;
height: 13vw;
background: url(../ui/bookmark.svg) no-repeat;
background-size: contain;
position: absolute;
left: 3vw;
top: -0.5vw;
}

#resume-block.hidden{
display: none;
}

.arrow-btn {
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    display: block;
    position: absolute;
    width: 17vw;
    right: 3vw;
    top: 50%;
    margin-top: -3.375vw;
    border-radius: 2.2vw;
    font-size: 2.4vw;
    line-height: 6.75vw;
    font-family: open_sans_extrabold;
    color: #ffffff;
    padding: 0 2.5vw;
    cursor: pointer;
    background: #8833ff;
    transition: all 0.3s ease-in-out;
}

.arrow-btn:after {
content: '';
position: absolute;
top: 2.2vw;
right: 2.2vw;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 0.6em solid rgba(255,255,255, 0.4);
}

#resume-block .arrow-btn {
line-height: 5.75vw;
}

#resume-block .arrow-btn:after {
top: 1.666vw;
}

.arrow-btn.red {
background-color: #E55129;
}

.content-grid {    
margin: 3vw 0;
position: relative;
}

.home-links-page .content-grid {
margin-top: 0;
}

.home-links-page.is-student .page-head-block .nav-block {
display: none;
}

.content-grid .content-grid-section {
position: relative;
margin: 5% 0;
}

.content-grid .section-head {
font-family: open_sans_extrabold;
font-size: 2vw;
padding: 0.5vw 0;
color: #ffffff;
margin-bottom: 2vw;
}

.content-grid .section-head.star-head {
text-transform: none;
}

.content-grid .section-head > button {
display: block;
background: transparent;
float: left;
color: #a9dafd;
margin-right: 0.5vw;
}

.content-grid .section-head > button:hover {
cursor: pointer;
}

.content-grid .section-head-action {
position: absolute;
right: 0;
top: -0.5vw;
line-height: 2vw;
text-transform: uppercase;
color: #a9dafd;
display: flex;
}

.grid-items {
transition: all 1s;
}

.collapsed .grid-items {
height: 0;
overflow: hidden;
}

.collapsed .section-head-action {
opacity: 0;
pointer-events: none;
}

.content-grid .section-head-action.select-group {
right: 1vw;
}

.content-grid .section-head-action label {
align-self: center;
}

.content-grid .section-head-action select {
appearance: none;
background: #065a8e;
color: #a9dafd;
line-height: 1.4;
padding: 1vw 3vw 1vw 1.5vw;
border-radius: 4vw;
margin-left: 4%;
border: 0.25vw solid #0966A0;
}

.content-grid .section-head-action select:hover {
border-color: #a9dafd;
color: #fff;
cursor: pointer;
}

.content-grid .section-head-action.select-group:hover::after {
background-color: #fff;
}

.content-grid .section-head-action.select-group::after {
content: "";
width: 0.8em;
height: 0.5em;
background-color: #a9dafd;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
position: absolute;
top: 2vw;
right: 0.25vw;
}

.content-grid .grid-items {
display: flex;
flex-wrap: wrap;
margin-bottom: 2vw;
/*justify-content: space-between;*/
gap: 3vw;
}

.content-grid .grid-items li {
width: calc(71vw * (1/4));
display: inline-block;
height: calc(71vw * (1/5));
background: #fff;
border-radius: 2vw;
margin: 1.5vw 0;
overflow: hidden;
transition: transform 0.5s;
}

.content-grid .grid-items li.hide {
transform: scale(0);
display: none;
}

.content-grid .grid-items.video-thumbs li {
background: url(../ui/video-film-btn.svg) 50% 0 no-repeat;
background-size: cover;
position: relative;
height: calc(71vw * (1/4));
}

.content-grid .grid-items.video-thumbs li > a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.content-grid .grid-items.video-thumbs .video-thumb {
width: 94%;
display: block;
background: #2b333f;
margin: 25% 3%;
position: relative;
padding: 0;
pointer-events: none;
}

.content-grid .grid-items.video-thumbs .video-label {
position: absolute;
font-size: 1vw;
background-color: #2196de;
bottom: 0;
height: 4vw;
left: 0;
right: 0;
color: #fff;
text-align: center;
display: flex;
align-items: center;
padding: 0 1vw;
pointer-events: none;
}

#video-playlist-grid li a > * {
color: #FFB234;
}

#video-playlist-grid li a > b {
background-color: #FFB234;
color: #fff;
}

#video-playlist-grid li {
width: calc(71vw * (1/3));
}

#home-links-playlist-grid li a > * {
color: #2694d9;
}

#home-links-playlist-grid li a > b {
background-color: #2694d9;
color: #fff;
border-radius: 2vw 2vw 0 0;
}

#home-links-playlist-grid li a > i {
white-space: normal;
width: 80%;
}

#home-links-playlist-grid li {
width: calc(71vw * (1/3));
position: relative;
overflow: visible;
}

#home-links-playlist-grid li .arrow-btn {
margin-top: 0;
margin-left: 0;
left: auto;
top: auto;
right: -22%;
bottom: -18%;
transform: scale(0);
transform-origin: center;
color: #fff;
background: #FFB234 url(../ui/video-icon.svg) 10% 50% no-repeat;
background-size: 22%;
padding: 0 5vw 0 7vw;
text-align: right;
width: fit-content;
}

#home-links-playlist-grid li:hover .arrow-btn{
transform: scale(0.6);
}
/*
    Home Link Shared Story Grid
*/


#home-links-SharedStory-playlist-grid li a > * {
    color: #ffcf00;
}

#home-links-SharedStory-playlist-grid li a > b {
    background-color: #ffcf00;
    color: #fff;
    border-radius: 2vw 2vw 0 0;
}

#home-links-SharedStory-playlist-grid li a > i {
    white-space: normal;
    width: 80%;
}

#home-links-SharedStory-playlist-grid li {
    width: calc(71vw * (1/3));
    position: relative;
    overflow: visible;
}

#home-links-SharedStory-playlist-grid li .arrow-btn {
        margin-top: 0;
        margin-left: 0;
        left: auto;
        top: auto;
        right: -22%;
        bottom: -18%;
        transform: scale(0);
        transform-origin: center;
        color: #fff;
        background: #FFB234 url(../ui/video-icon.svg) 10% 50% no-repeat;
        background-size: 22%;
        padding: 0 5vw 0 7vw;
        text-align: right;
        width: fit-content;
    }

#home-links-SharedStory-playlist-grid li:hover .arrow-btn {
        transform: scale(0.6);
    }


/*
    Home Link This Weeks Shared Story Grid
*/

#home-links-today-SharedStory-playlist-grid li a > * {
    color: #ff9600;
}

#home-links-today-SharedStory-playlist-grid li a > b {
    background-color: #ff9600;
    color: #fff;
    border-radius: 2vw 2vw 0 0;
}

#home-links-today-SharedStory-playlist-grid li a > i {
    white-space: normal;
    width: 80%;
}

#home-links-today-SharedStory-playlist-grid li {
    width: calc(71vw * (1/3));
    position: relative;
    overflow: visible;
}

#home-links-today-SharedStory-playlist-grid li .arrow-btn {
        margin-top: 0;
        margin-left: 0;
        left: auto;
        top: auto;
        right: -22%;
        bottom: -18%;
        transform: scale(0);
        transform-origin: center;
        color: #fff;
        background: #FFB234 url(../ui/video-icon.svg) 10% 50% no-repeat;
        background-size: 22%;
        padding: 0 5vw 0 7vw;
        text-align: right;
        width: fit-content;
    }

#home-links-today-SharedStory-playlist-grid li:hover .arrow-btn {
    transform: scale(0.6);
}


/*.content-grid .grid-items li:nth-child(4n+4) {
margin-right: 0;
} 

.content-grid .grid-items li.margin-fix {
 margin-right: 0 !important; 
}

.content-grid .grid-items.no-nth-fix li:nth-child(4n+4) {
margin: 1.5vw 3vw 1.5vw 0;
}*/

.content-grid .grid-items li a {
display:block; 
height: 100%;
text-decoration: none;
font-family: 'open_sans_extrabold';
font-size: 1.5vw;
}

.content-grid .grid-items li a > * {
display: block; 
width: 100%;
color: #bbbbbb;
font-size: 1.5em;
padding: 0 1.5vw;
}

.content-grid .grid-items li a > b {
font-size: 1em;
background-color: #bbbbbb;
line-height: 2.25em;
color: #fff;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.content-grid .grid-items li a > em {
font-size: 1.4em;
line-height: 1.1;
padding-top: 0.75vw;
padding-bottom: 0.75vw;
}

.content-grid .grid-items li a > i {
document.querySelector('#activities-completed').classList.add('hidden');font-size: 0.75em;
line-height: 1.4;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.content-grid .grid-items li.fast-track a > * {
color: #FFB234;
}

.content-grid .grid-items li.fast-track a > b {
background-color: #FFB234;
color: #fff;
}

.content-grid .grid-items li.shared-story a > * {
color: #ff6530;
}

.content-grid .grid-items li.shared-story a > b {
background-color: #ff6530;
color: #fff;
}

.content-grid .grid-items li.star a > * {
color: #2694d9;
}

.content-grid .grid-items li.star a > b {
background-color: #2694d9;
color: #fff;
}

/* -------------------------------- 

Activity View

-------------------------------- */
.activity-view .page-head-block {
height: 11.823vw;
padding-left: 12vw;
padding-top: 1.75vw;
}

.activity-view .page-head-block > * {
display: block;
margin-bottom: 0.4vw;
}

.activity-view .page-head-block .home-back-nav {
position: absolute;
left: 1.4vw;
top: 1.75vw;
}

.activity-view .page-head-block #activity-title [data-id=block-title] {
font-family:open_sans_extrabold;
font-size: 2.25vw;
display: block;
width: 100%;
line-height: 1.3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.activity-view .page-head-block #activity-title [data-id=block-title].small-text {
font-size: 1.71875vw;
margin-top: 0.5vw;
}

.activity-view .page-head-block #playlist-info {
font-size: 1.71875vw;
width: 80%;
}

.activity-view .page-head-block #activity-title {
width: 80%;
margin-top: -6px;
}

/* media container */

.activity-view .content-wrapper {
position: absolute;
top: 8.4vw;
bottom: 0;
left: 0;
right: 17vw;
z-index: 2;
}

#media-container {
background: lightgray;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
border: 0;
left: 4.8vw;
/*flex: 1 1 auto;*/
}

/* playlist containers */
.playlist-view {
display: block;
position: absolute;
width: 17vw;
z-index: 2;
}

.playlist-view ul {
display: flex;
flex-direction: column-reverse;
align-items: center;
width: 100%;
position: relative;
}

#activities-lineup {
right: 0;
top:11.823vw;
padding-top: 21vw;
bottom: 37vh;
margin-bottom: -10vw;
}

#activities-lineup ul:after {
content: '';
display: block;
position: absolute;
width: 0.5vw;
background-color: #2694D9;
top: -22vw;
bottom: 0;
left: 50%;
margin-left: -0.25vw;
z-index: -1;
}

#activities-completed {
left: -17vw;
top: 0;
bottom: 0;
background: #044A76;
overflow: visible;
transition: transform 0.5s;
opacity: 1;
transform: translateX(0);
}

#activities-completed.hidden {
opacity: 0;
pointer-events: none;
transform: translateX(-4vw);
}

#activities-completed ul {
flex-direction: column;
height: fit-content;
}

#activities-completed.open{
transform: translateX(17vw);
}

#activities-completed .flag-button {
position: absolute;
bottom: 1vw;
width: 9.313vw;
height: 6.813vw;
border-radius: 0 1.5625vw 1.5625vw 0;
right: -9.313vw;
background: #0774B8 url(../ui/completed-check.svg) no-repeat;
background-size: 56%;
background-position: 80% 50%;
transition: background-position 0.3s, background-color 0.3s;
  
transform: scale(0.75);
transform-origin: bottom left;
}

#activities-completed .flag-button > em {
position: absolute;
left: -999em;
}

#activities-completed .flag-button .count-bubble {
font-family: open_sans_extrabold;
font-size: 1.2vw;
color: #fff;
line-height: 2.5vw;
  
position: absolute;
background: #7babd5;
text-indent: unset;
display: block;
bottom: 0.75vw;
right: 7%;
width: 2.5vw;
height: 2.5vw;
border-radius: 2.5vw;
  
transition: right 0.3s;
}

#activities-completed .flag-button:after {
content: '';
position: absolute;
top: 50%;
margin-top: -1.75vw;
left: 1vw;
border-top: 1.75vw solid transparent;
border-bottom: 1.75vw solid transparent;
border-right: 1.75vw solid #A9D9FD;
  
transition: opacity 0.3s;
}

#activities-completed.open .flag-button:after {
opacity: 0;
}

#activities-completed.open .flag-button {
background-position: 50% 50%;
}

#activities-completed.open .flag-button .count-bubble{
right: 16%;
}

#activities-completed .flag-button:hover {
background-color: #A9D9FD;
}


#activities-completed .flag-button:hover:after {
border-right-color: #0774B8;
}

#activities-completed .flag-button:hover .count-bubble {
background-color: #0774B8; 
}

#activities-completed .scroll-wrapper {
width: 100%;
height: 100%;
padding-top: 78vh;
}

.preview-box {
cursor: pointer;
display: block;
align-items: center;
justify-content: center;
padding: 0;
position: relative;
width: 195px;
height: 110px;
border-radius: 1.5625vw;
background: #96c9f3;
overflow: hidden;
margin-bottom: 1.4vw;
}

.preview-box {
transform: translateY(90%);
transition: transform 0.5s, opacity 0.5s;
}

.preview-box.hidden {
display: none;
}

.preview-box.playing {
transition-delay: 0;
transform: translateX(-14vw);
opacity: 0;
}

.preview-box.next-up {
transform: scale(1.2) translateY(84%);
transition-delay: 0.5s;
}

.preview-box.next-up:after {
content: 'Next Up';
display: block;
background: #ffffff;
color: #217dbc;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-family: open_sans_extrabold;
font-size: 1.2vw;
text-transform: uppercase;
padding: 0.4vw 0;
pointer-events: none;
}

.preview-image {
display: block;
width: 100%;
}

p.preview-image {
text-align: center;
width: 100%;
height: 100%;
color: #0e659f;
font-family: open_sans_extrabold;
font-size: 1vw;
display: flex;
justify-content: center;
align-items: center;
line-height: 1.2;
padding: 0.5vw;
}

p.preview-image em {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;  
overflow: hidden;
}

.next-up p.preview-image em {
margin-top: -1.75vw;
font-size: 0.9vw;
}

.next-up p.preview-image {
font-size: 1vw;
}

/*.preview-box.next-up {
overflow: visible;
}*/

#activities-done-btn {
font-family: open_sans_extrabold;
width: 12vw;
margin: 0 2.5vw;
position: absolute;
bottom: 3vw;
font-size: 2vw;
line-height: 5vw;
background: #034a77 url(../ui/completed-check.svg) no-repeat 87% 28%;
background-size: 25%;
color: #ffffff;
text-transform: uppercase;
text-align: left;
padding-left: 1.5vw;
padding-bottom: 1.5vw;
border-radius: 1.5vw;
  
transform: translateY(-58vh);
transition: transform 0.5s;
}

#activities-done-btn i {
position: absolute;
font-size: 1.1vw;
line-height: 1;
display: block;
top: 4vw;
}

#activities-done-btn.show {
transform: translateY(0);
}

/* Playlist Controls */
.playlist-controls {
position: absolute;
width: 16vw;
right: 0.75vw;
bottom: 0;
height: 19vh;
display: flex;
}

.page-head-block .playlist-controls {
right: -2vw;
top: 2vw;
display: none; /* Hiding since it's not being used in this version */
}

.playlist-controls > button {
flex: 1 1 auto;
background: transparent;
cursor: pointer;
}

.playlist-controls > button .label {
color: #A9D9FD;
font-family: open_sans_extrabold;
font-size: 1.2vw;
line-height: 1.2;
display: block;
padding-top: 5.5vw;
  
background-repeat: no-repeat;
background-size: 60%;
background-position: center top;
}

.playlist-controls #next-activity .label{
background-image: url(../ui/next-activity.svg);
background-position: 50% 0.5vw;
}

.playlist-controls #next-activity.disable {
opacity: 0.3;
}

.playlist-controls .settings-btn .label {
background-image: url(../ui/settings.svg);
background-size: 52%;
}

#previous-activity {
position: absolute;
bottom: 0;
left: 50%;
z-index: 100;
height: 3vw;
display: none;
}

/* celebrate button and containers */
#celebrate-btn {
width: 8.5vw;
height: 8.5vw;
background: #FF6530 url(../ui/celebrate.svg) 50% 34% no-repeat;
background-size: 80%;
border-radius: 10vw;
box-shadow: 0px 0.75vw 0px #E2501E;
border: none;
outline: none;
position: absolute;
right: 4vw;
top: 1vw;
text-indent: -999em;
transition: box-shadow 0.3s, top 0.3s;
pointer-events: all;
}

.playlist-controls #celebrate-btn {
position: relative;
right: 0;
transform: scale(0.75);
}

#celebrate-btn:hover {
cursor: pointer;
}

#celebrate-btn.pressed {
box-shadow: 0px 0px 0px #E2501E;
top: 1.75vw;
pointer-events: none;
}

#loader-overlay {
position: fixed;
top:0;
left: 0;
bottom: 0;
right: 0;
background: #0966A0;
background: #034a77;
display: block;
opacity: 1;
z-index: 1000000;
  
transition: opacity 0.5s;
transition-delay: 2s;
}

#loader-overlay p {
font-family: open_sans_extrabold;
font-size: 5vw;
color: #fff;
line-height: 5vw;
width: 30vw;
display: block;
text-align: center;
position: absolute;
top: 50%;
margin-top: -2.5vw;
left: 50%;
margin-left: -15vw;
}

#loader-overlay.hide {
opacity: 0;
pointer-events: none;
}

#loader-overlay p span {
transform: scale(0.75);
opacity: 0.15;
display: inline-block;
transform-origin: 50% 82%;
animation: point-bounce 1s linear infinite;
}

#loader-overlay p span:nth-child(1) {
animation-delay: 0.33s;
}

#loader-overlay p span:nth-child(2) {
animation-delay: 0.66s;
}

@keyframes point-bounce{
  0% {
    transform: scale(.75);
  }

  20% {
    transform: scale(1.25);
    opacity: 0.5;
  }

  50% {
    transform: scale(.75);
  }
}

/* Single View */
.single-view #activities-completed,
.single-view #activities-lineup {
display: none;
}

.single-view #celebrate{
right: 2vw;
}

.single-view .playlist-controls #next-activity {
opacity: 0;  
}

.single-view #media-container {
left: 10vw;
}

/* public view (shared link) */
.public-view #home-button {
display: none;
}

.activity-view.public-view .page-head-block {
padding-left: 5vw;
}

/* Login */
.login-wrapper {
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 10000000;
background-color: #0d659f;
background-image: url(../ui/lander-lions.png), url(../ui/lander-books.png);
background-repeat: no-repeat, no-repeat;
background-position: center bottom, left bottom;
background-size: 45%, 100%;
}

.login-wrapper.hide {
display: none;
}

.login-wrapper .big-logo { 
display: block;
width: 30vw;
height: 30vw;
background: url(../ui/BTL-Reading-Roots_big-logo.png) left center no-repeat;
background-size: 100%;
text-indent: -999em;
}

.login-wrapper .choice-triggers {
position: absolute;
width: 30vw;
height: fit-content;
right: 3vw;
top: 6vw;
  
transform: translateX(0);
transition: transform 1s;
}

.login-wrapper .choice-triggers.hide {
transform: translateX(50vw);
}

.login-wrapper .choice-triggers .arrow-btn {
background: #A9D9FD;
color: #33A7FF;
width: 100%;
position: relative;
top: 0;
right: 0;
margin: 0 0 3vw;
padding: 0 2.5vw 0 0;
border-radius: 5vw;
}

.login-wrapper .choice-triggers .arrow-btn:after {
border-left-color: #2974B8;
}

.login-wrapper .choice-triggers .arrow-btn:hover {
background-color: #b5bd23;
color: #fff;
}

.login-wrapper .choice-triggers .arrow-btn:hover:after {
border-left-color: #fff;
}

.login-wrapper .login-form {
position: absolute;
width: 36vw;
height: 30vw;
top: 2vw;
right: 3vw;
  
transform: translateX(50vw);
transition: transform 1s;
}

.login-wrapper .login-form.show {
transform: translate(0);
}

.login-wrapper .login-form .input-group {
display: block;
margin: 2vw 0;
}

.login-wrapper .login-form .input-group > * {
display: block;
width: 100%;
}

.login-wrapper .login-form .input-group label {
font-size: 2vw;
margin-bottom: 1.5vw;
color: #ffffff;
}

.login-wrapper .login-form .input-group input {
padding: 1vw;
font-size: 2vw;
}

.login-wrapper .login-form .arrow-btn {
position: relative;
margin: 0;
left: 0;
right: 0;
top: auto;
}

.login-wrapper .login-form .form-close {
position: absolute;
right: 0;
width: 4vw;
height: 4vw;
text-indent: -999em;
background: url(../ui/BTL_close-btn.svg) 50% 50% no-repeat;
background-size: contain;
}

.login-wrapper .login-form .form-close:hover {
cursor: pointer;
}

.login-wrapper .login-form .alert-danger {
  background: rgba(255,0,0,1);
  border-radius: 5px;
  padding: 10px;
  font-weight: bold;
  visibility: hidden;
}

.login-wrapper .login-form .alert-danger.show {
  visibility: visible;
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}