/* ========================================================================================================================
Grid CSS (includes base mobile grid styles)
Copyright DesignGoblin
v.1.0 (2024-05-27)
=========================================================================================================================== */

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 { float: left; display: inline; }

    /* Base Grid */
    .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%; }


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

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





/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }