@charset "utf-8";
/* CSS Document */

@keyframes topIn {
	from {transform: translateY(-100px)}
	to {transform: translateY(0)}
}

@keyframes topInTurnLeft {
	from {transform: translateY(-100px) rotate(0)}
	to {transform: translateY(0) rotate(-20deg)}
}

@keyframes topInTurnRight {
	from {transform: translateY(-100px) rotate(0)}
	to {transform: translateY(0) rotate(20deg)}
}

@keyframes bottomIn {
	from { transform: translateY(100px)}
	to { transform: translateY(0)}
}

@keyframes leftIn {
	from {transform: translateX(-150px)}
	to {transform: translateX(0)}
}

@keyframes rightIn {
	from {transform: translateX(150px)}
	to {transform: translateX(0)}
}

@keyframes scaleOut {
	from {transform: scale(0)}
	to {transform: scale(1)}
}

@keyframes scaleIn {
	from {transform: scale(1.2)}
	to {transform: scale(1)}
}

@keyframes fadeIn {
	from {opacity: 0}
	to {opacity: 1}
}

@keyframes spin {
	from {transform: rotate(0)}
	to {transform: rotate(360deg)}
}

@keyframes shake {
	0% {transform: rotate(0)}
	20% {transform: rotate(5deg)}
	40% {transform: rotate(-5deg)}
	60% {transform: rotate(5deg)}
	80% {transform: rotate(-5deg)}
}

@keyframes leftright {
	0% {transform: translateX(0)}
	20% {transform: translateX(10px)}
	40% {transform: translateX(-10px)}
	60% {transform: translateX(10px)}
	80% {transform: translateX(-10px)}
}

@keyframes floaty {
	20% { transform: translateY(20px)}
	40% { transform: translateX(20px)}
	60% { transform: translateY(-20px)}
	80% {transform: translateX(-20px)}
}




/* Index Hero-------------------------------------------------------------------------------- */

.elegance, .timeless {
	animation: fadeIn 0.8s ease-out, leftIn 0.8s ease-out;
}

.redefined {
	animation: fadeIn 0.8s ease-out, rightIn 0.8s ease-out;
}

.herocheckbox {
	animation: fadeIn 1s ease-out;
}




/* About Hero-------------------------------------------------------------------------------- */

.catabout {
	animation: fadeIn 0.8s ease-out, leftIn 0.8s ease-out;
}

.catus {
	animation: fadeIn 0.8s ease-out, rightIn 0.8s ease-out;
}




/* Brands Hero------------------------------------------------------------------------------- */

.brandstitle {
	animation: fadeIn 0.8s ease-out, topIn 0.8s ease-out;
}

.clockbox {
	animation: fadeIn 0.8s ease-out, bottomIn 0.8s ease-out;
}




/* Categories Hero--------------------------------------------------------------------------- */

.categoriestitle, .categoriestitleM {
	animation: fadeIn 0.8s ease-out, bottomIn 0.8s ease-out;
}

.cd1 {
	animation: fadeIn 0.8s ease-out, topIn 0.8s ease-out;
}

.cd2 {
	animation: fadeIn 1.2s ease-out, topIn 1.2s ease-out;
}

.cd3 {
	animation: fadeIn 1.6s ease-out, topIn 1.6s ease-out;
}




/* Categories Hero--------------------------------------------------------------------------- */

.contacttitle {
	animation: fadeIn 1.2s ease-out, bottomIn 1.2s ease-out;
}

.cod1 {
	animation: fadeIn 1.2s ease-out, topIn 1.2s ease-out;
}

.clickme {
	opacity: 0;
	animation: fadeIn 0.8s ease-out 0s 1 forwards, shake 2s infinite;
	animation-delay: 1s, 1s;
}

.cod2 {
	animation: fadeIn 0.8s ease-out, topInTurnLeft 0.8s ease-out; 
}

.cod3 {
	animation: fadeIn 1.6s ease-out, topInTurnRight 1.6s ease-out;
}




/* Categories Hero--------------------------------------------------------------------------- */

.cataloguetitle {
	animation: fadeIn 0.8s ease-out, leftIn 0.8s ease-out;
}



/* Sections Animation------------------------------------------------------------------------ */

#hidden-box {
  	opacity: 0;
  	transform: translateY(40px);
  	transition: opacity 1s ease, transform 1s ease;
	transition-delay: 0.1s;
}

#hidden-box.visible {
  	opacity: 1;
  	transform: translateY(0);
	z-index: 0;
	transition-delay: 0.2s;
}