@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 !important;
    background-repeat:no-repeat !important;
    overflow:hidden;
}

#tab_1{
    display:block;
    background:url("../img/bg_1_2.png");
}

.tab:not(#tab_1){
  background-size:104% !important;
  background-position:50% 50% !important;
}

#tab_2{
  background:url("../img/bg_1_3.png");
}

#tab_3{
  background:url("../img/bg_1_4.png");
}

#tab_4{
  background:url("../img/bg_1_5.png");
}

#tab_5{
  background:url("../img/bg_1_6.png");
}

#tab_6{
  background:url("../img/bg_1_7.png");
}

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

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

.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{
    position:absolute;
    top:18%;
    left:20%;
    width:60%;
    height:65%;
    background:black;
}

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

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

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

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

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

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

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

.btn_audio{
  border-radius:10px 10px 0 0;
  right: -60%;
}

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

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

.drags{
  position:absolute;
  width:35%;
  height:68%;
  left:3%;
  top:19%;
  /* background:red; */
}
.drags > .drag{
  display:inline-block;
  float:left;
  width:30%;
  margin-right:3%;
  margin-bottom:3.5%;
}

.drag:nth-of-type(7){
  margin-left:33%;
}

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

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

.grabbing{
  cursor: -webkit-grabbing; 
  cursor: -moz-grabbing;
}

.dragging{
  pointer-events:none;
}

.animation{
  transition:all 0.7s ease;
}

.drop{
  position:absolute;
  /* background:red; */
  width:26.9%;
  height:55%;
}

.drop:nth-of-type(1){
  left:43.2%;
  top:32.8%;
}

.drop:nth-of-type(2){
  left:70.9%;
  top:32.8%;
}

.highlight{
  box-sizing:border-box;
  border:dashed 2px gray;
}

.drop > img{
  display:inline-block;
  float:left;
  width:30%;
  margin:5%;
}