.navbar {
    display: block;
    position: fixed;

    top: 0;
    left: 0;

    height: 100vh;

    width: 100px;

    min-height: 100vh;

    overflow: hidden;

    padding-bottom: 100%;

    background-color: white;


    z-index: 100;

    color: #000000;
    fill: #DC0000;

    /*box-shadow: black 0 0 10px 0;*/
    /*-webkit-box-shadow: black 0 0 10px 0;*/
    /*-moz-box-shadow: black 0 0 10px 0;*/
    /*-o-box-shadow: black 0 0 10px 0;*/

    opacity: 0;

}

#navbar.animation {
    animation-fill-mode: forwards;
    animation-duration: 500ms; /* the duration of the animation */
    animation-timing-function: linear; /* how the animation will behave */
    animation-delay: 1500ms; /* how long to delay the animation from starting */
    animation-iteration-count: 1; /* how many times the animation will play */
    animation-name: fadein; /* the name of the animation we defined above */
}

#navbar-item-home {
    padding-top: 5vh;
}


.navbar-logo-container {
    display: inline-block;
    height: 100%;
    width: 10%;
    vertical-align: middle;
    text-align: center;
}

.navbar-logo {
    display: inline;
    height: 98px;
    width: auto;
    max-width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    vertical-align: middle;



    /*color: #a9abae;*/
    /*fill: #a9abae;*/

    /*fill: white;*/

    -webkit-filter: drop-shadow(-0px -0px 1px lightgray);
    filter: drop-shadow(-0px -0px 1px lightgray);
}



.navbar-item-left-padding {
    height: 100%;
    display: inline-block;
    /*width: calc(((100% * (4/9)) - 450px));*/
    /*width: calc(((100% * (4/9)) - 300px));*/
    width: 0;
    text-align: center;
    vertical-align: middle;
}

.navbar-items {
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.navbar-item {
    padding-top: 5px;
    display: block;
    /*height: 11.1%;*/
    height: 170px;
    width: 64px;
    padding-right: 18px;
    padding-left: 18px;
    padding-bottom: calc((95vh - 700px)/4);
    cursor: pointer;
    /*color: rgb(169,171,174)*/
    color: #2D2D2D;
    fill: #2D2D2D;
    text-align: center;
    overflow: hidden;
}



.navbar-logo-item-placeholder {
    display: inline-block;
    height: 200px;
    width: 72px;
    vertical-align: middle;
    /*cursor: pointer;*/
    /*color: rgb(169,171,174)*/
    /*color: #2D2D2D;*/
    /*fill: #2D2D2D;*/
    /*text-align: center;*/
}

.navbar-item-placeholder {
    display: inline-block;
    height: 100px;
    width: 72px;
    vertical-align: middle;
    /*cursor: pointer;*/
    /*color: rgb(169,171,174)*/
    /*color: #2D2D2D;*/
    /*fill: #2D2D2D;*/
    /*text-align: center;*/
}

.navbar-logo-hidden {
    display: none;
}

.navbar-item a {
    display: block;
    height: 72px;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.navbar-item:hover {
    /*border-top: darkseagreen 2px solid;*/

    /*font-weight: bold;*/
    color: #000000;
    fill: #DC0000;
    -webkit-filter: drop-shadow(-0px -0px 5px lightgray);
    filter: drop-shadow(-0px -0px 5px lightgray);
    background-color: #EEEEEE;

}

.navbar-item-selected {
    color: #000000 !important;
    fill: #DC0000 !important;
    -webkit-filter: drop-shadow(-0px -0px 5px grey);
    filter: drop-shadow(-0px -0px 5px grey);

}

.navbar-item-selected:hover {
    color: #000000;
    fill: #DC0000;
}

.navbar-item-img {
    display: inline-block;
    width: 64px;
    height: 64px;
    text-align: center;

    vertical-align: middle;

    color: #DC0000;
    fill: #DC0000;
}


.navbar-item-text {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    height: 100px;
    writing-mode: vertical-lr;

    transform: rotate(180deg);
    padding-top: 2px;
    font-family: OpenSans, Arial, tahoma, sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    /*font-weight: bold;*/
}



@media screen and (max-height: 763px){


    /*.navbar-item-text {*/
        /*display: none;*/
    /*}*/

    /*.navbar-item {*/
        /*width: 19%;*/
        /*min-width: 80px;*/
    /*}*/

    /*.navbar-logo-item-placeholder {*/
        /*width: 19%;*/
        /*min-width: 80px;*/
    /*}*/

    /*.navbar-item-placeholder {*/
        /*width: 19%;*/
        /*min-width: 80px;*/
    /*}*/

    /*.navbar-item-img {*/
        /*width: 60px;*/

    /*}*/

    .navbar-logo-container {
        /*width: 40%;*/
    }

    .navbar-item-text {
        display: none;
    }

    .navbar-item {
        height: 64px;
        padding-bottom: calc((95vh - 276px)/4);
    }


    .navbar-logo {
        /*height: 65px;*/
    }

}