@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;
    overflow:hidden;
}

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

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

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

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

.btn_help{
  right:140%;
  border-radius:10px 10px 0 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;
}

.popup{
  position:absolute;
  z-index:4;
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, 0.5);
  border-radius:15px;
  /* display:none; */
  background-size:70%;
  background-position:50% 50%;
  background-repeat:no-repeat;
  display:none;
}

#tab_1 .popup:nth-of-type(1){
    background-image:url("../img/popup_1.png");
    display:block;
}

#tab_1 .popup:nth-of-type(2){
    background-image:url("../img/popup_2.png");
}

#tab_1 .popup:nth-of-type(3){
    background-image:url("../img/popup_3.png");
}

#tab_1 .popup:nth-of-type(4){
    background-image:url("../img/popup_4.png");
}

#tab_1 .popup:nth-of-type(5){
    background-image:url("../img/popup_5.png");
}

#tab_1 .popup:nth-of-type(1) .btn_close{
  top:30%;
}

.btn_close{
  position:absolute;
}

.btn_close:hover{
  cursor:pointer;
  transform:scale(1.1);
}

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

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

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

.guitar{
  position:absolute;
  width:25%;
  height:70%;
  background:url("../img/guitar.png") no-repeat;
  background-size:100%;
  top:20%;
}

.audio{
   background:#7DA942;
   box-sizing:border-box;
   border-radius:10px;
   position:absolute;
   width:5%;
   height:10%;
   left: 79%;
   top: 77%;
   border-bottom:solid 8px #5B8B2F;
   border-right:solid 6px #5B8B2F;
}

.audio:hover{
  cursor:pointer;
  transform:scale(1.2);
}

.audio:active{
  transform:scale(1);
}

.audio i{
  color:white;
  font-size:3em;
  position:relative;
  top: 50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}


.item{
  position:absolute;
  width:25%;
}


#video{
    position:absolute;
    top:18%;
    left:20%;
    width:60%;
    height:65%;
    background:black;
}

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

.item:nth-of-type(1){
  left:5%;
  top: 4%;
}

.item:nth-of-type(2){
  left: 66%;
  top: 4%;
  width: 16%;
}

.item:nth-of-type(3){
  left: 2%;
  top: 54%;
  width:25%;
}

.item:nth-of-type(4){
  left: 61%;
  top: 56%;
  width:35%;
}

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

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