@keyframes efecteCatalegPrimer {
	0% {
		opacity: 0;
		transform: translateY(-2000px);
		z-index: 100;
	}
	50% {
		opacity: 1;
        transform: perspective(400px) rotateY(0deg);
        z-index: 100;
    }
	100% {
        transform: perspective(400px) rotateY(360deg);
        z-index: 100;
    }
}
@-webkit-keyframes efecteCatalegPrimer {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
		z-index: 100;
	}
	50% {
		opacity: 1;
        -webkit-transform: perspective(400px) rotateY(0deg);
        z-index: 100;
    }
	100% {
        -webkit-transform: perspective(400px) rotateY(360deg);
        z-index: 100;
    }
}
@-moz-keyframes efecteCatalegPrimer {
	0% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
		z-index: 100;
	}
	50% {
		opacity: 1;
        -moz-transform: perspective(400px) rotateY(0deg);
        z-index: 100;
    }
	100% {
        -moz-transform: perspective(400px) rotateY(360deg);
        z-index: 100;
    }
}
@-o-keyframes efecteCatalegPrimer {
	0% {
		opacity: 0;
		-o-transform: translateY(-2000px);
		z-index: 100;
	}
	50% {
		opacity: 1;
        -o-transform: perspective(400px) rotateY(0deg);
        z-index: 100;
    }
	100% {
        -o-transform: perspective(400px) rotateY(360deg);
        z-index: 100;
    }
}

@keyframes efecteCatalegSegon {
	10%, 100% {
        transform: perspective(400px) rotateY(360deg);
        z-index: 100;
    }
}
@-webkit-keyframes efecteCatalegSegon {
	10%, 100% {
        -webkit-transform: perspective(400px) rotateY(360deg);
        z-index: 100;
    }
}
@-moz-keyframes efecteCatalegSegon {
	10%, 100% {
        -moz-transform: perspective(400px) rotateY(360deg);
        z-index: 100;
    }
}
@-o-keyframes efecteCatalegSegon {
	10%, 100% {
        -o-transform: perspective(400px) rotateY(360deg);
        z-index: 100;
    }
}

.efecte-cataleg-1 {
	-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:1s;
	-moz-animation-duration:1s;
	-ms-animation-duration:1s;
	-o-animation-duration:1s;
	animation-duration:1s;
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: efecteCatalegPrimer;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: efecteCatalegPrimer;
	-o-backface-visibility: visible !important;
	-o-animation-name: efecteCatalegPrimer;
	backface-visibility: visible !important;
	animation-name: efecteCatalegPrimer;
    position: absolute;
    left: -50px;
    top: 35px;
    z-index: 100;
}

.efecte-cataleg-2 {
    position: absolute;
    left: -50px;
    top: 35px;
    z-index: 100;
}

.efecte-cataleg-mobile{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 60px;
}

@media (min-width: 768px){
	.efecte-cataleg-2 {
		animation-delay: 3s;
		animation-iteration-count: infinite;
		-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:5s;
		-moz-animation-duration:5s;
		-ms-animation-duration:5s;
		-o-animation-duration:5s;
		animation-duration:5s;
		-webkit-backface-visibility: visible !important;
		-webkit-animation-name: efecteCatalegSegon;
		-moz-backface-visibility: visible !important;
		-moz-animation-name: efecteCatalegSegon;
		-o-backface-visibility: visible !important;
		-o-animation-name: efecteCatalegSegon;
		backface-visibility: visible !important;
		animation-name: efecteCatalegSegon;
	}
}