@charset "utf-8";
/******************************************************************
REVIEW SPEECH BUBBLES
******************************************************************/
/*thanks Craig Buckler*/

#bluereview {
	position: absolute;
	top: 18vw;
	left: 30vw;
	display: none;
	}
	
#yellowreview {
	position: absolute;
	top: 18vw;
	left: -10vw;
	display: none;
	}
	
#greenreview {
	position: absolute;
	top: 15vw;
	left: 50vw;
	display: none;
}

#purplereview {
	position: absolute;
	top: 22vw;
	left: 0vw;
	display: none;
}

#orangereview {
	position: absolute;
	top: 20vw;
	left:55vw;
	display: none;
}

#pinkreview {
	position: absolute;
	top: 3vw;
	left:0vw;
	display: none;
}

p.speech {
	position: relative;
	width: 300px;
	height: 300px;
	padding: 20px;
	line-height: 30px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
}

p.blue {
	height: 150px;
	background-color: #B2E6FF;
	}
	
p.yellow {
	height: 125px;
	background-color: #FFFF85;
}

p.green {
	height: 125px;
	background-color: #A3FFA3;
}

p.purple {
	height: 150px;
	background-color: #DAB5FF;
}

p.orange {
	height: 125px;
	background-color: #FFD685;
}

p.pink {
	height: 125px;
	background-color: #FCF;
}

p.speech:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	top: 344px;
	border: 25px solid;
	border-color: #666 transparent transparent #666;
}

p.blue:before {
	top: 196px;
	}
	
p.yellow:before {
	top: 173px;
	left:270px;
	border-color: #666 #666 transparent transparent;
	}
	
p.green:before {
	top: 173px;
}

p.purple:before {
	top: 190px;
	left: 270px;
	border-color: #666 #666 transparent transparent;
}

p.orange:before {
	top: 165px;
}

p.pink:before {
	top: 173px;
	left: 270px;
	border-color: #666 #666 transparent transparent;
}
	
p.speech:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
	top: 340px;
	border: 15px solid;
	border-color: #fff transparent transparent #fff;
}

p.blue:after {
	border-color: #B2E6FF transparent transparent #B2E6FF;
	top: 189px;
	}
	
p.yellow:after {
	border-color: #FFFF85 #FFFF85 transparent transparent;
	top: 165px;
	left:278px;
	}
	
p.green:after {
	border-color: #A3FFA3 transparent transparent #A3FFA3;
	top: 165px;
}

p.purple:after {
	border-color: #DAB5FF #DAB5FF transparent transparent;
	top: 187px;
	left: 278px;
}

p.orange:after {
	border-color: #FFD685 transparent transparent #FFD685;
	top: 165px;
}

p.pink:after {
	border-color: #FCF #FCF transparent transparent;
	top: 165px;
	left:278px;
}

/* ==========================================================================
   MEDIA
   ========================================================================== */
   /*iPhones*/
   @media screen and (max-device-width: 480px) {
	#bluereview {
		top: 0;
		left: -7.5em;
		}
	#yellowreview {
		top: 0;
		left: -7.5em;
		}
	#greenreview {
		top: 0;
		left: -7.5em;
		}
	#purplereview {
		top: 0;
		left: -7.5em;
		}
	#orangereview {
		top: 0;
		left: -7.5em;
		}
	#pinkreview {
		top: 0;
		left: -7.5em;
		}
	p.speech {
		width: 13em;
		padding: 2em;
		line-height: 2em;
		border: 1em solid #666;
		-webkit-border-radius: 2em;
		-moz-border-radius: 2em;
		border-radius: 2em;
		-webkit-box-shadow: .5em .5em 1em #888;
		-moz-box-shadow: .5em .5em 1em #888;
		box-shadow: .5em .5em 1em #888;
		}
	p.blue {
		height: 13em;
		}
	p.yellow {
		height: 13em;
		}
	p.green {
		height: 6.5em;
		}
	p.purple {
		height: 4em;
		}
	p.orange {
		height: 125px;
		}
	p.pink {
		height: 125px;
		}
	p.speech:before {
		border: 2em solid;
		border-color: #666 transparent transparent #666;
		}
	p.blue:before {
		top: 17.5em;
		}
	p.yellow:before {
		top: 17.5em;
		left: 11.5em;
		border-color: #666 #666 transparent transparent;
		}
	p.green:before {
		top: 11em;
		}
	p.purple:before {
		top: 8.5em;
		left: 11em;
		border-color: #666 #666 transparent transparent;
		}
	p.orange:before {
		top: 165px;
		}
	p.pink:before {
		top: 173px;
		left: 270px;
		border-color: #666 #666 transparent transparent;
		}
	p.speech:after {
		left: 2.75em;
		border: 1.25em solid;
		border-color: #fff transparent transparent #fff;
		}
	p.blue:after {
		border-color: #B2E6FF transparent transparent #B2E6FF;
		top: 16.75em;
		}
		
	p.yellow:after {
		border-color: #FFFF85 #FFFF85 transparent transparent;
		top: 16.75em;
		left: 12em;
		}
		
	p.green:after {
		border-color: #A3FFA3 transparent transparent #A3FFA3;
		top: 10.25em;
		}
	p.purple:after {
		border-color: #DAB5FF #DAB5FF transparent transparent;
		top: 7.75em;
		left: 11.5em;
		}
	p.orange:after {
		border-color: #FFD685 transparent transparent #FFD685;
		top: 16.75em;
		}
	p.pink:after {
		border-color: #FCF #FCF transparent transparent;
		top: 165px;
		left:278px;
		}
}