/**
	Farben:
	Button #93ABB1 hover:#5ddbff
*/

/* latin-ext */
@font-face {
	font-display:swap;
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-display:swap;
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* latin-ext */
@font-face {
	font-display:swap;
	font-family:'Oswald';
	font-style: normal;
	font-weight: 400;
	src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v14/yg0glPPxXUISnKUejCX4qfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-display:swap;
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v14/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
:root {
	--b:40px;/** Breite/Höhe Menu Buttons */
	--bs:29px;/** Breite/Höhe kleine Menu Buttons */
	--a:2px;/** Abstand r,u, der Buttons */
	--mcc:128px;/** Breite der Pulldown-Buttons: 4x--a + 3*--b */
	--c1:rgba(97, 159, 25, 0.69);/** Hilfe */
	--f1:'Lato','Arial', sans-serif;
	--f2:'Oswald', sans-serif;
	--mw:269px;
	--bc:#c0d3db;/** Button-Color */
	--mc:#b8c9d0;/** Menu/Colorwheel*/
	--bb:#e9f3f8;/** .bb */
	--of:#7fa6b6;/** Menu Font*/
	--fx:#8fa3ab;/** dunkle Farbe icons*/
	--ba:#3ac2ff;/** active bg*/
	--bd:#303538;/** menu dunkler bg*/
	--or:#e44310;/** orange */
	--dl:#00b2c8;/** download */
	--th:#788f9a;/** thumbnails Hintergrund*/
	--dd:#455d67;/** dark highlight */
	--bi:rgba(252, 255, 226, 0.94);/** info */
	--w2:200px;/** max-Breite Buttons etc. */
	--w3:154px;/** Buttons mit Bildern geöffnetes Menu */
	--hlpbg:#7895a0;
	--csl:#718488;/** Farbe Label Slider */
	--dir:#00BCD4;/** Upload-Button */
	--um:#607d8b;/** User-Menu Buttons */
}

#helpforukraine{
    position: fixed;
    background: rgb(1,88,181);
    background: linear-gradient(180deg,#0158b5 50%, #f6ce00 50%);
    width: 90%;
    height: 200px;
    margin: 10% auto 0 auto;
    top: 1em;
    left: 3%;
    max-width: 500px;
	text-align: center;
    color: #fff;
	z-index:99999;
}
#helpforukraine .close{
	background-color:rgba(246,206,0,1);
	display:block;
	background-color:#f6ce00 !important;
	position:absolute;
	right:0;
	margin:.3em !important;
}
#helpforukraine h2{
    margin: 1.5em 0 2em 0;
}
#helpforukraine a{
	text-decoration:none;
}
html { 
	height: 100%;
	font-size: 1em;
	line-height: 1.2em;
	letter-spacing: .04em;
}
@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {
	html{
	font-size: 1.1em;
	line-height: 1.2em;
	}
}
::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #fff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #fff; 
}
html,#fxLinks a{
	font-family:var(--f1);
}

body,a{color:inherit;}
a{cursor:pointer;}

h1,h2,.fxIconBox,
h3,.h1,.button,#menu{
	font-family:var(--f2);
}
p{
	margin:.5em 0 1.3em 0;
}
ul{
	padding:0;
}
li{
	list-style:none;
}
#menu,#pageContent,#usermenu,
#menu p,.loader p{
	display:block;
}
#pageContent{
    margin-top:2em;
}
#usermenu,
#logo{
	position:absolute;
	top:0;
	margin:0;
}
#usermenu{
	width:100%;
	height:33px;
	background:#fff;
}

#idownload .button{
	width:32%;
	margin-right:1%;
}

#menu{
	position:relative;
	width: 100%;
	margin-top:33px;	
	text-align:center;
	padding:2px 2px .4em 2px;
	font-size:.8em;
	color:var(--of);
}
#menu a.active{cursor:default;}
body.fixed{
	overflow:hidden;
	height:100vh;
	position:fixed;
}
#menu ul,
#usermenu ul{
	margin:0;
	padding:0;
}
#usermenu ul{
	float:right;
	margin: .2em .5em;
	display: inline-flex;
}
#usermenu .button{
	background-color:var(--um);
	margin-right: .2em;
	font-size: .9em;
}
#buttonHelp{
	animation: chgbg 4s infinite alternate;
}
@keyframes chgbg {
  from {background-color:#7bc100;}
  to {background-color: var(--ba);}
}
#imgAni div.p2{
	border:1px solid cyan;
}

/** Boxen */
.fullw,
.bx{
	padding:1em 1em;
}
div > .fullw{
	padding-top:2em;
}
address,
.fullw li,
.fullw h1,
.fullw h2,
.fullw h3,
.fullw p{
	max-width:700px;
	margin-left:auto;
	margin-right:auto;
}
/** Box-Farben */
.co5{
	background: #effcfb;
    color: #29323b;
}
.co6{/** Anleitung */
	background:var(--hlpbg);
    color: #fff;
}
#menu div.bb{
	padding:.5em;
    border-radius:.5em;
	background:var(--bb);
	margin-bottom:.3em;
}
#menu h4,
#menu p{
	text-align:left;
	font-size:1.1em;
}

#menu h4{
    font-size: 1em;
    margin:-.2em .2em .2em 0;
	text-transform: uppercase;
    font-weight: lighter;
}
#menu h4 b{
    background: var(--mc);
    color: #fff;
    padding: 0 .5em;
    font-weight: normal;
	white-space: nowrap;
    cursor: pointer;
	border-radius:3px;
}
#menu p{
    margin: .4em 0 .3em 0;
    font-size: .9em;
    padding: .1em;
    color:var(--csl);
}
#FXSLIDER .sliderLabel{
	margin-top:-26px;
}

#menu a,
#imgInfo a,
.hlp em{
	border-radius:3px;
	color:#fff;
}

/**	Farben */
#menu,
#colorWheel{
	background:var(--mc);
}
#butMin[data-oc="open"] a{
    border-top-right-radius:0;
	border-bottom-right-radius:0;
}
#butMin[data-oc="close"] a{
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleX(-1);
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    background-position:50% 20%;
	background-color:red;
}
#menu a.button,
div.thumb a, 
div.help em,
#imgInfo a{
	background-color:var(--bc);
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}

/** zur Positionierung von Layern */
#wrapper{
	position:fixed;
	top:0;
	left:0;
	z-index:9999999;
	width:100vw;
	height:1px;
}
div.confirm,
div.info{
    position:relative;
    width: 400px;
    padding: 1em;
    max-width: 90vw;
    background:var(--bi);
    color: #403b07;
    z-index: 9999;
    border-radius: .5em;
    margin: 0 auto 0 auto;
    top: 10vh;
}
div.confirm{
	font-size: 1.4em;
    text-align: center;
	line-height:1.1em;
}
div.confirm .button{
    float: inherit;
    margin-top: .4em;
    font-size: .9em;
    background-color: #4c8e00;
}
div.abort .abort{
    margin-left: .3em;
    background-color: var(--dl);
}
div.confirm:after{
    content: '';
    width: 0;
    height: 0;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    border-top: 1em solid var(--bi);
    left: .8em;
    position: absolute;
    bottom: -1em;
}
.small{
	font-size:.75em;
	text-align:left;
	padding:1em;
	color:var(--dl);
	line-height:1em;
}
div.confirm .small .button{
	width: auto;
    background-color: var(--dl);
    padding: 0.1em 0.5em;
    margin: 0 0.2em;
}
.confirm img{
	margin:.5em;
}
div.info[data-act]{
	display:block;
}
div.info.fixed{
    position:fixed;
    display: block;
    top: 2em;
    z-index: 99999;
    left: 50%;
    margin-left: -var(--w2);
}
#ihelp{
	top:0 !important;
	background:rgba(1,16,31,.95);
}
#ihelpContent{
	height:300px;
	overflow:auto;
}
.uc{
	text-transform:uppercase;
}
div.info h1{
	margin:0;
}
div.info p{
    line-height: 1.5em;
}
div.info .button{
	width:45%;
}

div.info .button.big{
	width:100%;
}
.rotate{
	background-position:-1.1% 46.2%;
}
.rotate.w{
	background-position:24% 26.5%;
}
#FEEDBACK,
#imgInfo{
    background:var(--bb);
    padding: .3em .3em 0 .3em;
    position: absolute;
    margin-top: -.3em;
}
#imgInfo.canvas{
	margin-top:0;
}
#imgInfo a{
    width: var(--b);
    height: var(--b);
    display: inline-block;
    margin: 0 .1em -.2em .1em;
}
#OPL{
	display: inline-block;
}
#imgHolder{
	padding:1em 0.2em;
}

#crop{
	position:relative;
	width: 100%;
	max-width:800px;
	display:inline-flex;
	background:url(/img/css/checkerboard.gif);
	overflow:hidden;
}

.fullw.black{
    background: rgba(3, 25, 37, 0.84);
    color: #d4dddf !important;
}
.fullw.black h1{
	color:#03A9F4;
}
.bt,
.button{
    display: inline-block;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-size:1em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    float: left;
    -webkit-appearance: none;
    background:linear-gradient(to bottom,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.34) 50%,rgba(255,255,255,0.1) 51%,rgba(255,255,255,0.19) 100%);
    background-color:#000;
	padding:.3em .7em;
	letter-spacing:.03em;
	border:none;
}
/** individuelle Button Farben */
#menu .button{
	background:#fff;
}
.button.small{
	font-size:1em;
}

div.tip{
    background: #ffffff;
    color:var(--or);
    padding: .5em 1em;
    border-radius: 1em;
}
h2.tip{
	margin:1em 0 .5em 0;
}
.tip ul li,
.help ul li{
	margin-bottom:.7em;
	counter-increment: mycounter 1;
	padding-left:2em;
	min-height: var(--b);
}
.tip ul li:before,
.help ul li:before{
	content: counter(mycounter);
    width: 1.4em;
    height: 1.4em;
    display: block;
    position: absolute;
    background:rgba(0, 0, 0, 0.18);
    color: #effcfb;
    font-size: 1.4em;
    text-align: center;
    line-height: 1.3em;
    margin: 0 0 0 -1.8em;
    border-radius: 100%;
}
.help b{
    text-transform: uppercase;
    font-family: var(--f2);
    font-size: .8em;
}
/**	Texte Filter */
.hlp{
	max-width:600px;
	margin:auto;
}
/*feste Breite für Buttons */*
.fixw{
	width: 100%;
    font-size: 1.4em;
    line-height: 1.4em;
	max-width:16em;
}
/**	Icons in Buttons: <span class="ico NAME"></span> */
.ico{/*photo default*/
	display: block !important;
	height: 30px;
	width: 55px;
	background-position: 0 0;
	float: left;
	background-size: 300% 991%;
}
.ico.photo{
    background-position: 52% 27% !important;
    background-size: 600% 3800%;
    margin: .1em 0 0 0;
}
#menu .dir,
#uploadButton{
	background-color:var(--dir);
}

.loader{
	background:url(/img/loading.svg) no-repeat 49% 49% rgba(55, 76, 84, 0.8);
	background-size:20% auto;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	position:fixed;
	z-index:99999;
}
.loader.w{
	background:rgba(255,255,255,0.7);
}
.loader.upload{
	background:rgba(1,1,1,0.7);
}
.loader p{
	position:fixed;
	color:#fff;
	font-size:18px;
	top:23%;
	text-align:center;
	width:100%;
	max-width:inherit;
}
.loader span{
	display:inline-block;
}
hr,
.close,
#imgInfo span,
.loader span span,
#footer p,
#footer li a span,
#social a span,
div.confirm.abort:after{
	display:none;
}
.loader span.u img{
	display:block;
	max-width:var(--w2);
}
.loader.processing span.p,
.loader.upload span.u,
.loader.saving span.s,
.loader.loading span.l,
.loader.ind span.ind{
	display:inline-block;
}

.loader span a.button{
	width:100%;
	margin:13px 0 0 0;
	background-color:var(--or);
}
.loader img{
	border:2px solid #fff;
	margin-bottom:10px;
}
.progressbar{
	background:#fff;
    width: 100%;
    display: inline-block;
    border-radius: .5em;
    overflow: hidden;
	text-align:left !important;
}
.progress{
	display: block !important;
    background: #2196F3;
    width: 10%;
    height: 11px;
}
.label{
	margin-left: 20px;
	padding-top: 10px;
	display: inline-block;
}
.blue{background-color:var(--ba) !important;}
.lightblue{background-color:#32d0fe !important;}
.yellow{background-color:#ffff00 !important;}
.of{
	background-color: var(--th) !important;
    color: var(--bb) !important;
}

#FXSwitch .blue{
	color:#fff !important;
}
.button.apply{
	height:var(--b);
	padding-left:var(--b) !important;
	max-width:330px;
	font-size:20px;
}

.button.y{
	background:#5ddbff;
}
[data-passiv],
.passiv{
	opacity:0.4;
	cursor:default;
}
.cholder{
	min-height: var(--b);
}
#imageSelection .cholder{
	max-height:72vh;
	min-height:inherit;
}
.button.big,
.cholder a.button{
	width:100%;
	font-size:1.3em;
	line-height:1.7em;
	display:none;
}

.cholder a.button.active{
	display:block;
}

#menu a.button.txt{
	float:right;
    height: var(--b);
    width: 156px;
    white-space: inherit;
}

#menu a.button.txt.m{
	padding-top: .2em;
	font-size:1.3em;
}

.preview{
	position:absolute;
	top:0;
	left:0;
}
#origImage,.preview img{
	max-height:800px;
}
#OPL,
.preview,
#origImage img,
.preview img,
.preview canvas{
	width:100%;
	left:0;
}

#prevImage2{
	opacity:0;
}

.svgDownload span{
    width: 1.4em;
    height: 1.4em;
    display: table-cell !important;
    background-position: 97% 79%;
    margin: -2px .3em -.2em -.5em;
    background-size: 700% 2400%;
    float: left;
}
#menu a.svgDownload{
	margin-top:.5em;
	background:#9bd415 ;
	color:#fff;
	width:49% !important;
	border:none;
}

/**	thumb img */
.icon,
div.thumb a,
div.help em{
	width:var(--b);
	height:var(--b);
	float:left;
	margin:0 var(--a) var(--a) 0;
}

div.help em.act,
div.thumb a.act{
	background-color:#00c6ff !important;
	color:#111;
}

div.thumb a img{
    max-width:93%;
    max-height:93%;
}
div.thumb.open a img{
    max-width:100%;
    max-height:100%;
}
div.thumb a.h img{
	height:100%;
	width:auto;
}
.menSW a.button{
	width:49%;
    font-size: 1.3em;
    line-height: 1.8em;
}
svg{overflow:visible}
/**	Menue mit vor-,zurück, öffnen */
.mSelection div.clip{
	width:calc(100% - var(--mcc));
	height:var(--b);
	overflow:hidden;
	float:left;
	margin:0 var(--a) 0 0;
}
#IMGselMulti div.clip,
#IMGselSingle div.clip{
	width: calc(100% - 84px);
	margin:0;
}
#IMGselSingle div.clip{
	width:auto;
}
#thumb.open,
.mSelection.open div.clip,
div.fullscreen{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	z-index:5554;
	padding:3px;
	background:var(--bb);
}
div.fullscreen{
    overflow: auto;
    padding: 1em;
    background: #000000d9;
    color: #fff;
    overflow-x: hidden;
}
.fullscreen .close{
	position:fixed;
	top:.5em;
	right:1em;
}
.fxContainer,
.open #FXSwitch,
.fxContainer.open{
	display:block;
}
.open #FXSwitch{
	height:45vh;
}
.open .cholder{
    margin-top: 0 !important;
    max-height: 96vh;
    overflow: auto;
    background: transparent;
    padding-bottom:var(--mcc);
}
#fxSelection .open .cholder{
	max-height:52vh !important;
}

#butMin,
.fxContainer img{
	display:none;
}
/** Bildermenu */
#thumb.open li{
	display:block;
}
#thumb.open li a{
	width:31vw;
	height:31vw;
}
/** Buttons */
.open a.bLEFT,
.open a.bRIGHT{
	opacity:0;
}
/** close-Button */
.close{
    width: 1.9em !important;
    height: 1.9em !important;
    background-position: 77% 19.3%;
    background-color: red !important;
    border-radius: 50% !important;
    background-size: 460% 1322%;
	margin:0 !important;
}

/** schliessen anzeigen */
#thumb.open .close,
#menu .open a.close,
[data-act] .close,
#FEEDBACK .close{
	display: block;
}
#thumb.open .close,
#menu .open a.close{
	position:fixed;
    top:.4em;
	right:.4em;
    z-index: 5555;
}
#FEEDBACK .close,
.info .close{
	position:absolute;
    right: -.3em;
    top: -.3em;
}

/** aufgeklappte Menues */
#menu .open a.button{
    width: calc(50% - var(--a));
    line-height: 1.6em;
    display: inline-block;
    background:#fff;
    color: #000;
    font-size: 1.2em;
}
#menu .open a.button.c{
	background:var(--bb);
}

.fxContainer.open img{
	width:100%;
	float:left;
	display:block;
}
.fxContainer.open a{
	font-size:1em !important;
	height:auto !important;
}

span.middle{
	display:inline-block !important;
	vertical-align:middle;
	height:100%;
	margin-left:0px;
}
#footer{
	position:fixed;
	width:100%;
	bottom:0;
    background:rgba(255, 255, 255, 0.81);
    color: #000;
	display:none;
	z-index:1001;
	padding: 3px;
}
#social{
	color:var(--bc);
}
/** Footer Social Networks - default: Facebook */
#footer a{
	font-size:1.3em;
	text-decoration:none;
}
#social a,
#footer li a{
	display:inline-block;
	width:var(--b);
	height:var(--b);
	border-radius: .3em;
}
#social a{
    background-color: var(--bc);
    margin-right: .5em;
}
#fbl{/** Feedback-Link */
	display:inline-block;
	margin:.5em 0 0 1em;
}
.sn{
	background-color:#3D5193;
	background-position: -1.5% 92.6%;
}
.sn.top{
    background-color: #333636;
    background-position: -7% 53%;
    transform: rotate(-90deg);
    margin-left:1em;
    background-size: 400% 2200%;
}
.sn.TW{
	background-color:#38A8E0;
	background-position: 23% 92.6%;
}
.sn.WA{
    background-color: #15dc34;
    background-position:48.8% 92.3%;
    background-size: 650% 2147%;
}
.sn.INSTA{
	background-color:#000000;
	background-position: 23.6% 99.4%;
}

#footer li{
	float:left;
	margin: 0 0 0 .2em;
}
#footer p,
#footer ul{
	float:left;
	margin:0;
	padding:0;
}

#footer .r{
	float:right;
	margin:0 .2em 0 0;
}
.feedback{
	margin:.6em 0 0 1em;
}

#FEEDBACK{
	position:fixed;
	bottom: -30em;
	background: var(--bb);
	padding: 1em;
	width: 96vw;
	max-width: 400px;
	left: 2vw;
	z-index: 99999;
	border-radius: .3em;
}
#menu hr{
	margin: 3px 0 0 0;
    border-color:transparent;
}
.floatLeft{float:left;}
.floatRight{float:right;}
.open .oclear,
.clear{clear:both;}
.spacer{margin-top:40px;}
.spacer.bot{
	display:block;
	height:10vw;
}
.uppercase{text-transform:uppercase;}
.center{text-align:center;}
.vis,
[data-vis]{display:block !important;}
.inb{display:inline-block !important;}
.hide{display:none;}
.left{text-align:left;}
.uc90{transform: rotate(90deg);}


/** Blinker */
[data-confirm],
.blink {
  animation: blinker 1.7s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0.3;
  }
}
/**	firefox */
@-moz-document url-prefix() {
	#menu a.button{
		font-size:1.2em;
		line-height:1.3em;
	}
}
/**	Vorschaumodus */
.P #imgInfo{
	display: block !important;
}
.P #logo,
.P #usermenu,
.P #wrapper,
.P #topLink,
.P #scaleMoveClip,
.P #svg,
.P #drawing,
.P #inlineUpload,
.P div.fullw,
.P #imgInfo a,
.P div.handle,
.P #ad,
.P article,
.P .spacer,
[data-play]>h4,
[data-play] .mSelection,
[data-hide],
[data-film] #imgInfo{
	display:none !important;
}
body.P,
body.V,
.P #crop{
	height:100%;
	overflow:hidden;
}
.P #menu,/** muss sichtbar bleiben, damit die Auto-Slider funktionieren! */
.P .gallery{
	right:-500px !important;
	height:0;
}
.P #imgHolder,
.P #mc{
	position: absolute;
    top: 4em;
}
.P .preview img{
	background:url(/img/css/checkerboard.gif);
}
.P #pageContent{
	margin:0;
	height:100vH;
	background:transparent;
}
.P #origImage.noFXs{
	opacity:0 !important;
}
.P #imgInfo{
    z-index: 9999999991;
    position:fixed;
    top: 0;
    margin:0;
    background: #303538;
    padding: .3em;
    border-radius: .3em;
}
.P .H #imgInfo{
	top:0;
}
.P #imgInfo a.s,
.P #imgInfo a.bprev{
    display: block !important;
    margin: 0;
    float: left;
}
.P #imgInfo a.bprev{
    background-position: 74.7% 72.9% !important;
	animation: blinker 1.5s linear infinite;
}

.P #imgInfo a.s{
    margin-left: .3em
}
.P #crop::after{
	content:'';
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	top:0;
	z-index:999999999;
}
/** Film-Mouds 3D, stripeph */
[data-film] #origImage,
[data-film] #crop,
[data-film] .preview canvas{
	max-width: inherit !important;
	max-height: inherit !important;
	position:fixed;
	top: 0;
	left: 0;
	width:100vw;
}
[data-film] .preview{
	top:0 !important;
}
/** kleiner Vorschaumodus */
.S #logo,
.S #imgInfo{
	opacity:.2;
	z-index:-1;
}
[title=deutsch]:before{
	content:'DE';
}
[title=english]:before{
	content:'EN';
}
#menu,
#menu div.bb,
#menu a.button,
div.thumb a, div.help em,
#thumb.open,
.fullw,
.bx,
div.info,.box,
div.confirm,
#imgHolder,
.button,
.open .cholder,
.div.fullscreen,
.mSelection.open div.clip,
header h1,
#footer,
#FEEDBACK{
	box-sizing:border-box;
}
#rec{
    position:fixed;
    z-index: 9999999;
    top: .2em;
    right: 5em;
    background: red;
    color: #fff;
    text-decoration: none;
    padding: .27em 1.3em;
    border-radius: .3em;
}
/**	Swipe */
#swipeInfo{
	position: absolute;
    margin-top: -75%;
    width: 98%;
}
#swipeInfo div{
    background-color:rgba(33, 150, 243, 0.85);
    width: 180px;
    margin: 0 auto;
    height: 180px;
    text-align: center;
    background-position: -2% 85.2%;
    color: #fff;
    font-size: 1em;
    line-height: .9em;
    padding-top: .3em;
    border-radius: 1em;
}
/**	--------------------------------------------- max 320 ------------------------------- */
@media (max-width: 320px) {
	#fxSelection .clip{
		width:100%;
		height: calc(var(--b) + var(--a));
	}
	#fxSelection .bLEFT{
		position: absolute;
		margin-top:calc(var(--b) + var(--a));
	}
	#fxSelection .bRIGHT{
		margin-left: calc(var(--b) + var(--a));
	}
	#fxSelection .open .clip{
		height:inherit;
	}
}

/**	--------------------------------------------- max 500 ------------------------------- */
@media (max-width: 500px) {
	#menu{
		right:0 !important;
		margin-bottom:-3em;
	}
}
/**	--------------------------------------------- min 500 -------------------------------- */
@media (min-width: 500px){
	#menu{
		position:absolute;
		top:2.6em;
		right:0;
		margin:0;
		z-index:1000;
		width:var(--mw);
	}
	#usermenu{
		position:relative;
		height:inherit;
	}
	#pageContent{
		margin-top:0;
	}
	div > .fullw{
		padding-top:inherit;
	}
	#butMin{
		position: absolute;
		top: 205px;
		left: -20px;
		display:block;
	}
	#butMin a{
		display: block;
		background-position: 49% 20%;
		background-size: 1000% 2000%;
		background-color:var(--dl);
		border-radius:.4em;
		width: 20px;
		height:48px;
	}
	#thumb.open .cholder li a {
		width:var(--w3);
		height:var(--w3);
	}
	.mthumb.cholder li:nth-child(3n+0) a,
	#FormSel .clip li:nth-child(3n+0) a:not(.button){
		margin-right:0;
	}
	.open div.clip a{
		margin-right:var(--a) !important;
	}
	#footer p{
		display:block;
		padding:.6em .3em 0 0;
	}
	.P #imgInfo{
		right: 0;
	}
	.P #mc{
		top: 1em;
	}
}
@media (min-width: 500px) and (min-height:500px){
	#menu{
		position:fixed;
	}
}
/**	----------------------------------------- min 600 ----------------------------------- */
@media (min-width: 600px) {
	#helpforukraine{
		width: 50%;
		height: 300px;
		left: 25%;
	}
	#imgHolder{
		padding: 1em;
		text-align:center;
	}
	#imgHolder.H,
	.H #crop,
	.H .preview,
	.H #origImage,
	.H #origImage img,
	.H .preview img,
	.H .preview canvas{
		height:100%;
		max-height:600px;
		width:auto;
	}
	#imgHolder.H{
		max-height:inherit;
	}
	header h1{
		font-size: 2.6em;
		line-height: 1.2em;
		margin:.5em 0;
	}
	div.confirm{
	    float: right;
		top: 292.453px;
		max-width: 250px;
		margin:0 1em 0 0;
	}
	div.confirm .button{
		width:100%;
	}
	#social a{
		width: 4em;
		height: 4em;
		border-radius: .6em;
		margin-right:1em;
	}
}
/**	--------------------------------------------- 750 ----------------------------------- */
@media (min-width: 750px) {
	#menu{
		height:100%;
		top:0;
	}

	#menu .open a.button{
		width:24%;
		max-width:var(--w2);
	}
	#menu h4 b{
		background: var(--fx);
	}
	.open #FXSwitch{
		height:var(--w2);
	}
	#imgInfo{
		display:contents !important;
	}
	#fxSelection .open .cholder{
		height:calc(99vh - var(--w2));
		max-height: inherit !important;
	}
	#thumb.open,
	.mSelection.open div.clip, 
	div.fullscreen{
		background:rgba(193, 210, 218, 0.9);
		background:linear-gradient(180deg, #d0e6f0 0%, rgba(193, 210, 218, 0.9) 50%);
	}
	.fullw,
	.bx{
		font-size: 1.1em;
		line-height: 1.7em;
	}
	.P #imgInfo{
		margin:.3em;
	}
	[title=deutsch]:before{
		content:'Deutsch';
	}
	[title=english]:before{
		content:'English';
	}
	.svgDownload span{
		margin: 2px .3em -.2em -.5em;
	}
}
/**	--------------------------------------------- 900 ---------------------------------- */
@media (min-width: 1000px) {
	.fullw,
	.bx{
		padding:2em 2em;
	}
}
/**	--------------------------------------------- 1000 ---------------------------------- */
@media (min-width: 1000px) {
	.fullw,
	.bx{
		padding:3em 5em;
	}
	div.tip{
		margin:0 -1em;
	}
}
/**	--------------------------------------------- 1500 ---------------------------------- */
@media (min-width: 1500px) {
	.fullw,
	.bx{
		padding:3em 6em;
	}
}