* {
            box-sizing: border-box;
        }

        /* Style the body */
        body {
            
             font-family: Arial, Helvetica, sans-serif; 
             font-size: 14px;
            margin: 0;
        }

        /* Header/logo Title */
        .header {
            width: 100%;
            background-color: #BCAB6E;
             
        }
        
        a {
            font-family: Courier, sans-serif;
        }
        
        a:link {
          text-decoration: none;
        }
        
        a:visited {
          text-decoration: none;
        }
        
        a:hover {
          text-decoration: underline;
        }

        
     
        /* Increase the font size of the heading */
        .header h1 {
            font-size: 40px;
        }
        
        h2 {
            font-family: 'Aref Ruqaa', serif;
            border-bottom:1px solid #CCC;
        }

        /* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
        .navbar {
            overflow: hidden;
            background-color: #8a0019;
            position: sticky;
            position: -webkit-sticky;
            top: 0;
        }

        /* Style the navigation bar links */
        .navbar a {
            font-family: 'Aref Ruqaa', serif;
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }


        /* Right-aligned link */
        .navbar a.right {
            float: right;
        }

        /* Change color on hover */
        .navbar a:hover {
            background-color: #440404;
            color: white;
        }

        /* Active/current link */
        .navbar a.active {
            background-color: #440404;
            color: white;
        }

        /* Column container */
        .row {
            display: -ms-flexbox;
            /* IE10 */
            display: flex;
            -ms-flex-wrap: wrap;
            /* IE10 */
            flex-wrap: wrap;
        }

        /* Create two unequal columns that sits next to each other */
        /* Sidebar/left column */
        .side {
            -ms-flex: 20%;
            /* IE10 */
            flex: 20%;
            background-color: #f1f1f1;
            padding: 20px;
        }

        /* Main column */
        .main {
            -ms-flex: 80%;
            /* IE10 */
            flex: 80%;
            background-color: white;
            padding: 20px;
        }

        /* Fake image, just for this example */
        .fakeimg {
            background-color: #aaa;
            width: 100%;
            padding: 20px;
        }

        /* Footer */
        .footer {
            padding: 10px;
            text-align: center;
            background: #5a5b5e;
            color:white;
             font-family: 'Aref Ruqaa', serif;
        }
        
        
        
         #headerContainer {
            

        }
      
        

        #logo-container img {
                width: 25%;
                height: auto;
                display:block;
                margin:auto;
                padding-top: 50px;
                padding-bottom: 50px;
                
            }


        /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
        @media screen and (max-width: 700px) {
            .row {
                flex-direction: column;
            }
            #logo-container img {
                width: 25%;
                height: auto;
                display:block;
                margin:auto;
                padding-top: 50px;
                padding-bottom: 50px;
            }
        }

        /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
        @media screen and (max-width: 400px) {
            .navbar a {
                float: none;
                width: 100%;
            }
            
            #logo-container img {
            width: 90%;
            margin:auto;
            }
        }
        
    #main { 
        width: 490px; 
        float: left; 
} 
   
 



#product-grid {
	margin: 40px;
	max-width: 800px;
}

.btnAddAction {
    padding: 5px 10px;
    margin-left: 5px;
    background-color: #8a0019;
    border: #E0E0E0 1px solid;
    color: #ffffff;
    float: right;
    text-decoration: none;
    border-radius: 6px;
     padding: 10px 10px;
    font-size: 16px;
    cursor: pointer;
}
#product-grid .txt-heading {
     font-family: 'Aref Ruqaa', serif;
     display: table;
	width: 100%;
}

.product-item {
	float: left;
	background: #ffffff;
	margin: 0px 0px 15px 15px;
	padding-top: 15px;
	border: #000000 1px solid;
	max-width: 300px;
	height:900px;
	display: table-cell;
	
}

.product-image {
	
	width: 265px;
	background-color: #FFF;
    margin: 0 auto;
    
}
.product-title {
    font-family: 'Aref Ruqaa', serif;
    font-size:x-large;
	margin-bottom: 10px;
}

.product-description {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
	margin-bottom: 10px;
}



.product-price {
      font-family: 'Aref Ruqaa', serif;
    font-size:large;
	float:left;
}

.cart-action {
	float: right;
}

.product-quantity {
    padding: 5px 10px;
    border-radius: 3px;
    border: #E0E0E0 1px solid;
}

.product-tile-footer {
    padding: 15px 15px 15px 15px;
    overflow: auto;
}

.cart-item-image {
	width: 30px;
    height: 30px;
    border-radius: 50%;
    border: #E0E0E0 1px solid;
    padding: 5px;
    vertical-align: middle;
    margin-right: 15px;
}
.no-records {
	text-align: center;
	clear: both;
	margin: 38px 0px;
}


.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height:20px;
   background-color: #BCAB6E;
   color: white;
   text-align: center;
}