.cont{
	margin-top: 2%;
    padding-left: 50px;
    padding-right: 50px;
	

}


 .card {

 	background-color: whitesmoke;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px; /* 5px rounded corners */
    padding: 7px;
    height: 350px;
    font-size:15px;
    font-family: tahoma;
}


.card .card-body{
	height: 190px;

}

.card .ProdName{
	
	height: 40px;
	overflow: hidden;

	text-overflow: ellipsis;
	max-width: 100px;
}


.card .ProdPrice{
	height: 30px;
	}



.card .ProdTd{
  
  height: 90px;
  overflow: hidden;
  
  


}
.c_img {
 
	
	height: 120px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('/images/second.jpg');

}
/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */



.add_but{
display: block;
color: #000;

border: 1px solid #BEBEBE;
border-radius: 3px;
cursor: pointer;
letter-spacing: 1px;
outline: 0;
outline-offset: 0;
font-size: 15px;
text-align: center;
}

.add_but:hover{
	

	border-color:#A0A0A0;
}
.add:hover{
	color: #A0A0A0;
	background-color: #505050;
}




 /* Popup container */
.popup {
    display: block;
	color: #000;

	
	border-radius: 3px;
	cursor: pointer;
	letter-spacing: 1px;
	outline: 0;
	outline-offset: 0;
	font-size: 15px;
	text-align: center;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    /*visibility: hidden;*/
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    margin-top: -85px;
    margin-left: 0%;
    opacity: 0;
    display: none;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    display: block;
    -webkit-animation: fadeIn 2s cubic-bezier(0.19, 1, 0.22, 1);
    animation: fadeIn 2s cubic-bezier(0.19, 1, 0.22, 1);
}

.popup .hide{
    opacity: 0;
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
} 



@-webkit-keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity:0 ;}
} 

