/* ---------------- For sticky header: class="float-panel"  ------------------*/
.float-panel {
    width:100%;
        background-image:-webkit-linear-gradient(30deg, #fff 30%, #001633 30%);z-index:300;padding:30px 0;transform: translateZ(0);
    transition:all 0.5s; /* Effect for switching from .fixed to static */
    height: 100px;
}
.float-panel .content-area {margin:10px auto;}
.float-panel a{font-size:16px;text-decoration:none;color:#fff;display:inline-block;padding:10px 20px;text-transform: capitalize;}
.logo {color: #444; font-family: 'Poiret One', cursive;display:inline-block;padding:0px 20px;font-size:30px;}
.float-panel .fa-gg {color:#F0595C;font-size:30px;vertical-align:middle;transition:all 1s;}
/* when class="float-panel fixed" */
.fixed {box-shadow:0 2px 6px rgba(0,0,0,0.2);padding:15px 0;animation:slide-down 0.7s;opacity:0.9;height: 75px; background-color: #fff}
.fixed .fa-gg {transform: rotate(360deg); }
@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    } 
    100% {
        opacity: 0.9;
        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% {
        opacity: 0;
        transform: translateY(50%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0);
    } 
}


/*-------- Generic styles for the page ------------------*/


.float-panel ul li a:hover{
    color: #fff;
}

.float-panel ul{
    float: right;
    padding-right: 20px;
    display: flex;
}


.float-panel ul li{
    list-style: none;
    border: 1px solid #ff000000;
}

.float-panel ul li:hover, .float-panel ul li:active{
    border: 1px solid #fff;
    transition: 0.5s;
}

.active-page {
    border: 1px solid #fff !important;
}

.float-panel ul li a{
    text-decoration: none;
}
.menu-toggle{
    float: right;
    line-height: 25px;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    display: none;

}
@media screen and (max-width: 864px){
    .float-panel{
        padding: 30px 10px 55px 10px;
        box-shadow: none;
    }

    .menu-toggle{
        display: block;
        padding: 10px;
    }

    .menu-bar{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 100px;
        left: -100%;
        transition: 0.4s; 

    }
    .menu-bar.active{
        left: 0;
    }

    .menu-bar ul{
        display: block;
        width: 100%;
        padding: 0px;
        text-align:right;
        background-color: #001633;
    }

    .menu-bar ul li{
        color: #fff;
        border-bottom: 1px solid #fff;
        border-top: 1px solid #fff;
    }
    .float-panel ul li:hover, .float-panel ul li:active{
        border-left: none;
    }

    .menu-bar ul li a{
        color: #fff;
    }

    .float-panel{
    background-image:-webkit-linear-gradient(30deg, #fff 50%, #001633 50%);
    }
    .fixed{
        height: 100px;
    }
}