/*josh reset*/
      /* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}
      
      
body, .outer-wrapper--grey {
  background:#eee;
 
background:#F3F6F9
}
      header {
        background:#fff;
        border-bottom: solid 1px #DAE0EA;
        padding-left:20px;
      }

      header .wrapper {
        margin:0;
        padding:0;
      }

      .logo, .logo:hover {
        color:rgb(31, 41, 55);
        text-decoration: none;
      }

      footer {
        background:#1a1b1f;
        padding:20px;
      }
      
      footer p {
        margin:0;
      }
      
      footer .text-wrapper {
        display:flex;
        justify-content:space-between;
      }
      
      footer a, footer p {
        color: rgb(216 222 226 / 56%)
      }
      
      footer a:hover {
        color: rgb(216 222 226)
      }
      
      header h1 {
        margin:0px;
            margin: 0px;
    font-size: 26px;
    padding: 8px 0 8px 8px;
color:rgb(31, 41, 55);
      }
      .wrapper-outer {
        background:#fff;
        background:#F3F6F9
      }
.wrapper {
  width:90%;
  max-width:1200px;
  margin:0 auto;
  padding:20px;
}
      
      header img {
        display:inline-block;
        vertical-align:middle;
      }

h1 {
  //font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  display:inline-block;
          vertical-align:middle;
}
      
p, button {
  margin-bottom:1.5em;
//    font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body, p, button, input, select {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}
      
      .text-wrapper {
        width:95%;
        max-width:562px;
      }
      .pads {
        overflow:hidden;
        padding:40px;
        margin: 40px auto;
        width:562px;
        background:white;
        border-radius:2px;
        border:solid 1px #DAE0EA;
      }

       .sequencer {
        overflow:hidden;
        padding:40px;
        margin: 40px auto;
        width:722px;
        background:white;
        border-radius:2px;
        border:solid 1px #DAE0EA;
      }
      
      
      
      .pad-wrapper {
        
      }
      
      body {
        touch-action:manipulation:
      }
      .cell {
        touch-action: manipulation;
        border-radius:1px;
        background:#eee;
        box-shadow:0 0 2px rgba(0,0,0,.35);
        width:100px;
        height:100px;
        margin:10px;
        float:left;
        cursor:pointer;
      }
      
      @media only screen and (max-width: 660px) {
        header {
          padding-left:5%;
        }
        .pads,.sequencers {
          width:90%;
          margin-left:5%;
          margin-right:5%;
          padding:5%;

        }
        
        .pads .cell {
          height:0;
          width:21%;
          padding-bottom:21%;
          margin:2%;
        }

        .sequencer-label {
          margin-top:5px!important;
        }

        .sequencer .cell {
          width:18px!important;
          height:18px!important;
        }
        
              .cell::after {
         font-weight:600;       
        }
      }
      
      @media (hover: hover) and (pointer: fine) {
/*this media query stops hover states from getting stuck on touch devices*/
      .cell:hover {
        background:rgba(56, 163, 235, 0.4);
      }
              .cell:hover::after {
color:rgba(56, 163, 235, 1);
      }
      }
      
     .cell.active {
        background:rgba(56, 163, 235, 0.8);
                 box-shadow:0 0 2px rgba(0,0,0,.3);
      }
      
      .cell:nth-child(4n+1){
        clear:left;
      }
      
      
      .cell {
        position: relative; 
      }
      
      .cell::after {
        text-transform:uppercase;
        font-weight:600;
        letter-spacing:1px;
        color:#999;
        font-size:10px;
position: absolute;
        bottom:3px;
        left:4px;
      }
      

      
      .cell.active::after{
        color:#1989d3;
      }
      
      
      .cell[data-id="1"]::after{
        content: "Kick";
        
      }
      .cell[data-id="2"]::after{
        content: "Snare";
      }
      
      .cell[data-id="3"]::after{
        content: "Closed Hihat";
      }
      
            .cell[data-id="4"]::after{
        content: "Open Hihat";
      }
                  .cell[data-id="5"]::after{
        content: "Floor Tom";
      }
                  .cell[data-id="6"]::after{
        content: "Mid Tom";
      }
                  .cell[data-id="7"]::after{
        content: "High Tom";
      }
                  .cell[data-id="9"]::after{
        content: "Splash";
      }
      
            .cell[data-id="10"]::after{
        content: "Snare flam";
      }
       
      .cell[data-id="11"]::after{
        content: "Snap";
      }

            .cell[data-id="8"]::after{
        content: "Rimshot";
      }
      
            .cell[data-id="12"]::after{
        content: "Cowbell";
      }
      .cell[data-id="13"]::after{
        content: "Tambourine";
      }
            @media only screen and (max-width: 660px) {
             .cell[data-id="13"]::after{
        content: "Tamb";
      }       
      }
      .cell[data-id="14"]::after{
        content: "Clap";
      }
      .cell[data-id="15"]::after{
        content: "Ride";
      }
      .cell[data-id="16"]::after{
        content: "Crash";
      }



      /*Sequencer*/

      .sequencers {
      width:840px;
      margin:20px auto;
      }

      .sequencer {
        width:840px;
        margin-bottom: 0;
      }

      .sequencer-ui {
            overflow: hidden;
    padding: 40px;
    margin: 16px auto 40px;
    width: 840px;
    background: white;
    border-radius: 2px;
    border: solid 1px #DAE0EA;
      }

      .sequencer-row {
        overflow: hidden;
      }        

      .sequencer-label {
        float:left;
        text-transform:uppercase;
        font-weight:600;
        letter-spacing:1px;
        color:#999;
        font-size:10px;
        vertical-align: middle;
    margin-top: 10px;
    text-align: right;
    width:100px;
    margin-right:5px;
/*position: absolute;*/
        /*bottom:3px;*/
        /*left:4px;*/
      }

      .sequencer-label--short {
        display: none;
      }

      .sequencer .cell {
            width: 30px;
    height: 30px;
    margin: 1px;
    clear: none !important;
    box-shadow: none;
    border: solid .5px #ccc;
    background: #d9d9d9;
  }

  /* This bit prevents flash of unstyled content  */

      .sequencers .sequencer {
      display: none;
    }
    .sequencers .sequencer:first-child {
      display: block;
    }
    .sequencers.slick-initialized .sequencer {
      display: block;
    }

    .sequencer .cell[data-cell-index="0"],
    .sequencer .cell[data-cell-index="1"],
    .sequencer .cell[data-cell-index="2"],
    .sequencer .cell[data-cell-index="3"],
    .sequencer .cell[data-cell-index="8"],
    .sequencer .cell[data-cell-index="9"],
    .sequencer .cell[data-cell-index="10"],
    .sequencer .cell[data-cell-index="11"] {
      background:#e6e6e6;
    }


      .sequencer .cell.highlighted {
        background:rgba(56, 163, 235, 0.8);
      }

       @media (hover: hover) and (pointer: fine) {
/*this media query stops hover states from getting stuck on touch devices*/
      .sequencer .cell:hover {
        background:rgba(56, 163, 235, 0.4);
      }

      .sequencer .cell:active {
        background:rgba(56, 163, 235, 0.3);
      }
              .sequencer .cell:hover::after {
color:rgba(56, 163, 235, 1);
      }
      }
      

      .sequencer-tick-label {

        width: 30px;
        height: 30px;
        margin: 1px;
        clear: none !important;
        display: block;
        float: left;
        text-align: center;
  }

      .sequencer .cell {
        transition: background 0.15s;
      }

          .cell.cursor {
            transition-duration: 0s;
           background:rgba(56, 163, 235, 0.4)!important;
        }

        .cell.cursor.highlighted {
          background:rgba(56, 163, 235, 0.21)!important;
        }


         @media only screen and (max-width: 660px) {

.sequencer{
  padding: 16px;
}

      .sequencer-label {
    width:30px;
/*position: absolute;*/
        /*bottom:3px;*/
        /*left:4px;*/
      }

      .sequencer-label--short {
        display: block;
      }

            .sequencer-label--full {
        display: none;
      }
        }


/* Slick slider customisations */

/*.slick-prev:before, .slick-next:before {
  font-size:36px!important;
  border: solid 1px #DAE0EA;
  border-radius:50%;
  opacity: 1!important;
}*/