waves/public/assets/g/crossyroad/app-store-interstitial.css

#app-store-interstitial {
	overflow: hidden;
	position: absolute;
	font-family: EditUndoBrk;
	color: #fff;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#app-store-interstital img {
	image-rendering: pixelated;
}

#app-store-interstitial img.smooth {
	image-rendering: initial;
}

#app-store-interstitial .container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (orientation: portrait) {
	.landscape-only {
		display: none;
	}
}

@media (orientation: landscape) {
	.portrait-only {
		display: none;
	}
}

/* Screen 1 */

#screen-1 #side-characters {
	height: 100%;
	position: absolute;
	right: -5%;
	top: 0;
}

#screen-1 .center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 90%;
	margin: 7% 0;
}

#screen-1 .bottom {
	width: 100%;
	text-align: center;
}

#screen-1 .bottom img {
	width: 30%;
	max-width: 600px;
}

#screen-1 .usp-list {
	width: 40%;
    font-size: 1em;
	margin: 0;
	list-style: none;
	padding: 0 0 0 4%;
}

#screen-1 .usp-list li {
	margin: 5% 0;
}

#screen-1 .usp-list li img {
	display: inline-block;
	margin-right: 5%;
	width: 7%;
}

#screen-1 .usp-list .text {
	display: inline-block;
	width: 88%;
	vertical-align: middle;
}

#screen-1 h2 {
	font-size: 1.75em;
	text-align: center;
	line-height: 1.2em;
}

#screen-1 .crossy-road-app-icon {
	width: 24%;
}

#screen-1 .pixel-arrow {
	width: 5%;
	margin: 0 4%;
}

#screen-1 .pixel-device {
	width: 10%;
}

@media (orientation: portrait) {
	#screen-1 .bottom img {
		width: 70%;
	}

	#side-characters {
		display: none;
	}

	#screen-1 h2 {
		font-size: 2.5em;
		margin-bottom: 0;
	}

	#screen-1 .usp-list {
		width: 70%;
		font-size: 1.75em;
		margin: 2% 0;
		padding: 0;
	}

	#screen-1 .center {
		margin: 4% 0;
	}
}

/* Screen 2 */

#screen-2 h2 {
	font-size: 1.5em;
    line-height: 1.3em;
	text-align: center;
	margin: 0 6%;
}

#screen-2.container {
	justify-content: center;
}

#screen-2 .top {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 90%;
}

#screen-2 .pixel-phone {
	width: 7%;
}

#screen-2 .pixel-tablet {
	width: 13%;
}

#screen-2 .bottom {
	position: relative;
	text-align: center;
	width: 80%;
	margin-top: 8%;
}

#screen-2 .search-bar {
	width: 100%;
}

#screen-2 #poki-text {
	position: absolute;
    left: 7%;
    color: #36B5E8;
    top: 50%;
    font-size: 2em;
    margin-top: -0.65em;
}

#screen-2 .hand {
	position: absolute;
    transform: rotate(-5deg);
    bottom: -25%;
    right: -3%;
    width: 30%;
}

#screen-2 #type-cursor {
	color: #FFD522;
	margin-left: 2%;
	animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
	to {
		visibility: hidden;
	}
}

/* Screen 3 */

#screen-3 .phone {
	width: 80%;
	transform: rotate(-5deg);
}

#screen-3 .hand {
	position: absolute;
    transform: rotate(-12deg);
    bottom: -25%;
    right: 10%;
    width: 40%;
}

/* Screen 4 */

#screen-4 .top {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

#screen-4 .top .left {
	width: 20%;
	margin-right: 5%;
}

#screen-4 .top .right {
	width: 20%;
}

#screen-4 .crossy-road-app-icon,
#screen-4 .crossy-road-logo,
#screen-4 .hipster-whale-logo {
	width: 100%;
}

#screen-4 .crossy-road-logo {
	margin-bottom: 5%;
}

#screen-4 .center {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 7% 0;
}

#screen-4 .center img {
	display: inline-block;
	width: 60%;
}

#screen-4 .center .pixel-arrow {
	margin: 0 3%;
	width: 3%;
}

#screen-4 .center .pixel-device {
	width: 6%;
}

#screen-4 .bottom {
	width: 100%;
	text-align: center;
}

#screen-4 .bottom img {
	width: 20%;
}