/**
* Layouts
*
*/

@import "elements";

#content, #center .page-title, #perfnode, #filters, #timeline, #timeline-container{ 
  .transition(height, 1s, ease-out); 
/*-webkit-transition: height, 5s, ease-out;
-moz-transition: height, 5s, ease-out;
-o-transition: height, 5s, ease-out;
transition: height, 5s, ease-out;
*/
}

#main{ height:97%; }

body.layout-intro{
  // #main{ height:97%; }
  
  #perfnode{ height:0%!important; }
  
  #filters{ height:0%; }
  
  #timeline{ height:65%;
    #timeline-container{ height:0%; }
  }
  
  #timeline-loader{ display:block; margin:0 auto 5px;}
}


body.layout-timeline{
  #main{ 
    // height:97%; 
    #content, #center .page-title{height:0%;}
  }
  
  #perfnode{ height:0%!important; }
  
  #filters{ height:30%; }
  
  #timeline{ height:65%;
    #timeline-container{ height:98%; }
  }
  
  #timeline-loader{ display:none; }


}

body.layout-perfnode{
  #main{ 
    // height:97%; 
    #content, #center .page-title{height:0%;}
  }
  
  #perfnode{ height:85%!important; }
  
  #filters{ height:0%; }
  
  #timeline{ height:3%;
    #timeline-container{ height:0%; }
  }
  
  #timeline-loader{ display:none; }
}

body>img{display: none;}

@media (max-width:799px) {
  body{
    overflow: hidden!important;
  }
  #container{
    margin: 0!important;
    width: 100vw!important;
    height: 100vh!important;
    overflow: hidden;
    &>.inner{
      padding:0!important;
      width:100%!important;
      height: 100vh!important;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      #header{
        height: 3vh;
        flex: 0 0 auto;
        height: auto;
        padding:0.5em;
        box-sizing: border-box;
      }
      #main{
        flex: 0 0 auto;
        overflow-x: hidden;
        overflow-y: auto;
        height: 96vh;
        box-sizing: border-box;
        #center{
          display: block;
          height: auto;
        }
      }
    }
  }
}