/**
// VARIABLES
$gray-darker:            lighten(#000, 13.5%) !default; // #222
$gray-dark:              lighten(#000, 20%) !default;   // #333
$gray:                   lighten(#000, 33.5%) !default; // #555
$gray-light:             lighten(#000, 46.7%) !default; // #777
$gray-lighter:           lighten(#000, 93.5%) !default; // #eee

$brand-primary:         #428bca !default;
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;
*/
.container, .game-container, .b2u4a1, .jigsaw-puzzle-intro, .jigsaw-puzzle, .book2.flashCardSky, .lets-play-u4s4, .broken-wall-bxu4s3, .pier {
  width: 1000px;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: auto;
  margin-right: auto;
}

.game-container, .b2u4a1, .jigsaw-puzzle-intro, .jigsaw-puzzle, .book2.flashCardSky, .lets-play-u4s4, .broken-wall-bxu4s3, .pier {
  position: relative;
  width: 1000px;
  height: 600px;
  font-family: "VNF-ComicSans", sans-serif;
}

/*
5 layers in game
*/
.fade-in {
  -webkit-animation: displayOnce 2s;
  /* Safari 4+ */
  -moz-animation: gdisplayOnce 2s;
  /* Fx 5+ */
  -o-animation: displayOnce 2s;
  /* Opera 12+ */
  animation: displayOnce 2s;
  /* IE 10+ */
}

@keyframes displayOnce {
  0% {
    opacity: 0;
    z-index: 8000;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}
@-webkit-keyframes displayOnce {
  0% {
    opacity: 0;
    z-index: 8000;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}
@font-face {
  font-family: 'Comic Neue';
  src: url("../assets/fonts/comicneue-bold.eot");
  src: url("../assets/fonts/comicneue-bold.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/comicneue-bold.woff") format("woff"), url("../assets/fonts/comicneue-bold.ttf") format("truetype"), url("../assets/fonts/comicneue-bold.svg#comic_neuebold") format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Comic Neue';
  src: url("../assets/fonts/comicneue-regular.eot");
  src: url("../assets/fonts/comicneue-regular.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/comicneue-regular.woff") format("woff"), url("../assets/fonts/comicneue-regular.ttf") format("truetype"), url("../assets/fonts/comicneue-regular.svg#comic_neueregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'VNF-ComicSans';
  src: url("../assets/fonts/VNF-Comic_Sans.eot");
  src: url("../assets/fonts/VNF-Comic_Sans.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/VNF-Comic_Sans.woff") format("woff"), url("../assets/fonts/VNF-Comic_Sans.ttf") format("truetype"), url("../assets/fonts/VNF-Comic_Sans.svg#VNF-ComicSans") format("svg");
  font-weight: normal;
  font-style: normal;
}
/*****************
b2u4.scss
Should contain style rules specific to b2u4.
*****************/
/*****************
ROPE CLIMB
******************/
.ropeClimb.multiple-choice.b2u4a7a, .ropeClimb.multiple-choice.b5u4a7a, .ropeClimb.multiple-choice.b8u4a7a {
  background: url("../assets/common/backgrounds/sea-animation.jpg");
}
.ropeClimb.multiple-choice.b2u4a7a .chip, .ropeClimb.multiple-choice.b5u4a7a .chip, .ropeClimb.multiple-choice.b8u4a7a .chip {
  position: absolute;
  top: 50px;
  width: 250px;
  -moz-transition: left 3s;
  -o-transition: left 3s;
  -webkit-transition: left 3s;
  transition: left 3s;
}
.ropeClimb.multiple-choice.b2u4a7a .answers .answer, .ropeClimb.multiple-choice.b5u4a7a .answers .answer, .ropeClimb.multiple-choice.b8u4a7a .answers .answer {
  cursor: pointer;
  position: absolute;
  width: 280px;
  height: 69px;
  font-size: 30px;
  text-align: center;
  line-height: 69px;
  top: 430px;
}
.ropeClimb.multiple-choice.b2u4a7a .answers.answers-2 .answer-0, .ropeClimb.multiple-choice.b5u4a7a .answers.answers-2 .answer-0, .ropeClimb.multiple-choice.b8u4a7a .answers.answers-2 .answer-0 {
  left: 230px;
  background-image: url("../assets/common/group2/follow-the-mermaid/answer-box-a-0.png");
}
.ropeClimb.multiple-choice.b2u4a7a .answers.answers-2 .answer-1, .ropeClimb.multiple-choice.b5u4a7a .answers.answers-2 .answer-1, .ropeClimb.multiple-choice.b8u4a7a .answers.answers-2 .answer-1 {
  left: 520px;
  background-image: url("../assets/common/group2/follow-the-mermaid/answer-box-a-1.png");
}
.ropeClimb.multiple-choice.b2u4a7a .answers.answers-3 .answer-0, .ropeClimb.multiple-choice.b5u4a7a .answers.answers-3 .answer-0, .ropeClimb.multiple-choice.b8u4a7a .answers.answers-3 .answer-0 {
  left: 60px;
  background-image: url("../assets/common/group2/follow-the-mermaid/answer-box-a-0.png");
}
.ropeClimb.multiple-choice.b2u4a7a .answers.answers-3 .answer-1, .ropeClimb.multiple-choice.b5u4a7a .answers.answers-3 .answer-1, .ropeClimb.multiple-choice.b8u4a7a .answers.answers-3 .answer-1 {
  left: 350px;
  background-image: url("../assets/common/group2/follow-the-mermaid/answer-box-a-1.png");
}
.ropeClimb.multiple-choice.b2u4a7a .answers.answers-3 .answer-2, .ropeClimb.multiple-choice.b5u4a7a .answers.answers-3 .answer-2, .ropeClimb.multiple-choice.b8u4a7a .answers.answers-3 .answer-2 {
  left: 640px;
  background-image: url("../assets/common/group2/follow-the-mermaid/answer-box-a-2.png");
}
.ropeClimb.multiple-choice.b2u4a7a .question, .ropeClimb.multiple-choice.b5u4a7a .question, .ropeClimb.multiple-choice.b8u4a7a .question {
  position: absolute;
  width: 540px;
  height: 94px;
  line-height: 94px;
  font-size: 30px;
  text-align: center;
  left: 250px;
  top: 300px;
  background-image: url("../assets/common/group2/follow-the-mermaid/question-box.png");
}
.ropeClimb.multiple-choice.b2u4a7a .question p, .ropeClimb.multiple-choice.b5u4a7a .question p, .ropeClimb.multiple-choice.b8u4a7a .question p {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
.ropeClimb.multiple-choice.b2u4a7b, .ropeClimb.multiple-choice.b5u4a7b, .ropeClimb.multiple-choice.b8u4a7b {
  background: url("../assets/common/backgrounds/sea-animation2.jpg");
}
.ropeClimb.multiple-choice.b2u4a7b .chip, .ropeClimb.multiple-choice.b5u4a7b .chip, .ropeClimb.multiple-choice.b8u4a7b .chip {
  position: absolute;
  top: 50px;
  width: 250px;
  -moz-transition: left 3s;
  -o-transition: left 3s;
  -webkit-transition: left 3s;
  transition: left 3s;
}
.ropeClimb.multiple-choice.b2u4a7b .answers .answer, .ropeClimb.multiple-choice.b5u4a7b .answers .answer, .ropeClimb.multiple-choice.b8u4a7b .answers .answer {
  cursor: pointer;
  position: absolute;
  width: 370px;
  height: 59px;
  line-height: 59px;
  font-size: 30px;
  text-align: center;
  top: 430px;
  padding-left: 30px;
}
.ropeClimb.multiple-choice.b2u4a7b .answers.answers-2 .answer-0, .ropeClimb.multiple-choice.b5u4a7b .answers.answers-2 .answer-0, .ropeClimb.multiple-choice.b8u4a7b .answers.answers-2 .answer-0 {
  left: 100px;
  background-image: url("../assets/common/group2/follow-the-mermaid/answer-box-b-0.png");
}
.ropeClimb.multiple-choice.b2u4a7b .answers.answers-2 .answer-1, .ropeClimb.multiple-choice.b5u4a7b .answers.answers-2 .answer-1, .ropeClimb.multiple-choice.b8u4a7b .answers.answers-2 .answer-1 {
  left: 520px;
  background-image: url("../assets/common/group2/follow-the-mermaid/answer-box-b-1.png");
}
.ropeClimb.multiple-choice.b2u4a7b .question, .ropeClimb.multiple-choice.b5u4a7b .question, .ropeClimb.multiple-choice.b8u4a7b .question {
  position: absolute;
  width: 540px;
  height: 94px;
  line-height: 94px;
  font-size: 30px;
  text-align: center;
  left: 250px;
  top: 300px;
  background-image: url("../assets/common/group2/follow-the-mermaid/question-box.png");
}
.ropeClimb.multiple-choice.b2u4a7b .question p, .ropeClimb.multiple-choice.b5u4a7b .question p, .ropeClimb.multiple-choice.b8u4a7b .question p {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

/*****************
 CARD MATCHING
 ****************/
.b2u4a3 {
  background: url("../assets/common/backgrounds/cloud.jpg");
}

/*****************
WORD SEARCH
******************/
.b2u4a1 {
  background: url("../assets/book2/wordSearch/b2u4a1/b2u4a1-wordSearch-background.jpg");
}

/*****************
JIGSAW PUZZLE
******************/
.jigsaw-puzzle-intro {
  background: url("../assets/book2/unit4/jigsaw-puzzle/background-intro.png");
}
.jigsaw-puzzle-intro .angledArrow {
  transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  /* IE 9 */
  -webkit-transform: rotate(30deg);
  /* Safari and Chrome */
}
.jigsaw-puzzle-intro .angledArrow img {
  width: 100px;
}
.jigsaw-puzzle-intro .angled-img {
  width: 100px;
  position: absolute;
  top: -120px;
  cursor: pointer;
  left: -100px;
}

.jigsaw-puzzle {
  background: url("../assets/book2/unit4/jigsaw-puzzle/background.png");
}
.jigsaw-puzzle .dropzone {
  background: url("../assets/book2/unit4/jigsaw-puzzle/image-box.png");
  height: 450px;
  width: 450px;
  margin-top: 90px;
  margin-left: 20px;
}
.jigsaw-puzzle .dropzone div {
  height: 150px;
  width: 150px;
}

/*****************
Flash Card Sky
******************/
.book2.flashCardSky {
  background-image: url('../assets/book2/flashcards/b2u4s6/flashcardsky-bg.jpg?1742470465');
}
.book2.flashCardSky .letterShow {
  z-index: 3;
}
.book2.flashCardSky .flash-card {
  position: absolute;
  height: 107px;
  width: 175px;
  cursor: pointer;
}
.book2.flashCardSky .flash-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.book2.flashCardSky .card-glow-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.book2.flashCardSky .card-glow-img.glow-it {
  z-index: 2;
}
.book2.flashCardSky .flash-card-bread {
  top: 70px;
  left: 30px;
}
.book2.flashCardSky .flash-card-ice-cream {
  top: 70px;
  left: 230px;
}
.book2.flashCardSky .flash-card-cake {
  top: 70px;
  left: 430px;
}
.book2.flashCardSky .flash-card-salad {
  top: 200px;
  left: 30px;
}
.book2.flashCardSky .flash-card-spaghetti {
  top: 200px;
  left: 230px;
}
.book2.flashCardSky .flash-card-chicken {
  top: 200px;
  left: 430px;
}
.book2.flashCardSky .flash-card-juice {
  top: 320px;
  left: 30px;
}
.book2.flashCardSky .flash-card-water {
  top: 320px;
  left: 230px;
}
.book2.flashCardSky .flash-card-milk {
  top: 320px;
  left: 430px;
}
.book2.flashCardSky .flashCardSky-nav-panel {
  position: relative;
  height: 600px;
  width: 1000px;
}
.book2.flashCardSky .flashCardSky-nav-panel .arrows {
  margin-top: 250px;
}

.lets-play-u4s4 {
  background: url("../assets/common/group2/lets-play/u4s4/background.jpg");
}
.lets-play-u4s4 .speechBubble {
  position: absolute;
  left: 380px;
  top: 90px;
  cursor: pointer;
}
.lets-play-u4s4 .ice-cream-1 {
  position: absolute;
  top: 215px;
  left: 400px;
  width: 75px;
  z-index: 10;
}
.lets-play-u4s4 .ice-cream-2 {
  position: absolute;
  top: 222px;
  left: 455px;
  width: 72px;
  z-index: 12;
}
.lets-play-u4s4 .ice-cream-3 {
  position: absolute;
  top: 240px;
  left: 452px;
  width: 170px;
  z-index: 11;
}

.broken-wall-bxu4s3 {
  background: url("../assets/common/group2/broken-wall/0.png");
  background-size: contain;
  overflow: hidden;
}
.broken-wall-bxu4s3 .background {
  position: absolute;
  top: 0;
  background-size: contain;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.broken-wall-bxu4s3 .wall {
  position: absolute;
  top: 0;
  background-size: contain;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.broken-wall-bxu4s3 .door {
  position: absolute;
  top: 47px;
  left: 364px;
}
.broken-wall-bxu4s3 .dragList {
  position: absolute;
  top: 231px;
  left: 195px;
  font-size: 30px;
  width: 780px;
  height: 52px;
  color: #000000;
  z-index: 2;
}
.broken-wall-bxu4s3 .dragList .words {
  margin: 0px 0px;
  cursor: pointer;
  float: left;
  width: 170px;
  height: 60px;
  text-align: center;
}
.broken-wall-bxu4s3 .arrow1 {
  width: 100px;
  left: 0px;
  top: 0px;
  cursor: pointer;
  position: absolute;
}
.broken-wall-bxu4s3 .arrow2 {
  width: 100px;
  left: 0px;
  top: 0px;
  cursor: pointer;
  position: absolute;
}
.broken-wall-bxu4s3 .angledArrow {
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  z-index: 10;
  position: absolute;
  top: 160px;
  left: 570px;
}
.broken-wall-bxu4s3 .dropList {
  position: absolute;
  top: 115px;
  left: 175px;
  font-size: 30px;
  width: 780px;
  height: 125px;
  color: #000000;
  z-index: 2;
}
.broken-wall-bxu4s3 .dropList .words {
  margin: 0px 0px;
  cursor: pointer;
  float: left;
  width: 170px;
  height: 60px;
  background-repeat: no-repeat;
  background: url('../assets/../assets/common/group2/broken-wall/brick.png?1742470475');
  padding-top: 5px;
  text-align: center;
}

.pier {
  background: url('../assets/../assets/common/group2/pier/background.jpg?1742470475');
  overflow: hidden;
}
.pier .question {
  font-size: 29px;
  text-align: center;
  top: 140px;
  left: 260px;
  z-index: 10;
  position: absolute;
  width: 480px;
}
.pier .option1 {
  width: 269px;
  height: 82px;
  top: 215px;
  left: 455px;
  font-size: 40px;
  text-align: center;
  cursor: pointer;
  position: absolute;
  display: inline-block;
}
.pier .option1:hover {
  color: #808080;
}
.pier .option1:active {
  color: darkgrey;
}
.pier .option2 {
  position: absolute;
  width: 269px;
  height: 82px;
  top: 325px;
  left: 455px;
  font-size: 40px;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  position: absolute;
}
.pier .option2:hover {
  color: #808080;
}
.pier .option2:active {
  color: darkgrey;
}
.pier .ear {
  position: absolute;
  top: 231px;
  left: 305px;
  cursor: pointer;
}
.pier .overlayCls {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.pier .overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.pier .ear-0 {
  position: absolute;
  cursor: pointer;
  top: 14px;
  left: 633px;
}
.pier .ear-1 {
  position: absolute;
  top: 186px;
  left: 627px;
  cursor: pointer;
}
.pier .ear-2 {
  position: absolute;
  top: 269px;
  left: 618px;
  cursor: pointer;
}
.pier .ear-3 {
  position: absolute;
  top: 125px;
  left: 579px;
  cursor: pointer;
}
.pier .ear-4 {
  position: absolute;
  top: 92px;
  left: 678px;
  cursor: pointer;
}
.pier .ear-5 {
  position: absolute;
  top: 146px;
  left: 733px;
  cursor: pointer;
}
.pier .ear-6 {
  position: absolute;
  top: 230px;
  left: 719px;
  cursor: pointer;
}
.pier .ear-7 {
  position: absolute;
  top: 320px;
  left: 704px;
  cursor: pointer;
}
.pier .ear-8 {
  position: absolute;
  top: 58px;
  left: 777px;
  cursor: pointer;
}
.pier .ear-9 {
  position: absolute;
  top: 184px;
  left: 818px;
  cursor: pointer;
}

/*****************
SPEECH BUBBLES
******************/
.book2.unit4.b2u4a8a.speech-bubbles .dragzone, .book2.unit4.b2u4a8b.speech-bubbles .dragzone {
  position: absolute;
  top: 480px;
}
.book2.unit4.b2u4a8a.speech-bubbles .drag, .book2.unit4.b2u4a8b.speech-bubbles .drag {
  position: absolute;
  width: 278px;
  height: 64px;
  text-align: center;
  padding-top: 12px;
  top: 30px;
}
.book2.unit4.b2u4a8a.speech-bubbles .drop, .book2.unit4.b2u4a8b.speech-bubbles .drop {
  position: absolute;
  width: 278px;
  height: 64px;
  top: 60px;
}
.book2.unit4.b2u4a8a.speech-bubbles .drop p, .book2.unit4.b2u4a8b.speech-bubbles .drop p {
  position: absolute;
  top: 15px;
  width: 278px;
  text-align: center;
  padding: 0 5px;
}
.book2.unit4.b2u4a8a.speech-bubbles .drop p .marker, .book2.unit4.b2u4a8b.speech-bubbles .drop p .marker {
  position: absolute;
  right: -20px;
  top: -40px;
  z-index: 10;
}
.book2.unit4.b2u4a8a.speech-bubbles .bubble, .book2.unit4.b2u4a8b.speech-bubbles .bubble {
  border: none;
  width: 278px;
  height: 126px;
  position: absolute;
  padding: 0px;
  margin: 0px;
}

.book2.unit4.b2u4a8c.speech-bubbles .dragzone {
  position: absolute;
  top: 460px;
}
.book2.unit4.b2u4a8c.speech-bubbles .drag {
  position: absolute;
  width: 237px;
  height: 97px;
  text-align: center;
  padding-top: 30px;
  top: 20px;
}
.book2.unit4.b2u4a8c.speech-bubbles .drop {
  position: absolute;
  width: 238px;
  height: 121px;
  top: 60px;
}
.book2.unit4.b2u4a8c.speech-bubbles .drop p {
  position: absolute;
  top: 30px;
  width: 237px;
  text-align: center;
  padding: 0 5px;
}
.book2.unit4.b2u4a8c.speech-bubbles .drop p .marker {
  position: absolute;
  right: -20px;
  top: -40px;
  z-index: 10;
}
.book2.unit4.b2u4a8c.speech-bubbles .bubble {
  border: none;
  width: 238px;
  height: 121px;
  position: absolute;
  padding: 0px;
  margin: 0px;
}
.book2.unit4.b2u4a8c.speech-bubbles .bubble-0, .book2.unit4.b2u4a8c.speech-bubbles .bubble-3 {
  top: 80px;
}

.book2.unit4.b2u4a8a.speech-bubbles {
  background: url("../assets/book2/unit4/speech-bubbles/b2u4a8a_background.jpg");
}

.book2.unit4.b2u4a8b.speech-bubbles {
  background: url("../assets/book2/unit4/speech-bubbles/b2u4a8b_background.jpg");
}

.book2.unit4.b2u4a8a.speech-bubbles .drag, .book2.unit4.b2u4a8b.speech-bubbles .drag {
  background: url("../assets/book2/unit4/speech-bubbles/speech_answer.png");
}
.book2.unit4.b2u4a8a.speech-bubbles .bubble, .book2.unit4.b2u4a8b.speech-bubbles .bubble {
  background: url("../assets/book2/unit4/speech-bubbles/speech_bubble.png");
}
.book2.unit4.b2u4a8a.speech-bubbles .drop-0, .book2.unit4.b2u4a8a.speech-bubbles .drag-0, .book2.unit4.b2u4a8b.speech-bubbles .drop-0, .book2.unit4.b2u4a8b.speech-bubbles .drag-0 {
  left: 20px;
}
.book2.unit4.b2u4a8a.speech-bubbles .drop-1, .book2.unit4.b2u4a8a.speech-bubbles .drag-1, .book2.unit4.b2u4a8b.speech-bubbles .drop-1, .book2.unit4.b2u4a8b.speech-bubbles .drag-1 {
  left: 360px;
}
.book2.unit4.b2u4a8a.speech-bubbles .drop-2, .book2.unit4.b2u4a8a.speech-bubbles .drag-2, .book2.unit4.b2u4a8b.speech-bubbles .drop-2, .book2.unit4.b2u4a8b.speech-bubbles .drag-2 {
  left: 700px;
}

.book2.unit4.b2u4a8c.speech-bubbles {
  background: url("../assets/book2/unit4/speech-bubbles/b2u4a8c_background.jpg");
}
.book2.unit4.b2u4a8c.speech-bubbles .drag {
  background: url("../assets/book2/unit4/speech-bubbles/speech_answer_1.png");
}
.book2.unit4.b2u4a8c.speech-bubbles .bubble {
  background: url("../assets/book2/unit4/speech-bubbles/speech_bubble_1.png");
}
.book2.unit4.b2u4a8c.speech-bubbles .drop-0, .book2.unit4.b2u4a8c.speech-bubbles .drag-0 {
  left: 10px;
}
.book2.unit4.b2u4a8c.speech-bubbles .drop-1, .book2.unit4.b2u4a8c.speech-bubbles .drag-1 {
  left: 260px;
}
.book2.unit4.b2u4a8c.speech-bubbles .drop-2, .book2.unit4.b2u4a8c.speech-bubbles .drag-2 {
  left: 510px;
}
.book2.unit4.b2u4a8c.speech-bubbles .drag-3 {
  left: 760px;
}
.book2.unit4.b2u4a8c.speech-bubbles .drop-3 {
  left: 730px;
}

.book2.unit4.b2u4a8.speech-bubbles {
  background: url("../assets/book2/unit4/speech-bubbles/b2u4a8_background.jpg");
}
.book2.unit4.b2u4a8.speech-bubbles .item {
  cursor: pointer;
  position: absolute;
}
.book2.unit4.b2u4a8.speech-bubbles .item-0 {
  top: 280px;
  left: 0px;
}
.book2.unit4.b2u4a8.speech-bubbles .item-1 {
  top: 208px;
  left: 140px;
}
.book2.unit4.b2u4a8.speech-bubbles .item-2 {
  top: 260px;
  left: 750px;
}