/* lussmann style - made by FP, 2018 */

body,html{
width:100%;
height:100%;
margin:0;
padding:0;
color:#fff;
background-color:#ccc;
font-size:calc((.4em + .3vmin) + (.4em + .3vmax));;
line-height:100%;
font-family:'Roboto Condensed',sans-serif;
text-align:center;
overflow:hidden;
}

#grad{
position:fixed;
top:0;
left:0;
display:block;
width:100%;
height:100%;
z-index:2;
pointer-events:none;
overflow:hidden;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#33000000',GradientType=1 );
}

a{
color:#fff;
text-decoration:none;
}

a:hover{
color:#ddd;
}

b{
font-weight:700;
}

i{
font-style:normal;
font-weight:300;
}

#lad{
position:fixed;
top:0;
left:0;
display:block;
width:100%;
height:100%;
overflow:hidden;
background:url('website-img/lussmannlogoani.gif');
background-size:222px 33px;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-color:#fff;
z-index:1000;
overflow:hidden;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}

#lad img{
position:relative;
top:calc(50% - 15px);
left:calc(50% - 166.67px);
height:30px;
display:block;
}

#u,#d,#r,#l,#c{
position:fixed;
display:block;
width:33.33%;
height:33.33%;
z-index:5;
-webkit-tap-highlight-color:transparent;
}

#u{
top:0;
left:33.33%;
cursor:pointer;
}

#r{
top:33.33%;
right:0;
cursor:pointer;
}

#d{
bottom:0;
left:33.33%;
cursor:pointer;
}

#l{
top:33.33%;
left:0;
cursor:pointer;
}

#c{
top:33.33%;
left:33.33%;
}

.kon{
position:fixed;
display:block;
width:400px;
height:70px;
z-index:4;
top:0;
right:0;
overflow:hidden;
cursor:pointer;
background:url('website-img/lussmannlogo5.png');
background-size:333px 30px;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top 25px right 19px;
-webkit-tap-highlight-color:transparent;
}

#inf{
position:absolute;
display:block;
width:100%;
height:100%;
z-index:5;
overflow:hidden;
pointer-events:none;
top:0;
left:0;
}

p.inf1{
position:absolute;
text-align:left;
display:inline-block;
bottom:0;
left:0;
margin:0;
border:0;
width:50%;
padding:15px 0 25px 25px;
color:#fff;
font-weight:300;
}

p.inf2{
position:relative;
text-align:right;
top:78px;
float:right;
clear:both;
right:0;
margin:0;
border:0;
padding:0 25px 4px 0;
color:#fff;
font-weight:300;
font-size:85%;
pointer-events:auto;
}

p.inf3{
position:absolute;
text-align:right;
display:inline-block;
bottom:0;
right:0;
margin:0;
border:0;
padding:0 25px 25px 0;
color:#fff;
font-size:120%;
font-weight:700;
pointer-events:auto;
}

p.inf3 b{
display:inline-block;
pointer-events:auto;
cursor:pointer;
opacity:0.4;
}

p.inf3 b:hover{
opacity:1;
}

.arrow{
position:absolute;
border:solid #fff;
border-width: 0 5px 5px 0;
width:25px;
height:25px;
display:block;
opacity:0;
-webkit-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
}

#u .arrow{
top:20%;
left:calc(50% - 15px);
transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
}

#r .arrow{
top:calc(50% - 15px);
right:20%;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}

#d .arrow{
bottom:20%;
left:calc(50% - 15px);
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}

#l .arrow{
top:calc(50% - 15px);
left:20%;
transform:rotate(135deg);
-webkit-transform:rotate(135deg);
}

.circle{
position:absolute;
width:30px;
height:30px;
border-radius:50%;
border:solid #fff;
border-width:5px;
top:50%;
left:50%;
margin-right:-50%;
transform:translate(-50%, -50%);
transition:all 0.3s ease,opacity 0s;
opacity:0;
}

#cont{
position:fixed;
top:0;
left:0;
display:block;
width:100%;
height:100%;
overflow:hidden;
z-index:1;
}

.pic{
position:absolute;
width:100%;
height:100%;
display:block;
overflow:hidden;
text-align:center;
opacity:0;
z-index:1;
background:url('website-img/lussmannlogoani2.gif');
background-size:60px 50px;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

.pic.u{
top:-100%;
opacity:1;
}

.pic.r{
left:100%;
opacity:1;
}

.pic.d{
top:100%;
opacity:1;
}

.pic.l{
left:-100%;
opacity:1;
}

.show{
top:0;
left:0;
opacity:1;
z-index:1000;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
transition-timing-function:cubic-bezier(0,.5,.5,1);
}

.pic.kill{
opacity:1;
z-index:500;
}

.pic img{
position:relative;
display:block;
}

@media (max-width:79em){
.kon{
width:30%;
height:30%;
background:url('website-img/lalogo3.png');
background-size:52px 36px;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top 20px right 20px;
}
.kontakt{
width:400px;
height:70px;
background:url('website-img/lussmannlogo5.png');
background-size:333px 30px;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top 25px right 19px;
}
#u .arrow{
top:50%;
}
#d .arrow{
bottom:50%;
}
a:hover{
color:#ddd;
}
}

@-ms-viewport{
width:device-width;
}