body{
    background-color: #b7d5e5;
      text-align: center;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    h1{
      margin: 0;
   }
   
   div#fullBox{
      display: flex;
       height: 90vh;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }

   .flex
   {
      /* basico */
      width: 800px;
      height: 400px;
      border: 4px solid #555;
      font: 14px Arial;
      justify-content :center;
      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      margin: 0 auto;
   }

   .flex > div
   {
    border-left: 1px solid #555;
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;
      width: 30px; 
      max-width: 400px;
      -webkit-transition: width 0.6s ease-out;
      transition: width 0.6s ease-out;
      
   }

   /* colors */
   .flex > div:nth-child(1){ background : #009246; }
   .flex > div:nth-child(2){ background : #F1F2F1; }
   .flex > div:nth-child(3){ background : #CE2B37; }
   .flex > div:nth-child(4){ background : blue; }
   .flex > div:nth-child(5){ background : yellow; }
   /* .flex > div:nth-child(6){ background : purple; align-self:auto; } */

   .flex > div:hover
   {
        width: 400px;
   }