/* charset */
@charset "utf-8";

/* imports */
@import url(http://fonts.googleapis.com/css?family=Gabriela);


* {
	box-sizing: border-box;

    font-family: Tahoma, Geneva, sans-serif;
}

body {
	width:100%;
	height:100%;
	
	min-width:900px;
	min-height:800px;
	
	margin:0;
	padding:0;

	background: #fafafa url("../imgs/bg_grunge.jpg") no-repeat fixed center center;
	background-size: cover;
}

#bgImage{
	display:none;
}

a{
	margin:0px;
	padding:0px;
	
	text-decoration:underline;
	color:rgba(0,0,0,1);
}

#preloader{
	width:300px;
	height:70px;
	
	border-color:#999;
	border-radius:10px;
	border-style:solid;
	border-width:1px;
	
	position:absolute;
	top:50%;
	left:50%;
	
	margin:-35px 0 0 -150px;
	
	background-color:#F2F2F2;
	
	-webkit-box-shadow:0px 10px 50px #000000;
	-ms-box-shadow:0px 10px 50px #000000;
	-o-box-shadow:0px 10px 50px #000000;
	box-shadow:0px 10px 50px #000000;
}
#progressBar{
	width:5px;
	height:35px;
	
	border-radius:10px;
	border-style:solid;
	border-width:1px;
	border-color:rgba(221,45,0,1);
	
	position:absolute;
	top:10px;
	left:10px;
	
	background-color:#F30;
	
	-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
	-ms-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
	-o-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
	box-shadow:0px 1px 1px rgba(0,0,0,0.2);
}
#progressText{
	width:100%;
	
	position:absolute;
	
	bottom:-7px;
	
	text-align:center;
	text-transform:uppercase;
	
	color:#000;
	
	font-size:12px;
	font-stretch: condensed;
}

#jbLogo{
	opacity:0;
	
	position:absolute;
	
	top:50%;
	left:50%;
	
	pointer-events:none;
	
	margin:50px 0 0 100px;
}

#mainBox {
	position:absolute;
	top:50%;
	left:50%;

	width: 800px;
	height: 600px;

	opacity: 0;

	border-radius:10px;

	animation: fade-in 1s;
    animation-fill-mode: forwards;

	background-color:rgba(255,255,255,0);

	transform: translate(-50%, -50%);
}

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#header {
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 10px;
}

#header img {
	padding-right: 10px;
}

#header p {
    font-family: "Gabriela", Tahoma, sans-serif;
	margin: 0;
}

#header p.big {
    font-size: 2rem;
}

#header p.small {
	font-size: 1rem;
}

#headline {
	width: 100%;

	padding: 10px;

	font-size: 0.75rem;
	text-transform: uppercase;
	color: #FFF;
	font-family: Tahoma, Geneva, sans-serif;

	background-color: #000;
}

#portrait {
	width: 270px;
	height: 600px;
	
	border-radius: 10px;
	
	background-image: url(../imgs/netti_visitenkarte.png);
	background-position: left center;
	background-repeat: no-repeat;
	
	box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
}

#visitingCard {
	position:absolute;
	top:0;
	left:0;
	
	width: 800px;
	height: 600px;

	display: flex;
	justify-content: space-between;
	
	border-radius: 10px;
	
	background-color:rgba(255,255,255,0);
}

#container {
	position: relative;
	
	width: 500px;
	height: 600px;
	
	border-radius:10px;
	
	background-color:rgba(255,255,255,1);
	
	box-shadow:0px 10px 20px rgba(0,0,0,0.5);
}

#container .overlay {
	position: absolute;
	bottom: 0;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;

	overflow: hidden;

	background: #FFFFFF;

	transition: top 200ms ease-in-out;
}

#container .overlay.active {
	top: 0;

	overflow: auto;
}

#container .overlay .overlay-container {
	padding: 1rem;

	display: none;
}

#container .overlay.active .overlay-container {
	display: block;
}

#container .overlay .overlay-container .headline {
	margin-top: 0;
}

#container .overlay .close-button {
	position: absolute;
	top: 0;
	right: 0;

	width: 2rem;
	height: 2rem;

	cursor: pointer;

	margin: 0.5rem;

	background: url("../imgs/close.svg") center center no-repeat;
	background-size: contain;

	transition: transform 200ms ease-in-out;
}

#container .overlay .close-button:hover {
	transform: rotate(90deg);
}

#impressumContent {
	width:780px;
	height:600px;
	
	position:absolute;
	
	overflow:auto;
	
	opacity:0;
	
	top:0px;
	left:0px;
	
	padding-left:25px;
	
	color: #F8F8F8;
	display:none;
	
	border-radius:10px;
	
	background-image:url(../imgs/impressum/linen_256x256.jpg);
	
	box-shadow:inset 0px 0px 10px #000000;
	-webkit-box-shadow:inset 0px 0px 10px #000000;
	-moz-box-shadow:inset 0px 0px 10px #000000;
	-o-box-shadow:inset 0px 0px 10px #000000;
}
#impressumContent a{
	color: #FF3300;
}

#closeButton{
	position: absolute;
	
	top: 20px;
	right: 20px;
	
	z-index: 9999;

    cursor: pointer;
}

#video-container {
    background: #000;
}

#video {
    width: 100%;
    height: 282px;
}

#footer {
    width: 100%;
}

#footer ul {
    width: 100%;

    display: flex;
    align-content: space-between;
    justify-content: center;

    margin: 0;
    padding: 10px;

    list-style: none;

    background-color: #000000;
}

#footer ul li {
    flex-grow: 1;

    cursor: pointer;

    color: #FFFFFF;
    font-size: 0.75rem;
    text-transform: uppercase;
}

#footer ul li:hover {
    color: #f96921;
}

#footer .data-privacy {
	position: absolute;
	bottom: 0;
	right: 0;

	padding: 0.35rem;

	cursor: pointer;

	color: #000;
	text-decoration: none;
}

#footer .data-privacy:hover {
	color: #f96921;
}

#content {
    width: 100%;

    font-size: 0.75rem;
}

#content > div {
    display: none;

    padding: 10px;
}

#content #contact {
    padding: 0;
}

#content #contact .columns {
    display: flex;
}

#content #contact .columns > table {
    flex-grow: 1;

    padding: 10px;
}

#content #products p {
    margin: 0;
}