/*div.image {
    float: left;
    overflow: hidden;
}

div.image:hover  {
    background-color: black;
    position: relative;
    margin:0;
    opacity:0.8;
    font-size:1.5em;
    color: white;
    text-align: center;
}
*/

div#gal tr td {
    width: 100%;
    height: auto;
}
     
div#cate ul {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
          
div#cate ul li {
    position: relative;
    float:left;
    vertical-align:middle;
    border: 1px solid #afafaf;
    font-family: 'Century Gothic';
    font-size: 1.25em;
    padding: 1%;
    width: 25%;
    height: 50px;
}

div#cate ul li:hover {
    background-color: #00a0e8;
    color: white;
}

div#cate tr td {
    vertical-align:middle;
    border: 1px solid #afafaf;
    font-family: 'Century Gothic';
    font-size: 1.25em;
    padding: 1%;
    width: 15%;
    height: 50px;
}

div#cate tr td:hover {
    background-color: #00a0e8;
    color: white;
}

.cate_style {
    background-color: #00a0e8;
    color: white;
}


div#gal ul {
    list-style-type: none;
}

div#gal ul li {
    height: auto;
    text-align: center;
    overflow: hidden;
}

#gal ul li a img {
        width: 100%;
    }

@media screen and (max-width: 480px) {
    #cate table tr td {
        font-size: 0.75em;
        padding: 0px;
        width: 15%;
    }
    
    #gal ul li {
        width: 100%;
        float:left;
    }
    #gal ul li a img {
        width: 80%;
    }
}

@media screen and (max-width: 640px) and (min-width:481px) {
    #gal ul li {
        width: 50%;
        float:left;
    }

    #gal ul li a img {
        width: 80%;
    }
}

@media screen and (min-width:641px) {
    #gal ul li {
        width: 33%;
        float:left;
    }
   
}

@media screen and (min-width:1024px) {
    #gal ul li {
        width: 25%;
        float:left;
    }
   
}