.wrapper {
  width: 1150px;
  height: 100vh;
  margin: 0 auto;
  text-align: center;
}

.wrapper h2 {
  margin: 20px 0 10px 0;
}

.perfume{
  width: 300px;
  height: 340px;
  margin-top: 3%;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: #fff;
  display: inline-block;
  transform-origin: 100% 0;
  margin-bottom: 5%;
}
.perfume .title  {
  padding: 11px 5px;
  box-sizing: border-box;
  color: #346;
  margin: 0;
  z-index: 20;
}

.perfume .title span {

  font-size: 16px;
  font-weight: 800;
  color: #747070;

}

.perfume .content {
  width: 260px;
  height: 330px;
  margin-left: 20px;
  position: relative;
  left: 0;
  top: 0;
  overflow: hidden;
}
.BOX3 {
  width: 260px;
  height: 281px;
  position: absolute;
  left: 0px;
  perspective: 600px;
}

.BOX {
  overflow: hidden;
}

.pic {
  width: 1300px;
  position: relative;
  transition: 0.8s cubic-bezier(0.5, -1, 0.75, 2);
}

.pic img {
  float: left;
  width: 20%;
  height: 20%;
}
.BOX3 img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /*transform: rotateY(0deg);
  backface-visibility: hidden;*/
  transition: 1s;
  /*animation: expand 1s cubic-bezier(0.47, 2.02, 0.31, -0.36);*/ 
  border: 0.5px solid #999797;
  border-radius: 8px;
}

@keyframes expand {
  0% {transform: scale(0, 0);}
  100% {transform: scale(1, 1);}
}

.thumbnail-corporate-caption {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 20px !important;
    background: rgba(41, 41, 58, 0.4) !important;
    font-family: "Roboto Condensed", sans-serif !important;
    height: 282px !important;
}



/* ----------------animation for BOX------------- */

#r1:checked ~ .BOX .pic { left: 0px;}
#r2:checked ~ .BOX .pic { left: -260px;}
#r3:checked ~ .BOX .pic { left: -520px;}
#r4:checked ~ .BOX .pic { left: -780px;}
#r5:checked ~ .BOX .pic { left: -1040px;}
#r6:checked ~ .BOX .pic { left: -1300px;}


/* ----------------animation for BOX2------------- */
#b2:checked ~ .BOX2 { 
  background-image: url("http://demandware.edgesuite.net/aakk_prd/on/demandware.static/-/Sites-Crabtree-US-Products/default/dw1d0ba0fb/Large/81478_alt0.png");
  background-size: 260px 260px;
  animation: spin 1s;
}


@keyframes spin {
  0% {transform: rotateY(0deg);}
  100% {transform: rotateY(720deg);}
}
@keyframes counterSpin {
  0% {transform: rotateY(0deg);}
  100% {transform: rotateY(-720deg);}
}

/* ----------------hide button to the left------------------ */
.btn-hide, .btn-hide1, .btn-hide2 { 
  position: absolute; left: -10000px; 
}

/* ----------------button for type selection------------------- */    
.hand_creme .btn, .bath .btn1, .perfume .btn2 { 
  display: inline-block;
  position: relative;
  border-radius: 7px;
  left: 0;
  bottom: -300px;
  height: 25px;
  width: 25px;
  margin-left: 5px;
}
.hand_creme .btn, .bath .btn1 {
  cursor: pointer;
}


.hand_creme .btn.pink {
  background: url("http://demandware.edgesuite.net/aakk_prd/on/demandware.static/-/Sites-Crabtree-US-Products/default/dwd4875560/Large/81089_alt0.png") center center no-repeat;
  background-size: 260px 260px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.hand_creme .btn.orange {
  background: url("http://demandware.edgesuite.net/aakk_prd/on/demandware.static/-/Sites-Crabtree-US-Products/default/dwee4b375d/Large/81100_alt0.png") center center no-repeat;
  background-size: 260px 260px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.hand_creme .btn.green {
  background: url("http://demandware.edgesuite.net/aakk_prd/on/demandware.static/-/Sites-Crabtree-US-Products/default/dwc93c5d9f/Large/81097_alt0.png") center center no-repeat;
  background-size: 260px 260px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.hand_creme .btn.blue {
  background: url("http://demandware.edgesuite.net/aakk_prd/on/demandware.static/-/Sites-Crabtree-US-Products/default/dw74aa7713/Large/81087_alt0.png") center center no-repeat;
  background-size: 260px 260px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.hand_creme .btn.purple {
  background: url("http://demandware.edgesuite.net/aakk_prd/on/demandware.static/-/Sites-Crabtree-US-Products/default/dwfab58721/Large/81094_alt0.png") center center no-repeat;
  background-size: 260px 260px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.bath .btn1.honey {
  background: url("http://demandware.edgesuite.net/aakk_prd/on/demandware.static/-/Sites-Crabtree-US-Products/default/dw74046499/Large/81473_alt0.png") center center no-repeat;
  background-size: 260px 260px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.bath .btn1.lavender {
  background: url("http://demandware.edgesuite.net/aakk_prd/on/demandware.static/-/Sites-Crabtree-US-Products/default/dw1d0ba0fb/Large/81478_alt0.png") center center no-repeat;
  background-size: 260px 260px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.perfume .btn2.lily {
  background: url("http://demandware.edgesuite.net/aakk_prd/on/demandware.static/-/Sites-Crabtree-US-Products/default/dw05172787/Large/79556_alt0.png") center center no-repeat;
  background-size: 260px 260px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

/* --------------box-shadow settings ------------------- */
/* ---------hand_creme--------- */
#r1:checked ~ .btn.orange {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);}
#r1:checked ~ .btn.green {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);} 
#r1:checked ~ .btn.blue {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);} 
#r1:checked ~ .btn.purple {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);}

#r2:checked ~ .btn.pink {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);}
#r2:checked ~ .btn.green {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);} 
#r2:checked ~ .btn.blue {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);} 
#r2:checked ~ .btn.purple {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);}

#r3:checked ~ .btn.pink  {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);} 
#r3:checked ~ .btn.orange {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);}
#r3:checked ~ .btn.blue {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);} 
#r3:checked ~ .btn.purple {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);}

#r4:checked ~ .btn.pink  {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);} 
#r4:checked ~ .btn.orange {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);}
#r4:checked ~ .btn.green {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);} 
#r4:checked ~ .btn.purple {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);}

#r5:checked ~ .btn.pink  {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);} 
#r5:checked ~ .btn.orange {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);}
#r5:checked ~ .btn.green {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);} 
#r5:checked ~ .btn.blue {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);}

/* --------------bath-------------- */
#b1:checked ~ .btn1.lavender {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);}
#b2:checked ~ .btn1.honey {box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);} 


/* ------------------- product names -------------------- */
.names, .names1, .names2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 30px;
  /* background-color: #ddd; */
}
.names div, .names1 div, .names2 div {
  width: 200px;
  height: 30px;   
  position: absolute;
  left: 30px;
  top: -30px;
}
.names div p, .names1 div p, .names2 div p {
  text-align: center;
  line-height: 30px;
  color: #467;
  font-size: 16px;
 }
 .names div p {
  font-size: 14px;
 }

/* ------------animation for product names--------------- */
/* ---------.hand_cremes---------- */
#r2:checked ~ .names div:nth-child(2){ 
  animation: slideDown 0.5s 0s ease-in forwards; 
  transform: scale(1.2);
    transition: 1s 0.6s cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
#r3:checked ~ .names div:nth-child(3){ 
  animation: slideDown 0.5s 0s ease-in forwards;
  transform: scale(1.2);
    transition: 1s 0.6s cubic-bezier(0.47, 2.02, 0.31, -0.36); 
}
#r4:checked ~ .names div:nth-child(4){ 
  animation: slideDown 0.5s 0s ease-in forwards;
  transform: scale(1.2);
    transition: 1s 0.6s cubic-bezier(0.47, 2.02, 0.31, -0.36); 
}
#r5:checked ~ .names div:nth-child(5){ 
  animation: slideDown 0.5s 0s ease-in forwards;
  transform: scale(1.2);
    transition: 1s 0.6s cubic-bezier(0.47, 2.02, 0.31, -0.36); 
}
#r1:checked ~ .names div:nth-child(1){ 
  animation: slideDown 0.5s 0s ease-in forwards;
  transform: scale(1.2);
    transition: 1s 0.6s cubic-bezier(0.47, 2.02, 0.31, -0.36); 
}


/* ---------.bath---------- */
#b2:checked ~ .names1 div:nth-child(2){ 
  animation: bounce 1s 0s ease-in forwards;
}
#b1:checked ~ .names1 div:nth-child(1){ 
  animation: bounce 1s 0s ease-in forwards;
}


/* ---------.perfume---------- */
#p1:checked ~ .names2 div:nth-child(1){ 
  animation: bounce 1s 0s ease-in forwards;
}


@keyframes slideDown {
  0% {top: -30px;}
  100% {top: 5px;}
}

@keyframes bounce {
  16.65% { transform: translateY(43px); }
  33.3% { transform: translateY(29px); }
  49.95% { transform: translateY(39px); }
  66.6% { transform: translateY(33px); }
  83.25% { transform: translateY(36px); }
  100% { transform: translateY(35px); }
}

/* ------------------Add-to-cart button---------------------- */
.hand_creme .cart, .bath .cart, .perfume .cart {
  text-align: center;
  padding: 5px 10px;
  width: 230px;
  border-radius: 5px;
  margin: 15px 0 0 23px;
  background-color: #000;
  cursor: pointer
}
.hand_creme .cart p, .bath .cart p, .perfume .cart p {
  color:#fff;
}

/* ------animation-Add-to-cart button--------- */
.hand_creme .cart:hover {
  background-color: #346;
  color: #fff;
  transition: 1s;
  
  animation: wobble 1s ease-in-out 1;
}
.bath .cart:hover {
  background-color: #346;
  transition: 0.8s;
  /* transform: translateY(-5px); */
  animation: wobble 1s ease-in-out 1;
}

.perfume .cart:hover {
  background-color: #346;
  color: #fff;
  transition: 1s;
  animation: wobble 1s ease-in-out 1;
}
  

@keyframes wobble {
  16.65% { transform: translateY(8px); }
  33.3% { transform: translateY(-6px); }
  49.95% { transform: translateY(4px); }
  66.6% { transform: translateY(-2px); }
  83.25% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}