/*
Project Engineer: YungYuan, Richard, Chang
(c) YungYuan, Richard, Chang
For the full copyright and license information, please view the License 
file distributed with this source code.
*/
/* 
    Created on : Mar 20, 2020
    Author     : YYRC
*/
@media only screen and (max-width: 600px) {

    #main-frame {
        width: 90vw;
        height: auto;
    }

    #block1 {
        width: 90vw;
        height: auto;
        margin-top: 2em;
    }

    #proj-slideshow {
        min-width: 90vw;
        width: 90vw;
        max-width: 90vw;
        height: 50vh;
    }

    div.jumbo {
        min-width: 90vw;
        width: 90vw;
        max-width: 90vw;
        min-height: 50vh;
        height: auto;
    }

    div.jumbo > img {
        width: 100%;
        object-fit: contain;
    }

    div.front-slideshow-caption {
        min-width: 90vw;
        width: 90vw;
        max-width: 90vw;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
        margin-top: 4vh;
    }

    div.front-slideshow-caption > div {
        display: inline-block;
        padding: 1em 3em;
        margin-top: 0em;
        text-align: center;
    }

    div.front-slideshow-caption > div > h1 {
        color: #4d4d4d;
        letter-spacing: 0.1em;
        font-size: 1.6em !important;
    }

    div.front-slideshow-caption > div > h4 {
        color: #4d4d4d;
        font-style: italic;
        font-size: 1em !important;
    }

    div.front-slideshow-caption > div > a {
        color: #4d4d4d !important;
        font-size: 1em !important;
    }

    div.slide-indicators-div {
        min-width: 90vw;
        width: 90vw;
        max-width: 90vw;
        min-height: 9vh;
        height: 9vh;
        max-height: 9vh;
    }

    #next {
        font-size: 0.9em;
        font-weight: 700;
        color: #4d4d4d;
        cursor: pointer;
    }

    #prev {
        font-size: 0.9em;
        font-weight: 700;
        color: #4d4d4d;
        cursor: pointer;
    }

    #next:hover {
        color: #ffcc99 !important;
        -webkit-transition: color 0.5s linear;
        transition: color 0.5s linear;
    }

    #prev:hover {
        color: #ffcc99 !important;
        -webkit-transition: color 0.5s linear;
        transition: color 0.5s linear;
    }

    #slideshow-indicator {
        min-width: 80vw;
        width: 80vw;
        max-width: 80vw;
        overflow-x: scroll;
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
        margin-top: 0.8em;
    }

    #slideshow-indicator::-webkit-scrollbar {
        width: 0;
    }

    #slideshow-indicator *::-webkit-scrollbar {
        width: 0;
    }

    #slideshow-indicator > ul {
        list-style-type: none;
        padding: 0;
    }

    #slideshow-indicator > ul > li {
        display: inline;
        padding: 0.7em;
    }

    #slideshow-indicator > ul > li > a {
        padding-bottom: 0.6em;
        font-size: 0.9em !important;
    }

    #slideshow-indicator > ul > li > a:hover {
        color: goldenrod !important;
    }

    #slideshow-indicator > ul > li.slick-active > a {
        color: black !important;
        text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC;
        border-bottom: solid 2px goldenrod;
    }

    #slideshow-indicator > ul > li.slick-active > a:hover {
        color: goldenrod !important;
        text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC;
    }
    /*////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////*/
    #block2 {
        width: 90vw;
        height: auto;
        margin-top: 2em;
    }

    #block2 *::-webkit-scrollbar {
        width: 0;
    }

    #block2-title {
        min-width: 90vw;
        width: 90vw;
        max-width: 90vw;
    }

    #block2-title > h1 {
        padding: 0.1em 0;
        /*
        border-top: 2px solid;
        border-bottom: 2px solid;
        */
        font-size: 1.6em;
    }

    #block2 > div:nth-child(2) {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
        width: 90vw;
        height: auto;
        margin-top: 0.4em;
    }

    #block2 > div:nth-child(2) > div:first-child {
        width: 100%;
        height: auto;
        background-color: #D7CFBF;
        overflow-x: hidden;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #block2 > div:nth-child(2) > div:first-child > p {
        color: #16140F;
        font-size: 0.9em;
        text-align: left;
        text-indent: 2.2em;
        line-height: 1.5em;
        letter-spacing: 0.2em;
        padding: 1em;
    }

    #block2 > div:nth-child(2) > div:nth-child(2) {
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
        overflow-x: hidden;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #block2 > div:nth-child(2) > div:nth-child(2) > p {
        color: #4d4d4d;
        font-size: 0.9em;
        text-align: left;
        text-indent: 2em;
        padding: 1em;
    }
    /*////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////*/
    #block3 {
        min-width: 100vw;
        width: 100vw;
        max-width: 100vw;
        min-height: 100vh;
        height: 100vh;
        max-height: 100vh;
        background-color: #FFFFFF;
        position: relative;
    }

    #block3 > div:first-child {
        flex-wrap: wrap;
        min-width: 95vw;
        width: 95vw;
        max-width: 95vw;
        min-height: 90vh;
        height: 90vh;
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        -ms-overflow-style: thin;
        scrollbar-width: thin;
        background-color: #FFFFFF;
        position: absolute;
        z-index: 0;
        border-bottom: 1px #4d4d4d solid; 
    }

    #block3 > div:first-child::-webkit-scrollbar {
        width: 5px;
        background: #EEEEEE;
    }

    #block3 > div:first-child::-webkit-scrollbar-thumb {
        background: #CCCCCC;
        -webkit-border-radius: 1ex;
        -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
    }

    #block3 > div:first-child::-webkit-scrollbar-corner {
        background: #000;
    }

    #block3 > div:first-child > div:nth-child(4),
    #block3 > div:first-child > div:nth-child(5),
    #block3 > div:first-child > div:nth-child(6),
    #block3 > div:first-child > div:nth-child(7),
    #block3 > div:first-child > div:nth-child(8),
    #block3 > div:first-child > div:nth-child(9) {
        display: none;
    }

    div.proj-pview-sec {
        min-width: 90vw;
        width: 90vw;
        max-width: 90vw;
        min-height: 70vh;
        height: 70vh;
        max-height: 70vh;
        margin-top: 2em;
    }

    div.proj-pview-sec > a > img {
        min-width: 90vw;
        width: 90vw;
        max-width: 90vw;
        min-height: 90vw;
        height: 90vw;
        max-height: 90vw;
        object-fit: cover;
        /*-webkit-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
                -moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
                box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
        */
    }

    div.proj-pview-sec > a > h3 {
        font-size: 1em;
        font-weight: 700;
        color: #4d4d4d;
        padding: 0.6em 2em;
        white-space: nowrap;
    }

    div.proj-pview-sec > a > h3:hover {
        color: #ffcc99 !important;
        -webkit-transition: color 0.5s linear;
        transition: color 0.5s linear;
    }

    div.proj-pview-sec > a > h3:active {
        color: #4d4d4d;
        text-decoration: underline overline;
    }

    div.proj-pview-sec > a > h3:focus {
        color: #4d4d4d;
        text-decoration: underline overline;
    }

    div.proj-pview-sec > a > h3:visited {
        color: #4d4d4d;
        text-decoration: underline overline;
    }

    div.proj-pview-sec > p {
        min-width: 90vw;
        width: 90vw;
        max-width: 90vw;
        min-height: calc(10vh + 0.5em);
        height: calc(10vh + 0.5em);
        max-height: calc(9vh + 0.5em);
        font-size: 0.9em;
        color: black;
        text-align: center;
        padding: 0em 1em 0.3em 1em;
        background-color: #FFFFFF;
        /*
        -webkit-box-shadow: inset 1px 1px 5px 0.2px rgba(18,18,18,1);
        -moz-box-shadow: inset 1px 1px 5px 0.2px rgba(18,18,18,1);
        box-shadow: inset 1px 1px 5px 0.2px rgba(18,18,18,1);
        text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
        */
        overflow: hidden;
    }

    div.proj-pview-sec > p:hover {
        text-shadow: 0 0 2px #ffcc99, 0 0 5px #ffcc99, 0 0 10px #ffcc99;
        color: #595859;
    }

    #next-proj-row {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        min-height: 5vh;
        height: 5vh;
        max-height: 5vh;
        position: absolute;
        bottom: 0em;
        right: 1.2em;
        z-index: 1;
    }

    #next-proj-row > a {
        font-size: 1.6em;
        font-weight: 700;
        border: solid 2px #4d4d4d;
        padding: 0.1em 0.4em;
        border-radius: 5px 20px 5px;
    }

    #next-proj-row > a:hover {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        transform-origin: center;
        -webkit-transition: transform 0.5s linear;
        transition: transform 0.5s linear;
        color: goldenrod !important;
        border: solid 2px #ffcc99;
        animation: glowBox 1.0s alternate ease-in-out infinite;
    }
    /*////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////*/
    #block4 {
        min-width: 94vw;
        width: 94vw;
        max-width: 94vw;
        min-height: 90vh;
        height: auto;
        margin-top: 0em;
        position: relative;
    }

    #block4-title {
        min-width: 90vw;
        width: 90vw;
        max-width: 90vw;
    }

    #block4-title > h1 {
        padding: 0.1em 0;
        /*
        border-top: 2px solid;
        border-bottom: 2px solid;
        */
        font-size: 1.6em;
    }

    #billboard {
        min-width: 86vw;
        width: 86vw;
        max-width: 86vw;
        height: auto;
        background-color: #FFFFFF;
    }

    #billboard *::-webkit-scrollbar {
        width: 0;
    }

    #billboard > div {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        height: 100%;
        max-height: 100%;
        background-color: #FFFFFF;
    }

    #block4-control {
        min-width: 4vw;
        width: 4vw;
        max-width: 4vw;
        min-height: 63vh;
        height: 63vh;
        max-height: 63vh;
        position: absolute;
        right: 0;
        top : 5vh;
        width: auto;
        font-size: 1em;
        background-color: #FFFFFF;
        overflow-x: hidden;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #block4-control::-webkit-scrollbar {
        width: 0;
    }

    #block4-control *::-webkit-scrollbar {
        width: 0;
    }

    #block4-control > a:first-child {
        font-size: 0.8em;
        font-weight: 400;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        transform-origin: center;
        /*animation: glowTxt 1.0s alternate ease-in-out infinite;*/
    }

    #block4-control > a:nth-child(3) {
        font-size: 0.8em;
        font-weight: 400;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        transform-origin: center;
        /*animation: glowTxt 1.0s alternate ease-in-out infinite;*/
    }

    #board-indicator {
        min-height: 44vh;
        height: 44vh;
        max-height: 44vh;
        font-size: 1.2em;
        overflow-x: hidden;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #board-indicator > ul {
        list-style-type: none;
        padding: 0;
    }

    #board-indicator > ul > li {
        padding: 0.3em;
    }

    #board-indicator > ul > li > a {
        padding-bottom: 0.6em;
        font-size: 2em;
    }

    #board-indicator > ul > li > a:hover {
        color: goldenrod !important;
    }

    #board-indicator > ul > li.slick-active > a {
        color: goldenrod !important;
        text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC;
    }

    #board-indicator > ul > li.slick-active > a:hover {
        color: goldenrod !important;
        text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC;
    }

    .post-type-1 , 
    .post-type-2 {
        min-width: 86vw;
        width: 86vw;
        max-width: 86vw;
        min-height: 70vh;
        height: 70vh;
        max-height: 70vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
    }

    .post-type-1 > div {
        min-width: 90%;
        width: 90%;
        max-width: 90%;
        min-height: 35vh;
        height: 35vh;
        max-height: 35vh;
        margin-top: 0.8em;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
    }

    .post-type-1 > img {
        object-fit: contain;
        min-width: 90%;
        width: 90%;
        max-width: 90%;
        min-height: 35vh;
        height: 35vh;
        max-height: 35vh;
        margin-top: 0.8em;
    }

    .post-type-1 > div > h1 {
        font-size: 1em;
        letter-spacing: 0.2;
        font-weight: bolder;
        margin-top: 0;
        border-bottom: 2px #4d4d4d solid;
    }

    .post-type-1 > div > p {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        min-height: 28vh;
        height: auto;
        line-height: 1.2em;
        font-size: 0.9em;
        margin-top: 0;
        color: #4d4d4d;
        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        position: relative;
    }

    .post-type-2 > div {
        min-width: 90%;
        width: 90%;
        max-width: 90%;
        min-height: 30vh;
        height: 30vh;
        max-height: 30vh;
        margin-top: 0.8em;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
    }

    .post-type-2 > div > h1 {
        font-size: 1em;
        letter-spacing: 0.2;
        font-weight: bolder;
        margin-top: 0;
        border-bottom: 2px #4d4d4d solid;
    }

    .post-type-2 > div > p {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        min-height: 25vh;
        height: auto;
        line-height: 1.2em;
        font-size: 0.9em;
        margin-top: 0;
        color: #4d4d4d;
        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        position: relative;
    }

    .post-type-2 > img {
        object-fit: contain;
        min-width: 90%;
        width: 90%;
        max-width: 90%;
        min-height: 35vh;
        height: 35vh;
        max-height: 35vh;
        margin-top: 0.8em;
    }

    .post-type-3 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
        min-width: 86vw;
        width: 86vw;
        max-width: 86vw;
        min-height: 70vh;
        height: 70vh;
        max-height: 70vh;
    }

    .post-type-3 > div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
        min-width: 86vw;
        width: 86vw;
        max-width: 86vw;
        min-height: 36vh;
        height: 36vh;
        max-height: 36vh;
        margin-top: 0.8em;
        position: relative;
    }

    .post-type-3 > div > img {
        min-width: 90%;
        width: 90%;
        max-width: 90%;
        min-height: 36vh;
        height: 36vh;
        max-height: 36vh;
        object-fit: cover;
    }

    .post-type-3 > div > div:nth-child(2){
        min-width: 90.5%;
        width: 90.5%;
        max-width: 90.5%;
        min-height: 36vh;
        height: 36vh;
        max-height: 36vh;
        background-color: black;
        opacity: 0.46;
        position: absolute;
        top: 0;
        left: 1.1em;
        z-index: 1;
    }

    .post-type-3 > div > div:nth-child(3) {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        min-height: 36vh;
        height: 36vh;
        max-height: 36vh;
        background-color: transparent;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }

    .post-type-3 > div > div > h1 {
        font-size: 1.6em;
        font-weight: bolder;
        color: white;
    }

    .post-type-3 > p {
        min-width: 90%;
        width: 90%;
        max-width: 90%;
        min-height: 28vh;
        height: auto;
        line-height: 1.2em;
        font-size: 0.9em;
        margin-top: 0.8em;
        color: #4d4d4d;
        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        position: relative;
    }

    .post-type-4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        min-width: 86vw;
        width: 86vw;
        max-width: 86vw;
        min-height: 70vh;
        height: 70vh;
        max-height: 70vh;
        position: relative;
    }

    .post-type-4 > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        min-width: 86vw;
        width: 86vw;
        max-width: 86vw;
        min-height: 100%;
        height: 100%;
        max-height: 100%;
        position: relative;
    }

    .post-type-4 > div > img {
        min-width: 90%;
        width: 90%;
        max-width: 90%;
        min-height: 55vh;
        height: 55vh;
        max-height: 55vh;
        object-fit: cover;
    }

    .post-type-4 > div > div:nth-child(2) {
        min-width: 90.5%;
        width: 90.5%;
        max-width: 90.5%;
        min-height: 55vh;
        height: 55vh;
        max-height: 55vh;
        background-color: black;
        opacity: 0.26;
        position: absolute;
        top: 7.5vh;
        left: 1.1em;
        z-index: 1;
    }

    .post-type-4 > div > div:nth-child(3) {
        min-width: 90%;
        width: 90%;
        max-width: 90%;
        min-height: 55vh;
        height: 55vh;
        max-height: 55vh;
        background-color: transparent;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        position: absolute;
        top: 3em;
        left: 1em;
        z-index: 2;
    }

    .post-type-4 > div > div > h1 {
        font-size: 1.6em;
        font-weight: bolder;
        color: white;
    }

    a.poster-link {
        position: absolute;
        right: 5px;
        bottom: 15px;
        animation: glowTxt 1.0s alternate ease-in-out infinite;
    }

    /*////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////*/
    #block5 {
        width: 90vw;
        height: auto;
        margin-top: 1em;
        background-color: #FFFFFF;
    }

    #block5 > div:first-child {
        min-height: 30%;
        height: 30%;
        max-height: 30%;
        min-width: 90%;
        width: 90%;
        max-width: 90%;
    }

    #block5-title {
        min-width: 90vw;
        width: 90vw;
        max-width: 90vw;
    }

    #block5-title > h1 {
        padding: 0.1em 0;
        /*
        border-top: 2px solid;
        border-bottom: 2px solid;
        */
        font-size: 1.6em;
    }

    #block5 > div:first-child > p {
        text-align: center;
        font-size: 0.9em;
    }

    #block5 > div:nth-child(2) {
        min-height: 70%;
        height: 70%;
        max-height: 70%;
        min-width: 90%;
        width: 90%;
        max-width: 90%;
    }

    #block5 > div:nth-child(2) > form > a::before {
        content: ' ';
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        height: 1em;
        background: #ffcc99;
        opacity: 0.4;
        animation: WiggleWidth 3s ease-in-out infinite;
    }

    #block5 > div:nth-child(2) > form > a {
        position: relative;
        color: #4d4d4d;
        font-size: 1.6em;
        font-weight: 700;
    }

    #form {
        min-height: 60vh;
        height: auto;
        min-width: 90%;
        width: 90%;
        max-width: 90%;
        background-color: #FFFFFF;
    }

    .table {
        display: none;
        min-height: 60vh;
        height: auto;
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-collapse: collapse;
    }

    tr {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        vertical-align: central;
    }

    th {
        font-size: 0.8em;
        font-weight: 700;
        color: #4d4d4d;
        min-width: 4em;
        width: 4em;
        max-width: 4em;
        text-align: right;
        padding: 0; 
        margin: 0;
    }

    td {
        width: auto;
        font-size: 0.8em;
        font-weight: 700;
        color: #4d4d4d;
        text-align: center;
    }

    td.error {
        font-size: 0.8em;
        font-weight: 700;
        color: salmon;
        width: auto;
        text-align: left;
    }

    td.pre-and-next {
        font-size: 0.8em;
    }

    td.pre-and-next > div {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
    }

    #form-msg-box {
        color: salmon;
        font-size: 0.8em;
    }

    td.pre-and-next > div > a:first-child {
        padding-left: 2em;
    }

    td.pre-and-next > div > a:nth-child(3) {
        padding-right: 2em;
    }

    td.pre-and-next > div > a > span {
        font-size: 0.6em;
    }

    #birthday {
        min-width: 10em;
        width: 10em;
        background-color: gainsboro;
    }

    #project-type-radios, #residential-type-radios {
        min-width: 90%;
        width: 90%;
        max-width: 90%;
        margin: auto;
    }

    #contractor-radios, #partial-radios {
        min-width: 70%;
        width: 70%;
        max-width: 70%;
        margin: auto;
    }

    #commercial-type-row, #residential-type-row, #residentialpa-type-row {
        display: none;
    }

    #form-div > p {
        font-size: 1em;
        text-align: center;
    }
}
