@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');
}

.video {
    position: absolute;
}
.video video {
    width: 100%;
    height: 100%;
    display: none;
    border: none;
    background: black;
}
#tab_1 .video {
    left: 18.75%;
    top: 21%;
    width: 61.5%;
    height: 74%;
    border-radius: 15px;
    box-sizing: border-box;
    border: solid 14px #272E2B;
    background: #768473;
    /* Old browsers */
    
    background: -moz-linear-gradient(-45deg, #768473 0%, #768473 50%, #667663 50%, #667663 100%);
    /* FF3.6+ */
    
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #768473), color-stop(50%, #768473), color-stop(50%, #667663), color-stop(100%, #667663));
    /* Chrome,Safari4+ */
    
    background: -webkit-linear-gradient(-45deg, #768473 0%, #768473 50%, #667663 50%, #667663 100%);
    /* Chrome10+,Safari5.1+ */
    
    background: -o-linear-gradient(-45deg, #768473 0%, #768473 50%, #667663 50%, #667663 100%);
    /* Opera 11.10+ */
    
    background: -ms-linear-gradient(-45deg, #768473 0%, #768473 50%, #667663 50%, #667663 100%);
    /* IE10+ */
    
    background: linear-gradient(155deg, #768473 0%, #768473 50%, #667663 50%, #667663 100%);
    /* W3C */
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#768473', endColorstr='#667663', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}
.btn_play {
    position: absolute;
    width: 10%;
    left: 45%;
    top: 50%;
    transform: translateY(-50%);
}
.btn_play:hover {
    cursor: pointer;
    opacity: 0.9;
    transform: translateY(-50%) scale(1.1);
}
.btn_play:active {
    opacity: 1;
    transform: translateY(-50%) scale(0.95);
}

#custom_tab_nav{
    position:absolute;
    z-index:20;
    width:15%;
    height:8%;
    left:80%;
    top: 15.6%;
}

#custom_tab_nav > div{
    display:inline-block;
    float:left;
    height:100%;
    width:45%;
    margin-right:5%;
    background:#A7E91A;
    box-sizing:border-box;
    border-radius:10px;
    border:solid 6px #7ABF58;
}

#custom_tab_nav > div.active{
    background:green !important;
}

#custom_tab_nav > div > p{
    font-size:3em;
    font-family:'cabin-regular';
    text-align:center;
    margin:0;
    padding:0;
    position:relative;
    top:50%;
    transform:translateY(-50%);
    color:#FFFFFF;
      text-shadow:
       -1px -1px 2px #000,  
        1px -1px 2px #000,
        -1px 1px 2px #000,
         1px 1px 2px #000;
}

#custom_tab_nav > div:not(.active):hover{
    cursor:pointer;
    transform:scale(1.05);
}

#custom_tab_nav > div:not(.active):active{
    transform:scale(0.95);
}

.options_container{
    position:absolute;
    width:23%;
    height: 32%;
    background:red;
    box-sizing:border-box;
    border-radius:10px;

    border:solid 9px #7ABF58;
}

.options_container > div{
    display:inline-block;
    float:left;
    width:100%;
}

.option_img{
    height:80%;
    background:#F6F1D1;
}

.option_img > img{
    height:70%;
    position:relative;
    top:5%;
    left:50%;
    transform:translateX(-50%);
}

.option{
    height:20%;
    background:#FFFFFF;
}

.option > select{
    height:100%;
    width:70%;
    position:relative;
    left:15%;
    box-sizing:border-box;
    outline:none;
    font-family:'cabin-regular';
    font-size:1.5em;
}

.options_container:nth-of-type(1){
    left:10%;
    top:20%;
}

.options_container:nth-of-type(2){
    left:40%;
    top:20%;
}

.options_container:nth-of-type(3){
    left:70%;
    top:20%;
}

.options_container:nth-of-type(4){
    left:10%;
    top:60%;
}

.options_container:nth-of-type(5){
    left:40%;
    top:60%;
}

.options_container:nth-of-type(6){
    left:70%;
    top:60%;
}

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


.btn_close{
    width:5%;
    position:absolute;
}

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

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

#tab_2 .popup .btn_close{
    left:65%;
    top:6%;
}