﻿.ghost-button {
    transition: background-color 0.4s ease-out;
    background-color: rgba(1,158,227,0);
    border: 0.3rem solid #fd3c2b;
    border-radius: 3.125rem;
    color: #fd3c2b;
    cursor: pointer;
    display: inline-block;
    font-family: lato;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.01em;
    max-height: 3.4rem;
    overflow: hidden;
    padding: 0.8rem 3rem 3.5rem 3rem;
    text-decoration: none;
}

.ghost-button:hover 
{
    background-color: #fd3c2b;
    color: #fff;
}

.ghost-button span {
    display: inline-block;
    position: relative;
}

.ghost-button:hover span {
    animation: flipIn 0.4s ease-in-out;
}

.ghost-button a, .ghost-button a:visited, .ghost-button a:link,
a.ghost-button, a.ghost-button:visited
{
color: #fd3c2b;
}

.ghost-button a:hover, a.ghost-button:hover
{
color: #fff;
}


@keyframes flipIn
{
	0%
	{
		bottom:0;
		opacity:1;
	}
	50%
	{
		bottom:2rem;
		opacity:0;
	}
	50.1%
	{	
		bottom:-2rem;
		opacity:0;
	}
	100%
	{
		bottom:0;
		opacity:1;
	}
}