/* Defyning Colors */

:root {
    --light-purple: #9f33dd;
    --dark-purple: #5813ba;
    --dark-orange: #fa8332;
    --light-orange: #fd9542;
    --grey: #666;
    --white: #fff;
    --light-green: #2ad041;
    --dark-green: #007200;
    --line-gradient-purple: linear-gradient(var(--light-purple), var(--dark-purple));
    --line-gradient-purple-inverse: linear-gradient(var(--dark-purple), var(--light-purple) 75%);
}

/* Social Proof */

.social-proof-div {
    position: fixed;
    z-index: 10000;
    left: 20px;
    bottom: 20px;
    display: none;
}

    .social-proof-div a {
        display: inline-block;
        padding: 5px 25px 5px 5px;
        border-radius: 50px;
        border: 1px solid var(--light-orange);
        box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.2);
        background: #fff;
    }

.svg-div {
    height: 50px;
    width: 50px;
    border-radius: 25px;
    background: var(--dark-purple);
    float: left;
    text-align: center;
    margin: 10px;
}

    .svg-div svg {
        width: auto;
        margin-top: 5px;
        height: 40px;
        fill: var(--light-orange);
        padding-right: 10px;
    }

.text-proof {
    float: left;
    margin-top: 7px;
    margin-left: 10px;
}

    .text-proof .business-info {
        max-width: 250px;
        font-size: 13px;
        color: var(--dark-orange);
        font-weight: 700;
    }

        .text-proof .business-info span {
            color: var(--dark-purple);
            font-weight: 500;
        }

    .text-proof .tempo {
        font-size: 12px;
        color: var(--grey);
    }


/* 
    
    R E S P O N S I V I D A D E

*/

@media screen and (max-width: 1023px) {

    .social-proof-div {
        left: auto;
        margin: 10px;
        bottom: 0px;
    }

        .social-proof-div a {
            padding: 5px;
        }

    .svg-div {
        height: 50px;
        width: 15%;
        border-radius: 25px;
        background: var(--dark-purple);
        float: left;
        text-align: center;
        margin: 10px;
    }

    .text-proof {
        width: 75%;
        margin: 0px;
        margin-top: 7px;
        float: left;
    }

        .text-proof .business-info {
            max-width: 100%;
            font-size: 12px;
        }

}