#scroll {
    position: fixed;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: #3498db;
    text-indent: -9999px;
    display: none;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px
}

    #scroll span {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -8px;
        margin-top: -12px;
        height: 0;
        width: 0;
        border: 8px solid transparent;
        border-bottom-color: #ffffff;
    }

    #scroll:hover {
        background-color: #e74c3c;
        opacity: 1;
        filter: "alpha(opacity=100)";
        -ms-filter: "alpha(opacity=100)";
    }
.grad1 {
    background-color: #1fc8db;
    background-image: linear-gradient(140deg, #EADEDB 0%, #707cd8 50%, #d8ca13 75%);
    color: #fff;
    opacity: 0.95;
    padding:10px
}

.showOnMobile {
    display: none;
}
.hideOnMobile {
    display: block;
}
@media (max-width: 767px) {
    #hidden-sm {
        display: none;
    }

    .showOnMobile {
        display: block;
    }
    .hideOnMobile {
        display: none;
    }
}

.navbar-nav > li > a {
    color: #000000;
}
/*SIDEBAR MENU*/
#Menubtn {
    position: fixed;
    z-index: 999;
    top: 16px;
    left: 12px;
    cursor: pointer;
    -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

    #Menubtn div {
        width: 35px;
        height: 2px;
        margin-bottom: 8px;
        background-color: #fff;
        -webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
        transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
    }

    #Menubtn:hover > div {
        box-shadow: 0 0 1px #fff;
    }

    #Menubtn.active {
        left: 10px;
    }

        #Menubtn.active div {
            background-color: #ff8f0a;
        }

        #Menubtn.active:hover > div {
            box-shadow: 0 0 1px #343838;
        }

        #Menubtn.active #top {
            -webkit-transform: translateY(10px) rotate(-135deg);
            -ms-transform: translateY(10px) rotate(-135deg);
            transform: translateY(10px) rotate(-135deg);
        }

        #Menubtn.active #middle {
            -webkit-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
        }

        #Menubtn.active #bottom {
            -webkit-transform: translateY(-10px) rotate(-45deg);
            -ms-transform: translateY(-10px) rotate(-45deg);
            transform: translateY(-10px) rotate(-45deg);
        }
#PanSidebar {
    position: fixed;
    z-index: 990;
    overflow: auto;
    top: 0px;
    left: -275px;
    width: 275px;
    opacity: 0;
    padding: 1px;
    height: 100%;
    background-color: #5339bc;
    color: #fff;
    -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}

    #PanSidebar.active {
        left: 0px;
        opacity: 1;
    }

#items {
    display: grid;
}

    #items .item {
        cursor: pointer;
        color: #fff !important;
        text-decoration: none;
        font-size: 1em;
        font-weight: 300;
        padding: 6px 15px;
        -webkit-transition: all 250ms;
        transition: all 250ms;
    }

        #items .item i {
            margin-top: 2px;
            float: right;
            margin-right: 12px;
            font-size: 1.5rem;
            color: rgba(52, 56, 56, 0.8);
        }

        #items .item:hover {
            background-color: rgba(52, 56, 56, 0.5);
        }

            #items .item:hover i {
                color: #fff;
            }