@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_4_2.png');
    display:block;
}

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

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

#tab_4{
    background-image:url('../img/bg_4_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_next{
    border-radius:10px 0 0 0;
    right: 69px;
}

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

.popup{
    position:absolute;
    z-index:40;
    width:100%;
    height:100%;
    background-image:url('../img/bg_4_1.png');
    background-size:cover;
    border-radius:15px;
   
    /* 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;
}

.character{
    width:30%;
    position:relative;
    left:35%;
}

.item{
    position:absolute;
    width:30%;
    transition:all 1.2s ease;
}

#item_1{
    left:38.9%;
    top: 12%;
    z-index:1;
    width:32.2%;
}


#item_2{
    left:40%;
    top: 25%;
    z-index:2;
}

#item_3{
    left:40%;
    top: 26%;
}

.numbers_container{
    position:absolute;
    width:40%;
    height: 24%;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    left: 35%;
    top: 65%;
}

.numbers_container .column{
    /* background:red; */
    width: 13%;
    height:100%;
}

.numbers_container .column > div{
    display:inline-block;
    float:left;
    width:100%;
    height:33.5%;
}

.numbers_container .column > div:nth-of-type(2){
    background:#FEA70F;
    border-radius:5px;
    box-sizing:border-box;
    border-bottom: solid 6px #BB7908;

}

.numbers_container .column p, .numbers_container .column i{
    color:#FFFFFF;
    text-align:center;
    position:relative;
    left:50%;
    top:50%;
    font-size:1.7em;
    transform:translate3d(-50%, -50%, 0);
}

.numbers_container .column i{
    color:#EB7F26;
    font-size:3em;
}

.numbers_container .column i:hover{
    cursor:pointer;
    color:orange;
    font-size:3.2em;
}

.numbers_container .column i:active{
    font-size:3em;
}

.tab_nav{
    left:auto;
    right:2%;
}

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

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

.options_container{
    position:Absolute;
    width:40%;
    height:6%;
    left: 35%;
    top:40%;
    z-index:20;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    display:none;
}

.options_container > div{
    /* display:inline-block; */
    /* float:left; */
    width:18%;
    /* background:red; */
    height:100%;
}

.options_container > div:nth-of-type(odd){
    background:#FEA70F;
    border-radius:6px;
    box-sizing:border-box;
    border-bottom:solid 4px #BB7908;
}

.options_container p{
    text-align:center;
    font-size:1.5em;
    color:#FFFFFF;
}

.options_container p, .options_container i{
    position:relative;
    top:50%;
    left:50%;
    transform:translate3d(-50%, -50%, 0);
}

.options_container i{
    color:#EB7F26;
    font-size:2em;
}

.options_container input{
    width:100%;
    height:100%;
    border:none;
    outline:none;
    text-align:center;
    font-size:1.5em;
    background:transparent;
}

#question{
    position:absolute;
    width:80%;
    left:10%;
    height:70%;
    top: 15%;
    background-color:#EB7F26;
    background-image:url('../img/character.png');
    background-repeat:no-repeat;
    background-size:20% auto;
    background-position:90% 50%;
    box-sizing:border-box;
    padding:15px 25px;
    border-radius:10px;
    border-bottom:solid 8px #89380F;
}

#question h3{
    text-align:center;
    font-size:1.5em;
}

.questions_container{
    width: 16%;
    height:85%;
    /* background:blue; */
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.questions_container > div{
    padding: 5px;
    height: 17%;
    /* background:whitesmoke; */
}

.questions_container > div > *{
    display:inline-block;
    float:left;
    margin-right:8px;
}

.questions_container p{
    font-size:1.5em;
    color:#FFFFFF;
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

.check{
    height: 94%;
    width: 39%;
    background: #FFFFFF;
    box-sizing:border-box;
    border-radius:10px;
    border:solid 2px #E19F2E;
}

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

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

.check i{
    font-size:1.5em;
    position:relative;
    top:50%;
    left:50%;
    transform:translate3d(-50%, -50%, 0);
}

.questions_container i.fa-check{
    color:green;
}

.questions_container i.fa-times{
    color:red;
}

.info{
    position:absolute;
    width: 65%;
    left: 17.5%;
    top:2%;
    box-sizing:border-box;
    padding:14px;
    border-radius:10px;
    background:#FFFFFF;
    border:solid 2px #D67C33;
    display:none;
}

.info h3{
   text-align:center; 
}