@font-face {
	font-family: "Museo Sans";
	font-weight: 500;
	font-style: normal;
	src: url(/assets/fonts/museo-sans-500.woff2) format("woff2"),
		 url(/assets/fonts/museo-sans-500.woff) format("woff");
}

@font-face {
	font-family: "Museo Sans";
	font-weight: 700;
	font-style: normal;
	src: url(/assets/fonts/museo-sans-700.woff2) format("woff2"),
		 url(/assets/fonts/museo-sans-700.woff) format("woff");
}

@font-face {
	font-family: "Museo Sans Cryl";
	font-weight: 500;
	font-style: normal;
	src: url(/assets/fonts/museo-sans-cyrl-500.woff2) format("woff2"),
		 url(/assets/fonts/museo-sans-cyrl-500.woff) format("woff");
}

@font-face {
	font-family: "Museo Sans Cryl";
	font-weight: 700;
	font-style: normal;
	src: url(/assets/fonts/museo-sans-cyrl-700.woff2) format("woff2"),
		 url(/assets/fonts/museo-sans-cyrl-700.woff) format("woff");
}

article,
aside,
footer,
header,
nav,
section {
	display: block;
}

audio,
canvas,
video {
	display: inline-block;
}

a, article, audio, body, div, fieldset, footer, form, h1, h2, h3, header, html, iframe, img, li, nav, object, p, section, span, ul, video {
	margin: 0;
	padding: 0;
	border: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	height: 100%;
}

body {
	margin: 0;
	font-family: "Museo Sans", sans-serif;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	color: #fff;
	background-color: #000;
	height: 100%;
	overflow: hidden;
}

input,
textarea {
	font-size: 100%;
	font-family: "Museo Sans", sans-serif;
	margin: 0;
	vertical-align: baseline;
	*vertical-align: middle;
}

html[lang="ru"],
html[lang="ru"] input,
html[lang="ru"] textarea {
	font-family: "Museo Sans Cryl", sans-serif;
}

textarea {
	overflow: auto;
	vertical-align: top;
	resize: vertical;
}

img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
}

button,
input {
	line-height: normal;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

button[disabled],
input[disabled] {
	cursor: default;
}

label {
	cursor: pointer;
}

h1,
h2,
h3 {
	font-size: 19px;
	font-weight: 700;
}

strong {
	font-weight: 700;
}

a {
	font-size: 100%;
	vertical-align: baseline;
	text-decoration: none;
	color: #fff;
	background-color: transparent;
}

a:hover,
a:active,
a:focus {
	outline: none;
}

a:active {
	color: #999;
	color: rgba(255, 255, 255, 0.5);
}

a:link {
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
}

ul {
	list-style: none;
}

.mobile noscript {
	display: none;
}

.mobile {
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
}

.hidden {
	display: none;
	visibility: hidden;
}

.hot-pink {
	background-color: #ff0090;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f09), to(#e07));
	background-image: -webkit-linear-gradient(#f09, #e07);
	background-image: -moz-linear-gradient(#f09, #e07);
	background-image: -ms-linear-gradient(#f09, #e07);
	background-image: linear-gradient(#f09, #e07);
}

.rotate-90 {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.rotate-180 {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.rotate-270 {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}

.arrow {
	width: 50px;
	height: 50px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-image: url(/assets/images/arrow.svg);
}

.button {
	position: relative;
	display: inline-block;
	height: 50px;
	max-width: 400px;
	cursor: pointer;
	color: #fff;
	/*background-color: #333;*/
	-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
	-webkit-transition: top 20ms ease-out, -webkit-box-shadow 20ms ease-out;
	-moz-transition: top 20ms ease-out, -moz-box-shadow 20ms ease-out;
	transition: top 20ms ease-out, box-shadow 20ms ease-out;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-ms-touch-action: none;
	touch-action: manipulation;
	touch-action: none;
}

.button .arrow {
	float: left;
}

.button:active {
	color: #fff;
	color: rgba(255, 255, 255, 0.85);
}

.button:active .arrow {
	opacity: 0.85;
}

.button-inactive:active .arrow {
	opacity: 1;
}

.button p {
	height: 50px;
	font-size: 19px;
	line-height: 51px;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	margin-left: 50px;
	padding-left: 14px;
	padding-right: 18px;
	border-left: 2px solid rgba(0, 0, 0, 0.1);
	pointer-events: none;
}

.button:active,
.button-active {
	top: 2px;
	-webkit-box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3);
}

.button-inactive,
.button-inactive:active {
	color: #fff;
	top: 0;
	cursor: auto;
	pointer-events: none;
}

.button:active:before {
	position: absolute;
	display: block;
	content: "\00a0";
	top: -3px;
	width: 100%;
	height: 3px;
}

.warning {
	color: #333;
	background-color: #fff;
	padding: 20px;
	border: 2px dashed red;
}

.warning a {
	color: #c00;
	text-decoration: underline;
}

#content {
	position: absolute;
	left: 0;
	top: 50px;
	right: 0;
	bottom: 0;
	overflow: hidden;
	font-size: 17px;
	line-height: 24px;
}

header {
	position: absolute;
	height: 50px;
	width: 100%;
	left: 0;
	background-color: rgba(0, 0, 0, 0.4);
	-webkit-transition: background-color 0.2s linear;
	-moz-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
	-webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.home header {
	background-color: #333;
}

#head-home {
	position: absolute;
	height: 50px;
}

#head-home span {
	position: absolute;
	display: block;
	width: 34px;
	height: 34px;
	left: 8px;
	top: 9px;
	background-image: url(/assets/images/icon-round-34.png);
	-webkit-background-size: 34px 34px;
	background-size: 34px 34px;
}

#head-home h1 {
	margin-left: 49px;
	line-height: 51px;
}

.mobile #head-home h1 {
	text-shadow: 0 0 1px #fff, 0 0 3px #000;
}

#head-home sup {
	font-size: 10px;
	font-weight: 500;
	color: #999;
	color: rgba(255, 255, 255, 0.4);
	line-height: 100%;
	margin-left: 2px;
}

#head-links {
	position: absolute;
	width: 728px;
	height: 50px;
	right: 48px;
	top: 0;
	margin-left: -364px;
	padding: 0;
	font-size: 16px;
	line-height: 16px;
	color: #ddd;
	text-align: center;
	overflow: hidden;
}

#head-links a {
	color: #ddd;
}

#head-links a:hover {
	color: #fff;
	text-decoration: underline;
}

#head-links > div {
	width: 728px;
	height: 50px;
}

#mobile-ad {
	position: absolute;
	width: 100%;
	height: 50px;
	bottom: 0;
	bottom: env(safe-area-inset-bottom);
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	line-height: 51px;
	font-size: 18px;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

#mobile-ad > div,
#mobile-ad .adsbygoogle {
	width: 100%;
	height: 50px !important;
}

@media (min-width: 1121px) {
	#head-links {
		left: 50%;
		right: auto;
	}
}

@media (max-width: 970px) {
	#head-links {
		display: none !important;
		visibility: hidden;
	}
}

@media (max-width: 480px) {
	#content {
		bottom: 50px;
		bottom: calc(50px + env(safe-area-inset-bottom));
	}

	.app #content {
		bottom: 0;
	}
}

@media (max-width: 480px), (max-height: 560px) {
	header,
	#head-links {
		display: none !important;
		visibility: hidden;
	}

	#content {
		top: 0 !important;
	}
}

@media (max-height: 380px) {
	#content {
		bottom: 0;
	}

	#mobile-ad {
		display: none !important;
		visibility: hidden;
	}
}

@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
	#head-home span {
		background-image: url(/assets/images/icon-round-68.png);
	}
}
#home {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #333;
	background-color: #f4f5f7;
}

#home h1 span,
#home-main .large {
	display: none;
}

#home h1 {
	background-image: url(/assets/images/title-mobile.png);
	-webkit-background-size: 240px 160px;
	-moz-background-size: 240px 160px;
	background-size: 240px 160px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	height: 160px;
}

#home-bg {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

#home-body {
	position: absolute;
	width: 480px;
	left: 50%;
	top: 50%;
	margin-left: -240px;
	margin-top: -280px;
}

#home.lower #home-body {
	margin-top: -215px;
}

.mobile #home-body {
	margin-top: -180px;
}

#home-body > p {
	width: 480px;
}

#home-no-js {
	position: absolute;
	left: 50%;
	width: 460px;
	margin-left: -252px;
	margin-top: -50px;
}

#button-init {
	margin-top: 15px;
}

#home.lower #button-init {
	display: none;
}

#home footer {
	position: absolute;
	left: 0;
	bottom: 12px;
	width: 100%;
	font-size: 13px;
	line-height: 23px;
}

#home footer li {
	display: inline;
	padding: 0 4px 0 8px;
	white-space: nowrap;
}

#home footer li a {
	color: #999;
	padding: 5px 8px;
}

#home footer li a:hover,
#home footer li a:active {
	color: #333;
}

#home-photos a {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 300px;
	height: 225px;
	border: 8px solid #fff;
	background-color: #fff;
	-webkit-background-size: 101% 101%;
	-moz-background-size: 101% 101%;
	background-size: 101% 101%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	-webkit-user-drag: none;
	user-drag: none;
}

.mobile #home-photos a {
	pointer-events: none;
}

#home-photos div {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	padding: 2px;
	margin: -2px 0 0 -2px;
}

.photo-fade {
	-webkit-transition: opacity 200ms linear;
	-moz-transition: opacity 200ms linear;
	transition: opacity 200ms linear;
}

#photo1 {
	margin-left: -565px;
}

#photo2 {
	margin-left: 248px;
}

#photo3 {
	margin-left: -625px;
}

#photo4 {
	margin-left: 308px;
}

#photo1,
#photo2 {
	margin-top: -265px;
}

#photo3,
#photo4 {
	margin-top: -25px;
}

#photo1,
#photo4 {
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

#photo2,
#photo3 {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
}

#altbrowser {
	padding: 20px;
	text-align: center;
}

#altbrowser h1 {
	font-size: 48px;
	padding: 20px 10px;
}

#altbrowser p {
	padding: 10px;
}

#altbrowser a {
	text-decoration: underline;
}

/* Fix for flickering/jumping on iPad & Mac during photo CSS transitions */
#home-body,
#home-photos div,
#home-photos div {
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}

header .cws {
	position: absolute;
	right: 50px;
	top: 12px;
	font-size: 12px;
	height: 14px;
	line-height: 14px;
	padding: 4px 6px;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.6);
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 14px;
	-webkit-transition: background-color 50ms linear, color 50ms linear;
	-moz-transition: background-color 50ms linear, color 50ms linear;
	transition: background-color 50ms linear, color 50ms linear;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

header .cws .plus {
	margin: 0 2px;
}

header .cws:hover {
	opacity: 1;
	color: #000;
	background-color: #fff;
}

header .cws:active {
	opacity: 0.8;
}

#home-ad {
	position: absolute;
	left: 50%;
	top: 50%;
	bottom: 48px;
	width: 680px;
	height: 280px;
	margin-left: -340px;
	margin-top: 25px;
	/* background-color: red; */
}

@media (max-width: 480px) {
	#home-body > p {
		font-size: 16px;
		line-height: 23px;
	}

	#home footer,
	#home-ad {
		display: none;
	}
}

@media (max-width: 740px), (max-height: 670px) {
	#home footer {
		display: none;
	}
}

@media (-webkit-min-device-pixel-ratio: 1.3), (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx), (min-resolution: 1.3dppx) {
	#home h1 {
		background-image: url(/assets/images/title-mobile-2x.png);
	}
}

@media (min-width: 1201px), (max-height: 560px) {
	#photo1 {
		margin-left: -615px;
	}

	#photo2 {
		margin-left: 298px;
	}

	#photo3 {
		margin-left: -675px;
	}

	#photo4 {
		margin-left: 358px;
	}
}

@media (max-width: 970px), (max-height: 560px) {
	#home-photos a {
		width: 260px;
		height: 195px;
	}

	#photo1 {
		margin-left: -430px;
	}

	#photo2 {
		margin-left: 153px;
	}

	#photo3 {
		margin-left: -465px;
		display: none;
	}

	#photo4 {
		margin-left: 188px;
		display: none;
	}

	#photo1,
	#photo2 {
		margin-top: -240px;
	}

	#photo3,
	#photo4 {
		margin-top: -35px;
	}

	#home-body {
		width: 300px;
		margin-left: -150px;
		margin-top: -270px;
	}

	#home-body > p {
		width: 300px;
		margin: 0 auto;
		font-size: 16px;
		line-height: 23px;
	}

	#home h1 {
		background-image: url(/assets/images/title-mobile.png);
		-webkit-background-size: 240px 160px;
		-moz-background-size: 240px 160px;
		background-size: 240px 160px;
		height: 160px;
	}
}

@media (max-width: 480px) {
	.mobile #home-body,
	#home.lower #home-body,
	#home-body {
		margin-top: -130px;
	}

	#home.lower #button-init {
		display: inline-block;
	}

	#home h1 {
		background-image: url(/assets/images/title-mobile.png);
		-webkit-background-size: 180px 120px;
		-moz-background-size: 180px 120px;
		background-size: 180px 120px;
		height: 120px;
	}

	#home-photos a {
		width: 160px;
		height: 120px;
		border: 5px solid #fff;
		-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		-moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	#photo1,
	#photo3 {
		margin-left: -165px;
	}

	#photo2,
	#photo4 {
		margin-left: 5px;
	}

	#photo1 {
		margin-top: -280px;
	}

	#photo2 {
		margin-top: -285px;
	}

	#photo3 {
		margin-top: 130px;
		display: block;
	}

	#photo4 {
		margin-top: 125px;
		display: block;
	}
}

@media (max-height: 560px) {
	#home-ad {
		margin-top: -5px;
	}
}
#app {
	position: absolute;
	width: 100%;
	height: 100%;
}

.home #app {
	display: none;
}

#toy {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 400ms linear;
	-moz-transition: opacity 400ms linear;
	transition: opacity 400ms linear;
	text-align: center;
}

#toy-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #333;
	background-image: -webkit-radial-gradient(center, cover, #333 33%, #000 150%);
	background-image: -moz-radial-gradient(center, cover, #333 33%, #000 150%);
	background-image: radial-gradient(farthest-corner at center, #333 33%, #000 150%);
}

#toy-intro {
	width: 100%;
	height: 100%;
}

#toy-intro-prompt {
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -150px;
	font-size: 19px;
	line-height: 30px;
}

#toy-intro .prompt.incapable {
	font-size: 17px;
	font-weight: 500;
	line-height: 24px;
	max-width: 500px;
	margin: 50px auto 0 auto;
	padding: 25px;
	text-shadow: none;
}

#toy-intro .prompt,
#toy-intro footer p {
	display: none;
}

#footer-message {
	color: #aaa;
	color: rgba(255, 255, 255, 0.6);
}

/* #footer-message .cookies {
	display: block;
	color: #fff;
	max-width: 830px;
	margin: 20px auto 0 auto;
	padding: 0 15px;
}

#footer-message .cookies a {
	color: #ff0090;
	font-weight: bold;
} */

#footer-denied,
#footer-unavailable {
	color: #fff;
	margin-bottom: 10px;
}

#app-no-js a,
#toy-intro footer a,
#toy-intro .prompt.incapable a {
	text-decoration: underline;
	white-space: nowrap;
}

#toy-start {
	position: absolute;
	top: 50%;
	margin-top: -110px;
	width: 100%;
}

#toy-start .button {
	margin-top: 30px;
}

#button-start .icon {
	float: left;
	width: 30px;
	height: 20px;
	margin: 15px;
	background-image: url(/assets/images/video.svg);
}

#button-start p {
	margin-left: 59px;
}

#button-reload {
	text-decoration: none;
}

@-webkit-keyframes stripe-anim {
	from {
		-webkit-transform: translate(-32px, 0);
		transform: translate(-32px, 0);
	}
	to {
		-webkit-transform: none;
		transform: none;
	}
}

@-moz-keyframes stripe-anim {
	from {
		-moz-transform: translate(-32px, 0);
		transform: translate(-32px, 0);
	}
	to {
		-moz-transform: none;
		transform: none;
	}
}

#infobar-stripe {
	display: none;
	position: absolute;
	width: 100%;
	height: 14px;
	overflow: hidden;
}

#infobar-stripe div {
	position: absolute;
	left: 0;
	right: -32px;
	height: 14px;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYAAAB3AH1ZAAAAQ0lEQVR42uXNoQ0AIBTEUPZf4o96nKsiCEQFTZ7uupXkqE3lwfw9T+LOy52XNIc0hzSHNYc0hzSHNIc0hzSHNIc0xwb6PzfnUz+PRwAAAABJRU5ErkJggg==");
	-webkit-animation: stripe-anim 0.5s infinite linear;
	-moz-animation: stripe-anim 0.5s infinite linear;
}

#toy-intro .prompt {
	padding: 0 15px;
	font-weight: 700;
}

#toy-intro .prompt.access,
#toy-intro .prompt.access-above {
	font-size: 21px;
	white-space: nowrap;
}

@-webkit-keyframes infobar-arrow-anim {
	from {
		-webkit-transform: translate(0, 2px) rotate(270deg);
		transform: translate(0, 2px) rotate(270deg);
	}
	to {
		-webkit-transform: translate(0, 2px) rotate(270deg);
		transform: translate(0, 2px) rotate(270deg);
	}
}

@-moz-keyframes infobar-arrow-anim {
	from {
		-moz-transform: translate(0, 2px) rotate(270deg);
		transform: translate(0, 2px) rotate(270deg);
	}
	to {
		-moz-transform: translate(0, 2px) rotate(270deg);
		transform: translate(0, 2px) rotate(270deg);
	}
}

@keyframes infobar-arrow-anim {
	from {
		transform: translate(0, 2px) rotate(270deg);
	}
	to {
		transform: translate(0, -5px) rotate(270deg);
	}
}

#toy-intro .prompt.access-above .arrow {
	display: inline-block;
	font-style: normal;
	width: 80px;
	height: 16px;
	-webkit-animation: infobar-arrow-anim 0.3s infinite alternate ease-in-out;
	-moz-animation: infobar-arrow-anim 0.3s infinite alternate ease-in-out;
	animation: infobar-arrow-anim 0.3s infinite alternate ease-in-out;
}

.mobile #toy-intro .prompt.access,
.mobile #toy-intro .prompt.access-above {
	margin-top: -15px;
}

#app-no-js {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 460px;
	margin-left: -252px;
	margin-top: -80px;
}

#toy-intro footer {
	display: block;
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: 50px;
}

#toy-intro footer p {
	font-size: 16px;
	line-height: 25px;
}

#toy-intro footer a {
	color: #ddd;
	color: rgba(255, 255, 255, 0.8);
}

#toy-intro .prompt,
#button-reload {
	display: none;
}

#toy-intro.bg-access {
	background-color: rgba(0, 0, 0, 0.4);
}

.icon {
	pointer-events: none;
}

#settings p,
#capture p {
	font-size: 15px;
	font-weight: lighter;
	white-space: nowrap;
}

#toy-main,
#toy-ui,
#toy-share-ui {
	display: none;
	opacity: 0;
}

#toy .fade-slow {
	-webkit-transition: opacity 400ms linear;
	-moz-transition: opacity 400ms linear;
	transition: opacity 400ms linear;
}

#toy .fade-fast {
	-webkit-transition: opacity 200ms linear;
	-moz-transition: opacity 200ms linear;
	transition: opacity 200ms linear;
}

#toy-main .button {
	position: absolute;
	margin-top: 0;
	-webkit-transition: top 20ms ease-out, -webkit-box-shadow 20ms ease-out;
	-moz-transition: top 20ms ease-out, -moz-box-shadow 20ms ease-out;
	transition: top 20ms ease-out, box-shadow 20ms ease-out;
}

#toy-view {
	position: absolute;
	left: 50%;
	top: 50%;
	overflow: hidden;
}

.mobile #toy-view {
	pointer-events: none;
}

.toy-shadow {
	-webkit-box-shadow: inset 0 0 2px #000, 0 0 128px 16px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0 0 2px #000, 0 0 128px 16px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 0 2px #000, 0 0 128px 16px rgba(0, 0, 0, 0.5);
}

.toy-shadow-fade {
	-webkit-transition: -webkit-box-shadow 120ms linear;
	-moz-transition: -moz-box-shadow 120ms linear;
	transition: box-shadow 120ms linear;
}

.toy-zoom-out {
	-webkit-transition: all 400ms cubic-bezier(0.6, 0, 0.5, 1);
	-moz-transition: all 400ms cubic-bezier(0.6, 0, 0.5, 1);
	transition: all 400ms cubic-bezier(0.6, 0, 0.5, 1);
}

.toy-zoom-in {
	-webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.5, 1);
	-moz-transition: all 300ms cubic-bezier(0.4, 0, 0.5, 1);
	transition: all 300ms cubic-bezier(0.4, 0, 0.5, 1);
}

#toy-grid {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

#grid-view {
	position: absolute;
	width: 100%;
	height: 100%;
}

#grid-view > div {
	display: table;
	margin: 2px auto 0 auto;
}

#grid-view > div > div {
	display: table-row;
}

#grid-view > div > div > div {
	display: table-cell;
	vertical-align: middle;
	padding: 8px;
}

.grid-shadow {
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	cursor: pointer;
}

#grid-view canvas {
	display: block;
}

#grid-view p {
	position: relative;
	font-size: 19px;
	line-height: 48px;
	font-weight: 700;
	height: 48px;
	margin-top: -48px;
	text-shadow: 0 0 1px #000, 0 0 8px #000;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

#toy-ui,
#grid-ui {
	position: absolute;
	left: 50%;
	bottom: 50px;
	margin-left: -200px;
	width: 350px;
	height: 50px;
}

#grid-ui {
	margin-left: -175px;
}

.wait {
	cursor: wait;
}

#grid-ui .button {
	width: 150px;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}

#button-up {
	left: 0;
}

#button-down {
	right: 0;
}

#button-up div,
#button-down div {
	position: relative;
	left: 50px;
	background-position: 15px center;
}

#button-effects {
	width: 210px;
	left: 70px;
}

#button-effects p {
	margin: 0;
	padding: 0;
	border-left: none;
	text-align: center;
	white-space: nowrap;
	-webkit-transition: visibility 120ms linear, opacity 120ms linear;
	-moz-transition: visibility 120ms linear, opacity 120ms linear;
	transition: visibility 120ms linear, opacity 120ms linear;
}

#button-effects .more {
	margin-bottom: -50px;
}

#button-effects:hover .more {
	-webkit-transition-delay: 80ms;
	-moz-transition-delay: 80ms;
	transition-delay: 80ms;
}

#button-effects .effect {
	-webkit-transition-delay: 40ms;
	-moz-transition-delay: 40ms;
	transition-delay: 40ms;
}

#button-effects:hover .effect,
#button-effects .more {
	visibility: hidden;
	opacity: 0;
}

.mobile #button-effects:hover .effect,
#button-effects .effect,
#button-effects:hover .more {
	visibility: visible;
	opacity: 1;
}

.mobile #button-effects .more,
#button-effects .effect span {
	display: none;
	visibility: hidden;
}

#button-effects .loading {
	display: none;
}

html[lang="de"] #button-effects .loading,
html[lang="pt-BR"] #button-effects .loading {
	font-size: 17px;
	margin-left: 0;
}

#button-effects .plus {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(/assets/images/plus.svg);
}

#button-previous {
	left: 10px;
}

#button-next {
	left: 290px;
}

#button-settings {
	left: -115px;
}

#button-settings .icon {
	width: 50px;
	height: 50px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-image: url(/assets/images/gear.svg);
}

.button.share p {
	text-align: center;
}

.button.twitter.share p,
.button.tumblr.share p {
	width: 77px;
}

.button.google.share p {
	width: 132px;
}

.button.vk.share p {
	width: 97px;
}

.button.twitter,
.button.tumblr,
.button.vk {
	display: none;
	visibility: hidden;
}

.button.twitter.share {
	margin-left: -279px;
}

.button.google.share {
	margin-left: -108px;
}

.button.tumblr.share {
	margin-left: 118px;
}

.button.vk.share {
	margin-left: -299px;
}

/* html[lang="ru"] .button.google.share {
	margin-left: -108px;
} */

/* html[lang="ru"] .button.twitter.share {
	margin-left: 118px;
} */

.button.share-center {
	margin-left: -170px;
	width: 280px;
}

.button.google.share-center .share-post {
	font-size: 16px;
}

html[lang="en"] .button.google.share-center .share-post,
html[lang="it"] .button.google.share-center .share-post,
html[lang="pt-BR"] .button.google.share-center .share-post,
html[lang="ru"] .button.google.share-center .share-post {
	font-size: 18px;
}

.button.share-center p {
	text-align: center;
}

.share-loading,
.share-post,
.share-posting,
.share-error,
#toy-share-ui footer,
a.button.twitter,
a.button.google,
a.button.tumblr,
a.button.vk {
	display: none;
}

#settings form {
	display: none;
	position: absolute;
	left: -115px;
	bottom: 70px;
	pointer-events: none;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

#settings form .anchor {
	position: absolute;
	width: 0;
	height: 10px;
	margin-left: 15px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid rgba(0, 0, 0, 0.625);
}

#settings fieldset {
	display: block;
	padding: 8px 8px 0 8px;
	border: none;
	background-color: rgba(0, 0, 0, 0.625);
	border-radius: 8px;
	pointer-events: auto;
	-webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

#settings fieldset > div {
	position: relative;
	max-width: 250px;
}

#settings fieldset input {
	display: block;
	opacity: 0;
	width: 20px;
	height: 20px;
}

#settings label {
	position: relative;
	display: block;
	height: 32px;
	top: -8px;
	font-size: 15px;
	line-height: 32px;
	text-align: left;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.settings-active,
#settings fieldset > div:active {
	opacity: 0.625;
}

#settings fieldset .checkbox {
	position: absolute;
	width: 32px;
	height: 32px;
	border-radius: 5px;
}

#settings fieldset input + label {
	margin: 0;
	margin-top: -12px;
	padding: 0 8px 0 40px;
	cursor: pointer;
	background-repeat: no-repeat;
}

#settings fieldset input:checked + label {
	background-repeat: no-repeat;
	background-position: 7px 7px;
	background-image: url(/assets/images/check.svg);
	text-transform: capitalize;
}

#button-capture {
	width: 100px;
	left: 415px;
}

#button-capture .icon {
	width: 100px;
	height: 48px;
	background-position: 50%;
	background-repeat: no-repeat;
	background-image: url(/assets/images/camera.svg);
}

#button-capture.quad .icon {
	background-image: url(/assets/images/camera4.svg);
}

.button:active .icon {
	opacity: 0.85;
}

.button-inactive:active .icon {
	opacity: 1;
}

#capture p {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: visibility 120ms linear, opacity 120ms linear;
	-moz-transition: visibility 120ms linear, opacity 120ms linear;
	transition: visibility 120ms linear, opacity 120ms linear;
	-webkit-transition-delay: 60ms;
	-moz-transition-delay: 60ms;
	transition-delay: 60ms;
	position: relative;
	left: 365px;
	line-height: 20px;
	margin-left: -1px;
	width: 200px;
	top: -30px;
	text-align: center;
	text-shadow: 0 0 1px #000, 0 0 8px #000;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

#capture:hover p {
	visibility: visible;
	opacity: 1;
}

#capture-quad-text {
	display: none;
}

.mobile #capture p {
	display: none !important;
}

#toy-share-ui {
	position: absolute;
	left: 0;
	bottom: 50px;
	width: 100%;
	height: 50px;
}

#button-back {
	left: 50px;
	left: calc(50px + env(safe-area-inset-left));
}

.button.twitter {
	background-color: #1da1f2;
}

.button.google {
	color: #3c4043;
	background-color: #fff;
}

.button.tumblr {
	background-color: #4c5e76;
}

.button.vk {
	background-color: #5181b8;
}

.button.twitter .icon,
.button.google .icon,
.button.tumblr .icon,
.button.vk .icon {
	float: left;
	width: 32px;
	height: 32px;
	margin: 9px;
	border-radius: 4px;
	background-size: 32px 32px;
}

.button.twitter .icon {
	background-image: url(/assets/images/twitter.svg);
	background-color: #0088d7;
}

.button.google .icon {
	background-image: url(/assets/images/google-photos.svg);
}

.button.tumblr .icon {
	background-image: url(/assets/images/tumblr.svg);
	background-color: #36465d;
}

.button.vk .icon {
	background-image: url(/assets/images/vk.svg);
	background-color: #35679b;
}

.button.logout {
	display: none;
	left: 50%;
	margin-left: 120px;
}

.button.logout .power {
	opacity: 0.5;
	float: left;
	width: 22px;
	height: 24px;
	margin: 13px 14px;
	background-image: url(/assets/images/power.svg);
	-webkit-transition: opacity 120ms linear;
	-moz-transition: opacity 120ms linear;
	transition: opacity 120ms linear;
}

.button.google.logout .power {
	-webkit-filter: invert(100%);
	filter: invert(100%);
}

.button.logout.active:hover .power {
	opacity: 1;
}

#button-save {
	right: 50px;
	right: calc(50px + env(safe-area-inset-right));
}

#photo {
	display: none;
	position: absolute;
	left: 0;
	top: 50px;
	right: 350px;
	bottom: 190px;
	text-align: center;
}

.mobile #photo {
	right: 0;
}

#photo-ad {
	position: absolute;
	width: 300px;
	top: 75px;
	right: 25px;
	transform: translateY(-900px);
}

#photo-ad.show {
	transform: none;
}

#photo > img {
	display: inline-block;
	width: auto;
	height: 100%;
}

#photo > img {
	margin-bottom: 1200px;
}

.photo-bottom {
	bottom: 250px !important; /* Override #photo bottom */
}

.photo-tweet {
	-webkit-transition: bottom 250ms ease-out;
	-moz-transition: bottom 250ms ease-out;
	transition: bottom 250ms ease-out;
}

.photo-img-tweet {
	-webkit-transition: -webkit-transform 300ms ease-out;
	-moz-transition: -moz-transform 300ms ease-out;
	transition: transform 300ms ease-out;
}

.photo-drop {
	-webkit-transition: margin-top 500ms cubic-bezier(0.25, 0.5, 0.5, 1), -webkit-transform 500ms cubic-bezier(0.25, 0.5, 0.5, 1), -webkit-box-shadow 250ms ease-out;
	-moz-transition: margin-top 500ms cubic-bezier(0.25, 0.5, 0.5, 1), -moz-transform 500ms cubic-bezier(0.25, 0.5, 0.5, 1), -moz-box-shadow 250ms ease-out;
	transition: margin-top 500ms cubic-bezier(0.25, 0.5, 0.5, 1), transform 500ms cubic-bezier(0.25, 0.5, 0.5, 1), box-shadow 250ms ease-out;
}

.rotate-two {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

.photo-shadow {
	-webkit-box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.photo-white {
	background-color: #fff;
}

.photo-black {
	background-color: #000;
}

.photo-thin {
	padding: 4px;
}

.photo-thick {
	padding: 10px;
}

#photo form {
	display: none;
}

#photo fieldset {
	position: relative;
	left: 50%;
	margin: 45px 0 0 -280px;
	width: 460px;
	height: 50px;
	border: none;
}

#photo fieldset:before {
	position: absolute;
	content: "\00a0";
	margin: -10px 0 0 15px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #fff;
}

#photo input[type="text"] {
	width: 100%;
	height: 50px;
	padding: 0 60px 0 15px;
	border: none;
	font-size: 18px;
	line-height: 18px;
	color: #bbb;
	border-radius: 8px;
}

#photo input[type="text"]::-webkit-input-placeholder {
	color: #bbb;
}

#photo input[type="text"]:-moz-placeholder {
	color: #bbb;
}

#photo input:focus {
	color: #333;
	outline: none;
}

#photo p {
	position: relative;
	float: right;
	text-align: right;
	font-size: 19px;
	font-weight: 700;
	line-height: 51px;
	height: 50px;
	right: -58px;
	top: -50px;
}

#photo p.blur {
	color: #fff;
}

#photo p.long {
	color: #bbb;
}

#photo p.short {
	color: #c00;
}

#toy-countdown {
	visibility: hidden;
	position: absolute;
	width: 280px;
	height: 280px;
	line-height: 280px;
	left: 50%;
	top: 50%;
	margin-left: -140px;
	margin-top: -140px;
	text-align: center;
	font-size: 180px;
	font-weight: 700;
	text-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

#toy-countdown.quad {
	font-size: 150px;
}

#camera-flash {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
}

#toy-share-ui footer p,
#prompt-back,
#prompt-discard,
#prompt-save,
#prompt-twitter-logout,
#prompt-google-logout,
#prompt-tumblr-logout,
#prompt-vk-logout {
	display: none;
	position: absolute;
	width: 100%;
	bottom: -31px;
	font-size: 15px;
	line-height: 15px;
	color: #999;
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
}

#prompt-back,
#prompt-discard {
	text-align: left;
	left: 50px;
	left: calc(50px + env(safe-area-inset-left));
}

#prompt-save {
	text-align: right;
	right: 50px;
	right: calc(50px + env(safe-area-inset-right));
}

#prompt-login {
	position: absolute;
	width: 100%;
	bottom: 63px;
	text-align: center;
	font-size: 15px;
	font-weight: lighter;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

#prompt-login span {
	display: none;
}

#prompt-twitter-logout,
#prompt-google-logout,
#prompt-tumblr-logout,
#prompt-vk-logout {
	width: 400px;
	left: 50%;
	margin-left: -55px;
}

/* Disable social sharing on mobile */
.mobile .button.share,
.mobile #prompt-login,
.mobile #toy-share-ui footer {
	display: none;
	visibility: hidden;
}

@media (min-width: 951px) and (min-height: 761px) {
	#button-capture {
		left: 440px;
	}

	#capture p {
		left: 390px;
	}

	#button-settings,
	#settings form {
		left: -140px;
	}

	#toy-countdown {
		font-size: 230px;
	}

	#toy-countdown.quad {
		font-size: 175px;
	}
}

@media (max-width: 1070px) {
	html[lang="ru"] #button-back,
	html[lang="ru"] #prompt-back,
	html[lang="ru"] #prompt-discard {
		left: 25px;
		left: calc(25px + env(safe-area-inset-left));
	}

	html[lang="ru"] #button-save,
	html[lang="ru"] #prompt-save {
		right: 25px;
		right: calc(25px + env(safe-area-inset-right));
	}
}

@media (max-width: 1030px) {
	html[lang="ru"] .button.twitter {
		display: none;
		visibility: hidden;
	}

	.button.vk.share {
		margin-left: -226px;
	}

	/* html[lang="ru"] .button.google.share {
		margin-left: -35px;
	} */

	#button-back,
	#prompt-back,
	#prompt-discard {
		left: 25px;
		left: calc(25px + env(safe-area-inset-left));
	}

	#button-save,
	#prompt-save {
		right: 25px;
		right: calc(25px + env(safe-area-inset-right));
	}
}
/*
@media (max-width: 975px) {
	.button.tumblr {
		display: none;
		visibility: hidden;
	}

	.button.twitter.share {
		margin-left: -193px;
	}

	.button.google.share {
		margin-left: -22px;
	}
} */

@media (max-width: 785px) {
	#settings,
	.button.twitter,
	.button.google,
	.button.tumblr,
	.button.vk,
	#prompt-login,
	#toy-share-ui footer,
	#photo-ad {
		display: none;
		visibility: hidden;
	}

	#photo {
		right: 0;
	}

	#toy-ui {
		margin-left: -240px;
	}

	#button-capture {
		left: 370px;
	}

	#grid-view p {
		font-size: 17px;
		line-height: 36px;
		height: 36px;
		margin-top: -36px;
	}
}

@media (max-height: 760px) {
	#grid-view p {
		font-size: 17px;
		line-height: 36px;
		height: 36px;
		margin-top: -36px;
	}

	#grid-view > div > div > div {
		padding: 6px;
	}
}

@media (max-height: 620px) {
	#toy-ui,
	#toy-share-ui,
	#grid-ui {
		bottom: 20px;
	}

	#toy-share-ui footer,
	#toy-share-ui footer p,
	#prompt-back,
	#prompt-discard,
	#prompt-twitter-logout,
	#prompt-google-logout,
	#prompt-tumblr-logout,
	#prompt-vk-logout,
	#prompt-save {
		display: none;
		visibility: hidden;
	}

	#toy-countdown {
		font-size: 140px;
	}

	#toy-countdown.quad {
		font-size: 120px;
	}

	#photo {
		top: 25px;
		bottom: 150px;
	}

	.mobile #photo {
		bottom: 120px;
	}

	.photo-bottom {
		bottom: 225px !important; /* Override #photo bottom */
	}
}

@media (max-width: 480px) {
	#toy-start {
		margin-top: -90px;
	}

	#toy-ui {
		width: 300px;
		margin-left: -150px;
	}

	#button-previous {
		left: 0;
	}

	#button-effects {
		left: 55px;
		width: 50px;
		overflow: hidden;
	}

	#button-effects .more,
	#button-effects .loading .text {
		display: none !important;
		visibility: hidden;
	}

	#button-effects .loading {
		padding: 0;
	}

	#button-effects .loading .pc {
		font-size: 17px;
	}

	#button-effects:hover .effect {
		visibility: visible;
		opacity: 1;
	}

	#button-next {
		left: 110px;
	}

	#button-capture {
		left: 200px;
	}

	#capture p {
		display: none;
	}

	#toy-intro footer p {
		font-size: 14px;
		line-height: 22px;
		padding: 0 20px;
	}
}

@media (max-width: 480px), (max-height: 620px) {
	#grid-view p {
		font-size: 12px;
		line-height: 30px;
		height: 30px;
		margin-top: -30px;
		text-shadow: 0 0 3px #000, 0 1px 4px #000;
	}

	#grid-view > div > div > div {
		padding: 4px;
	}

	#grid-ui {
		width: 250px;
		margin-left: -125px;
	}

	#grid-ui .button {
		width: 120px;
	}

	#button-up div,
	#button-down div {
		left: 35px;
	}

	.photo-thin {
		padding: 3px;
	}

	.photo-thick {
		padding: 6px;
	}

	#button-back,
	#prompt-back,
	#prompt-discard {
		left: 20px;
		left: calc(20px + env(safe-area-inset-left));
	}

	#button-save,
	#prompt-save {
		right: 20px;
		right: calc(20px + env(safe-area-inset-right));
	}
}

@media (max-width: 400px) {
	html[lang="fr"] #button-back p,
	html[lang="ru"] #button-back p {
		display: none;
	}
}

@media (max-width: 360px) {
	#button-back p {
		display: none;
	}
}

@media (max-height: 560px) {
	#photo-ad {
		top: 25px;
	}
}

@media (max-height: 400px) {
	#photo-ad {
		display: none;
	}

	#photo {
		right: 0;
	}
}