div.flex {
    position:relative;
  display: -webkit-flex;
  display: flex;
  display: -ms-flexbox;
  display: -moz-flexbox;
   position:relative;
  -ms-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -moz-box-flex-flow: row wrap;
  flex-flow: row wrap;
  width:100%;
  height:auto;
  min-height:100vh;
  background:#eee;
  padding:0;
  padding-bottom:1em;
  /* This aligns items to the end line on main-axis */
  justify-content:flex-start;
  position:relative;
  overflow:auto;
  background:#999;
}
    
.flex.hide {
    display:none;
}


div.slide-body {
    min-height:25em;
}
div.flex div.cell {
    width:calc(33.3% - 10px);
    
}
div.max div.flex div.cell {
    width: 33.3%-30px !important;
}

div.flex div.cell, 
div#sValue
{
    position:relative;
    padding:5px;
    overflow-y:auto; 
    overflow-x:hidden;
    margin:10px 4px; 
    background:#fff;
    padding-bottom:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

    box-sizing: border-box;
    height: calc(100vh - 2em);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: inset 0 0 3px #aaa;
    -moz-box-shadow: inset  0 0 3px #aaa;
    -webkit-box-shadow: inset 0 0 3px #aaa;
}
div.flex div.cell:hover{
   -webkit-box-shadow: 3px 3px 5px 6px #555;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #555;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 3px 5px 6px #555;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  
}