body {
  font-size:16px;
}

h1, h2, h3, h4, h5, h6, p {  
  line-height: 1.45;
}

h1 {
  font-size:1.2em;
}
h2 {
  font-size:1em;
}
h3 {
  font-size:0.9em;
}
h4 {
  font-size:0.8em;
}
h5,h6 {
  font-size:0.75em;
}

#stage p, #stage li,
#interactive-container label, #interactive-container button, 
#interactive-container p, #interactive-container li, #interactive-container .transcript span {
  font-size: 0.7em;
  margin-top:0;
}

#interactive-container p a,
#interactive-container p label,
#interactive-container p button {
  font-size: 1em;
}

#interactive-container {
  box-sizing: border-box;
  width: 100%;
  height: 480px;
  position: relative;
  /*background: #B4E3FA;*/
  background: transparent;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}
#stage {
  font-family: 'Open Sans', sans-serif;
}

#interactive-container *{
  box-sizing: border-box;
}

#interactive-container h4 {
  margin:0.5rem 0;
}

#interactive-container #content {
  position:absolute;
  width:100%;
  height:100%;
  /*background-color:#B4E3FA;*/
}

#interactive-container #content div, #interactive-container div {
  position: absolute;
  overflow:hidden;
}

#interactive-container img, #interactive-container video {
  width:100%;
}
#interactive-container video,  .catel-video video{
  height:100%;
  margin:auto;
}

#menu-container ul{
  list-style:none;
  margin: 4em 0 1em;
  padding:0;
}
#menu-icon {
  cursor:pointer;
}
#menu-container a {
  color: #444;
  line-height: 1.5;  
  padding: .5em 2em;
  display:block;
  background:transparent;
  transition:background .2s, color .2s;
  text-decoration: none;  
}
#menu-container a:hover {
  color: #000;
  background:rgb(205, 205, 205)
}
#menu-container {
  width: 30%; 
  background-color: #fff; 
  box-shadow: #000 0px 0px 20px -3px; 
  left:70%;
  z-index:1;
}

hr {
  height:1px;
  background:#5e5e5e;
  border:0;
}

/*
#interactive-container #nav {
  left:83%;
  top:85%;
  width:16%;
}
#interactive-container #nav a {
  display:block;
  width:40%;
  float:right;
  cursor: pointer;
}
#interactive-container #nav a:first-child {
  margin-left:5%;
}
*/

a {
  text-decoration: none;
}

#interactive-container .script {
  display:none;
}

#interactive-container .arrow-up {
  width: 0; 
  height: 0; 
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;  
  border-bottom: 35px solid black;
}

#interactive-container #quiz-submit-btn {
  cursor:pointer;
}

#interactive-container .action-resume-animation {
  cursor: pointer;
}

.moveable {
  width: 10%;
  height: 10%;
}

#nav {
  position: absolute;
  right: 3%;
  bottom: 5%;
  width: 18%;
  height: 10%;
  z-index:100;
}
#nav-next, #nav-prev {
  position:absolute;
  display:block;  
  width: 4.78%;
  height: 9.2%;
  top: 45.4%;
  padding: 0.7%;    
  right: 0;
  opacity: 0.7;
  transition: opacity 300ms;
}

#nav a:hover {
  opacity: 1;
}

#nav-prev {  
  right: auto;
}

.draggable.disabled {
  color: #999 !important;
  font-style:italic;  
}
.draggable.disabled:hover {
  background: #f0f0f0 !important;
}

.quiz .correction {
  z-index:100;
}

.tooltip {
  cursor:pointer;
}

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box {
  background: #85be57;
  border: 3px solid #76b743;
  border-radius: 6px;
}
.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-arrow .tooltipster-arrow-border {
  border-top-color: #76b743;
}
.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-arrow .tooltipster-arrow-background{
  border-top-color: #85be57;
}

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content {
  color: #fff;
  font-size:0.9em;
  padding: 8px;
}

.visuallyhidden {
  border:0;
  clip: rect(0 0 0 0);
  height:1px;
  margin:-1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#skip-to-content a{
  position: absolute;
  left: -10000px;
  top: auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
#skip-to-content a:focus {
  position: static;
  width:auto;
  height:auto;
}

.draggable.disabled {
  background: #f0f0f0;
  cursor: no-drop;
}

button#quiz-submit-btn, .quiz-next-btn {
  border: 3px solid rgb(209, 36, 39);
  border-radius: 30px;
  padding: 2% 4%;
  color: rgb(209, 36, 39);
  background-color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  display:inline-block;
}

button#quiz-submit-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
.quiz label {
  cursor:pointer;
}

.transcript span {
  cursor:pointer;
}
.transcript span.active {
  /*text-decoration: underline;*/
  background-color: #CCC;
}
.playvideo {
  top:0;
  width:100%;
  height:100%;
  background: url(../images/ic_play_circle_outline_white_24px.svg) no-repeat center;
  background-color: rgba(0,0,0,0.5);
  background-size: 14%;
}
.playvideo.loading {
  background-image: url(../images/loading-ring-alt.svg);
}

.quiz-hotspot {
  cursor:pointer;
}

.hotspot-marker {
  background:#FFF; 
  width:7px;
  height:7px; 
  border-radius:50%; 
  border: 1px solid rgb(209, 36, 39);
  opacity:0.6;
}
.hotspot {
  background: rgba(0,255,0,0.6);
}

.left {
  float:left;
}
.right {
  float:right;
}

table {
  border-collapse: collapse;
}
td, th {
  border: 1px solid #555;
}
.popup {
  background: rgba(0,0,0,0.5);
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:999;
}
.popup > div {
  background: #fff;
}
select {
  width: 100%;
}

span > a {
  color: inherit !important;
}

.guide {
  position: absolute;
}

.guide-logo {
  width: 18.0485%; height: 21.9104%; z-index: 1;  
  background: url(../images/binus-logo.svg) no-repeat;
  background-size: contain;
}
.guide-logo.white {
  background-image: url(../images/binus-logo-white.svg);
}
.guide-menu {
  width: 4.48718%; height: 7.22155%; z-index: 2; left: 92.1575%; top: 4.48384%;
  background: url(../images/menuicon.svg) no-repeat;
  background-size: contain;
}

.guide-draft {
  width: 15.48718%; height: 7.22155%; z-index: 2; 
  right: 0; 
  bottom: 0;
  background: url(../images/dc-draft.svg) no-repeat;
  background-size: contain;
}

input.quiz-input-radio{
    width: 1.2em;
    height: 1.2em;
}

.guide-footer, footer {
  position: absolute;
  bottom: 1%;
  text-align: center;
  width: 100%;
  font-size: .55em;
  line-height: 1.5;
}