@charset "UTF-8";
/* CSS Document */
html{height: 100vh;}
body{background-color:#FFF;  color:#333333; line-height: 1.2em; font-size: 1.2em;font-family: 'Arial', sans-serif;height: 100vh;    margin: 0; overflow: hidden; }
body.printWindow{background-color:#FFF; font-size:80%;}

h1{    font-size: 1.2em;margin:0 0 10px 0;font-family: 'Heebo', sans-serif; color: #00427B; }
h2{ color:#2d2d2d;   font-size: 1.2em;font-family: 'Heebo', sans-serif; display: none;}
.popup h2, .cover h2{display:block;}
h3{ color: #2d2d2d;    font-size: 1.2em; font-family: 'Heebo', sans-serif;}
a{text-decoration:underline; color: #00427B;}
button{background: inherit; color: inherit;  font-weight: inherit;   font-size: inherit; border: inherit; display: inherit;     margin: inherit;     box-sizing: inherit;    text-align: inherit;     width: 100%;}
.container {text-align:center; width:100%;height: 100vh; overflow-y: hidden;}
.unitContent {height: 80vh;     overflow-x: hidden; overflow-y: scroll;  -webkit-overflow-scrolling: touch; display: flex; justify-content: center; align-items: center; width: 100%;}
.unitContent::-webkit-scrollbar { width: 0 !important;     display: none; }
.unitContent::-webkit-scrollbar-thumb { background: #FF0000;}


.headerContainer, .footerContainer{background-color: #00427B; height: 10vh; color: #FFF;  }
.headerContainer{display: flex; justify-content: space-between;     align-items: center; }
.headerLogo {       height: 10vh; width: 1em; float: left; margin-right: 1vh; display:none;}
.headerLogo img {        height: 4vh;  margin-top: 3vh;}
.headerHeading{font-family: 'Heebo', sans-serif; font-size: 3vh;  line-height: 3vh;  font-weight: 400; padding:1em; text-align: left;}
.headerMenu{   font-size: 3vh; line-height: 3vh;  padding: 1em; display: block;}
.headerMenu a{color: #FFF; }
.headerMenu .fas{       margin: 0 1.5vh;   font-size: 3vh;    line-height: 3vh;}
.menuButton{ display: none;}


.unitText{ display:none; text-align:left; padding:0; width:100%; max-width: 1400px; margin: 0 auto; height: 80vh;}
.unitTextSubPage{display:none;   }
/*.unitTextSubPage h2{display: none;}*/

.unitFlex{ display:flex; justify-content: center; align-items: center;     height: 80vh; width:100%}
.unitFlexRow{flex-direction: column;     justify-content: flex-start;}
.unitFlexRowStart{flex-direction: column; justify-content:flex-start; }
.unitFlexStart{ align-items: flex-start;}
.unitFlexImage{flex:1;     display: flex; justify-content: center;}
.unitFlexText{    padding: 20px;max-width: 800px; flex:1; max-height: 80vh;  width: calc(100% - 40px);}
.unitFlexRow .unitFlexText{flex:initial; }
.unitFlexTextThin {flex: 1}
.unitFlexImageAuto{min-width: inherit; flex: inherit; margin: 20px;}
.unitFlexImageWide {flex: 3; max-width: 1000px; max-height: 80vh;}
.divFlex{display:flex; justify-content: flex-start; align-items: flex-start;}
.divFlexRow{flex-direction: column;     justify-content: flex-start;}
.divFlexImage{}
.divFlexText{margin:1em;}

.footerContainer{    position: absolute; bottom: 0; width: 100vw; font-family: 'Heebo', sans-serif; display:flex; justify-content: space-between; align-items: center;}
.footerNav{display: flex;     flex: 1; justify-content: flex-end; align-items: center;}
/*Feedback like dislike*/
.unitPageFeedbackContainer {float:left; height: 10vh; }
.unitPageFeedbackQuestion{width: 100%; height: 4vh; font-size: 2vh; padding: 1vh 1vh 0 1vh;}
.unitPageFeedback{width: 40%; float:left; height: 5vh; font-size: 2vh;     text-align: right; padding-right: 10%; cursor: pointer; }
.unitPageFeedbackRight{text-align: left; padding-right: 0; padding-left: 10%;}
/*Feedback text*/
.unitPageFeedbackTextContainer{position: absolute; bottom: 10vh; height: 20vh; background-color: #000;     padding: 2vh; display: none;}
.unitPageFeedbackText{    text-align: center; font-size: .8em;  height: 15vh;}

.unitSubPageNavNumber {float:left; min-width:2em; text-align:center; margin: 1.5em 2px 0 0; padding: 0.2em 0; cursor: pointer;     font-size: .7em;}
.unitSubPageNavNumberContainer{display:none;}
.unitSubPageNavNextBack{text-align:center;   cursor:pointer;      width: auto;     font-size: 2.5vh; line-height: 2.5vh; background: none;}
#unit1SubPageSave{     font-weight: bold; padding-right: 1em; margin-right: 1em;}
.unitPagecount{font-size: 2.5vh; display: flex; justify-content: center; align-items: center; padding: 10px;}
#audioPlayer{text-align:center;      margin:10px; height: 40px}
.pageNumber{}
.totalPages{}

.ngoContent, .wachsContent{display: none;}

.button{background-color: #00427B; color: #FFF; text-align:center; line-height:1em; padding:.5em 1em; font-size:1em; cursor:pointer;    border: 0; }
.button .fas{margin-right: .5em;}
.rightButton{float: right;    margin-left: 1em;}
.leftButton{width: auto; margin-bottom: 10px;}
.printButton {width: auto;}
.greenButton{background-color: #1e5611;}
.greyButton{background-color: #F2F2F2;    color: #777;}
.disabled{opacity: .4!important; cursor: default;}
input, textarea, select{font-family: 'Arial', sans-serif; font-size: 1em;  color: #00427B; }
textarea{     width: 96%;padding: 1em 2%; }
select{display: block; border: 0;  }
.centredText{text-align: center;}
.redText{color: #912925;}
.yellowBg{background-color: #ffffd5; padding:20px;}
.centredImage{text-align: center;} .centredImage img{margin:0 auto;}
.coverBg{background-image:url("../img/squares.png"); background-size: auto; background-repeat: no-repeat; background-position: bottom right;}
.coverBgDark{background-image:url("../img/squaresdark.png"); }
.background1, .background2, .background3, .background4{background-color: #ECECEC; background-repeat: no-repeat; background-size:cover; background-position: center top;}
.background1{background-image:url("../img/village1.png?v=4");}
.background2{background-image:url("../img/village2.png?v=4");}
.background3{background-image:url("../img/village3.png?v=6");}
.background4{background-image:url("../img/field-bg.png");}
.quote{font-style: italic;}
.flex{display: flex;}

.round {border-radius: 10px;}
.invisible{display:none;}
.hidden{visibility: hidden;}
.highlighted {background-color:#00427b; border-radius:5px; color:#FFF; font-size:100%; padding:20px;  margin: 0;line-height: 150%; }
.highlighted a{color:#FFF}
a.printLink {display: flex; justify-content: center; align-items: center; text-decoration: none;}
a.printLink img{width:50px; height: auto; margin-right:20px;}
.noMarginTop{margin-top:0;}
.marginTop {margin-top:1em;}


.leftDiv, .rightDiv{float: left; width: 45%; padding-right: 5%;}
.leftDivLS{float: left; width: 65%; padding-right: 5%;} .rightDivLS{float: left; width: 25%; padding-right: 5%;}
.rightDiv{    background-color: #FFFFFF80; padding: 2em 0 10em 0;}
.leftDivBg{background-color: #CCD1D6; padding-right: 0; margin-right: 5%;}
.fullDiv{padding:0 5%; width: 100%;}
.leftDiv33{width: 33%; margin-right: 0;}
.divFixed_left{width: 740px; margin-right: 0; min-height: 500px;}
.divFixed_right{width: 20%; width: calc(100% - 760px); margin-right: 0;}
.image100{width: 100%; height: auto; }

/*COVER*/
.cover{position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #FFF; }
.coverLeft{float: left; width: 30%; background-color: #DDDDDD; height: 100%;}
.coverLeft img{    width: auto;  height: 100%;}
.coverRight{float: left; width: 70%; background-color: #00427B; height: 100%;}
.coverLogo{text-align: right; height: 70px;}
.coverLogo img{ height: 100%; width: auto;    margin: 1em 1em 0 0;}
.coverLogo img.coverLogoLeft{     margin: 1.5em 0 0 1em; float: left;  height: 80%;}
.cover h2{color: #FFF; font-size: 6vh;  line-height: 6vh; padding-top: 10vh;}
.cover h3{color: #FFF; font-size: 4vh;  line-height: 6vh; font-style: italic;          padding: 0 1vh 7vh 0;}
.coverInfo{color: #FFF; margin-left: 1em;}
.cover p{}
.coverNext{position: absolute; bottom: 1em; right: 1em; background-color: #3c652f; color: #FFF; width: auto;}
.cover .fas {}

/*TITLE*/
.titlePage h2{display: block; text-align: center; font-size: 6vw;  line-height: 6vw; margin-top: 10vh; }
.titlePage h3{text-align: center; font-size: 4vw;      line-height: 5vw; max-width: 80%;   margin: 0 auto; }

/*RESOURCES and KEY POINTS*/
#resourcesHolder, #keypointsHolder,.activityHolder  { padding:1em;}
.resourceItemHolder{margin: 1em 0 1em 0; clear: both; background-color: #f7f7f7; padding: 1em 0.5em;}
.downloadIcon, .websiteIcon {padding-right:0.5em;}
.resourceIcon{clear:both; float:left; width:40px;}
.resourcesContent a, .resourceList a{}
.resourcesContent li, .resourceList li{padding-bottom: .5em;}
.resourcesContent u, .resourceList u{color:#02427B; }

/*SPEECH BUBBLES from https://codingislove.com/css-speech-bubbles/*/
.speechbubble {width: 300px;background: #2d2d2d; padding: 20px;   text-align: center;  font-weight: 900; color: #fff;  position: relative;}
.sb:before { content: ""; width: 0px; height: 0px; position: absolute; border-width: 10px; border-style: solid;}
.sb_right:before{border-color: #2d2d2d transparent transparent #2d2d2d; right: -20px;  top: 6px;}
.sb_left:before{border-color: #2d2d2d #2d2d2d transparent transparent; left: -20px;  top: 6px;}
.sb_rightdown:before{border-color: transparent transparent #2D2D2D #2d2d2d; right: -20px;  top: 6px;}

.sb_bottomright:before{border-color: #2d2d2d #2d2d2d transparent transparent;  right: 19px;bottom: -19px;}
.sb_bottomleft:before{border-color: #2d2d2d transparent transparent #2d2d2d;  left: 20px;bottom: -19px;}

.sb_next, .sb_exit{background-color: #3c652f; border-color: #3c652f; position: absolute;  right: 2em;   bottom: 12vh;}
.sb_next:before{border-color: #3c652f #3c652f transparent transparent; }
.sb_exit:before{border-color: #3c652f transparent transparent #3c652f; }
.sb_resources, .sb_notes, .sb_print{ background-color: #A64F14; position: absolute;  right: 18vh;  top: 3vh;}
.sb_notes{right: 16vh;   width: 400px;}
.sb_print{    right: 15%;  top: 12vh; }
.sb_resources:before, .sb_notes:before, .sb_print:before{border-color: #A64F14 transparent transparent #A64F14; }
.sb_person{background-color: #00427B; border-color: #00427B; margin-top:1em; }
.sb_person:before{border-color: #00427B #00427B transparent transparent; }
.sb_person.sb_leftdown:before{border-color: transparent #00427B #00427B  transparent; left: -20px; top:20px;}


/*VIDEO*/
.videoHolder{margin-top: 5vh; margin-bottom: 5vh; text-align: center;  z-index: 0;}
video{width: 100%; height: auto; max-width: 640px; max-height: 360px;}
.popupVideoHolder video{max-width: none; max-height: none;}
.popupVideoHolder{margin: 0;     position: absolute;
    top: 5vh;
    left: 44px;
    width: calc(100% - 88px);}
.popupVideo{max-width: none; max-height: none;}
.videoFrameHolder{   }/*embedded videos*/
.videoFrame{    width: 640px; height: 360px;}/*embedded videos*/
.popupVideoHolder.videoFrameHolder{   position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }/*embedded videos in popups*/
.popupVideoHolder .videoFrame{position: absolute;  top: 0; left: 0; width: 100%; height: 100%;}/*embedded videos in popups*/

.videoTranscript{position: absolute;  bottom: calc(10px + 2.5em); background-color: rgb(45, 45, 45);  padding: 2em;    color: rgb(255, 255, 255); width: calc(100% - 88px);     z-index: 2000;}
.activitymapPageTranscript .fas{margin-left: .5em;}


/*TABLES*/
table {width:100%; padding:0; margin:0; text-align:left; border-spacing: 0; }
th {border:1px solid #ddd;text-align:left; background-color:#292929; font-weight:normal;  vertical-align:top; padding:0.4em; color:#FFF;}
td{border:1px solid #ddd; border-width: 0 1px 0 1px; padding:0.4em; vertical-align:top; margin:0;}
tr:nth-child(odd){background-color: #FFF;}
tr:nth-child(even){background-color: #CCD1D6;}
table p{margin-top:0;}
.tableLeft, .tableRight{width: 50%;}
label{    display: inline-block;padding-right: 1em;}
.labelText{}
fieldset{    border: 0;    padding: 0;}
caption{       position: absolute;   top: -1000px;}



/*ACTIVITIES*/
.feedback { background-color:#f2f2f2;  margin-top:1em; padding: 0.5em;   width: calc(100% - 1em); }
img.mark{padding:0 3px 0 0; margin:0;}
.activityBody{background-color:#FFFFFF; margin:0; }
#activityClose{float:right; display:none;}
.activityBg { }
.clearBoth{clear:both; } .clearNone{clear: none;}
.activityTextArea { background-color:#E1EBED;  padding:0.5em; width:80%; font-family:Helvetica, sans-serif; font-size:100%; border:1px solid #737373;}
.round {border-radius:1em;}
.invisible{display:none;}
.correct {background-color: #1e5611!important; color: #FFF!important;}
.incorrect {background-color: #912925!important; color: #FFF!important;}
.imgcorrect{margin-top:.5em;     line-height: 1em;}.imgcorrect img{ border:.2em solid #1e5611;}
.imgincorrect img{ border:.2em solid #912925;}

/*DRAG AND DROP STYLES*/
.markIcon{ vertical-align:middle;}
.dragItems {flex: 1;  margin:1em;    min-width: 300px;}
.dragItem{  background-color:#D9E7F4;  padding:0.3em; margin-bottom:0.5em; word-wrap: break-word; }
.dragItem img, .targetItem img{    height: 1.5em; width: 1.5em; margin: 0 0.5em 0.5em 0;  float: left; clear: both;   border-radius: 50%;     background-color: #FFF; }
.targetItems {flex:1; margin:1em;     min-width: 300px}
.targetItem{ background-color:#f8e08e; color: #333333;      padding: 0.5em 2%; margin-bottom:0.4em;background-position:top left; background-repeat:no-repeat; background-size:100% auto; border: 0.2em solid rgba(0,0,0,0.00);}
.targetHighlight { background-color:#00427Ba1;}
.dragdropFeedback {}
.targetItem.highlight{border-color: #333333;}.targetItem.select{border-color: #fcff23;}
.targetItem .fas{float:right;}

/*CHOICE*/
.choiceDiv{border:10px solid #000;     text-align: center;  padding: 3em; margin: 0 3em; cursor: pointer;}
.choiceDiv .fas{font-size: 5em; margin-bottom: 0.3em;}
.selected{border-color: #1e5611;}

/*HOT SPOT*/
.hotspotFeedback{margin-left: 1em; padding: .5em; width: 90%;}
.hotspot_list_ul{margin:0; padding:0;}
.hotspot_list{padding: 0.5em; list-style: inside; background-color: #fff8005e;}
/*.hotspot{cursor: pointer; position: absolute;top: 0; left: 0; width: 160px; height: 78px; border-radius: 10px; border: 0.2em solid rgba(0,0,0,0.00); }*/
.hotspot_list_ul.selected{background-color: #3c652f8f;}
.hotspot_option1{top: 330px; left: 80px; height: 210px; width: 220px;}
.hotspot_option2{top: 370px; left: 330px; height: 40px; width: 45px;}
.hotspot_option3{top: 410px; left: 410px; height: 50px; width: 45px;}
.revealDiv{ visibility: hidden;  font-size: 12px;
    width: 110px;
    margin: 10px 0;
    text-align: center;}
.revealIcon{ border: 5px solid #000000c9; justify-content: flex-start;  width: 120px;}

table.exemptionTable{background-color: #ffffd5; margin: 20px;}
table.exemptionTable p{text-align: center; margin: 0;}
table.exemptionTable td{display: flex; justify-content: space-between; border: 1px solid #000;     align-items: center;}
table.exemptionTable .revealDiv{font-size:1em; width:auto; margin: 0 10px 0 0; text-align: left;}
table.exemptionTable .exemptionCode {border-radius:50%; border: 1px solid #912925; width: 40px; height: 40px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center; cursor: pointer;}
table.exemptionTable th{background: none; color: inherit; border: 1px solid #000; font-weight: bold;}
table.exemptionTable tr:nth-child(odd), tr:nth-child(even) {background: none;}

/*ACTIVITY MAP*/
.activitymapFeedback{float:none; margin: 0;  position: absolute; width: 40%; top:0;background-color: #f2f2f27d; }
.activitymap_list{padding-left:1em;}
.activitymap{cursor: pointer;   display: inline; margin: 2em 5vw 2em 5vw; width: 7vw;  text-align: center;     background-color: #fffffff0;  padding: 0;}
.activitymap .fas{font-size: 5vw;}
.activitymap .icon{height: 5vw; width: auto;}
.activitymapTitle{   background-color: #000; color: #FFF; }
.activitymap_content .selected{border-color: #3c652f; background-color: #3c652f8f;} .activitymap_content .selected .activitymapTitle{background-color: #3c652f;}
.activitymap_content  p{    text-align: center;}
.activitymapHolder{    text-align: center; }
.activitymapImage{display: none;}



/*ACTIVITY MAP PAGES*/
.activitymapPage{width: 100%;     min-height: 90%; max-width: 1100px!important;}
.activitymapPageIntro{}
.activitymapPageContent{}
.activitymapPageIntroText{width: 100%; min-height: 500px;}
.activitymapPageNext,.activitymapPageBack, .activitymapPageClose, .activitymapPageTranscript{    position: absolute;  right: 44px;  bottom: 10px; margin-top: 0.5em; padding: 0.5em 1em; background-color: #00427B; color: #FFF; cursor: pointer; width: auto;}
.activitymapPageClose{min-width: 100px}
.activitymapPageBack{right: 160px; background-color: #2D2D2D; }
.activitymapPageTranscript{right: 145px; background-color: #2D2D2D; }
.fancybox-can-pan .fancybox-content, .fancybox-can-swipe .fancybox-content { cursor: inherit !important;}

.charactersHolder{    text-align: center;     position: absolute; bottom: 10vh;}
.characterIcon{   float: left; margin: 1em 2% 0 2%; width: 10%; text-align: center;background-color: #00427b;  border-radius: 10px;   padding-top: 10px;}
.characterIcon img{width: 100%; height: auto;}
.characterIconTitle{   background-color: #000; color: #FFF; }


/*MATCHING ACTIVITY STYLES*/
.itemsMatch {padding: 0 5% 0 0; float:left; width: 45%;}/*Question*/
.matchItems {float:left; width: 40%;}/*Dropdowns*/
.matchWideNarrow .itemsMatch {width: 70%;} .matchWideNarrow .matchItems {width: 25%;}
.matchMark {height:0; width: 10%; float:left; }
.matchContent { color: inherit;clear:both; margin: 0; line-height: 1.2em; padding: 1em;   }
.matchContent select{margin-top: -.2em;  line-height: 1em;max-width: 100%;}
.matchContent:nth-child(odd){background-color: #edeeef;}
.matchContent:nth-child(even){background-color: #f8e08e;}
.matchingBottom {clear:both; width:95%; height:3em; }
.matchContent.correct::before, .matchContent.incorrect::before{position: relative;  color: #1E5613; margin-left: -106%; font-style: normal; font-variant: normal;  text-rendering: auto; -webkit-font-smoothing: antialiased;font-family: "Font Awesome 5 Free";  font-weight: 900; content: "\f058"; }
.matchContent.incorrect::before{ content: "\f057";  color: #912925;  }




.toolboxItem .correct, .toolboxContent .correct{background:none; }
.toolboxContent .correct{color: #000;}

/*QUIZ ACTIVITY STYLES*/
.quizOption { clear:both;     background-color: #f8e08e; margin: .5em 0; line-height: 1.2em; padding: .5em; cursor: pointer; width: calc(100% - 1em); }
.quizOption::before{font-weight: bold; margin-right: 1em;}
.quizOption:nth-child(2)::before{content:"A";}
.quizOption:nth-child(3)::before{content:"B";}
.quizOption:nth-child(4)::before{content:"C";}
.quizOption:nth-child(5)::before{content:"D";}
.quizOption:nth-child(6)::before{content:"E";}
.contentCirclesHolder .quizOption::before, .contentCol .quizOption::before{content:""; margin:0;}
.assessment .quizOption::before{margin-right:10px;}
.quizOptionRadioHolder {float:left;     margin: 0.3em 0.5em; }
.quizOption.correct::after, .quizOption.incorrect::after{display: inline-block; float:right; font-style: normal; font-variant: normal;  text-rendering: auto; -webkit-font-smoothing: antialiased;font-family: "Font Awesome 5 Free";  font-weight: 900; content: "\f058"; margin-left:5px; }
.quizOption.incorrect::after{ content: "\f057"; }
.checkButton { text-align:right; width:100%; clear:both; }
.mark {height:20px; width:20px;}
.quizNav {clear: both;}
.quizNext{}
.quizBack {}
.quizFeedback{ margin: .5em 0 0 0; padding: 0;background-color: #fff; }
.quizFeedbackImage{width: 100px; float: left;} .quizFeedbackImage img{width:100%; height: auto;}
.quizFeedback .speechbubble{  float:left; width: calc(100% - 130px); font-weight: normal; text-align: left; margin-left: 30px;}
.quizFeedbackMore{cursor: pointer;  background-color: #00427B; padding: 0.5em; color: #fff; float: right; margin: -.5em; width: auto;   max-width: 18%;}
.quizFeedback .morefeedback{background-color: #edeeef;}
.quizFeedback .morefeedback p{padding: 1em;margin: 0;}
.quizFeedbackQn{font-weight:bold; background-color: #edeeef; padding: 1em;  margin-top: 0.5em;}
.quizFeedbackReading{ background-color: #f8e08e; padding: 1em;     border-top: 1em solid #FFF;}
.quizFeedbackReading h3{font-size: 1em; padding: 0;  margin: 0;}
/*QUIZ SPEECH OPTIONS*/
.quizSpeech .question{    margin-bottom: 1em; font-weight: normal;}
.quizSpeech .quizOption::before{content: '';}
.quizSpeech .speechbubble{color: inherit;  float:left; width: calc(100% - 240px); font-weight: normal; text-align: left; margin-left: 30px;     clear: none;}
.quizQuestionImage{width: 200px; float: left;} .quizQuestionImage img{width:100%; height: auto; padding-bottom: 25%;}
.quizSpeech .sb_left:before{border-color: #f8e08e #f8e08e transparent transparent; }
.quizSpeech .sb_left.correct:before {border-color: #1e5611 #1e5611 transparent transparent; }
.quizSpeech .sb_left.incorrect:before {border-color: #912925 #912925 transparent transparent; }

/*COLUMN CONTENT*/
.contentRow{display:flex; flex-direction: row; width:100%; flex-wrap: wrap; justify-content: space-around; }
.contentRowItem{display:flex; margin:10px; flex-direction: column; align-items: center;     width: auto; cursor: pointer;}
.contentCol{display: flex; flex-wrap: wrap; justify-content: center;}
.contentColSpaced{justify-content: space-around;}
.contentColItem{width: 100px; margin: 5px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; font-size: 14px;text-align: center;}
.contentColItem img{width:80px; height:auto; margin-bottom: 10px;}
.noWidth, .noWidth img{width:auto;}
/*CIRCLE CONTENT*/
.contentCirclesHolder{display: flex; width: 100%; justify-content: center; align-items: center;}
.contentCircles{border-radius: 50%;   display: flex; justify-content: center; align-items: center; }
.contentCircles2{width: 200px; height: 200px; margin: 10px; text-align: center;}

/*CHECKLIST STYLES*/
.checklistQuestion {font-weight: normal;margin-bottom: 1em;}
.checklistOption {  background-color: #00427B; color: #FFF;        margin: 0 0 .5em 0; }
.checklistOption::before {content:"+"!important; margin-right: .5em;  height: 2em;   float: left;}
.checklist{background-color:#f8e08e; padding: 1em; min-height: 20vh; max-height: 40vh; overflow-y: scroll; border-bottom: 1em solid #f8e08e;}
.checklistOption ul{margin:0;     padding: 0 0 0 1em;} .checklistOption li{margin: 0; padding:0;}
.checklistLeft,.checklistRight{float:left; width:45%; margin-right:5%;}
.checklistPlaceholder{font-style: italic; font-size: .8em;}
ul.checklistList{padding: 0 1em;margin: 0;}
#checklistglobal{min-height: 90%;  width: 90%;}

/*QUIZ DROPDOWN STYLES*/
.quizDDIntro {background-color:#FFFFFF; margin:0.5em 0 1em 0; width:99%; padding:0.2em; }
.quizDDQuestion {background-color:#D9E7F4; width:99%; padding:0.5em; font-weight:bold; color:#000;}
.quizDDSelect {font-size:95%; background-color: #D9E7F4; margin-top:0.2em;}
.quizNavDD{width:100%;}


/*REFLECT STYLES*/
.reflectFeedback{margin-bottom: 1em;}
.reflectButton{float:left;     margin: 0 1em 1em 0;    width: auto;}
.reflectButtonFull{margin: 0 1% 1em 0;      width: 30%;  padding: 1em 0;}

/*CERTICIFATE*/
.certificateHolder{ padding: 1em;  background-color: #CCD1D5;     min-height: 2em;}
.certificateHolder h3{margin-top:0;}
#certificateName{    display: inline;     padding: 0.5em;    margin: 0 1em 0 0; width: 30%;   border: none; }
#certificateButton{padding: 0.5em 1em; background-color: #00427B; color: #FFF; cursor: pointer; width: auto;      margin: 0 0 0 -.3em;  display: inline;   }

/*NOTES*/
.noteDiv{background-color: #edeeef; padding: 1em;}
.morefeedback .noteDiv{    background-color: inherit; padding: 0;}
.noteContent{}
.noteContent h3{    margin-top: 0;     font-size: 1em;}
.noteContent p{        margin: 0 0 .5em 0;}
.noteContentImg{float: left; width: 10%; margin-right: 2%; margin-bottom: 1em;}
.noteButton{  font-size: .8em;  padding: 0.5em;}
.noteButtonText{width: auto; display: inline-block;  padding: 0; margin: 0; background: none;}
.quizFeedback .noteButton{margin: 0 0.5em 0.5em 0;}
.notesPlaceholder{font-style: italic; font-size: .8em;}

.note{display: none;  border-bottom: 1px dashed #CCD1D6; border-top: 1px dashed #CCD1D6;}
.note h3{    font-size: 1em;}

.popup{min-height: 90%;  width: 90%;}/*popup*/


.popupImages {display: flex; justify-content: center;}
.popupImages img{border: 10px solid #00427B; margin: 0 10px;}
.popupImages img.noBorder{border: none; }
.popup img {max-width: 100%;}

.fixed-position { }
.fancybox-slide--html .fancybox-close-small { padding: 0px!important; background: #FFFFFF!important; height:70px !important; width:70px !important;}
.hideFromMobile{display:block;}
span.hideFromMobile{display: inline;}
.showInMobile{display:none;}



#endDiv{    padding-top: 1em;}





@viewport { width:device-width; }

@media only screen and (min-width: 1100px) {
  .unitFlexImage { min-width: 720px; }
  .unitFlexImageAuto{min-width: inherit;}
}

@media only screen and (max-width: 900px) {
  .unitFlex{ height:auto; flex-direction: column;}
  .unitContent{ margin-top: 20px;}
  .unitText{padding: 0;}
  .divFlex, .popupImages {flex-direction: column;}
  .speechbubble{display: none!important;}
  .speechbubbleShow{display: block!important; margin-left: 0!important; margin-right:0!important;}
  .quizFeedback .speechbubble, .quizSpeech .speechbubble, .popup .speechbubble{display: block!important;width: 100%;     margin-left: 0;}
}
/*MOBILE SPECIFIC STYLES*/
@media only screen and (max-width: 40em) {
    .unitContent{ margin-left:auto; margin-right:auto;     max-width: 1400px;     margin-top: 10vh;}
    .footerContainer{    top: 10vh;}
    .rightButton{clear:both; float:none; margin: 0 0 1em 0; }
    .feedback{clear:both; float:none; margin: 0 0 2em 0;    }
    .certificateLeft, .certificateRight{float: none; width: 100%;}
    .fixed-position {position: fixed; }
    .dragItems,  .contentActivity, .fullDiv{    padding-bottom: 5em;}
    .contentActivity{    margin-top: 1em;}
    .submitButton{margin-bottom: 1em;}
    .activitymap { margin: 0 5vw 2em 5vw;width: 20vw;}
    .activitymap .icon {  height: 10vw;}
    .activitymapFeedback {top: auto;}
    .activitymapTitle {margin: 0 -1em; border-radius: 0;}
    .activitymap_content p{width: auto; position: inherit;  }
    .itemsMatch, .matchItems, .leftDiv, .rightDiv{width: 100%!important; float:none!important; }
    .activitymapPageNext,.activitymapPageBack, .activitymapPageClose, .activitymapPageTranscript{ bottom: inherit;   top: 0;}
    textarea{    min-height: 15vh;}
    .headerMenu{float: none; display: none;position: absolute; background-color: #02427B; padding: 3.5vh 2.5vh 0 2.5vh;    z-index: 100;}
    .headerMenu a{display: block; }
    .headerMenu .fas { margin: .5em 0 1.5em 0;}
    .menuButton{display: block;position: absolute;     top: 0; left: 0; cursor: pointer;     padding: 3vh 0 0 2vh;}
    .menuButtonIcon{color: #FFF; font-size: 4vh;  }

    .matchItems{    margin-top: 1.5em;}
    .matchItems select {width: 100%;}
    #audioPlayer{width: 1em;       margin: 0; }
    .unitSubPageNavNumber, .unitPageFeedbackContainer{display: none;}
    #unit1SubPageSave{    width: 10%; float: left; padding: 3.5vh 0 0 0; margin: 0 0 0 -.5em;}

    .coverLeft{    display: none;}
    .coverRight{float: none;  width: 100%;}
    .coverLogo{    text-align: left;     height: 10vh;}
    .coverLogo img{height: auto; width: 50%;}
    .coverLogo img.coverLogoLeft {  margin: inherit; height: auto; width: 50%;}
    .cover h2{    padding-top: 20vh;}
    .cover h3{padding-bottom: 0;}
    .cover p{font-size: 0.5em;   line-height: 1.5em;}
    .headerLogo {display:none;}
    .headerHeading { margin-left: 5vh;}
    .unitContent.coverBg{background: none;}

    .unitTextSubPage {}

    .quizFeedbackImage, .quizQuestionImage {display: none;}
    .quizFeedbackMore{float: none; display: block; margin: 1em 0 0 0;    max-width: none;}
    .quizFeedback .noteButton{margin: 0;}
    .checklistLeft, .checklistRight {float: none; width: 100%; margin: 0;}
    .checklist{min-height: 50vh;}
    .hideFromMobile{display:none;}
    .showInMobile{display:block;}
    .activitymapPageIntroText{min-height:0;}
    .activitymapPage {min-height: 50%;}

    #certificateName{    width: 95%; margin: 0;}
    #certificateButton{margin: 1em 0 0 0;}
    .charactersHolder{display:none;}
    .popup{min-height: 0; width: 100%;}
    .videoHolder{ text-align: left;}
    .popupVideoHolder { top: 3em;}
    .videoTranscript{bottom: inherit;  top: 3em;}
    ul.checklistList{margin-bottom: 5em;}
    .contentRowItem{ flex-direction: row; width: 100%; justify-content: space-evenly; }
    .contentCircles2{width: 100px; height: 100px; }
    .flex{flex-direction: row;}
    .targetItems, .dragItems {min-width: 100px;}
}
@media only screen and (max-width: 38em) {
	.hideFromMobile{display:none;}
	.showInMobile{display:block;}
	.quizDDSelect{max-width:90% !important;}
	#activityClose{max-width:30%;}
}
@media print{
    .printButton, .headerContainer, .footerContainer, .submitButton{display: none;}
    .speechbubble{visibility: hidden;}
    h2{display: block;}
    .correct{font-weight: bold; border: 1px solid #000;}
}