.float-panel {
    width: 100%;
    transition: all 0.7s;
}

.fixed {
    border: none;
    animation: slide-down 0.7s;
}

.fixed .fa-gg {
    transform: rotate(360deg);
}

.fixed {
    width: 100% !important;
    float: left;
    background: #fcf4f1;
    box-shadow: 0px 6px 12px -4px rgba(0, 0, 0, 0.24);
    margin: 0 0 0 !important;
    padding: 2px 0 2px;
    left: 0;
    right: 0;
    z-index: 999999;
}

.scroll {
    width: 100%;
    float: left;
    margin: 0 0 0;
}

@keyframes slide-down {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

/* ---------------- For Animation on Scroll ---------------- */
.slideanim {
    visibility: hidden;
    visibility: visible\9;
    /*For old IE browsers IE6-8 */
}

.slideanim.slide {
    visibility: visible;
    animation: slide 1s;
}

.slideanim::after {
    /* useful when its child elements are float:left; */
    content: "";
    display: table;
    clear: both;
}

@keyframes slide {
    0% {
        transform: translateY(50%);
    }

    100% {
        transform: translateY(0);
    }
}

/*Smartphone css*/
@media screen and (max-width: 480px) {
    .float-panel {
        transform: none;
        transition: none;
    }

    .fixed {
        width: 100% !important;
        background: none;
        border-bottom: none;
        position: relative !important;
        box-shadow: none !important;
        animation: none !important;
        padding: 0 !important;
    }

    .scroll {
        width: 100%;
    }
}

@media screen and (min-width:481px) and (max-width:600px) {
    .float-panel {
        transform: none;
        transition: none;
    }

    .fixed {
        width: 100% !important;
        background: none;
        border-bottom: none;
        position: relative !important;
        box-shadow: none !important;
        animation: none !important;
        padding: 0 !important;
    }

    .scroll {
        width: 100%;
    }
}

@media screen and (min-width:601px) and (max-width:767px) {
    .float-panel {
        transform: none;
        transition: none;
    }

    .fixed {
        width: 100% !important;
        background: none;
        border-bottom: none;
        position: relative !important;
        box-shadow: none !important;
        animation: none !important;
        padding: 0 !important;
    }

    .scroll {
        width: 100%;
    }
}

@media screen and (min-width:768px) and (max-width:900px) {}

@media screen and (min-width:901px) and (max-width:1024px) {}

@media screen and (min-width:1025px) and (max-width:1240px) {}

@media screen and (min-width:1241px) and (max-width:1340px) {}