:root {
	--oc-w: calc((100% - 1280px + 32px) / 2);
}

.flexbox {
  
    padding: 5px;
    display: flex;
    position: relative;
    flex-flow: row wrap;
    align-content: center;
    float: left;
  }
  
  * {
    --nlc: no-repeat left center;
    transition: all 1s ease;
  }
  
  body {
    background: #858282;
    font-family: "Tahoma";
  }
  
  .title {    
    width: 30%;
    height: 100%;
  }
  .title dd {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAkFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADDIYgjAAAAL3RSTlMA4GCAcNCwMBD7zHgL9eYf/dnBE1Q7JAXz7pZjRhm3qY9ALBbUrZ2KbFpNMwm+o0/nJUoAAAEnSURBVDjLrZPZcoIwFIYPKGpC2EGQRVnctf3f/+0q6WQk7YQrv5vMJN8kORsJ14IOr3Ka4MKzpvgATlPD8hKaEuAYYf98b8CiP0I8OIjFnEAJx7cm1LaifwmRbV8L1kyELaDwaQghsac3VAtFTZSOa6wL/1l8WMjLlcbh8SsM7fkuhYBBx5VC5wG4ySeatUYvn9ju4GYsMv5hGYHdAhYbhQIOg4+lFPKNhhgFOKIO8ZWPQrODRnilEn5AF0QbGYXYOxq8vofegyrstoZErYswpY6xzpDJxoJLrygrQ6qfHHtKIlzetUiXioyISiB0Y6wMDUMJ8+0C4IIMN6QoqcVMuVucHMwJHABfzQnskM12lEhUR+mjp3NAZhpeiY8jKdT4a3jnXp3/AD9VMDFSOzKdAAAAAElFTkSuQmCC") var(--nlc);
  }
  
  h1 {
    margin-bottom: 10px;
  }
  
  dl {
    margin: 0;
    padding: 0;
  }
  
  dt {
    margin-top: 30px;
    padding-left: 8px;
    font-size: 20px;
    border-left: 4px solid #000;
  }
  
  dd {
    
    background-size: 32px 32px;
    margin: 0;
    padding: 8px 0 8px 48px;
    font-size: 14px;
    text-align: justify;
  }
  
  .stairs {
    padding-left: 20%;
    background-color: beige;
    width: 100%;
    height: 100%;
  }
  
  .row_1 {
    order: 1;
  }
  
  .row_2 {
    order: 2;
  }
  
  .row_3 {
    order: 3;
  }
  
  .row_4 {
    order: 4;
  }
  
  .row_5 {
    order: 5;
  }
  .row_6 {
    order: 6;
  } 
  .row_7 {
    order: 7;
  }
  
  .row_1 {
    margin-top: 20px;
  }
  
  .row_2, .row_4, .row_6 {
    margin: 0px 0;
  }
  
  .number {
    
    width: 90px;
    height: 70px;
    position: relative;
    float: left;
  }
  .number::before {
    
    background: inherit;
    width: 100%;
    height: 30px;
    top: -30px;
    left: 25px;
    display: block;
    position: absolute;
    transform-origin: 100%;
    transform: skewX(-60deg);
    box-shadow: inset 0 0 80px 0 rgba(0, 0, 0, 0.1);
    content: "";
  }
  
  .number_1 {
    background: #dfaa0c;
    margin-left: 300px;
  }
  
  .number_2 {
    background: #dfaa0c;
    margin-left: 250px;
  }
  
  .number_3 {
    background: #dfaa0c;
    margin-left: 200px;
  }
  
  .number_4 {
    background: #dfaa0c;
    margin-left: 150px;
  }
  
  .number_5 {
    background: #dfaa0c;
    margin-left: 100px;
  }
  .number_6 {
    background: #dfaa0c;
    margin-left: 50px;
  }
  .number_7 {
    background: #dfaa0c;
    margin-left: 0px;
  }

  h2 {
    top: 50%;
    left: 10px;
    position: absolute;
    font-size: 30px;
    transform: translate(0, -50%);
  }
  
  .desc {
    
    width: 1000px;
    height: 100px;
    position: relative;
    float: left;
    margin-left: 20px;
  }
  .desc dt {
    text-transform: capitalize;
  }
  
  .desc_winning dd {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAilBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAATAggvAAAALXRSTlMA+9lY8Dilcwfkj20gGQ7g082yq4h8XTO39J+amIxkVUlEPjwvKcbolIB+EhE8HlXeAAABXklEQVQ4y22SV27DMBAFSZqkelSs5t6dOve/XoxIdkjL87XADlfQwxMO4f6ziqLqcx+KlxgFSAkoI6aEtaTfdlnWbXtkPT0yR7enKoKoOrWa+fN+hko3EuRVITepYubvMy1NBdj0pkJlpM48YUndAr0YBNqapScoMg1oWwyCzlDu/o3ixB9qEDgVvDnCkWXiC8mSoyNsaT584aNh64aIDXwhsBg3RlnsfWFfSC/MUmaRK0SZLIVLzKp1hXZF7AnfEUf7L9gj0bfwOJCfa4BcQ33OOYgnNixml/U7vK8vswWbaR++JEVz+fm5NAXya9qHPjmXjJTnpJ/0DUrTJVYpm3SmBDMpFKBscDgEVgHPlUolA9crAzJ9Cmpkt2Mk9vqgGciFyBnQbh8CRgJ/HnFfedce7FisuuD+3RgIutWC3UNoktvLUCPT8Y90eLuUNMJnzfyeyVq8wmC8YUrsDSO/Qv89+xk2jEMAAAAASUVORK5CYII=") var(--nlc);
  }
  
  .desc_working dd {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAilBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAATAggvAAAALXRSTlMAOGXvHlAI+WsD3p2a9OlzYFdTSQ/xxbqzn3k9JyMZ48zJrHxbLtjQz6iBZxZ1o3lTAAAA60lEQVQ4y73RyZKCMBSF4UsDiWAzz4PYTj3pef/XExKogvJm67fk/IuQ0Nuk9bH8F+Z9j4nvmPYYWmUKvjA78LsnMUuIF2LWEe8MLciJdwigRGTS+QDkxePXRxplQ9ZeHe7848e4ABCmxKp/qYNmcfuAiipoJRfsEJMNTQomKGVOWDBndFDTFPi+IYiQqMB2QwDnZj/6nLTD/IiBUAGOboGNk75g/JEO8J1KrAXqTlu4S4BTEq52eaHJTyFUoPjRre97a6dc3UmMZty3v9lgI9sGnhDOx1omxDpIJF7lq+AOPrAXzs165dEbPAFKUDbDXDa5MwAAAABJRU5ErkJggg==") var(--nlc);
  }
  
  .desc_searching dd {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAArlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABeyFOlAAAAOXRSTlMAF/HpKM4D9fjusY1o0saslFki2YBsVksK38Kb49Z3XELmt6afioRRNhu8kXxgRg9yMB4G+j48K2LtcrPZAAAB/ElEQVQ4y32SV47jMBBES6IoKuecnXOc4OH9L7aUbI2N3YXfRwmgHtBNdmPk5M8o0WhprT/wH06mxvjM56nBmX7APyS68SMfIHHgrB+22+Cv/5G8yuodBgEzR010C6/sQwVncnoIG9ZiTY54suI0zSYHPAQ0tZqERHr2p7dWPtG7zUO4ptqk9uMpRpYU+HCorcnU4K7NGLUNFWod407GOpH1F9Qg3fP4eBU1HXGSFg8htUWomoTfHqDI/RHJMFDORQQ6RmHQA5FuioGir5U6rwKoF3mWaWIgbBVFWRpKzzcfPo1WlQvKw3sNIgs0TR7gQ0x8L8+3fjEdxlZ3IqzZs8SxSvSFs2wmZjGHYNuI6OhTcM6kBT1CIS3r77Zwh/f/FSTNcgCiALFh9DP7rlSR8nUULpVZzZZcAhQSmf2lhzHRY3bxI5e73jw3DcvQNPd7He72EFhVhsCWebX1xFMvy882/zB3UkRIWfgQqKE5Z1NdGpt0d8WMfAEJS2wVPRc23cCORkFhkfO5aKYkqbtxI+UVfC0YN4p8mrG3+4kJfe6UHKlT9y5ktFwzroecn+U1Rm5OHumeKgTJDZdkflt3AbUaB08Sm/PQ5B7j3Lih54tIuY8XgtgzinmTXscDd7HKM7whkINij3csjIu8eSecSFeWeIdl+/ZbQfX09g/DIC6VpIXvNwAAAABJRU5ErkJggg==") var(--nlc);
  }
  
  .desc_planning dd {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAnFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4jUzeAAAAM3RSTlMA4PFwIAXAsBP1G/lG7OTYjFUwp3MYC9SDaWU728a8rppAzF40LCcPA+bQubNOq6GVeR1v8sWSAAABaUlEQVQ4y32T25KCMBBEx2AkEVAUBERB8X5d3e3//7dNSLmxUqznIS/dYZj0DGmGcYQOzoUgQwLW64DhaXQR5Jw6yHosa/UJfOpkgL6qnwRAMP/fECP3bwxTMvwMXcNIciIP39SyYBfXkGDtpTlCmhRc6VDFQk+z5cawG0GRcPKxahg8oixAS2gMdLrHqPVrLQGtO1/QTE2bs7HRLY6Bsj19MFhcQ7gaY/nqnseFayihiQRxofQvDFzDJlgcxRol+bJR+nhGvGKa3sExzCFrrVuDU4JSKP3jT5arN533T5/aLKsA7DpyDa+4xRXo1WcAB9dg4r5hox+1WWJtw3qLe4sLp2zC6ThC2BE31djpnibqEh52YGzcLFJHgWt6OiL/Gzkbt8BGnXMAfYqYHVobd3uHh/cdDVF1jb2vyhtSxF2L0+Bs4t9L2W+LynFG78SItoJmnnzN4MNZ3rbzCJApGUTRsf6yeuqH/gUl+zhR9M4Z2wAAAABJRU5ErkJggg==") var(--nlc);
  }
  
  .desc_timing dd {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAb1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABt6r1GAAAAJHRSTlMA8xfjDQfbxZl9spaudQbXwYVJImZGQuip37WnLV/OtiwZFmyO6IxVAAABU0lEQVQ4y4VT2ZLEIAg0iebwmNz33Ov/f+OCmqF2rK34kCg0Am3DaImubPIkyZuyEyxeqUrsZyUq/XJfKu8mSHX5E144aybbeW716g5FSv5rhhY5wrau4TNuDn79xKM/lwPuB/et9hwRachfYDh/G7ryh3ONWXwdFWy3uK0HmCuXAOqveQzgNfSCSRQ2ZWKAwcYV8Af/IrP9t7+3awGRgnWAm8TIRvUk71ONbBITuDpWQjtog6rLl3e/wKZxk4GNNdYu7kqJ/HIoDlmXLuVibcOAkdYHTndr52WZrb1P3tICfwzg+y2kvmWO4nDkRsOlCJDmoEGASYvjhYcdAZTCsVaW/gEoRSgyXqHI0Ga8jjYDUX3s7T1Rnur1f6rPHuv8uYNgHjFgQ8GQ5DTnhpzmzWWQHIl2r0i0gyTRkuw3kr30so8GZ9U4ODKjwTkfvfPhPR3/X2IUK6UT8KPoAAAAAElFTkSuQmCC") var(--nlc);
  }
  
  @media (max-width: 860px) {
    dl, dt, dd, .row, .desc {
      width: 100%;
    }
  
    dt {
      padding-left: 0;
      border-left: none;
    }
  
    .stairs dt {
      display: none;
    }
  
    .row_1, .number, .desc {
      margin: 0;
    }
  
    .row_1 {
      order: 7;
    }
  
    .row_2 {
      order: 6;
    }
  
    .row_3 {
      order: 5;
    }  
    .row_4 {
      order: 4;
    }
  
    .row_5 {
      order: 3;
    }
    .row_6 {
      order: 2;
    }
    .row_7 {
      order: 1;
    }
    .row_7 {
      margin-top: 40px;
    }
  
    .number {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    .number::before {
      display: none;
    }
    .number::after {
      top: 50%;
      left: 100px;
      display: block;
      position: absolute;
      font-size: 20px;
      transform: translate(0, -50%);
    }
  
    .number_5::after {
      content: "Timing";
    }
  
    .number_4::after {
      content: "Planning";
    }
  
    .number_3::after {
      content: "Searching";
    }
  
    .number_2::after {
      content: "Working";
    }
  
    .number_1::after {
      content: "Winning";
    }
  
    h2 {
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  @media (max-width: 1239px) {
    .title, .stairs {
      width: 100%;
      height: auto;
    }
  
    h1 {
      width: 100%;
    }
  }