@font-face {
    font-family: 'barlowbold';
    src: url('../fonts/barlow-bold.eot');
    src: url('../fonts/barlow-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/barlow-bold.woff2') format('woff2'),
         url('../fonts/barlow-bold.woff') format('woff'),
         url('../fonts/barlow-bold.ttf') format('truetype'),
         url('../fonts/barlow-bold.svg#barlowbold') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'barlowlight';
    src: url('../fonts/barlow-light.eot');
    src: url('../fonts/barlow-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/barlow-light.woff2') format('woff2'),
         url('../fonts/barlow-light.woff') format('woff'),
         url('../fonts/barlow-light.ttf') format('truetype'),
         url('../fonts/barlow-light.svg#barlowlight') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'barlowregular';
    src: url('../fonts/barlow-regular.eot');
    src: url('../fonts/barlow-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/barlow-regular.woff2') format('woff2'),
         url('../fonts/barlow-regular.woff') format('woff'),
         url('../fonts/barlow-regular.ttf') format('truetype'),
         url('../fonts/barlow-regular.svg#barlowregular') format('svg');
    font-weight: normal;
    font-style: normal;}

html,body{
	overflow:none;
	height:100vh;
	width:100vw;
	background:#000000;
	padding:0;
	margin:0;}

body{
	overflow-x:hidden;
	min-height:770px;}

body,div,a{
	color:#ffffff;}

#logo{
	position:absolute;top:5.5vh;left:3vw;}
#logo img{
	width:25vw;}

#page{
	height:100vh;
	width:inherit;
	background-image: url(../../media/ora_quer1.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;}

.ptr,
a{
	cursor:pointer;
	text-deocration:none;}

.ptr:hover,
a:hover{
	text-deocration:underline;}
.nows{
	white-space:nowrap;}

#hello,#talk,#wertecontainer{
	padding:5px;
/*background:#ffffff99; */
/*	border:1px solid #ffffffcc;*/}

#nav,
#hello {
	font-family:barlowlight;}

#nav{
	position:absolute;top:20px; right:20px;
	font-size:11pt;}

#hello{
	position:absolute;left:70vw;
	bottom:15vh;
	font-size:38pt;}

#talk{
	position:absolute;left:17vw;
	bottom:17vh;
	font-size:15pt;
	font-family:barlowregular;}

#wertecontainer{
	text-align:center;
	position:absolute;
	bottom:2vh;
	left:15vw;
	font-size:14pt;
	font-family:barlowbold;}

#werte{
	display:inline-block;
	text-align:left;}

#line{display:none;}

#backdrop{
	background:black;
	z-index:2;
	position:absolute;
	top:0;
	left:0;
	height:100vh;
	width:100vw;}
#backdrop>span{z-index:10;padding:5px;float:right;;width:20px;cursor:pointer;color:#000;text-align:center;height:20px;background:white;border-radius:50%;}
	
#container{
	z-index:3;
	position:absolute;
	top:5vh;
	left:5vw;
	height:90vh;
	width:calc( 90vw - 20px);
	overflow:auto;
	padding:10px;
	border:3px solid #ffffff;
	font-family:barlowlight;
	background: #ffffffDD;}

#container * {	color:#000;}
#container .bold,
#backdrop *{	color:#000;font-family:barlowregular !important;}

@media only screen and (min-resolution: 2dppx),
	only screen and (max-width: 1600px){
#talk{	left:11vw;	}
}

@media only screen and (min-resolution: 2dppx),
	only screen and (max-width: 1024px),
	only screen and orientation: portrait)
{
:root{
	--mtop:0vh;}

#hello{
	margin-top:var(--mtop);
	height:auto;
	width:220px;
	left:calc(50vw - 110px);
	bottom:auto;
	top:390px;}

#talk{
	margin-top:var(--mtop);
	height:auto;
	left:calc(50vw - 150px);
	width:300px;
	bottom:auto;
	top:650px;}

#wertecontainer{
	margin-top:var(--mtop);
	hyphens:auto;
	height:auto;
	left:0;
	width:100vw;
	bottom:auto;
	top:750px;}

#werte{
	padding:0 20px;
	max-width:500px;}

#logo{
	top:2.5vh;left:2vw;}

#logo img{	width:min( 60vw, 350px ) !important;}


#page{
	background-size:contain;
	background-position:center top;
	background-image: url(../../media/ora_vert.jpg);
}}