@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600&display=swap&subset=latin-ext');

:root {
	--white:	#ffffff;
	--grey:		#cfcfcf;
	--gray:		#cfcfcf;
	--black:	#333333;
	--purple:	#a54c9d;
	--purpleish:	#ec9dc4;
	--pink:		#eb088d;
	--pinkish:	#dc4a5f;
	--red:		#ec1f27;
	--redish:	#bf2328;
	--orange:	#f58329;
	--orangeish:	#f19d51;
	--yellow:	#fad312;
	--yellowish:	#fce674;
	--green:	#a3c939;
	--greenish:	#81bf64;
	--blue:		#26ace2;
	--blueish:	#5b88c6;
	--turquoise:	#43b2c4;
	--brown:	#a85325;
}

* {
	border: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-size-adjust: 100%;
}

a {
	color:var(--orange);
	text-decoration:none;
	word-wrap: break-word;
}

body {
	padding-top: 12px;
	border: none;
	font-size: 25px;
	font-family: Oswald, arial, sans-serif;
	font-weight: 300;
	background: var(--grey);
	background-size: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

ul {
	list-style: none;
}

h1 {
	font-size: 48px;
	font-weight: 500;
	line-height: 56px;
	margin: 24px 0px;
	color: var(--black);
}

h2 {
	font-size: 117%;
	color: var(--black);
	margin-bottom: 12px;
}

h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	margin-bottom: 25px;
}

strong {
	font-weight: 700;
}

p {
	font-size: 18px;
	line-height: 24px;
	font-weight: 300;
	margin-bottom: 12px;
	color: var(--black);
}

.lom_wrap {
	padding: 60px;
	padding-top: 20px;
	padding-bottom: 40px;
	font-size: 18px;
}

.lom_main_content {
	text-align: center;
	font-size: 16px;
	max-width: 580px;
	margin:auto;
	padding-bottom: 40px;
}

.wonky {
	clip-path: polygon(0% 11%, 100% 0%, 90% 100%, 7% 100%);
	shape-outside: polygon(0% 11%, 100% 0%, 90% 100%, 7% 100%);
}

.wonky-box {
	clip-path: polygon(0% 4%, 100% 0%, 95% 100%, 4% 100%);
	shape-outside: polygon(0% 4%, 100% 0%, 95% 100%, 4% 100%);
}

.goofy {
	clip-path: polygon(0% 0%, 100% 11%, 93% 100%, 10% 100%);
	shape-outside: polygon(0% 0%, 100% 11%, 93% 100%, 10% 100%);
}

.freaky {
	clip-path: polygon(10% 10%, 90% 10%, 100% 100%, 2% 100%);
	shape-outside: polygon(0% 0%, 100% 11%, 93% 100%, 10% 100%);
}

/* index styles */

.lom_headerlogo {
	width: 420px;
	position: relative;
	left: -24px;
	margin-bottom: -19px;
}

.lom_welcome {
	padding: 60px;
	padding-bottom: 100px;
	font-size: 18px;
}

.lom_welcome p {
	margin-bottom: 25px;
}

.lom_begin {
	float: right;
	font-size: 25px;
	vertical-align: center;
}

.lom_begin > img {
	padding-left: 10px;
	position: relative;
	top: 16px;
	height: 47px;
	display: inline-block;
}

/* thesen styles */

ul.lom_points {
	margin-top: 24px;
	padding-left: 56px;
}

.lom_points li {
	float: left;
	padding-right: 5px;
	position: relative;
	height: 20px;
	width: 20px;
}

.lom_points li.lom_active_point {
	clip-path: none;
}

.lom_points li.lom_previous_point {
}

.lom_points li a {
	display: block;
	transform: rotate(45deg);
	text-decoration: none;
	width: 10px;
	height: 10px;
}

.lom_points li.lom_previous_point a {
	background-color: var(--black);
}

.lom_points li.lom_active_point a {
	background-color: var(--black);
}

.lom_points li span {
	background-color: var(--white);
	display: block;
	transform: rotate(45deg);
	text-decoration: none;
	width: 10px;
	height: 10px;
}

.lom_thesen h1 {
	clear: both;
	text-align: center;
	color: var(--white);
	font-weight: 500;
	font-size: 24px;
}

.lom_lesomat {
	clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
	shape-outside: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
	width:800px;
	/* height:560px; */
	background:var(--orange);
	display:block;
	margin:auto;
	margin-top: 60px;
}

.lom_thesen {
	margin-top: 12px;
}

#fav-button {
	width: 48px;
	position: relative;
	float: right;
	right: 20px;
	top: -24px;
	z-index: 10;
}

.thesen-box {
	background-color: var(--white);
	padding-top: 24px;
	padding-bottom: 24px;
	padding-left: 4%;
	padding-right: 4%;
	margin: auto;
	display: block;
	width: 600px;
	height: 192px;
	clip-path: polygon(50% 5%, 100% 0, 97% 100%, 50% 95%, 3% 100%, 0 0);
	shape-outside: polygon(50% 5%, 100% 0, 97% 100%, 50% 95%, 3% 100%, 0 0);
}

.lom_thesen p {
	display: table-cell;
	vertical-align: middle;
	height: 144px;
	width: 545px;
	font-size: 32px;
	line-height: 48px;
	font-weight: 300;
	text-align: center;
	color: var(--black);
}

.lom_thesen .lom_skipper {
	display: block;
	font-size: 24px;
	color: var(--black);
	text-align: center;
	clear: both;
	margin: auto;
}

.lom_skipper:hover {
	color: var(--white);
}

.lom_skipper img {
	height: 24px;
	padding-top: 8px;
}

.lom_entscheidung {
	font-size: 0px;
	overflow: hidden;
	padding-bottom: 20px;
	clear: both;
	display: block;
	width: 360px;
	margin: auto;
	margin-top: -12px;
	margin-bottom: -24px;
}

.lom_entscheidung img {
	width: 100px;
	margin: 10px;
}

.lom_entscheidung li {
	float: left;
	text-align: center;
}

.lom_entscheidung a {
	position: static;
}

.lom_entscheidung a:focus {
	text-decoration: none;
}

.lom_entscheidung a:hover {
	text-decoration: none;
}

html.no-touch .lom_entscheidung a:hover {
}

.lom_thesenanzahl {
	font-weight: 300;
}

/* gewicht styles */

.lom_auswertung {
	margin-top: 48px;
	font-size: 24px;
}

.lom_auswertung li {
	clear: both;
	padding-bottom: 24px;
	position: relative;
	left: -48px;
}

.lom_auswertung .lom_trigger {
	font-weight: 300;
}

.lom_langethese_tab:hover, .lom_langethese_tab:focus, .lom_trigger:hover {
	font-weight: 600;
}

.lom_auswertung .lom_trigger_active {
	font-weight: 600;
}

.lom_auswertung label {
	background-color: var(--white);
	padding-top: 12px;
	padding-bottom: 16px;
	padding-left: 4%;
	padding-right: 4%;
	margin: auto;
	display: block;
	clip-path: polygon(50% 5%, 100% 0, 97% 100%, 50% 95%, 3% 100%, 0 0);
	shape-outside: polygon(50% 5%, 100% 0, 97% 100%, 50% 95%, 3% 100%, 0 0);
	cursor: pointer;
	width: 440px;
}

span.lom_star {
	float: left;
}

.lom_star img {
	display: none;
	width: 56px;
	height: 56px;
}

.lom_trigger_active .lom_star img {
	display: block;
}

.lom_antworten_partei {
	position: absolute;
	right: -32px;
	top: -12px;
	display: block;
	font-size: 0 !important;
	height: 72px;
	width: 72px;
	display: block;
	padding: 0;
}

.lom_antworten_partei img {
	width: 72px;
}

.lom_skip {
	padding-top: 15px;
	position: relative;
	font-size: 32px;
}

.lom_previous {
	padding: 6px 0 0 43px;
	color: var(--white);
	display: inline-block;
	height: 48px;
	float: left;
}

.lom_next {
	color: var(--white);
	padding: 6px 43px 0 0;
	display: inline-block;
	height: 48px;
	background: url(../img/skip.svg) no-repeat top 2px right 0px;
	background-size: 48px auto;
	float: right;
}

.lom_skip a:hover {
	font-weight: 500
}

/* ergebnis styles */

.lom_ergebnis_list li {
  text-align: left;
	padding-bottom: 20px;
	position: relative;
}

.lom_ergebnis_list div.lom_ergebnis_balken:hover, .lom_ergebnis_list div.lom_ergebnis_balken.touch, .lom_ergebnis_list div.lom_ergebnis_balken:focus, .lom_ergebnis_list div.lom_ergebnis_balken.lom_on_modus {
	background-color: var(--grey);
}

.lom_ergebnis_list div.lom_ergebnis_balken {
	background-color: var(--grey);
	min-height: 32px;
	padding: 2px 0 0 12px;
	display: block;
	position: relative;
  left: 110px;
	font-weight: bold;
	font-size: 18px;
	cursor: pointer;
}

.lom_ergebnis_list .lom_ergebnis_prozent {
	text-align: right;
	background: url(../img/hinterlegung_uebereinstimmung_prozente.png) no-repeat 560px 0;
	width: 560px;
	bottom: 0px;
	min-height: 32px;
	padding: 3px 12px 0 0;
	right: 0px;
	display: inline;
	position: absolute;
	font-size: 16px;
	line-height: 22px;
	margin: 0 0 0 110px;
}

.lom_ergebnis_list h2.lom_ergebnis_partei {
	z-index: 1;
	position: relative;
  left: 24px;
	font-size: 18px;
	line-height: 24px;
	padding-top: 2px;
}

.lom_ergebnis_list h2.lom_ergebnis_partei span.lom_ergebnis_partei_span {
  color: var(--white);
	font-weight: 600;
	font-size: 18px;
	line-height: 24px;
	padding-right: 12px;
}

.lom_ergebnis_list div.lom_ergbox {
	overflow: hidden;
	position: relative;
	max-height: 0px;
	opacity: 0;
	transition: max-height 0.5s ease-out, opacity 0.4s ease-out;
}

.lom_ergebnis_list div.lom_ergbox.lom_shown {
	max-height: 560px;
	opacity: 1;
	transition: max-height 0.7s ease-in, opacity 0.5s ease-in-out 0.2s;
}

.lom_ergebnis_list .lom_info_box {
	overflow: visible;
	height: auto;
	padding: 20px;
	position: relative;
	margin-top: 22px;
	margin-bottom: 16px;
}

.lom_ergebnis_list img {
	float: left;
	margin-right: 20px;
	border: none;
}

h3.parteibox {
	font-size: 16px;
	color: var(--orange);
	line-height: 24px;
	margin-bottom: 3px;
}

.lom_ergebnis_list p {
	line-height: 22px;
	font-size: 18px;
	margin: 0 0 0 110px;
	min-height: 64px;
}

a.lom_more_info {
	font-size: 16px;
	color: var(--orange);
	padding-right: 20px;
	position: relative;
  display: block;
  margin-top: 8px;
}

.lom_close, .lom_close_two, .lom_close_info {
	cursor: pointer;
	background: url(../img/schliessen.png) no-repeat center center;
	background-size: 70% auto;
	height: 17px;
	width: 17px;
	padding: 0px;
	margin: 0;
	top: 14px;
	right: 14px;
	position: absolute;
	font-size: 0;
}

.lom_link_zu_kommentare {
	text-align: right;
	height: 54px;
	margin-bottom: 40px;
}

.lom_link_zu_kommentare a {
	color: var(--orange);
	float: right;
	padding-right: 45px;
	position: relative;
}

.lom_link_zu_kommentare span {
	margin-right: 20px;
	font-size: 20px;
}

.lom_link_zu_kommentare a:after {
    content: '';
    display: inline-block;
    background: url(../img/zum_teaser.png) no-repeat right center;
    background-size: 70% auto;
    width: 55px;
    height: 55px;
    position: absolute;
    top: 0;
    right: 5px;
}

.lom_clear {
    clear: both;
    font-size: 0px;
}

.lom_mbot {
  font-size: 16px;
  line-height: 24px;
  font-style: italic;
	margin-bottom: 45px;
  color: var(--black);
}

footer#imprint {
	text-align: center;
	padding: 20px;
	color: var(--black);
	font-size: 70%;
}