/* Tabnav */
.footer {
height: 130px;
width: 100%;
position: fixed;
bottom: -1px;
z-index: 999999;
}
.footer:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,1) 100%);
}
.fixedtabnav {
bottom: 15px;
position: fixed;
width: calc(100% - 30px);
height: 50px;
background: #fff;
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
z-index: 999999;
}
.fixedtabnav .nav-container {
position: relative;
float: left;
width: 100%;
display: flex;
}
.fixedtabnav .nav-container .navbutton {
position: relative;
float: left;
width: 25%;
min-height: 50px;
max-height: 50px;
padding: 10px 20px;
}
.fixedtabnav .nav-container .navbutton img, svg {
height: 25px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.fixedtabnav .nav-container .navbutton.profile {
top: -37px;
background: #fff;
border-radius: 50px;
min-height: 75px;
max-height: 75px;
min-width: 75px;
max-width: 75px;
border: 5px solid #000;
padding: 0;
overflow: hidden;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.fixedtabnav .nav-container .navbutton.profile img {
height: 100%;
width: auto; 
}
.fixedtabnav .nav-container .navbutton .button_container {
position: relative;
top: 0;
left: 0;
height: auto;
width: 100%;
}
.fixedtabnav .nav-container .navbutton .button_container #toggle {
width: 30px;
height: 16px;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
}
.fixedtabnav .nav-container .navbutton .button_container #toggle span {
background: #000;
}
.fixedtabnav .nav-container .navbutton .icon {
min-height: 50px;
max-height: 50px;
top: -10px;
position: relative;
}
.fixedtabnav .nav-container .navbutton.show .icon {
-webkit-box-shadow: inset 0px 3px #4cc2f1;
-moz-box-shadow:inset 0px 3px #4cc2f1;
 box-shadow: inset 0px 3px #4cc2f1;
}