.left_content{
	height:auto;
}

.left_content:before{
	content: " ";
	display:table;
}
.left_content:after{
	content: " ";
	display: table;
	clear: both;
}

.divs{
	width:100%;
}
.image{
	display: block;
	margin: 10% auto -5% auto;
}



.topRightBallon{
	float:right;
}
.topLeftBallon{
	float:left;
}
.bottomLeftBallon{
	float:left;
}
.bottomRightBallon{
	float:right;
}

.textfield {
	position:absolute;
	bottom:10%;
	width:90%;
}

/* container */
.container {
	margin-top:10%;
  padding: 5% 5%;
}


/* CSS talk bubble */
.talk-bubble {
	/*margin: 27px;*/
    display: inline-block;
    position: relative;
	width: 280px;
	min-height: 150px;
	background-color: #efeeeb;
}

.talk-bubble:hover{
	background-color: #ffdf00;
}

.focus{
	background-color: #ffdf00;
}

.teste {
background-color: #ffdf00;
}
.border{
  border: 3.5px solid #666;
}
.round{
  border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;

}

/* Right triangle place bottom right */
.tri-right.border.right-bottom:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
    left: auto;
	right: -27px;
    top: auto;
	bottom: -3px;
	border: 25px solid;
	border-color: transparent transparent #666 transparent;
}

.tri-right.right-bottom:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
    left: auto;
	right: -19px;
    top: auto;
	bottom: 0px;
	border: 20px solid;
	border-color:  transparent transparent #efeeeb transparent;
}
.tri-right.right-bottom:hover::after {
	border-color:  transparent transparent #ffdf00 transparent;
}

/* Right triangle place bottom left */
.tri-right.border.left-bottom:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
    left: -28px;
	right: auto;
    top: auto;
	bottom: -3px;
	border: 25px solid;
	border-color: transparent transparent #666 transparent;
}

.tri-right.left-bottom:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
    left: -20px;
	right: auto;
    top: auto;
	bottom: 0px;
	border: 20px solid;
	border-color:  transparent transparent #efeeeb transparent;
}
.tri-right.left-bottom:hover::after {
	border-color:  transparent transparent #ffdf00 transparent;
}

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
    left: auto;
	right: -28px;
    top: -3px;
	bottom: auto;
	border: 25px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.right-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
    left: auto;
	right: -20px;
    top: 0px;
	bottom: auto;
	border: 20px solid;
	border-color: #efeeeb transparent transparent transparent;
}
.tri-right.right-top:hover::after {
	border-color: #ffdf00 transparent transparent transparent;
}


/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
    left: -28px;
	right: auto;
    top: -3px;
	bottom: auto;
	border: 25px solid;
	border-color: #666 transparent transparent transparent;
}
.tri-right.left-top:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
    left: -20px;
	right: auto;
    top: 0px;
	bottom: auto;
	border: 20px solid;
	border-color: #efeeeb transparent transparent transparent;
}
.tri-right.left-top:hover::after {
	border-color:  #ffdf00 transparent transparent transparent;
}


/* talk bubble contents */
.talktext{
    padding: 1em;
	text-align: left;
    line-height: 1.5em;
}
.talktext p{
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}

@media (max-width: 660px) {
	.image{
		display:none;
	}
	.left_content{
		margin-top:5%;
	}
	.talk-bubble{
		width:100%;
	}
	.tri-right.border.right-bottom:before{
		display:none
	}
	.tri-right.right-bottom:after {
		display:none;
	}
	.tri-right.border.left-bottom:before {display:none;}
	.tri-right.left-bottom:after {display:none;}
	.tri-right.border.right-top:before {display:none;}
	.tri-right.right-top:after {display:none;}
	.tri-right.border.left-top:before {display:none;}
	.tri-right.left-top:after {display:none;}
	.topLeftBallon{float:none; margin-bottom:3%;}
	.topRightBallon{float:none; margin-bottom:3%;}
	.bottomLeftBallon{float:none; margin-bottom:3%;}
	.bottomRightBallon{float:none; margin-bottom:3%;}
	
}

@media (min-width: 661px) and (max-width: 1200px){
	.left_content{
		margin-top:3%;
	}
	.talk-bubble{
		width:240px;
	}
	.image{
		width:15%;
			margin:15% auto -5% auto;
		}
}