/* Includes:

     .VeryGood1-5
     .TopRowBorder1-5
     .TopRowButton1-5
     .TopRowButtonStatic1-5

     .mainDrop1-5
     .mainDrop1-5 .popuptext
     .mainDrop1-5 .popuptext::after
     .mainDrop1-5 .show
     
     @-webkit-keyframes fadeIn
     @keyframes fadeIn
     
*/

/* —————————————————————————————————————1———— */

/* The Container For TopRowButtons DropDown 1 */
.VeryGood1 {
  display: center;
  position: absolute;
  background-position: center;
  left: 50%;
  margin-left: -397px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 85px;
  margin-top: 0px;
  text-align: center;
  color: red;
  z-index: 100;

}

/* Cover for Border Image */
.TopRowBorderVisible1 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/TopRowBordersVisible.png");
  left: 50%;
  margin-left: -403px;
  margin-right: -50%;
  width: 142px;
  height: 60px;
  top: 90px;
  margin-top: 0px;
  z-index: 99;

}

/* Actual Border Image*/
.TopRowBorder1 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/TopRowBorders.ppf");
  left: 50%;
  margin-left: -403px;
  margin-right: -50%;
  width: 142px;
  height: 60px;
  top: 90px;
  margin-top: 0px;
  z-index: 98;

}

/* The Cover ... Invisible Image */
.TopRowButtonCover1 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_Cover.png");
  left: 50%;
  margin-left: -397px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 97;

}

/* The Over ... to Soften Underbelly of TopRowButton to better show Steam */
.TopRowButtonOver1 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_Over.png");
  left: 50%;
  margin-left: -397px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 96;

}

/* The Animated Steam */
.TopRowButton1 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam1.ppf");
  left: 50%;
  margin-left: -397px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 95;

}

/* The BottomMost Static/QuikLoad Image */
.TopRowButtonStatic1 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_1_1.jpg");
  left: 50%;
  margin-left: -397px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 94;

}

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

}

/* The actual popup ... background-color: #86815F */
.mainDrop1 .popuptext {
  position: absolute;
  background-image: url("https://www.orgacococoffee.com/Blueberry.png");
  background-repeat: no-repeat;
  background-color: none;
  left: 50%;
  margin-left: -126px;
  width: 250px;
  height: 180px;
  bottom: -326%;
  border-radius: 6px;
  padding: 0px 0;
  color: #fff;
  text-align: center;
  visibility: hidden;
  z-index: 101;
  
}

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

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

/* —————————————————————————————————————2———— */

/* The Container For TopRowButtons DropDown 2 */
.VeryGood2 {
  display: center;
  position: absolute;
  background-position: center;
  left: 50%;
  margin-left: -231px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 85px;
  margin-top: 0px;
  text-align: center;
  color: red;
  z-index: 100;

}

/* Cover for Border Image */
.TopRowBorderVisible2 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/TopRowBordersVisible.ppf");
  left: 50%;
  margin-left: -237px;
  margin-right: -50%;
  width: 142px;
  height: 60px;
  top: 90px;
  margin-top: 0px;
  z-index: 99;

}

/* Actual Border Image */
.TopRowBorder2 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/TopRowBorders.ppf");
  left: 50%;
  margin-left: -237px;
  margin-right: -50%;
  width: 142px;
  height: 60px;
  top: 90px;
  margin-top: 0px;
  z-index: 98;

}

/* The Cover ... Invisible Image */
.TopRowButtonCover2 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_Cover.png");
  left: 50%;
  margin-left: -231px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 97;

}
/* The Over ... to Soften Underbelly of TopRowButton to better show Steam */
.TopRowButtonOver2 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_Over.png");
  left: 50%;
  margin-left: -231px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 96;

}

/* The Animated Steam */
.TopRowButton2 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam2.ppf");
  left: 50%;
  margin-left: -231px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 95;

}

/* The BottomMost Static/QuikLoad Image */
.TopRowButtonStatic2 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_2_1.jpg");
  left: 50%;
  margin-left: -231px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 94;

}

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

}

/* The actual popup ... background-color: #86815F */
.mainDrop2 .popuptext {
  position: absolute;
  background-image: url("https://www.orgacococoffee.com/Blue.png");
  background-repeat: no-repeat;
  background-color: none;
  left: 50%;
  margin-left: -70px;
  width: 140px;
  height: 180px;
  bottom: -269%;
  border-radius: 6px;
  padding: 0px 0;
  color: #fff;
  text-align: center;
  visibility: hidden;
  z-index: 101;
  
}

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

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

/* —————————————————————————————————————3———— */

/* The Container For TopRowButtons DropDown 3 */
.VeryGood3 {
  display: center;
  position: absolute;
  background-position: center;
  left: 50%;
  margin-left: -65px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 85px;
  margin-top: 0px;
  text-align: center;
  color: red;
  z-index: 100;

}

/* Cover for Border Image */
.TopRowBorderVisible3 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/TopRowBordersVisible.ppf");
  left: 50%;
  margin-left: -71px;
  margin-right: -50%;
  width: 142px;
  height: 60px;
  top: 90px;
  margin-top: 0px;
  z-index: 99;

}

/* Actual Border Image*/
.TopRowBorder3 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/TopRowBorders.ppf");
  left: 50%;
  margin-left: -71px;
  margin-right: -50%;
  width: 142px;
  height: 60px;
  top: 90px;
  margin-top: 0px;
  z-index: 98;

}

/* The Cover ... Invisible Image */
.TopRowButtonCover3 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_Cover.png");
  left: 50%;
  margin-left: -65px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 97;

}

/* The Over ... to Soften Underbelly of TopRowButton to better show Steam */
.TopRowButtonOver3 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_Over.png");
  left: 50%;
  margin-left: -65px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 96;

}

/* The Animated Steam */
.TopRowButton3 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam3.ppf");
  left: 50%;
  margin-left: -65px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 95;

}

/* The BottomMost Static/QuikLoad Image */
.TopRowButtonStatic3 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_3_1.jpg");
  left: 50%;
  margin-left: -65px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 94;

}

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

}

/* The actual popup ... background-color: #86815F */
.mainDrop3 .popuptext {
  position: absolute;
  background-image: url("https://www.orgacococoffee.com/No_Handle.png");
  background-repeat: no-repeat;
  background-color: none;
  left: 50%;
  margin-left: -70px;
  width: 140px;
  height: 180px;
  bottom: -336%;
  border-radius: 6px;
  padding: 0px 0;
  color: #fff;
  text-align: center;
  visibility: hidden;
  z-index: 101;
  
}

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

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

}

/* —————————————————————————————————————4———— */

/* The Container For TopRowButtons DropDown 4 */
.VeryGood4 {
  display: center;
  position: absolute;
  background-position: center;
  left: 50%;
  margin-left: 101px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 85px;
  margin-top: 0px;
  text-align: center;
  color: red;
  z-index: 100;

}

/* Cover for Border Image */
.TopRowBorderVisible4 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/TopRowBordersVisible.ppf");
  left: 50%;
  margin-left: 95px;
  margin-right: -50%;
  width: 142px;
  height: 60px;
  top: 90px;
  margin-top: 0px;
  z-index: 99;

}

/* Actual Border Image */
.TopRowBorder4 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/TopRowBorders.ppf");
  left: 50%;
  margin-left: 95px;
  margin-right: -50%;
  width: 142px;
  height: 60px;
  top: 90px;
  margin-top: 0px;
  z-index: 98;

}

/* The Cover ... Invisible Image */
.TopRowButtonCover4 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_Cover.png");
  left: 50%;
  margin-left: 101px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 97;

}

/* The Over ... to Soften Underbelly of TopRowButton to better show Steam */
.TopRowButtonOver4 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_Over.png");
  left: 50%;
  margin-left: 101px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 96;

}

/* The Animated Steam */
.TopRowButton4 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam4.ppf");
  left: 50%;
  margin-left: 101px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 95;

}

/* The BottomMost Static/QuikLoad Image */
.TopRowButtonStatic4 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteamStatic_4_1.jpg");
  left: 50%;
  margin-left: 101px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 94;

}

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

}

/* The actual popup ... background-color: #86815F */
.mainDrop4 .popuptext {
  position: absolute;
  background-image: url("https://www.orgacococoffee.com/Iris.png");
  background-repeat: no-repeat;
  background-color: none;
  left: 50%;
  margin-left: -70px;
  width: 140px;
  height: 180px;
  bottom: -269%;
  border-radius: 6px;
  padding: 0px 0;
  color: #fff;
  text-align: center;
  visibility: hidden;
  z-index: 101;
  
}

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

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

}

/* —————————————————————————————————————5———— */

/* The Container For TopRowButtons DropDown 5 */
.VeryGood5 {
  display: center;
  position: absolute;
  background-position: center;
  left: 50%;
  margin-left: 267px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 85px;
  margin-top: 0px;
  text-align: center;
  color: red;
  z-index: 100;

}
=
/* Cover for Border Image */
.TopRowBorderVisible5 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/TopRowBordersVisible.ppf");
  left: 50%;
  margin-left: 261px;
  margin-right: -50%;
  width: 142px;
  height: 60px;
  top: 90px;
  margin-top: 0px;
  z-index: 99;

}

/* Actual Border Image */
.TopRowBorder5 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/TopRowBorders.ppf");
  left: 50%;
  margin-left: 261px;
  margin-right: -50%;
  width: 142px;
  height: 60px;
  top: 90px;
  margin-top: 0px;
  z-index: 98;

}

/* The Cover ... Invisible Image */
.TopRowButtonCover5 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_Cover.png");
  left: 50%;
  margin-left: 267px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 97;

}

/* The Over ... to Soften Underbelly of TopRowButton to better show Steam */
.TopRowButtonOver5 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam_Over.png");
  left: 50%;
  margin-left: 267px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 96;

}

/* The Animated Steam */
.TopRowButton5 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteam5.ppf");
  left: 50%;
  margin-left: 267px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 95;

}

/* The BottomMost Static/QuikLoad Image */
.TopRowButtonStatic5 {
  display: center;
  position: absolute;
  background-position: center;
  background-image: url("https://www.orgacococoffee.com/CoffeeSteamStatic_5_1.jpg");
  left: 50%;
  margin-left: 267px;
  margin-right: -50%;
  width: 130px;
  height: 50px;
  top: 100px;
  margin-top: 0px;
  color: red;
  font-size: 18px;
  z-index: 94;

}

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

}

/* The actual popup  ... background-color: #86815F */
.mainDrop5 .popuptext {
  position: absolute;
  background-image: url("https://www.orgacococoffee.com/Orange.png");
  background-repeat: no-repeat;
  background-color: none;
  left: 50%;
  margin-left: -70px;
  width: 140px;
  height: 180px;
  bottom: -222%;
  border-radius: 6px;
  padding: 0px 0;
  color: #fff;
  text-align: center;
  visibility: hidden;
  z-index: 101;
  
}

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

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

}

/* ——————————————————————————————————Fade In———— */

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

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

/* TOTAL EXPERIMENT —- Add animation (fade out the popup) - to be used by all 5 here

Question: can I change the “fadeIn” to “fadeOut” altering the properties from the original code above
. mainDrop1 .hide { ???
  visibility: hide; ???
  -webkit-animation: fadeOut 1s; ???
  animation: fadeOut 1s; ???
  z-index: 100;
  
}

I switched the “from and “to” variables from above to fit my experiment for both below
@-webkit-keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
  
}

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

}

*/