

/* our responsive css */

.custom-grid-row {
  	display: grid;
  	grid-template-columns: repeat(12, 1fr);
  	grid-gap: 15px;
  	counter-reset: div;
}


.custom-grid-row div:before {
  	counter-increment: div;
}

.custom-grid-row div[class]:after {
  	display: block;
  	text-align: center;
  	background: lightblue;
  	color: crimson;
}


/* spanning cols, complete values missing */

.custom-col-box-1 {
  	grid-column: auto/span 1;
}

.custom-col-box-2 {
  	grid-column: auto/span 2;
}

.custom-col-box-3 {
  	grid-column: auto/span 3;
}

.custom-col-box-4 {
  	grid-column: auto/span 4;
}

.custom-col-box-5 {
  	grid-column: auto/span 5;
}

.custom-col-box-6 {
  	grid-column: auto/span 6;
}

.custom-col-box-7 {
  	grid-column: auto/span 7;
}


.custom-col-box-8 {
  	grid-column: auto/span 8;
}

.custom-col-box-9 {
  	grid-column: auto/span 9;
}

.custom-col-box-10 {
  	grid-column: auto/span 10;
}

.custom-col-box-11 {
  	grid-column: auto/span 11;
}

.custom-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) {
  .custom-col-box-1, .custom-col-box-2, .custom-col-box-3, .custom-col-box-4, .custom-col-box-5, .custom-col-box-6, .custom-col-box-7, .custom-col-box-8, .custom-col-box-9, .custom-col-box-10, .custom-col-box-11, .custom-col-box-12{
  	 grid-column: auto/span 12;
  }
}



/*fixed items*/
.custom-fixed-col-box-1 {
    grid-column: auto/span 1;
}

.custom-fixed-col-box-2 {
    grid-column: auto/span 2;
}

.custom-fixed-col-box-3 {
    grid-column: auto/span 3;
}

.custom-fixed-col-box-4 {
    grid-column: auto/span 4;
}

.custom-fixed-col-box-5 {
    grid-column: auto/span 5;
}

.custom-fixed-col-box-6 {
    grid-column: auto/span 6;
}

.custom-fixed-col-box-7 {
    grid-column: auto/span 7;
}


.custom-fixed-col-box-8 {
    grid-column: auto/span 8;
}

.custom-fixed-col-box-9 {
    grid-column: auto/span 9;
}

.custom-fixed-col-box-10 {
    grid-column: auto/span 10;
}

.custom-fixed-col-box-11 {
    grid-column: auto/span 11;
}

.custom-fixed-col-box-12 {
    grid-column: auto/span 12;
}

