/*
* Stylesheet for Grid template of the Layers Restaurant Menu Extension
*
* Template Version: 1.1
*
* Table of Contents:
* - Global
* - Tabs
* - The Grid
* - Single Item
* - Media Queries
*/

/* Global */
.rm-grid-main-container {
    text-align:center;
    margin-top:20px;
}


/* Tabs */

.rm-grid-tabs-container {
    display:inline-block;
    width:100%;
    text-align:center;
    opacity:0.9;
}

.rm-grid-tabs li {
    display:inline;
    list-style:none;
}

.rm-grid-tabs a {
    padding:10px 20px;
    display:inline-block;
    font-size:1.3em;
    text-decoration:none;
    background:#333333;
    color:#ffffff;
}

.rm-grid-tabs a.rm-grid-active {
    background:#000000;
    color:#ffffff;
}

.invert .rm-grid-tabs a {
    background:#cccccc;
    color:#333333;
}
.invert .rm-grid-tabs a.rm-grid-active {
    background:#eeeeee;
    color:#000000;
}


/* The Grid */

.rm-grid-container {
    position:relative;
    width:100%;
    overflow:hidden;
}

.rm-grid {
    margin-top:20px;
    min-width:100%;
    text-align:center;
    overflow:hidden;
}

.rm-grid-col {
    float:left;
    width:32%;
    margin-right:2%;
}
.rm-grid-col:nth-child(3n+3) {
    margin-right:0;
}


/* Single Item */

.rm-grid-item {
    text-align: center;
    padding:20px 10px;
    display:inline-block;
}

.rm-grid-item p {
    padding:5px;
    line-height:1.5em;
}

.invert .rm-grid-item-excerpt,
.invert .rm-grid-item-heading {
    color: #333333;
    background: #eeeeee;
}

.rm-grid-item-heading {
	font-size:1.3em;
    text-align:left;
    margin-bottom:20px;
}

.rm-grid-item-excerpt,
.rm-grid-item-heading {
    color: #eeeeee;
    background: #333333;
}

.rm-grid-item-name {
    font-size:1em;
}

.rm-grid-item-price {
    float:right;
	font-size:1em;
    font-weight:bold;
}

.rm-grid-item-excerpt {
    margin-top:20px;
    padding:20px;
    text-align:left;
}

.rm-grid-item-thumbnail {
    display:inline-block;
    width:230px;
    height:210px;
    background-size:contain;
    background-repeat: no-repeat;

}

/* Media Queries */

/* layouts smaller than 1024px */
@media only screen
and (max-width : 1024px){

    .rm-grid-col {
        float:left;
        width:48%;
        margin-right:4%;
    }
    .rm-grid-col:nth-child(3n+3) {
        margin-right:4%;
    }
    .rm-grid-col:nth-child(2n+2) {
        margin-right:0;
    }

}

/* layouts smaller than 769px */
@media only screen
and (max-width: 769px) {

    .rm-grid-col {
        float: left;
        width: 100%;
        margin-right: 0;
    }

}