@font-face{
    font-family: 'cabin-regular'; /*a name to be used later*/
    src: url('../fonts/Cabin-Regular.ttf'); /*URL to font*/
}

@font-face{
    font-family: 'cabin-italic'; /*a name to be used later*/
    src: url('../fonts/Cabin-Italic.ttf'); /*URL to font*/
}

@font-face{
    font-family: 'cabin-bold-italic'; /*a name to be used later*/
    src: url('../fonts/Cabin-BoldItalic.ttf'); /*URL to font*/
}

@font-face{
    font-family: 'big-noodle'; /*a name to be used later*/
    src: url('../fonts/big_noodle_titling.ttf'); /*URL to font*/
}

*{
    margin:0;
    padding:0;
}

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

#tab_1{
    background-image:url('../img/bg_3_1.png');
    display:block;
}

#tab_2{
    background-image:url('../img/bg_3_2.png');
}

#tab_3{
    background-image:url('../img/bg_3_3.png');
}

#tab_4{
    background-image:url('../img/bg_3_4.png');
}


.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: #EB7F26;
    color:#FFF;
    font-size:3em;
    text-align:center;
    border-bottom:solid 6px #89380F;
    bottom:0;
    position:absolute;
}

.custom_btn:hover{
    cursor:pointer;
    background:#EA9D63;
}

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

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

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

.btn_home:last-of-type{
    border-radius:0 10px 0 0;
}

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

.btn_next:first-of-type{
    border-radius:10px 10px 0 0;
}

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


.btn_close{
    width:8%;
    position:absolute;
    top:-10px;
    right:-10px;
}

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

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

.popup > div{
    position:absolute;
    width:40%;
    padding:25px;
    background:#EB7F26;
    position:relative;
    left:50%;
    top:50%;
    transform:translate3d(-50%, -50%, 0);
    border-radius:10px;
    border-bottom:solid 6px #89380F;
}

.popup h3{
    text-align:center;
    font-size:2em;
    margin-bottom:10px;
}

.popup p{
    color:#FFFFFF;
    text-align:justify;
    font-size:1.1em;
}

.drags{
    position:absolute;
    max-width: 240px;
    background:#FFFFFF;
    border-radius:10px;
    left:10px;
    top: 97px;
    border:solid 3px #D67C33;
    display:none;
}

#tab_3 .drags{
    top:26%;
}

#tab_1 .drag{
    padding:0;
}

.drag{
    display:inline-block;
    float:left;
    width: 100px;
    left:0px;
    top:0px;
    z-index:40;
    padding:10px;
}

.number_input{
    position:absolute;
    top: 62%;
    left:10px;
    width:18%;
    background:#FEA70F;
    padding:10px;
    border-radius:10px;
    box-sizing:border-box;
    border-bottom:solid 5px #BB7908;
}

.number_input > div{
    position:relative;
    width:30%;
    left:35%;
    height:60px;
    background:green;
    border-radius:10px;
    overflow:hidden;
    box-sizing:border-box;
    border:solid 4px #D67C33;
}

.number_input input{
    border:none;
    outline:none;
    width:100%;
    height:100%;
    text-align:center;
    font-size:2em;
}

.number_input p{
    text-align:center;
    color:#FFFFFF;
}

.play{
    position:absolute;
    width:10%;
    border-radius:10px;
    background:#EBA700;
    bottom: 11%;
    left: 5%;
}

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

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

.play p{
    padding:10px 0;
    text-align:center;
}

.drop_canvas{
    position:absolute;
    width:100%;
    height:100%;
    pointer-events:none;
    display:none;
}

.drop_canvas *{
    pointer-events:all;
}

#drop_1, #drop_2{
    position:absolute;
    width:7%;
    left: 28.5%;
}

.drop{
    position:absolute;
}

#drop_1{
    top: 21%;
}

#drop_2{
    top: 63.5%;
}

#drop_3, #drop_4{
    width:9%;
    left:35%;
}

#drop_3{    
    top:11.5%;
}

#drop_4{
    top: 54%;
}

#drop_5, #drop_6, #drop_7, #drop_8{
    width: 5%;
    left:44%;
}

#drop_5{
    top: 8.4%;
}

#drop_6{
    top: 25%;
}

#drop_7{
    top: 51%;
}

#drop_8{
    top: 68%;
}

#drop_9{
    width:12%;
    top: 42%;
    left: 35%;
}

#drop_10{
    width:20%;
    top: 24.5%;
    left: 42.5%;
}

#drop_11{
    width:8%;
    top: 8%;
    left: 60%;
}

.record{
    position:absolute;
}

.record > *{
    display:inline-block;
    float:left;
    font-size:2em;
}

.record i{
    color:orange;
    margin-right:6px;
}

.record p{
    color:#FFFFFF;
}

#record_1{
    left:36%;
    top:26%;
}

#record_2{
    left:36%;
    top:68%;
}

#record_3{
    left:44.5%;
    top:15%;
}

#record_4{
    left:44.5%;
    top:32%;
}

#record_5{
    left:44.5%;
    top:58%;
}

#record_6{
    left:44.5%;
    top:74%;
}

#record_7{
    left:49.5%;
    top:10%;
}

#record_8{
    left:49.5%;
    top: 18%;
}

#record_9{
    left:49.5%;
    top: 26%;
}

#record_10{
    left:49.5%;
    top: 35%;
}

#record_11{
    left:49.5%;
    top: 52%;
}

#record_12{
    left:49.5%;
    top: 61%;
}

#record_13{
    left:49.5%;
    top: 69%;
}

#record_14{
    left:49.5%;
    top: 79%;
}

#record_15{
    left:62%;
    top: 28%;
}

#record_16{
    left:62%;
    top: 45%;
}

#record_17{
    left:62%;
    top: 62%;
}

#record_18{
    left:62%;
    top: 78%;
}

#record_19{
    left:67.9%;
    top: 7%;
}

#record_20{
    left:67.9%;
    top: 12%;
}

#record_21{
    left:67.9%;
    top: 17.5%;
}

#record_22{
    left:67.9%;
    top: 22.5%;
}

#record_23{
    left:67.9%;
    top: 29.5%;
}

#record_24{
    left:67.9%;
    top: 34.5%;
}

#record_25{
    left:67.9%;
    top: 39.5%;
}

#record_26{
    left:67.9%;
    top: 44.5%;
}

#record_27{
    left:67.9%;
    top: 51.5%;
}

#record_28{
  left:67.9%;
    top: 56.5%;  
}

#record_29{
  left:67.9%;
    top: 61.5%;  
}

#record_30{
    left:67.9%;
    top: 66.5%; 
}

#record_31{
   left:67.9%;
    top: 71.5%;
}

#record_32{
   left:67.9%;
    top: 76.5%; 
}

#record_33{
   left:67.9%;
    top: 82.5%; 
}

#record_34{
  left:67.9%;
  top: 87.5%;
}

.message_window{
    position:absolute;
    width:30%;
    padding:15px;
    border-radius:10px;
    background: #EB7F26;
    border-bottom: solid 5px #89380F;
    left:60%;
    top:50%;
    z-index:100;
    display:none;
}

.message_window h3{
    color:#FFFFFF;
    text-align:center;
    font-size:1.4em;
}

.next_tab{
    width:40%;
    margin-top:10px;
    position:relative;
    left:30%;
}

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

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

.caption{
    position:absolute;
    padding:2px;
    border-radius:10px;
    background:#FEA70F;
    border-bottom:solid 4px #BB7908;
    color:#FFFFFF;
}

.caption b{
    color:#000000;
}

#caption_1{
    padding:10px;
    left: 29%;
    top: 12%;
}

#caption_2{
    padding:10px;
    left: 29%;
    top: 55%;
}

#caption_3{
    padding:10px;
    left: 53%;
    top: 29%;
}

#caption_4{
   padding:10px;
    left: 53%;
    top: 45%;
}

#caption_5{
    padding:10px;
    left: 53%;
    top: 61%;
}

#caption_6{
    padding:10px;
    left: 52%;
    top: 78%;
}

.drop_spot{
    position:absolute;
    z-index:30;
}


#drop_spot_1, #drop_spot_2{
    border-radius:100%;
}

#tab_1 .drop_spot{
    height:13%;
    width:6%;
}

#drop_spot_1{    
    left:29%;
    top:22%;;
}

#drop_spot_2{
    left:29%;
    top:64%;
}

#tab_3 .drop_spot{
   /* width: 0; */
   /* height: 0; */
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 80px solid transparent;
   left: 54.8%;
}

#tab_3 .drop_spot:hover{
    
}

#drop_spot_3{    
    top:25%;    
}

#drop_spot_4{
    top:41%;    
}

#drop_spot_5{
    top:57.7%;  
}

#drop_spot_6{
    top:73%;    
}

#drop_canvas_1, #drop_canvas_4{
    display:block;
}

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

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

/* Drag CSS */

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

.dragging{
    pointer-events:none;
}

.animation{
    transition:all 0.7s ease;
}

#tab_1 .highlight{
    background:whitesmoke;
    box-sizing:border-box;
    border:dashed 2px gray;
}

#tab_3 .highlight{
    border-bottom:80px solid rgba(255, 0, 0, 0.2);
    cursor:pointer;
}


#tab_1 .drop_spot img{
    width: 158%;
    position:absolute;
    left:-30%;
    top:-5%;
}

#tab_3 .drop_spot img{
    width:20%;
    position:absolute;
    z-index:10;
}

@-webkit-keyframes highlight {
    0% {
        -webkit-filter: drop-shadow(0px 0px 0px white);
    } 
    50% {
        -webkit-filter: drop-shadow(1px 1px 40px white);
    }
    100%{
        -webkit-filter: drop-shadow(0px 0px 0px white);
    }
}

@-moz-keyframes highlight {
    0% {
        -webkit-filter: drop-shadow(0px 0px 0px white);
    } 
    50% {
        -webkit-filter: drop-shadow(1px 1px 40px white);
    }
    100%{
        -webkit-filter: drop-shadow(0px 0px 0px white);
    }
}

@-ms-keyframes highlight {
    0% {
        -webkit-filter: drop-shadow(0px 0px 0px white);
    } 
    50% {
        -webkit-filter: drop-shadow(1px 1px 40px white);
    }
    100%{
        -webkit-filter: drop-shadow(0px 0px 0px white);
    }
}

@-o-keyframes highlight {
    0% {
        -webkit-filter: drop-shadow(0px 0px 0px white);
    } 
    50% {
        -webkit-filter: drop-shadow(1px 1px 40px white);
    }
    100%{
        -webkit-filter: drop-shadow(0px 0px 0px white);
    }
}

@keyframes highlight {
    0% {
        -webkit-filter: drop-shadow(0px 0px 0px white);
    } 
    50% {
        -webkit-filter: drop-shadow(1px 1px 40px white);
    }
    100%{
        -webkit-filter: drop-shadow(0px 0px 0px white);
    }
}

.highlighting{
    -webkit-animation: highlight 2s;
    -moz-animation: highlight 2s;
    -ms-animation: highlight 2s;
    -o-animation: highlight 2s;
    animation: highlight 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    -ms-animation-fill-mode: forwards; 
    -o-animation-fill-mode: forwards; 
}

#tab_3 .dropped{
    width: 7.6%;
    height:13.6%;
    border:none;
}

#tab_3 .dropped img{
    width:86%;
    position:relative;
    left:10%;
    top:10%;
}