/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 99;

}

/* Popup actual */
.popup .popuptext {
  position: absolute;
  background-color: #f0eddb;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/WillowGrass.xpf");
  background-repeat: no-repeat;
  visibility: hidden;
  color: #0f0d01;
  width: 110px;
  min-width: 100px;
  top: 30px;
  bottom: 125%;
  left: 50%;
  margin-left: -40px;
  border-radius: 15px / 50px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  text-align: center;
  z-index: 100;
  
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: -15%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #86815F transparent;
  z-index: 99;
  
}

/* Popup show - Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  z-index: 99;
  
}

/* Popup 1 container - can be anything you want */
.popup1 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 89;

}

/* Popup 1 actual */
.popup1 .popuptext1 {
  position: absolute;
  background-color: #f0eddb;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/WillowGrass.xpf");
  background-repeat: no-repeat;
  visibility: hidden;
  color: #0f0d01;
  width: 110px;
  min-width: 100px;
  top: 30px;
  bottom: 125%;
  left: 50%;
  margin-left: -40px;
  border-radius: 15px / 50px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  text-align: center;
  z-index: 90;
  
}

/* Popup 1 arrow */
.popup1 .popuptext1::after {
  content: "";
  position: absolute;
  top: -15%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #86815F transparent;
  z-index: 89;
  
}

/* Popup 1 show 1 - Toggle this class - hide and show the popup 1 */
.popup1 .show1 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  z-index: 89;
  
}

/* Popup 2 container - can be anything you want */
.popup2 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 79;

}

/* Popup 2 actual */
.popup2 .popuptext2 {
  position: absolute;
  background-color: #f0eddb;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/WillowGrass.xpf");
  background-repeat: no-repeat;
  visibility: hidden;
  color: #0f0d01;
  width: 110px;
  min-width: 100px;
  top: 30px;
  bottom: 125%;
  left: 50%;
  margin-left: -40px;
  border-radius: 15px / 50px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  text-align: center;
  z-index: 80;
  
}

/* Popup 2 arrow */
.popup2 .popuptext2::after {
  content: "";
  position: absolute;
  top: -15%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #86815F transparent;
  z-index: 79;
  
}

/* Popup 2 show 2 - Toggle this class - hide and show the popup 2 */
.popup2 .show2 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  z-index: 79;
  
}

/* Popup 3 container - can be anything you want */
.popup3 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 69;

}

/* Popup 3 actual */
.popup3 .popuptext3 {
  position: absolute;
  background-color: #f0eddb;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/WillowGrass.xpf");
  background-repeat: no-repeat;
  visibility: hidden;
  color: #0f0d01;
  width: 110px;
  min-width: 100px;
  top: 30px;
  bottom: 125%;
  left: 50%;
  margin-left: -40px;
  border-radius: 15px / 50px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  text-align: center;
  z-index: 70;
  
}

/* Popup 3 arrow */
.popup3 .popuptext3::after {
  content: "";
  position: absolute;
  top: -15%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #86815F transparent;
  z-index: 69;
  
}

/* Popup 3 show 3 - Toggle this class - hide and show the popup 3 */
.popup3 .show3{
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  z-index: 69;
  
}

/* Popup 4 container - can be anything you want */
.popup4 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 59;

}

/* Popup 4 actual */
.popup4 .popuptext4 {
  position: absolute;
  background-color: #f0eddb;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/WillowGrass.xpf");
  background-repeat: no-repeat;
  visibility: hidden;
  color: #0f0d01;
  width: 110px;
  min-width: 100px;
  top: 30px;
  bottom: 125%;
  left: 50%;
  margin-left: -40px;
  border-radius: 15px / 50px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  text-align: center;
  z-index: 60;
  
}

/* Popup 4 arrow */
.popup4 .popuptext4::after {
  content: "";
  position: absolute;
  top: -15%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #86815F transparent;
  z-index: 59;
  
}

/* Popup 4 show 4 - Toggle this class - hide and show the popup 4 */
.popup4 .show4 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  z-index: 59;
  
}

/* Popup 5 container - can be anything you want */
.popup5 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 49;

}
/* Popup 5 actual */
.popup5 .popuptext5 {
  position: absolute;
  background-color: #f0eddb;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/WillowGrass.xpf");
  background-repeat: no-repeat;
  visibility: hidden;
  color: #0f0d01;
  width: 110px;
  min-width: 100px;
  top: 30px;
  bottom: 125%;
  left: 50%;
  margin-left: -40px;
  border-radius: 15px / 50px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  text-align: center;
  z-index: 50;
  
}

/* Popup 5 arrow */
.popup5 .popuptext5::after {
  content: "";
  position: absolute;
  top: -15%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #86815F transparent;
  z-index: 49;
  
}

/* Toggle this class - hide and show the popup */
.popup5 .show5 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  z-index: 49;
  
}

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

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