* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  /* grid styles */
  
  .item{
      min-height: 200px;
      margin: 0px;
      padding: 20px;
      
  }
 
  /* For mobile phones: */
  .flexcontainer {
    max-width: 1200px;
    margin: 0 20px;
    flex-wrap: wrap;
  }

  .col-1 { width: 100%; }
  .col-2 { width: 100%; }
  .col-3 { width: 100%; }
  .col-4 { width: 100%; }
  .col-5 { width: 100%; }
  .col-6 { width: 100%; }
  .col-7 { width: 100%; }
  .col-8 { width: 100%; }
  .col-9 { width: 100%; }
  .col-10 {width: 100%; }
  .col-11 {width: 100%; }
  .col-12 {width: 100%; }

  /*tablet*/
  @media (min-width: 761px) and (max-width: 1024px) {
    .flexcontainer {
        max-width: 1024px;
        margin: 0 40px;
        flex-wrap: wrap;
      }
  .flexcontainer {display:flex;}
  .col-t-1 {width: 8.33%;}
  .col-t-2 {width: 16.66%;}
  .col-t-3 {width: 25%;}
  .col-t-4 {width: 33.33%;}
  .col-t-5 {width: 41.66%;}
  .col-t-6 {width: 50%;}
  .col-t-7 {width: 58.33%;}
  .col-t-8 {width: 66.66%;}
  .col-t-9 {width: 75%;}
  .col-t-10 {width: 83.33%;}
  .col-t-11 {width: 91.66%;}
  .col-t-12 {width: 100%;}
  }
  /*desktop*/
@media (min-width: 1025px) {
    .flexcontainer {
        max-width: 1200px;
        margin: 0 auto;
        flex-wrap: wrap;
      }
.flexcontainer {display:flex;}
  .col-1 { width: 8.33%; }
  .col-2 { width: 16.66%; }
  .col-3 { width: 25%; }
  .col-4 { width: 33.33%; }
  .col-5 { width: 41.66%; }
  .col-6 { width: 50%; }
  .col-7 { width: 58.33%; }
  .col-8 { width: 66.66%; }
  .col-9 { width: 75%; }
  .col-10 {width: 83.33%; }
  .col-11 {width: 91.66%; }
  .col-12 {width: 100%; }
}