html{
    position:absolute;
    display:block;
    width:100%;
    height:100%;
}
body{
position:relative;
display:block;
width:100%;
height:100%;
margin:0px;
}
.header{
    position:relative;
    display:block;
    width:100%;
    height:100px;
    
}
.body{
width:100%;
height:calc(100% - 50px);
margin:0;

}
#logoLoginMenu{
    position:relative;
    display:block;
    width:100%;
    height:100%;    
}


#logo{
position:relative;
display:inline-block;
width:30%;
height:100%;
}
#mcLogoPic{
width:20%;
position:relative;
display:inline-block;
}
#mcLogoWord{
width:55%;
position:relative;
display:inline-block;
vertical-align:top;
}
#logoScene{
   position: absolute;
  height:100%;
  width:100%;
  left: 0px;
top:0px;
perspective:700px;
perspective-origin:-100px -100px;
overflow-x:visible;
overflow-y:visible;
}
.cube {

  width: 20px;
  height: 20px;
  position: absolute;
left:0px;
top:0px;
  transform-style: preserve-3d;
 transform:rotateX(100deg) rotateY(43deg) translateX(300px);

}
.cubeAddAnim{
animation:cubeAnimation 3s linear;
animation-fill-mode:forwards;
}
@keyframes cubeAnimation{
25%{transform:rotateX(70deg)  rotateY(30deg) translateX(200px)}
50%{transform:rotateX(50deg)  rotateY(18deg) translateX(100px)}
75%{transform:rotateX(10deg)  rotateY(8deg) translateX(50px)}
100%{transform:rotateX(0deg)  rotateY(0deg) translateX(0px)}
}
.side {
  position: absolute;
  width: 50px;
  height: 50px;
  display: block;
  text-align:center;
  background:gray;
  line-height:50px;
  border: 1px solid black;
  font-size:20pt;
  color:lightgreen;

}

.front {
overflow-x:visible;
transform:rotateZ(56deg) translateZ(400px) translateX(1200px) rotateY(200deg);
white-space:nowrap;
}
#mastercubeM{
position:relative;
display:inline-block;
font-size:40pt;
font-weight:bold;
color:lightgreen;
text-shadow:1px 1px 1px black, 2px 2px 1px lightblue;
margin-top:0px;
margin-bottom:0px;
}
#mastercubeTheRest{
position:relative;
display:inline-block;
margin-top:0px;
margin-bottom:0px;
overflow-x:visible;
margin-left:1px;
font-size:20pt;
font-weight:bold;
opacity:0;
text-shadow:1px 1px 1px black, 2px 2px 1px lightblue;

}
.wordFadeIn{
animation:WFI 1s linear;
animation-fill-mode:forwards;
}
@keyframes WFI{
25%{opacity:.3}
50%{opacity:.5}
75%{opacity:.7}
100%{opacity:1}
}
.frontAddAnim{
animation:frAnimation 3s linear;
animation-fill-mode:forwards;
}
@keyframes frAnimation{
25%{transform:rotateY(130deg) rotateZ(46deg) translateX(400px) translateZ(200px);}
50%{transform:rotateY(60deg) rotateZ(20deg) translateX(200px) translateZ(100px);}
75%{transform:rotateY(30deg) rotateZ(5deg) translateX(60px) translateZ(60px);}
100%{transform:rotateY(0deg) rotateZ(0deg) translateX(0px) translateZ(50px);}
}
.back{
transform:rotateZ(56deg) rotateY(44deg) translateY(300px) translateX(-32px);
transform-origin:50% 22%;
}
.backAddAnim{
animation:bkAnimation 3s linear;
animation-fill-mode:forwards;
}
@keyframes bkAnimation{
25%{transform:rotateZ(32deg) rotateY(32deg) translateY(221px) translateX(-22px);}
50%{transform:rotateZ(12deg) rotateY(12deg) translateY(165px) translateX(-8px);}
75%{transform:rotateZ(5deg) rotateY(5deg) translateY(38px) translateX(-4px);}
100%{transform:rotateZ(0deg) rotateY(0deg) translateY(0px) translateX(0px);}
}
.top {
  transform: rotateX(90deg) rotateZ(550deg);
    transform-origin:50% 0%;
}
.topAddAnim{
animation:tpAnimation 3s linear;
animation-fill-mode:forwards;
}
@keyframes tpAnimation{
25%{transform:rotateZ(350deg) rotateX(90deg)}
50%{transform:rotateZ(200deg) rotateX(90deg)}
75%{transform:rotateZ(100deg) rotateX(90deg)}
100%{transform:rotateZ(0deg) rotateX(90deg)}
}
.bottom {
  transform: rotateX(-90deg) rotateY(66deg) rotateZ(-103deg) translateZ(400px);
transform-origin:50% 100%;
}
.bottomAddAnim{
animation:btmAnimation 3s linear;
animation-fill-mode:forwards;
}
@keyframes btmAnimation{
25%{ transform:rotateX(-90deg) rotateY(53deg) rotateZ(-67deg) translateZ(280px)}
50%{ transform:rotateX(-90deg) rotateY(42deg) rotateZ(-3deg) translateZ(100px)}
75%{ transform:rotateX(-90deg) rotateY(20deg) rotateZ(-1deg) translateZ(44px)}
100%{ transform:rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)}
}
.left {
  //transform: rotateY(-90deg);
  transform:rotateZ(33deg) rotateX(79deg) rotateY(-189deg) translateZ(150px);
transform-origin:0% 50%;
}
.leftAddAnim{
animation:lftAnimation 3s linear;
animation-fill-mode:forwards;
}
@keyframes lftAnimation{
25%{transform:rotateZ(20deg) rotateX(44deg) rotateY(-150deg) translateZ(98px)}
50%{transform:rotateZ(5deg) rotateX(16deg) rotateY(-122deg) translateZ(43px)}
75%{transform:rotateZ(2deg) rotateX(4deg) rotateY(-100deg) translateZ(29px)}
100%{transform:rotateZ(0deg) rotateX(0deg) rotateY(-90deg) translateZ(0px)}
}
.right {
  transform: rotateY(90deg);
transform-origin:100% 50%;
}

#login{
    position:relative;
    display:inline-block;
    width:calc(50% - 50px);
  text-align:center;
    color:white;
  background:#3498c8;
border-top-right-radius:40px;
vertical-align:top;
z-index:5;
}
#loginExpander{
    
    position:relative;
    display:block;
    background:#3498c8; 
    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;
border-top-right-radius:30px;
}

#signIn{
width:100%;
background:#3498c8; 
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;
}
#pitch{
position:relative;
display:block;
height:calc(100% - 100px);
}
#pitch h2{
position:relative;
display:block;
}
#pitchBody{
position:relative;
display:block;
margin:50px;
font-size:25pt;
overflow-y:scroll;
height:100%;
}
#pitchBody img{
height:300px;
float:left;
margin-right:20px;
}