@charset "utf-8";
body, html {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  background: #FC6;
  font-family: 'Titillium Web', sans-serif;
}

header, footer {
  display: block;
  min-height: 10%;

}
header{
  text-align: center;
}
#botones{
   display: none;
  }
section {
   display: -webkit-flex;
   display:         flex;
   display: -ms-flexbox;
   -webkit-flex-flow: column;
   -ms-flex-direction: column;
   flex-flow: column;


}
#esfera{
float: left;
margin-top: 10px;
margin-left: 40px;
margin-bottom: 10px;
position: relative;
}

#esfera p{
position: absolute;
bottom: 120px;
left: 110px;
font-size: 1.5em;
}
.centrar{
  text-align: center;
}
/*#imgcrono
{
width: 300px;
height: 300px;
position: relative;
background: url(esfera.png) no-repeat;
}

#crono
{
position: absolute;
top: 180px;
left: 115px;
}*/

/* Large desktop */
@media all and (min-width: 800px) {
  #botones {
    margin: 10px;
    display: block;
  }
  #cambiar ,#inicializar{
    width: 100px;
    height: 40px;
    margin-left: 10px;
  }
  .cabhistoria{
    text-align: center;
    margin-left: 50px;
  }

  section {
   height: 80%;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
   -ms-flex-direction: row;
   flex-flow: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;


    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
  .uno {
    background: #CFC;
    flex: 3 1 30%;
    order: 1;
  }
   .dos {
    background: #CCF;
    flex: 1 6 30%;
    order: 2;
  }
  .tres {
    background: #CCF;
    flex: 1 6 30%;
    order: 3;
  }
}