/*--Section-- 
.shoe-callouts-section{
	padding-right:0!important;
	padding-left:0!important;
	
}
*/


/* --- Container --- */
.shoe-callouts {
  position: relative;
  width: 300px;
  height: 350px;
  margin: 0 auto;
}

/* --- Shoe image --- */
.shoe-callouts .shoe-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 350px;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 1; /* sits below SVG lines */
}

.shoe-callouts.animate-shoe .shoe-img{
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.3));
  animation: popIn 3s ease forwards;
}


/* --- SVG with all paths --- */
.shoe-callouts .line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 350px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.shoe-callouts .line path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}

.shoe-callouts.animate-shoe .line path {
  animation: drawLine 2s ease forwards;
}

.shoe-callouts.animate-shoe .line path:nth-of-type(1) { animation-delay: 0.8s; }
.shoe-callouts.animate-shoe .line path:nth-of-type(2) { animation-delay: 1.6s; }
.shoe-callouts.animate-shoe .line path:nth-of-type(3) { animation-delay: 2.4s; }
.shoe-callouts.animate-shoe .line path:nth-of-type(4) { animation-delay: 3.2s; }
.shoe-callouts.animate-shoe .line path:nth-of-type(5) { animation-delay: 4.0s; }

/* --- Labels --- */
.shoe-callouts .label {
  font-weight: 600;
  position: absolute;
  font-size: 14px;
  color: #ebebeb;
  line-height: 1;
  max-width: 100px;
  text-align: center;
  opacity: 0;
  transform: translateY(5px);
  z-index: 3; /* above everything */
}

.shoe-callouts.animate-shoe .label {
  animation: fadeIn 0.8s ease forwards;
}

/* Labels appear after their lines */
.shoe-callouts.animate-shoe .label-1 { animation-delay: 2.0s; }
.shoe-callouts.animate-shoe .label-2 { animation-delay: 2.8s; }
.shoe-callouts.animate-shoe .label-3 { animation-delay: 3.6s; }
.shoe-callouts.animate-shoe .label-4 { animation-delay: 4.4s; }
.shoe-callouts.animate-shoe .label-5 { animation-delay: 5.2s; }
.shoe-callouts.animate-shoe .label-6 { animation-delay: 6.0s; font-weight:400;}

/* --- Animations --- */
@keyframes drawLine {
  to { 
	  stroke-dashoffset: 0; 
	  stroke-dasharray: 4, 8;;  
	}
}

@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}