﻿/* FONE BOX GREEN */
.flashy_btn_container_a_tag {
    text-decoration: none;
    color: white;
    cursor: pointer;
    
}

.flashy_btn_container {
    text-align: center;
    cursor: pointer;
}

.flashy_button {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid #4f4f4f;
    border-radius: 4px;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    background-color: rgb(29,185,188);
    border: none;
}

    .flashy_button:before {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%) scaleY(1) scaleX(1.25);
        top: 100%;
        width: 140%;
        height: 180%;
        background-color: white;
        border-radius: 50%;
        display: block;
        transition: all 0.2s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
        z-index: -1;
    }

    .flashy_button:after {
        content: "";
        position: absolute;
        left: 55%;
        transform: translateX(-50%) scaleY(1) scaleX(1.45);
        top: 180%;
        width: 160%;
        height: 190%;
        background-color: white;
        border-radius: 50%;
        display: block;
        transition: all 0.32s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
        z-index: -1;
    }

    .flashy_button:hover {
        color: #ffffff;
        background-color: rgb(34,171,173);
        font-weight: 700;

    }

        .flashy_button:hover:before {
            top: -35%;
            background-color: white; /* colour that flashes over in animation */
            transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
        }

        .flashy_button:hover:after {
            top: -45%;
            background-color: rgb(117,179,250); /* colour the button ends up as */
            transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
        }


/* HANDY TRUCK ORANGE */

.org_flashy_button {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid #4f4f4f;
    border-radius: 4px;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    cursor: pointer;
   
    background-color: rgb(250,197,121);
    border: none;
}

    .org_flashy_button:before {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%) scaleY(1) scaleX(1.25);
        top: 100%;
        width: 140%;
        height: 180%;
        background-color: white;
        border-radius: 50%;
        display: block;
        transition: all 0.2s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
        z-index: -1;
    }

    .org_flashy_button:after {
        content: "";
        position: absolute;
        left: 55%;
        transform: translateX(-50%) scaleY(1) scaleX(1.45);
        top: 180%;
        width: 160%;
        height: 190%;
        background-color: white;
        border-radius: 50%;
        display: block;
        transition: all 0.32s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
        z-index: -1;
    }

    .org_flashy_button:hover {
        color: #ffffff;
        background-color: rgb(247,188,106);
        font-weight: 700;
    }

        .org_flashy_button:hover:before {
            top: -35%;
            background-color: white; /* colour that flashes over in animation */
            transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
        }

        .org_flashy_button:hover:after {
            top: -45%;
            background-color: rgb(117,179,250); /* colour the button ends up as */
            transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
        }
