/************ Responsive *************/

ul {
    margin: 0;
    padding: 0
}

ul li {
    list-style-type: none
}

@media (max-width:991px) {
    .circle-nav-wrapper {
        position: absolute;
        z-index: 9999999;
        right: 0;
        top: 50px;
        width: 225px;
        height: 225px;
        overflow: hidden
    }

    .circle-nav-wrapper .circle-nav-toggle {
        position: absolute;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%;
        z-index: 999999;
        width: 30px;
        height: 30px;
        border: 2px solid #191919;
        transition: -webkit-transform .2s cubic-bezier(0, 1.16, 1, 1);
        transition: transform .2s cubic-bezier(0, 1.16, 1, 1);
        transition: transform .2s cubic-bezier(0, 1.16, 1, 1), -webkit-transform .2s cubic-bezier(0, 1.16, 1, 1);
        background-color: #fff;
        right: 10px;
        top: 10px
    }

    .circle-nav-wrapper .circle-nav-toggle i.material-icons {
        color: #191919
    }

    .circle-nav-wrapper .circle-nav-toggle:focus,
    .circle-nav-wrapper .circle-nav-toggle:hover {
        opacity: .8;
        cursor: pointer
    }

    .circle-nav-wrapper .circle-nav-toggle.circle-nav-open {
        border: 2px solid #fff;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        background-color: transparent
    }

    .circle-nav-wrapper .circle-nav-toggle.circle-nav-open i.material-icons {
        color: #fff
    }

    .circle-nav-wrapper .circle-nav-panel {
        background: linear-gradient(to right, #0046c0, #5291ca);
        width: 0;
        height: 0;
        border-radius: 50%;
        -webkit-transform: translate(-50%, -52.5%);
        transform: translate(-50%, -52.5%);
        transition: width .2s cubic-bezier(0, 1.16, 1, 1), height .2s cubic-bezier(0, 1.16, 1, 1);
        margin-left: 237px
    }

    .circle-nav-wrapper .circle-nav-panel.circle-nav-open {
        width: 450px;
        height: 450px;
        opacity: .9;
        box-shadow: -5px 6px 0 6px rgb(0 0 0 / 33%);
    }

    .circle-nav-wrapper .circle-nav-menu {
        width: 225px;
        height: 225px
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item {
        position: absolute;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #fff;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        visibility: hidden;
        -webkit-transform: rotate(-115deg);
        transform: rotate(-115deg);
        transition: bottom .5s cubic-bezier(0, 1.16, 1, 1), left .5s cubic-bezier(0, 1.16, 1, 1), width .5s cubic-bezier(0, 1.16, 1, 1), height .5s cubic-bezier(0, 1.16, 1, 1), -webkit-transform 1s cubic-bezier(0, 1.16, 1, 1);
        transition: bottom .5s cubic-bezier(0, 1.16, 1, 1), left .5s cubic-bezier(0, 1.16, 1, 1), width .5s cubic-bezier(0, 1.16, 1, 1), height .5s cubic-bezier(0, 1.16, 1, 1), transform 1s cubic-bezier(0, 1.16, 1, 1);
        transition: bottom .5s cubic-bezier(0, 1.16, 1, 1), left .5s cubic-bezier(0, 1.16, 1, 1), width .5s cubic-bezier(0, 1.16, 1, 1), height .5s cubic-bezier(0, 1.16, 1, 1), transform 1s cubic-bezier(0, 1.16, 1, 1), -webkit-transform 1s cubic-bezier(0, 1.16, 1, 1)
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-1,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-2,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-3,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-4,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-5 {
        left: 225px;
        bottom: 225px
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-1 a,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-2 a,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-3 a,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-4 a,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-5 a {
        text-decoration: none
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item i {
        color: #ff5f6d;
        font-size: .1em;
        transition: all 1s cubic-bezier(0, 1.16, 1, 1)
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item i {
        display: block !important;  
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item span {
        display: none
    }

    .circle-nav-wrapper .circle-nav-menu.circle-nav-open .circle-nav-item {
        width: 40px;
        height: 40px;
        visibility: visible;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        transition: bottom .3s cubic-bezier(0, 1.16, 1, 1), left .3s cubic-bezier(0, 1.16, 1, 1), width .5s cubic-bezier(0, 1.16, 1, 1), height .5s cubic-bezier(0, 1.16, 1, 1), -webkit-transform .8s cubic-bezier(0, 1.16, 1, 1);
        transition: bottom .3s cubic-bezier(0, 1.16, 1, 1), left .3s cubic-bezier(0, 1.16, 1, 1), width .5s cubic-bezier(0, 1.16, 1, 1), height .5s cubic-bezier(0, 1.16, 1, 1), transform .8s cubic-bezier(0, 1.16, 1, 1);
        transition: bottom .3s cubic-bezier(0, 1.16, 1, 1), left .3s cubic-bezier(0, 1.16, 1, 1), width .5s cubic-bezier(0, 1.16, 1, 1), height .5s cubic-bezier(0, 1.16, 1, 1), transform .8s cubic-bezier(0, 1.16, 1, 1), -webkit-transform .8s cubic-bezier(0, 1.16, 1, 1)
    }

    .circle-nav-wrapper .circle-nav-menu.circle-nav-open .circle-nav-item:focus,
    .circle-nav-wrapper .circle-nav-menu.circle-nav-open .circle-nav-item:hover {
        cursor: pointer;
        opacity: .8
    }

    .circle-nav-wrapper .circle-nav-menu.circle-nav-open .circle-nav-item i {
        font-size: 1.3em;
        transition: all 1s cubic-bezier(0, 1.16, 1, 1)
    }

    .circle-nav-wrapper .circle-nav-menu.circle-nav-open .circle-nav-item.circle-nav-item-1 {
        bottom: 80%;
        left: 12%;
        transition-delay: .1s
    }

    .circle-nav-wrapper .circle-nav-menu.circle-nav-open .circle-nav-item.circle-nav-item-2 {
        bottom: 57%;
        left: 20%;
        transition-delay: .2s
    }

    .circle-nav-wrapper .circle-nav-menu.circle-nav-open .circle-nav-item.circle-nav-item-3 {
        bottom: 36%;
        left: 34%;
        transition-delay: .3s
    }

    .circle-nav-wrapper .circle-nav-menu.circle-nav-open .circle-nav-item.circle-nav-item-4 {
        bottom: 21.5%;
        left: 52.8%;
        transition-delay: .4s
    }

    .circle-nav-wrapper .circle-nav-menu.circle-nav-open .circle-nav-item.circle-nav-item-5 {
        bottom: 12%;
        left: 74.8%;
        transition-delay: .5s
    }
}

@media (min-width:992px) {
    .circle-nav-wrapper {
        position: relative;
        width: auto;
        height: 50px;
        line-height: 50px;
        overflow: auto;
        background: linear-gradient(to right, #ff5f6d, #ffc371);
        margin-top: 40px
    }

    .circle-nav-wrapper .circle-nav-toggle {
        display: none
    }

    .circle-nav-wrapper .circle-nav-panel {
        width: auto;
        max-width: auto;
        height: auto;
        box-shadow: none
    }

    .circle-nav-wrapper .circle-nav-menu {
        width: 1200px;
        max-width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item {
        position: relative;
        visibility: visible
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-1,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-2,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-3,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-4,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-5 {
        left: auto;
        bottom: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-1 a,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-2 a,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-3 a,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-4 a,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-5 a {
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        font-family: "Open Sans", sans-serif;
        transition: color .2s ease-out
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-1 a:focus,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-1 a:hover,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-2 a:focus,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-2 a:hover,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-3 a:focus,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-3 a:hover,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-4 a:focus,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-4 a:hover,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-5 a:focus,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-5 a:hover {
        cursor: pointer;
        color: #000
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-1 i,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-2 i,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-3 i,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-4 i,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-5 i {
        font-size: 1em;
        margin-right: 8px
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-1 i,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-2 i,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-3 i,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-4 i,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-5 i {
        display: none
    }

    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-1 span,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-2 span,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-3 span,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-4 span,
    .circle-nav-wrapper .circle-nav-menu .circle-nav-item-5 span {
        display: inline;
        font-size: .8em
    }
}