/* Home page CSS */

.hb1 {
    font-weight: bold;
    font-family: Arial, Helvetica;
    font-size: 3em;
    color: #fff;
}

body {
    background-color: #FFFFCC;
}

/* welcome text */

.welcome {
    margin: 8px;
}

.welcome p {
    font-weight: bold;
    font-family: Arial, Helvetica;
    font-size: 1.2em;
}

/* Banner grid has 2 columns */
.grid-banner-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: #000;
  border: 1px solid #fff;
}

/* Grid has 12 columns - this allows 2, 3 or 4 span multiples */

.grid-main-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  background-color: #000;
  border: 1px solid #fff;
  margin: 0px 8px 0px 8px;
}

.grid-main-container a {
    color: #fff;
    font-weight: bold;
}

.grid-main-item {
  background-color: #00f;
  color: #fff;
  padding: 15px;
  font-family: Arial, Helvetica;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.float-right {
    float: right;
    margin: 5px;
}

.small {
    font-size: 0.7em;
}

.grid-main-item p {
    margin: 6px 0px 12px 0px;
}

.grid-main-item:nth-child(1) {grid-column: 1 / span 6;}
.grid-main-item:nth-child(2) {grid-column: 7 / span 6;}
                                   
.grid-main-item:nth-child(3) {grid-column: 1 / span 4; background-color: #999999;}
.grid-main-item:nth-child(4) {grid-column: 5 / span 4; background-color: #999999;}
.grid-main-item:nth-child(5) {grid-column: 9 / span 4; background-color: #999999;}
                                   
.grid-main-item:nth-child(6) {grid-column: 1 / span 3;}
.grid-main-item:nth-child(7) {grid-column: 4 / span 3;}
.grid-main-item:nth-child(8) {grid-column: 7 / span 3;}
.grid-main-item:nth-child(9) {grid-column: 10 / span 3;}

.grid-main-item:nth-child(10) {grid-column: 1 / span 4; background-color: #000; color: #8888FF; align-self: center; }
.grid-main-item:nth-child(11) {grid-column: 5 / span 4; background-color: #000; text-align: center;}
.grid-main-item:nth-child(12) {grid-column: 9 / span 4; background-color: #000; color: #8888FF; align-self: center; text-align: right;}

.grid-main-item:nth-child(n+10) {border: none;}

@media (max-width:700px){
    /* Collapse 2nd row of 4 into 2 of 2 */
    .grid-main-item:nth-child(2n+6) {grid-column: 1 / span 6;}
    .grid-main-item:nth-child(2n+7) {grid-column: 7 / span 6;}
    
    /* Collapse bottom row into single column */
    .grid-main-item:nth-child(n+10) {grid-column: 1 / span 12; text-align: center; padding: 5px;}    

    .hb1 {    
        font-size: 2.2em;
    }
}

@media (max-width:350px){
    /* Collapse all into a single column */
    .grid-main-item:nth-child(1n) {grid-column: 1 / span 12;}
}