html {
	font-family: nunitosans, helvetica, arial, sans-serif;
	font-size: 87.5%;
	line-height: 1.5
}
body {
	margin: 0
}
button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}
button, input {
	overflow: visible
}
button, select {
	text-transform: none
}
button, [type=button], [type=reset], [type=submit] {
-webkit-appearance:button;
-moz-appearance:button;
appearance:button
}


body {
	width: 100%;
	overflow: hidden
}
html {
	font-family: var(--font);
	color: #222
}
h1, h2, h3, h4, h5, h6, p {
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0
}
.l-Standard {
	width: 100%;
	height: 100%;
	max-width: 750px;
	min-width: 340px;
	margin: 0 auto;
	display: flex;
	position: relative;
	justify-content: center
}
@media only screen and (min-width: 720px) {
.l-Standard {
	max-height: 600px
}
}
.l-Standard-indicator {
	text-align: center;
	padding: 1.0714285714rem;
	z-index: 2
}
.l-Standard-header {
	text-align: center;
	padding: 1.0714285714rem 7%;
	position: relative;
	z-index: 2;
	pointer-events: none;
	color:#068016;
	font-size:20px;
	font-weight:bold;
	text-transform:uppercase;
}

.l-Standard-bodyContent {
	width: 100%;
	padding-bottom: 18px;
	position: relative;
	z-index: 1
}
.l-Standard-top, .l-Standard-bottom {
	box-sizing: border-box;
	width: 100%
}
.l-Standard-top {
	padding: 0 30px;
	align-self: flex-start
}
.l-Standard-top h2, .l-Standard-top h3 {
	max-width: 520px;
	margin: 0 auto
}
.l-Standard-bottom {
	padding: 20px 20px 28px;
	align-self: flex-end
}
.l-Standard-cta {
	box-sizing: border-box;
	width: 100%;
	position: relative;
	z-index: 1
}
@media only screen and (max-height: 528px)and (hover: none) {
@supports(position: fixed) {
.l-Standard-cta {
right:0;
left:0
}
}
}
@media only screen and (min-height: 529px)and (hover: none) {
@supports(position: fixed) {
.l-Standard-cta {
right:0;
left:0
}
}
}
.l-Standard-frontal {
	width: auto;
	height: 100%
}
.l-Standard_content {
	z-index: 2
}
.l-Standard_centered-bodyContent {
	padding: 0;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center
}
.l-Standard_spacedColumn-bodyContent {
	padding-bottom: 4.2857142857rem;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-evenly
}
.l-Standard-errorSlide {
	margin-top: 3rem
}
.l-Standard-errorSlide-message {
	margin-top: 120px
}
#recorder {
	width: 100%;
	height: 346px;
	max-height: 445px;
	overflow: hidden;
	position: relative;
	z-index: -1;
	flex: 0 0 auto;
	background: rgba(6,128,22,0.5);
}

.l-Standard_content .l-Standard-bodyContent {
	z-index: 1
}
.l-Standard_recorder .l-Standard-body {
	background-image: none
}
@supports(display: -ms-grid) {
.l-Standard_recorder .l-Standard-body {
z-index:-1
}
}

@media(any-hover: hover) {
button {
	cursor: pointer
}
}

.u-sizeFullHeight {
	height: 100%
}
.u-displayA11yHide {
	width: 1px;
	height: 1px;
	overflow: hidden;
	padding: 0;
	border: 0;
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px)
}
.u-displayBlock {
	display: block
}
.u-rhythm-sm {
	margin: 1.0714285714rem
}
.u-rhythm-lg {
	margin: 1.7857142857rem
}
.u-rhythm-vertical-sm {
	margin: 1.0714285714rem 0
}
.u-rhythm-vertical-lg {
	margin: 1.7857142857rem 0
}
.u-rhythm-top-sm {
	margin-top: 1.0714285714rem
}
.u-rhythm-top-lg {
	margin-top: 1.7857142857rem
}
.u-rhythm-bottom-sm {
	margin-bottom: 1.0714285714rem
}
.u-rhythm-bottom-lg {
	margin-bottom: 1.7857142857rem
}
.Recorder {
	text-align: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: stretch
}
.Recorder-videoWrap {
	overflow: hidden;
	display: inline-block;
	position: absolute;
	left: 50%
}
@supports(display: -ms-grid) {
.Recorder-videoWrap {
z-index:-1
}
}
.Recorder-video {
	position: relative;
	transform: scaleX(-1)
}
@supports(display: -ms-grid) {
.Recorder-video {
z-index:-2
}
}
.Recorder-facebox {
	border: none;
	border-radius: 20%;
	position: absolute
}
.Watermark {
	display: flex;
	z-index: 1;
	align-content: center;
	flex: 0 0 auto;
	justify-content: center;
	background-color:#ccc;
	width:70%;
	margin:auto;
	padding:10px 0;
	border-left:5px solid #068016;
	border-top:1px solid #068016;
	border-bottom:1px solid #068016;
	border-right:5px solid #068016;
}

.l-Slide {
	text-align: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	justify-content: stretch;
	background-color: transparent
}
.l-Slide-col {
	flex-direction: column
}
.l-Slide_empty {
	text-align: center;
	display: block
}

.l-Body-first, .l-Body-window, .l-Body-last {
	position: relative
}
.l-Body-first {
	display: flex;
	flex: 1 0 100px;
	flex-direction: column;
	justify-content: center
}
.l-Body-window {
	font-size: 0;
	text-align: center;
	max-height: 445px;
	overflow: hidden;
	position: relative;
	flex: 1 0 346px
}
.l-Body-middle {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1
}
.l-Body-last {
	font-size: 0;
	display: flex;
	position: relative;
	z-index: 1;
	align-items: center;
	flex: 1 1 155px;
	flex-direction: column;
	justify-content: space-evenly
}
.PreloadSlide {
	background-color: #f0f0f0
}
.Waiting {
--first-adj: 0px;
--second-adj: 0px;
	color: #000
}
.Waiting-dots {
	color: #000;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin-top: 5px;
	display: inline-block;
	position: absolute;
	transform: translate(-50%, -50%);
	background-color: #000;
	box-shadow: 8.4px 14px 0 -4.2px, 14.98px 1.4px 0 -5.6px;
	-webkit-animation: growshrink 2400ms linear forwards infinite;
	animation: growshrink 2400ms linear forwards infinite
}
.Waiting-text {
letter-spacing:.105rem;
	margin: 0 1.7125rem;
	display: inline-block
}
[dir=rtl] .Waiting {
--first-adj: 8.4px;
--second-adj: 11.2px
}
@-webkit-keyframes growshrink {
33% {
width:5.6px;
height:5.6px;
transform:translate(calc(-50% - var(--first-adj)), -50%);
box-shadow:8.4px 14px 0 -1.4px, 14.98px 1.4px 0 4.2px
}
66% {
width:2.8px;
height:2.8px;
transform:translate(calc(-50% - var(--second-adj)), -50%);
box-shadow:8.4px 14px 0 5.6px, 14.98px 1.4px 0 1.4px
}
100% {
width:14px;
height:14px;
transform:translate(-50%, -50%);
box-shadow:8.4px 14px 0 -4.2px, 14.98px 1.4px 0 -5.6px
}
}
@keyframes growshrink {
33% {
width:5.6px;
height:5.6px;
transform:translate(calc(-50% - var(--first-adj)), -50%);
box-shadow:8.4px 14px 0 -1.4px, 14.98px 1.4px 0 4.2px
}
66% {
width:2.8px;
height:2.8px;
transform:translate(calc(-50% - var(--second-adj)), -50%);
box-shadow:8.4px 14px 0 5.6px, 14.98px 1.4px 0 1.4px
}
100% {
width:14px;
height:14px;
transform:translate(-50%, -50%);
box-shadow:8.4px 14px 0 -4.2px, 14.98px 1.4px 0 -5.6px
}
}
.l-RecordOverlay {
	width: 346px;
	height: 346px;
	overflow: hidden;
	margin: 0 auto;
	display: flex;
	justify-content: center
}
.RecordOverlay {
	width: auto;
	height: 100%;
	transform: translateY(10%) scale(1.6);
	background: #fff
}
.RecordOverlay-path {
	fill: #000;
	fill-rule: evenodd;
	fill-opacity: .6
}
.ConsentNotice {
	width: auto;
	max-width: 22.7857142857rem
}
.ConsentNotice p {
	line-height: 1.364;
	font-weight: 400;
	color: #222
}
.ConsentNotice a {
	font-weight: 700;
	text-decoration: underline
}
.ConsentNotice-Compatibility {
	margin: 10px auto
}
.Link {
	color: #4e4e4e
}
.Facemask {
	position: absolute;
	left: 50%
}
.Facemask-path {
	fill: #068016;
	fill-opacity: .2
}
.FullScreenButton {
	font-size: 3rem;
	color: #fff;
	width: 100%;
	height: 100%;
	border: none;
	position: absolute;
	z-index: 1;
	background-color: rgba(76,37,195,.3)
}
.FullScreenButton-text {
	display: block;
	position: relative;
	top: -43px
}
.Squoval-wrap {
	position: absolute;
	left: 50%
}
.Squoval {
	color: #00ffd1;
	box-sizing: border-box;
	border:3px #00ffd1 dotted;
	border-radius: 20%;
	/*background:url(../images/FaceFocus.png) left top no-repeat; background-size:100%;*/
	position: absolute;
	will-change: box-shadow, opacity
}
.Squoval::after {
	content: "";
	display: table;
	clear: both
}
.Squoval.is-animating {
	color: #fff;
	border-color: #fff;
	-webkit-animation: squoval-highlight 333.3333333333ms linear 2500ms alternate 3;
	animation: squoval-highlight 333.3333333333ms linear 2500ms alternate 3
}
.Squoval.is-animating::before {
	content: "";
	box-sizing: border-box;
	width: 112%;
	height: 112%;
	border-radius: inherit;
	display: block;
	position: absolute;
	top: -6%;
	left: -6%;
	opacity: 0;
	box-shadow: -25px 0 10px -6px rgba(6,128,22,.4), inset 12px 0 10px -6px rgba(6,128,22,.4);
	will-change: opacity;
	-webkit-animation: squoval-shadow 333.3333333333ms linear 2500ms alternate 3;
	animation: squoval-shadow 333.3333333333ms linear 2500ms alternate 3
}
.Squoval-line {
	color: rgba(255,255,255,.8);
	width: 0%;
	height: 100%;
	border-left: 2px dashed #fff;
	border-radius: 50%;
	float: left;
	position: relative;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
	box-shadow: -6px 0 6px -3px, inset 6px 0 6px -3px;
	will-change: width, border, box-shadow;
	animation: line-center-left 333.3333333333ms linear 2500ms alternate-reverse 3, line-center-left 2300ms linear 3500ms forwards 1, line-left-center 2300ms linear 5800ms forwards 1, line-center-right 2300ms linear 8100ms forwards 1, line-right-center 2100ms linear 10400ms forwards 1
}
.Squoval-arrow {
	width: 40px;
	height: 40px;
	float: left;
	position: absolute;
	top: 40%;
	left: calc(0% + 50px);
	transform: translate3d(0, 0, 0);
	opacity: 0;
	will-change: left, opacity;
	-webkit-animation: squoval-arrow 333.3333333333ms linear 2500ms alternate 3;
	animation: squoval-arrow 333.3333333333ms linear 2500ms alternate 3
}
.Squoval-arrow::before {
	content: "";
	width:40px;
	height:40px;
	background: url(../images/Arrow.png) left top no-repeat;
	display: inline-block;
	float: left;
	position: relative;
	top:40%;
	left: -50px
}
@-webkit-keyframes line-center-left {
from {
width:0%;
border-right:none;
border-left:2px dashed #fff;
-webkit-clip-path:polygon(-10% 0%, -10% 100%, 50% 100%, 50% 0%)
}
to {
	width: 100%;
	-webkit-clip-path: polygon(-10% 0%, -10% 100%, 50% 100%, 50% 0%)
}
}
@keyframes line-center-left {
from {
width:0%;
border-right:none;
border-left:2px dashed #fff;
-webkit-clip-path:polygon(-10% 0%, -10% 100%, 50% 100%, 50% 0%)
}
to {
	width: 100%;
	-webkit-clip-path: polygon(-10% 0%, -10% 100%, 50% 100%, 50% 0%)
}
}
@-webkit-keyframes line-left-center {
from {
width:100%;
border-right:none;
border-left:2px dashed #fff;
-webkit-clip-path:polygon(-10% 0%, -10% 100%, 50% 100%, 50% 0%)
}
to {
	width: 0%;
	-webkit-clip-path: polygon(-10% 0%, -10% 100%, 50% 100%, 50% 0%)
}
}
@keyframes line-left-center {
from {
width:100%;
border-right:none;
border-left:2px dashed #fff;
-webkit-clip-path:polygon(-10% 0%, -10% 100%, 50% 100%, 50% 0%)
}
to {
	width: 0%;
	-webkit-clip-path: polygon(-10% 0%, -10% 100%, 50% 100%, 50% 0%)
}
}
@-webkit-keyframes line-center-right {
from {
width:0%;
border-right:2px dashed #fff;
border-left:none;
-webkit-clip-path:polygon(50% 0%, 50% 100%, 110% 100%, 110% 0%);
box-shadow:6px 0 6px -3px, inset -6px 0 6px -3px
}
to {
	width: 100%;
	border-right: 2px dashed #fff;
	border-left: none;
	-webkit-clip-path: polygon(50% 0%, 50% 100%, 110% 100%, 110% 0%);
	box-shadow: 6px 0 6px -3px, inset -6px 0 6px -3px
}
}
@keyframes line-center-right {
from {
width:0%;
border-right:2px dashed #fff;
border-left:none;
-webkit-clip-path:polygon(50% 0%, 50% 100%, 110% 100%, 110% 0%);
box-shadow:6px 0 6px -3px, inset -6px 0 6px -3px
}
to {
	width: 100%;
	border-right: 2px dashed #fff;
	border-left: none;
	-webkit-clip-path: polygon(50% 0%, 50% 100%, 110% 100%, 110% 0%);
	box-shadow: 6px 0 6px -3px, inset -6px 0 6px -3px
}
}
@-webkit-keyframes line-right-center {
from {
width:100%;
border-right:2px dashed #fff;
border-left:none;
-webkit-clip-path:polygon(50% 0%, 50% 100%, 110% 100%, 110% 0%);
box-shadow:6px 0 6px -3px, inset -6px 0 6px -3px
}
to {
	width: 0%;
	border-right: 2px dashed #fff;
	border-left: none;
	-webkit-clip-path: polygon(50% 0%, 50% 100%, 110% 100%, 110% 0%);
	box-shadow: 6px 0 6px -3px, inset -6px 0 6px -3px
}
}
@keyframes line-right-center {
from {
width:100%;
border-right:2px dashed #fff;
border-left:none;
-webkit-clip-path:polygon(50% 0%, 50% 100%, 110% 100%, 110% 0%);
box-shadow:6px 0 6px -3px, inset -6px 0 6px -3px
}
to {
	width: 0%;
	border-right: 2px dashed #fff;
	border-left: none;
	-webkit-clip-path: polygon(50% 0%, 50% 100%, 110% 100%, 110% 0%);
	box-shadow: 6px 0 6px -3px, inset -6px 0 6px -3px
}
}
@-webkit-keyframes squoval-highlight {
from {
box-shadow:-45px 0 10px -30px #068016
}
to {
	box-shadow: -45px 0 10px -30px transparent
}
}
@keyframes squoval-highlight {
from {
box-shadow:-45px 0 10px -30px #068016
}
to {
	box-shadow: -45px 0 10px -30px transparent
}
}
@-webkit-keyframes squoval-shadow {
0% {
opacity:1
}
50% {
opacity:0
}
}
@keyframes squoval-shadow {
0% {
opacity:1
}
50% {
opacity:0
}
}
@-webkit-keyframes squoval-arrow {
from {
left:calc(0% + 50px);
opacity:.7
}
to {
	left: calc(50% + 50px);
	opacity: .7
}
}
@keyframes squoval-arrow {
from {
left:calc(0% + 50px);
opacity:.7
}
to {
	left: calc(50% + 50px);
	opacity: .7
}
}
#Ticks {
	width: 0;
	height: 0;
	opacity: 0
}
#Tick-line {
	stroke-width: 1px;
	stroke: #ccc
}
#Tick-hilite-line {
	stroke-width: 2px;
	stroke: #068016
}
.TickScale {
	width: 90%;
	height: 75px;
	max-width: 300px;
	padding: 0;
	display: flex;
	position: relative;
	align-self: center;
	background:rgba(6,128,22,0.2);
}
.TickScale-left, .TickScale-right {
	display: flex;
	position: relative;
	flex: 1 1 50%
}
.TickScale-left {
	transform: scaleX(-1)
}
.TickScale-center {
	color: #ccc;
	width: 2px;
	height: 70%;
	position: absolute;
	top: 15%;
	left: calc(50% - 1px);
	flex: 0 0 auto;
	background-color: #ccc
}
.TickScale-indicator {
	color: #068016;
	height: 80%;
	top: 10%;
	transform: translate3d(0, 0, 0);
	background-color: #068016;
	opacity: 0;
	box-shadow: 0 0 3px 0;
	will-change: left, opacity;
	-webkit-animation: show-indicator 50ms 2500ms linear 1 forwards, go-left 2300ms 3500ms linear 1 forwards, go-left-center 2300ms 5800ms linear 1 forwards, go-right 2300ms 8100ms linear 1 forwards, go-right-center 2100ms 10400ms linear 1 forwards;
	animation: show-indicator 50ms 2500ms linear 1 forwards, go-left 2300ms 3500ms linear 1 forwards, go-left-center 2300ms 5800ms linear 1 forwards, go-right 2300ms 8100ms linear 1 forwards, go-right-center 2100ms 10400ms linear 1 forwards
}
.TickScale-static {
	will-change: left, opacity;
	-webkit-animation: glow 50ms 3500ms linear 1 forwards;
	animation: glow 50ms 3500ms linear 1 forwards
}
[dir=rtl] .TickScale-left {
	order: 2
}
@-webkit-keyframes show-indicator {
from {
opacity:0
}
to {
	opacity: 1
}
}
@keyframes show-indicator {
from {
opacity:0
}
to {
	opacity: 1
}
}
@-webkit-keyframes go-left {
to {
left:calc(0% + 2px)
}
}
@keyframes go-left {
to {
left:calc(0% + 2px)
}
}
@-webkit-keyframes go-left-center {
from {
left:calc(0% + 2px)
}
to {
	left: calc(50% - 1px)
}
}
@keyframes go-left-center {
from {
left:calc(0% + 2px)
}
to {
	left: calc(50% - 1px)
}
}
@-webkit-keyframes go-right {
to {
left:calc(100% - 4px)
}
}
@keyframes go-right {
to {
left:calc(100% - 4px)
}
}
@-webkit-keyframes go-right-center {
from {
left:calc(100% - 4px)
}
to {
	left: calc(50% - 1px)
}
}
@keyframes go-right-center {
from {
left:calc(100% - 4px)
}
to {
	left: calc(50% - 1px)
}
}
@-webkit-keyframes glow {
from {
color:#ccc;
background-color:#ccc
}
to {
	color: #068016;
	background-color: #068016
}
}
@keyframes glow {
from {
color:#ccc;
background-color:#ccc
}
to {
	color: #068016;
	background-color: #068016
}
}
.Ticks {
	width: 100%;
	height: 100%
}
.Ticks-hilite {
	position: absolute;
	top: 0;
	left: 0
}
.Ticks-animate {
	transform: translateX(-100%)
}
.Ticks-animate-left {
	-webkit-animation: go-out 2300ms 3500ms linear 1 forwards;
	animation: go-out 2300ms 3500ms linear 1 forwards
}
.Ticks-animate-right {
	-webkit-animation: go-out 2300ms 8100ms linear 1 forwards;
	animation: go-out 2300ms 8100ms linear 1 forwards
}
@-webkit-keyframes go-out {
from {
transform:translateX(-100%) scaleX(1)
}
to {
	transform: translateX(0%) scaleX(1)
}
}
@keyframes go-out {
from {
transform:translateX(-100%) scaleX(1)
}
to {
	transform: translateX(0%) scaleX(1)
}
}
@-webkit-keyframes go-in {
from {
transform:translateX(100%) scaleX(1)
}
to {
	transform: translateX(0%) scaleX(1)
}
}
@keyframes go-in {
from {
transform:translateX(100%) scaleX(1)
}
to {
	transform: translateX(0%) scaleX(1)
}
}
.AudioBtn {
	left: 1.4285714286rem
}
.RerecordBtn {
	right: 1.4285714286rem
}
.AudioBtn, .RerecordBtn {
	width: 2.5714285714rem;
	height: 2.5714285714rem;
	min-width: 0;
	border: 2px solid transparent;
	border-radius: 50%;
	position: absolute;
	top: -4rem;
	background-color: transparent;outline:none;
}

.AudioBtn:hover, .RerecordBtn:hover { outline:none;
	}
.AudioBtn:active, .RerecordBtn:active {
	outline:none;
}
.AudioBtn:focus, .RerecordBtn:focus {
	outline:none;
}
.VerticalBtnPanel {
	list-style: none;
	width: 100%;
	padding: 0;
	margin: 0
}
.VerticalBtnPanel-item+.VerticalBtnPanel-item {
	margin-top: 1rem
}
.HorizontalBtnPanel {
	list-style: none;
	padding: 0;
	margin: 1em 0 0;
	display: grid;
	align-items: center;
	grid-template-rows: auto;
	grid-template-columns: 1fr auto 1fr
}
.HorizontalBtnPanel-item:nth-of-type(1) {
	grid-column: 2/3
}
.HorizontalBtnPanel-item:nth-of-type(2) {
	grid-column: 3/4;
	justify-self: start
}
.l-Scale {
	width: 346px;
	height: 346px;
	overflow: hidden;
	margin: 0 auto;
	position: relative
}
.l-Scale-model {
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 1%) scale(1.6)
}
.l-Scale-image {
	width: 272px;
	position: absolute;
	top: 13%;
	right: 32%;
	transform: scaleX(-1)
}
@-webkit-keyframes growfromtop {
0% {
transform:scaleY(0);
transform-origin:top center
}
100% {
transform:scaleY(1);
transform-origin:top center
}
}
@keyframes growfromtop {
0% {
transform:scaleY(0);
transform-origin:top center
}
100% {
transform:scaleY(1);
transform-origin:top center
}
}
@-webkit-keyframes growfrombottom {
0% {
transform:scaleY(0);
transform-origin:bottom center
}
100% {
transform:scaleY(1);
transform-origin:bottom center
}
}
@keyframes growfrombottom {
0% {
transform:scaleY(0);
transform-origin:bottom center
}
100% {
transform:scaleY(1);
transform-origin:bottom center
}
}
.StatusBar_top {
	width: 100%;
height:.4375rem;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-animation: growfromtop 1500ms;
	animation: growfromtop 1500ms
}
.StatusBar_top.is-success {
	background-color: #00ffd1
}
.StatusBar_top.is-error {
	background-color: red
}
.StatusBar_bottom {
	width: 100%;
height:.4375rem;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	-webkit-animation: growfrombottom 1500ms;
	animation: growfrombottom 1500ms
}
.StatusBar_bottom.is-success {
	background-color: #00ffd1
}
.StatusBar_bottom.is-error {
	background-color: red
}
@-webkit-keyframes fade-in {
0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes fade-in {
0% {
opacity:0
}
100% {
opacity:1
}
}
@-webkit-keyframes fade-out {
0% {
opacity:1
}
100% {
transform:translateY(-0.3125rem);
opacity:0
}
}
@keyframes fade-out {
0% {
opacity:1
}
100% {
transform:translateY(-0.3125rem);
opacity:0
}
}
.TimedText {
	color: #f0f0f0;
padding:.75rem 1.1875rem;
	-webkit-animation-duration: 400ms;
	animation-duration: 400ms;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1
}
.TimedText_fadeIn {
	-webkit-animation-name: fade-in;
	animation-name: fade-in
}
.TimedText_fadeOut {
	-webkit-animation-name: fade-out;
	animation-name: fade-out;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}
.ProgressBar-fill {
	transform: scaleX(0.1);
	transform-origin: top left
}
.ProgressBar_compatibility {
	width: 90vw;
height:.2857142857rem;
	background-color: #f0f0f0
}
.ProgressBar_compatibility-fill {
height:.2857142857rem;
	background-color: #fff
}
.ProgressBar_standard {
	width: 100%;
	height: 6px;
	background-color: rgba(255,255,255,.5)
}
.ProgressBar_standard-fill {
	height: 100%;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-color: #4c25c3
}
.ProgressBar_slides {
	width: 55%;
height:.3571428571rem;
	margin: 15% auto 0;
	z-index: 1;
	background-color: #c4c4c4
}
@media only screen and (min-height: 529px) {
.ProgressBar_slides {
	width: 75%;
	margin: 33% auto 0
}
}
.ProgressBar_slides-fill {
height:.3571428571rem;
	background-color: #4c25c3
}
[dir=rtl] .ProgressBar-fill {
	transform-origin: top right
}
.CommitSlide-frontalOverlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(34,34,34,.6)
}
.CommitSlide-loader {
	color: #fff;
	text-align: initial;
	width: 100%;
	position: absolute;
	bottom: 0
}
.ErrorSlide {
	padding: 0 20px;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	background-color: #fff
}
@media only screen and (min-width: 720px) {
.ErrorSlide {
	padding: 0 84px
}
}
.ErrorSlide-title {
	font-weight: 700;
	color: #4e4e4e;
	margin-top: -10%;
	margin-bottom: 30px
}
.ErrorSlide-message {
	color: #222
}
.ErrorSlide-btn {
	font-weight: 400;
	background-color: #4c25c3
}


.DetectionErrorSlide-tip {
	margin-bottom: 1.125rem;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
padding-right:.625rem;
padding-left:.625rem
}
.DetectionErrorSlide-tipItem {
	text-align: initial
}
.CloseButton {
	font-size: 0;
	line-height: 0;
	width: 2rem;
	height: 2rem;
	border: none;
	border-radius: 50%;
	position: absolute;
top:.25rem;
right:.25rem;
	z-index: 10;
	-webkit-appearance: none;
	background:transparent;
}
#face_tilt{
    
    font-size: 20px;
    color: #ff0000;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

#head_tilt {
    
    font-size: 16px;
    color: #000;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}