@keyframes slideFromLeft {
  0% {
    transform:translateX(-100%)skew(-20deg);
    opacity:0;
  }
  
  100% {
    transform:translateX(0)skew(-20deg);
    opacity:1;
  }
  
}


@keyframes slideFromRight {
  0% {
    transform:translateX(100%)skew(-20deg);
    opacity:0;
  }
  
  100% {
    transform:translateX(0)skew(-20deg);
    opacity:1;
  }
  
}


@keyframes slideFromTop {
  0% {
    transform:translateY(-100%);
    opacity:0;
  }
  
  100% {
    transform:translateY(0);
    opacity:1;
  }
  
}


body {
	font-family: Montserrat, Helvetica, sans-serif;
	overflow:hidden;
	padding:0px;
	margin:0px;
}

.bgIMAGE {
	margin:0px;
	padding:0px;
	position:absolute;
	width:100vw;
	height:100vh;
	background-image: url("pfbg.webp");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	
}


.infoBG {
  animation:1s cubic-bezier( 0.00, 1.00, 0.00, 1.00 ) 0s 1 slideFromLeft;
	background-image:linear-gradient(to bottom, #494149, #1e1b1e);
	width:600px;
	height:250px;
	position:absolute;
	top:12vh;
	left:15vw;
	transform: skew(-20deg);
	
}

.longformBG {
  animation:1.5s cubic-bezier( 0.00, 1.00, 0.00, 1.00 ) 0s 1 slideFromLeft;
	background-image:linear-gradient(to bottom, #494149, #1e1b1e);
	width:60vw;
	height:400px;
	position:absolute;
	top:45vh;
	left:-100px;
	transform: skew(-20deg);
	
}

.shortformBG {
  animation:2s cubic-bezier( 0.00, 1.00, 0.00, 1.00 ) 0s 1 slideFromRight;
	background-image:linear-gradient(to bottom, #494149, #1e1b1e);
	width:40vw;
	height:600px;
	position:absolute;
	top:12vh;
	right:-150px;
	transform: skew(-20deg);
}

.logobox {
 animation:1s cubic-bezier( 0.00, 1.00, 0.00, 1.00 ) 0s 1 slideFromTop;
 position:absolute;
 height:250px;
 top:12vh;
 left:52vw;
 z-index:5;
}

.logobox img {
  height:100%;
  filter:drop-shadow(0px 15px 15px rgba(25, 25, 25, 0.5));
}

.stripTitle{
	position:absolute;
	transform:rotate(-90deg);
	font-size:90px;
	font-weight:900;
	line-height:80px;
	color:#ede1ed;
}


.infoBOX {
  transform:skew(19deg);
  position:relative;
  width:75%;
  left:12%;
  top:2%;
  color:#ede1ed;
  text-align:justify;
}

.introTitle {
  font-weight:800;
  font-size:44px;
  line-height:1px;
}

.introTXT {
  font-size:16px;
  line-height:24px;
}


.longformBG .stripTitle {
	right:-60px;
	top:-20px;
	text-align:right;
}

.shortformBG .stripTitle {
	left:-95px;
	top:250px;
}




.stripContainer {
	/* background-color:#23c6ae; */
	position:relative;
	height:100%;
	overflow:scroll;
	transform:skew(20deg);
	
}

.longformBG .stripContainer {
	display:flex;
	flex-wrap:nowrap;
	overflow:scroll;
	width:65%;
	left:18%;
	top:0;
}

.longformBG .iframeBox {
	margin:20px;
	width:100%;
}

.longformBG iframe {
	width:600px;
	height:100%;
	filter:grayscale(100%);
	transition: filter 0.5s;
}

.longformBG iframe:hover{
 filter:grayscale(0%); 
}



.shortformBG .stripContainer {
	/*display:flex;
	flex-wrap:nowrap;*/
	overflow:scroll;
	overflow-x:hidden;
	width:45%;
	left:20%;
	top:0;
}

.shortformBG .iframeBox {
	margin:20px;
	width:86%;
}

.shortformBG iframe {
	width:100%;
	height:500px;
	filter:grayscale(100%);
	transition: filter 0.5s;
}

.shortformBG iframe:hover{
 filter:grayscale(0%);
}