#toggle-title {
    position: absolute;
    top: 2.3em;
    left: 0em;
    font-size: 16em;
    font-weight: normal;
    color: black;
}
.he #toggle-title
.ar #toggle-title {
    left: 0.5em;
}

#toggle-content {
    position: absolute;
    top: 0.7em;
    left: 0em;
    font-size: 14em;
    font-weight: normal;
}
#toggle-content.off{
    left: 19.45em;
}
.he #toggle-content,
.ar #toggle-content {
    left: 2.6em;
}
.he #toggle-content.off,
.ar #toggle-content.off {
    left: 0.28em;
}





body {
  background-color: black;
  font-family: 'Arimo', sans-serif;
  font-size: 10px;
}
.app-help-content {
  cursor: default;
}
.ar .app-help-content{
  font-size: 1.8em;
}
.app-content {
  background-color: #3b414d !important;
}
.sketchfab-wrapper {
  width: 68.3em;
  height: 60.0em;
  position: absolute;
  top: 0;
  left: 34.1em;
  background-image: url('img/BG-3d.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}
#api-frame,
.mask {
  position: absolute;
  top: 0;
  left: 34.1em;
  width: 68.3em;
  height: 60.0em;
  border: none;
}
.mask {
  background-image: url('img/mask.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  pointer-events: none;
}
.he .sketchfab-wrapper,
.he #api-frame,
.he .mask,
.ar .sketchfab-wrapper,
.ar #api-frame,
.ar .mask {
  left: 0;
}
.button-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 34.1em;
  height: 60.0em;
  background-image: url('img/BG-Choice.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}
.he .button-wrapper,
.ar .button-wrapper {
  left: 68.3em;
  background-image: url('img/BG-Choice-he.jpg');
}

.button-wrapper-container::before{
    display: block;
    width: 100%;
    height: 7.7em;
    content: " ";
}
.button-wrapper-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  animation-name: wrapper_start;
  -webkit-animation-name: wrapper_start;
  -moz-animation-name: wrapper_start;
  -o-animation-name: wrapper_start;
  -ms-animation-name: wrapper_start;
  animation-duration: 0.6s;
  -webkit-animation-duration: 0.6s;
  -moz-animation-duration: 0.6s;
  -o-animation-duration: 0.6s;
  -ms-animation-duration: 0.6s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
}

.esophagus-wrapper-container,
.stomach-wrapper-container,
.duodenum-wrapper-container,
.smallintestine-wrapper-container,
.largeintestine-wrapper-container,
.liver-wrapper-container,
.pancreas-wrapper-container,
.alldigestive-wrapper-container,
.digestivetract-wrapper-container {
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
}

@keyframes wrapper_start {
    0%   {
      opacity: 0;
      transform: scale(0);
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
    }
    50%  {
      opacity: 1;
      transform: scale(1.05);
      -webkit-transform: scale(1.05);
      -moz-transform: scale(1.05);
      -o-transform: scale(1.05);
      -ms-transform: scale(1.05);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
    }
}

.caption {
  font-size: 1.3em;
  color: #000000;
  position: relative;
  /*pointer-events: none;*/
  width: 95%;
  top: -1.4em;
  font-weight: normal;
  line-height: 1.3em;
}
.he .caption,
.ar .caption {
  top: -0.9em;
  font-size: 1.3em;
}
.hover .caption {
  top: -0.9em
}

.content-box {
  width: 3.5em;
  height: 1.5em;
  position: absolute;
  left: -1.2em;
  bottom: 16.8em;
  background-color: transparent;
}
.he .content-box,
.ar .content-box{
  left:auto;
  right:-1.2em;
}

.content-caption {
  width: 90%;
  /*height: 26%;*/
  /*border: 1px solid red;*/
  position: absolute;
  left: 3.1em;
  bottom: 16.3em;
  color: #333333;
  direction: ltr;
  pointer-events: none;
}
.content-caption-in{
    font-size: 1.8em;
}


.content {
  width: 86%;
  height: 26%;
  /*border: 1px solid red;*/
  position: absolute;
  left: 3.1em;
  bottom: .5em;
  color: #333333;
  direction: ltr;
  /*pointer-events: none;*/
  /* bottom: 31em; */
  transition: transform 0.2s ease-in-out;
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  -moz-transition: -moz-transform 0.2s ease-in-out;
  -o-transition: -o-transform 0.2s ease-in-out;
  overflow: auto;
}
.content-in{
    font-size: 1.4em;
    line-height: 1.25em;
}
.ar .content-in {
  font-size: 1.5em;
  line-height: 1.25em;
}

.he .content,
.he .content-caption,
.ar .content,
.ar .content-caption {
  direction: rtl;
  left:auto;
  right: 2.7em;
}





.wrapper {
  width: 8.6em;
  height: 9.6em;
  cursor: pointer;
  /*-webkit-transition: -webkit-transform 0.2s ease-in-out;
  -moz-transition: -moz-transform 0.2s ease-in-out;
  -o-transition: -o-transform 0.2s ease-in-out;*/
  /* opacity: 0.7; */
}
.wrapper .caption {
  top: -4.7em;
  left: 0em;
}
.wrapper:hover > div:not(.caption) {
  
}
.wrapper:hover .caption {
  bottom: 1.3em;
  transition: 0.2s ease-in-out;
}

.onoffswitch,
#toggle-content {
  cursor: pointer;
}

.image-ltr {
    visibility: visible;
}
.image-rtl {
    visibility: hidden;
}

.image-off {
    opacity: 0;
}
.image-off.image-show {
    opacity: 100;
}
.image-on {
    opacity: 0;
}
.image-on.image-show {
  opacity: 100;
  cursor: default;
  transition: 0.2s ease-in-out;
  /*transform: scale(1.1);*/
}






.brain,
.brain-on,
.spine,
.spine-on,
.nervesskull,
.nervesskull-on,
.nervesneck,
.nervesneck-on,
.nervesspine,
.nervesspine-on,
.nervoussystem,
.nervoussystem-on,
.centralsystem,
.centralsystem-on,
.peripheralsystem,
.peripheralsystem-on  {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.hover .image-off {
    transition: 0.2s ease-in-out;
    transform: scale(1.05);
}

.brain-wrapper,
.spine-wrapper,
.nervesskull-wrapper,
.nervesneck-wrapper,
.nervesspine-wrapper,
.nervoussystem-wrapper,
.centralsystem-wrapper,
.peripheralsystem-wrapper {
  width: 8.1em;
  height: 7.2em;
  transition: transform 0.2s ease-in-out;
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  -moz-transition: -moz-transform 0.2s ease-in-out;
  -o-transition: -o-transform 0.2s ease-in-out;
  left: 23.0em;
  transition: background-image, transform 0.2s ease-in-out;
}

.he .brain-wrapper,
.he .spine-wrapper,
.he .nervesskull-wrapper,
.he .nervesneck-wrapper,
.he .nervesspine-wrapper,
.he .nervoussystem-wrapper,
.he .centralsystem-wrapper,
.he .peripheralsystem-wrapper,
.ar .brain-wrapper,
.ar .spine-wrapper,
.ar .nervesskull-wrapper,
.ar .nervesneck-wrapper,
.ar .nervesspine-wrapper,
.ar .nervoussystem-wrapper,
.ar .centralsystem-wrapper,
.ar .peripheralsystem-wrapper {
  left: 3.6em;
}

/*.brain-wrapper:hover,
.spine-wrapper:hover,
.nervesskull-wrapper:hover,
.nervesneck-wrapper:hover,
.nervesspine-wrapper:hover,
.nervoussystem-wrapper:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
}*/

.brain-wrapper-container,
.spine-wrapper-container,
.nervesskull-wrapper-container,
.nervesneck-wrapper-container,
.nervesspine-wrapper-container,
.nervoussystem-wrapper-container,
.centralsystem-wrapper-container,
.peripheralsystem-wrapper-container {
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
}


.brain-wrapper {
  position: absolute;
  /* left: 132em; */
  top: 2.1em;
  text-align: center;
  /* width: 102em; */
}
.he .brain-wrapper,
.ar .brain-wrapper {
  /* left: 32em; */
  top: 2.2em;
}
.brain-wrapper .caption {
}
.he .brain-wrapper .caption {
}

.spine-wrapper {
  position: absolute;
  /* left: 133em; */
  top: 9.5em;
  text-align: center;
  /* width: 102em; */
}
.he .spine-wrapper {
  /* left: 32em; */
  
}
.spine-wrapper .caption {
}
.he .spine-wrapper .caption {
}

.nervesskull-wrapper {
  position: absolute;
  /* left: 132em; */
  top: 18.3em;
  text-align: center;
  /* width: 102em; */
}
.he .nervesskull-wrapper {
  /* left: 32em; */
  
}
.nervesskull-wrapper .caption {
}
.he .nervesskull-wrapper .caption {
}
.ar .nervesskull-wrapper .caption,
.ar .nervesneck-wrapper .caption,
.ar .nervesspine-wrapper-container .caption {
  top: -4.5em;
  left: 0.3em;
}

.nervesneck-wrapper {
  position: absolute;
  /* left: 211em; */
  top: 25.6em;
  text-align: center;
  /* width: 102em; */
}
.he .nervesneck-wrapper {
  /* left: 32em; */
  
}
.nervesneck-wrapper .caption {
}
.he .nervesneck-wrapper .caption, .he .nervesspine-wrapper .caption {
}

.nervesspine-wrapper {
  position: absolute;
  /* left: 211em; */
  top: 32.8em;
  text-align: center;
  /* width: 102em; */
}
.he .nervesspine-wrapper {
  /* left: 32em; */
  
}
.he .wrapper .caption {
    font-size: 1.3em;
}

.ar .wrapper .caption{
  font-size: 1.6em;
  top: -3.8em;
}

.he .nervesspine-wrapper .caption {
}

.nervoussystem-wrapper {
  position: absolute;
  left: 2.8em;
  top: 13.8em;
  text-align: center;
  width: 9.5em;
  height: 11.5em;
}
.he .nervoussystem-wrapper,
.ar .nervoussystem-wrapper {
  left: 21.6em;
}
.nervoussystem-wrapper .caption {
  top: -3.6em;
  left: 0.1em;
  font-size: 1.6em;
}
.he .nervoussystem-wrapper .caption {
  top: -2.6em;
  left: 0.3em;
  line-height: 1.2em;
  font-size: 1.6em;
}
.ar .nervoussystem-wrapper .caption{
  top: -2.8em;
  left: 0.2em;
  line-height: 1.2em;
  font-size: 1.6em;
}

.ar .centralsystem-wrapper .caption, 
.ar .peripheralsystem-wrapper .caption {
    top: -2.7em;
    left: 0.27em;
    font-size: 1.6em;
}

.centralsystem-wrapper {
  position: absolute;
  left: 10.5em;
  top: 4.6em;
  text-align: center;
  /* width: 102em; */
}
.he .centralsystem-wrapper {
  /* left: 144em; */
  /* top: 328em; */
}
.centralsystem-wrapper .caption {
  top: -3.1em;
}
.he .centralsystem-wrapper .caption {
}
.peripheralsystem-wrapper {
  position: absolute;
  left: 10.5em;
  top: 24.5em;
  text-align: center;
  /* width: 102em; */
}
.he .peripheralsystem-wrapper {
  /* left: 157em; */
}
.centralsystem-wrapper .caption, .peripheralsystem-wrapper .caption {
  top: -4.3em;
  left: 0.15em;
  font-size: 1.3em;
}
.he .centralsystem-wrapper .caption, .he .peripheralsystem-wrapper .caption {
  top: -3em;
  left: 0.27em;
  font-size: 1.4em;
}


.brain-on,
.spine-on,
.nervesskull-on,
.nervesneck-on,
.nervesspine-on,
.nervoussystem-on {
  /*display: none;*/
}

.onoffswitch {
    position: absolute;
    width: 6.4em;
    height: 2.8em;
    top: 36.7em;
    left: 2.5em;
    background-image:url(../content/img/Togle-left.svg);
    background-size:100% 100%;
    transition: background-image 0.1s ease-in-out;
}
.onoffswitch.off {
     background-image:url(../content/img/Togle-right.svg);
}
.he .onoffswitch,
.ar .onoffswitch{
    left: 23.6em;
    background-image:url(../content/img/Togle-right_HE.svg);
}
.he .onoffswitch.off,
.ar .onoffswitch.off {
     background-image:url(../content/img/Togle-left_HE.svg);
}

#toggle-title {
    position: absolute;
    top: -1.4em;
    left: 0em;
    font-size: 1.6em;
    font-weight: normal;
    color: black;
}
.he #toggle-title {
    left: 0.3em;
}

.ar #toggle-title{
  left: 0.3em;
  width: 5em;
}

#toggle-content {
    position: absolute;
    top: 0.4em;
    left: 0.5em;
    font-size: 1.4em;
    transition: all 0.1s ease-in-out;
}
#toggle-content.off{
    left: 2.4em;
}
.he #toggle-content,
.ar #toggle-content {
    left: 2.6em;
}
.he #toggle-content.off,
.ar #toggle-content.off {
    left: 0.2em;
}

.image-show {    
    opacity: 100;
}



/*.he .nervoussystem-wrapper.ie {
    top: 20em;
}
.he .brain-wrapper.ie {
    top: 14em;
}
.he .spine-wrapper.ie {
    top: 87em;
}
.he .nervesskull-wrapper.ie {
    top: 175em;
}
.he .nervesneck-wrapper.ie {
    top: 248em;
}
.he .nervesspine-wrapper.ie {
    top: 232em;
}*/

.wrapper:hover .caption {
    transform: scale(1.1);
}

.he .content,
.ar .content {
    bottom: -2.2em;
}
.he .content-caption,
.ar .content-caption {
    bottom: 13.9em;
}
.he .content-box,
.ar .content-box {
    bottom: 14.3em;
}

.centralsystem-wrapper,
.peripheralsystem-wrapper {
    height: 9.8em;
    /* transform: rotate(90deg); */
}
.he .centralsystem-wrapper,
.he .peripheralsystem-wrapper,
.ar .centralsystem-wrapper,
.ar .peripheralsystem-wrapper  {
    /* transform: rotate(90deg); */
    width: 7.9em;
    height: 9.6em;
    left: 15.6em;
}

.he .caption,
.ar .caption {
    top: -4.8em;
    left: 0.4em;
}