.quote-container {
	margin-top: 50px;
	position: absolute;
	top: 110px;
	left: 170px;
	z-index: 2;
}

.note {
	width: 300px;
	margin: 0 auto;
	padding: 13px;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
	box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
	font-size: 20px;
	line-height: 1.0em;
}

.note a {
	color: #333;
	font-weight: bold;
}

.note a:nth-of-type(2) span { 
	font-style: italic;
	font-size: 17px;
	font-weight: 400;
}

.bg-orange {
	background: #f48221;
	border: 1px solid #f48221;
}

.text-white {
	color: white;
}

.text-smaller {
	font-size: 15px;
	line-height: 1.3em;
	font-weight: 400;
}

.pin {
	background-color: #aaa;
	display: block;
	height: 32px;
	width: 2px;
	position: absolute;
	left: 50%;
	top: -16px;
	z-index: 1;
}

.pin:after {
	background-color: #A31;
	background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
		inset 3px 3px 3px hsla(0,0%,100%,.2),
		inset -3px -3px 3px hsla(0,0%,0%,.2),
		23px 20px 3px hsla(0,0%,0%,.15);
	content: '';
	height: 12px;
	left: -5px;
	position: absolute;
	top: -10px;
	width: 12px;
}

.pin:before {
	background-color: hsla(0,0%,0%,0.1);
	box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
	content: '';

	height: 24px;
	width: 2px;
	left: 0;
	position: absolute;
	top: 8px;

	transform: rotate(57.5deg);
	-moz-transform: rotate(57.5deg);
	-webkit-transform: rotate(57.5deg);
	-o-transform: rotate(57.5deg);
	-ms-transform: rotate(57.5deg);

	transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
}

@media all and (max-width: 900px) {
	.note { width: 215px; }
	.quote-container { left: 130px; }
}

@media all and (max-width: 767px) {
	.quote-container { left: 30px; }
}

@media all and (max-width: 640px) {
	.note a:nth-of-type(2), .note:not(.engedelyezettkepzesek) br {display: none;}
	.note {padding: 5px; line-height: 1.6em;}
	.note.engedelyezettkepzesek br:nth-of-type(2n) {display: none;}
	.note.engedelyezettkepzesek {font-size: 85%;}
}
@media all and (max-width: 340px) {
	.quote-container {left: 30px;}
	.note:not(.engedelyezettkepzesek) {line-height: 2em;}
	.note a span {display: none;}
}


/* Fejléc csík */
#headline-row{
	margin-right: 50px;
	position: absolute;
	top: 64px;
	left: 35px;
	z-index: 2;
	background-color: rgba(255,255,255,0.7);
	padding: 10px 15px;
	box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
	font-weight: bold;
	color: rgb(226,0,116);
	border: 2px solid #CBDFE2;
}
#headline-row a, #headline-row a:visited, #headline-row a:hover, #headline-row a:active{
	font-weight: bold;
	color: #15a3a9;
}

#headline-row > span {
	font-size: 87%;
	color: black;
	display: inline;
}

@media all and (max-width: 768px) {
}

@media all and (max-width: 580px) {
	#headline-row > span {
		display: block;
	}
}

@media all and (max-width: 360px) {
	#headline-row {
		left: 25px;
		font-size: 90%;
	}
	#headline-row > span {
		font-size: 90%;
		padding-left: 3px;
	}
}
@media all and (max-width: 340px) {
	#headline-row {
		left: 15px;
		padding-left: 8px;
		padding-right: 8px;
		font-size: 82%;
	}
}
@media all and (max-width: 320px) {
	#headline-row {
		margin-right: 40px;
		font-size: 82%;
	}
}
@media all and (max-width: 280px) {
	#headline-row > span {
		display: none;
	}
}

#headline-row span a, #headline-row span a:visited, #headline-row span a:hover {
	color: black;
}

/* Buborék */
p.bubble {
	position: absolute;
	top: 310px;
	right: 205px;
	z-index: 2;
	text-align: center;
	line-height: 22px;
	padding: 10px 16px;
	font-weight: 400;
	font-size: 120%;
	background-color: #ebf1f2;
	border-radius: 8px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
	transform: rotate(5deg);
}
p.bubble a {
	color: #15a3a9;
	font-weight: 600;
}
p.bubble::before, p.bubble::after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
}
p.speech {

}

/* Jobbra fent */
p.speech::before {
left: 80px;
top: -31px;
border: 16px solid;
	border-color: transparent #ebf1f2 #ebf1f2 transparent;
}
/* p.speech::after {
left: 86px;
top: -22px;
	border: 11px solid;
	border-color: transparent;
} */

@media all and (max-width: 900px) {
	p.bubble {
		font-size: 100%;
	}
}

@media all and (max-width: 620px) {
	p.bubble {
		font-size: 90%;
		line-height: 1.4em;
		padding: 6px 14px;
		top: 290px;
		right: 170px;
	}
	p.speech::before {
		left: 63px;
		top: -23px;
		border: 12px solid;
		border-color: transparent #ebf1f2 #ebf1f2 transparent;
	}
}
@media all and (max-width: 550px) {
	p.bubble.engedelyezettkepzesek {
		top: 480px;
	}
	p.bubble:not(.engedelyezettkepzesek) {
		top: 380px;
	}
}
@media all and (max-width: 480px) {
	p.bubble.engedelyezettkepzesek {
		/* top: 505px; */
	}
}

@media all and (max-width: 365px) {
	p.bubble {
		/* top: 405px;
		right: 56%; */
	}
}

@media all and (max-width: 340px) {
	p.bubble:not(.engedelyezettkepzesek) {
		top: 350px;
		/* line-height: 20px; */
	}
	p.speech::before {
		left: 63px;
		top: -23px;
		border: 12px solid;
		border-color: transparent #ebf1f2 #ebf1f2 transparent;
	}
}
@media all and (max-width: 320px) {
	p.bubble {
		/* top: 355px; */
	}
}

@media all and (max-width: 300px) {
	p.bubble {
		/* top: 350px; */
	}
}