#producto_box{
			text-align: left;
			padding: 10px;
			min-height: 300px;
		}
		#producto_box .input-group{
			width: 100%;
		}
		.thumbnail .img{
			height: 150px;
			width: 100%;
			display: inline-block;
			background-size: contain;
    		background-position: center;
    		background-repeat: no-repeat;
		}
		.thumbnail span{
			position: relative;
		}
		.modal {
			display: none; /* Hidden by default */
			position: fixed; /* Stay in place */
			z-index: 1; /* Sit on top */
			padding-top: 100px; /* Location of the box */
			left: 0;
			top: 0;
			width: 100%; /* Full width */
			height: 100%; /* Full height */
			overflow: auto; /* Enable scroll if needed */
			background-color: rgb(0,0,0); /* Fallback color */
			background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
		}
		.modal-content {
			position: relative;
			background-color: #fefefe;
			margin: auto;
			padding: 0;
			border: 1px solid #888;
			width: 80%;
			box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
			-webkit-animation-name: animatetop;
			-webkit-animation-duration: 0.4s;
			animation-name: animatetop;
			animation-duration: 0.4s
		}
		@-webkit-keyframes animatetop {
			from {top:-300px; opacity:0} 
			to {top:0; opacity:1}
		}
		@keyframes animatetop {
			from {top:-300px; opacity:0}
			to {top:0; opacity:1}
		}
		.close {
			color: white;
			float: right;
			font-size: 28px;
			font-weight: bold;
		}
		.close:hover,
		.close:focus {
			color: #000;
			text-decoration: none;
			cursor: pointer;
		}
		.modal-header {
			padding: 2px 16px;
			background-color: rgb(240, 8, 29);
			color: white;
		}
		.modal-body {padding: 2px 16px;}
		.modal-footer {
			padding: 2px 16px;
			background-color: rgb(61, 15, 163);
			color: white;
		}
		.modal-body #producto_box{
			background-size: contain;
		    background-repeat: no-repeat;
		    background-position: center center;
		    min-height: 320px;
		}