body {
	padding-left: min(0, env(safe-area-inset-left));
	padding-right: min(0, env(safe-area-inset-right));
	padding-top: min(0, env(safe-area-inset-top));
	padding-bottom: min(0, env(safe-area-inset-bottom));
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	background-size: cover;
	font-family: "Myriad Pro", Myriad, "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #f0f0f1;
	overflow: hidden
}
.fullscreenPanel{
	position: sticky !important;
	height: 100vh !important;
	width: 100vw !important;
}
#errorBrowserBlock,
#loadingBlock,
#rotateBlock,
#vrBlock{
	padding: 0;
	z-index: 2;
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: url(../img/background.jpg);
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center
}
#rotateBlock{
	display: none;
}
#gameCanvas {
	position: absolute;
	width: 100%;
	height: 100%;
}

#fullscreenButton {
	height: 30px;
	width: 30px;
	position: absolute;
	z-index: 1;
	bottom: 5px;
	right: 5px;
	background-color: transparent;
	background-image: url(../img/fullScreen_on.png);
	background-size: 30px 30px;
	border: none;
	cursor: pointer
}
.enterVRButton{
	padding: 1rem;
	color: white;
	align-self: center;
	border-color: white;
	border: 0.2rem solid;
	position: absolute;
	z-index: 1;
	bottom: 5%;
	cursor: pointer
}

.progressBlock {
	display: flex;
	justify-content: space-between;
	width: 20%;
	align-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, .3);
	border-radius: 100vw;
	align-self: center;
	padding: 3vw;
	cursor: pointer;
}

.logo {
	width: auto;
	height: 18vh;
	display: none;
	margin: auto
}

#vrBlock {
	z-index: 2
}

#playVideoButton,
startVRButton {
	color: #fff;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
	justify-content: center
}
.vrMode{
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	border: 0px;
	margin: 0px;
	padding: 0px;
	box-sizing: content-box
}
.play-btn {
	display: inherit;
	width: 25%;
	height: auto;
	margin: 0 auto;
	margin-top: 10%
}

.play-btn__svg {
	transition: 1s;
	fill: #fff;
	opacity: .5
}

.play-btn:hover .play-btn__svg {
	fill: #d9d9d9;
	opacity: 1
}

#errorContent,
#warningBrowserBlock {
	width: 100%;
	position: absolute;
	bottom: 0;
	flex-direction: row;
	align-items: center;
	background-color: rgba(0, 0, 0, .5);
	justify-content: center;
	display: inline-flex
}

.warningBrowserText {
	color: #ebebeb;
	font-size: 1.5vw;
	font-weight: 300;
	padding-left: 2%;
	padding-right: 2%;
	margin: 2%;
	width: 65%;
	text-align: center
}

.warningBrowserWarning {
	width: 4%
}

.warningBrowserWarning img {
	width: 100%
}

.browserIcons {
	display: inline-flex
}

.browserIcons a {
	width: 5vw
}

.browserIcons a img {
	width: 5vw
}

#errorContent {
	font-size: 3vh;
	margin-top: 5vh
}

.donut {
	width: 100%
}

.donut__background,
.donut__value {
	fill: transparent;
	stroke-width: .18rem;
}

.donut__background {
	fill: rgba(0, 0, 0, .3)
}

.donut__value {
	stroke: #ff6900;
	stroke-linecap: round;
	stroke-dasharray: 93px;
	transform-origin: center;
	-webkit-transform: rotateZ(-90deg) rotateX(180deg);
	transform: rotateZ(-90deg) rotateX(180deg);
}

.donut__text {
	display: none;
	font-family: "Myriad Pro", Myriad, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: lighter;
	font-size: .4rem;
	text-anchor: middle;
	alignment-baseline: central;
	dominant-baseline: central;
	vertical-align: middle;
	fill: #fff
}

.donut__texterror {
	font-family: "Myriad Pro", Myriad, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1rem;
	text-anchor: middle;
	alignment-baseline: central;
	vertical-align: middle;
	fill: #fff
}

.donut__play {
	fill: transparent;
	stroke: #fff;
	stroke-width: .05rem;
	cursor: pointer
}

@media (max-aspect-ratio:16/9) {
	.keepRatio {
		display: flex;
		position: absolute;
		width: 100%;
		height: 56.25vw;
		max-height: 1080px;
		max-width: 1920px;
		top: 50%;
		transform: translateY(-50%);
		margin: auto
	}

	.logo {
		width: auto;
		height: 10vw
	}
}

@media (min-aspect-ratio:16/9) {
	.keepRatio {
		display: flex;
		position: absolute;
		width: 177vh;
		height: 100%;
		max-height: 1080px;
		max-width: 1920px;
		top: 50%;
		transform: translateY(-50%);
		margin: auto
	}
	.browserIcons a {
		width: 8vh
	}
	.browserIcons a img {
		width: 8vh
	}
	.warningBrowserText {
		font-size: 3vh
	}
}

.iconContainer {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -100px;
	margin-top: -100px;
}
.iconContainer p {
	display: inline-block;
	width: 100%;
	text-align: center;
	margin: 0;
	font-size: 20px;
	opacity: 0;
}

.phone {
	position: relative;
	left: 50%;
	margin-left: -50px;
	width: 0;
	height: 0;
	border: 0 solid #000;
	background: #a9a9a9;
	border-radius: 10px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}

.phone img {
	width: 70%;
}

#rotateBlock .phone {
	-webkit-animation: sizeIncrease 0.5s forwards ease, borderIncrease 0.5s 0.5s forwards ease, rotateLeft 0.7s 1s forwards ease;
	animation: sizeIncrease 0.5s forwards ease, borderIncrease 0.5s 0.5s forwards ease, rotateLeft 0.7s 1s forwards ease;
}


/* KEYFRAMES
------------------------------------------- */
/* Animate width + height */
@-webkit-keyframes sizeIncrease {
	0% {
		width: 0;
		height: 10px;
	}
	50% {
		width: 100px;
		height: 10px;
	}
	100% {
		width: 100px;
		height: 160px;
	}
}
@keyframes sizeIncrease {
	0% {
		width: 0;
		height: 10px;
	}
	50% {
		width: 100px;
		height: 10px;
	}
	100% {
		width: 100px;
		height: 160px;
	}
}
/* Add borders */
@-webkit-keyframes borderIncrease {
	100% {
		border-width: 20px 10px;
	}
}
@keyframes borderIncrease {
	100% {
		border-width: 20px 10px;
	}
}
/* fade-in  */
@-webkit-keyframes fadeIn {
	100% {
		color: #000;
		opacity: 1;
	}
}
@keyframes fadeIn {
	100% {
		color: #000;
		opacity: 1;
	}
}
/* Rotate device */
@-webkit-keyframes rotateLeft {
	100% {
		transform: rotate(-90deg);
	}
}
@keyframes rotateLeft {
	100% {
		transform: rotate(-90deg);
	}
}