@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
	*{
		margin: 0;
		padding: 0;
		color: #454545;
	}
	 h1{
		/* width: 3%; */
	    position: relative;
	    top: 2px;
	    /* left: 90%; */
	    cursor: pointer;
	}
	h1:before{
		content: attr(data-count);
	    color: white;
	    position: absolute;
	    right: 16px;
	    font-size: 15px;
	    text-align: center;
	    top: -9px;
	    width: 20px;
	    height: 20px;
	    background: #FE9900;
	    border-radius: 50%;
	    opacity: 0;
	}
	h1.zero:before{
		opacity: 1;
	}
		/* section{
			margin: 100px auto;
			width: 90%;
			height: 400px;
			display: flex;
			justify-content: space-around;
		}
		section div{
			width: 22%;
			height: 93%;
			background:#f5f5f5;
			padding: 1%;
			position: relative;
		}
		img{
			width: 300px;
			height: 186px;
		}

		p{
			margin: 5px;
		} */
		/* h6{
		    width: 50px;
		    padding: 5px;
		    margin: 10px;
		    font-size: 15px;
		} */ 
		.buttonCart{
			padding: 5px;
		    background: #FE9900;
		    border: none;
		    outline: none;
		    font-weight: bold;
		    color: #fafafa;
		    cursor: pointer;
		    
		}
		
		section div span{
			position: absolute;
		    top: 14px;
		    left: 13px;
		    background: #FE9900;
		    width: 300px;
		    height: 186px;
		    display: none;
		}
		section div span img{
			width: 100%;
			height: 100%;
		}
		section div:nth-child(1)>span.active{
			animation: first 0.5s ease-in;
			z-index: 2;
			display: block;

		}
		section div:nth-child(2)>span.active{
			animation: second 0.5s ease-in;
			z-index: 2;
			display: block;

		}
		section div:nth-child(3)>span.active{
			animation: third 0.5s ease-in;
			z-index: 2;
			display: block;

		}
		section div:nth-child(4)>span.active{
			animation: four 0.5s ease-in;
			z-index: 2;
			display: block;

		}
		@keyframes first{
			to{
				width: 30px;
			    height: 20px;
			    left: 1290px;
			    top: -70px;
			}
		}
		@keyframes second{
			to{
				width: 30px;
			    height: 20px;
			    left: 948px;
			    top: -70px;
			}
		}
		@keyframes third{
			to{
				width: 30px;
			    height: 20px;
			    left: 606px;
			    top: -70px;
			}
		}
		@keyframes four{
			to{
				width: 30px;
			    height: 20px;
			    left: 265px;
			    top: -70px;
			}
		}


		
		.select{
			width: 60%;
			height: 580px;
			padding: 5%;
			background: #222;
			position: absolute;
			top: -1000px;
			left: 20%;
			transition: 0.5s;
			overflow-y: auto;
			margin: auto;
		}
		.select.display{
			top: 10px;
		}
		.select div{
			width: 100%;
			height: 200px;
			display: flex;
			padding: 5px;
			border: 1px solid white;
			position: relative;
			margin: 5px auto;
		}
		.select div img{
			width: 300px;
			height: 100%;
		}
		.select div p{
			padding: 35px;
			color: white;
		}
		
		.select div button{
			position: absolute;
			left: 45%;
			top: 50%;
			color: white;
		}
		.select div h4
		{
			position: absolute;
			left: 80%;
			top: 50%;
			color: white;
		}
		.select div button{
			left: 60%;
			top: 55%;
		}
		.select div span{
			display: none;
		}