.proimg {
	  position: relative;
	}
	.image {
	  opacity: 1;
	  display: block;
	  width: 100%;
	  height: auto;
	  transition: .5s ease;
	  backface-visibility: hidden;
	}

	.middle {
	  transition: .5s ease;
	  opacity: 0;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  text-align: center;
	}

	.proimg:hover  .image {
	  opacity: 0.3;
	}

	.proimg:hover .middle {
	  opacity: 1;
	}

	.text {
	  background-color: #F08080;
	  color: white;
	  font-size: 16px;
	  padding: 16px 32px;
	}



	.dropbtn {
	  background-color: red;
	  color: white;
	  padding: 8px;
	  font-size: 16px;
	  border: none;
	  cursor: pointer;
	}

	.dropbtn:hover, .dropbtn:focus {
	  background-color: #F08080;
	}

	.dropdown {
		padding: 5px 10px;
	  position: relative;
	  display: inline-block;
	}

	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #f1f1f1;
	  min-width: 160px;
	  overflow: auto;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  z-index: 1;
	}

	.dropdown-content a {
	  color: black;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	}

	.dropdown a:hover {background-color: #ddd;}

	.show {display: block;}

@media only screen and (min-width:1200px) {
	.main {
	  display: grid;
	  grid-template-columns: auto auto auto;
	}

	.card {
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	  max-width: 300px;
	  margin: auto;
	  text-align: center;
	  font-family: arial;
	}

	.price {
	  color: grey;
	  font-size: 22px;
	}

	.card button {
	  border: none;
	  outline: 0;
	  padding: 12px;
	  color: white;
	  background-color: red;
	  text-align: center;
	  cursor: pointer;
	  width: 100%;
	  font-size: 18px;
	}

	.card button:hover {
	  opacity: 0.7;
	}