/* ------- GRID STYLE ------- */

#gridcontainer {
    display: grid;
    margin: auto;
    grid-gap: 7px;
}

.nest-itin {
    display: grid;
    grid-gap: 2px;
}

/* ------- GRID LAYOUT | MOBILE 4 COLUMN ------- */

@media (max-width: 480px) {

    #mobile-hide, #screen-only {
        display: none;
    }
}

/* ------- GRID LAYOUT | TABLET 8 COLUMN ------- */

@media screen and (max-width: 768px) and (min-width: 481px) {

    #gridcontainer {
        grid-template-columns: repeat(8, 1fr);
    }

    #tablet-hide, #screen-only {
        display: none;
    }

    .white2, .lucid2, .heather2, .lila2, .white2-span2, .lucid2-span2, .heather2-span2, .lila2-span2, .white2-span3, .lucid2-span3, .heather2-span3, .lila2-span3, .white2-span4, .lucid2-span4, .heather2-span4, .lila2-span4 {
        grid-column: span 4;
    }

    .white3, .lucid3, .heather3, .lila3, .white3-span2, .lucid3-span2, .heather3-span2, .lila3-span2, .white3-span3, .lucid3-span3, .heather3-span3, .lila3-span3, .white3-span4, .lucid3-span4, .heather3-span4, .lila3-span4 {
        grid-column: span 4;
    }

    header, .theme, .white4, .lucid4, .heather4, .lila4, .white4-span2, .lucid4-span2, .heather4-span2, .lila4-span2, .white4-span3, .lucid4-span3, .heather4-span3, .lila4-span3, .white4-span4, .lucid4-span4, .heather4-span4, .lila4-span4 {
        grid-column: span 4;
    }

    .white6, .lucid6, .heather6, .lila6, .white6-span2, .lucid6-span2, .heather6-span2, .lila6-span2, .white6-span3, .lucid6-span3, .heather6-span3, .lila6-span3, .white6-span4, .lucid6-span4, .heather6-span4, .lila6-span4 {
        grid-column: span 4;
    }

    .white8, .lucid8, .heather8, .lila8, .white8-span2, .lucid8-span2, .heather8-span2, .lila8-span2, .white8-span3, .lucid8-span3, .heather8-span3, .lila8-span3, .white8-span4, .lucid8-span4, .heather8-span4, .lila8-span4 {
        grid-column: span 8;
    }

    nav, .divider, .dividertop, footer, .white12, .lucid12, .heather12, .lila12 {
        grid-column: span 8;
    }

    .white2-span2, .lucid2-span2, .heather2-span2, .lila2-span2, .white3-span2, .lucid3-span2, .heather3-span2, .lila3-span2, .white4-span2, .lucid4-span2, .heather4-span2, .lila4-span2, .white6-span2, .lucid6-span2, .heather6-span2, .lila6-span2, .white8-span2, .lucid8-span2, .heather8-span2, .lila8-span2 {
        grid-row: span 2;
    }

    .white2-span3, .lucid2-span3, .heather2-span3, .lila2-span3, .white3-span3, .lucid3-span3, .heather3-span3, .lila3-span3, .white4-span3, .lucid4-span3, .heather4-span3, .lila4-span3, .white6-span3, .lucid6-span3, .heather6-span3, .lila6-span3, .white8-span3, .lucid8-span3, .heather8-span3, .lila8-span3 {
        grid-row: span 3;
    }

    .white2-span4, .lucid2-span4, .heather2-span4, .lila2-span4, .white3-span4, .lucid3-span4, .heather3-span4, .lila3-span4, .white4-span4, .lucid4-span4, .heather4-span4, .lila4-span4, .white6-span4, .lucid6-span4, .heather6-span4, .lila6-span4, .white8-span4, .lucid8-span4, .heather8-span4, .lila8-span4 {
        grid-row: span 4;
    }

    .nest-itin {
        grid-template-columns: repeat(8, 1fr);
        grid-column: span 8;
    }

    .day-pic {
        grid-column: span 2;
    }

    .day {
        grid-column: span 6;
    }

    .form-span8 {
        grid-column: span 8;
        grid-row: span 1;
    }

    .form-span10 {
        grid-column: span 8;
        grid-row: span 1;
    }

    .form-span12 {
        grid-column: span 8;
        grid-row: span 1;
    }
}

/* ------- GRID LAYOUT | SCREEN 12 COLUMN ------- */

@media screen and (min-width: 769px) {

    #gridcontainer {
        grid-template-columns: repeat(12, 1fr);
        max-width: 1440px;
    }

    #screen-hide {
        display: none;
    }

    .white2, .lucid2, .heather2, .lila2, .white2-span2, .lucid2-span2, .heather2-span2, .lila2-span2, .white2-span3, .lucid2-span3, .heather2-span3, .lila2-span3, .white2-span4, .lucid2-span4, .heather2-span4, .lila2-span4 {
        grid-column: span 2;
    }

    .white3, .lucid3, .heather3, .lila3, .white3-span2, .lucid3-span2, .heather3-span2, .lila3-span2, .white3-span3, .lucid3-span3, .heather3-span3, .lila3-span3, .white3-span4, .lucid3-span4, .heather3-span4, .lila3-span4 {
        grid-column: span 3;
    }

    header, .theme, .white4, .lucid4, .heather4, .lila4, .white4-span2, .lucid4-span2, .heather4-span2, .lila4-span2, .white4-span3, .lucid4-span3, .heather4-span3, .lila4-span3, .white4-span4, .lucid4-span4, .heather4-span4, .lila4-span4 {
        grid-column: span 4;
    }

    .white6, .lucid6, .heather6, .lila6, .white6-span2, .lucid6-span2, .heather6-span2, .lila6-span2, .white6-span3, .lucid6-span3, .heather6-span3, .lila6-span3, .white6-span4, .lucid6-span4, .heather6-span4, .lila6-span4 {
        grid-column: span 6;
    }

    .white8, .lucid8, .heather8, .lila8, .white8-span2, .lucid8-span2, .heather8-span2, .lila8-span2, .white8-span3, .lucid8-span3, .heather8-span3, .lila8-span3, .white8-span4, .lucid8-span4, .heather8-span4, .lila8-span4 {
        grid-column: span 8;
    }

    nav, .divider, .dividertop, footer, .white12, .lucid12, .heather12, .lila12 {
        grid-column: span 12;
    }

    .white2-span2, .lucid2-span2, .heather2-span2, .lila2-span2, .white3-span2, .lucid3-span2, .heather3-span2, .lila3-span2, .white4-span2, .lucid4-span2, .heather4-span2, .lila4-span2, .white6-span2, .lucid6-span2, .heather6-span2, .lila6-span2, .white8-span2, .lucid8-span2, .heather8-span2, .lila8-span2 {
        grid-row: span 2;
    }

    .white2-span3, .lucid2-span3, .heather2-span3, .lila2-span3, .white3-span3, .lucid3-span3, .heather3-span3, .lila3-span3, .white4-span3, .lucid4-span3, .heather4-span3, .lila4-span3, .white6-span3, .lucid6-span3, .heather6-span3, .lila6-span3, .white8-span3, .lucid8-span3, .heather8-span3, .lila8-span3 {
        grid-row: span 3;
    }

    .white2-span4, .lucid2-span4, .heather2-span4, .lila2-span4, .white3-span4, .lucid3-span4, .heather3-span4, .lila3-span4, .white4-span4, .lucid4-span4, .heather4-span4, .lila4-span4, .white6-span4, .lucid6-span4, .heather6-span4, .lila6-span4, .white8-span4, .lucid8-span4, .heather8-span4, .lila8-span4 {
        grid-row: span 4;
    }

    /* ------- NESTED GRID LAYOUT | for SCREEN ------- */

    .nest-itin {
        grid-template-columns: repeat(12, 1fr);
        grid-column: span 12;
    }

    .day-pic {
        grid-column: span 2;
    }

    .day {
        grid-column: span 6;
    }

    .form-span8 {
        grid-column: span 4;
        grid-row: span 8;
    }

    .form-span10 {
        grid-column: span 4;
        grid-row: span 10;
    }

    .form-span12 {
        grid-column: span 4;
        grid-row: span 12;
    }
}

/* ------- GRID LAYOUT STYLING ------- */

.lucid2, .lucid3, .lucid4, .lucid6, .lucid8, .lucid12, .lucid2-span2, .lucid3-span2, .lucid4-span2, .lucid6-span2, .lucid8-span2, .lucid2-span3, .lucid3-span3, .lucid4-span3, .lucid6-span3, .lucid8-span3, .lucid2-span4, .lucid3-span4, .lucid4-span4, .lucid6-span4, .lucid8-span4 {
    padding: 7px;
    color: #FFF;
}

.white2, .white3, .white4, .white6, .white8, .white12, .white2-span2, .white3-span2, .white4-span2, .white6-span2, .white8-span2, .white2-span3, .white3-span3, .white4-span3, .white6-span3, .white8-span3, .white2-span4, .white3-span4, .white4-span4, .white6-span4, .white8-span4 {
    padding: 7px;
    background: #FFF;
}

.lila2, .lila3, .lila4, .lila6, .lila8, .lila12, .lila2-span2, .lila3-span2, .lila4-span2, .lila6-span2, .lila8-span2, .lila2-span3, .lila3-span3, .lila4-span3, .lila6-span3, .lila8-span3, .lila2-span4, .lila3-span4, .lila4-span4, .lila6-span4, .lila8-span4 {
    padding: 7px;
    background: #dcdee4;
    border-top: 5px solid #525f8b;
}

.heather2, .heather3, .heather4, .heather6, .heather8, .heather12, .heather2-span2, .heather3-span2, .heather4-span2, .heather6-span2, .heather8-span2, .heather2-span3, .heather3-span3, .heather4-span3, .heather6-span3, .heather8-span3, .heather8-span3, .heather2-span4, .heather3-span4, .heather4-span4, .heather6-span4, .heather8-span4 {
    padding: 7px;
    background: #858DA0;
    border-top: 5px solid #434967;
    color: #FFF;
}

.divider, .dividertop {
    padding-right: 1em;
    text-align: right;
    font-size: 0.9em;
}

.dividertop {
    border-top: 5px solid #434967;
}

/* ------- NESTED GRID STYLING ------- */

.day-pic {
    background: #FFF;
}

.day {
    padding: 7px;
    background: #FFF;
}

.form-span8, .form-span10, .form-span12 {
    padding: 7px;
    background: #dcdee4;
}

/* ------- TOP & BOTTOM LAYOUT STYLING ------- */

header {
    padding: 7px;
    background: #FFF;
}

.theme {
    position: relative;
    margin: auto 0;
}

    .theme img {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }

footer {
    padding: 7px;
    background: #858DA0;
    color: #FFF;
    font-size: 0.9em;
    text-align: center;
    border-top: 10px solid #434967;
    border-radius: 0 0 10px 10px;
}