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

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

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

#tab_3{
  background:url("../img/bg_8.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%;
    height:100%;
    background: #64b238;
    color:#FFF;
    font-size:3em;
    text-align:center;
    border-bottom:solid 6px #006633;
    bottom:0;
    position:absolute;
    border-radius:10px 10px 0 0 !important;
}

#tab_1 .btn_next{
  left:25%;
}

#tab_2 .tab_nav{
  width:90%;
  left:5%;
}

#tab_2 .custom_btn{
  width:5.5%;
}

#tab_3 .tab_nav{
  left:8%;
}


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

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

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

.header h3{
    font-family:'cabin-regular';
    font-size:2em;
    color:#3F372D;
    margin:0;
    position:relative;
    top:50%;
    transform:translateY(-50%);
    padding:0 4%;
    text-align:justify;
}

#nav_bar{
    position:absolute;
    width:14%;
    height:13%;
    right:3%;
    top:5%;
}

#nav_bar > div{
    width:45%;
    margin-right:5%;
    height:100%;
    display:inline-block;
    float:left;
    background-image:url("../img/nav_3.png");
    background-size:100% 100%;
}

#nav_bar div:hover, .btn_close:hover, .btn_help:hover{
    cursor:pointer;
    opacity:0.85;
    transform:scale(1.1);
}

#nav_bar > div:active, .btn_close:active, .btn_help:active{
  opacity:1;
  transform:scale(1);  
}

#nav_bar > div > p{
    color:white;
    font-family:'cabin-bold';
    font-size:4.2em;
    margin:0;
    text-align:center;
    position:relative;
    top:50%;
    transform:translateY(-50%);
}