@charset 'utf-8';

.ap2-container			{
	position:	absolute;
        top:		calc(var(--menubar-height) + var(--ap1-height) + calc(var(--mb-border-width) * 2) +
			calc(var(--container-bwidth) * 2));
	left:		0;
	width:		var(--container-width);
	height:     	var(--ap2-height);
	float:		left;
	margin-left:	auto;
	margin-right:	auto;
	background:	white;
	border:		var(--container-bwidth) solid grey;
	border-radius:	calc(var(--container-bradius) + 3pt);
}
.ap1p2-transition		{
	position:	absolute;
	top:		var(--buffer-bar-height);
	left:		0;
	float:		left;
	width:		0;
	height:		0;

/*	These wonky-ass hard codes are because
	the child doesn't respect the width size of the
	parent.
*/
 	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;
} 
.ap2image-container 		{
	position:	absolute;
	opacity:	0;
	top:		0;
	left:		10%;
	width:		35%;
	height:		auto;
 	transition:	all     1.5s cubic-bezier(0.65, 0, 0.35, 1) 0s,
			opacity 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
.ap2image-container > img	{
	width:		100%;
	height: 	auto;
	border:		calc(var(--container-bradius) * 1) ridge #E8BB46;
	border-radius:  calc(var(--container-bradius) * 3);
}
.ap2-title			{
	position:  	absolute;
	opacity:   	0;
	top:	  	0;
	left:	  	55%;
	width:	  	40%;
	height:    	calc(var(--ap2-height) * 0.15);
	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) 0.2s;
}
.ap2-title > h1			{
	font-size:  	6vw;
}
.ap2-underline1 		{
	position:	  absolute;
	opacity:   	  1;
	top:		  0;
	left:		  55%;
	width:		  42%;
	height:		  2vw;
	background:	  black;
	transform:	  scaleX(0);
	transform-origin: center left;
	transition: 	  transform 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.2s,
		    	  top       1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}
.ap2-name			{
	position:	  absolute;
	opacity:	  0;
	top:		  0;
	left:		  55%;
	width:		  30%;
	height:		  8vw;
	text-align:	  left;
	transition:	  top     1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.2s,
			  opacity 1s   cubic-bezier(0.65, 0, 0.35, 1) 0.9s;
}
.ap2-name > h2 			{
	font-size:	  4.5vw;
}
.ap2-container:hover > div.ap2image-container	{
	top:		  20%;
	opacity:	  1;
}
.ap2-container:hover > div.ap2-title		{
	top:		  32%;
	opacity:	  1;
}
.ap2-container:hover > div.ap2-underline1	{
	top: 		  32%;
	transform:	  scaleX(1);
}
.ap2-container:hover > div.ap2-name		{
	top:		  62%;
	opacity:	  1;
}