blockquote:before,blockquote:after,q:before,q:after {
	content:"";
}

blockquote,q {
	quotes:"" "";
}
div.callout {
	width: 50%;
	float: right;
	background-color: #e9e9e9;
	color: #00468c;
	position: relative;
	margin-left: 10px;
	padding: 10px;
	font: 14px/24px Arial,Helvetica,sans-serif;
}
div.callout:after {
	clear:both;
}

.pullquote_left { width: 200px; margin: 5px 15px 5px 0; font-size: 1.4em; text-align: center; float: left; color: #007396;}

.pullquote_right { width: 200px; margin: 5px 0 5px 15px; font-size: 1.4em; text-align: center; float: right; color: #007396;}

blockquote {
  color: #007396;
  background: #e9e9e9;
  border-left: 10px solid #007396;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
  color: #007396;
  content: "\201C";
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

.pullquote_left:before,
.pullquote_right:before {
  color: #007396;
  content: "\201C";
  font-size: 2.5em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE
** ============================================================================================================================ */

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

.speech {
	width: 40%;
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  color:#ffffff;
  background:#eb9f0e; 
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}



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

.speech.left {
	float: left;
  margin-left:50px;
  background:#eb9f0e;
}

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

.speech.right {
	float: right;
  margin-right:50px;
  background:#14bef0;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/* creates triangle */
.speech:after {
  content:"";
  position:absolute;
  bottom:-15px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#eb9f0e transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}


/* Variant : left
------------------------------------------ */

.speech.left:after {
  top:16px; /* controls vertical position */
  left:-50px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:10px 50px 10px 0;
  border-color:transparent #eb9f0e;
}

/* Variant : right
------------------------------------------ */

.speech.right:after {
  top:16px; /* controls vertical position */
  right:-50px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  left:auto;
  border-width:10px 0 10px 50px;
  border-color:transparent #14bef0;
}
/*  Thought Bubble 
------------------------------------------- */
.oval-thought-border::before {
    background: #fff none repeat scroll 0 0;
    border: 8px solid #00468b;
    border-radius: 50px;
    bottom: -40px;
    content: "";
    display: block;
    height: 50px;
    position: absolute;
    right: 100px;
    width: 50px;
    z-index: 10;
    font-size: 1em;
}
.oval-thought-border::after {
    background: #fff none repeat scroll 0 0;
    border: 6px solid #00468b;
    border-radius: 25px;
    bottom: -55px;
    content: "";
    display: block;
    height: 25px;
    position: absolute;
    right: 81px;
    width: 25px;
    z-index: 10;
}
.oval-thought-border {
    background: #fff none repeat scroll 0 0;
    border: 8px solid #00468b;
    border-radius: 240px / 140px;
    color: #333;
    margin: 1em auto 80px;
    padding: 70px 30px;
    position: relative;
    text-align: center;
    max-width: 50%;
    float: left;
    font-style: normal;
}
.oval-thought-border p::after{
    background: #fff none repeat scroll 0 0;
    border: 4px solid #00468b;
    border-radius: 25px;
    bottom: -60px;
    content: "";
    display: block;
    height: 20px;
    position: absolute;
    right: 50px;
    width: 20px;
    z-index: 10;
}
.oval-thought-border.left {
  float: left;
}.oval-thought-border.right {
  float: right;
}
.oval-thought-border.right::before {
  right: 42%;
}
.oval-thought-border.right::after {
  right: 59%;
}
.oval-thought-border.right p::after {
  right: 70%;
}
  
.oval-thought-border  p {
    font-size: 2em;
    margin: 0;
}