/*
Changed Adelle and Future in favour of Google Fonts.
The original too where from Typekit.
*/

/* CSS custom properties
 * -------------------------------------------------------- */

:root {
	--col-almond: #f8f7f0;
	--col-blue: #57575f;
	--col-green: #88b47f;
	--col-blue-light: #9c9cae;
	--col-green-dark: #607e5a;
}


/* General
 * -------------------------------------------------------- */

.typecast {
	text-align: center;
	background: var(--col-almond);
}

.typecast blockquote,
.typecast .author { font-family: "Raleway", "futura-pt", Helvetica, sans-serif; }

.typecast .line2, 
.typecast .bubble_two .line3,
.typecast .line4, 
.typecast .line6 { font-family: "Playfair Display", "adelle", "Trebuchet MS", sans-serif; }


/* Design
 * -------------------------------------------------------- */

.typecast__inside {
	width: 40em; 
	margin: 3em auto;
	text-align: left;
	padding: 1em 0;
}

.typecast blockquote:before { display: none; }

.typecast blockquote {
    width: 100%;
    float: left;
	margin: 2em 0 5em 0;
	text-align: center;
	color: var(--col-almond);
}

.typecast p span { display: block; }

.typecast .line1, 
.typecast .bubble_one .line3, 
.typecast .line5 {
	font-size: 2.4em; 
	line-height: 1;
}

.typecast .bubble_one .line1, 
.typecast .bubble_one .line3, 
.typecast .line5 { color: var(--col-green-dark); }

.typecast .line2, 
.typecast .bubble_two .line3,
.typecast .line4, 
.typecast .line6 {
	font-size: 2.8em; 
	line-height: 1;
    margin: -0.1em 0 0.2em 0;
}

.typecast .line6,
.typecast .bubble_two .line3 { text-transform: uppercase; }

.typecast .bubble_two .line2,
.typecast .bubble_two .line3 { color: var(--col-almond); }
.typecast .bubble_two .line1 { color: var(--col-blue-light); }

/* Author
 * -------------------------------------------------------- */

.typecast .author {
	clear: both;
	display: block;
	text-align: center;
	font-size: 1.5em; 
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #555;
}

/* Bubble with an obtuse triangle 
 * SOURCE: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ 
 * ----------------------------------------------------------------- */

.typecast .bubble_one,
.typecast .bubble_two { position:relative; }

.typecast .bubble_one {
	z-index: 50;
	float: left;
	margin: 0 0 0 2em;
	background: var(--col-green);
	padding: 2em 4.3em;
	-moz-border-radius: 70%;
	-webkit-border-radius: 70%;
	border-radius: 70%;
}

.typecast .bubble_two {
	z-index: 90;
	float: right;
	margin: -12em 3.5em 0 0;
	background: var(--col-blue);
	padding: 3.7em 2.5em;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.typecast .bubble_one:before,
.typecast .bubble_one:after,
.typecast .bubble_two:before,
.typecast .bubble_two:after {
	content: "";
	position: absolute;
	z-index: -1;
    /* reduce the damage in FF3.0 */
    display: block; 
    width: 0;
}

/* The triangle
 * -------------------------------------------------------- */

.typecast .bubble_one:before,
.typecast .bubble_one:after {
	bottom: -76px; /* value = - border-top-width - border-bottom-width */
	border: 0;
	border-bottom-width: 80px; /* The height of the triangle. Must correspond to value in :after */
	border-style: solid;
}

.typecast .bubble_one:before {
	left: 160px; /* Horizontal position */
	border-right-width: 60px; /* Angle of the vertex */
	border-color: transparent var(--col-green);
}

.typecast .bubble_one:after {
	left: 250px; /* value = (:before's left) + (:before's border-right/left-width) - (:after's border-right/left-width) */
	border-right-width: 20px; /* Angle of the vertex */
	border-color: transparent var(--col-almond);
}

.typecast .bubble_two:before,
.typecast .bubble_two:after {
	bottom: -76px;
	border-style: solid;
}

/* creates the larger triangle */
.typecast .bubble_two:before {
	right: 120px;
	border-width: 0 0 80px 50px;
	border-color: transparent var(--col-blue);
}

/* creates the smaller triangle */
.typecast .bubble_two:after {
	right: 196px; 
	border-width: 0 0 80px 20px;
	border-color: transparent var(--col-almond);
}