:root{
    
	--mainColor:black;
	
	
}
button, input{
	-webkit-appearance:     none;
    -moz-appearance:        none;
    -ms-appearance:         none;
    -o-appearance:          none;
    appearance:             none;
    border: 0;
    
}
.scrollbar-inner > .scroll-element.scroll-y{
	left:0 !important;
}
input:focus {
    outline: none !important;
	
    box-shadow: inset 0px 0px 0px 0.2rem #FF6300;
}
::-webkit-input-placeholder { /* Edge */
  font-style: italic;
  font-size:12px;
}

:-ms-input-placeholder { /* Internet Explorer */
  color: red;
}

::placeholder {
  font-style: italic;
  font-size:12pt;
  text-indent:1.6rem;
}

body
{
    font: 100% "Helvetica Neue",Helvetica,arial,tahoma,sans-serif;
    overflow: hidden;
   
}
*{
	margin: 0;
    padding: 0;
}
html, body{
	
	min-height:100%;
	/*min-width:500px;*/
	
	background:#E9EBEB;
	font-family: 'Gotham';
	
	
}
a{
	color: black;
}
a.close{
	text-decoration:none !important; 
}
a.close > i{
	display: none;
}
#wraper{
	width:100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	transform: translate3d(0px, 0px, 0px);
}
#mobileSubMenu{
	display: none;
}
#background{
	position: absolute;
	z-index:10;
	width:calc(100% - 4rem);
	height:calc(100% - 4rem);
	
	border: 2rem solid #FF6300;
	
}
:root {
  
  --main-padding: 0.1vh; 
}

#nick, #nick-small{
	position:absolute;
	z-index: -1;
	top:2rem;
	left:-6rem;
	height:calc(140%  + 2rem);
	transform-origin: 10% 10%;
}
#mobileMenu{
	display: none;
}
#menu{
	position:absolute;
	top:8vmin;
	right:0rem;
	list-style:none;
	z-index:20;
	
	width:50vw;
	
}
#menu li{
	display:inline;
	padding-right: 20pt;
}
#menu li a{
	font-weight: bold;
	font-size:1.8vmin;
	font-family:"Gotham";
}

#main-content{
	position: absolute;
	top:20vmin;
	right:10vw;
	width:40vw;
	display: flex;
	flex-direction: column;
	justify-content:flex-start;
	height: calc( 100% - 22rem );
	
	font-size:calc(1vmin - 0.05rem);
}




#main-content h1{
	
	font-size:4.5em;
	margin-bottom:1.2em;
}
#main-content p{
	
	font-size:1.5em;
	position: relative;
	
}
blockquote{
	position:relative;
	margin-top:40px;
	
}
img.dots{
	position: absolute;
	width:5rem;
	left:-6rem;
	top:-2.5rem;
}
/*#main-content blockquote{
	margin-top:max( calc(100vh - 58rem) , 0rem);
	margin-bottom:4rem;
}*/
#main-content blockquote i{
	
	font-size:2em;
}
#impressum{
	position: absolute;
	z-index: 20;
	bottom:3rem;
	right:3rem;
	color: darkGray;
}
#letstalk{
	display:block;
	background: #FF6300;
	color:white;
	text-align:center;
	font-weight: bold;
	font-size: 2.6vh;
	text-decoration: none;
	padding:1rem;
	margin-bottom:1rem;
	position: relative;
	z-index:20;
	transition: 0.4s;
	Width:13vh;
	height:13vh;
	border-radius:50%;
	
}
#letstalk:hover{
	background: black;
}
#letstalk:disabled{
	background: #BCBCBC !important;
	color:#DBDBDB !important;
}
#callstatus{
	position: absolute;
	bottom: 3rem;
	left:50vw;
	display: flex;
	align-items:flex-start;
	flex-direction: column;
	z-index: 10;
	
}
#callstatus span{
	font-size: 1.2vh;
	
	
}
#callstatus span a{
	color:#0685cb; 
}
.fullpage, .menu-page{
	
	transition-duration: 0.4s;
	overflow: hidden;
	position: absolute;
	z-index: 30;
	background:#E9EBEB;
	border: 2rem solid #FF6300;
	height: calc(100% - 4rem);
	width: calc(50% - 4rem);
	top:0rem;
	right:-50%;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	
}

.fullpage.on, .menu-page.on{
	opacity: 1;
}
.menu-page{
	align-items: flex-start;
	
}
.menu-page  .close{
	z-index: 10;
}
.menu-page.on{
	right:0;
}
div.scroll::-webkit-scrollbar-track {
  //    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
  background-color: transparent;
}

div.scroll::-webkit-scrollbar {
  background-color: transparent;
}

div.scroll::-webkit-scrollbar-thumb {
  //    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: transparent;
}
.menu-page .content{
	/*max-width:60%;*/
	margin:0rem;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow-y: scroll;
	/*text-align: justify; */
}
.menu-page .content > div{
	max-width: 60%;
	
}
.fullpage a.close, .menu-page a.close, #mobilePages a.close{
	width:3rem;
	display: block;
	height:3rem;
	position: absolute;
	top:2rem;
	right:2.3rem;
}
.menu-page h1{
	
	font-size:30pt;
	margin-bottom:30px;
}

.fullpage{
	width: calc(100% - 4rem);
	top:100%;
	right:0rem;
}
.fullpage.on{
	top:0% !important;
}
.fullpage .content{
	width:30%;
	min-width:30rem;
	height:calc(100% - 8rem);
	
	
}
.fullpage .content form{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	
}
.fullpage .content form input{
	display: block;
	
	height:4rem;
	
}
.fullpage .content form h1{
	font-size:30pt;
	margin-bottom:2rem;
}
.fullpage .content form input[type=text]{
	margin-bottom:2rem;
	font-size:12pt;
  text-indent:1.4rem;
  padding-right:1rem;
	width:calc(100% - 1rem);
	
}
.fullpage .content form input[type=submit]{
	
	background:#FF6300;
	color:white;
	font-weight: bold;
	font-size: 12pt;
	transition: 0.4s;
}
.fullpage .content form input[type=submit]:hover{
	background: black;
}

.fullpage.call{
	top:100%;
	background:#FF6300;
}
.fullpage.call .calling{
	position:relative;
}
.fullpage.call .calling img{
	width:6rem;
	position: absolute;
	bottom:2rem;
	left:-1.2rem;
	
	/*transition-duration: 0.2s;*/
	
	-webkit-animation-name: calling; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 0.4s; /* Safari 4.0 - 8.0 */
	animation-name: caliing;
	animation-duration: 0.4s;
	animation-iteration-count: infinite;
	animation-direction:alternate;
	
	
}
@-webkit-keyframes caliing {
  from {transform: scale(0.7, 0.7);}
  to {transform: scale(1, 1);}
}

/* Standard syntax */
@keyframes caliing {
  from {transform: scale(0.5, 0.5);}
  to {transform: scale(1, 1);}
}




/*Videocall*/
#localVideo{
	position: fixed;

	right: 0rem;
	bottom:0rem;
	width:25vw;
	height:calc(25vw * (3 / 4));
	background: black;
	border: 2rem solid #FF6300;
	z-index:10;
	
}
#remoteVideo{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0rem;
	left:0rem;
	background:black;
	
}






#videoMenu{
	position: absolute;
	z-index: 10;
	height:6rem;
	bottom:0rem;
	left:2rem;
	width:calc(100% - 25vw - 6rem);
	background:#FF6300;
	display: flex;
	justify-content:flex-end;
	align-items:center;
}
#videoMenu a{
	transition: 0.2s;
	border:0.2rem solid black;
	display: flex;
	justify-content:center;
	align-items:center;
	width:3rem;
	height:3rem;
	border-radius: 50%;
	font-size:1.2rem;
	text-decoration: none;
	margin-right:2rem;
	
}
#videoMenu a:hover{
	background: black;
	color:#FF6300;
}


/*videochat*/
  #videochat{
	  position: absolute;
	  z-index: 1100;
	  top:0px;
	  left:0px;
	  width:100%;
	  height:100%;
	  border:0px;
  }
  #mobilePages{
	  display: none;
	  
  }
  
  
  
 @media only screen  and (orientation: portrait){ 
	 
	 
	 
	#nick, #nick-small{
		position:absolute;
		/*left: -37rem !important; /*calc(100% -38rem)*/;
		left:-49vh;
	}
	
	
	.fullpage, .menu-page,  #mobilePages{
	
	transition-duration: 0.4s;
	
	position: absolute;
	z-index: 30;
	background:#E9EBEB;
	border: 1.5rem solid #FF6300;
	height: calc(100% - 3rem);
	width: calc(100% - 3rem);
	right:0rem;
	top:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	
	.fullpage.on, .menu-page.on{
		top:0% !important;
		display: flex;
		opacity: 1;
	}
		
	

}
@media only screen and (max-width: 800px){
	
	
	.fullpage .content{
	width:30%;
	min-width:20rem;
	height:calc(100% - 8rem);
	
	
	}
	 #background{
	
	width:calc(100% - 2rem);
	height:calc(100% - 2rem);
	
	border: 1rem solid #FF6300;
	
	-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
	
	}
	
	#videoMenu{
	position: absolute;
	z-index: 10;
	height:3rem;
	bottom:0rem;
	left:1rem;
	width:calc(100% - 25vw - 3rem);
	background:#FF6300;
	display: flex;
	justify-content:flex-end;
	align-items:center;
	}
	#videoMenu a{
	transition: 0.2s;
	border:0.1rem solid black;
	display: flex;
	justify-content:center;
	align-items:center;
	width:1.5rem;
	height:1.5rem;
	border-radius: 50%;
	font-size:0.6rem;
	text-decoration: none;
	margin-right:1rem;
	
	}
	
	
	 
	 #localVideo{
	position: absolute;
	
	border: 1rem solid #FF6300;
	
	
	}


	 #impressum{
		 display: none;
	 }
	 
	 
	 a.close > i{
	 display: inline;
	 position:relative;
	 
	}
	a.close > img{
	 display: none;
	}
	 .menu-page .content > div{
		 max-width:90% !important;
	 }
	 #menu{
		 display: none;
	 }
	
	
	
	
	.fullpage, .menu-page,  #mobilePages{
	
	transition-duration: 0.4s;
	
	position: absolute;
	z-index: 30;
	background:#E9EBEB;
	border: 1rem solid #FF6300;
	height: calc(100% - 2rem);
	width: calc(100% - 2rem);
	right:0rem;
	top:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	#mobilePages{
		background:#FF6300;
	}
	.fullpage, .menu-page{
		width: calc(100% - 2rem);
		top:100%;
		right:0rem;
		opacity: 0;
	}
	.fullpage.on, .menu-page.on{
		top:0% !important;
		display: flex;
		opacity: 1;
	}
	#mobilePages.on{
		top:0% !important;
		display: block;
		
	}

	#main-content{
		top:70vw !important;
		background:-webkit-linear-gradient(rgba(232,235,235,0) 0%, #e8ebeb 50.37%);
		display: flex;
		align-items: flex-end;
		width:100%;
		position: absolute;
		left:1rem;
		height: auto;
		bottom: 0;
	}
	#main-content > *{
	
	display: none;}


	
	
	
	
	
	img.dots{
		position: absolute;
		width:3rem;
		left:0rem;
		top:-2.5rem;
	}
	#mobileMenu,a.close{
		display: block;
		color: black;
		background:#FF6300;
		position: absolute;
		top:0rem;
		right:0rem;
		font-size: 1.5rem; 
		z-index: 20;
		padding: 1rem;
		
		
		width: 1.5rem !important;
		height: 1.5rem !important;
		text-align: center;
	}
	/*.fullpage a.close, .menu-page a.close, #mobilePages a.close{
		width:auto;
		display:inline;
		height:auto;
		font-size: 3rem; 
		position: absolute;
		top:0rem;
		right:0rem;
	}*/
	a.close{
		
		top:-1rem !important;
		right:-1rem !important;
		
		
	}
	
	
	
	
	#mobileSubMenu{
		display: flex;
		background: #FF6300;
	}
	#mobileSubMenu ul{
		list-style: none;
		width:100%;
		
	}
	#mobileSubMenu ul a{
		width:100%;
		font-weight: bold;
		text-decoration: none;
		display: block;
		text-align: center;
		font-size: 1rem !important;
		background: white;
		padding: 1rem 0rem;
		margin:1rem 0rem;
		
		
	}
	 
	
	

}
@media only screen and (max-width: 800px) and (orientation: portrait){
	#nick, #nick-small{
		position:absolute;
		z-index: -1;
		top:2rem;
		left:calc(-10% + 1rem);
		width:calc(120% - 2rem);
		height: auto;
		
		
		
	}
	
	
	#callstatus{
	
		display: flex;
		justify-content:center;
		flex-direction: column;
		align-items: center;
		
		bottom: 2rem;
		left: 0;
		right: 0;
		
	}
	
	/*(#letstalk{
		display:block;
		background: #FF6300;
		color:white;
		text-align:center;
		font-weight: bold;
		font-size: 14pt;
		text-decoration: none;
		padding:1.5rem;
		margin-bottom:0.5rem;
		position: relative;
		z-index:20;
		transition: 0.4s;
		Width:5rem;
		height:5rem;
		border-radius:50%;
	
	}

	#callstatus span{
		font-size: 7pt;
	}*/

}
@media only screen  and (orientation: landscape) and (max-width: 800px){ 
	
	#letstalk{

		font-size: 5.2vh;

		Width:26vh;
		height:26vh;
	
	
	}


	#callstatus span{
		font-size: 2.4vh;
	}
	
	
	
	#nick, #nick-small{
		display: none;
	}
	#mobileSubMenu ul{
		
		width:50%;
		
	}
	
	#callstatus{
	
		display: flex;
		justify-content:center;
		flex-direction: column;
		align-items: center;
		top:0;
		bottom:0;
		left: 0;
		right: 0;
		
	}
	}