/*-----------------------------------------------------------------------------------*/
/* RESPONSIVE STYLESHEET FOR MAX WIDTH 768PX
/*-----------------------------------------------------------------------------------*/

@media (max-width: 768px) {
    
    
    #menu {
        display: none;
    }
    
    #container {
        width: 95%;
    }
    
    #column-wide {
        padding: 0 0.5em;
    }
    
    #container-small {
        width: 95%;
    }
    
    .expiration-label {
        display: block;
    }
    
    .column-left , .column-right {
        width: 100%;
        float: none;
    }
    
    .js .slicknav_menu {
		display: block;
	}
    
    .slicknav_nav a {
        padding: 1em !important;
        background: #42516d !important;
        margin: 0.2em 0px !important;
    }
    
    .slicknav_nav a:hover {
        border-radius: 0px !important;
    }
        
    table {
      border: 0;
    }
    
    tr.column-heading {
        display: none;
    }

    table thead {
      display: none;
    }

    table tr {
      margin-bottom: 1em;
      display: block;
      border-bottom: 2px solid #ddd;
    }

    table td {
      display: block;
      text-align: right;
      border-bottom: 1px solid white;
    }

    table td:last-child {
      border-bottom: 0;
    }

    table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
    
    .notification-info {
        width: 100% !important;
        float: none;
    }
    
    .notifications-form {
        margin-top: 1em !important;
    }
    
    .slicknav_nav a {
        font-size: 1em !important;
    }
    
    .search-box {
        width: 100%;
        border-radius: 2px;
    }
    
    .table-button {
        max-width: 88% !important;
    }
    
    select.inventories {
        position: relative !important;
        width: 100% !important;
    }

    .product-image {
        width: 120px;
        height: 120px;
        display: block;
        margin: 0 auto;
    }

    #image-viewer-image img {
        max-width: 80%;
    }

}