@charset 'utf-8';

/*  If you ever come back to this, know that all the positioning was done by hand
    and you need to remember that things are aditive (1 size + another) and you just
    can't go messing with one thing.
*/
.ap3-container			{
	position:	absolute;
	clear:		both;
        top:		calc(var(--menubar-height) + var(--ap1-height) + calc(var(--mb-border-width) * 2) +
			var(--ap2-height) + calc(var(--container-bwidth) * 4));
	left:		0;
	width:		var(--container-width);
	height:     	var(--ap3-height);
	float:		left;
	overflow:	hidden;
	background:	white;
	border:		var(--container-bwidth) solid grey;
	border-radius:	calc(var(--container-bradius) + 3pt);
}
.ab-p2p3-buffer-bar 		{
	position: 	absolute;
	float: 		left;
	top:       	0;
	left:		0;
	height:		var(--buffer-bar-height);
	width: 		100%;
	background: 	black;
	border-top-left-radius:	 var(--container-bradius);
	border-top-right-radius: var(--container-bradius);
}

/*  Same code as a1p2-transition (except for placement)
*/
.ap3-first-transition		{
	position:	absolute;
	top:		var(--buffer-bar-height);
	left:		0;
	float:		left;
	width:		0;
	height:		0;
	border-top:	var(--container-transition) solid black;
	border-left:	50vw solid black;
	border-bottom:	var(--container-transition) solid transparent;
	border-right:	50vw solid transparent;
	pointer-events: none;
	z-index:	3;
}
.ap3-second-transition		{
	position:	absolute;
	top:		calc(var(--buffer-bar-height) + 1vw);
	left:		.25vw;
	width: 		0;
	height:		0;
	border-top:	var(--container-transition) solid white;
	border-left:	50vw solid white;
	border-bottom:	var(--container-transition) solid transparent;
	border-right:	50vw solid transparent;
	pointer-events: none;
	z-index:	2;
}
.ap3-title			{
	position:  	absolute;
	opacity:   	0;
	top:	  	0;
	left:	  	48%;
	width:	  	40%;
	height:    	6vw;
	transition:	top     1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.2s,
		   	opacity 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0s;
	z-index:	8;
}
div.ap3-title > h1	{
	font-size:	4vw;
	text-align:	center;
}
.ap3-description	{
	position:	absolute;
	top:		0vw;
	left:		35%;
	opacity:	0;
	height:		30vw;
	width:		60%;
	transition:	all 2s cubic-bezier(0.25, 1, 0.5, 1);
	z-index:	8;
}
div.ap3-description > p	{
	font-size:	3.5vw;
	text-align:	left;
	margin-top:	0;
}
.ap3-image		{
	position:	absolute;
	top:		0;
	left:		2vw;
	opacity:	0;
	width:		26.7%;
	height:		20vw;
	transition:	all 2s cubic-bezier(0.25, 1, 0.5, 1);
	z-index:	8;
}
div.ap3-image > img	{
	width:		 100%;
	height:		 auto;
	object-position: center;
	border:		 0.25vw solid black;
	border-radius:	 0.5vw;
	z-index:	 8;
}
.ap3-closing		{
	position:	absolute;
	top:		0vw;
	left:		4vw;
	opacity:	0;
	width:		var(--container-width);
 	transition:	all 2.5s cubic-bezier(0.25, 1, 0.5, 1); 
	z-index:	10;
}
.ap3-closing > p 	{
	margin-right:	4vw;
}
.ap3-container > video	{
	position: 	absolute;
	opacity:	0;
	top:     	calc(var(--buffer-bar-height) + 1.3vw);
	left:     	0;
 	width:    	calc(var(--container-width) * 1.75); 
	height:   	auto;
	overflow:	hidden;
	border-radius:  var(--container-bradius);
	transition:	all 1s cubic-bezier(0.76, 0, 0.24, 1) 0s;
}
.ap3-container > video#trees		{
	-webkit-filter: brightness(0.6) grayscale(50%) blur(50px);
	filter:		brightness(0.6) grayscale(50%) blur(50px);
}
.ap3-container:hover > video#grain	{
	opacity:	0.3;
}
.ap3-container:hover > video#trees	{
	opacity:	1;
	-webkit-filter: brightness(0.6) grayscale(50%) blur(0px);
	filter:		brightness(0.6) grayscale(50%) blur(0px);
}

/*	These are the transition activities
*/
.ap3-container:hover > div.ap3-title	{
	top:		25%;
	opacity:	1;
}
.ap3-container:hover > div.ap3-description	{
	top:		40%;
	opacity:	1;
}
.ap3-container:hover > div.ap3-image 	{
	top:		46%;
	opacity: 	1;
}
.ap3-container:hover > div.ap3-closing	{
	top:		78%;
	font-size:	4vw;
	opacity:	1;
}