@keyframes fly {
    0% {transform: translate(0px,0px);}
    30% {transform: translate(0px,0px); opacity: 1;}
    50% { transform: translate(100%, 0px); opacity: 0;}
    51% { transform: translate(-100%, 0px); opacity: 0; }
    75% {transform: translate(-100%); opacity: 1;}
    100% {transform: translate(0); opacity: 1;}
}

/* Nike */
a#btn_nike img{
    position: relative;
    padding: 70px 30px;
}

a#btn_nike img:hover {
    display: block;
    animation-name: fly;
    animation-duration: 0.5s;
}

/*St Jude*/
a#btn_stjude {
    display: block;
    text-decoration: none;
    font-family: Cambria, serif;
    color: rgb(110, 108, 108);
    font-size: 22px;
    font-weight: 500;
    margin-top: 8px;
    text-align: center;
}

.Jude {
    margin-top: 30px;
}

a#btn_stjude:hover {
    font-size: 26px;
    font-weight: 700;
    transition-duration: 0.3s;
}

a#btn_stjude:hover img{
    transform: scale(0.8);
    transition-duration: 0.5s;
}

/*Apple*/
@keyframes Glow{
    from {filter: drop-shadow(0px 0px 60px rgb(161, 203, 255));}
    to {filter: drop-shadow(0px 0px 80px rgb(161, 203, 255, 1)) drop-shadow(0px 0px 100px rgb(161, 203, 255, 1)) brightness(2.5); transform: scale(1.2);}
}

a#btn_apple img {
    margin-top: 40px;
}

a#btn_apple:hover {
    animation-name: Glow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.apple {
    background-color: black;
}

/*Coke*/
@keyframes shake{
    from { transform: rotate(-7deg); }
    11% { transform: rotate(4deg); }
    22% { transform: rotate(-4deg) scale(1.2); }
    33% { transform: rotate(7deg) scale(1.5); }
    44% { transform: rotate(-7deg) scale(1.8); }
    55% { transform: rotate(4deg)scale(2); }
    66% { transform: rotate(-4deg) scale(2.1);}
    to { transform: rotate(7deg)scale(2.3); }
}

a#btn_coke {
    display: block;
    margin-top: 50px;
}

a#btn_coke img {
    display: block;
    margin: 5px auto;
}

a#btn_coke img:hover {
    animation-name: shake;
    animation-duration: 1s;
    transition: ease-in;
}

/*Old Navy*/
a#btn_oldnavy {
    text-decoration: none;
    font-family:Verdana, sans-serif;
    font-weight: 900;
    font-size: 28px;
}

a#btn_oldnavy p{
    display: inline-block;
    margin-top: 100px;
    background-color: navy;
    border-radius: 80px;
    padding: 16px 16px;
    color: white;
}

a#btn_oldnavy p:hover {
    display: inline-block;
    background-color:white;
    border: 3px solid navy;
    border-radius: 80px;
    padding: 16px 16px;
    color: navy;
    transition: ease-in;
    transition-duration: 0.5s;
}

/*Tesla*/
@keyframes gradientmove {
    0% {background-position: top center;}
    50% {background-position: center center;}
    100% {background-position: bottom center;}
}

a#btn_tesla img{
    display:inline-block;
    background-color: rgb(254, 45, 45);
    padding: 30px 10px;
    border-radius: 30px;
    margin-top: 50px;
}

a#btn_tesla img:hover {
    animation-name: gradientmove;
    background: linear-gradient(to bottom, #c60834 0%,#8f0222 50%,#8f0222 50%,#6d0019 100%);
    filter: brightness(1.4);
}

/*Instagram*/
a#btn_insta {
    position: relative;
    text-align: center;
}

a#btn_insta img{
    display: block;
    margin: 30% 30%;
    transition: ease-in;
}

a#btn_insta p{
    position: absolute;
    top:110px;
    left: -39px;
    z-index:-40;
    font-family:Cambria, serif;
    font-weight: 400;
    font-size: 25px;
    opacity: 0;
    color: black;
}

a#btn_insta:hover img{
    transform: translateX(-50px);
    transition: ease-in;
    transition-duration: 0.5s;
}

a#btn_insta:hover p{
    transform: translateX(40px);
    transition: ease-in;
    transition-duration: 0.5s;
    opacity: 1;
}

/*lyft*/
a#btn_lyft {
    text-decoration: none;
    font-family:'Franklin Gothic Medium', sans-serif;
    font-size: 40px;
    font-weight: 700px;
    color: white;
}

a#btn_lyft p {
    background-color: rgb(230, 0, 153);
    padding: 47px 10px;
    border-radius: 50%;
    width: 120px;
    margin-left: 60px;
    margin-top: 50px;
}

@keyframes spin {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}

a#btn_lyft:hover p {
   animation-name: spin;
   animation-timing-function: infinite;
   animation-duration: 0.5s;
   animation-iteration-count: infinite;
}

/*craigslist*/
a#btn_list {
    text-decoration: none;
}

a#btn_list p{
    font-size: 45px;
    font-family:'Times New Roman', Times, serif;
    color: rgb(119, 4, 119);
    margin-top: 95px;
}

a#btn_list img {
    position: relative;
    left: -1px;
    top:-114px;
    width: 100px;
    opacity: 0;
}

a#btn_list:hover p {
    opacity:0;
    transition: ease-in;
    transition-duration: 0.2s;
}

a#btn_list:hover img {
    opacity:1;
    transition: ease-in;
    transition-duration: 0.5s;
}

/*ideo*/
@keyframes switch{
    0% {background-color: orange;}
    50% {background-color: orange;}
    51% {background-color: turquoise;}
    100% {background-color: turquoise;}
}

a#btn_ideo img{
    width: 150px;
    margin-top: 50px;
}

a#btn_ideo:hover img{
    animation-name: switch;
    animation-duration: 0.6s;
    padding: 10px 10px;
    animation-iteration-count: infinite;
}