/**
 * Styles
 */

.pif-has-gallery {
    position: relative;
}
.pif-has-gallery .onsale {
    z-index: 999999;
}

.pif-has-gallery .secondary-image {
    position: absolute;
    top:0;
    left:15px !important;
    opacity:0 !important;
}


 /**
 * Animation
 */
.animated{
	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	-o-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration: 0.1s;
	-moz-animation-duration: 0.1s;
	-ms-animation-duration: 0.1s;
	-o-animation-duration: 0.1s;
	animation-duration: 0.1s !important;
}

.animated.hinge{
	-webkit-animation-duration: 0.1s;
	-moz-animation-duration: 0.1s;
	-ms-animation-duration: 0.1s;
	-o-animation-duration: 0.1s;
	animation-duration: 0.1s;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0 !important;
        -webkit-transition: .1s;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 10ms;
    }   100% {
        opacity: 1 !important;
        -webkit-transition: .1s;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 10ms;
    }
}

@-moz-keyframes fadeInDown {
    0% {
        opacity: 0 !important;
        -moz-transition: .1s;
		-moz-transition-timing-function: ease-out;
		-moz-transition-duration: 10ms;
    }

    100% {
        opacity: 1 !important;
        -moz-transition: .1s;
		-moz-transition-timing-function: ease-out;
		-moz-transition-duration: 10ms;
    }
}

@-o-keyframes fadeInDown {
    0% {
        opacity: 0 !important;
        -o-transition: .1s;
		-o-transition-timing-function: ease-out;
		-o-transition-duration: 10ms;
    }

    100% {
        opacity: 1 !important;
        -o-transition: .1s;
		-o-transition-timing-function: ease-out;
		-o-transition-duration: 10ms;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0 !important;
        transition: .1s;
		transition-timing-function: ease-out;
		transition-duration: 10ms;
    }

    100% {
        opacity: 1 !important;
        transition: .1s;
		transition-timing-function: ease-out;
		transition-duration: 10ms;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
	-webkit-animation-duration:.1s;
	-moz-animation-duration:.1s;
	-ms-animation-duration:.1s;
	-o-animation-duration:.1s;
	animation-duration:.1s;
}
@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1 !important;
        -webkit-transition: .1s;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 10ms;
    }

    100% {
        opacity: 0 !important;
        -webkit-transition: .1s;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 10ms;
    }
}
@-moz-keyframes fadeOutUp {
    0% {
        opacity: 1 !important;
        -moz-transition: .1s;
		-moz-transition-timing-function: ease-out;
		-moz-transition-duration: 10ms;
    }

    100% {
        opacity: 0 !important;
        -moz-transition: .1s;
		-moz-transition-timing-function: ease-out;
		-moz-transition-duration: 10ms;
    }
}
@-o-keyframes fadeOutUp {
    0% {
        opacity: 1 !important;
        o-transition: .1s;
		-o-transition-timing-function: ease-out;
		-o-transition-duration: 10ms;
    }

    100% {
        opacity: 0 !important;
        -o-transition: .1s;
		-o-transition-timing-function: ease-out;
		-o-transition-duration: 10ms;
    }
}
@keyframes fadeOutUp {
    0% {
        opacity: 1 !important;
        transition: .1s;
		transition-timing-function: ease-out;
		transition-duration: 10ms;
    }

    100% {
        opacity: 0 !important;
        transition: .1s;
		transition-timing-function: ease-out;
		transition-duration: 10ms;
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    -moz-animation-name: fadeOutUp;
    -o-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
	-webkit-animation-duration:.1s;
	-moz-animation-duration:.1s;
	-ms-animation-duration:.1s;
	-o-animation-duration:.1s;
	animation-duration:.1s;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
  animation-name: fadeIn;

}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
  animation-name: fadeOut;

}