*, *::before, *::after {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
  }
  
  
  /*================CONTAINER================*/
  
  
  .container {
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    
    @media (min-width: 576px) {
          .container {
              max-width: 540px;
          }
    }
    
    @media (min-width: 768px) {
          .container {
              max-width: 720px;
          }
    }
    
    @media (min-width: 992px) {
          .container {
              max-width: 960px;
          }
    }
    
    @media (min-width: 1200px) {
          .container {
              max-width: 1140px;
          }
    }
  
    /*================ROW================*/
    .row {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
    }
  
  
  
  
  /* For mobile phones: */
  [class*="col-"] {
      width: 100%;
  }
  
  @media only screen and (min-width: 768px) {
      /* For desktop: */
      
      .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
          margin-left: 10px;
          margin-right: 10px;
      }
      
      .grid-1	{width: 8.33%;}
      .grid-2	{width: 16.66%;}
      .grid-3	{width: 25%;}
      .grid-4	{width: 33.33%;}
      .grid-5	{width: 41.66%;}
      .grid-6	{width: 50%;}
      .grid-7	{width: 58.33%;}
      .grid-8	{width: 66.66%;}
      .grid-9	{width: 75%;}
      .grid-10 {width: 83.33%;}
      .grid-11 {width: 91.66%;}
      .grid-12 {width: 100%;}
  }