/* Strip Component */
.catalog-tag {
    display: flex;
    font-family: "Ubuntu";
    margin-bottom: 3em;
    margin-top: 1.5em;
    box-shadow: 0px 8px 6px -6px rgba(0, 0, 0, 0.25);
}

.catalog-tag-category {
    display: flex;
    color: #fff;
    max-width: 500px;
}

#ctg-tag {
    color: #fff;
    padding: 10px 5px;
    margin: 0;
    font-size: 30px;
}

.catalog-tag-strip {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#triangle-bottomleft {
    width: 0;
    height: 0;
    flex-grow: 1;
    border-bottom: 45px solid #067039;
    border-right: 75px solid transparent;
}
  
#triangle-topright {
    width: 0;
    height: 0;
    flex-grow: 1;
    border-top: 45px solid #1cc534;
    border-right: 75px solid transparent;
}

/* product_list.html */
.catalog-list {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-rows: 1fr;
}


/* catalog_item.html */
.catalog-item {
    display: flex;
    flex-direction: row;
    border-top: 5px solid transparent;
    max-width: 500px;
    height: auto;
    box-sizing: border-box;
    min-width: 300px;
    margin: 16px 16px;
}

.catalog-item-img-div {
    background-color: #fff;
    display: flex;
    align-items: center;
    min-width: 100px;
    justify-content: center;
}
  
.catalog-item-img {
    max-width: 100%;
    background-size: contain;
    max-height: 300px;
}

.catalog-item-content {
    display: flex;
    background-color: #d8edd9;
    box-sizing: border-box;
    flex-direction: column;
    max-height: 100%;
    justify-content: center;
    width:100%;
    box-shadow: inset 0px 5px 5px -5px rgba(0, 0, 0, 0.25);
}

.catalog-item-video {
    color: red;
    align-self:flex-end;
}

.catalog-item-description {
    border-left: 5px solid #1cc534;
    padding: 1em 0;
    padding-left: 5px;
    margin: 1em 0;
    text-align: start;
}

.catalog-item-name {
    font-weight: bold;
}

.catalog-item-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.catalog-btn-add {
    background-color: #1cc534;
    padding: 8px;
    box-sizing: border-box;
    color: white;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}

.ems-video {
    padding: 0.5em;
}

.catalog-item-img-container {
    display: flex;
    background-color: #fff;
    justify-content: center;    
}

/* category_list.html */

.ems-catalog-icon {
    font-size: 2em;
    color: #fff;
    margin: 0 .3em;
    align-self: center;
}

.ems-catalog-pdf-txt {
    padding: .3em;
    font-size: 1.1em;
    color: #fff;
    margin: 0;
    text-align: center  ;
}

.catalog-frame-bg {
    background-color: #d8edd9;
    border-top: 5px solid #1cc534;
    border-bottom: 5px solid #1cc534;
    min-width: 300px;
    max-width: 300px;
    padding: 0 16px;
    text-align: center;
    box-shadow: inset 0px 4px 10px -10px rgba(0, 0, 0, 0.25),
                inset 0px 4px 10px -10px rgba(0, 0, 0, 0.25) ;
}

.catalog-frame-header {
    font-size: 1.5em;
} 

/* Contact Page */
.info-item {
    margin: 0.25em;
}

.modal {
    background: rgba(255,255,255,0.5)
}

/* Item Product Modal  */
.ems-modal-content {
    position: relative;
    background-size: contain;
    margin: auto;
    max-width: 80vw;
    min-height: 30vh;
    max-height: 50vh;
    opacity: 1 !important;
    top:25%;
}


/* Tablet */
@media (max-width: 900px) {
    /* Strip Component */
    #ctg-tag {
        padding: 0.5em;
    }
    
    /* product_list.html */
    .catalog-list {
      grid-template-columns: 1fr;
    }
    
}


/* Mobile */
@media (max-width: 576px) { 
    /* Strip Component*/
    .catalog-tag {
        justify-content: center;
        box-shadow: none;
    } 

    .catalog-tag-category {
        background: transparent;
        color: #fff;
    }

    .catalog-tag-strip {
        display: none;
    }

    /* catalog_item.html */
    .catalog-item {
       min-width: 0;
       flex-direction: column;
       border: none;
       margin: 2em 0em;
    }

    .catalog-item-img {
        background-size: contain;
    }    

    .catalog-list {
        display: flex;
        flex-direction: column
    }
    
    .catalog-item-img-container {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        padding: .5em 0;
    }

}