:root {
	--color-black: rgb(14,12,12);
	--color-blue: rgb(87,175,198);
	--color-bluewhite: #ebf6f9;
	--color-darkblue: rgb(16,115,130);
	--color-darkestblue: rgb(13,57,64);
	--color-green: rgb(126,194,71);
	--color-grey: rgb(144,144,144);
	--color-lightblue: rgb(170, 227, 245);
	--color-orange: rgb(242,145,48);
	--color-red: rgb(239,59,60);
	--color-yellow: rgb(234,216,48);

	--color-dialog-bg: rgba(16,115,130,0.95);
}


@keyframes pulse {
	0%, 100% { opacity: 1;	}
	50% { opacity: 0;	}
}

/* Sizing */
#llg * {
	box-sizing: border-box;
	font-family: Arial, sans-serif;
	font-size: 1em;
	letter-spacing: 0;
	line-height: 1em;
}
/* Scrollbars */
#llg * {
	scrollbar-width: auto;
	scrollbar-color: rgba(255,255,255,0.75) rgba(0,0,0,0.2);
}
#llg *::-webkit-scrollbar {
	width: 2%;
}
#llg *::-webkit-scrollbar-track {
	background: rgba(0,0,0,0.2);
}
#llg *::-webkit-scrollbar-thumb {
	background-color: rgba(255,255,255,0.75);
	border-radius: 1%;
	border: none;
}



.headerelementtext {
	bottom: 0;
	top: auto;
	padding-bottom: 1em;
}


@media (min-width: 931px){
	#llg #composition.faded {
		filter: blur(1.5px) grayscale(100%);
	}
}
@media (max-width: 930px){
	.mobile42 {
		display: none !important;
	}
	.bg_headerbild {
		background-image: none !important;
	}
	.bg_headerbild img {
		display: none !important;
	}
	.headerelementtext {
		padding-top: 2em !important;
	}
	
	#llg * {
		scrollbar-width: thin;
	}
	select.jumpstartllg {
		width: 100%;
	}
	#llg {
		padding-top: 84% !important;
	}
	#llg #viewport {
		margin: calc((84% - (100% / 16 * 9)) / 2) 0 !important;
	}
	#llg:not(.incompatible) #fullscreen-info {
		font-size: 1.5em;
		z-index:1002;
	}
	#llg.incompatible #fullscreen-info {
		font-size: 0.75em;
		left: 10%;
		width: 80%;
		z-index:1002;
	}
}
@media (max-width: 480px) {
	#llg:not(.incompatible) #fullscreen-info {
		font-size: 2em !important;
	}
	#llg:not(.incompatible) #fullscreen-info p {
		line-height: 120% !important;
	}
	#llg.incompatible #fullscreen-info {
		font-size: 0.6em;
		left: 3%;
		width: 94%;
	}
	#llg.incompatible #fullscreen-info p {
		line-height: 120% !important;
	}
}

@media (max-width: 1400px) and (min-aspect-ratio: 16/9) {
	#llg {
		background: var(--color-darkestblue) !important;
		height: calc(90vh + (2 * 10vh)) !important;
		padding: 0 !important;
	}
	#llg #viewport {
		height: 90vh !important;
		left: 50% !important;
		margin: 10vh 0 !important;
		width: calc(90vh / 9 * 16) !important;
		padding: 0 !important;
		top: 0 !important;
		transform: translateX(-50%) !important;
	}
}
@media (max-width: 930px) and (min-aspect-ratio: 16/9) {
	#llg {
		height: calc(94vh + (2 * 10vh)) !important;
	}
	#llg #viewport {
		height: 94vh !important;
		width: calc(94vh / 9 * 16) !important;
	}
}

@media (min-aspect-ratio: 16/9) {

	#llg.fullscreen::after,
	#llg.fullscreen::before {
		display: none !important;
	}
	#llg.fullscreen #viewport {
		height: 100vh !important;
		left: 50% !important;
		margin: 0 !important;
		width: calc(100vh / 9 * 16) !important;
		padding: 0 !important;
		top: 0 !important;
		transform: translateX(-50%) !important;
	}
	
}



#llg {
	background: var(--color-darkestblue);
	border: none;
	display: block;
	font-family: Arial, sans-serif;
	font-size: 20px;
	height: 0;
	line-height: 1em;
	margin: 0;
	padding: 75% 0 0 0;
	position: relative;
	overflow: hidden;
	width: 100%;
}
#llg #viewport {
	background: #ebf6f9;
	display: block;
	height: 0;
	left: 0;
	margin: calc((75% - (100% / 16 * 9))/2) 0;
	padding: calc(100% / 16 * 9) 0 0 0;
	position: absolute;
	top: 0;
	width: 100%;
}
#llg #viewport::before {
	content: '';
	background: url(img/ui_border_darkestblue.svg) center top/102% auto no-repeat transparent;
	height: 4%;
	position: absolute;
	width: 100%;
	left: 0;
	top: -2.5%;
	z-index: 1001;
	display: block;
	transform: scaleY(-1);
}
#llg #viewport::after {
	content: '';
	background: url(img/ui_border_darkestblue.svg) center top/102% auto no-repeat transparent;
	height: 4%;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -2.5%;
	z-index: 1001;
	display: block;
	transform: scaleX(-1);
}

#llg.fullscreen {
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	position: absolute !important;
	width: 100% !important;
	z-index: 999;
}
#llg.fullscreen::after,
#llg.fullscreen::before {
	background-image: url(img/ui_border_black.svg);
}
#llg.fullscreen #viewport {
	height: 0;
	margin: 0 !important;
	padding-top: calc(100% / 16 * 9);
	top: 50%;
	transform: translateY(-50%);
}

#llg h1 {
	font-size: 3em;
	font-weight: bold;
}
#llg h2 {
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1em;
}
#llg h3 {
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1em;
}
#llg h4 {
	font-size: 1em;
	font-style: italic;
	font-weight: normal;
	line-height: 1em;
}
#llg h1,
#llg h2,
#llg h3,
#llg h4 {
	letter-spacing: 0;
	margin: 1em 0;
}
#llg p {
	line-height:140%;
}


#llg button.icon {
	background: url() center center/94% auto no-repeat transparent;
	border: none;
	cursor: pointer	;
	display: inline-block;
	height: 2.6em;
	margin: 0 0.5em;
	overflow: hidden;
	text-align: center;
	text-indent: -1000em;
	padding: 0;
	position: relative;
	width: 2.6em;
	transition: all 0.1s;
}
#llg button.icon:not([disabled]):hover {
	background-size: 100% auto;
	transition: all 0.1s;
}
#llg button.icon:not([disabled]):active {
	background-size: 96% auto;
	transition: all 0.1s;
}
#llg button.icon:disabled {
	filter: grayscale(100%);
	opacity: 0.8;
}
#llg button.icon:disabled:hover {
}
#llg button.icon.playpause { background-image: url(img/ui_btn_play.svg);	}
#llg .playing button.icon.playpause { background-image: url(img/ui_btn_stop.svg);	}
#llg button.icon.prelisten { background-image: url(img/ui_btn_play.svg);	}
#llg .playing button.icon.prelisten { background-image: url(img/ui_btn_stop.svg);	}
#llg button.icon.prev { background-image: url(img/ui_btn_prev.svg);	}
#llg button.icon.next { background-image: url(img/ui_btn_next.svg);	}
#llg button.icon.randomize { background-image: url(img/ui_btn_randomize.svg);	}
#llg button.icon.clear { background-image: url(img/ui_btn_clear.svg);	}
#llg button.icon.share { background-image: url(img/ui_btn_share.svg);	}
#llg button.icon.send { background-image: url(img/ui_btn_send.svg);	}
#llg button.icon.download { background-image: url(img/ui_btn_download.svg);	}
#llg button.icon.download.waiting { }
#llg button.icon.fullscreen {
	background-image: url(img/ui_btn_fullscreen.svg);
	position: absolute;
	right: 10%;
}
#llg.fullscreen button.icon.fullscreen {
	background-image: url(img/ui_btn_fullscreen_off.svg);
}
#llg button.icon.settings {
	background-image: url(img/ui_btn_settings.svg);
	position: absolute;
	right: 3%;
}
#llg button.icon.close {
	background-image: url(img/ui_btn_close.svg);
	position: absolute;
	right: 3%;
}
#llg button.icon.info {
	background-image: url(img/ui_btn_info.svg);
	position: absolute;
	left: 3%;
}

#llg button.box {
	background: url(img/ui_box_orange.svg) center center/contain no-repeat transparent;
	border: none;
	cursor: pointer;
	color: #fff;
	font-size: 1em;
	padding: 2em;
	position: relative;
	transition: all 0.1s;
}
#llg button.box:hover {
	font-size: 1.05em;
	padding: 0.3em 2em;
}

#llg #curtain-left {
	background: var(--color-blue);
	cursor: pointer;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 50%;
	z-index: 999;
	transition: all 1s ease-in;
}
#llg #curtain-right {
	background: var(--color-blue);
	cursor: pointer;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	z-index: 999;
}
#llg #curtain-left.drawn,
#llg #curtain-right.drawn {
	width: 0%;
	transition: all 0.8s ease-in 0.5s;
}
#llg #curtain-couple {
	background: url(img/ui_couple.svg) center bottom/contain no-repeat transparent;
	cursor: pointer;
	left: 40%;
	margin-top: -10%;
	padding-top: 20%;
	position: absolute;
	top: 55%;
	width: 20%;
	z-index: 1000;
}
#llg #curtain-couple.logo {
	left: 3%;
	margin-top: 0;
	padding-top: 10%;
	top: -0.2%;
	width: 10%;
	transition: all 0.8s ease 0.5s;
}
#llg h1 {
	background: url() center center/contain no-repeat transparent;
	cursor: pointer;
	display: block;
	height: 14%;
	left: 20%;
	margin: 0;
	padding: 0;
	position: absolute;
	text-indent: -1000em;
	top: 25%;
	width: 60%;
	z-index: 1000;
}
#llg h1.nav {
	cursor: auto;
	height: 8%;
	top: 3%;
	transition: all 0.8s 0.5s ease;
	z-index: 199;
}
#llg:lang(cn) h1 { background-image: url(img/ui_text_cn_lovesonggenerator.png); }
#llg:lang(de) h1 { background-image: url(img/ui_text_de_lovesonggenerator.png); }
#llg:lang(en) h1 { background-image: url(img/ui_text_en_lovesonggenerator.png); }
#llg:lang(es) h1 { background-image: url(img/ui_text_es_lovesonggenerator.png); }
#llg:lang(fr) h1 { background-image: url(img/ui_text_fr_lovesonggenerator.png); }
#llg:lang(jp) h1 { background-image: url(img/ui_text_jp_lovesonggenerator.png); }
#llg:lang(ru) h1 { background-image: url(img/ui_text_ru_lovesonggenerator.png); }
#fullscreen-info {
    background: rgba(255,255,255,0.15);
    border: 0.1em solid #fff;
    border-radius: 1em;
    color: #fff;
	cursor: pointer;
    left: calc((100% - 32em) / 2);
    line-height: 1.3;
	opacity: 1;
    padding: 1em 1em 1em 6em;
    position: absolute;
    text-align: left;
    top: 57%;
    width: 32em;
    z-index: 1000;
	transition: all 0.8s ease;
}
#fullscreen-info.nobutton {
	padding-left: 1em;
}
#fullscreen-info p {
	margin: 0;
}
#fullscreen-info p:nth-child(3) {
	font-size: 0.8em;
	font-style: italic;
	margin-top: 0.5em;
}
#fullscreen-info.hidden{
	display: none;
	opacity: 0;
	top: 100%;
	transition: all 0.8s ease;
}
#fullscreen-info button {
	left: 1em;
	margin: 0;
	top: 1em;
}

#llg.incompatible * {
	cursor: default !important;
}

#llg #nav-header,
#llg #nav-footer,
#llg .page-header{
	background: url() center bottom/102% auto no-repeat transparent;
	height: 14%;
	left: 0;
	padding: 1.5%;
	position: absolute;
	text-align: center;
	width: 100%;
}
#llg #nav-header,
#llg .page-header {
	background: url(img/ui_header.svg) center bottom/102% auto no-repeat transparent;
	top: 0;
}
#llg #nav-footer {
	background: url(img/ui_footer.svg) center top/102% auto no-repeat transparent;
	bottom: 0;
}
#llg #nav-footer .break {
	display: inline-block;
	margin: 0 0.5em;
	padding: 0;
	width: 3em;
}


#llg .page {
	position: absolute;
	height: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	top: 0;
	width: 100%;
}
#llg .page-header {
	position: relative;
}
#llg .page h2 {
	display: inline-block;
	margin: 0;
	padding: 1.2%;
	text-align: center;
}


#llg .page .column1 {
	float: left;
	height: 83%;
	padding: 2%;
	overflow: auto;
	width: 100%;
}
#llg .page .column2 {
	float: left;
	height: 83%;
	margin: 2% 2% 2% 0;
	overflow: auto;
	width: 49%;
}
#llg .page .column2:last-child {
	margin-right:0;
}
#llg .page .column3 {
	float: left;
	height: 83%;
	margin: 2% 2% 2% 0;
	overflow: auto;
	width: calc((100% - 8%) / 3);
}
#llg .page .column3:first-child {
	margin-left: 2%;
}

#llg #composition {
	transition: filter 0.5s;
	z-index: 100;
}
#llg #composition #sheet::after {
	content: "";
	clear: both;
	display: table;
}
#llg #composition #sheet {
	top: 17%;
	position: absolute;
	text-align: center;
	width: 100%;
}
#llg div.slot {
	background: none;
	cursor: pointer;
	border: none;
	display: inline-block;
	height: 0;
	margin-bottom: 3%;
	padding-top: calc((20% / 4) * 3);
	position: relative;
	width: 20%;
}
#llg #composition #sheet div.slot:after {
	background: url(img/ui_slot_separator.png) center center no-repeat transparent;
	background-size: cover;
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	right: -1%;
	width: calc(100% / 400 * 7);
	top: 0;
}
#llg #composition #sheet div.slot:nth-child(1),
#llg #composition #sheet div.slot:nth-child(5){
	margin-left: 10%;
}
#llg #composition #sheet div.slot:nth-child(1):before,
#llg #composition #sheet div.slot:nth-child(5):before {
	background: url(img/ui_slot_start.png) center center no-repeat transparent;
	background-size: cover;
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	left: calc(100% / 400 * 168 * -1);
	width: calc(100% / 400 * 168);
	top: 0;
}
#llg #composition #sheet div.slot:nth-child(8):after {
	background: url(img/ui_slot_end.png) center center no-repeat transparent;
	background-size: cover;
	width: calc(100% / 400 * 30);
}

#llg div.slot > div {
	position: absolute;
	height: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	top: 0;
	width: 100%;
}
#llg div.slot div.image {
	background: url(img/ui_slot_verse_none.png) left center/200% no-repeat transparent;
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 1;
}
#llg div.slot div.title {
	background: url(img/ui_box_blue.svg) left center/cover no-repeat transparent;
	position: absolute;
	bottom: -4%;
	font-size: 1.2em;
	font-weight: normal;
	height: 0;
	left: 4%;
	margin: 0;
	padding: calc(92% / 7.84) 0 0 0;
	width: 92%;
	z-index: 10;
}
#llg div.slot:hover div.title {
	background-image: url(img/ui_box_orange.svg) !important;
}

#llg #composition #sheet div.slot:nth-child(4) div.title,
#llg #composition #sheet div.slot:nth-child(8) div.title {
	background-image: url(img/ui_box_darkblue.svg);
	color: #fff;
}

#llg div.slot div.title .text {
	height: 100%;
	left: 0;
	line-height: 1em;
	padding: 0.14em;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 12;
}
#llg div.slot div.title .progress {
	background: url(img/ui_box_red.svg) left center/cover no-repeat transparent;
	display: none;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width:100%;
	z-index: 11;
}
#llg div.slot.singing div.image {
	background-position: 100% center;
}
#llg div.slot.playing div.title {
	background: url(img/ui_box_darkblue.svg) left center/cover no-repeat transparent;
	color: #fff;
}
#llg div.slot.playing div.title .progress {
	background: url(img/ui_box_green.svg) left center/cover no-repeat transparent;
	display: block;
	width: 0;
}
#llg div.slot.loadingImg div.image {
	background-position: 100% center;
}
#llg div.slot.loading {
	filter: grayscale(100%);
}

#llg div.slot.prelisten div.image {
	background-color: var(--color-bluewhite);
	border-radius: 50%;
	left: 12.5%;
	width: 75%;
}
#llg div.slot.prelisten div.title {
	left: 0;
}
#llg div.slot.prelisten button.prelisten {
	bottom: -12%;
	position: absolute;
	right: -12%;
	z-index: 20;
}



#llg #verse-list {
	background: var(--color-dialog-bg);
	color: #fff;
	height: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 200;
}
#llg #verse-list .column3 {
	height: 80%;
	margin-top: 1em;
	padding: 0;
}
#llg #verse-list #select-category {
	margin-left: 2%;
}

#llg #verse-list li {
	background: url(img/ui_arrow_right_white.svg) right center/2.8vw no-repeat transparent;
	cursor: pointer;
	display: block;
	font-size: 1.25em;
	margin: 0.75em 0.5em 0.75em 0;
	padding: 0 0.4em;
}
#llg #verse-list li span {
	display: inline-block;
	line-height: 150%;
}
#llg #verse-list li:hover {
	background-image: url(img/ui_arrow_right_blue.svg);
	color: var(--color-blue);
}
#llg #verse-list li:hover span {
}
#llg #verse-list li.active {
	color: var(--color-blue);
	background-image: url(img/ui_arrow_right_blue.svg);
}
#llg #verse-list li.active span {
}
#llg #verse-list li.selected {
	color: var(--color-orange);
	background-image: url(img/ui_arrow_right_orange.svg);
}
#llg #verse-list li.selected span {
	background: url(img/ui_line-2_orange.png) center bottom/15vw no-repeat transparent;
}

#llg #verse-list ul.isBig {
	text-align: center;
	height: 70%;
	margin-top: 3em;
	width: 100%;
}
#llg #verse-list ul.isBig li {
	background: url() center top/contain no-repeat transparent;
	cursor: pointer;
	font-size: 1.1em;
	display: inline-block;
	margin: 0 4% 2.5% 4%;
	padding-top: calc((20% / 4) * 3);
	position: relative;
	width: 20%;
}
#llg #verse-list ul.isBig li.europe {	background-image: url(img/ui_category_europe.png);	}
#llg #verse-list ul.isBig li.german {	background-image: url(img/ui_category_german.png);	}
#llg #verse-list ul.isBig li.other  {	background-image: url(img/ui_category_other.png);	}
#llg #verse-list ul.isBig li.swiss  {	background-image: url(img/ui_category_swiss.png);	}
#llg #verse-list ul.isBig li.international  {	background-image: url(img/ui_category_world.png);	}

#llg #verse-list ul.isBig li span {
	background: url(img/ui_box_blue.svg) center center/contain no-repeat transparent;
	bottom: -11%;
	cursor: pointer;
	left: 0;
	margin: 0;
	padding: 1.7%;
	position: absolute;
	width: 100%;
}
#llg #verse-list ul.isBig li:hover {
	background-color: transparent;
}
#llg #verse-list ul.isBig li:hover span {
	background-image: url(img/ui_box_green.svg);
	color: #fff;
}

#llg #verse-info {
	background: radial-gradient(circle at 50% 18%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 18%);
	text-align: center;
}
#llg #verse-info p {
	font-size: 1em;
	line-height: 1.24em;
	margin: 1em 0;
	text-align: left;
}
#llg #verse-info .slot {
	padding-top: calc((66% / 4) * 3);
	width: 66%;
}
#llg #verse-info button.box {
	padding: 0.5em 3em;
}
#llg #verse-info button.box:disabled {
	background-image: url(img/ui_box_grey.svg);
}

#llg #chorus-select {
	text-align: center;
	height: 84%;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100%;
}
#llg #chorus-select .slot {
	margin: 3% 2%;
}





#llg #settings {
	background: var(--color-dialog-bg);
	color: #fff;
	height: 100%;
	left: 0;
	margin: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 200;
}
#llg #settings .characters {
	background: url(img/ui_characters_settings.svg) center center/contain no-repeat transparent;
	bottom: 4%;
	height: 22%;
	position: absolute;
	right: 0;
	width: 22%;
}
#llg #settings .column2 {
	font-size: 1.2em;
	padding: 1.5em 4% 0 4%;
}
#llg #settings #language-selector {
	margin-bottom: 2em;
}
#llg #settings label.radio {
	margin-left: 5%;
}
#llg #settings .sfx {
	overflow: hidden;
	text-indent: -1000em;
	display: inline-block;
}
#llg #settings .sfx.icon {
	background: url(img/ui_sound-on.png) left center/contain no-repeat transparent;
	cursor: pointer;
	height: 9%;
	margin-left: 5%;
	margin-right: 1%;
	width: 9%;
	transition: all 0.1s;
}
#llg #settings .sfx.icon:hover {
	transform: scale(1.08);
}
#llg #settings .sfx.icon.mute {
	background-image: url(img/ui_sound-off.png);
}
#llg #settings .sfx.level {
	background: #fff;
	border: 1px solid var(--color-black);
	border-radius: 1%;
	cursor: pointer;
	height: 9%;
	margin-top: 1%;
	width: 1.75%;
	transition: all 0.1s;
}
#llg #settings .sfx.level:hover {
	transform: scale(1.1);
}
#llg #settings .sfx.level.mute {
	background: rgba(255,255,255,0.5);
}
#llg #settings .sfx.level.checked {
	background: rgba(126,194,72,1);
}
#llg #settings .sfx.level.checked.mute {
	background: rgba(126,194,72,0.5);
}
#llg #settings .sfx.level.level1 { height: 4%; margin-bottom: 2.5%; }
#llg #settings .sfx.level.level2 { height: 5.25%; margin-bottom: 1.875%; }
#llg #settings .sfx.level.level3 { height: 6.5%; margin-bottom: 1.25%; }
#llg #settings .sfx.level.level4 { height: 7.75%; margin-bottom: 0.625%; }
#llg #settings .sfx.level.level5 { height: 9%; margin-bottom: 0; }
#llg #settings label.disabled {
	opacity: 0.7;
}
#llg #settings p {
    font-size: 0.8em;
    font-style: italic;
    margin: calc(0.5em / 4 * 5) calc(1.5em / 4 * 5);
}

#llg #share {
	background: var(--color-dialog-bg);
	color: #fff;
	font-size: 1.2em;
	height: 100%;
	left: 0;
	margin: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 200;
}
#llg #share .characters {
	background: url(img/ui_characters_share.svg) center center/contain no-repeat transparent;
	bottom: 2%;
	height: 40%;
	position: absolute;
	right: 0;
	width: 40%;
}
#llg #share .column1 {
	margin-left: calc((100% - 34em) /2);
	padding-top: 4em;
	position: relative;
	text-align: center;
	width: 34em;
	z-index: 999;
}
#llg #share input.url {
    border-radius: 0.5em 0 0 0.5em;
    display: inline-block;
	font-size: 0.9em;
	margin: 0 0 1.5em 0;
	text-align: center;
	width: 82%;
}
#llg #share input.copy {
	background: var(--color-blue);
	border-color: var(--color-blue);
	border-radius: 0 0.5em 0.5em 0;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 0.9em;
	margin: 0 0 1.5em 0;
	text-align: center;
	width: 18%;
}
#llg #share input.copy:hover {
	background: var(--color-orange);
	border-color: var(--color-orange);
}
#llg #share .url::selection {
	background: var(--color-blue);
	color: #fff;
	transition: all 0.3s ease;
}
#llg #share .copyhint {
	display: block;
	font-size: 0.75em;
	margin-top: -1em;
	position: absolute;
	width: 96%;
}
#llg #share a.icon {
	background: url() no-repeat center center/1.2em #fff;
	border-radius: 50%;
	cursor: pointer;
	display: inline-block;
	height: 2em;
	margin: 0.2em 0.5em;
	overflow: hidden;
	text-indent: -1000em;
	width: 2em;
	transition: all 0.1s;
}
#llg #share a.icon:hover {
	transform: scale(1.1);
	transition: all 0.1s;
}
#llg #share a.icon.fb { background-image: url(img/ui_social_facebook.svg); }
#llg #share a.icon.gp { background-image: url(img/ui_social_google-plus.svg); }
#llg #share a.icon.ig { background-image: url(img/ui_social_instagram.svg); }
#llg #share a.icon.li { background-image: url(img/ui_social_linkedin.svg); }
#llg #share a.icon.pi { background-image: url(img/ui_social_pinterest.svg); }
#llg #share a.icon.tg { background-image: url(img/ui_social_telegram.svg); }
#llg #share a.icon.tw { background-image: url(img/ui_social_twitter.svg); }
#llg #share a.icon.wa { background-image: url(img/ui_social_whatsapp.svg); }
#llg #share a.icon.xi { background-image: url(img/ui_social_xing.svg); }
#llg #share a.icon.mail { background-image: url(img/ui_social_mail.svg); }
#llg #share .attribution {
	font-size: 0.5em;
	font-style: italic;
}


#llg #send {
	background: var(--color-dialog-bg);
	color: #fff;
	height: 100%;
	left: 0;
	margin: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 200;
}
#llg #send .characters {
	background: url(img/ui_characters_send.svg) center center/contain no-repeat transparent;
	bottom: -1.2%;
	height: 27%;
	position: absolute;
	left: 0;
	width: 31%;
}
#llg #send .column2:first-child {
	padding-left: 4%;
	padding-top: 1.5em;
}	
#llg #send .column2:last-child {
	padding-right: 4%;
	padding-top: 1.5em;
}	
#llg #send .column1 {
	margin-left: calc((100% - 34em) /2);
	text-align: left;
	width: 34em;
}
#llg input,
#llg textarea,
#llg span.captcha {
    background: #fff;
    border: 2px solid #fff;
    border-radius: 0.5em;
    color: #363636;
    display: block;
	height: 2em;
	margin: 0 0 1.5em 0;
	max-width: 34em;
    padding: 0 1em;
	vertical-align: top;
	width: 100%;
}
#llg textarea {
	height: 7em;
	padding: 0.5em 1em;
}
#llg #send input.small {
	display: inline-block;
	width: calc(100% - 8.5em);
}
#llg #send input:disabled,
#llg #send textarea:disabled {
	border-color: #aaa;
	background: #ddd;
}

#llg #send input:invalid,
#llg #send input.error,
#llg #send textarea.error {
    background: #ffeeee;
	border-color: var(--color-red);
}
#llg #send label {
    color: #fff;
    display: block;
	margin: 0 0 0.5em 0;
	opacity: 0.85;
    padding: 0 0 0 0.5em;
}
#llg #send label.error {
}
#llg #send input[type="submit"] {
	background: var(--color-blue);
	border-color: var(--color-blue);
	cursor: pointer;
	color: #fff;
}
#llg #send input[type="submit"]:hover {
	background: var(--color-orange);
	border-color: var(--color-orange);
}
#llg #send span.captcha {
	background: url(/seiten/rechen_captcha_liebesliedgenerator.php) no-repeat center center/100% #fff;
	display: inline-block;
	height: 2em;
	margin-right: 0.5em;
	vertical-align: top;
	width: 8em;
}
#llg #send .info {
	background: rgba(255,255,255,0.2);
	border: 2px solid #fff;
	border-radius: 0.5em;
	height: 4em;
	margin: 0 0 2em 0;
	max-width: 34em;
	padding: 0.5em 1em;
}
#llg #send .info.empty {
	opacity: 0;
}
#llg #send .info.error {
    background: var(--color-red);
}
#llg #send .info.success {
    height: auto;
}


#llg #info {
	background: var(--color-dialog-bg);
	color: #fff;
	height: 100%;
	left: 0;
	margin: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 200;
}
#llg #info .column1 {
	height: 78%;
	line-height: 1.3;
	margin: 2% 0;
	padding: 0 calc((100% - 34em) /2);
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 999;
}
#llg #info .characters {
	background: url(img/ui_characters_info.svg) center center/contain no-repeat transparent;
	bottom: 10%;
	height: 30%;
	position: absolute;
	right: 8%;
	width: 15%;
}


#llg label.radio {
	background: url(img/ui_checkbox_white.png) left center/1em no-repeat transparent;
	cursor: pointer;
	display: block;
	margin-bottom: 0.75em;
	padding-left: 1.5em;
	position: relative;
}
#llg label.radio.checked {
	background-image: url(img/ui_checkbox_green.png);
}
#llg label.radio input {
	cursor: pointer;
	height: 0;
	opacity: 0;
	position: absolute;
	width: 0;
}


.waiting {
}
.waiting div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: waiting 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.waiting div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes waiting {
  0% {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 90%;
    height: 90%;
    opacity: 0;
  }
}


/* TRANSITIONS
 * ============================================ */

#llg .page-inout-enter-active,
#llg .page-inout-enter-active .page-header,
#llg .page-inout-enter-active .characters,
#llg .page-inout-enter-active .column1,
#llg .page-inout-enter-active .column2,
#llg .page-inout-enter-active .column3,
#llg .page-inout-enter-active ul.isBig {
  transition: all .4s ease;
}
#llg .page-inout-leave-active,
#llg .page-inout-leave-active .page-header,
#llg .page-inout-leave-active .characters,
#llg .page-inout-leave-active .column1,
#llg .page-inout-leave-active .column2,
#llg .page-inout-leave-active .column3,
#llg .page-inout-leave-active ul.isBig {
  transition: all .4s ease-in;
}
#llg .page-inout-enter,
#llg .page-inout-leave-to {
  opacity: 0;
}
#llg .page-inout-enter .page-header,
#llg .page-inout-leave-to .page-header {
  transform: translateY(-100%);
}
#llg .page-inout-enter .characters,
#llg .page-inout-enter .column1,
#llg .page-inout-enter .column2,
#llg .page-inout-enter .column3,
#llg .page-inout-enter ul.isBig,
#llg .page-inout-leave-to .characters,
#llg .page-inout-leave-to .column1,
#llg .page-inout-leave-to .column2,
#llg .page-inout-leave-to .column3,
#llg .page-inout-leave-to ul.isBig {
  transform: translateY(50%);
}


#llg .popin-fadeout-enter-active {
  transition: all .2s ease;
}
#llg .popin-fadeout-leave-active {
  transition: all 4s ease;
}
#llg .popin-fadeout-enter,
#llg .popin-fadeout-leave-to {
  opacity: 0;
}






/* WEBSITE ELEMENTS
 * ============================================ */

#section1 {
	background: var(--color-darkestblue) !important;
	padding: 2em 0 1em 0;
}
@media (max-width: 770px) {
	#section1 {
		padding: 1em 0;
	}
}
#section1.de [lang="en"] { display: none; }
#section1.de [lang="de"] { display: auto; }

#section1:not(.de) [lang="de"] { display: none; }
#section1:not(.de) [lang="en"] { display: auto; }


select.jumpstartllg {
	background: var(--color-blue);
	border: 2px solid #fff;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1rem;
	font-weight: bold;
	padding: 0.5em 1em;
	position: relative;
}
select.jumpstartllg option {
	cursor: pointer;
}