@keyframes anim-intro {
	0% {
		transform: scale(1.0);
	}
	5% {
		transform: scale(.66);
	}
	10% {
		transform: scale(1.0);
	}
}

/* Hover signet */
@keyframes anim-scale {
	0% {
		transform: scale(1.0);
	}
	50% {
		transform: scale(.66);
	}
	100% {
		transform: scale(1.0);
	}
}

/* move signet to upper right */
@keyframes anim-home {
	0% {
		left: 49%;
		bottom: 45%;
	}
	100% {
		transform: scale(.6);
		top: 10px;
		bottom: inherit;
		left: calc(100% - 80px);
	}
}
/* reverse signet to origin */
@keyframes anim-home-back {
	0% {
		transform: scale(.6);
		top: 10px;
		bottom: inherit;
		left: calc(100% - 80px);
	}
	100% {
		transform: scale(1.0);
		left: 49%;
		bottom: 45%;
	}
}

/* Move Headings */
@keyframes anim-h1 {
	0% {
		left: 48%;
		left: calc(49% - 3em);
	}
	100% {
		left: 30px;
		bottom: 59.5%;
	}
}

@keyframes anim-h1-back {
	0% {
		left: 30px;
		bottom: 59.5%;
	}
	100% {
		left: 48%;
		left: calc(49% - 3em);
		bottom: 66%;
	}
}

@keyframes anim-h2 {
	0% {
		left: 49%;
		left: calc(49% - 2.8em);
	}
	100% {
		left: 30px;
		bottom: 55.5%;
		color: #D4D3D2
	}
}

@keyframes anim-h2-back {
	0% {
		left: 30px;
		bottom: 55.5%;
		color: #D4D3D2
	}
	100% {
		left: 49%;
		left: calc(49% - 2.8em);
		bottom: 63.5%;
	}
}

@keyframes anim-h2-back {
	0% {
		left: 30px;
		bottom: 55.5%;
		color: #D4D3D2
	}
	100% {
		left: 49%;
		left: calc(49% - 2.8em);
		bottom: 63.5%;
	}
}

/* device: smartphone - portrait */
@media only screen and (max-width: 667px) and (orientation: portrait) {
@keyframes anim-h1 {
	0% {
		left: 48%;
		left: calc(49% - 3em);
	}
	100% {
		left: 30px;
		bottom: calc(100% - 3em);
		font-size: .7em;
	}
}

@keyframes anim-h1-back {
	0% {
		left: 30px;
		bottom: calc(100% - 3em);
		font-size: .7em;
	}
	100% {
		left: 48%;
		left: calc(49% - 3em);
		bottom: 66%;
		font-size: 1em;
	}
}

@keyframes anim-h2 {
	0% {
		left: 49%;
		left: calc(49% - 2.8em);
	}
	100% {
		left: 30px;
		bottom: calc(100% - 5em);
		font-size: .7em;
	}
}

@keyframes anim-h2-back {
	0% {
		left: 30px;
		bottom: calc(100% - 5em);
		font-size: .7em;
	}
	100% {
		left: 48%;
		left: calc(49% - 2.8em);
		bottom: 62.5%;
		font-size: 1em;
	}
}
/* move signet to upper right */
@keyframes anim-home {
	0% {
		left: 49%;
		bottom: 38%;
	}
	100% {
		transform: scale(.4);
		top: -10px;
		bottom: inherit;
		left: calc(100% - 55px);
	}
}
/* reverse signet to origin */
@keyframes anim-home-back {
	0% {
		transform: scale(.4);
		top: 0px;
		bottom: inherit;
		left: calc(100% - 55px);
	}
	100% {
		transform: scale(1.0);
		left: 49%;
		bottom: 38%;
	}
}

/* device: smartphone - landscape */
@media only screen and (max-width: 667px) and (orientation: landscape) {
@keyframes anim-h1 {
	0% {
		left: 48%;
		left: calc(49% - 3em);
	}
	100% {
		left: 30px;
		bottom: calc(100% - 3em);
		font-size: .7em;
	}
}

@keyframes anim-h1-back {
	0% {
		left: 30px;
		bottom: calc(100% - 4em);
		font-size: .7em;
	}
	100% {
		left: 48%;
		left: calc(49% - 3em);
		bottom: 60%;
		font-size: 1em;
	}
}

@keyframes anim-h2 {
	0% {
		left: 49%;
		left: calc(49% - 2.8em);
	}
	100% {
		left: 30px;
		bottom: calc(100% - 5em);
		font-size: .7em;
	}
}
@-webkit-keyframes anim-h2-back {

@keyframes anim-h2-back {
	0% {
		left: 30px;
		bottom: calc(100% - 5em);
		font-size: .7em;
	}
	100% {
		left: 48%;
		left: calc(49% - 2.8em);
		bottom: 52.5%;
		font-size: 1em;
	}
}

/* move signet to upper right */
@keyframes anim-home {
	0% {
		left: 49%;
		bottom: 10%;
	}
	100% {
		transform: scale(.6);
		bottom: calc(100% - 11.5em);
		left: 94%;
		left: calc(100% - 6em);
	}
}
/* reverse signet to origin */
@keyframes anim-home-back {
	0% {
		transform: scale(.6);
		bottom: calc(100% - 11.5em);
		left: 94%;
		left: calc(100% - 6em);
	}
	100% {
		transform: scale(1.0);
		left: 49%;
		bottom: 10%;
	}
}

}


/* device: tablet - landscape */
@media screen and (min-width: 668px) and (max-width : 1024px) and (orientation : landscape) {
/* move signet to upper right */
@keyframes anim-home {
	0% {
		left: 49%;
		bottom: 38%;
	}
	100% {
		transform: scale(.6);
		bottom: calc(100% - 11.5em);
		left: 94%;
		left: calc(100% - 6em);
	}
}
/* reverse signet to origin */
@keyframes anim-home-back {
	0% {
		transform: scale(.6);
		bottom: calc(100% - 11.5em);
		left: 94%;
		left: calc(100% - 6em);
	}
	100% {
		transform: scale(1.0);
		left: 49%;
		bottom: 38%;
	}
}

@keyframes anim-h2-back {
	0% {
		left: 30px;
		bottom: 55.5%;
		color: #D4D3D2
	}
	100% {
		left: 49%;
		left: calc(49% - 2.8em);
		bottom: 62.5%;
	}
}

}