@font-face{
    font-family: 'cabin-italic';
    src: url('../fonts/Cabin-Italic.ttf');
}

@font-face {
    font-family: cabin-regular;
    src: url("../fonts/Cabin-Regular.ttf");
}

@font-face {
    font-family: cabin-bold;
    src: url("../fonts/Cabin-Bold.ttf");
}

@font-face {
    font-family: cabin-medium;
    src: url("../fonts/Cabin-Medium.ttf");
}

.tab{
    width:97%;
    height:83%;
    border-radius:15px;
    position:absolute;
    display:none;
    background-size:cover;
}

#tab_1{
    display:block;
    background-color:white;
    background-image:url("../img/bg_6_1.png");
    background-size:cover;
}


.popup{
  position:absolute;
  z-index:4;
  width:100%;
  height:100%;
  background:rgba(255, 255, 255, 0.75);
  border-radius:15px;
  background-size:85%;
  background-position:50% 50%;
  background-repeat:no-repeat;
  display:none;
}


.btn_close{
  position:absolute;
}

.popup .btn_close{
  width:5%;
  right: 8%;
  top:30%;
}

.popup div{
  position:absolute;
  width:64%;
  height:45%;
  left:18%;
  top:27%;
}

.popup h3{
  color:white;
  font-family:'cabin-regular';
  margin:0;
  font-size:4.8em;
  text-align:justify;
  position:relative;
  top:50%;
  transform:translateY(-50%);
  padding:0 2%;
}



#tab_1 .video{
  position:absolute;
  width:65%;
  height:76%;
  left:17.5%;
  background:#35311E;
  top:12%;
}

.btn_help:hover, .btn_close:hover{
    cursor:pointer;
    opacity:0.85;
    transform:scale(1.1);
}

.btn_play{
  height:30%;
  top:35%;
  left:50%;
  transform:translateX(-50%);
  position:absolute;
}

.btn_play:hover{
  cursor:pointer;
  opacity:0.85;
  transform:translateX(-50%) scale(1.1);
}

.btn_play:active{
  opacity:1;
  transform:translateX(-50%) scale(0.95);
}

.video iframe{
  width:100%;
  height:100%;
  display:none;
  border:none;
}

.btn_help{
  background-image:url("../img/nav_3.png");
  background-size:100% 100%;
  width:6%;
  height:10.5%;
  position:absolute;
  top:6%;
  right:2%;
}

.btn_help p{
  color:white;
  margin:0;
  font-size:3.5em;
  font-family:'cabin-bold';
  position:relative;
  text-align:center;
  top:50%;
  transform:translateY(-50%);
}

.btn_help:active, .btn_close:active{
  opacity:1;
  transform:scale(1);  
}


.popup_help h3{
  font-size:3em !important;
  color:#624F3E !important;
}


.popup_help h3 b{
  color:whitesmoke;
}

.question{
  position:absolute;
  width:16%;
  height:8.7%;
  background:#E8E2C2;
  left:12.5%;
  top:21.5%;
  border-radius:10px;
  box-sizing:border-box;
  border:solid 3px #603813;
}

.question:hover{
  cursor:pointer;
  transform:scale(1.05);
}

.question:active{
  transform:scale(0.95);
}

.question > input{
  width:100%;
  height:100%;
  border:none;
  outline:none;
  background:transparent;
  text-align:center;
  font-size:2em;
  pointer-events:none;
}

.question:nth-of-type(1){
  left:2%;
  top:49%;
}

.question:nth-of-type(2){
  left:12.5%;
  top:72.6%;
}

.question:nth-of-type(3){
  left:23%;
  top:49%;
}

.question:nth-of-type(4){
  left:62%;
  top:49%;
}

.question:nth-of-type(5){
  left:72%;
  top:72.6%;
}

.question:nth-of-type(6){
  left:82%;
  top:49%;
}

.incorrect{
  background:red !important;
  color:white !important;
}

.correct{
  background:green !important;
  color:white !important;
}