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

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

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

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

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

#tab_5{
  background:url("../img/bg_3_5.png");
  background-size:cover;
   
  /* display:block; */
}

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

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

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

#tab_7 .btn_home{
  border-radius:0 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;
}

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

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

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

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

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

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

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

#tab_1 .guitar{
    left:50%;
}

#tab_2 .guitar{
    left:35%;
}

#tab_3 .guitar{
    left:70%;
}

#tab_4 .guitar{
    left:69%;
}

.window{
  position:absolute;
  width:15%;
  height:9%;
  background:red;
  background-size:100% !important;
  background-repeat:no-repeat !important;
  display:none;
}

#tab_2 .window[data-popup="1"]{
  background:url("../img/emisor.png");
  left:48%;
  top:30%;
}

#tab_3 .window[data-popup="1"]{
  background:url("../img/medio.png");
  left:32%;
  top:35%;
}

#tab_4 .window[data-popup="1"]{
  background:url("../img/emisor.png");
  left:80%;
  top:30%;
}

#tab_4 .window[data-popup="2"]{
  background:url("../img/medio.png");
  left:45%;
  top:30%;
}

#tab_4 .window[data-popup="3"]{
  background:url("../img/receptor.png");
  left:18%;
  top:70%;
}

.environment{
  position:absolute;
  width:50%;
  height:30%;
  background:url("../img/waves.png") no-repeat;
  background-size:100%;
  left:33%;
  top:46%;
  display:none;
}

.brain{
  position:absolute;
  width:13%;
  height:29%;
  background:url("../img/brain.png") no-repeat;
  background-size:100%;
  left:3%;
  top:29%;
}

.brain.highlight{
   -webkit-filter: drop-shadow(0px 0px 25px #F8E6A5) sepia(0.7);
}

.drags{
  position:absolute;
  width:32.7%;
  height:21.3%;
  left:1.8%;
}

.drags > .drag{
  z-index:10;
  display:inline-block;
  float:left;
  height:100%;
  width:33.33%;
  background-size:90% !important;
  background-repeat:no-repeat !important;
  background-position:50% 50% !important;
}

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

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

#tab_5 .drags:nth-of-type(1){
    top:30%;
}

#tab_5 .drags:nth-of-type(2){
    top:60.4%;
}

#tab_5 .drags:nth-of-type(1) > .drag:nth-of-type(1){
  background:url("../img/drag_1.png");
}

#tab_5 .drags:nth-of-type(1) > .drag:nth-of-type(2){
  background:url("../img/drag_2.png");
}

#tab_5 .drags:nth-of-type(1) > .drag:nth-of-type(3){
  background:url("../img/drag_3.png");
}

#tab_5 .drags:nth-of-type(2) > .drag:nth-of-type(1){
  background:url("../img/drag_4.png");
}

#tab_5 .drags:nth-of-type(2) > .drag:nth-of-type(2){
  background:url("../img/drag_5.png");
}

#tab_5 .drags:nth-of-type(2) > .drag:nth-of-type(3){
  background:url("../img/drag_6.png");
}

.drop{
  position:absolute;
  height:40%;
  width:20.5%;
  top:41.5%;
}

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

#tab_5 .drop:nth-of-type(4){
  left:56.1%;
}

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

.drag > .audio{
  position:absolute;
  bottom:10%;
  right:9%;
  width:22%;
  height:25%;
}
.audio{
   background:#7DA942;
  box-sizing:border-box;
  border-radius:5px;
}

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

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

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

.items{
  position:absolute;
  width:88%;
  height:48%;
  left:6%;
  top: 28%;
}

.item{
  display:inline-block;
  float:left;
  height:100%;
  width:32%;
  margin-right:2%;
  background-size:90% !important;
  background-position:50% 30% !important;
  background-repeat:no-repeat !important;
}

.item:last-of-type{
  margin-right:0;
}

.item:nth-of-type(1){
  background:url("../img/item_1.png");
}

.item:nth-of-type(2){
  background:url("../img/item_2.png");
}

.item:nth-of-type(3){
  background:url("../img/item_3.png");
}

.item > div{
  width:100%;
  height:18%;
  background-size:100% !important;
  background-repeat:no-repeat !important;
  position:relative;
  top:83%;
}

.item:nth-of-type(1) > div{
  background:url("../img/info_1.png");
}

.item:nth-of-type(2) > div{
  background:url("../img/info_2.png");
}

.item:nth-of-type(3) > div{
  background:url("../img/info_3.png");
}

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

.item > div:active{
  transform:scale(1);
}

#tab_7 .popup{
  background-image:url("../img/popup_2.png");
}

.risk{
  position:absolute;
  background-size:100% !important;
  background-repeat:no-repeat !important;
  bottom:2%;
  -webkit-transform-origin: 50% 100%; /* Chrome, Safari, Opera */
  transform-origin: 50% 100%;
  transition:all 0.5s ease;
}

.risk:nth-of-type(2){
  left:5%;
  width:12%;
  height:50%;
  background:url("../img/risk_1.png");
}

.risk:nth-of-type(3){
  width:9%;
  height:56%;
  left:45%;
  background:url("../img/risk_2.png");
}

.risk:nth-of-type(4){
  width:25%;
  height:56%;
  left:70%;
  background:url("../img/risk_3.png");
}

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

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

#tab_6 .window[data-popup="1"]{
  background:url("../img/dialog_1.png");
  left:20%;
  top:52%;
}

#tab_6 .window[data-popup="2"]{
  background:url("../img/dialog_2.png");
  left:50%;
  top:52%;
}

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

.animation{
  transition:all 0.5s ease;
}

.dragging{
  pointer-events:none;
}

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

.dropped{
  display:inline-block;
  float:left;
  width:40%;
  height:40%;
  background-size:100% !important;
  margin-left:8%;
  margin-top: 28%;
}

.dropped .audio{
  position:relative;
  width:35%;
  height:36%;
  left:55%;
  top:50%;
}

/* NEW */

.video{
  position:absolute;
  width: 58%;
  height: 60%;
  background:#35311E;
  z-index:1;
  left: 21%;
  top: 23%;
  border-radius:15px;
  box-shadow:black 0px 0px 14px;
}

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