/* ------------------------------------------
based on PURE CSS SPEECH BUBBLES

Created: 02 March 2010
Version: 1.2 (03 March 2011)

by Nicolas Gallagher
- http://nicolasgallagher.com/pure-css-speech-bubbles/
- http://nicolasgallagher.com
- http://twitter.com/necolas

Version: 1.2.1 (29 Feb 2016),

by Sergio Fernández, extended with basic media queries

Dual licensed under MIT and GNU GPLv2 © Nicolas Gallagher
------------------------------------------ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    border:3px solid #d00;
    color:#333;
    background:#bfbfbf;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

@media only screen and (min-width: 768px) {

    /* Variant : for left positioned triangle
    ------------------------------------------ */

    .triangle-border.left {
        margin-left:30px;
    }

    /* Variant : for right positioned triangle
    ------------------------------------------ */

    .triangle-border.right {
        margin-right:30px;
    }

    .triangle-border:before {
        content:"";
        position:absolute;
        bottom:-20px; /* value = - border-top-width - border-bottom-width */
        left:40px; /* controls horizontal position */
        border-width:20px 20px 0;
        border-style:solid;
        border-color:#d00 transparent;
        /* reduce the damage in FF3.0 */
        display:block;
        width:0;
    }

    /* creates the smaller  triangle */
    .triangle-border:after {
        content:"";
        position:absolute;
        bottom:-13px; /* value = - border-top-width - border-bottom-width */
        left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
        border-width:13px 13px 0;
        border-style:solid;
        border-color:#bfbfbf transparent;
        /* reduce the damage in FF3.0 */
        display:block;
        width:0;
    }

    /* creates the larger triangle */
    .triangle-border.left:before {
        top:10px; /* controls vertical position */
        bottom:auto;
        left:-30px; /* value = - border-left-width - border-right-width */
        border-width:15px 30px 15px 0;
        border-color:transparent #d00;
    }

    /* creates the smaller  triangle */
    .triangle-border.left:after {
        top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
        bottom:auto;
        left:-21px; /* value = - border-left-width - border-right-width */
        border-width:9px 21px 9px 0;
        border-color:transparent #bfbfbf;
    }

}