/**************** BASE GRID *************** */
body {
    background-size: contain;
      background-position: center;
      background-repeat: repeat;
      background-image: url("../img/home/woodbg2.jpg");
}
.gridX {
    display: grid;
    /*    width: 100%;*/
    grid-template-columns: 1fr minmax(1200px, 50%) 1fr;
    /* background-size: contain;
      background-position: center;
      background-repeat: repeat;
      background-image: url("../img/home/woodbg2.jpg"); */
    /* min-height: 100vh; */
}

.grid {
    /* grid-column: 2; */
    width: 100%;
    /*    margin: 0 auto;*/
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 0 10px;
}

section {
    grid-column: 2;
    width: 100%;
    margin: 2em auto;
    padding: 2.5em 4em;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 0 10px;
    background: radial-gradient(circle at 50% 0%, #e6cc94 10%, #d1b16b);
    filter: drop-shadow(12px 10px 15px #000000);
}
col:first-child {
    margin-top: 0 !important;
}

.innerGrid {
    margin: 1em 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1em;
}
.tableGrid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.letterStyleBG {
    background: radial-gradient(circle at 50% 0%, #d5b190 10%, #d1b16b);
}

.shadowWrapper {
    width: 100%;
    height: 100%;
    /* background-image: linear-gradient(
      rgba(0, 0, 0, 0.4), 
      rgba(0, 0, 0, 0.2) 2.5%,
      rgba(255, 255, 255, 0.5) 24.75%,
      rgb(254, 233, 159, 0.4) 25%,
      rgb(61, 53, 26, 0.5) 25.25%,
      rgb(176, 155, 84, 0.3) 49.75%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(255, 255, 255, 0.4) 50.25%,
      rgba(61, 53, 26, 0.3) 74.75%,
      rgba(254, 233, 159, 0.4) 75%,
      rgba(255, 255, 255, 0.4) 75.25%,
      rgba(61, 53, 26, 0.3) 97.5%, 
      rgba(0, 0, 0, 0.2)
     ); */
    padding: 3.5em;
}


.col2 {
    grid-column: span 2;
    margin: 0.5em;
}

.col3 {
    grid-column: span 3;
    margin: 0.5em;
}

.col4, .long4 {
    grid-column: span 4;
    margin: 0.5em;
}

.col5 {
    grid-column: span 5;
    margin: 0.5em;
}

.col6 {
    grid-column: span 6;
}

.col7 {
    grid-column: span 7;
}

.col8 {
    grid-column: span 8;
}

.col9 {
    grid-column: span 9;
}

.col10 {
    grid-column: span 10;
}

.col11 {
    grid-column: span 11;
}

.col12 {
    grid-column: span 12;
}

.tb2 {
    grid-column: span 2;
}

.tb3 {
    grid-column: span 3;
}

.tb4 {
    grid-column: span 4;
}

.tb5 {
    grid-column: span 5;
}

.tb6 {
    grid-column: span 6;
}

.tb7 {
    grid-column: span 7;
}

.tb8 {
    grid-column: span 8;
}

.tb9 {
    grid-column: span 9;
}

.tb10 {
    grid-column: span 10;
}

.tb11 {
    grid-column: span 11;
}

.tb12 {
    grid-column: span 12;
}

.sm2 {
    grid-column: span 2;
}

.sm3 {
    grid-column: span 3;
}

.sm4 {
    grid-column: span 4;
}

.sm5 {
    grid-column: span 5;
}

.sm6 {
    grid-column: span 6;
}

.mapSize {
    grid-column: 2;
    width: 100%;
    height: auto;
    display: block;
}




@media only screen and (max-width: 1540px) {
    .gridX {
        display: grid;
        grid-template-columns: 20px 1fr 20px;
    }
    .sm2, .sm3, .sm4, .sm5, .sm6 {
        grid-column: span 4;
    }
    .long4 {
        grid-column: span 8;
    }
    section {
        padding: 3.5em 3.5em;
    }

}

@media only screen and (max-width: 1400px) {
    .col4 {
        grid-column: span 6;
    }

}

@media only screen and (max-width: 1100px) {
    .gridX {
        display: grid;
        grid-template-columns: 0px 1fr 0px;
    }

    [class*="col"] {
        grid-column: span 12;
    }
    
    .long4 {
        grid-column: span 12;
    }
    [class*="sm"] {
        grid-column: span 12;
    }
    section {
        padding: 2em 1em;
        }
    
    .shadowWrapper {
        width: 100%;
        height: 100%;
    }

}  
@media only screen and (max-width: 880px) {
    [class*="tb"] {
        grid-column: span 6;
    }

}