span[class^="f_ic_"],
span[class^="h_ic_"] {
  background-image: url(ui/icons@2x.png);
  background-size: 470px;
  cursor: pointer;
  background-repeat: no-repeat;
}
#coverflow,
.covers,
.wrapper {
  overflow: hidden;
}
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 800px;
  min-width: 1280px;
  overflow: hidden;
}
body {
  font-family: SassoonInfantStd;
  touch-action: none;
}
b,
header h1,
strong {
  font-family: SassoonInfantStdBold;
}
::-moz-selection {
  background-color: rgba(0, 0, 0, 0);
}
::selection {
  background-color: rgba(0, 0, 0, 0);
}
.bttn {
  pointer-events: auto;
}
.disable {
  pointer-events: none !important;
}
#coverflow li,
.hideSpashVids,
header h3,
header:after {
  pointer-events: none;
}
@font-face {
    font-family: 'SassoonInfantStdBold';
    src: url('../fonts/SassoonInfantStd-Bold.woff2') format('woff2'),
        url('../fonts/SassoonInfantStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SassoonInfantStd';
    src: url('../fonts/SassoonInfantStd.woff2') format('woff2'),
        url('../fonts/SassoonInfantStd.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: 'GhostKidAOE';
  src: url('../fonts/GhostKidAOE.woff2') format('woff2'),
      url('../fonts/GhostKidAOE.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


.wrapper {
  position: relative;
  height: 100vh;
  width: 100vw;
  min-height: 800px;
  min-width: 1280px;
  background-image: url('../images/theme_masking.png'); background-color: #f4f2f1;
}
.wrapper.theme_si {
  background-position: -1280px 0;
}
.wrapper.theme_fc {
  background-position: -2560px 0;
}
.wrapper.theme_sc {
  background-position: -3840px 0;
}
footer,
header {
  padding: 0;
  position: relative;
  z-index: 100;
}
header {
  height: 165px;
  /* pointer-events:none; */
}
.max1280 {
  max-width: 1280px;
  position: relative;
  margin: 0 auto;
}
.glb_icons,
footer,
header h3 {
  position: absolute;
}

header h1 {
  font-family: 'GhostKidAOE';
  margin: 0 auto;
  width: 520px; height: 160px;
  text-align: center;
  color: #fff;
  font-size: 30px;
  vertical-align: middle;
  text-shadow: 3px -3px 0 #2178be,3px 3px 0 #2178be,-3px 3px 0 #2178be,-3px -3px 0 #2178be,-3px 1px 0 #2178be,3px 0 0 #2178be,0 -3px 0 #2178be,0 3px 0 #2178be,
  5px 6px 5px rgba(0, 0, 0, 0.27);
  line-height: 1.2;
  padding: 8px 24px;
}
header h1 img { width: 180px; }
.theme_ji header h1, .theme_si header h1, .theme_fc header h1, .theme_sc header h1{
  font-size: 38px;
}
header h1 > span {
  display: block;
  padding-top: 5px;
  text-shadow: 3px -3px 0 #5B514F,3px 3px 0 #5B514F,-3px 3px 0 #5B514F,-3px -3px 0 #5B514F,-3px 1px 0 #5B514F,3px 0 0 #5B514F,0 -3px 0 #5B514F,0 3px 0 #5B514F,5px 6px 5px rgba(0, 0, 0, 0.27);
  
}
header h1 > span > span{
  display: inline-block;
  margin-left: 5px;
  color: #F58220;
  text-shadow: 3px -3px 0 #fff,3px 3px 0 #fff,-3px 3px 0 #fff,-3px -3px 0 #fff,-3px 1px 0 #fff,3px 0 0 #fff,0 -3px 0 #fff,0 3px 0 #fff,5px 6px 5px rgba(0, 0, 0, 0.27);
}

header h3 {
  top: 70px;
  left: 60px;
  font-family: SassoonInfantStdBold;
  font-size: 28px;
  color: #ed2d6d;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 5px 20px 10px 30px;
}
header h3 span {
  font-family: SassoonInfantStd;
  color: #0057a6;
}

.h_nav_icons {
  position: absolute;
  top: 7px;
  z-index: 1;
  pointer-events: auto;
}

.ins_panel,.vocab_list {
  z-index: 101;
  position: absolute
}

span[class^=h_ic_] {
  background-image: url(ui/icons@2x.png);
  background-repeat: no-repeat;
  display: block;
  cursor: pointer;
  background-size: 470px;
  pointer-events: auto;
}

span.h_ic_home {
  width: 59px;
  height: 59px;
  position: absolute;
  border-radius: 50%;
  left: 43px;
  /* background-position: -150px -42px;
  background-size: 635px; */
  background-position: -131px -34px;
  background-size: 570px;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
}

span.h_ic_audio {
  width: 59px;
  height: 59px;
  background-position: -356px -166px;
  position: absolute;
  border-radius: 50%;
  left: 128px;
  background-size: 570px;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
}

span.h_ic_audio.pause {
  background-position: -447px -166px;
}
span.h_ic_back {
  width: 59px;
  height: 59px;
  background-position: -18px -34px;
  position: absolute;
  top: 0px;
  left: 215px;
  border-radius: 50%;
  background-size: 570px;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
}

span[class^="h_ic_"] {
  display: block;
}
.glb_icons {
    top: 15px;
    right: 31px;
}
.glb_icons span {
  display: inline-block;
  margin: 0 2px 0 10px;
  width: 46.5px;
  height: 46.5px;
  border-radius: 50%;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.4);
}
span.h_ic_fulscrn {
  background-position: -4px -126px;
}
span.h_ic_restore {
  background-position: -4px -192px;
}
span.h_ic_exit {
  background-position: -4px -258px;
	visibility: hidden;
}
footer {
  bottom: 0;
  height: 44px;
  width: 100%;
}
.f_nav_icons {
  position: relative;
  top: -40px;
  height: 0;
}
span.f_ic_next,
span.f_ic_prev {
  height: 62px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
}
span[class^="f_ic_"] {
  display: block;
}
span.f_ic_prev {
  width: 62px;
  background-position: -94px -268px;
  margin-left: -133px;
}
span.f_ic_next {
  width: 63px;
  background-position: -313px -268px;
  margin-left: 71px;
}
span.f_ic_play {
  width: 99px;
  height: 99px;
  background-position: -186px -128px;
  position: absolute;
  border-radius: 50%;
  left: 50%;
  margin-left: -48px;
  top: -25px;
}
span.f_ic_play.pause {
  background-position: -186px -239px;
}
.CjFallon {
  width: 81px;
  height: 36px;
  position: absolute;
  background-image: url(ui/CjFallon.png);
  top: -8px;
  right: 20px;
  display: none;
}
#splashVideo,
.vidWall {
  top: 0;
  height: 100%;
}
.vidWall {
  transition: all 1s ease 0s;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 87, 166, 1);
  border-radius: 6px;
}
::-webkit-scrollbar-corner {
  background: 0 0;
}
#splashVideo {
  position: absolute;
  left: 50%;
  z-index: 10100;
  width: auto;
  margin: 0 auto;
  display: block;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
}
.covers,
.vidWall {
  width: 100%;
  position: absolute;
}
.vidWall {
  left: 0;
  background-color: #fff;
  z-index: 10099;
  position: fixed;
}
.hideSpashVids {
  opacity: 0;
}
body {
  background-color: #fff;
}
#coverflow {
  max-width: 670px;
  height: 440px;
  background: rgba(0, 0, 0, 0);
  position: relative;
  margin: 100px auto 30px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: solid 0;
}
.covers {
  height: 100%;
  margin: 0 auto;
}
#coverflow ul {
  top: 32.7px;
  width: 5000px;
  margin: 0;
  padding: 0;
  position: absolute;
  transition: transform 0.5s ease;
  transform: translate3d(-297px, 0, 0);
}
#coverflow li {
  width: 140px;
  list-style: none;
  float: left;
  transition: margin 0.5s ease, transform 0.5s ease;
  position: relative;
}
#coverflow .imgdiv,
#coverflow .imgdiv img {
  width: 180px;
  display: block;
}
#coverflow .imgdiv {
  transition: transform 0.5s ease;
  pointer-events: auto;
  position: relative;
  border-radius: 20px;
}
#coverflow .Lightbox,
#coverflow .Preloader,
#coverflow .refl {
  display: none;
}
#coverflow ul li .leftItems,
li:nth-child(-n + 7) .imgdiv {
  transform: perspective(400px) rotateY(30deg);
}
#coverflow ul li .rightItems,
li:nth-child(n + 9) .imgdiv {
  transform: perspective(400px) rotateY(-30deg);
}
#coverflow ul li .straight,
li:nth-child(8) .imgdiv {
  transform: rotateY(0) scale(1.2);
}
#coverflow li:nth-child(-n + 7),
#coverflow ul li.leftLI {
  transform: translate3d(-10px, 0, 0);
}
#coverflow li:nth-child(n + 9),
#coverflow ul li.rightLI {
  transform: translate3d(10px, 0, 0);
}
#coverflow ul .straightLI {
  transform: translate3d(0, 0, 0);
}
.notransition {
  transition: none !important;
}
#coverflow .imgdiv a,
#coverflow .text {
  cursor: pointer;
  cursor: grab;
}
#nextBtn,
#prevBtn,
.ScrollBar {
  cursor: pointer;
  position: absolute;
}
.Controller {
  z-index: 10000;
  position: relative;
  margin: 0 auto;
  width: 1280px;
  height: 2px;
}
#nextBtn,
#prevBtn {
  width: 41px;
  height: 41px;
  background-image: url(ui/navs.png);
  top: -305px;
  left: 30px;
  text-indent: -5555px;
  background-size: 85px;
  background-repeat: no-repeat;
}
#nextBtn {
  background-position: 100% 0;
  left: auto;
  right: 30px;
}
.Preloader {
  position: absolute;
  width: 30px;
  height: 30px;
  margin-left: 62%;
  margin-top: 1%;
  background-color: #aaa;
  border: 3px solid #333;
  border-radius: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: transform 3s ease-in-out, opacity 3s ease-in-out;
}
.modified {
  opacity: 1;
  transform: scale(0);
}
.ScrollBar {
  background-image: url(ui/ScrollBar.png);
  width: 670px;
  height: 10px;
  z-index: 10000;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 30px;
  overflow: visible;
  border-radius: 5px;
}
.ScrollBar .firstArrow,
.ScrollBar .lastArrow {
  display: none;
  width: 20px;
  height: 20px;
  float: left;
  border-radius: 10px;
}
.ScrollBar .firstTriangle,
.ScrollBar .lastTriangle {
  margin-top: 6px;
  margin-left: 8px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.ScrollBar .firstTriangle {
  border-right: 5px solid #777;
}
.ScrollBar .lastTriangle {
  border-left: 5px solid #777;
}
.ScrollBar .dragArea {
  width: 770px;
  height: 20px;
  background: rgba(100, 100, 100, 0.3);
  float: left;
  border-radius: 10px;
}
.ScrollBar .tracker {
  width: 35px;
  top: -15px;
  height: 35px;
  background-image: url(ui/tracker.png);
  margin: 2px;
  border-radius: 50%;
  float: left;
  left: 0;
  z-index: 1000;
  transition: left 0.5s;
}

/* Book Listing */
.sectionContainer .covers {
  text-align: center;
  margin: 20px auto;
  width: 1010px;
  padding-left: 0px;
  position: relative;
}
.sectionContainer .covers ul{ margin: 0; padding: 0;}
.sectionContainer .covers li {
  display: inline-block;
  margin: 10px 10px;
  cursor: pointer;
}
.sectionContainer .covers li img{
  pointer-events: none;
}

/**/
.iframeElem {
  width: 100vw;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border: 0 none;
  z-index: 100;
  /*display: none;*/
}

#loader {
  width: 100%;
  height: 100%;
  z-index: 100000;
  background-image: url(ui/loader1.gif);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: rgba(255, 255, 255, 0.75);
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}