body {
	font:18px Verdana;
	color:#ffff00;
	margin:0 auto 60px auto;
	width:700px;
	max-width:95%;	
	text-align:center;
}

html {
	min-height:100%;
	overflow:hidden;
	position:relative;
	background: #000 url('../images/design/backdrop-kk.jpg') no-repeat;
	background-size:100% auto;
	background-position:0 100%;
	background-size:cover;
	background-position:50% 50%;
}
@font-face { /* https://www.google.com/get/noto/#noto-emoji-zsye */
  font-family: Noto;
  src: local("Noto Emoji"), local("Noto Color Emoji"), local("Noto"), 
       url("https://cdn.rawgit.com/googlei18n/noto-emoji/master/fonts/NotoEmoji-Regular.ttf");
}
hgroup { margin-top:.5em; max-width:100%; overflow:hidden; line-height:1.2;}
h1, h2, h3 { text-shadow:5px 5px #000; margin:0 auto; text-align:center; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 5px 5px rgba(0,0,0,.25); }
h1 { font-size:2.0em; }
h2 { font-size:1.7em; }
h2 img { vertical-align:middle; }
h3 { margin:0; font-size:.8em; }
h1, h2, h3, .button, button, .config label { font-family: 'Luckiest Guy', Verdana, Arial, sans-serif; line-height:1.2; }
h1 + h2 { opacity: 1; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 3px 3px rgba(0,0,0,.25); }
hgroup small {
	display: block;
	font-family: 'Luckiest Guy', Verdana, Arial, sans-serif;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	color:orange;
}

/* LENA */
html.upload {
	/*LENA*/
	/*background-position: 50% 85%;*/
}
html.upload h1 { font-size: 2.5em; }

html.upload {
	max-width:700px;
	margin:0 auto;	
}
html.westvisions {
	background: url('../images/design/backdrop-kk.jpg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size:100% 100%;
	max-width:700px;
	margin:0 auto;
}
.westvisions h1 {
	background:url('../images/design/WestVision_Logo.svg') no-repeat 50% 50%;
	width:200px;
	height:234px;
	max-width:100px;
	max-height:117px;
	text-indent:-666em;
	overflow:hidden;
}
.westvisions h2 {
	font-size: 1em;
	margin-top:0;
	margin-bottom:0; 
	text-transform:uppercase;
}
.westvisions button,
.westvisions .button {
	border-radius:0;
	font-size:2em;
	background:none;
	border:2px solid white;
	color:white;
	text-shadow:1px 1px black;
}

p { margin:1em auto; text-shadow:1px 1px #000; max-width:90%; }

fieldset { border:0; margin:1em 0 0 0; padding:0; }
input, .selectbox { outline: none; font-family:Verdana, Arial, sans-serif; box-sizing:border-box; opacity:.9; display:block; width:90%; margin:0 auto; padding:.75em .5em; font-size:1em; margin-bottom:1em; border-radius:10px; border:0; background:#FFF; color:#000; box-shadow:inset 2px 2px 5px rgba(0,0,0,.5); }
input[type='file'] { font-size:1em; padding:.75em .5em; }
input[type='checkbox'] { border:none; box-shadow:none; width:auto; }
input[type='color'] { height:2.5em; padding:.25em .5em; cursor: pointer; }

.selectbox { padding-top:.625em; padding-bottom:.625em; }
.selectbox select { font-family:Verdana, Arial, sans-serif; width:100%; border:none; font-size:1em; background:none; height:1.5em; }

.button, button {
	box-sizing:border-box;
	text-align:center;
	color: #000;
	line-height:1;
	text-decoration: none;
	box-shadow: 0 0 20px #FFF, inset -2px -2px rgba(0,0,0,.5);
	text-shadow: 1px 1px #FFF;
	width:90%;
	cursor: pointer;
	display: block;
	margin:0 auto .25em auto;
	padding:.25em;
	font-size:2em;
	border:2px solid #666;
	border-bottom-color: #000;
	border-right-color:#000;
	border-radius:10px;
	border:0;	
	outline: none;
}

.button, button {
	background: #e6f0a3; /* Old browsers */
	background: -moz-linear-gradient(top,  #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */	
}


.button { margin-top:2em; }
button:disabled, button[disabled], button.disabled { opacity:.75; }
button.disabled span { background: url('../images/design/loading.gif') no-repeat center center; display:block; text-indent:-666em; }

.config label { width:90%; display:block; margin:0 auto; }
.config label span { text-align:right; display:inline-block; width:18%; margin-right:2%; vertical-align:middle;}
.config label input, .config label .selectbox { display:inline-block; width:80%; vertical-align:middle;}
.config label input[type='checkbox'] + .checkbox {
	display:inline-block;
	box-sizing:border-box;
	opacity:.9;
	padding:0 .5em;
	border-radius:10px;
	border:0;
	background:#FFF;
	color:#000;
	box-shadow:inset 2px 2px 5px rgba(0,0,0,.5);
	vertical-align:middle;
	width:5em;
	line-height:2.5em;
	height:2.5em;
	text-align:center;
	cursor:pointer;
	position:relative;
}
.config label input[type='checkbox'] + .checkbox:before {
	content: '\274C';
	content: 'Aus';
	font-family: Arial;
	text-shadow: none;
	text-transform: uppercase;
	font-size: .75em;
	float: right;
	padding: 0 .25em;
}
.config label input[type='checkbox']:checked + .checkbox:before {
	content: '\2705';
	content: 'An';
	float:left;
}
.config label input[type='checkbox'] + .checkbox:after {
	display:block;
	width:1.75em;
	height:1.75em;
	margin:.5em 0;
	background:red;
	border-radius:5px;
	content:'';
	transition: all .4s;
	box-shadow: inset -2px -2px 2px rgba(0,0,0,.5);
	position:absolute;
	top:0;
}
.config label input[type='checkbox']:checked + .checkbox:after {
	background:green;
	margin-left:2.25em;
}
.config label input[type='checkbox'] { display:none; }
.config label span.description { width:60%; text-align:left; margin-right:0; }
.config label span.description em { filter:invert(1); font-style: normal; text-decoration: underline; }
.geilerstring { position:absolute; bottom:10px; left:0; font-size:.5em; text-align:center; width:100%; }
.geilerstring span { display:block; padding:5px 10px; background:rgba(0,0,0,.5); }
.geilerstring span a { color:#fb17a2; color:yellow; font-weight:bold; }
.geilerstring span strong { color:#FFF; text-shadow:1px 1px rgba(0,0,0,.5); }
.geilerstring span em { color:#FFF; text-shadow:1px 1px rgba(0,0,0,.5);  }

.notification {
	background:rgba(255,255,255,.75);
	margin-top:1em;
	padding:.5em 0;
	border-radius:1em;
	color:black;
	text-shadow:
}
.notification p {
	text-shadow:1px 1px #FFF;
}
.notification + .button {
	margin-top: .5em;
	margin-bottom: 60px;
}
@keyframes textzoom {
  0%	{ transform: scale(1) rotate(0); opacity:1; }
  50%	{ transform: scale(.95) rotate(1deg); opacity:.5; }
  100%	{ transform: scale(1) rotate(0); opacity:1; }
}

@-webkit-keyframes textzoom {
  0%	{ -webkit-transform: scale(1) rotate(0); opacity:1;}
  50%	{ -webkit-transform: scale(.95) rotate(1deg); opacity:.5;}
  100%	{ -webkit-transform: scale(1) rotate(0); opacity:1;}
}

@keyframes imagezoom {
  0%	{ transform: scale(.95) rotate(0); }
  100%	{ transform: scale(1) rotate(-2deg); }
}

@-webkit-keyframes imagezoom {
  0%	{ -webkit-transform: scale(.95) rotate(0); }
  100%	{ -webkit-transform: scale(1) rotate(-2deg); }  
}

@keyframes fadeintweet {
  0%	{ opacity: 0; transform: translatey(20px); }
  100%	{ opacity: 1; transform: translatey(0);}
}
@-webkit-keyframes fadeintweet {
  0%	{ opacity: 0; -webkit-transform: translatey(20px); }
  100%	{ opacity: 1; -webkit-transform: translatey(0); }
}


.upload h1, .upload h2 {
	/*white-space: nowrap;*/
}
.gallery {	
	margin:0;
	width:100%;
	max-width:100%;
	height:100vh;
	overflow:hidden;	
}
.gallery .holder {
	width: 100%;
	height: 100vh;
	animation:fadeintweet 2s ease-out forwards;}

.gallery .back { position:absolute; top:0; left:0; width:100%; height:100%; box-shadow:inset 0 0 40px rgba(0,0,0,.75); }
.gallery .front {
	animation:fadeintweet 2s ease-out forwards;
	position: absolute;
	left: 50%;
	width: 6666em;
	margin-left: -3333em;
	animation:imagezoom 7s ease-out forwards; -webkit-animation:imagezoom 7s ease-out forwards; top:5%; height:90%;}
.gallery .back {
		 background-repeat:no-repeat; background-size:120% auto; background-position:50% 50%;
	-webkit-filter:blur(10px); filter:blur(10px);
}

.gallery .front > span {
	display: inline-block;
	height: 90vh;
	position: relative;
}


.gallery .front img {
	margin:0 auto;
	display: block;	
	height:100%;
	box-shadow:0 0 100px 40px rgba(0,0,0,.75);
	
	margin-top:-40px;
	border:40px solid rgba(255,255,255,.25);
		
}

/* IMAGE FILTER EFFECTS */
.gallery .back.grayscale {
	filter: blur(10px) grayscale(1);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	filter: gray; /* IE6-9 */
	-webkit-filter: blur(10px) grayscale(1); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
}
.gallery .front img.grayscale {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(1); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
}

.gallery .back.sepia {
	-webkit-filter:blur(10px) sepia(1);
	filter:blur(10px) sepia(1);
}
.gallery .front img.sepia {
	-webkit-filter:sepia(1);
	filter:sepia(1);
}

.gallery .back.oversaturate {
	-webkit-filter:blur(10px) saturate(8);
	filter:blur(10px) saturate(8);
}
.gallery .front img.oversaturate {
	-webkit-filter: saturate(8);
	filter: saturate(8);
}

.gallery .back.invert {
	-webkit-filter:blur(10px) invert(1);
	filter:blur(10px) invert(1);
}
.gallery .front img.invert {
	-webkit-filter: invert(1);
	filter: invert(1);
}

	.orientation3 { -webkit-transform:rotate(-177deg); transform:rotate(-177deg); }
	.orientation6 { -webkit-transform:rotate(87deg) scale(.75); transform:rotate(87deg) scale(.75); }
	.orientation8 { -webkit-transform:rotate(-87deg) scale(.75); transform:rotate(-87deg) scale(.75); }

.admin [class^='orientation'] { }
.admin .orientation3 { -webkit-transform:rotate(-180deg); transform:rotate(-180deg); }
.admin .orientation6 { transform:translateY(-100%) rotate(90deg); transform-origin: 0 100%; }
.admin .orientation8 { transform:rotate(-90deg) translateX(-100%); transform-origin: 0 0; }
.admin .orientation6,
.admin .orientation8 { max-width: 205px !important; }

.gallery h1 { position:absolute; z-index:10; bottom:10vh; /*50px*/ width:100%; margin:0; font-size:6vw; padding: .5em 0; line-height:.9; color: #ffff00;
	animation:textzoom 1s infinite ease-in-out; -webkit-animation:textzoom 1s infinite ease-in-out; }
.gallery h2 { position:absolute; z-index:10; text-align:center; top:25px; left:0; width:100%; font-size:3vw; margin:0; letter-spacing:2px; opacity:.75; color: #ffff00; }
.gallery h1 .heart { font-size:110%; font-family:'Consolas', sans-serif; display:inline-block; transform:scaleY(.8) rotate(3deg); margin-right:-15px; }
.heart { color:#fb17a2; }

.gallery h3 {
	/*font-family: 'Arial Black',Impact,Verdana, sans-serif;*/
	line-height:1;
	animation:none;
	text-align: left;
	box-sizing: border-box;
	background: #000 linear-gradient(#4089c9, #35376f);
	background: none;
	font-size:3vw;
	text-shadow:none;
	padding:.5em;	
	opacity:.9;
	bottom:0;
	position: fixed;
	width:100%;
}
.gallery h3:before {
	/*content: 'Coming up next';*/
	content: 'Share your moment';
	box-sizing: border-box;
	vertical-align: bottom;	
	padding: .5em;
	background: #F8AA18;
	background: #ff80ff;
	background: #3399ff;
			/*background-image: url('/images/design/qr-code.png');*/
		background-image: url('../images/qr-code.png');
		background-position: 50% calc(100% - .5em);
		background-repeat: no-repeat;
		background-size: 85% auto;
		padding-bottom: 10%;
		transform: rotate(-2deg);
		width: 10%;
		font-size: 1.9vw;
		border-radius: 10px;
	color: #fff;
	text-shadow: 1px 1px #000;
	box-shadow: 2px 2px 5px rgba(0,0,0,.5);	
	text-align: center;	
	position: fixed;
	top: .5em;
}
.gallery h3:after {
	display: block;
	content: url('/images/design/arrow.svg');    			
	position: fixed;
	top: 1.5em;
	left: 10%;
	width: 5%;
	height: auto;
	transform: rotate(-24deg);
}
.gallery h3 span {
	display:inline-block;
	vertical-align:bottom;
	width:99%;
	text-align:right;
	text-shadow: 4px 4px 0 #000000;
}

/*.gallery h1,
.gallery h2 { color:#F8AA18; }*/

.gallery .tweetshow { margin-left:0; left:0; text-align:center; width:100%; transform: scale(1.125); height:80%; }
.gallery .tweetshow:before { content:''; display:inline-block; height:100%; vertical-align:middle; margin-right: -.25em; }
.gallery .tweetshow + h1 { top:35px; font-size: 3vw; color:#FFFFFF; }
.gallery .twitter-tweet { opacity:0; display:inline-block !important; width:500px; margin:0 .5em !important; vertical-align:middle; }
.gallery .twitter-tweet-rendered:nth-of-type(1) { width:500px; opacity:0; animation:fadeintweet 2s ease-out forwards; animation-delay: .5s; }
.gallery .twitter-tweet-rendered:nth-of-type(2) { width:500px; opacity:0; animation:fadeintweet 2s ease-out forwards; animation-delay: 1s; }
.gallery .twitter-tweet-rendered:nth-of-type(3) { width:500px; opacity:0; animation:fadeintweet 2s ease-out forwards; animation-delay: 1.5s; }
.gallery .twitter-tweet-rendered:nth-of-type(4) { width:500px; opacity:0; animation:fadeintweet 2s ease-out forwards; animation-delay: 2s; }

.admin { overflow: visible; }
.admin body { width:100%; margin-bottom:100px; height: auto; min-height:100%; overflow:visible; }
.admin #overlaymenu { position:fixed; bottom:0; left:0; z-index:100; width:100%; background:purple; text-align:center; }
.admin #overlaymenu div { padding:15px 10px 10px 10px; }
.admin #overlaymenu button, .admin #overlaymenu .button { width:auto; display:inline-block; font-size:1em; padding:10px; box-shadow: inset -2px -2px 3px rgba(0,0,0,.5); margin-top:0; }
.admin #overlaymenu button[name="delete"] { background:#e00000; color:#FFF; text-shadow:1px 1px #000; margin-left:20px; }
.admin #overlaymenu label { color:#fff; text-shadow:1px 1px #000; display:inline-block; width:auto; }
.admin #overlaymenu #tweetpool-toggle { display:none; }
.admin #overlaymenu #tweetpool-toggle ~ button[name="update-tweetpool"] {
	float:right;
	display:none;
}
.admin #overlaymenu #tweetpool-toggle ~ label {
	float:right;
	margin-left:.5em;
	background:#00deff;
}
.admin #overlaymenu #tweetpool-toggle ~ textarea {	
	margin-top:10px;
	padding:10px;
	width:100%;
	height:200px;	
	display:none;
	box-sizing: border-box;
	font-size:18px;
}
.admin #overlaymenu #tweetpool-toggle:checked ~ textarea,
.admin #overlaymenu #tweetpool-toggle:checked ~ button[name="update-tweetpool"] { display:block; }
.admin .block { float:left; margin:1%; position:relative; width:10.5%; height:330px; box-sizing: border-box; }
.admin .block .block-content { display:block; cursor:pointer; width: 100%; height: 100%; padding:15px 10px; border: 2px solid rgba(255,255,255,.5); box-sizing: border-box; }
.admin .block .datetime { font-size: 13px; }
.admin .block.visible { background:rgba(0,255,0,.6); }
.admin .block.visible:hover { background:rgba(0,255,0,1); }
.admin .block.hidden { background:rgba(255,0,0,.6); }
.admin .block.hidden:hover { background:rgba(255,0,0,1); }
.admin .block img { max-width:100%; max-height:205px; display:block; margin:0 auto; }
.admin .block span.id { top:5px; left:10px; text-align:center; bottom:auto; position:absolute; font-size:10px; }
.admin .block input { font-size:1em; width:calc(100% - 20px); padding:.25em 0; border-radius:0; position:absolute; bottom:0px; box-sizing: border-box; }
.admin .block input[type="checkbox"] { top:5px; right:5px; width:auto; }
.admin .block input[type="checkbox"]:checked + .block-content { border-color: orange; background: rgba(255, 165, 0, .75); }
.admin form:after { content:''; clear:both; display:block; }

.config { height: auto; overflow:visible; }
.config label,
.config h3 { text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }
.config input, .config .selectbox { margin-bottom:0; }
.config label { margin-bottom: 1em; }
.config body { text-align:left; max-width:100%; }

.anpreisung { margin-top: 2em; }

html.upload,
body.upload { height: 100%; }
body.upload {
	display: flex;
	flex-direction: column;
	/*justify-content: space-between;*/
}
body.upload fieldset {
	margin: .75em 0;
}
.preview {
	margin-bottom: 70px;
	height: 0;
	transition: height .5s ease-in-out;
}
.preview img {
	cursor: zoom-in;
	position: absolute;
	box-sizing: border-box;
	max-height: 8em;
	max-width: 95%;
	display: block;
	left: 50%;
	transform: translate(-50%, 0);
	border: 5px solid #FFFFFF;
	box-shadow: 0 0 10px #000000;
	transition: all .5s ease-in-out;
	opacity: 0;	
}
.preview img.show {
	opacity: 1;
}
.preview img.zoom {
	cursor: zoom-out;
	max-height: 95%;
	top: 50%;
	transform: translate(-50%, -50%);	
}
.donatebutton {
	background: #ffc439 url('../images/design/paypal.svg') no-repeat 50% 50%;
	background-size: auto 90%;
	border-radius: 18px;
	display:inline-block;
	    height: 45px;
    min-height: 45px;
    max-height: 55px;
    min-width: 200px;
    vertical-align: middle;
    color:#253b80;
    position: relative;
    transform: translatey(-.5em);
}
.donatebutton span {
	position: absolute;
	left:50%;
	transform: translatex(-50%);
	bottom: -1.5em;
	font-size: 12px;
}
@media only screen and (max-width: 1400px) {
	.admin .block { width:31.33%; height:315px; margin:1%; }
}
@media only screen and (max-width: 700px) {
	.admin #overlaymenu { opacity:1; }
	.admin #overlaymenu label { display:none; }
	.admin #overlaymenu div { padding:10px 5px 5px 5px; }
	.admin #overlaymenu button[name="delete"] { margin-left:10px; }
	.admin .block { width:48%; height:150px; margin:1%; }
	.admin .block .block-content { padding: 10px; }
	.admin .block img { max-height:105px; }
	.admin .orientation6,
	.admin .orientation8 { max-width: 105px !important; }
	.admin .block span { display: none; }
	.admin .block input { font-size:.5em; padding:.5em 5px; margin:0; bottom:8px; line-height:1; width:calc(100% - 25px);}
	.admin .block input[type="checkbox"] { display:none; }
	
	.config label span,
	.config label input,
	.config label .selectbox { width:100%; text-align:left; }
	.config label input { margin-bottom: .5em; }
	.config label span.description { width: calc(100% - 6em); }
	.config .save-button { position: fixed; bottom:0; left: 50%; transform:translatex(-50%); z-index:1; }
}
@media (min-width:768px) {
	.admin .image {
		overflow: hidden;
		height: calc(100% - 85px);
	}
}