* {
    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;
        
}

@media screen and (min-width: 200px) and (max-width: 768px) {
    
.headerLogo {
    background-color: #BCAB6E;
    }
    .logo {
        width: 75%;
        height: auto;
    }
}

@media (min-width:1025px){
    .headerLogo {
        background-color: #BCAB6E;
            width: 100%;
    }
    .logo {
        width: 20%;
        height: auto;
    }
}


a {
    font-family:  sans-serif;
    font-size: medium;
}

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:#493C36;
        font-family: 'Aref Ruqaa', serif;
}

#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;
    transition: transform .2s;
}

.product-image:hover {
-ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}

.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: Arial, Helvetica, sans-serif;
    font-size:12px;
    
	margin-bottom: 10px;
	clear:right;
}



.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:60px;
   background-color: #BCAB6E;
   color: #2D2521;
   text-align: center;
    font-family: Arial, Helvetica, sans-serif; 
}