.ShellStoreItems > div[class*='col-'] {
    padding: 0 7px;
    margin-bottom: 14px;
    display:grid;
}

div.TemplateRow {
    display: table-row;
}

a.ClickableTemplate {
    height: 100%;
    margin-bottom: 13px;
    text-align: center;
}

    a.ClickableTemplate:hover {
        text-decoration: none;
        background-color: #f9f9f9;
    }
.ShellTemplate > a:hover article, .ShellTemplate > article:hover {
    box-shadow: 0px 8px 13px rgba(0, 0, 0, 0.15);
}
html.touch .ShellTemplate > a:hover article, html.touch .ShellTemplate > article:hover {
    box-shadow:none;
}
.ShellTemplate > a article, .ShellTemplate > article {
    text-align: center;
    box-shadow: 1px 1px 2px #ccc;
    position: relative;
    border: 1px solid #f5f5f5;
    padding: 5px;
    background-color: #FFF;
    height: 100%;
}
/*Testing*/
.Folder .ClickableTemplate article:hover {
    position: relative;
    width: 100%;
}


.TemplateAddToCart, .ShellSaveLater {
    display: none;
}

.ShellStoreMainContent article.flyout:hover {
    z-index: 1;
    transition: all 0.5s ease 0s;
}
html.touch .ShellStoreMainContent article.flyout:hover {
    z-index: 0;
    display: block;
    position: relative;
    width: 100%;
    transition: unset;
}


    @media (min-width: 1100px) {
        .col-lg-2_5 {
            width: 20% !important;
        }
    }

    @media (min-width: 1100px) {
        .TemplateAddToCart, .ShellSaveLater {
            display: none;
        }

        .ShellStoreMainContent article.flyout:hover .TemplateDescription, .ShellStoreMainContent article.flyout:hover .TemplateAddToCart, .ShellStoreMainContent article.flyout:hover .ShellSaveLater, .ShellStoreMainContent article.flyout:hover .TemplateLink {
            display: block;
            transition:unset;
        }

        .ShellStoreMainContent article.flyout:hover .ShellDetailInfo {
            max-height: 200px;
            overflow: hidden;
        }
        .ShellTemplateLinkAddToCart {
         
            bottom: 5px;
            margin: 0 auto;
            width: 100%;
            text-align: center;
        }
        .ShellStoreMainContent article.flyout:hover .ShellTemplateLinkAddToCart {
            position: relative;
            bottom: 0px;
        }
        .ShellStoreMainContent .TemplatePrice {
            position: absolute;
            margin: 5px 0;
            bottom: 0px;
        }
        .ShellStoreMainContent article.flyout:hover .TemplatePrice{
            position:relative;
        }

        .ShellTemplateAddToCart {
            min-height: 20px;
        }
    }

    @media (max-width: 1100px) {
        .TemplateAddToCart, .ShellSaveLater, .TemplateLink {
            display: block;
        }
    }

    .ShellTemplateDetail {
    width: 100%;
    text-align: center;
    display: table;
}

.ShellTemplate.Item .TemplateId, .TemplateDescription, .TemplateLink, .TemplateManufacturer, .TemplateQuantity {
    display: none;
}

.ShellTemplateAddToCart {
    bottom: 5px;
    left: 0;
    right: 0;
}

.TemplateTitle {
    max-width: 100%;
    padding: 10px 2px;
}

div.TemplatePrice {
    padding: 0;
}

div.TemplatePrice, div.TemplateAddToCart {
    width: 100%;
    text-align: center;
}

div.TemplateAddToCart {
    margin-top: 5px;
}

.ShellTemplateImage {
    display: inline-block;
}

.TemplateImage {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    max-width: 100%;
    vertical-align: middle;
}

    .TemplateImage > img {
        max-height: 100%;
    }

/*FOLDERS*/
.ShellTemplate.Folder .TemplateId {
    padding: 5px 0;
    overflow: hidden;
}

@media (max-width: 500px) {
    div.ShellStoreItems {
        border-spacing: 0; /*the property used for margin in tables*/
    }

    .ShellTemplateImage {
        display: block;
        float: left;
        width: 100%;
    }

        .ShellTemplateImage .TemplateImage {
            display: inline;
        }
}