@font-face {
    font-family: "handofsean";
    src: url('../fonts/handsean.eot');
    src: url('../fonts/handsean.eot?#iefix') format('embedded-opentype'),
         url('../fonts/handsean.woff') format('woff'),
         url('../fonts/handsean.ttf') format('truetype'),
         url('../fonts/handsean.svg#handsean') format('svg');
    font-weight: normal;
    font-style: normal;
}
html, body {
    width: 100%;
    height: 97%;
    background: #fff;
}
/*#home .container {
    text-align: center;
    margin: auto;
    width: 95%;
    height: 97%;
    margin-top: 3%;
}*/
.container {
    width: 100%;
    height: 96%;
    margin-top: 3%;
    position: relative;
}
.container .masthead {
    position: relative;
    background: #0b3451;
    color: #ffc000;
    font-family: "handofsean";
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    z-index: 999;
    height: 57px;
}
.container .masthead .back_btn {
    position: absolute;
    top: 10px;
    right: 23px;
    background: #ffc000;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    border-radius: 12px;
    color: #0b3451;
}
.container .masthead .reset {
    position: absolute;
    top: 10px;
    left: 23px;
    background: #ffc000;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    border-radius: 12px;
    color: #0b3451;
}
.container .masthead .clear_txt {
    position: absolute;
    top: 10px;
    left: 150px;
    background: #ffc000;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    border-radius: 12px;
    color: #0b3451;
}
.home_header {
    display: flex;
    align-items: center;
    background: #0b3451;
    width: 100%;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    box-sizing: border-box;
    z-index: 999;
    gap: 8px;
}
.home_header_logo {
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.home_header_title {
    flex: 1;
    min-width: 0;
    color: #ffc000;
    font-family: "handofsean";
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.toggle_container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.toggle_container em {
    font-size: 15px;
    font-style: initial;
    display: inline-block;
    padding: 0 5px;
    position: relative;
    top: -2px;
    font-family: handofsean;
}
.toggle {
    border: 2px #ddd solid;
    width: 60px;
    border-radius: 32px;
    height: 26px;
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.toggle span {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 26px;
    background: #7d5089;
    position: absolute;
    top: 0;
}
.toggle .ks4 {
    right: 0;
}
.toggle .ks3 {
    left: 0;
}
.container .panel {
    display: inline-block;
    width: 31%;
    height: 32%;
    margin: 1%;            
    border-radius: 12px;
}
.container .panel:nth-of-type(1){
    background: #7d5089;
}
.container .panel:nth-of-type(2){
    background: #e0c559;
}
.container .panel:nth-of-type(3){
    background: #639b6d;
}
.container .panel:nth-of-type(4){
    background: #326c9c;
}
.container .panel:nth-of-type(5){
    background: #bb4b4c;
}
.container .panel:nth-of-type(6){
    background: #7d5089;
}
.container .panel:nth-of-type(7){
    background: #e0c559;
}
.container .panel:nth-of-type(8){
    background: #639b6d;
}
.container .panel:nth-of-type(9){
    background: #326c9c;
}
.container .panel a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 16px;
    color: #fff;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}
.container .panel:nth-of-type(1) a {
    background-image: url(../img/bg_icon_1.png);
}
.container .panel:nth-of-type(2) a {
    background-image: url(../img/bg_icon_2.png);
}
.container .panel:nth-of-type(3) a {
    background-image: url(../img/bg_icon_3.png);
}
.container .panel:nth-of-type(4) a {
    background-image: url(../img/bg_icon_4.png);
}
.container .panel:nth-of-type(5) a {
    background-image: url(../img/bg_icon_5.png);
}
.container .panel:nth-of-type(6) a {
    background-image: url(../img/bg_icon_6.png);
}
.container .panel:nth-of-type(7) a {
    background-image: url(../img/bg_icon_7.png);
}
.container .panel:nth-of-type(8) a {
    background-image: url(../img/bg_icon_8.png);
}
.container .panel:nth-of-type(9) a {
    background-image: url(../img/bg_icon_9.png);
}
.container .panel a span {
    font-family: "handofsean";
    position: absolute;
    bottom: 10px;
    display: block;
    width: 100%;
    text-align: center;
}
/* White tile labels fail WCAG AA contrast on the yellow (#e0c559, ~1.7:1) and
   green (#639b6d, ~3.3:1) tiles; both need >=4.5:1 for normal-size text. */
.container .panel:nth-of-type(2) a span,
.container .panel:nth-of-type(3) a span,
.container .panel:nth-of-type(7) a span,
.container .panel:nth-of-type(8) a span {
    color: #1a1a1a;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Home page links */
#app0 {
    height: 100%;
    width: 100%;
    font-size: 0;
}

/* Whiteboard - App 1 */
#app1 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
#app1 #whiteboard {
    width: 80vw;
    height: 80vh;
    margin: 20px auto 0;
}
#app1 .drawing-board-canvas {
    
}

/* Traffic Lights - app 2*/
#app2 {
    position: absolute;
    top: 0;
    width: 100%;
}

#app2 .traffic_lights {
    background-image: url(../img/traffic-lights.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    width: 80%;
    height: 85vh;
    text-align: center;
    margin: 20px auto 0;
    position: relative;    
}

#app2 .traffic_lights .trigger {
    width: 30%;
    height: 26%;
    position: absolute;
}
#app2 .traffic_lights .trigger0 {
    top: 15%;
    left: 35%;
}
#app2 .traffic_lights .trigger1 {
    top: 42%;
    left: 35%;
}
#app2 .traffic_lights .trigger2 {
    top: 70%;
    left: 35%;
}
#app2 .target {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    top: 100%;
    display: none;
    text-align: center;
} 
#app2 .target textarea {
    width: 90vw;
    height: 80vh;
    /*margin-top: 10vh;*/
    border: none;
    background: none;
    color: #000;
    font-size: 80px;
    margin-top: -20%;
    padding-top: 25%;
    position: relative;
}
#app2 .target0 {
    background: #f00;
}
#app2 .target0 textarea {
    color: #fff;
}
#app2 .target1 {
    background: #ffbe00;
}
#app2 .target2 {
    background: #0f0;
}

/* Postits - app 3 */
#app3 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
#app3 .postits_container {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#app3 .postit {
    position: absolute;
    width: 45vw;
    height: 35vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}
#app3 .postit span {
    position: absolute;
    bottom: 12px;
    font-size: 18px;
    text-transform: capitalize;
    background-image: url(../img/checkbox_black.png);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: top left;
    padding-left: 30px;
    height: 31px;
}
#app3 .postit span em {
    background-image: url(../img/tick_black.png);
    background-repeat: no-repeat;
    position: absolute;
    background-size: 24px;
    position: absolute;
    width: 24px;
    height: 24px;
    top: -3px;
    left: 3px;
    display: none;
}
#app3 .postit span.one {    
    left: 70px;    
}

#app3 .postit span.two {
    left: 220px;
}

#app3 .postit textarea {
    width: 70%;
    height: 55%;
    background: none;
    position: absolute;
    font-size: 24px;
    border: none;
}
#app3 .postit1 {
    top: 30px;
    left: 30px;
    background-image: url(../img/postit1.png);
}
#app3 .postit1 textarea {
    transform:rotate(-9deg);
    left: 30px;
    top: 40px;
}
#app3 .postit2 {
    top: 200px;
    right: 50px;
    background-image: url(../img/postit2.png);
}
#app3 .postit2 textarea {
    transform:rotate(-1deg);
    left: 60px;
    top: 50px;
} 
#app3 .postit3 {
    top: 500px;
    left: 50px;
    background-image: url(../img/postit3.png);
}
#app3 .postit3 textarea {
    transform:rotate(7deg);
    left: 60px;
    top: 50px;
} 
#app3 ul {
    padding: 0;
    margin: 2vw;
    width: 42vw;
    display: inline-block;
    vertical-align: top;
}
#app3 ul li {
    font-size: 24px;
    text-transform: initial;
    text-align: left;
    padding: 12px;
}

/* True and False page - app 4*/
#app4 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}#app4 .tf_container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;     
}
#app4 .true {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0f0;
    text-align: center;
}
#app4 .true span, #app4 .false span {
    font-size: 80px;
    position: relative; 
    top: 20%;
}
#app4 .false {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100%;
    background: #f00;
    text-align: center;
}


/* ABCD page - app 5 */
#app5 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
#app5 .app5_ks4 {
    height: 100%; 
    width: 100%; 
    position: relative;
}
#app5 .app5_ks3 {
    height: 100%; 
    width: 100%; 
    position: relative;
}
#app5 .app_active {
    display: block;
}
#app5 .app_passive {
    display: none;
}

#app5 .abcd_container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}
#app5 .slice {
   height: 100%;
   width: 100%;
   position: absolute;
   text-align: center;
}
#app5 .slice span {
    font-size: 80px;
    position: relative; 
    top: 7%;
}
#app5 .panel_a {
    background-color: #f6033d;
    top: 0;
}
#app5 .panel_b {
    background-color: #40b6ff;
    top: 25%;
}
#app5 .panel_c {
    background-color: #18ff11;
    top: 50%;
}
#app5 .panel_d {
    background-color: #fff936;
    top: 75%;
}

#app5 .app5_ks3 .panel_a {
    background-color: #40b6ff;
    top: 0;
}
#app5 .app5_ks3 .panel_b {
    background-color: #fff936;
    top: 25%;
}
#app5 .app5_ks3 .panel_c {
    background-color: #7d5089;
    color: #fff;
    top: 50%;
}
#app5 .app5_ks3 .panel_d {
    background-color: #18ff11;
    top: 75%;
}

/* App 7 - WWW / EBI */
#app7 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%; 
}
#app7 .wwwebi {
    width: 80%;
    height: 85vh;
    text-align: center;
    margin: 20px auto 0;
    position: relative;   
}
#app7 .wwwebi textarea {
    width: 100%;
    height: 90%;
    font-size: 80px;
    border: 0;
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center center;
}
#app7 .www {
    height: 40vh;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    border-bottom: 6px #000 solid;
}
#app7 .ebi {
    height: 40vh;
    width: 90%;
    margin: 20px auto 0;    
}
#app7 .www textarea {
    background-image: url(../img/bg_www.png);
    
}
#app7 .ebi textarea {
    background-image: url(../img/bg_ebi.png);
}
/* Literacy Tools - app 8 */
#app8 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
#app8 .tools_container {
    width: 90%;
    margin: 20px auto 0;
    position: relative;
    height: 90%;
}
#app8 .tools_container {
    width: 100%;
    
}
#app8 .tools_container .header {
    height: 165px;
    background-image: url(../img/header_literacy_tools.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    color: #7e2178;
    position: relative;
    width: 80vw;
    margin: 0 auto 20px;
}
#app8 .tools_container .row {
    display: table;
    border-spacing: 15px 10px;
    table-layout: fixed;
    width: 100%;
}
#app8 .tools_container .header span {
    text-transform: capitalize;
    font-size: 24px;
    position: absolute;
    bottom: 0;
    left: 25%;
}
#app8 .tools_container .box {
    width: 49%;
    border-radius: 16px;
    display: table-cell;
    
    padding: 8px;
    box-sizing: border-box;
    vertical-align: top;
}
#app8 .tools_container .box .hdr {
    width: 100%;
    min-height: 30px;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
}
#app8 .tools_container .box ul {
    padding: 0;
}
#app8 .tools_container .box li {   
    background-repeat: no-repeat;
    background-size: 22px 22px;
    list-style-type: none;
    text-transform: initial;
    padding: 0 0 12px 32px;
    font-size: 16px;
    position: relative;
}
#app8 .tools_container .box li em {
    position: absolute;
    left: 3px;
    top: -3px;
    background-size: 22px 22px;
    background-repeat: no-repeat;
    display: none;
    height: 22px;
    width: 22px;

}
#app8 .tools_container .box ul ul li {
    margin-left: 24px;
    background-size: 16px 16px;
    padding: 0 0 12px 24px;
}
#app8 .tools_container .box ul ul li em {
    background-size: 16px 16px;
    top: -2px;
    left: 2px;
}
#app8 .tools_container .box1 {
    border: 6px #f9b812 solid;
}
#app8 .tools_container .box1 .hdr {
    background-image: url(../img/header_literacy_spellingv2.png);
}
#app8 .tools_container .box1 li {
    background-image: url(../img/checkbox_orange.png);
}
#app8 .tools_container .box1 li em {
    background-image: url(../img/tick_orange.png);
}
#app8 .tools_container .box2 {
    border: 6px #13aabd solid;
}
#app8 .tools_container .box2 .hdr {
    background-image: url(../img/header_literacy_punctuationv2.png);
}
#app8 .tools_container .box2 li {
    background-image: url(../img/checkbox_blue.png);
}
#app8 .tools_container .box2 li em {
    background-image: url(../img/tick_blue.png);
}
#app8 .tools_container .box3 {
    border: 6px #e63b5d solid;
}
#app8 .tools_container .box3 .hdr {
    background-image: url(../img/header_literacy_presentationv2.png);
}
#app8 .tools_container .box3 li {
    background-image: url(../img/checkbox_red.png);
}
#app8 .tools_container .box3 li em {
    background-image: url(../img/tick_red.png);
}
#app8 .tools_container .box4 {
    border: 6px #68b42f solid;
}
#app8 .tools_container .box4 .hdr {
    background-image: url(../img/header_literacy_grammarv2.png);
}
#app8 .tools_container .box4 li {
    background-image: url(../img/checkbox_green.png);
}
#app8 .tools_container .box4 li em {
    background-image: url(../img/tick_green.png);
}
/* Emoji page - app 9 */
#app9 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
#app9 #emoji {
    text-align: center;
    width: 80%;
    margin: 40px auto 0;
    position: relative;
    height: 50vh;
}
#app9 #emoji div {
    height: 100%;
    width: 100%;
    background-image: url(../img/emojis/emoji_blank.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    position: absolute;
    top: 0;
    left: 0
}
#app9 ul.emoji_list {
    position: absolute;
    bottom: 0;
    width: 100%;
}
#app9 ul.emoji_list li {
    display: inline-block;
    width: 10%;
    height: 110px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 1%;
}
#app9 ul.emoji_list li:nth-of-type(1), #app9 #emoji .emoji_1 {
    background-image: url(../img/emojis/emoji_1.png);
}
#app9 ul.emoji_list li:nth-of-type(2), #app9 #emoji .emoji_2 {
    background-image: url(../img/emojis/emoji_2.png);
}
#app9 ul.emoji_list li:nth-of-type(3), #app9 #emoji .emoji_3 {
    background-image: url(../img/emojis/emoji_3.png);
}
#app9 ul.emoji_list li:nth-of-type(4), #app9 #emoji .emoji_4 {
    background-image: url(../img/emojis/emoji_4.png);
}
#app9 ul.emoji_list li:nth-of-type(5), #app9 #emoji .emoji_5 {
    background-image: url(../img/emojis/emoji_5.png);
}
#app9 ul.emoji_list li:nth-of-type(6), #app9 #emoji .emoji_6 {
    background-image: url(../img/emojis/emoji_6.png);
}
#app9 ul.emoji_list li:nth-of-type(7), #app9 #emoji .emoji_7 {
    background-image: url(../img/emojis/emoji_7.png);
}
#app9 ul.emoji_list li:nth-of-type(8), #app9 #emoji .emoji_8 {
    background-image: url(../img/emojis/emoji_8.png);
}
#app9 ul.emoji_list li:nth-of-type(9), #app9 #emoji .emoji_9 {
    background-image: url(../img/emojis/emoji_9.png);
}
#app9 ul.emoji_list li:nth-of-type(10), #app9 #emoji .emoji_10 {
    background-image: url(../img/emojis/emoji_10.png);
}
#app9 ul.emoji_list li:nth-of-type(11), #app9 #emoji .emoji_11 {
    background-image: url(../img/emojis/emoji_11.png);
}
#app9 ul.emoji_list li:nth-of-type(12), #app9 #emoji .emoji_12 {
    background-image: url(../img/emojis/emoji_12.png);
}
#app9 ul.emoji_list li:nth-of-type(13), #app9 #emoji .emoji_13 {
    background-image: url(../img/emojis/emoji_13.png);
}
#app9 ul.emoji_list li:nth-of-type(14), #app9 #emoji .emoji_14 {
    background-image: url(../img/emojis/emoji_14.png);
}
#app9 ul.emoji_list li:nth-of-type(15), #app9 #emoji .emoji_15 {
    background-image: url(../img/emojis/emoji_15.png);
}
#app9 ul.emoji_list li:nth-of-type(16), #app9 #emoji .emoji_16 {
    background-image: url(../img/emojis/emoji_16.png);
}

/*************************** MEDIA QUERIES FOR LANDSCAPE*******************************/
@media screen and (orientation:landscape) {
/* APP 3 Posits */    
    #app3 .postit span {
        bottom: -42px;
        left: 143px;
    }
    #app3 .postits_container textarea {
        width: 45%;
        height: 65%;
    }
    #app3 .postit1 textarea {
        left: 108px;
    }
    #app3 .postit2 {
        top: 140px;
        right: 0;
    }
    #app3 .postit2 textarea {
        left: 134px;        
    } 
    #app3 .postit3 {
        top: 350px;
        left: 230px;
    }
    #app3 .postit3 textarea {
        left: 132px;
    } 

/* APP 8 Literacy Tools */
    #app8 .tools_container .header span {
        left: 33%;
    }

/* APP 9 Emoji */
    #app9 #emoji {
        height: 45vh;
    }
}

/* Keyboard focus indicator for every interactive control, including the
   custom role="button"/"switch" widgets that have no native focus ring.
   A white ring plus an inset navy ring stays visible on both the dark tile
   backgrounds and the light page background, and outline-offset:-3px keeps
   it from being clipped by ancestors that set overflow:hidden (.abcd_container,
   .tf_container). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="switch"]:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px rgba(11, 52, 81, 0.85);
}