.speechbubblewrapper{width:100%; height:100%; left:0px; top:0px; overflow:hidden; position:absolute; pointer-events:none;}

.bubble{position:absolute !important; font-family: 'balloon'; border:2px #000 solid;font-smoothing: antialiased;text-align: center;background: white;white-space:nowrap;cursor:default;}
.bubble.you{border:2px #fff solid;background: black; color:white}

.bubble.rounded{border-top-left-radius: 30px 15px;border-bottom-right-radius: 30px 15px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;}

.bubble.round{border-top-left-radius: 50% 50%;border-bottom-right-radius: 50% 50%;border-top-right-radius: 50% 50%;border-bottom-left-radius: 50% 50%;}

.bubblewrap{position:absolute; width:1px; height:1px; overflow:visible}

.bubble.right{right:6px; bottom:-30px}
.bubble.left{left:46px; bottom:-30px}
.bubble.top{left:-80px; top:10px}
.bubble.bottom{left:-80px; bottom:-30px}
.bubble.bottomright{right:-55px; bottom:10px}
.bubble.bottomleft{left:-15px; bottom:10px}
.bubble.topright{right:-55px; top:10px}
.bubble.topleft{left:-15px; top:10px}

.yellowish{background:#fff}

.story{line-height:20px; bottom:0px; width:1000px; margin-left:-500px;}
.title{cursor: default;}
.bubble.top.square.speech:before{content:' '; position:absolute; width:0; height:0; left:50%; margin-left:-9px; bottom:100%; border-bottom:17px solid; border-top:17px solid; border-left:10px solid; border-right:10px solid; border-color:transparent #000 #000 transparent;}
.bubble.top.square.speech:after{content:' '; position: absolute; width:0; height:0; left:50%; margin-left:-7px; bottom:100%; border-bottom:14px solid; border-top:14px solid; border-left:8px solid; border-right:8px solid; border-color:transparent #fff #fff transparent;}
.bubble.bottom.square.speech:before{content:' '; position:absolute; width:0; height:0; left:50%; bottom:100%; border-bottom:17px solid; border-top:17px solid; border-left:10px solid; border-right:10px solid; border-color:#000 #000 transparent transparent;}
.bubble.bottom.square.speech:after{content:' '; position:absolute; width:0; height:0; left:50%; bottom:100%; border-bottom:14px solid; border-top:14px solid; border-left:8px solid; border-right:8px solid; border-color:#fff #fff transparent transparent;}

.bubble.bottomleft.square.speech:before{content:' '; position:absolute; width:0; height:0; left:30px; top:100%; border-bottom:17px solid; border-top:17px solid; border-left:10px solid; border-right:10px solid; border-color:#000 transparent transparent #000;}
.bubble.bottomleft.square.speech:after{content:' '; position: absolute; width:0; height:0; left:32px; top:100%; border-bottom:14px solid; border-top:14px solid; border-left:8px solid; border-right:8px solid; border-color:#fff transparent transparent #fff;}
.bubble.bottomright.square.speech:before{content:' '; position:absolute; width:0; height:0; right:30px; top:100%; border-bottom:17px solid; border-top:17px solid; border-left:10px solid; border-right:10px solid; border-color:#000 #000 transparent transparent;}
.bubble.bottomright.square.speech:after{content:' '; position:absolute; width:0; height:0; right:32px; top:100%; border-bottom:14px solid; border-top:14px solid; border-left:8px solid; border-right:8px solid; border-color:#fff #fff transparent transparent;}

.bubble.left.square.speech:before{content:' '; position:absolute; width:0; height:0; right:100%; top:50%; margin-top:-4px; border-bottom:10px solid; border-top:10px solid; border-left:17px solid; border-right:17px solid; border-color:transparent #000 #000 transparent;}
.bubble.left.square.speech:after{content:' '; position: absolute; width:0; height:0; right:100%; top:50%; margin-top:0px; border-bottom:7px solid; border-top:7px solid; border-left:14px solid; border-right:14px solid; border-color:transparent #fff #fff transparent;}
.bubble.right.square.speech:before{content:' '; position:absolute; width:0; height:0; left:100%; top:50%; margin-top:-4px; border-bottom:10px solid; border-top:10px solid; border-left:17px solid; border-right:17px solid; border-color:transparent transparent #000 #000;}
.bubble.right.square.speech:after{content:' '; position:absolute; width:0; height:0; left:100%; top:50%; margin-top:0px; border-bottom:7px solid; border-top:7px solid; border-left:14px solid; border-right:14px solid; border-color:transparent transparent #fff #fff;}

.bubble.top.square.you:before{content:' '; position:absolute; width:0; height:0; left:50%; margin-left:-9px; bottom:100%; border-bottom:17px solid; border-top:17px solid; border-left:10px solid; border-right:10px solid; border-color:transparent #fff #fff transparent;}
.bubble.top.square.you:after{content:' '; position: absolute; width:0; height:0; left:50%; margin-left:-7px; bottom:100%; border-bottom:14px solid; border-top:14px solid; border-left:8px solid; border-right:8px solid; border-color:transparent #000 #000 transparent;}
.bubble.bottom.square.you:before{content:' '; position:absolute; width:0; height:0; left:50%; bottom:100%; border-bottom:17px solid; border-top:17px solid; border-left:10px solid; border-right:10px solid; border-color:#fff #fff transparent transparent;}
.bubble.bottom.square.you:after{content:' '; position:absolute; width:0; height:0; left:50%; bottom:100%; border-bottom:14px solid; border-top:14px solid; border-left:8px solid; border-right:8px solid; border-color:#000 #000 transparent transparent;}

.bubble.bottomleft.square.you:before{content:' '; position:absolute; width:0; height:0; left:30px; top:100%; border-bottom:17px solid; border-top:17px solid; border-left:10px solid; border-right:10px solid; border-color:#fff transparent transparent #fff;}
.bubble.bottomleft.square.you:after{content:' '; position: absolute; width:0; height:0; left:32px; top:100%; border-bottom:14px solid; border-top:14px solid; border-left:8px solid; border-right:8px solid; border-color:#000 transparent transparent #000;}
.bubble.bottomright.square.you:before{content:' '; position:absolute; width:0; height:0; right:30px; top:100%; border-bottom:17px solid; border-top:17px solid; border-left:10px solid; border-right:10px solid; border-color:#fff #fff transparent transparent;}
.bubble.bottomright.square.you:after{content:' '; position:absolute; width:0; height:0; right:32px; top:100%; border-bottom:14px solid; border-top:14px solid; border-left:8px solid; border-right:8px solid; border-color:#000 #000 transparent transparent;}

.bubble.left.square.you:before{content:' '; position:absolute; width:0; height:0; right:100%; top:50%; margin-top:-4px; border-bottom:10px solid; border-top:10px solid; border-left:17px solid; border-right:17px solid; border-color:transparent #fff #fff transparent;}
.bubble.left.square.you:after{content:' '; position: absolute; width:0; height:0; right:100%; top:50%; margin-top:0px; border-bottom:7px solid; border-top:7px solid; border-left:14px solid; border-right:14px solid; border-color:transparent #000 #000 transparent;}
.bubble.right.square.you:before{content:' '; position:absolute; width:0; height:0; left:100%; top:50%; margin-top:-4px; border-bottom:10px solid; border-top:10px solid; border-left:17px solid; border-right:17px solid; border-color:transparent transparent #fff #fff;}
.bubble.right.square.you:after{content:' '; position:absolute; width:0; height:0; left:100%; top:50%; margin-top:0px; border-bottom:7px solid; border-top:7px solid; border-left:14px solid; border-right:14px solid; border-color:transparent transparent #000 #000;}

.bubble.thought.bottomleft.you:before {content: ""; position:absolute; bottom:-30px; left:10px; width:20px; height:20px; background:#000; border:2px #fff solid; border-radius: 20px;}
.bubble.thought.bottomleft.you:after {content: ""; position:absolute; bottom:-40px; left:-10px; width:10px; height:10px; background:#000; border:2px #fff solid; border-radius: 10px;}
.bubble.thought.bottomright.you:before {content: ""; position:absolute; bottom:-30px; right:10px; width:20px; height:20px; background:#000; border:2px #fff solid; border-radius: 20px;}
.bubble.thought.bottomright.you:after {content: ""; position:absolute; bottom:-40px; right:-10px; width:10px; height:10px; background:#000; border:2px #fff solid; border-radius: 10px;}

.bubble.thought.topleft.you:before {content: ""; position:absolute; top:-30px; left:10px; width:20px; height:20px; background:#000; border:2px #fff solid; border-radius: 20px;}
.bubble.thought.topleft.you:after {content: ""; position:absolute; top:-40px; left:-10px; width:10px; height:10px; background:#000; border:2px #fff solid; border-radius: 10px;}
.bubble.thought.topright.you:before {content: ""; position:absolute; top:-30px; right:10px; width:20px; height:20px; background:#000; border:2px #fff solid; border-radius: 20px;}
.bubble.thought.topright.you:after {content: ""; position:absolute; top:-40px; right:-10px; width:10px; height:10px; background:#000; border:2px #fff solid; border-radius: 10px;}

@media (min-width: 1601px){
	.info{font-size:18px}
	
	.title{line-height:60px; margin-top:-30px; width:2000px; margin-left:-1000px; font-size:40px; color:#fff; text-align:center;white-space:nowrap; text-shadow: 0px 0px 2px rgba(0,0,0,1), 0px 0px 2px rgba(0,0,0,1), 0px 0px 2px rgba(0,0,0,1)}
	.small{font-size:30px;}
	
	.bubble{padding:15px; font-size:18px}
	.bubble.round{padding:25px;}

	.bigfont{font-size:25px;}

	.bubble.small{max-width:150px}
	.bubble.medium{max-width:250px}
	.bubble.large{max-width:500px}
	.bubble.xlarge{max-width:1000px}

	.bubble.fixedwidth.small{width:150px !important}
	.bubble.fixedwidth.medium{width:250px !important}
	.bubble.fixedwidth.large{width:500px !important}
	.bubble.fixedwidth.xlarge{width:1000px !important}
}
@media (min-width: 1101px) and (max-width: 1600px){
	.info{font-size:14px}
	
	.title{line-height:42px; margin-top:-21px; width:2000px; margin-left:-1000px; font-size:28px; color:#fff; text-align:center;white-space:nowrap; text-shadow: 0px 0px 2px rgba(0,0,0,1), 0px 0px 2px rgba(0,0,0,1), 0px 0px 2px rgba(0,0,0,1)}
	.small{font-size:21px;}
	
	.bubble{padding:11px; font-size:14px}
	.bubble.round{padding:20px;}

	.bigfont{font-size:18px;}

	.bubble.small{max-width:105px}
	.bubble.medium{max-width:175px}
	.bubble.large{max-width:350px}
	.bubble.xlarge{max-width:700px}

	.bubble.fixedwidth.small{width:105px !important}
	.bubble.fixedwidth.medium{width:175px !important}
	.bubble.fixedwidth.large{width:350px !important}
	.bubble.fixedwidth.xlarge{width:700px !important}
}
@media (max-width: 1100px){
	.info{font-size:12px}
	
	.title{line-height:33px; margin-top:-17px; width:2000px; margin-left:-1000px; font-size:22px; color:#fff; text-align:center;white-space:nowrap; text-shadow: 0px 0px 2px rgba(0,0,0,1), 0px 0px 2px rgba(0,0,0,1), 0px 0px 2px rgba(0,0,0,1)}
	.small{font-size:16px;}
	
	.bubble{padding:10px; font-size:12px}
	.bubble.round{padding:18px;}

	.bigfont{font-size:14px;}

	.bubble.small{max-width:83px}
	.bubble.medium{max-width:138px}
	.bubble.large{max-width:275px}
	.bubble.xlarge{max-width:550px}

	.bubble.fixedwidth.small{width:83px !important}
	.bubble.fixedwidth.medium{width:138px !important}
	.bubble.fixedwidth.large{width:275px !important}
	.bubble.fixedwidth.xlarge{width:550px !important}
}