@import url('https://fonts.googleapis.com/css?family=Quicksand');

/* ---- Button WhatsApp Left ----*/
ul.btn-wa-left {
    list-style: none;
    position: fixed;
    left: 0%;
    transform: translateY(-50%);
}

    ul.btn-wa-left li a {
        display: block;
        margin-left: -2px;
        height: 60px;
        width: 60px;
        border-radius: 0 25px 25px 0;
        border: 2px solid #000;
        background: #FFF;
        margin-bottom: 1em;
        transition: all .4s ease;
        text-decoration: none;
        position: relative;
        font-family: "Quicksand", sans-serif;
    }

        ul.btn-wa-left li a:hover {
            cursor: pointer;
            width: 180px;
            color: #fff;
        }

            ul.btn-wa-left li a:hover span {
                left: 0;
                font-size: 18px;
            }

        ul.btn-wa-left li a span {
            padding: 0 30px 0 15px;
            position: absolute;
            left: -125px;
            transition: left .4s ease;
            width: 160px;
        }

    ul.btn-wa-left li i {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        font-size: 3.2em;
    }

    ul.btn-wa-left .whatsapp {
        background: rgba(39, 174, 96, 0.3);
        border-color: #27ae60;
        color: #27ae60;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

        ul.btn-wa-left .whatsapp:hover {
            background: #27ae60;
        }

/* ---- Button WhatsApp Right ----*/
ul.btn-wa-right {
    list-style: none;
    position: fixed;
    right: 0%;
    transform: translateY(-50%);
}

    ul.btn-wa-right li a {
        display: block;
        margin-right: -2px;
        height: 60px;
        width: 60px;
        border-radius: 25px 0 0 25px;
        border: 2px solid #000;
        background: #FFF;
        margin-bottom: 1em;
        transition: all .4s ease;
        text-decoration: none;
        position: relative;
        font-family: "Quicksand", sans-serif;
    }

        ul.btn-wa-right li a:hover {
            cursor: pointer;
            width: 180px;
            color: #fff;
        }

            ul.btn-wa-right li a:hover span {
                right: 0;
                font-size: 18px;
            }

        ul.btn-wa-right li a span {
            padding: 0 30px 0 15px;
            position: absolute;
            left: 40px;
            transition: left .4s ease;
            width: 160px;
        }

    ul.btn-wa-right li i {
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        font-size: 3.2em;
    }

    ul.btn-wa-right .whatsapp {
        background: rgba(39, 174, 96, 0.3);
        border-color: #27ae60;
        color: #27ae60;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

        ul.btn-wa-right .whatsapp:hover {
            background: #27ae60;
        }

@media all and (max-width: 760px) {
	ul.btn-wa-right li i {
		left: 8px;
	}
	
	ul.btn-wa-right li a {
		width: 48px;
	}
	
	ul.btn-wa-right li a span {
		left: 34px;
	}
	
	ul.btn-wa-right li a:hover {
		width: 160px;
	}

}