#bubble { margin: 50px 0; }
#bubble h2, #bubble p{ margin: 0; padding: 5px 10px; font-weight: normal; text-align: left; }
#bubble h2{ font: 26px 'Anton', sans-serif; }
#bubble p{ font: inherit/170% 'Gruppo', cursive; color: inherit; }

#bubble .bubble{ width: 96%; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; }
#bubble .bubble .heading{ width: 100%; position: relative; }
#bubble .bubble .heading span{ position: absolute; bottom: 0; right: 4px; font: 8px/8px Arial, Helvetica, Sans-serif !important;  letter-spacing: 1.4px; padding: 1.5px 3px; color: white; background: rgba(0,0,0,0.4); }

#bubble .bubble .heading h2{ background: #F0F0F0; color: #922173; }
#bubble .bubble .image{ width: 88px; line-height: 0; filter: drop-shadow( 2px 2px 0px rgba(0, 0, 0, 0.5)); }
#bubble .bubble .image img{ border-radius: 50%; }
#bubble .bubble .text{ flex: 1; background: #0B83DB; color: white; }

#bubble .bubble.regular { position: relative; }
#bubble .bubble.regular .heading { padding-left: 44px; margin-top: 4px; }
#bubble .bubble.regular .heading h2{ padding: 4px 10px 4px 50px; width: 80%; border-radius: 0 10px 0 0;  }
#bubble .bubble.regular .heading span{ bottom: -15px; right: 2px; }
#bubble .bubble.regular .text{ border-radius: 0 5px 10px 10px; margin-left: 44px; padding: 15px; padding-left: 34px }
#bubble .bubble.regular .image{ position: absolute; top: 0; left: 0; }
#bubble .bubble.regular .image .from-network{ right: -12px; top: 44px; border-radius: 50%; }

#bubble .bubble.square { position: relative; }	
#bubble .bubble.square .heading h2{ padding-left: 100px; }
#bubble .bubble.square .image { position: absolute; top: 0; left: 0; z-index: 2; }
#bubble .bubble.square .image img{ border-radius: 0; clip-path: polygon(0 0, 88px 0, 66px 88px, 0 88px ); z-index: 2; position: relative; }
#bubble .bubble.square .text{ margin-left: 6px; padding-left: 70px; clip-path: polygon( 24px 0, 100% 0, 100% 100%, 0 100%); position: static; z-index: 1;  }
/* #bubble .bubble.square .text p{ } */
#bubble .bubble.square .image .from-network{ left: 10px; bottom: -22px; border-radius: 0 0 4px 4px; z-index: 1; }

#bubble .bubble.speech .heading{ order: 2; margin-left: 120px; margin-right: 10px; margin-top: -10px; transform: rotate( -0.3deg ); z-index: 2;}
#bubble .bubble.speech .heading span{ bottom: calc( 50% - 7px ) }
#bubble .bubble.speech .text{ clip-path: polygon( 0% 34px, 20px 32px, 22px 5px, 25px 1px, 100% 0, 100% 100%, 20px calc( 100% - 8px ), 19px calc( 100% - 9px ),  18px calc( 100% - 10px ), 18px 56px ); border-radius: 7px; min-height: 80px; margin-left: 5px; }
#bubble .bubble.speech .text p{ padding: 10px 35px 20px 40px; }
#bubble .bubble.speech .image .from-network{ left: 32px; top: 75px; border-radius: 50%; }

#bubble .bubble.center{ flex-direction: column;  }
#bubble .bubble.center .image{ position: relative; width: 100%; }
#bubble .bubble.center .image img{ position: absolute; top: -35px; left: calc( 50% - 35px ); width: 70px;}
#bubble .bubble.center .heading h2{ padding: 2px 35px; text-align: right; }
#bubble .bubble.center .heading span{ bottom: -13px; right: 27px; }
#bubble .bubble.center .text p{ padding: 35px 30px 20px; text-align: center; }
#bubble .bubble.center .image .from-network{ right: 2px; top: -13px; border-radius: 6px; }