@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:url("../img/bg_1.png");
    background-size:cover;
}

#tab_2, #tab_3{
    background:url("../img/bg_2.png");
    background-size:cover;
}

#tab_4{
  background:url("../img/bg_3.png");
  background-size:cover;
}

#tab_5, #tab_6{
  background:url("../img/bg_4.png");
  background-size:cover;
}

#tab_7{
  background:url("../img/bg_9.png");
  background-size:cover;
}

#tab_8{
  background-image:url("../img/bg_10.png");
  background-size:cover;
}

#tab_8 .btn_home{
  border-radius:0 10px 0 0;
}

#activity_description{
    height:44%;
    width:100%;
    background:#3E2E4E;
    margin-top:14%;
}

.tab_nav{
    position:absolute;
    bottom:0;
    width:16%;
    height:9.5%;
    left: 42%;
}

.tab_nav div{
    display:inline-block;
    float:left;
    height:100%;
}


.custom_btn{
    width:33%;
    height:100%;
    background: #64b238;
    color:#FFF;
    font-size:3em;
    text-align:center;
    border-bottom:solid 6px #006633;
    bottom:0;
    position:absolute;
}


.btn_previous{
    border-radius:10px 0 0 0;
    left:1%;
}

.btn_home{
    border-radius:0;
    right:33%;
}

.btn_next{
    border-radius:0px 10px 0 0;
    right:0;
}


.custom_btn:hover{
    cursor:pointer;
    background:#79C84F;
}

.custom_btn:active{
    transform:scaleY(0.8);
    background:#006633;
}

#tab_1 .btn_home{
    border-radius:10px 0 0 0;
}

.header{
    height:20%;
    width:80%;
    background-image:url("../img/popup_2.png");
    background-size:100% 100%;
    background-repeat:no-repeat;
    position:absolute;
    top:6%;
    left:2%;
}

.header h3{
    font-family:'cabin-regular';
    font-size:2em;
    color:#3F372D;
    margin:0;
    position:relative;
    top:50%;
    transform:translateY(-50%);
    padding:0 4%;
    text-align:justify;
}

.nav_bar{
    position:absolute;
    width:14%;
    height:13%;
    right:3%;
    top:5%;
}

.nav_bar > div{
    width:45%;
    margin-right:5%;
    height:100%;
    display:inline-block;
    float:left;
    background-image:url("../img/nav_3.png");
    background-size:100% 100%;
}

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

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

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

.items{
    position:absolute;
    width:85%;
    height:37%;
    top:45%;
    left:8%;
}

.items img{
    height:100%;
    display:inline-block;
    float:left;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
}

#tab_2 .items img{
    margin-right:5.2%;
}

.items img:hover{
  cursor:pointer;
  transform:scale(1.1);
  opacity:0.65;
}

.items img:active{
  transition:none;
  opacity:1;
  transform:scale(0.95);
}

.items img:last-of-type{
    margin-right:0 !important;
}

.item_description p{
  font-family:'cabin-regular';
  font-size:1.85em;
  margin:0;
  padding:0 6%;
  position:relative;
  top:50%;
  transform:translateY(-50%);
  color:#624F3E;
  text-align:justify; 
  line-height:1.2em; 
}

.item_description{
    position:absolute;
    height:100%;
    width:32%;
    margin-right:2%;
    float:left;
    background-image:url("../img/popup_1.png");
    background-size:100% 100%;
    background-repeat:no-repeat;
    display:none;
}

.items_descriptions .btn_close{
    z-index:4;
    width:14%;
    position:absolute;
    top:-4%;
    right:-3%;
}

#tab_3 .items{
  width:97%;
  height:34.1%;
  left:2%;
  
}

#tab_5 .items{
  width:98%;
  left:1%;
}


#tab_5 .items img{
  height:80%;
  margin-right:-2%;
}

#tab_5 .items img:nth-of-type(2), #tab_5 .items img:nth-of-type(4){
  margin-top:7%;
  margin-right:0.6%;
}

#tab_5 .items img:last-of-type{
  margin-right:0;
}

#tab_3 .items img{
  margin-right:0.9%;
}

#tab_6 .items{
  width:92%;
  left:4%;
  top:43%;
  height:45%;
}

#tab_6 .items img{
  height:71.5%;
  margin-right:1%;
}


#tab_6 .items img:nth-of-type(2){
  margin-top:6.4%;
  margin-right:3%;
}

#tab_6 .items img:last-of-type{
  margin-top:6.4%;
}

.popup{
  position:absolute;
  z-index:4;
  width:97%;
  height:83%;
  background:rgba(255, 255, 255, 0.75);
  border-radius:15px;
  display:none;
}

.btn_close{
  position:absolute;
}

.popup{
  background-image:url("../img/popup_1.png");
  background-size:70%;
  background-position:50% 50%;
  background-repeat:no-repeat;
}

.popup .btn_close{
  height:12%;
  right:15%;
  top:16%;
}

.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%;
}

.item_description{
  width:28%;
  height:36%;
  z-index:2;
}

.item_description .btn_close{
  position:absolute;
  height:25%;
  right:-2%;
  top:-4%;
}

#tab_2 .item_description{
  top:45%;
}

#tab_2 .item_description:first-of-type{
  left:7%;
}

#tab_2 .item_description:nth-of-type(2){
  left:36%;
}

#tab_2 .item_description:nth-of-type(3){
  left:65%;
}

#tab_3 .item_description{
  width:24%;
  top:45%;
  height:34%;
}

#tab_3 .item_description:first-of-type{
  left:1%;
}

#tab_3 .item_description:nth-of-type(2){
  left:25.6%;
}

#tab_3 .item_description:nth-of-type(3){
  left:50.1%;
}

#tab_3 .item_description:nth-of-type(4){
  left:74.5%;
}

#tab_5 .item_description{
  top:45%;
  height:30%;
  width:25%;
}

#tab_5 .item_description:first-of-type{
  left:1%;
}

#tab_5 .item_description:nth-of-type(2){
  left:18%;
  top:60%;
}

#tab_5 .item_description:nth-of-type(2){
  left:18%;
  top:60%;
}

#tab_5 .item_description:nth-of-type(2) p{
  font-size:1.6em;
}

#tab_5 .item_description:nth-of-type(3){
  left:40%;
}

#tab_5 .item_description:nth-of-type(4){
  top:60%;
  left:56%;
}

#tab_5 .item_description:nth-of-type(5){
  left:74.6%;
}

#tab_6 .item_description{
  height:32%;
  width:24%;
  top:43%;
}

#tab_6 .item_description:first-of-type{
  left:3%;
}

#tab_6 .item_description:nth-of-type(2){
  left:27.1%;
  top:55%;
}

#tab_6 .item_description:nth-of-type(3){
  left: 51.3%;
}

#tab_6 .item_description:nth-of-type(4){
  top:55%;
  left:75.4%;
}

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

.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;
  bottom:3%;
  left: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%);
}

.activity_container{
  position:absolute;
  height: 30%;
  width:85%;
  left:7.5%;
}

.activity_container:nth-of-type(4){
  top: 27%;
}

.activity_container:nth-of-type(5){
  bottom: 11%;
}

.activity_container > div{
  height:100%;
  width:24%;
  display:inline-block;
  float:left;
  margin-right:1.32%;
}

.activity_container > div img{
  height:80%;
  position:relative;
  left:20%;
}

.activity_container .check{
  position:absolute;
  width:4.5%;
  height:60%;
  margin-top:3%;
  margin-left:0.3%;
}

.activity_container .check > div{
  width:100%;
  height:50%;
  margin-bottom:5%;
  background-image:url("../img/nav_7.png");
  background-size:100% 100%;
}

.activity_container .check i{
  color:white;
  margin:0;
  padding:0;
  font-size:2.6em;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

.activity_container input{
  margin:0;
  padding:0;
  height:20%;
  width:70%;
  border:none;
  margin:-2% 0 0 25%;
  font-family:'cabin-regular';
  font-size:2em;
  border:4px solid #423826;
  border-radius:10px;
}


.activity_container > div:last-of-type{
  margin-right:0;
}

.activity_container:nth-of-type(5) > div:first-of-type{
  margin-left:12.5%;
}

#tab_8 .header{
  left:10%;
  top:5%;
}

.popup_help{
  width:100% !important;
  height:100% !important;
}

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

#tab_7 .popup_help{
  background-size:70% 35%;
}

#tab_7 .popup_help h3{
  text-align:center;
}

#tab_7 .popup_help .btn_close{
  top:28%;
}

.popup_help h3 b{
  color:whitesmoke;
}

.off{
  background:url("../img/nav_4.png") !important;
  background-size:100% 100% !important;
}

.correct{
   background:url("../img/nav_9.png") !important;
  background-size:100% 100% !important; 
}

.incorrect{
   background:url("../img/nav_8.png") !important;
  background-size:100% 100% !important; 
}