@charset 'utf-8';

.ap1-container	{
	position:	absolute;
	top:		calc(var(--menubar-height) + calc(var(--mb-border-width) * 2));
	left:		0;
	width:		var(--container-width);
	height:		var(--ap1-height);
	clear:		both;
	float:		left;
	overflow:	hidden;
	border:		var(--container-bwidth) solid grey;
	border-radius:	var(--container-bradius);
}
.ap1-section1		{
	position:	absolute;
	top:		0;
	left:		0;
	height:		var(--ap1-height);
	width:		calc(var(--container-width) * .5);
	float:		left;
}
.ap1-section2		{
	position:	absolute;
	top:     	0;
	left:		calc(var(--container-width) * .5);
	height:		var(--ap1-height);
	width:		calc(var(--container-width) * .5);
	float:		left;
}
.about-section-short	{
	position:	relative;
	float:		left;
	width:		100%;
	height:		calc(var(--ap1-height) * .15);
}
.about-section-reg	{
	position:	relative;
	float:		left;
	width:		100%;
	height:		calc(var(--ap1-height) * .5 + 4vw);
}
.about-section-quarter  {
	height:		calc(var(--ap1-height) * .25);
}
.ap1-container > video	{
	position:       absolute;
	top:            0;
	left:           0;
	width:          calc(var(--container-width) * 1.4);
	height:         auto;
	opacity:        0.3;
	-webkit-filter: blur(1px);
	filter:         blur(1px);
	border-radius:  calc(var(--container-bradius) - 4px);
}
.ap1-container > img	{
	position: 	absolute;
	top:     	0;
	left:     	0;
	width:    	calc(var(--container-width) * 1.9);
	height:   	auto;
	overflow:	hidden;
        box-shadow: 	10px 10px yellow;
	border-radius:  var(--container-bradius);
	z-index: 	 -1;
	-webkit-filter: blur(3px) sepia(0.3) brightness(.4);
	filter: 	blur(3px) sepia(0.3) brightness(.4);
	animation: 	bgfade 3s cubic-bezier(0,0,0.58,1) 0s 1 forwards;
} 
.ap1-title		{
	position:	absolute;
	left:		4vw;
	height:		8vw;
	text-align:	left;
	margin-top:	-1vw;
	opacity:	0;
	animation:	text-up 2s cubic-bezier(0.37, 0, 0.63, 1) 0.4s 1 forwards,
			fade    2s cubic-bezier(0.37, 0, 0.63, 1) 0.4s 1 forwards;
}
div.ap1-title > h1 	{
	font-size: 	6vw;
}
.ab-accent-bar   		{
	position:  	  absolute;
	top:       	  11vw;
	left:     	  4vw;
	height:   	  .6vw;
	width:    	  80%;
	background:       white;
	transform: 	  scaleX(0);
	transform-origin: left center;
	animation: 	  accent-grow 1s cubic-bezier(0.37, 0, 0.63, 1) 2.5s 1 forwards;
}

.ab-foobar 			{
	position: 	  absolute;
	bottom: 	  0;
	left: 		  0;
	width: 		  calc(var(--container-width) + calc(var(--container-bwidth) * 2));
	height: 	  var(--ap1-height);
	background: 	  black;
	transform: 	  scaleY(1);
	transform-origin: center top;
	animation:        scale-up 2s cubic-bezier(0.61, 1, 0.88, 1) 0s 1 forwards;
	z-index: 	  16;
}
.ab-p1p2-buffer-bar 		{
	position:	  absolute;
	top:		  0;
	left:		  0
	clear:		  both;
	float:		  left;
	width:		  100%;
	height:		  var(--buffer-bar-height);
	background:	  black;
	border-top-left-radius:		var(--container-bradius);
	border-top-right-radius:	var(--container-bradius);
}
.ap1-section2 > .about-section-short {
	margin-top:	8vw;
}
div[class^="ab-para"]		{
	position:  	absolute;
	top:	  	0;
	left: 	 	calc(var(--container-width) * 0.5 * -1);
	width:	 	80%;
	float:		left;
	opacity: 	0;
	animation: 	text-left 1.25s cubic-bezier(0.37, 0, 0.63, 1) 2.5s 1 forwards,
			fade      1.00s cubic-bezier(0.37, 0, 0.63, 1) 2.5s 1 forwards;
}
p[class^="fs-"]			{
        position:	absolute;
	top:	  	0;
	left: 	 	0;
	text-align:	left;
}
div[class^="ab-para"] > p.fs-0-04	{
	position:	relative;
	font-size:	3vw;
	line-height:	3vw;
	border-top-width:	0;
	border-bottom-width:	0;
	padding-bottom:		0;
	padding-top:	0;
	margin-bottom:	0vw;
	margin-top:	0vw;
}
div[class^="ab-para"] > p.fs-0-05	{
        margin-top: 	45%;
	margin-left: 	2%;		
	font-size:	4vw;
	text-align:	justify;
	line-height:	calc(var(--ap1-height) * 0.06);
}
.ab-logo-photo   			{
        position:	absolute;
	top:     	0;
	left:    	1vw;
	opacity:	0;
	animation:	photo-down 1.5s cubic-bezier(0.37, 0, 0.63, 1) 2.5s 1 forwards;
}
div.ab-logo-photo > img			{
	width: 		80%;
	height: 	auto;
	margin-left: 	4%;
	overflow: 	hidden;
	border-radius:	var(--container-bradius);
	border:		calc(var(--container-bwidth) * 3) groove darkgreen;
	box-shadow: 	20px 20px 50px grey;
}

@keyframes scale-up	{
	to {transform: scaleY(0);}
}
@keyframes bgfade	{
	from { opacity: .1; }
	to   { opacity:  1; }
}
@keyframes photo-down	{
	to   { top: 25%; opacity: 1; }
}
@keyframes accent-grow	{
	to   { transform: scaleX(1); }
}
@keyframes text-up	{
	from { top: calc(var(--ap1-height) * 0.5);}
	to   { top: 1vw;  }
}
@keyframes text-left	{
	to   { left: 4vw; }
}
@keyframes fade		{
	to   { opacity: 1;}
}