@keyframes stylus {
	0% {
		opacity : 0;
		top     : 0;
		left    : 50%;
		rotate: 30deg;
	}
	10% {
		opacity : 0;
		top     : 0;
		left    : 50%;
		rotate: 30deg;
	}
	15% {
		opacity : 100%;
		top     : 0;
		left    : 50%;
		rotate: 30deg;
	}
	25% {
		opacity : 100%;
		top     : 60%;
		left    : 50%;
		rotate: -30deg;
	}
	29% {
		opacity : 100%;
		top     : 25%;
		left    : 30%;
		rotate: -15deg;
	}
	34% {
		opacity : 100%;
		top     : 23%;
		left    : 70%;
		rotate: 20deg;
	}
	38% {
		opacity : 100%;
		top     : 75%;
		left    : 32%;
		rotate: -15deg;
	}
	42% {
		opacity : 100%;
		top     : 67%;
		left    : 76%;
		rotate: 20deg;
	}
	46% {
		opacity : 100%;
		top     : 42%;
		left    : 46%;
		rotate: -20deg;
	}
	60% {
		opacity : 100%;
		top     : 0;
		left    : 110%;
		rotate: 30deg;
	}
	65% {
		opacity : 0;
		top     : 0;
		left    : 110%;
	}
	100% {
		opacity : 0;
		top     : 0;
		left    : 110%;
	}
}

@keyframes beforeImageMask {
	0% {
		opacity : 0;
	}
	45% {
		opacity : 0;
	}
	45.1% {
		z-index   : 4;
		opacity   : 90%;
		clip-path : circle(0%);
	}
	55% {
		z-index   : 4;
		opacity   : 90%;
		clip-path : circle(75%);
	}
	60% {
		opacity : 0;
	}
	100% {
		opacity : 0;
	}
}


#indexAnimationStylus {
	/*opacity                   : 0;*/
	z-index                   : 4;
	position                  : absolute;
	/*margin-left               : 2%;*/
	margin-top                : -20%;
	width: 20%;

	animation-name            : stylus;
	animation-duration        : 6s;
	animation-fill-mode       : forwards;
	animation-iteration-count : infinite;
	animation-timing-function : ease-in-out;
}

.tabletScreen {
	/*box-sizing: border-box;*/
	z-index    : 1;
	display    : block;
	position   : relative;
	margin-top : 8%;

	width: 100%;
	aspect-ratio: 10/6;

	&.darkOnly{
		background-image: url("../../assets/images/Tablet illustration without bg White.svg");
		background-size: contain;
		background-repeat: no-repeat;
	}
	&.lightOnly{
		background-image: url("../../assets/images/Tablet illustration without bg.svg");
		background-size: contain;
		background-repeat: no-repeat;
	}
}

#tabletOverlay {
	opacity                   : 0;
	z-index                   : -100;
	position                  : absolute;

	animation-name            : beforeImageMask;
	animation-fill-mode       : forwards;
	animation-duration        : 6s;
	animation-iteration-count : infinite;
}


@keyframes afterImage1 {
	0% {
		opacity : 0;
	}
	12.5% {
		opacity : 0;
	}
	13% {
		opacity : 100%;
	}
	24% {
		opacity : 100%;
	}
	25% {
		opacity : 0;
	}
	100% {
		opacity : 0;
	}
}

@keyframes beforeImage1 {
	0% {
		opacity : 0;
	}
	1% {
		opacity : 100%;
	}
	13% {
		opacity : 100%;
	}
	13.1% {
		opacity : 0;
	}
	100% {
		opacity : 0;
	}
}

@keyframes afterImage2 {
	0% {
		opacity : 0;
	}
	37.5% {
		opacity : 0;
	}
	38% {
		opacity : 100%;
	}
	49% {
		opacity : 100%;
	}
	50% {
		opacity : 0;
	}
	100% {
		opacity : 0;
	}
}

@keyframes beforeImage2 {
	0% {
		opacity : 0;
	}
	25% {
		opacity : 0;
	}
	26% {
		opacity : 100%;
	}
	38% {
		opacity : 100%;
	}
	38.1% {
		opacity : 0;
	}
	100% {
		opacity : 0;
	}
}

@keyframes afterImage3 {
	0% {
		opacity : 0;
	}
	62.5% {
		opacity : 0;
	}
	63% {
		opacity : 100%;
	}
	74% {
		opacity : 100%;
	}
	75% {
		opacity : 0;
	}
	100% {
		opacity : 0;
	}
}

@keyframes beforeImage3 {
	0% {
		opacity : 0;
	}
	50% {
		opacity : 0;
	}
	51% {
		opacity : 100%;
	}
	63% {
		opacity : 100%;
	}
	63.1% {
		opacity : 0;
	}
	100% {
		opacity : 0;
	}
}

@keyframes afterImage4 {
	0% {
		opacity : 0;
	}
	87.5% {
		opacity : 0;
	}
	88% {
		opacity : 100%;
	}
	99% {
		opacity : 100%;
	}
	100% {
		opacity : 0;
	}
}

@keyframes beforeImage4 {
	0% {
		opacity : 0;
	}
	75% {
		opacity : 0;
	}
	76% {
		opacity : 100%;
	}
	88% {
		opacity : 100%;
	}
	88.1% {
		opacity : 0;
	}
	100% {
		opacity : 0;
	}
}


#tabletPic1a {
	opacity                   : 0;
	z-index                   : 2;
	position                  : absolute;

	animation-name            : afterImage1;
	animation-fill-mode       : forwards;
	animation-duration        : 24s;
	animation-iteration-count : infinite;
}

#tabletPic1b {
	opacity                   : 0;
	z-index                   : 3;
	position                  : absolute;

	animation-name            : beforeImage1;
	animation-fill-mode       : forwards;
	animation-duration        : 24s;
	animation-iteration-count : infinite;
}


#tabletPic2a {
	opacity                   : 0;
	z-index                   : 2;
	position                  : absolute;


	animation-name            : afterImage2;
	animation-fill-mode       : forwards;
	animation-duration        : 24s;
	animation-iteration-count : infinite;
}

#tabletPic2b {
	opacity                   : 0;
	z-index                   : 3;
	position                  : absolute;


	animation-name            : beforeImage2;
	animation-fill-mode       : forwards;
	animation-duration        : 24s;
	animation-iteration-count : infinite;
}

#tabletPic3a {
	z-index                   : 2;
	position                  : absolute;


	animation-name            : afterImage3;
	animation-fill-mode       : forwards;
	animation-duration        : 24s;
	animation-iteration-count : infinite;
}

#tabletPic3b {
	z-index                   : 3;
	position                  : absolute;


	animation-name            : beforeImage3;
	animation-fill-mode       : forwards;
	animation-duration        : 24s;
	animation-iteration-count : infinite;
}

#tabletPic4a {
	z-index                   : 2;
	position                  : absolute;


	animation-name            : afterImage4;
	animation-fill-mode       : forwards;
	animation-duration        : 24s;
	animation-iteration-count : infinite;
}

#tabletPic4b {
	z-index                   : 3;
	position                  : absolute;


	animation-name            : beforeImage4;
	animation-fill-mode       : forwards;
	animation-duration        : 24s;
	animation-iteration-count : infinite;
}