@import url("https://fonts.googleapis.com/css?family=Open+Sans");

/* docs styles */

html,
body {
  background: #f7f7f7;
  color: #333333;
  font-family: "Open Sans";
}

.docs {
  margin: 0px;
  padding: 40px;
}

.docs-container {
  margin-bottom: 40px;
  padding: 0px;
}

.docs-container h2 {
  margin: 0px 0px 10px 0px;
  padding: 0px;
}

.docs-container p {
  margin: 0px 0px 5px 0px;
  padding: 0px;
}

.docs-grid {
  margin: 40px 0px;
  padding: 0px;
}

.docs-grid .grid div {
  margin: 0px;
  padding: 0px;
  height: 80px;
  background-color: #dddddd;
  border-radius: 5px;
}

/* grid styles */

.grid {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .grid .col-1 {
    grid-column: span 1;
  }
  
  .grid .col-2 {
    grid-column: span 2;
  }
  
  .grid .col-3 {
    grid-column: span 3;
  }
  
  .grid .col-4 {
    grid-column: span 4;
  }
  
  .grid .col-5 {
    grid-column: span 5;
  }
  
  .grid .col-6 {
    grid-column: span 6;
  }
  
  .grid .col-7 {
    grid-column: span 7;
  }
  
  .grid .col-8 {
    grid-column: span 8;
  }
  
  .grid .col-9 {
    grid-column: span 9;
  }
  
  .grid .col-10 {
    grid-column: span 10;
  }
  
  .grid .col-11 {
    grid-column: span 12;
  }
  
  .grid .col-12 {
    grid-column: span 12;
  }
  
  @media only screen and (max-width: 1024px) {
    .grid {
      margin: 0px;
      padding: 0px;
      display: grid;
      grid-gap: 0px;
      grid-column-gap: 0px;
      grid-row-gap: 40px;
      grid-template-columns: 1fr;
    }
  
    .grid .col-1,
    .grid .col-2,
    .grid .col-3,
    .grid .col-4,
    .grid .col-5,
    .grid .col-6,
    .grid .col-7,
    .grid .col-8,
    .grid .col-9,
    .grid .col-10,
    .grid .col-11,
    .grid .col-12 {
      grid-column: span 1;
    }
  }