/* How to make product cards for Quick Ship Program
// code found at: https://codepen.io/virgilpana/pen/RNYQwB
// shows example

// CSS - goes in file archives under css custom */

/* Generals resets and unimportant stuff */
* { margin: 0px; padding: 0px; }
body {
  background: #eaebec;
  font-family: "Georgia", serif; 
}

/* --- Product Card ---- */
#make-3D-space{
    position: relative;
    perspective: 800px;
    width:300px;
    height:330px;
    transform-style: preserve-3d;
    transition: transform 5s;
    position:static;    
    top:80px;
    left:50%; 
    margin: auto;
}
#product-front{
  width:300px;
  height:330px;
  background:#F7F9FA;
  position:static;
  left:-5px;
  top:-5px;
   margin: auto;
  -webkit-transition: all 100ms ease-out; 
       -moz-transition: all 100ms ease-out; 
         -o-transition: all 100ms ease-out; 
            transition: all 100ms ease-out; 
}

}
.product-card.animate #product-front{
  top:0px;
  left:0px;
  -webkit-transition: all 100ms ease-out; 
       -moz-transition: all 100ms ease-out; 
         -o-transition: all 100ms ease-out; 
            transition: all 100ms ease-out; 
}
.product-card{
  width:300px;
  height:330px;
  position:static;
  border: 1px solid #dddddd;   
  top:10px;
  left:10px;  
  overflow:hidden;
    transform-style: preserve-3d;
  -webkit-transition:  100ms ease-out; 
       -moz-transition:  100ms ease-out; 
         -o-transition:  100ms ease-out; 
            transition:  100ms ease-out;
}

.product-card.animate{
  top:5px;
  left:5px;
  width:300px;
  height:330px;
  box-shadow:0px 13px 21px -5px rgba(0, 0, 0, 0.3);
  -webkit-transition:  100ms ease-out; 
       -moz-transition:  100ms ease-out; 
         -o-transition:  100ms ease-out; 
            transition:  100ms ease-out; 
}
/* use for single-line product names*/
.stats-container1{
  background:#fff;  
  position:absolute;
  top:200px;
  left:0;
  width:240px;
  height:220px;
  padding:27px 35px 35px; 
  -webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out;
}
.product-card.animate .stats-container1{
  top:150px;
  -webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}
.stats-container1 .product_name{
  font-size:22px;
  color:#000000;  
}
.stats-container1 p{
  font-size:16px;
  color:#b1b1b3;  
  padding:0px 0 50px 0;
}
/* use for multi-line product names*/
.stats-container2{
  background:#fff;  
  position:absolute;
  top:200px;
  left:0;
  width:240px;
  height:220px;
  padding:27px 35px 35px; 
  -webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out;
}
.product-card.animate .stats-container2{
  top:150px;
  -webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}
.stats-container2 .product_name{
  font-size:22px;
  color:#000000;  
}
.stats-container2 p{
  font-size:16px;
  color:#b1b1b3;  
  padding:0px 0 24px 0;
}
.image_overlay{
  position:absolute;
  top:0;
  left:0; 
  width:100%;
  height:100%;
  background:#000000;
  opacity:0;  
}
.product-card.animate .image_overlay{
  opacity:0.7;  
  -webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}

#view_product{  
  position:absolute;
  top:35px;
  left:50%;
  margin-left:-85px;  
  border:2px solid #fff;
  color:#fff;
  font-size:19px;
  text-align:center;
  text-transform:uppercase;
  font-weight:700;
  padding:10px 0;
  width:172px;  
  opacity:0;
  -webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}
#view_product:hover{  
  background:#fff;
  color:#00b3cd;
  cursor:pointer;

}
.product-card.animate #view_product{
  opacity:1;
  width:152px;
  font-size:15px;
  margin-left:-75px;
  top:56px;
  -webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out;     
}
/* 1 Day Icon */
div.icon-one-day{
  margin-top:3px;
  position: relative;
  float: left;
  margin-right: 5px;
}
div.icon-one-day div{
  visibility: hidden;
  width: 110px;
  background-color: rgba(204, 30, 78, 1.0);
  font-family: "Source Sans Pro", sans-serif;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  bottom: 100%;
  left: 50%;
  margin-left: -10px; /* Use half of the width (120/2 = 60), to center the tooltip */
  margin-bottom: 5px;
  position: absolute;
  z-index: 1;
}
div.icon-one-day:hover{
 cursor:pointer;
}
div.icon-one-day:hover div{
  visibility: visible;
}
/* triangle pointing to icon */
div.icon-one-day div::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the text */
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #CC1E4E transparent transparent transparent;
}

/* 5 Day Icon */
div.icon-five-day{
  margin-top:3px;
  position: relative;
  float: left;
  margin-right: 5px;
}
div.icon-five-day div{
  visibility: hidden;
  width: 110px;
  background-color: rgba(249, 157, 41, 1.0);
  font-family: "Source Sans Pro", sans-serif;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  bottom: 100%;
  left: 50%;
  margin-left: -12px; /* Use half of the width (120/2 = 60), to center the tooltip */
  margin-bottom: 5px;
  position: absolute;
  z-index: 1;
}
div.icon-five-day:hover{
 cursor:pointer;
}
div.icon-five-day:hover div{
  visibility: visible;
}
/* triangle pointing to icon */
div.icon-five-day div::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the text */
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #F99D29 transparent transparent transparent;
}
/* 10 Day Icon */
div.icon-ten-day{
  margin-top:3px;
  position: relative;
  float: left;
  margin-right: 5px;
}
div.icon-ten-day div{
  visibility: hidden;
  width: 110px;
  background-color: rgba(42, 162, 85, 1.0);
  font-family: "Source Sans Pro", sans-serif;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  bottom: 100%;
  left: 50%;
  margin-left: -12px; /* Use half of the width (120/2 = 60), to center the tooltip */
  margin-bottom: 5px;
  position: absolute;
  z-index: 1;
}
div.icon-ten-day:hover{
 cursor:pointer;
}
div.icon-ten-day:hover div{
  visibility: visible;
}
/* triangle pointing to icon */
div.icon-ten-day div::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the text */
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #2AA255 transparent transparent transparent;
}

/* 15 Day Icon */
div.icon-fifteen-day{
  margin-top:3px;
  position: relative;
  float: left;
  margin-right: 5px;
}
div.icon-fifteen-day div{
  visibility: hidden;
  width: 110px;
  background-color: rgba(12, 79, 152, 1.0);
  font-family: "Source Sans Pro", sans-serif;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  bottom: 100%;
  left: 50%;
  margin-left: -12px; /* Use half of the width (120/2 = 60), to center the tooltip */
  margin-bottom: 5px;
  position: absolute;
  z-index: 1;
}
div.icon-fifteen-day:hover{
 cursor:pointer;
}
div.icon-fifteen-day:hover div{
  visibility: visible;
}
/* triangle pointing to icon */
div.icon-fifteen-day div::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the text */
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #0C4F98 transparent transparent transparent;
}

div.shadow{
  width:300px;height:340px;
  opacity:0;
  position:absolute;
  top:0;
  left:0;
  z-index:3;
  display:none;
  background: -webkit-linear-gradient(left,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
    background: -o-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2)); 
    background: -moz-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2)); 
    background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.2)); 
}