/* --- Product Card ---- */
.make-3D-space { position: relative; perspective: 800px; width: 100%; height: 300px; transform-style: preserve-3d; transition: transform 5s; margin-bottom: 30px; }
.product-front, .product-back { width: 100%; height: 300px; background: #fff; background-size: cover !important; position: absolute; left: -5px; top: -5px; -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-back, .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: 100%; height: 290px; position: absolute; 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: 100%; height: 300px; 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; }
.stats-container { background: rgba(24,24,25,0.8); position: absolute; bottom: -40px; left: 0; width: 100%; height: auto; padding: 15px 25px 20px 25px; -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-container { bottom: -7px; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }
.stats-container .product_name { font-family: 'AvenirNextLTPro-DemiCn'; font-size: 27px; color: #fff; text-transform: uppercase; }
   .stats-container .product_name:hover { color: #efefef; }
.stats-container p { padding: 7px 0 0px 0; }
.stats-container a { color: #fff; font-family: 'AvenirNextLTPro-Cn'; font-size: 14px; }
   .stats-container a:hover { color: #efefef; }
.image_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1a1f28; 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; }
.product-options { padding: 0 0 0 0; }
   .product-options strong { font-weight: 700; color: #393c45; font-size: 14px; }
   .product-options span { color: #969699; font-size: 14px; display: block; margin-bottom: 8px; }
.view_details { position: absolute; top: 112px; left: 50%; margin-left: -85px; border: 1px solid #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #fff; font-size: 19px; font-family: 'AvenirNextLTPro-Demi', sans-serif; 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_details:hover { background: #fff; color: #1f4e89; cursor: pointer; }
.product-card.animate .view_details { opacity: 1; width: 152px; font-size: 12px; margin-left: -75px; top: 95px; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }
div.shadow { width: 335px; height: 320px; 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)); }
.product-back div.shadow { z-index: 10; opacity: 1; background: -webkit-linear-gradient(left,rgba(0,0,0,0.2),rgba(0,0,0,0.1)); background: -o-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1)); background: -moz-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1)); background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); }