/* Outface */
[class*="outface-face"]{ display: none; }
[class*="outface-face"][class=*flex] { display: none; }
.outface-open{ display: block; }
.outface-open[class*="flex"] { display: flex; }

/* Backdrop */
.outface-layout-backdrop, .outface-layout-load {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	transition: opacity .25s;
}
body > .outface-layout-backdrop,body > .outface-layout-load { position: fixed; }
.outface-layout-backdrop.outface-enter, .outface-layout-load.outface-enter,
.outface-layout-backdrop.outface-close, .outface-layout-load.outface-close {
	pointer-events: none;
	opacity: 0;
}
.outface-layout-backdrop { background-color: rgba(0,0,0,.5); }
.outface-layout-load { background-color: #fff; }

/* Dialog */
.outface-layout-dialog {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	transition: opacity .25s, transform .25s;
	z-index: 1;
}
.outface-dialog-top, .outface-dialog-bottom { max-height: calc(100% - 1em); }
.outface-dialog-left, .outface-dialog-right { max-width: calc(100% - 1em); }
.outface-dialog-top { bottom: auto; }
.outface-dialog-right { left: auto; }
.outface-dialog-bottom { top: auto; }
.outface-dialog-left { right: auto; }

.outface-dialog.outface-enter,.outface-dialog.outface-close{ opacity: 0; }.
.outface-dialog-top.outface-enter,.outface-dialog-top.outface-close { transform: translate(0, -100%); }
.outface-dialog-right.outface-enter,.outface-dialog-right.outface-close { transform: translate(100%, 0); }
.outface-dialog-bottom.outface-enter,.outface-dialog-bottom.outface-close { transform: translate(0, 100%); }
.outface-dialog-left.outface-enter,.outface-dialog-left.outface-close { transform: translate(-100%, 0); }
body > [class*="outface-layout-dialog"] { position: fixed; }

/* Slide */
.outface-layout-slide {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	transition: opacity .25s, transform .25s;
}
.outface-layout-slide.outface-enter,.outface-layout-slide.outface-close { opacity: 0; }
.outface-slide-front.outface-enter,.outface-slide-front.outface-close { transform: translate(-100%, 0); }
.outface-slide-back.outface-enter,.outface-slide-back.outface-close { transform: translate(100%, 0); }

/* Prompt */
.outface-layout-prompt {
	position: absolute;
    left: 50%;
	top: 50%;
    transform: translate(-50%, -50%) scale(1);
	transition: opacity .25s, transform .25s;
	z-index: 1;
	background-color: #fff;
}
body > .outface-layout-prompt { position: fixed; }
.outface-layout-prompt.outface-enter,.outface-layout-prompt.outface-close{
	opacity: 0;
	transform: translate(-50%, -50%) scale(.9);
}