/*!
* 
* general responsive css
* created by Catherine Mwangi
* 
* Freelancer Programmer (Web Design, Moible apps & SEO Content Writing)
* 
* This CSS file is 100% Free, can be used in any project
* 
* 
* breaking point at 768px screen width
* 
* */

.wpccb-grid-row td{
  border: none !Important; 
}

.wpccb-grid-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 2px;
    counter-reset: div;
    grid-auto-rows: 1fr;
}


.wpccb-grid-row div:before {
    counter-increment: div;
}

.wpccb-grid-row div[class]:after {
    display: block;
    text-align: center;
    background: lightblue;
    color: crimson;
}


/* spanning cols, complete values missing */

.wpccb-col-box-1 {
    grid-column: auto/span 1;
}

.wpccb-col-box-2 {
    grid-column: auto/span 2;
}

.wpccb-col-box-3 {
    grid-column: auto/span 3;
}

.wpccb-col-box-4 {
    grid-column: auto/span 4;
}

.wpccb-col-box-5 {
    grid-column: auto/span 5;
}

.wpccb-col-box-6 {
    grid-column: auto/span 6;
}

.wpccb-col-box-7 {
    grid-column: auto/span 7;
}


.wpccb-col-box-8 {
    grid-column: auto/span 8;
}

.wpccb-col-box-9 {
    grid-column: auto/span 9;
}

.wpccb-col-box-10 {
    grid-column: auto/span 10;
}

.wpccb-col-box-11 {
    grid-column: auto/span 11;
}

.wpccb-col-box-12 {
    grid-column: auto/span 12;
}


.img-box{
  max-width: 100%;
}

/* Full Width below 768 pixels */
@media only screen and (max-width: 768px) {
  .wpccb-col-box-1, .wpccb-col-box-2, .wpccb-col-box-3, .wpccb-col-box-4, .wpccb-col-box-5, .wpccb-col-box-6, .wpccb-col-box-7, .wpccb-col-box-8, .wpccb-col-box-9, .wpccb-col-box-10, .wpccb-col-box-11, .wpccb-col-box-12{
     grid-column: auto/span 12;
  }
}

/*!
 * 
 * spanning fixed-columns. Fixed columns cannot be responsive,
 * 
 * They remain intact even on mobile devices
 * 
 * useful for short columns that does not need responsiveness
 * 
 * fixed columns cannot be used to create website cotainers
 * 
 * 
*/

.wpccb-col-box-fixed-1 {
    grid-column: auto/span 1;
}

.wpccb-col-box-fixed-2 {
    grid-column: auto/span 2;
}

.wpccb-col-box-fixed-3 {
    grid-column: auto/span 3;
}

.wpccb-col-box-fixed-4 {
    grid-column: auto/span 4;
}

.wpccb-col-box-fixed-5 {
    grid-column: auto/span 5;
}

.wpccb-col-box-fixed-6 {
    grid-column: auto/span 6;
}

.wpccb-col-box-fixed-7 {
    grid-column: auto/span 7;
}


.wpccb-col-box-fixed-8 {
    grid-column: auto/span 8;
}

.wpccb-col-box-fixed-9 {
    grid-column: auto/span 9;
}

.wpccb-col-box-fixed-10 {
    grid-column: auto/span 10;
}

.wpccb-col-box-fixed-11 {
    grid-column: auto/span 11;
}

.wpccb-col-box-fixed-12 {
    grid-column: auto/span 12;
}