@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: "Signika-Bold";
    src: url("../../fonts/Signika-Bold.ttf");
}
@font-face {
    font-family: "Signika-Light";
    src: url("../../fonts/Signika-Light.ttf");
}
@font-face {
    font-family: "Signika-Medium";
    src: url("../../fonts/Signika-Medium.ttf");
}
@font-face {
    font-family: "Signika-Regular";
    src: url("../../fonts/Signika-Regular.ttf");
}
@font-face {
  font-family: "Signika-SemiBold";
  src: url("../../fonts/Signika-SemiBold.ttf");
}

@viewport {
   width: device-width;
   user-zoom:fixed;
}

* {
	margin:0;
	padding:0;
	font-family: "Signika-Light";
	-webkit-tap-highlight-color: rgba(0,0,0,0);
  	-webkit-tap-highlight-color: transparent; /* For some Androids */
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
  	-webkit-touch-callout: none;
	-webkit-user-drag: none;
}

#homepage td.text,
.overlay_textfeld h2,
.overlay_textfeld p,
.overlay_textfeld .footer,
.back,
.send,
.like,
.kommentar {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

html {
  -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
	height: 100%;
}

body {
	height: 100%;
	overflow-x: hidden;
	background-color: #808080;
}

#wrapper {
	position:absolute;
	top:0px;
	left:0px;
	width:0px;
	height:100%;
	overflow-x: hidden;
}

#sperre {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100%;
}

#homepage {
	/*position: fixed;*/
	margin:0px;
  	top:0px;
	left:0px;
  	width:100%;
  	height:100%;
	opacity: 1;
	overflow-x: hidden;
}

#homepage.active-7 .farbiger_streifen {
	height: 12.5%;
	height: calc(87.5% / 7); /* Höhe Footer */
	transition: height 0.2s;
}
#homepage.active-6 .farbiger_streifen {
	height: 14.28%;
	height: calc(87.5% / 6); /* Höhe Footer */
	transition: height 0.2s;
}
#homepage.active-5 .farbiger_streifen {
	height: 16.67%;
	height: calc(87.5% / 5); /* Höhe Footer */
	transition: height 0.2s;
}
#homepage.active-4 .farbiger_streifen {
	height: 21.875%;
	height: calc(87.5% / 4); /* Höhe Footer */
	transition: height 0.2s;
}
#homepage.active-3 .farbiger_streifen {
	height: 29.167%;
	height: calc(87.5% / 3); /* Höhe Footer */
	transition: height 0.2s;
}
#homepage.active-2 .farbiger_streifen {
	height: 43,75%;
	height: calc(87.5% / 2); /* Höhe Footer */
	transition: height 0.2s;
}

/* Farbige Streifen */
#homepage .farbiger_streifen:nth-child(2) {
	background-color: #e1131d;
}
#homepage .farbiger_streifen:nth-child(3) {
	background-color: #ff707a;
}
#homepage .farbiger_streifen:nth-child(4) {
	background-color: #ffd021;
}
#homepage .farbiger_streifen:nth-child(5) {
	background-color: #acbf02;
}
#homepage .farbiger_streifen:nth-child(6) {
	background-color: #05a5a0;
}
#homepage .farbiger_streifen:nth-child(7) {
	background-color: #f56d3e;
}
#homepage .farbiger_streifen:nth-child(8) {
	background-color: #bab6d3;
}

/* Optionale Button am Anfang unsichtbar, sie klappen auf */
#button_liedwunsch,
#button_spenden {
	display: none;
}

#homepage .farbiger_streifen.pfeil {
	background-image:url(../images/next_weiss.svg);
	background-repeat:no-repeat;
	background-size: 24px;
	background-size: 6vw;
	background-position:right center;
}
#homepage #inputHashtag {
	display: block;
	width: 100%;
	height: 100%;
	background: none;
	border: none;
	outline: none;
	font-size: 2.25em;
	font-size: 8vw;
	font-family: "Signika-SemiBold";
	color: #fff;
	text-align: center;
}
#homepage .farbiger_streifen .text {
	position: relative;
	width: 100%;
	height: 100%;
}
#homepage .farbiger_streifen .em {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 8vw;
	width: 8vw;
	left: 2%;
}
#homepage .farbiger_streifen .text span {
	display: inline-block;
	position: absolute;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	font-size: 1.8em;
	font-size: 8vw;
	font-family: "Signika-SemiBold";
	padding: 4% 0;
	color: #fff;
	text-align: center;
}
#homepage .farbiger_streifen.button:active {
	background-color: #ccc;
}
#homepage input::-webkit-input-placeholder { 
  	color: #ad0e16;
	text-align: center;
}
#homepage input::-moz-placeholder { 
  	color: #ad0e16;
	text-align: center;
}
#homepage input:-ms-input-placeholder { 
  	color: #ad0e16;
	text-align: center;
}
#homepage input:-moz-placeholder { 
  	color: #ad0e16;
	text-align: center;
}
#homepage input::placeholder {
  	color: #ad0e16;
	text-align: center;
}

#homepage .header {
	position: relative;
	background-color: #f0f0f0;
	height: 7.5%;
	padding: 0 4%;
}
#homepage .header span {
	display: inline-block;
	position: absolute;
	top: 50%;
	width: 92%;
	transform: translateY(-50%);
	font-size: 0.875em;
	font-size: 3.8vw;
	text-align: right;
	font-family: "Signika-SemiBold";
	color: #e1131d;
}
#homepage .header img {
	position: absolute;
	top: 15%;
	left: 4%;
	height: 70%;
	width: auto;
}

#homepage .footer {
	position: relative;
	background-color: #f0f0f0;
	height: 5%;
}
#homepage .footer .text {
	position: relative;
	float: left;
	list-style-type: none;
	height: 100%;
}
#homepage .footer .text:nth-child(1) { width: 23%;}
#homepage .footer .text:nth-child(2) { width: 21%;}
#homepage .footer .text:nth-child(3) { width: 26%;}
#homepage .footer .text:nth-child(4) { width: 30%;}

#homepage .footer .text span {
	display: inline-block;
	position: absolute;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	font-size: 0.875em;
	font-size: 3.8vw;
	color: #3333cc;
	text-align: center;
	font-family: "Signika-Medium";
}

/* Datei upload */
/* Button zum Foto auswählen */
.fileContainer {
	overflow:hidden;
	width:100%;
	height:100%;
}
/* Button zum Foto hochladen */
#fileupload{
	cursor:inherit;
	width:100%;
    height:100%; /* hinzugefügt Alex am 18.09.2021 */
	opacity:0;
	position:absolute;
	right:0;
	top: 0;
	font-size: 1em;
}

/* Story */
#readmessages {
	position: absolute;
	background-color: #f0f0f0;
	top: 0px;
	left: 0px;
	width: 0px;
	min-height: 100%;
	transform:translateX(100%);
    transition:transform 0.2s linear;
	overflow: auto;
}
#readmessages.slide {
	transform:translateX(0%);
	transition:transform 0.2s linear;
}
#readmessages .meldung {
	position: absolute;
	width: 100%;
	color: #3333cc;
	font-size: 64px;
	font-family: "Signika-SemiBold";
	text-align: center;
	top: 50%;
	-ms-transform: translateY(-50%); /* IE 9 */
  	-webkit-transform: translateY(-50%); /* Safari prior 9.0 */
  	transform: translateY(-50%);
}
#readmessages .content {
	position: relative;
	border-bottom: 8px solid #f0f0f0;
}
#readmessages .content:last-child {
	border-bottom: none;
}

/* Textnachricht */
#readmessages .text {
	color: #fff;
	font-size: 18px;
	font-family: "Signika-SemiBold";
	text-align: center;
	padding: 20px 0px 0px 0px;
}
#readmessages .text span {
	display: inline-block;
	padding: 0 0 10px 0;
	width: calc(100% - 90px);
	font-family: "Signika-medium";
}
#readmessages .text .kommentare span {
	width: 100%;
}
#readmessages .text span.inline-span {
	display: unset;
	padding: unset;
	padding-left: 4px;
	width: unset;
}
#readmessages .text a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #fff;
	font-family: "Signika-medium";
}

/* Farbiger Hintergrund der Textnachrichten */
#readmessages .content:nth-child(7n+1) {
	background-color: #e1131d;
}
#readmessages .content:nth-child(7n+2) {
	background-color: #ff707a;
}
#readmessages .content:nth-child(7n+3) {
	background-color: #ffd021;
}
#readmessages .content:nth-child(7n+4) {
	background-color: #acbf02;
}
#readmessages .content:nth-child(7n+5) {
	background-color: #05a5a0;
}
#readmessages .content:nth-child(7n+6) {
	background-color: #f56d3e;
}
#readmessages .content:nth-child(7n+7) {
	background-color: #bab6d3;
}

/* Bildnachricht */
#readmessages .bild {
	width: 100%;
}
#readmessages .bild img {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
}
#readmessages .gif img {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
}
#readmessages .bild .textimages,
#readmessages .gif .textimages {
	position: relative;
	width: 100%;
	color: #fff;
  	font-size: 18px;
	line-height: 20px;
	font-family: "Signika-SemiBold";
	text-align: center;
	padding: 10px;
}

/* Streifen Bildnachricht */
#readmessages .streifen {
	position: relative;
	width: 100%;
	height: 40px;
}
/* Streifen Textnachricht */
#readmessages .streifentext {
	position: relative;
	width: 100%;
	height: 40px;
}

/* Elemente im Streifen Bild und Textnachricht */
#readmessages .streifen div,
#readmessages .streifentext div {
	float: left;
}
#readmessages .time {
	position: absolute;
	height: 40px;
	color: #fff;
	bottom: 0;
	right: 8px;
	font-size: 14px;
	font-family: "Signika-Light";
	line-height: 40px;
}
#readmessages .like {
	background-image: url(../images/like2.svg);
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: 8px center;
	width: 56px;
	height: 40px;
	text-indent: 34px;
	color: #fff;
	line-height: 40px;
	font-size: 14px;
	text-align: left;
}
#readmessages .teilen {
	background-image: url(../images/teilen.svg);
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: center;
	width: 40px;
	height: 40px;
}
#readmessages .kommentar {
	background-image: url(../images/kommentar.svg);
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: center;
	width: 40px;
	height: 40px;
}
#readmessages .print {
	display: none;
	background-image:url(../images/print2.svg);
	background-repeat:no-repeat;
	background-size:20px 20px;
	background-position: center;
	width: 40px;
	height: 40px;
}
#readmessages .imagedownload {
	background-image:url(../images/download.svg);
	background-repeat:no-repeat;
	background-size:20px 20px;
	background-position: center;
	width: 40px;
	height: 40px;
}
.imagedownload a,
.teilen a {
	display: inline-block;
	width: 100%;
	height: 100%;
}
#readmessages .text .print {
	display: none;
}
#readmessages .kommentare {
	width: calc(100% - 16px);
	margin-left: 8px;
}
#readmessages .kommentare span {
	display: block;
	color: #fff;
	font-size: 16px;
	padding: 0 0 8px 0;
	font-family: "Signika-Medium";
	font-style: italic;
	text-align: left;
	margin-bottom: 0px;
}
#readmessages .kommentare span:first-child {
	border-top: solid 1px #fff;
	padding-top: 8px;
}
.button-streifen:active {
	background: rgba(204,204,204,0.5);
}

#overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100%;
}

.close_overlay,
.close_sperre {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#loading {
	display: none;
	position: absolute;
	width: 176px;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
#loading img {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

#sendtext,
#passworteingabe,
#sendspende {
	display: none;
	position: absolute;
	top: 8px;
	left: 8px;
	width: 94%;
	width: calc(100% - 16px);
}
#sendtextimage {
	display: none;
	position: absolute;
	bottom: 8px;
	left: 8px;
	width: 94%;
	width: calc(100% - 16px);
}
#sendtext input,
#sendtextimage input,
#passworteingabe input,
#sendspende input {
	display: block;
	outline: none;
	width: 100%;
	height: 40px;
	border: 1px solid #e1131d;
	padding: 0 8px;
	font-size: 1em;
	font-family: "Signika-Light";
}
#spenden_formular {
  	display: block;
}
#spenden_formular input#betrag {
	display: inline-block;
	margin-top: 6px;
	margin-right: 6px;
	margin-bottom: 6px;
	width: 75%;
	width: calc(100% - 50px);
}
.spenden_name {
	color: #fff;
	margin-bottom: 12px;
}
.spenden_einheit {
	color: #fff;
	font-size: 20px;
	font-family: "Signika-SemiBold";
}
.spenden_subline {
	color: #fff;
	font-family: "Signika-SemiBold";
	font-size: 1.2em;
	margin-top: 12px;
	margin-bottom: 12px;
}
.spenden_inhaber_paypal {
	color: #fff;
	margin-bottom: 6px;
}
.spenden_adresse {
	color: #fff;
	margin-bottom: 6px;
}
.spenden_kontoinhaber {
	color: #fff;
	margin-bottom: 6px;
}
.spenden_iban {
	color: #fff;
	margin-bottom: 6px;
}
.spenden_text {
	color: #fff;
	margin-bottom: 6px;
}
.aufforderung {
    margin-bottom: 10px;
    display: inline-block;
}

/* Bildvorschau */
#imagewrapper {
	display: none;
	position: absolute;
	top: 8px;
	left: 8px;
	width:calc(100% - 16px);
	height:calc(100% - 110px);
}
#image {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
}

.overlay_textfeld {
	display: none;
	position: absolute;
	top: 50%;
	margin: 0 8px;
	width: 96%;
	width: calc(100% - 16px);
	background-color: #101010;
	border: 1px solid #5d5d5d;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
	-moz-box-shadow:    0px 0px 10px 0px rgba(0, 0, 0, 1);
	box-shadow:         0px 0px 10px 0px rgba(0, 0, 0, 1);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	color: #fff;
	z-index: 2;
}
#contact .logo-selfiewall {
	display: block;
	width: calc(100% - 32px);
	height: auto;
	margin: 16px;
}
#more .bild {
	display: block;
	width: calc(100% - 32px);
	height: auto;
	margin-top: 16px;
	margin-left: 16px;
}
#more,
#contact,
#imprint,
#datenschutz {
	height: 95%;
}

.overlay_textfeld h2 {
	display: block;
	height: 48px;
	border-bottom: 0.2px solid #333;
	font-size: 1.25em;
	font-family: "Signika-Light";
	line-height: 48px;
	text-indent: 16px;
}
.overlay_textfeld h3 {
	display: block;
	height: 48px;
	border-bottom: 0.2px solid #333;
	font-size: 1.25em;
	font-family: "Signika-Light";
	line-height: 48px;
	text-indent: 16px;
}
.overlay_textfeld .content {
	height: calc(100% - 88px);
	overflow: auto;
}
.overlay_textfeld p {
	width: 100%;
	padding: 16px 16px 0 16px;
	font-size: 1em;
	font-family: "Signika-Light";
	line-height: 130%;
}
.overlay_textfeld p:last-child {
	padding-bottom: 16px;
}
.overlay_textfeld a {
	color: #fff;
}
.overlay_textfeld .footer {
	width: 100%;
	height: 40px;
	background-color: #808080;
}
.senden {
	float: left;
	width: 100%;
	height: 40px;
	margin: 6px 0;
	background-color: #e1131d;
	background-image:url(../images/next_weiss.svg);
	background-repeat:no-repeat;
	background-size: 24px;
	background-position:right center;
	font-size: 1em;
	color: #fff;
	text-align: center;
	line-height: 40px;
	font-family: "Signika-SemiBold";
}
#spenden_formular .senden {
  	margin: 0 0 18px 0;
}
.footer .button {
	float: left;
	width: 100%;
	height: 40px;
  	background-color: #e1131d;
	font-size: 1em;
	color: #fff;
	text-align: center;
	line-height: 40px;
	font-family: "Signika-SemiBold";
}
.footer .button:active, .senden:active {
	background-color: #ad0e16;
}

/* Painting */
#painting {
	position: absolute;
	background-color:#f0f0f0;
  	top:0px;
	left:0px;
	bottom: 0px;
	right: 0px;
  	width:0px;
  	min-height:100%;
	transform:translateX(100%);
    transition:transform 0.2s linear;
	overflow: auto;
}
#painting.slide {
	transform:translateX(0%);
	transition:transform 0.2s linear;
}
#sheet {
	position:relative;
	width:calc(100% - 16px);
	height:0px;
	margin:5px 8px 8px 8px;
	border: 1px solid #999;
    box-sizing: border-box;
}
canvas#colors_sketch {
	background-color:#fff;
	width: 100%;
	height: 100%;
}

.action {
	position:relative;
	width:98%;
  	height: 40px;
	width:calc(100% - 16px);
	margin: 8px 8px 8px 8px;
}
.color, 
.bgColors {
	display:inline-block;
	position:relative;
	width:98%;
	width:calc(100% - 10px);
	margin: 0px 5px;
}
.color li,
.bgColors li {
	float:left;
	width:12.5%;
	padding: 3px;
	list-style-type: none;
}
.color a,
.bgColors a {
	display: block;
	width: 100%;
	height: 0;
   	padding-bottom: 100%;
	background-image: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 80%;
}

.action a {
	display: inline-block;
	height:40px;
	width:40px;
	opacity: 0.35;
}
.action a img {
	width: 32px;
	height: 32px;
	margin: 4px;
}
.action #marker1 {
	position: absolute;
	top: 0;
	right: 128px;
}
.action #marker2 {
	position: absolute;
	top: 0;
	right: 84px;
}
.action #marker3 {
	position: absolute;
	top: 0;
	right: 40px;
}
.action #eraser {
	position: absolute;
	top: 0;
	right: -4px;
}
.back1 {
	position: absolute;
	top: 8px;
	left:8px;
	width:40px;
	height:40px;
	border:1px solid #ccc;
	background-color:#e1131d;
	background-image:url(../images/back2.svg);
	background-repeat:no-repeat;
	background-size:32px 32px;
	background-position:center;
}

#painting .navi {
	position: relative;
	width:calc(100% - 16px);
	height: 40px;
	margin: 3px 8px;
}
#painting .navi .senden {
	position: absolute;
	right: 0px;
	margin-top: 0px;
}
#painting .navi .senden a {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color:#fff;
	font-family: "Signika-SemiBold";
	text-decoration: none;
}

#progress {
	display: none;
	position: absolute;
	bottom: 2.25%;
	left: 3%;
	width: 94%;
	height: 24px;
	border: #e1131d solid 2px;
	border-radius: 20px;
}

#progress .fill {
	position: absolute;
	background-color: #e1131d;
	top: 2px;
	left: 2px;
	height: 16px;
	width: 0px;
	border-radius: 18px;
}
.spin > * {
	background: #e1131d;
}

.content h4,
.content ul li h4 {
	padding: 16px 16px 0 16px;
}
.content ul ul li {
	margin-left: 32px;
	padding: 16px 16px 0 0;
	list-style: disc;
}

.password_falsch {
	display: none;
	color: #fff;
	text-align: center;
}

.back2 {
	display: none;
	position: -webkit-sticky;
  	position: sticky;
	top:8px;
	left:8px;
	width:40px;
	height:40px;
	margin-top: 8px;
	border:1px solid #ccc;
	background-color:#e1131d;
	background-image:url(../images/back2.svg);
	background-repeat:no-repeat;
	background-size:32px 32px;
	background-position:center;
}
.refresh {
	display: none;
	position: -webkit-sticky;
  	position: sticky;
	top:8px;
	left:calc(100% - 48px);
	width:40px;
	height:40px;
	margin-top: 8px;
	border:1px solid #ccc;
	background-color:#acbf02;
	background-image:url(../images/refresh2.svg);
	background-repeat:no-repeat;
	background-size:32px 32px;
	background-position:center;
}
.top {
	display:none;
	position: -webkit-sticky;
  	position: sticky;
	top:calc(100% - 48px);
	left:calc(100% - 48px);
	width:40px;
	height:40px;
	margin-top:calc(100% - 48px);
	border:1px solid #ccc;
	background-color:#05a5a0;
	background-image:url(../images/top2.svg);
	background-repeat:no-repeat;
	background-size:32px 32px;
	background-position:center;
}
.back2.active,
.refresh.active,
.top.active {
	display: inline-block;
}
.back1 a,
.back2 a,
.refresh a,
.top a {
	display:block;
	width:100%;
	height:100%;
}
.back2:active,
.refresh:active,
.top:active {
  	background-color:#dadada;
}

.em.em-hourglass {
    display: block;
    position: relative;
    margin: 20px auto 0 auto;
    width: 1em;
    height: 1em;
}

button {
	margin:10px 8px;
	width:100px;
	height:32px;
}
#console {
	margin:20px 8px;
}
.hidden {
	display:none;
}

@media only screen and (max-width: 320px) {

	#readmessages .like {
		background-size: 16px 16px;
		background-position: 8px center;
		width: 54px;
		height: 40px;
		text-indent: 30px;
		line-height: 40px;
	}
	#readmessages .teilen {
		background-size: 16px 16px;
		width: 36px;
		height: 40px;
	}
	#readmessages .kommentar {
		background-size: 16px 16px;
		width: 36px;
		height: 40px;
	}
	#readmessages .imagedownload {
		background-size:16px 16px;
		width: 36px;
		height: 40px;
	}

}

@media (orientation: landscape) {
	#homepage .farbiger_streifen {
		min-height: 80px;
	}
	#homepage .header {
		min-height: 60px;
	}
	#homepage .footer {
		min-height: 40px;
	}

	#homepage .farbiger_streifen.pfeil {
		background-size: 4.5vw;
	}

	#homepage #inputHashtag,
	#homepage .farbiger_streifen .text span {
		font-size: 6vw;
	}

	#homepage .farbiger_streifen .em {
		width: 6vw;
		height: 6vw;
	}

	#homepage .header span {
		font-size: 2.85vw;
	}

	#homepage .footer .text span {
		font-size: 2.85vw;
	}

	#contact {
		height: 95%;
	}

	#sheet {
		width:calc(100% - 220px);
		max-width: 418px;
		height:0px;
		margin:8px auto;
	}

	.back1 {
		top: 320px;
		margin-top: 18px;
	}

	.action {
		position:absolute;
		top: 5px;
		right: 15px;
		width: 40px;
		height: 320px;
		margin: 0;
	}
	.color {
		position:absolute;
		top: 5px;
		left: 15px;
		width: 80px;
		margin: 0px;
	}
	.bgColors {
		position:absolute;
		top: 5px;
		right: 55px;
		width: 40px;
		margin: 0px;
	}
	.color li,
	.bgColors li {
		width: 40px;
	}
	
	.action a {
		height: 40px;
		width: 40px;
	}
	.action a img {
		margin: 4px;
	}
	.action #marker1,
	.action #marker2,
	.action #marker3 {
		position: relative;
		top: unset;
		right: unset;
		margin-right: 0;
	}
	.action #eraser {
		position: absolute;
		top: unset;
		right: 0;
		bottom: 0;
	}
	.action img {
		width:32px;
		height:32px;
	}
	
	#painting .navi {
		position: absolute;
		top: 320px;
		width:calc(100% - 64px);
		height: 48px;
		margin: 18px 18px 8px 56px;
	}
	#painting .navi .senden {
		left: 50%;
		transform: translateX(-50%);
	}
}