﻿/* =============================================================================== */
/*A N I M A T I O N S FACES
*/


.face-position {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background-color:transparent;
	backface-visibility:hidden;
	overflow:hidden;
}
.face-wrapper {
	position:relative;
	margin:0;
	padding:0;
 	opacity:0;
	overflow:hidden;
}
.face-container {
	position:absolute;
	top:0;
 	left:0;
 	/*background-color:transparent;*/
	overflow:hidden;
	height:100%;
	width:100%;
	display:block;
}
.face-position.active .face-wrapper  {
 	opacity:1;
}
.face-container.image {
    background-position: top left;
    background-repeat: no-repeat;
	background-size: cover;
	/*background-attachment: fixed;*/

}
.face-container video {
	position: absolute;
   	top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 102%;
    width: auto;
    opacity: 1;
    transition: opacity .5s;
    z-index:404;
}
@media screen and (min-width: 800px) {
.face-container video.tall {
		width: 102%;
    	height: auto;
	}
}

.fade-none { 
	transition:opacity 0s linear 0s;
}
.fade-1s { 
	transition:opacity 1s linear 0s;
}
.move-linear { 
	transition:transform 4s linear 0s;
}
.move-ease { 
	transition:transform 4s ease 0s;
}
.fade-linear { 
	transition:opacity 4s linear 0s;
}
.fade-slow { 
	transition:opacity 8s linear 0s;
}
.fade-ease { 
	transition:opacity 4s ease 0s;
}
.fade-fast { 
	transition:opacity .1s linear 0s;
}
.fade-alive { 
	transition:opacity .5s linear 0s;
}
.active .fade-alive { 
	opacity:1;
}
.size100to100 {
   width:100%;
   height: 100%; 
}
.size50to100 {
   width:50%;
   height: 100%;
}
.size33to100 {
   width:33.3333%;
   height: 100%;
}
.size66to100 {
   width:66.6666%;
   height: 100%;
}
.size100to50 {
   width:100%;
   height: 50%;
}


/* -------------------------------------------------- */
/*Slot Machine*/
.size33to33 {
   width:33.3333%;
   height: 33.3333%; 
}

/*Position*/
/*Row 1*/
.row01pos01 {transform:translate3d(0%, -33.3333%, 0);transition:none;}
.row01pos02 {transform:translate3d(0%, 0%, 0);}	 
.row01pos03 {transform:translate3d(0%, 33.3333%, 0);}	 
.row01pos04 {transform:translate3d(0%, 66.6666%, 0);}	 
.row01pos05 {transform:translate3d(0%, 100%, 0);}	 

/*Row 2*/
.row02pos01 {transform:translate3d(33.3333%, -33.3333%, 0);transition:none;}
.row02pos02 {transform:translate3d(33.3333%, 0%, 0);}	 
.row02pos03 {transform:translate3d(33.3333%, 33.3333%, 0);}	 
.row02pos04 {transform:translate3d(33.3333%, 66.6666%, 0);}	 
.row02pos05 {transform:translate3d(33.3333%, 100%, 0);}	 

/*Row 3*/
.row03pos01 {transform:translate3d(66.6666%, -33.3333%, 0);transition:none;}
.row03pos02 {transform:translate3d(66.6666%, 0%, 0);}	 
.row03pos03 {transform:translate3d(66.6666%, 33.3333%, 0);}	 
.row03pos04 {transform:translate3d(66.6666%, 66.6666%, 0);}	 
.row03pos05 {transform:translate3d(66.6666%, 100%, 0);}	 

.slutty {
	transition:transform 0.25s linear;
}

/*Top -100%*/
.pos100n100n {
	transform:translate3d(-100%, -100%, 0);
}	 
.pos100n066n {
	transform:translate3d(-100%, -66%, 0);
}
.pos100n050n {
	transform:translate3d(-100%, -50%, 0);
}
.pos100n033n {
	transform:translate3d(-100%, -33%, 0);
}
.pos100n000p {
	transform:translate3d(-100%, 0, 0);
}
.pos100n033p {
	transform:translate3d(-100%, 33%, 0);
}
.pos100n050p {
	transform:translate3d(-100%, 50%, 0);
}
.pos100n066p {
	transform:translate3d(-100%, 66%, 0);
}
.pos100n100p {
	transform:translate3d(-100%, 100%, 0);
}
/*Top -50%*/
.pos0500n100n {
	transform:translate3d(-50%, -100%, 0);
}
.pos050n066n {
	transform:translate3d(-50%, -66%, 0);
}
.pos050n050n {
	transform:translate3d(-50%, -50%, 0);
}
.pos050n033n {
	transform:translate3d(-50%, -33%, 0);
}
.pos050n000p {
	transform:translate3d(-50%, 0, 0);
}
.pos050n033p {
	transform:translate3d(-50%, 33%, 0);
}
.pos050n050p {
	transform:translate3d(-50%, 50%, 0);
}
.pos050n066p {
	transform:translate3d(-50%, 66%, 0);
}
.pos050n100p {
	transform:translate3d(-50%, 100%, 0);
}

/*Top 0%*/
.pos000p100n {
	transform:translate3d(0, -100%, 0);
}
.pos000p066n {
	transform:translate3d(0, -66%, 0);
}
.pos000p050n {
	transform:translate3d(0, -50%, 0);
}
.pos000p033n {
	transform:translate3d(0, -33%, 0);
}
.pos000p000p {
	transform:translate3d(0, 0, 0);
}
.pos000p033p {
	transform:translate3d(0, 33%, 0);
}
.pos000p050p {
	transform:translate3d(0, 50%, 0);
}
.pos000p066p {
	transform:translate3d(0, 66%, 0);
}
.pos000p100p {
	transform:translate3d(0, 100%, 0);
}

/*Top +50%*/
.pos050p100n {
	transform:translate3d(50%, -100%, 0);
}
.pos050p066n {
	transform:translate3d(50%, -66%, 0);
}
.pos050p050n {
	transform:translate3d(50%, -50%, 0);
}
.pos050p033n {
	transform:translate3d(50%, -33%, 0);
}
.pos050p000p {
	transform:translate3d(50%, 0, 0);
}
.pos050p033p {
	transform:translate3d(50%, 33%, 0);
}
.pos050p050p {
	transform:translate3d(50%, 50%, 0);
}
.pos050p066p {
	transform:translate3d(50%, 66%, 0);
}
.pos050p100p {
	transform:translate3d(50%, 100%, 0);
}

/*Top +100%*/
.pos100p100n {
	transform:translate3d(100%, -100%, 0);
}
.pos100p066n {
	transform:translate3d(100%, -66%, 0);
}
.pos100p050n {
	transform:translate3d(100%, -50%, 0);
}
.pos100p033n {
	transform:translate3d(100%, -33%, 0);
}
.pos100p000p {
	transform:translate3d(100%, 0, 0);
}
.pos100p033p {
	transform:translate3d(100%, 33%, 0);
}
.pos100p050p {
	transform:translate3d(100%, 50%, 0);
}
.pos100p066p {
	transform:translate3d(100%, 66%, 0);
}
.pos100p100p {
	transform:translate3d(100%, 100%, 0);
}
.scale13 {transform:scale(1.3);}
.scale20 {transform:scale(2.0);}
.scale30 {transform:scale(3.0);}

.animation-face-overlay{
	position:absolute;
 	top:0;
 	left:0;
 	height:100%;
 	width:100%;
 	display:block;
}

.face-container.image.bg-smuggle {
	background-position-x: -20px;
    background-position-y: -75px;
}

.face-position.flashlight .face-wrapper  {
	animation: blinker 1s linear forwards;
}

@keyframes blinker {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

