.navbar-default.affix .Fancy_button {
    padding: 0px 10px !important;
    height: 35px;
    border: 1px solid #333;
    border-radius: 5px;
    color: #333;
}
.navbar-default.affix .Fancy_button:hover {
   border: 1px solid #ed1a3b;
}
.navbar-default.affix .LoginIcon {
    height: 35px;
}
.LoginIcon {
    background: #ed1a3b url(/images/login.png) no-repeat;
    background-position: 48% center;
    background-size: 15px;
    width: 100%;
    height: 40px;
}
/* Common button styles */
.Fancy_button {
    float: left;
    width: 100px;
    display: block;
    margin: 0px;
    padding: 8px 10px !important;
    height: 40px;
    background: none;
    color: inherit;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    border: 1px solid #fff;
    border-radius: 5px;
    color: #fff;
}

    .Fancy_button:hover {
        border: 1px solid #ed1a3b;
    }

    .Fancy_button:focus {
        outline: none;
    }

    .Fancy_button > span {
        vertical-align: middle;
    }



/* Individual button styles */
/* Naira */
.button--naira {
    padding: 0;
    overflow: hidden;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

    .button--naira::before {
        content: '';
        position: absolute;
        left: -50%;
        width: 200%;
        height: 200%;
        background: #37474f;
        top: -50%;
        z-index: -1;
        -webkit-transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -10deg);
        transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -10deg);
    }

    .button--naira.button--inverted::before {
        background: #7986cb;
    }

.button--naira-up::before {
    -webkit-transform: translate3d(0, 100%, 0) rotate3d(0, 0, 1, 10deg);
    transform: translate3d(0, 100%, 0) rotate3d(0, 0, 1, 10deg);
}

.button--naira > span {
    display: block;
}

.button--naira .button__icon {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    color: #fff;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.button--naira-up .button__icon {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.button--naira > span,
.button--naira .button__icon {
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.button--naira:hover::before {
    -webkit-animation: anim-naira-1 0.3s forwards ease-in;
    animation: anim-naira-1 0.3s forwards ease-in;
}

.button--naira-up:hover::before {
    -webkit-animation: anim-naira-2 0.3s forwards ease-in;
    animation: anim-naira-2 0.3s forwards ease-in;
}

@-webkit-keyframes anim-naira-1 {
    50% {
        -webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
        transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes anim-naira-1 {
    50% {
        -webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
        transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }
}

@-webkit-keyframes anim-naira-2 {
    50% {
        -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
        transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes anim-naira-2 {
    50% {
        -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
        transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }
}

.button--naira:hover {
    background-color: #37474f;
    -webkit-transition: background-color 0s 0.3s;
    transition: background-color 0s 0.3s;
}

.button--naira.button--inverted:hover {
    background-color: #7986cb;
}

.button--naira:hover .button__icon {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.button--naira:hover > span {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.button--naira-up:hover > span {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}