* { padding:0; margin:0; }

body {
    min-width:500px;
    background-color:#e8e5dc;
    font-family:'futura-pt', helvetica, san-serif;
	color:#3b3b37;
    line-height:1.7em;
}

.headerFooter {
    position:fixed;
    background:#f6f3e9;
    width:100%;
    padding:10px 0;
}

.headerFooter h2 {
    float:left;
    padding:10px;
    margin-left:10px;
}

.headerFooter ul {
    position:absolute;
    list-style:none;
    top:50%; right:0;
    transform:translateY(-50%)
}

.headerFooter ul li {
    display:inline-block;
    padding:10px;
    margin:10px;
    cursor:pointer;
}

.selectedMenuItem {
    color:#3b3b37;
    cursor:default;
}

.selectedMenuItem:hover {
    color:#3b3b37;
    cursor:default;
}

.headerFooter ul li:hover { color:#f9423a; }

footer { bottom:0; height:20px; }

a {
    text-decoration:none;
    color:inherit;
}

#mainContent {
    padding:85px 20px 0 20px;
    margin-bottom:150px;
}

input, textarea {
    padding:5px;
    background:#f6f3e9;
    border:none;
    outline-width:0;
    outline-color:rgba(0, 0, 0, .1);
    width:200px;
}

textarea {
    width:500px;
}

input:focus {
    outline-width:0;
}

#submit {
    width:100px;
    font-size:inherit;
    cursor:pointer;
}

#submit:hover {
    color:#f9423a;
}

.comShow {
        background-image:url('../img/comShow.jpg');
}



#mainContent > ul {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
    grid-gap:1rem;
    list-style:none;
}

#mainContent > ul > li {
    filter:grayscale(100%);
    opacity:.7;
    position:relative;
    border-radius:3px;
    overflow:hidden;
    height:200px;
    cursor:pointer;
    background-repeat:no-repeat;
    background-size:100%;
    background-position:center;
    transition:1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

#mainContent > ul > li #label {
    height:30px;
    position:absolute;
    bottom:-30px; right:0;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    transition:.2s;
    background:#f6f3e9;
    border-top-left-radius:1px;
}

#mainContent > ul > li #label > p {
    position:relative;
    top:50%; transform:translateY(-50%);
    padding:10px;
}

#mainContent > ul > li:hover {
    background-size:102%;
    filter:grayscale(0%);
    opacity:1;
}

#mainContent > ul > li:hover #label {
    bottom:0px;
}