/**
// 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, .b2u7a7, .pet-shop-b2u7s3, .introduction-u7s5, .introduction-u7s6, .introduction-u7s8, .introduction-u7s10, .introduction-u5s3a, .introduction-u5s3b, .introduction-u5s3c, .introduction-u5s3d, .introduction-u5s3e, .introduction-u5s3f, .introduction-u5s3g, .introduction-u5s3h, .swim-with-fish-book2, .freebird {
  width: 1000px;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: auto;
  margin-right: auto;
}

.game-container, .b2u7a7, .pet-shop-b2u7s3, .introduction-u7s5, .introduction-u7s6, .introduction-u7s8, .introduction-u7s10, .introduction-u5s3a, .introduction-u5s3b, .introduction-u5s3c, .introduction-u5s3d, .introduction-u5s3e, .introduction-u5s3f, .introduction-u5s3g, .introduction-u5s3h, .swim-with-fish-book2, .freebird {
  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;
}
/*****************
b2u7.scss
Should contain style rules specific to b2u4.
*****************/
/*****************
 CARD MATCHING
 ****************/
.b2u7a2 {
  background: url("../assets/common/backgrounds/bee-hive.jpg");
}

/*****************
* FLASHCARD MATCHING
******************/
.b2u7a1 {
  background: url("../assets/common/backgrounds/blue-carousel.jpg");
}

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

.pet-shop-b2u7s3 {
  background: url("../assets/common/group2/pet-shop/background.jpg");
  background-size: contain;
  overflow: hidden;
}
.pet-shop-b2u7s3 .images {
  position: absolute;
}
.pet-shop-b2u7s3 .letsLearn-active {
  position: absolute;
  top: 100px;
  left: 77px;
  font-size: 40px;
  color: yellow;
  cursor: pointer;
  width: 230px;
}
.pet-shop-b2u7s3 .letsLearn-nonactive {
  position: absolute;
  top: 100px;
  left: 77px;
  font-size: 40px;
  color: yellow;
  width: 230px;
}
.pet-shop-b2u7s3 .image-bw {
  position: absolute;
  cursor: pointer;
}
.pet-shop-b2u7s3 .image-color {
  position: absolute;
}
.pet-shop-b2u7s3 .image-deactive {
  position: absolute;
}

.introduction-u7s5 {
  background: url("../assets/common/group2/intro/background-u7s5.jpg");
  background-size: contain;
  overflow: hidden;
}
.introduction-u7s5 .images {
  position: absolute;
}
.introduction-u7s5 .image-bw {
  position: absolute;
  cursor: pointer;
}
.introduction-u7s5 .image-deactive {
  position: absolute;
}
.introduction-u7s5 .image-color {
  position: absolute;
}

.introduction-u7s6 {
  background: url("../assets/common/group2/intro/background-u7s6.jpg");
  background-size: contain;
  overflow: hidden;
}
.introduction-u7s6 .images {
  position: absolute;
}
.introduction-u7s6 .image-bw {
  position: absolute;
  cursor: pointer;
}
.introduction-u7s6 .image-deactive {
  position: absolute;
}
.introduction-u7s6 .image-color {
  position: absolute;
}

.introduction-u7s8 {
  background: url("../assets/common/group2/intro/background-u7s8.jpg");
  background-size: contain;
  overflow: hidden;
}

.introduction-u7s10 {
  background: url("../assets/common/group2/intro/background-u7s10.jpg");
  background-size: contain;
  overflow: hidden;
}
.introduction-u7s10 .images {
  position: absolute;
}
.introduction-u7s10 .image-bw {
  position: absolute;
  cursor: pointer;
}
.introduction-u7s10 .image-deactive {
  position: absolute;
}
.introduction-u7s10 .image-color {
  position: absolute;
}

.introduction-u5s3a {
  background: url("../assets/common/group2/jr-art-studio/background-a.jpg");
  background-size: contain;
  overflow: hidden;
}
.introduction-u5s3a .images {
  position: absolute;
}
.introduction-u5s3a .image-bw {
  position: absolute;
  cursor: pointer;
}
.introduction-u5s3a .image-deactive {
  position: absolute;
}
.introduction-u5s3a .image-color {
  position: absolute;
}

.introduction-u5s3b {
  background: url("../assets/common/group2/jr-art-studio/background-b.jpg");
  background-size: contain;
  overflow: hidden;
}
.introduction-u5s3b .images {
  position: absolute;
}
.introduction-u5s3b .image-bw {
  position: absolute;
  cursor: pointer;
}
.introduction-u5s3b .image-deactive {
  position: absolute;
}
.introduction-u5s3b .image-color {
  position: absolute;
}

.introduction-u5s3c {
  background: url("../assets/common/group2/jr-art-studio/background-c.jpg");
  background-size: contain;
  overflow: hidden;
}
.introduction-u5s3c .images {
  position: absolute;
}
.introduction-u5s3c .image-bw {
  position: absolute;
  cursor: pointer;
}
.introduction-u5s3c .image-deactive {
  position: absolute;
}
.introduction-u5s3c .image-color {
  position: absolute;
}

.introduction-u5s3d {
  background: url("../assets/common/group2/jr-art-studio/background-d.jpg");
  background-size: contain;
  overflow: hidden;
}
.introduction-u5s3d .images {
  position: absolute;
}
.introduction-u5s3d .image-bw {
  position: absolute;
  cursor: pointer;
}
.introduction-u5s3d .image-deactive {
  position: absolute;
}
.introduction-u5s3d .image-color {
  position: absolute;
}

.introduction-u5s3e {
  background: url("../assets/common/group2/jr-art-studio/background-e.jpg");
  background-size: contain;
  overflow: hidden;
}
.introduction-u5s3e .images {
  position: absolute;
}
.introduction-u5s3e .image-bw {
  position: absolute;
  cursor: pointer;
}
.introduction-u5s3e .image-deactive {
  position: absolute;
}
.introduction-u5s3e .image-color {
  position: absolute;
}

.introduction-u5s3f {
  background: url("../assets/common/group2/jr-art-studio/background-f.jpg");
  background-size: contain;
  overflow: hidden;
}
.introduction-u5s3f .images {
  position: absolute;
}
.introduction-u5s3f .image-bw {
  position: absolute;
  cursor: pointer;
}
.introduction-u5s3f .image-deactive {
  position: absolute;
}
.introduction-u5s3f .image-color {
  position: absolute;
}

.introduction-u5s3g {
  background: url("../assets/common/group2/jr-art-studio/background-g.jpg");
  background-size: contain;
  overflow: hidden;
}
.introduction-u5s3g .images {
  position: absolute;
}
.introduction-u5s3g .image-bw {
  position: absolute;
  cursor: pointer;
}
.introduction-u5s3g .image-deactive {
  position: absolute;
}
.introduction-u5s3g .image-color {
  position: absolute;
}

.introduction-u5s3h {
  background: url("../assets/common/group2/jr-art-studio/background-h.jpg");
  background-size: contain;
  overflow: hidden;
}
.introduction-u5s3h .images {
  position: absolute;
}
.introduction-u5s3h .image-bw {
  position: absolute;
  cursor: pointer;
}
.introduction-u5s3h .image-deactive {
  position: absolute;
}
.introduction-u5s3h .image-color {
  position: absolute;
}

/*****************
* FLASHCARD 
******************/
.flashcards.b2u7a5 {
  background: url("../assets/book2/flashcards/b2u7a5/b2u7a5-flashcards-background.jpg");
}
.flashcards.b2u7a5 .spider-web img {
  position: absolute;
}
.flashcards.b2u7a5 .flashcards-box {
  margin: 0px;
  padding: 0px;
  width: 750px;
  position: relative;
  z-index: 10;
  height: 500px;
}
.flashcards.b2u7a5 .flashcards-box div {
  position: absolute;
  height: 155px;
  width: 155px;
}
.flashcards.b2u7a5 .flashcards-box .flashcard-0 {
  top: 300px;
  left: 130px;
}
.flashcards.b2u7a5 .flashcards-box .flashcard-1 {
  top: 310px;
  left: 730px;
}
.flashcards.b2u7a5 .flashcards-box .flashcard-2 {
  top: 150px;
  left: 70px;
}
.flashcards.b2u7a5 .flashcards-box .flashcard-3 {
  top: 370px;
  left: 640px;
}
.flashcards.b2u7a5 .flashcards-box .flashcard-4 {
  top: 150px;
  left: 780px;
}
.flashcards.b2u7a5 .flashcards-box .flashcard-5 {
  top: 40px;
  left: 670px;
}
.flashcards.b2u7a5 .flashcards-box .flashcard-6 {
  top: 410px;
  left: 320px;
}
.flashcards.b2u7a5 .flashcards-box .flashcard-7 {
  top: 10px;
  left: 470px;
}
.flashcards.b2u7a5 .flashcards-box .flashcard-8 {
  top: 50px;
  left: 260px;
}

.swim-with-fish-book2 {
  overflow: hidden;
  background: url('../assets/book2/unit7/swim-with-fish/background.jpg?1742470466');
}
.swim-with-fish-book2 .roundDisplay {
  margin: 35px;
}
.swim-with-fish-book2 .roundDisplay div {
  color: #fff;
  width: 200px;
  font-size: 2em;
  float: left;
}
.swim-with-fish-book2 .roundDisplay img {
  width: 40px;
  margin-top: -22px;
}
.swim-with-fish-book2 .chipchip {
  position: absolute;
  top: 94px;
  -moz-transition: right 3s;
  -o-transition: right 3s;
  -webkit-transition: right 3s;
  transition: right 3s;
}
.swim-with-fish-book2 .fish {
  position: absolute;
  top: 233px;
  -moz-transition: right 3s;
  -o-transition: right 3s;
  -webkit-transition: right 3s;
  transition: right 3s;
}
.swim-with-fish-book2 .answer {
  background-color: white;
  color: black;
  font-size: 1.5em;
}
.swim-with-fish-book2 .answer-drop-box {
  width: 70px;
  height: 70px;
  border: solid 1px black;
  background-color: white;
}
.swim-with-fish-book2 .container-words {
  margin-top: 45%;
  margin-left: -5%;
}
.swim-with-fish-book2 .count-down {
  position: absolute;
  left: 418px;
  top: 531px;
  height: 51px;
  width: 122px;
  background-color: #f5f951;
  color: #000;
  font-size: 2em;
  text-align: center;
  border: #000 1px solid;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  padding-top: 3px;
}
.swim-with-fish-book2 .answer-container {
  width: 60%;
  height: 55px;
  margin-left: 31%;
  float: left;
  padding-right: 10px;
  margin-top: 10px;
}
.swim-with-fish-book2 .answer-container div {
  width: 120px;
  height: 50px;
  float: left;
  cursor: pointer;
  padding-right: 0px;
  font-size: 2em;
  text-align: center;
  margin: 5px 16px 0px 2px;
  padding-left: 12px;
}
.swim-with-fish-book2 .answer-container div:hover, .swim-with-fish-book2 .answer-container div:active, .swim-with-fish-book2 .answer-container div.active {
  background: transparent;
  color: darkgreen;
}

/*************
FREE BIRD
*************/
.freebird {
  background: url('../assets/common/group2/freebird/background.jpg?1742470475');
}
.freebird .roundTitle {
  position: absolute;
  display: inline;
  padding: 5px;
  width: 110px;
  text-align: center;
  font-size: 16px;
  font-style: bold;
  background: lightblue;
}
.freebird .tokens img {
  position: relative;
}
.freebird img {
  position: absolute;
}
.freebird img.mark {
  position: absolute;
  top: -12px;
}
.freebird .cage-background {
  z-index: 1;
}
.freebird .cage-bird {
  top: 170px;
  left: 90px;
  z-index: 2;
}
.freebird .cage-foreground {
  z-index: 3;
}
.freebird .cage-door {
  left: 268px;
  z-index: 4;
}
.freebird .bird {
  z-index: 6;
}
.freebird .question_box .question_item {
  top: 100px;
  left: 610px;
}
.freebird .question_box .speaker {
  position: absolute;
  background: url('../assets/book2/unit8/jeep-in-sahara/speaker.png?1742470466');
  cursor: pointer;
  top: 370px;
  left: 840px;
  width: 70px;
  height: 70px;
  z-index: 5;
}
.freebird .question_box .speaker:hover {
  background: url('../assets/book2/unit8/jeep-in-sahara/speaker-hover.png?1742470466');
}
.freebird .option {
  position: absolute;
  font-size: 2.2em;
  width: 180px;
  height: 50px;
  background-color: #fff;
  border: #FF3BBB 2px solid;
  top: 450px;
  text-align: center;
  cursor: pointer;
  z-index: 5;
}
.freebird .option:hover {
  border: #1A00FF 2px solid;
}
.freebird .option1 {
  left: 530px;
}
.freebird .option2 {
  left: 730px;
}