/*******************************************************************
********************************************************************
************************ vertical navbar ***************************
********************************************************************
*******************************************************************/

#navPosition{
    position: fixed;
    top: 50vh;
    right: 0;
    z-index: 1000;
}


#navPosition div{
    width: 200px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: -80px;
}

#navPosition a{
    margin-left: 0;
    padding-left: 10px;
}

#navPosition div:hover{
    margin-right:0;
    transition: 0.5s ease-in-out;
}

#navPosition i{
    font-size: 1.1em;
}

/*******************************************************************
********************************************************************
************************ bottom navbar ***************************
********************************************************************
*******************************************************************/
@media (max-width: 768px){

    #navPosition a{
        display: none;
    }

    #navbottom{
        position: fixed;
    }

    #navbottom a{
        width: 100%;
    }

    .btn-bottom1, .btn-bottom2, .btn-bottom3, .btn-bottom4, .btn-bottom5{
        border-radius: 0;
    }

}

@media (min-width: 769px){
    #navbottom{
        display: none;
    }
}

.btn-custom1, .btn-bottom1 {
    width: 110px;
    background-color: hsl(0, 0%, 22%) !important;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#999999", endColorstr="#383838");
    background-image: -khtml-gradient(linear, left top, left bottom, from(#999999), to(#383838));
    background-image: -moz-linear-gradient(top, #999999, #383838);
    background-image: -ms-linear-gradient(top, #999999, #383838);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #999999), color-stop(100%, #383838));
    background-image: -webkit-linear-gradient(top, #999999, #383838);
    background-image: -o-linear-gradient(top, #999999, #383838);
    background-image: linear-gradient(#999999, #383838);
    border-color: #383838 #383838 hsl(0, 0%, 12.5%);
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.62);
    -webkit-font-smoothing: antialiased;
}

.btn-custom1 i{
    font-size: 2em;
    padding-right: 0.8em;
    padding-left: 0;
}

.btn-custom2, .btn-bottom2 {
    width: 110px;
    background-color: hsl(222, 56%, 27%) !important;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c66c8", endColorstr="#1e356b");
    background-image: -khtml-gradient(linear, left top, left bottom, from(#3c66c8), to(#1e356b));
    background-image: -moz-linear-gradient(top, #3c66c8, #1e356b);
    background-image: -ms-linear-gradient(top, #3c66c8, #1e356b);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c66c8), color-stop(100%, #1e356b));
    background-image: -webkit-linear-gradient(top, #3c66c8, #1e356b);
    background-image: -o-linear-gradient(top, #3c66c8, #1e356b);
    background-image: linear-gradient(#3c66c8, #1e356b);
    border-color: #1e356b #1e356b hsl(222, 56%, 21%);
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.39);
    -webkit-font-smoothing: antialiased;
}

.btn-custom2 i{
    font-size: 2em;
    padding-right: 0.8em;
    padding-left: 0;
}

.btn-custom3, .btn-bottom3 {
    width: 110px;
    background-color: hsl(0, 90%, 43%) !important;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f65f5f", endColorstr="#d00a0a");
    background-image: -khtml-gradient(linear, left top, left bottom, from(#f65f5f), to(#d00a0a));
    background-image: -moz-linear-gradient(top, #f65f5f, #d00a0a);
    background-image: -ms-linear-gradient(top, #f65f5f, #d00a0a);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f65f5f), color-stop(100%, #d00a0a));
    background-image: -webkit-linear-gradient(top, #f65f5f, #d00a0a);
    background-image: -o-linear-gradient(top, #f65f5f, #d00a0a);
    background-image: linear-gradient(#f65f5f, #d00a0a);
    border-color: #d00a0a #d00a0a hsl(0, 90%, 37%);
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.39);
    -webkit-font-smoothing: antialiased;
}

.btn-custom3 i{
    font-size: 2em;
    padding-right: 0.8em;
    padding-left: 0;
}

.btn-custom4, .btn-bottom4 {
    width: 110px;
    background-color: hsl(195, 62%, 42%) !important;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#38aad0", endColorstr="#288cad");
    background-image: -khtml-gradient(linear, left top, left bottom, from(#38aad0), to(#288cad));
    background-image: -moz-linear-gradient(top, #38aad0, #288cad);
    background-image: -ms-linear-gradient(top, #38aad0, #288cad);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #38aad0), color-stop(100%, #288cad));
    background-image: -webkit-linear-gradient(top, #38aad0, #288cad);
    background-image: -o-linear-gradient(top, #38aad0, #288cad);
    background-image: linear-gradient(#38aad0, #288cad);
    border-color: #288cad #288cad hsl(195, 62%, 39.5%);
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.16);
    -webkit-font-smoothing: antialiased;
}

.btn-custom4 i{
    font-size: 2em;
    padding-right: 0.8em;
    padding-left: 0;
}

.btn-custom5, .btn-bottom5 {
    width: 110px;
    background-color: hsl(222, 56%, 27%) !important;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c66c8", endColorstr="#1e356b");
    background-image: -khtml-gradient(linear, left top, left bottom, from(#3c66c8), to(#1e356b));
    background-image: -moz-linear-gradient(top, #3c66c8, #1e356b);
    background-image: -ms-linear-gradient(top, #3c66c8, #1e356b);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c66c8), color-stop(100%, #1e356b));
    background-image: -webkit-linear-gradient(top, #3c66c8, #1e356b);
    background-image: -o-linear-gradient(top, #3c66c8, #1e356b);
    background-image: linear-gradient(#3c66c8, #1e356b);
    border-color: #1e356b #1e356b hsl(222, 56%, 21%);
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.39);
    -webkit-font-smoothing: antialiased;
}

.btn-custom5 i{
    font-size: 2em;
    padding-right: 1.3em;
    padding-left: 0;
}