html{
    position:absolute;
    display:block;
    width:100%;
    height:100%;
overflow:hidden;
}
body{
position:absolute;
display:block;
width:100%;
height:100%;
margin:0px;
overflow:hidden;
}
.header{
    position:relative;
    display:block;
    width:100%;
    height:50px;
}
.body{
width:100%;
height:calc(100% - 50px);
margin:0;
z-index:1;
}
#logoLoginMenu{
    position:relative;
    display:block;
    width:100%;
    height:100%;    
}
#wsWord{
position:relative;
display:inline-block;
margin:0px;
vertical-align:top;
}

#logo{
position:relative;
display:inline-block;
width:49%;
height:100%;
}
#logo img{
position:relative;
display:inline-block;
height:150%;
}

#login{
    position:relative;
    display:inline-block;
    width:calc(50% - 50px);
  text-align:center;
    color:white;
  //background:#3498c8;

vertical-align:top;
z-index:5;
}
#loginExpander{
    position:relative;
    display:block;
    background:#03a9f4; 
    font-size:20pt;
text-shadow:1px 1px 1px black;
    max-height:100%;
    max-width:100px;
    vertical-align:center;
margin-left:auto;
    margin-top:0px;
    margin-bottom:0px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
vertical-align:center;

}

#signIn{
width:100%;
background:#03a9f4; 
max-height:500px;
padding-top:15px;
padding-bottom:15px;

}
#signIn label{
position:relative;
display:block;
text-align:center;
color:white;
font-size:22pt;
font-weight:bold;
text-shadow:1px 1px 4px gray;
}
#usernameInput{
position:relative;
display:block;
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}
#passwordInput{
position:relative;
display:block;
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}
#signInBtn{
position:relative;
display:block;
max-width:80%;
margin-left:auto;
margin-right:auto;
margin-top:20px;
font-size:20pt;
font-weight:bold;
border-radius:30px;
padding-left:20px;
padding-right:20px;
padding-top:4px;
padding-bottom:4px;
box-shadow:3px 3px 3px black;
}
#signUpBtn{
position:relative;
display:block;
max-width:80%;
margin-left:auto;
margin-right:auto;
margin-top:10px;
font-size:20pt;
font-weight:bold;
border-radius:30px;
padding-left:15px;
padding-right:15px;
padding-top:4px;
padding-bottom:4px;
box-shadow:3px 3px 3px black;
}
#orWord{
position:relative;
display:block;
text-align:center;
margin-top:5px;
margin-bottom:5px;
}
#menuExpander{
position:absolute;
right:0px;
display:inline-block;
width:50px;
height:50px;
background:lightgray;
}
#menuExpander .bar{
position:absolute;
display:block;
width:40px;
left:5px;
height:6px;
background:black;
}
#highbar{
top:9.5px;
}

#midBar1{
top:22px;
transform-origin:50% 50%;
transition-duration:1s;
}
#midBar2{
top:22px;
transform-origin:50% 50%;
transition-duration:1s;
}
.midBar1Morph{
transform:rotateZ(45deg);
transition-duration:.5s;
}
.midBar2Morph{
transform:rotateZ(-45deg);
transition-duration:1s;
}
#lowBar{
top:34.5px;
}

.hide{
opacity:0;
transition-duration:.5s;
}
#menu{
position:absolute;
display:block;
width:20%;
transform-origin:100% 50%;
transform:rotateY(90deg);
background:#f2f2f2;
right:0px;
top:50px;
margin-top:0px;
margin-bottom:0px;
transition-duration:1s;
list-style-type:none;
box-shadow:3px 3px 5px black;
padding-left:0;
}
.menuExpand{
transform:rotateY(0deg)!important;
transition-duration:.5s;
}
#menu li{
width:100%;
text-align:center;
font-size:20pt;
border:1px solid black;
}
#menu li:hover{
background:white;
box-shadow:3px 3px 3px lightgreen inset,-3px -3px 3px lightgreen inset;
text-shadow:2px 2px 5px lightblue;
}
#tagline{
text-align:center;
}
#left{
position:absolute;
display:block;
left:0px;
width:20%;
height:100%;
}
#mainMenuUL{
list-style:none;
padding-left:12px;

}
#mainMenuUL li{
color:#73dcfe;
font-size:24pt;
text-shadow:2px 2px 3px black;
font-weight:bold;
margin-top:35px;
margin-bottom:35px;
}
#mainMenuUL li img{
width:100%;
}
#mainMenuUL li:hover{
background:#73dcfe;
color:white;
}
#bannerSpace{
position:relative;
display:block;
width:56%;
margin-left:auto;
margin-right:auto;
background:lightgreen;
margin-top:40px;

}
.banner{
width:100%;
position:relative;
display:block;
}
.banner img{
width:100%;
position:absolute;
display:block;
}
#wordstrukBreakable{
position:absolute;
display:block;
width:100%;
height:100%;
z-index:100;
pointer-events:none;
}
#wordstrukBreakable img{
position:absolute;
display:block;
width:100%;
height:100%;
z-index:50;
 
}
#breakableFrag1{
transform-origin:50% 50%;
clip-path: polygon(74% 84%, 73% 58%, 44% 31%, 19% 63%);
}
#breakableFrag2{
transform-origin:50% 100%;
clip-path: polygon(100% 92%, 0 53%, 0 100%, 100% 100%);
}
#breakableFrag3{
transform-origin:100% 50%;
clip-path: polygon(56% 0, 100% 0, 100% 93%, 71% 83%, 68% 58%, 40% 45%);
}
#breakableFrag4{
transform-origin:50% 50%;
clip-path: polygon(0 0, 61% 0, 42% 41%, 0 16%);
}
#breakableFrag5{
transform-origin:0% 50%;
clip-path: polygon(0 16%, 0 69%, 31% 61%, 40% 36%);
}

.frag1Animation{
 animation: shatter-1 3s ease-out forwards; 
}
.frag2Animation{
 animation: shatter-2 3s ease-out forwards; 
}
.frag3Animation{
 animation: shatter-3 3s ease-out forwards; 
}
.frag4Animation{
 animation: shatter-4 3s ease-out forwards; 
}
.frag5Animation{
 animation: shatter-5 3s ease-out forwards; 
}

@keyframes shatter-1{
0%{transform:translateX(0px) translateY(0px) rotateX(0deg) rotateY(0deg) scale(100%);opacity:1}
50%{transform:translateX(0px) translateY(0px) rotateX(0deg) rotateY(0deg) scale(100%);opacity:1}
100%{transform:translateX(0px) translateY(400px) rotateX(400deg) rotateY(0deg) scale(0%);opacity:0}
}
@keyframes shatter-2{
0%{transform:translateX(0px) translateY(0px) rotateX(0deg) rotateY(0deg) scale(100%);opacity:1}
50%{transform:translateX(0px) translateY(0px) rotateX(0deg) rotateY(0deg) scale(100%);opacity:1}
100%{transform:translateX(0px) translateY(0px) rotateX(200deg) rotateY(0deg) scale(0%);opacity:0}
}

@keyframes shatter-3{
0%{transform:translateX(0px) translateY(0px) rotateX(0deg) rotateY(0deg) scale(100%);opacity:1}
50%{transform:translateX(0px) translateY(0px) rotateX(0deg) rotateY(0deg) scale(100%);opacity:1}
100%{transform:translateX(0px) translateY(0px) rotateX(400deg) rotateY(-900deg) scale(0%);opacity:0}
}

@keyframes shatter-4{
0%{transform:translateX(0px) translateY(0px) rotateX(0deg) rotateY(0deg) scale(100%);opacity:1}
50%{transform:translateX(0px) translateY(0px) rotateX(0deg) rotateY(0deg) scale(100%);opacity:1}
100%{transform:translateX(0px) translateY(0px) rotateX(400deg) rotateY(-500deg) scale(0%);opacity:0}
}

@keyframes shatter-5{
0%{transform:translateX(0px) translateY(0px) rotateX(0deg) rotateY(0deg) scale(100%);opacity:1}
50%{transform:translateX(0px) translateY(0px) rotateX(0deg) rotateY(0deg) scale(100%);opacity:1}
100%{transform:translateX(0px) translateY(0px)rotateX(400deg) rotateY(0deg) scale(0%);opacity:0}
}