@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Raleway:wght@300;400;500;795;800;900&family=Syncopate:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');




* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #1d3158;
}

html{
	font-size: 100%;
}

/* @font-face {
    font-family: 'steiner';
    src: url('../fonts/steiner.otf') format("opentype"),
     url('fonts/steiner.woff') format('woff'),
     url('fonts/steiner.woff2') format('woff2'),
     url('fonts/steiner.ttf') format('truetype'),
     url('fonts/steiner.svg#svgFontName') format('svg'),
     url('fonts/dirga.ttf') format('truetype');   
    font-weight: normal;
    font-style: normal;
} */
	/*
	font-family: 'Roboto', sans-serif;
	font-family: 'Syncopate', sans-serif;
	font-family: 'Michroma', sans-serif;
	font-family: 'consolas', monospace; 
	*/

h1{

			font-family:   'Michroma', sans-serif;
			/* color: rgba(255,255,255,0.50); */
			font-size: 3rem;
		
			font-weight: bolder;
			line-height: 1.5;
			letter-spacing: .1em;
			word-spacing: .2em;
			
			-webkit-background-clip: text;
			-webkit-text-fill-color: rgb(64, 88, 136);
			text-shadow: 
				-1px -1px 0 rgba(255,255,255,.8), 
				1px 1px 0 rgba(0, 0, 0, 0.25), 
				3px 3px 3px rgba(0,0,0,.25), 
				10px 10px 25px rgba(0,0,0,.4)/*,
				20px 40px 40px rgba(0,0,0,.5)*/;

	}
	
h2{
		/*font-family: 'Bungee', cursive;*/
		/*font-family: 'Open Sans', sans-serif;*/
	/*	font-family: 'Russo One', sans-serif;*/
		font-family: 'Syncopate', sans-serif;
		font-size: 1.5rem;
	} 
	
h3{
		/* font-family: 'Roboto', sans-serif; */
		/* font-family: 'Syncopate', sans-serif; */
		font-family:   'Michroma', sans-serif;
		font-size: 1.5rem;
		font-weight: 900;
		line-height: 1.1;
		color: #4a5b7e;
	} 
	
p{
	/*	font-family: 'Open Sans', sans-serif;*/
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
		font-size: 1.2em;
		/* width: clamp (5ch, 10vw, 15ch); */
}
	

a{
	color: inherit;
	text-decoration: none;
	outline: 0;
}

.boxStyle{
	position: absolute;
	/* background-color: rgba(90, 179, 252, 0.1); */
	/* padding: 20px; */
}


.boxStyle h1{
	font-size: 2.5em;
	margin: 2em 0 .5em;
}

.boxStyle p{
	text-align: justify;
	text-justify: inter-character;
	padding: .5em 1.2em .5em;
	font-size: 1.2rem;
	line-height: 1.5rem;
}

/* .textBox8.boxStyle ul{
	margin: -5em 0 1em 4em;
	font-family: 'Michroma', sans-serif;
	font-size: 1em;
} */
.textBox8.boxStyle li{
	margin: 10px -20px;
}
.textBox3.boxStyle li{
	margin: 15px -20px;
}
.textBox3.boxStyle h3{
	margin: 25px 20px;
}

/*////////////////////////////		body   		////////////////////////////////////////*/


body{
	/*position: absolute;*/
	margin: 0;
	background-color: rgb(255, 255, 255);
	overflow-y: scroll;
	overflow-x: hidden;
	color: rgba(54,54,69,.95);
	height: 500vh;
	/* filter: blur(10px); */
}

#main-container{
	position: relative;
	width:1400px;
	height: auto;
	/* background-color: rgba(175, 193, 210, .4); */
	margin: auto;
	/* border-color: rgba(95, 95, 95, 0.596);
	border-style: solid;
	border-width: thin; */
}

body, ::-webkit-scrollbar, .imgrev::before{
}

::-webkit-scrollbar{
  width: 15px;
  background: #d9d9d9; /*	#0d0d0d;*/
}

::-webkit-scrollbar-thumb{
  background: #636363;
}



.trigs{
	opacity: 0;

	position: absolute;
	box-sizing: border-box;
	top: 0px;
	left: 0px;
	font-style: normal;
	font-weight: bold;
	font-size: 2rem;
	text-align: center;
	line-height: -4em;
	color: #E0E0E0;
	text-shadow: 2px 2px 2px #151414;
	vertical-align: 2em;
	border-style: solid;
	border-radius: 7px;
	border-width: 1px;
	border-color: #4D4D4D;
	background-color: transparent;
	z-index: 100000;
	width: 5vw;
	height: 50px;
/*	margin-bottom: 95vh;*/
	/*visibility: hidden;*/
	/*display: none;*/
}


.cont{

	position: relative;
	width: 100%;
	height: 100vh;

}

.wrap{
	perspective: 1000px; 
	 perspective-origin: center; 
	/* transform-style: preserve-3d;
	transform: perspective(1000px); */
}




/*////////////////////////////		Hero		////////////////////////////////////////*/

header{
	position: relative;
	width: 100%;
	height: 100vh;
	perspective: 1000px;
	 perspective-origin: center;
	 transform-style: preserve-3d;
	 /*background-color: blue;*/
}
#hero {
	/* top: 25%; */
	/* transform: translateY(5%); */
	width: 100%;
	height: 100%;
	/* max-height: 100vh; */
	overflow-x: hidden;

	opacity: 0;
	
	transform: translateZ(-1000px);
	transition-property: opacity, transform;
	transition-duration: 1500ms, 1500ms;
	transition-timing-function: ease-out, ease-out;
	transition-delay: 0, 0;
}
#hero.on{
	opacity: 1;
	transform-style: preserve-3d;
	transform: translateZ(0);	
	transition-property: opacity, transform;
	transition-duration: 300ms, 500ms;
    transition-timing-function: ease-out, ease-in-out;
    transition-delay: 0, 0;
}
.hContainer{
		position: absolute;
		top: 0%;
		left: 0px;
		width: 100%;
		height: 100%;
		overflow: hidden;

		perspective: 1000px;
		perspective-origin: center;
		}	


.title{
	position: absolute;
	display: inline-flex;
	justify-content: center;
	height: 90px;
	width: auto;
    top: 2%;
    left: 0%;
    z-index: 20;
    opacity: 1;
	/* background-color: #343434; */
}
.hide {
  overflow: hidden;
}

.title-text {  

  transform: translateY(100%);
  opacity: 0;
  padding:0 30px 0 30px;
	/* transition-property: opacity, transform;
	transition-duration: 600ms, 600ms;
	transition-timing-function: ease-out, ease-out;
	transition-delay: 300ms, 3000ms; */

	transition: all 500ms ease-in-out 0s;
}

.title-text.on { 
  transform: translateY(0%);
  opacity:1;
  transition-property: opacity, transform;
  transition-duration: 2000ms, 2000ms;
  transition-timing-function: ease-out, ease-out;
  transition-delay: 1000ms, 0s;
  /* transition-delay: 4000ms, 3000ms; */

}


.embedItem{
	display: flex;
	justify-content: center;
	align-items: center;
	/* width: 100%;
	height: 100%; */
	overflow: hidden;
	/* background-color: #bdbaba; */

}


  /* //////////////////    #typed-strings{ */
/* .intro_text{
	display: inline; 
	z-index: 1000; 
	position: absolute;
	top: 800px;
	left: 40px;
	width: auto;
	height: auto;
	color: rgb(0, 47, 255);
	font-size: 2rem;
	opacity: .2;
}
.intro_text.on{
	opacity: 1;
} */


/* #intro_text-strings{  */    /* modding does nothing */
/* } */

/* #intro_text-strings_span{   modding limited */
 /*	color: rgb(0, 47, 255);
	font-size: 2rem;
} */

  .typed-cursor {
    opacity: 1;
	scale: (9);
    animation: blink 600ms steps(29,end) infinite;
	color: rgba(21, 127, 248, 0.959);
}
@keyframes blink {
    from { color: rgba(85, 153, 231, 0.75); }
    to { color: transparent; }
}



 /* Forien Languaged ==> */
  .myBox{
	z-index: 1000; 
	position: absolute;
	top: 100px;
	left: 40px;
	width: auto;
	height: auto;
	opacity: 0;
	/* background-color: rgba(0, 0, 255, 0.26); */
	transform: translateX(-100px);
	  transition-property: opacity, transform;
	  transition-duration: 2000ms, 2000ms;
	  transition-delay: 600ms, 200ms;
	  transition-timing-function: ease-out, ease-out;
}
 /* .myBox.on:lang(en)  {  */
.myBox.on  { 
	opacity: 1;
	transform: translateX(0px);
  }
 

.title-text2{  
	float: left;
	display: inline;
	position: relative;
	z-index: 1000;           
	top: 0px;
	left: 0px;
	opacity: 1;
	height: auto;
	width: auto;
	margin-right: 16px;
  }
  
.Boxf{
	float: left;
	display: inline;
	position: relative;
	height: auto;
	/* width: 950px; */
	/* background-color: rgba(255, 255, 255, 0.397); */
	white-space: nowrap;
	overflow: hidden;     
	letter-spacing: 2px;

}
.Boxf.on{
	animation: animateT2 9000ms  infinite ;
  }
  .Boxf2.on{
	animation: animateT3 9000ms  infinite ;
  }
  .Boxf3.on{
	animation: animateT4 9000ms  infinite ;
  }


  @keyframes animateT2{
	0%{width: 0;}
	20%{width: 250px;}
	25%{width: 250px;}
	35%{width: 0px;}
	100%{width: 0px;}
  }

  @keyframes animateT3{
	0%{width: 0;}
	35%{width:0px;}
	55%{width: 300px;}
	55%{width: 300px;}
	65%{width: 0px;}
	100%{width: 0px;}
  }

  @keyframes animateT4{
	0%{width: 0;}
	65%{width:0px;}
	85%{width: 300px;}
	90%{width: 300px;}
	100%{width: 0px;}
	100%{width: 0px;}
  }

  /* <== Forien Languaged */

  .myBox.on:lang(en){
	  opacity: 0;
  }
  #data_Title {
	opacity: 0;
}

/*    Lower Third Sub- Title SVG animation */
/* :lang(en) */
#data_Title {
	z-index: 5000;
	position: absolute;
	/* background-color:#ddd; */
	top: 80px;
	left: 0px;
	height: 90px;
	/* width: auto; */
	width: 500px;
	/* font-size: .6rem; */
	/* display:block;
	overflow: hidden; */
	/* transform: translate3d(0,0,0); */
	/* text-align: center; */
	opacity: .7;
	z-index: 5000;
	transition: opacity 600s linear 0;
}
/* #data_Title.on:lang(en) {
opacity: 1;} */

/* .A_New_Way_to{
	font-weight: bolder;
	stroke: rgb(47, 70, 114);
}
.Transact{
	font-weight: bolder;
	stroke: rgb(64, 88, 136);
}
.Save_Fees{
	font-weight: bolder;
	stroke: rgb(64, 88, 136);
}

.Invest{
	font-weight: bolder;
	stroke: rgb(64, 88, 136);
} */





/* .Vert_Block{

} */

/* .A_New_Way_to{ */
	/* color: darkkhaki; */
	/* font-style: oblique; */
/* } */





/*////////////////////////////		C 1  	BTCReviel	////////////////////////////////////////*/

.BTCReviel_Container{
	position: absolute;
	left: -50px;
	top: 50%;
	transform: translateY(-50%);
	width: 960px;
	height: 540px;
	opacity: 0;
	transition: opacity 500ms ease-in-out 0s;
	/* overflow: hidden; */

	 /* background-color: hsl(120, 53%, 34%, .1); */
	 /*clip-path: circle(40%);*/
	/* clip-path: polygon(0 0, 100% 0, 100% 100%,0 100%, 50% 50%);
	 margin-bottom: -10vw*/
	/*clip-path: url(#svgPath);*/

}

.BTCReviel_Container h2{
	font-family: 'Michroma', sans-serif;
}
		

.BTCReviel_Container.on {	
opacity: 1;
transition: opacity 700ms ease-in-out 500ms;
}




#callOut{
	z-index: 500;
	position: absolute;
	width: auto;
	height: 140px;
	top: 40px;
	left: 60px;
	/* scale: .5; */
	
	/* background-color: rgba(185, 33, 33, 0.281); */
}       
    
	#svg{
		position: relative;
		/* display: inline-block; */
		float: right;
		width: 170px;
		height: 102px;
		/* background-color: rgba(89, 0, 255, 0.281); */
	}
svg .svgLine{
	fill: none;
	stroke:#000;
	stroke-width: 2px;
	stroke-dasharray: 352;
	stroke-dashoffset: 352;
	/* animation: line0 2s ease-in-out forwards 0s; */
}

svg .svgLine.on{
		animation: lineX 2s ease-in-out forwards 1000ms;
	}

	@keyframes lineX{
		0%{stroke-dashoffset: 352;}
		10%{stroke-dashoffset: 310;}
		to{stroke-dashoffset: 0;}
	}

#lineText {
		position: relative;
		margin-right: 15px;
		float: left;
		white-space: nowrap;
		width: auto;
		height: auto;
		overflow: hidden;    
		font-family: 'consolas', monospace;  
		letter-spacing: 1px;
		opacity: 0;
		
	  }
	  
	  /* Animation */
#lineText.on{
		opacity: 1;
		/* background-color: hsla(0, 0%, 30%, 0.192); */
		animation: animateUnit 1000ms  forwards;
	  }
	  /* text animation */
	  @keyframes animateUnit{
		0%{width: 0;}
		/* 66%{width: 0;} */
		100%{width: 110px;}
	  }


	  .desc{
		position: absolute;
	}
		.desc p{
			font-size: 1em; 
			letter-spacing: 0px;
		}

			#lineDesc{
				top: 45px;
				transform: translateY(50px);
				 left: 0px;
				width: 120px;
				height: 90px;   
				opacity: 0;
				transition-property:  opacity, transform;
				transition-duration: 1000ms, 1000ms;
				transition-timing-function: ease-out;
				transition-delay: 0ms;
			}

			#lineDesc.on{
				opacity: 1;
				transition-delay: 1200ms;
				transform: translateY(0px);
				
			  }




#callOut_0{
	z-index: 500;
	position: absolute;
	width: 340px;
	height: 140px;
	top: 115px;
	left: 615px;
	/* scale: .5; */
	
	/* background-color: rgba(185, 33, 33, 0.281); */
}

#svg_0{
	position: relative;
	/* display: inline-block; */
	float: left;
	width: 170px;
	/* background-color: rgba(89, 0, 255, 0.281); */
}
svg .svgLine_0{
	fill: none;
	stroke:#000;
	stroke-width: 2px;
	stroke-dasharray: 375;
	stroke-dashoffset: 375;
	/* animation: line 2s ease-in-out forwards 0s; */
}

svg .svgLine_0.on{
		animation: line 2s ease-in-out forwards;
	}

	@keyframes line{
		to{stroke-dashoffset: 0;}
	}

#lineText_0 {
		position: relative;
		display: inline-block;
		margin-left: 15px;
		white-space: nowrap;
		width: auto;
		height: auto;
		overflow: hidden;    
		font-family: 'consolas', monospace;  
		letter-spacing: 1px;
		opacity: 0;
	  }
	  
	  /* Animation */
#lineText_0.on{
		opacity: 1;
		animation: animated-text 1700ms steps(3) forwards;
	  }
	  /* text animation */
	  @keyframes animated-text{
		0%{width: 0;}
		/* 66%{width: 0;} */
		100%{width: 90px;}
	  }


			#lineDesc_0{
				top: 45px;
				transform: translateY(50px);
				 left: 185px;
				width: 120px;
				height: 90px;   
				opacity: 0;
				transition-property:  opacity, transform;
				transition-duration: 1000ms, 1000ms;
				transition-timing-function: ease-out;
				transition-delay: 0ms;
			}

			#lineDesc_0.on{
				opacity: 1;
				transition-delay: 1900ms;
				transform: translateY(0px);
				
			  }

	  
	  /* cursor animations */
	  /* @keyframes animated-cursor{
		from{border-right-color: rgba(0,255,0,.75);}
		to{border-right-color: transparent;}
	  } */
	
	
/* #Layer_0 svg{
	z-index: 500;
	position: absolute;
	width: 340px;
	height: 70px;
	top: 500px;
	left: 380px;
} */

/* #lineText_0{
	position: absolute;
	top: 0px;
	right: 0px;
	height: auto;
	width: auto;
	color: transparent;
}
#lineText_0 h2{
	letter-spacing: 1px;
	font-family: consolas;
}
#lineText_0 h2::before{
	content: attr(data-text);
	position: absolute;
	color: rgb(17, 17, 17);
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	border-right: 1px solid #000;
	animation: type_0 1000ms steps(5) infinite;
	white-space: nowrap;
}
@keyframes type_0{
	0%{width:0;}
	50%{width:100%;}
	100%{width:0;}
} */

/* #lineText_0{
	position: absolute;
	top: 0px;
	right: 0px;
	height: auto;
	width: auto;
	color: transparent;
}
#lineText_0 h2{
	letter-spacing: 1px;
	font-family: consolas;
}
#lineText_0 h2::before{
	content: attr(data-text);
	position: absolute;
	color: rgb(17, 17, 17);
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	border-right: 1px solid #000;
	animation: type_0 1000ms steps(5) infinite;
	white-space: nowrap;
}
@keyframes type_0{
	0%{width:0;}
	50%{width:100%;}
	100%{width:0;}
} */



#callOut_1{		/* BTC */
	z-index: 500;
	position: absolute;
	width: 440px;
	height: 75px;
	top: 330px;
	left: 520px;
	/* scale: .5; */
	
	/* background-color: rgba(185, 33, 33, 0.281); */
}

#svg_1{
	position: relative;
	/* display: inline-block; */
	float: left;
	width: 260px;
	/* background-color: rgba(89, 0, 255, 0.281); */
}
svg .svgLine_1{
	fill: none;
	stroke:#000;
	stroke-width: 2px;
	stroke-dasharray: 375;
	stroke-dashoffset: 375;
	/* animation: line 2s ease-in-out forwards 0s; */
}

svg .svgLine_1.on{
		animation: line 2s ease-in-out forwards 0s;
	}

	@keyframes line{
		to{stroke-dashoffset: 0;}
	}

#lineText_1 {
		position: relative;
		display: inline-block;
		margin-left: 10px;
		/* bottom: 0px; */
		top: 35px;
		/* padding-top: 0px;
		margin-top: 0px; */
		/* border-right: solid 3px rgba(0,255,0,.75); */
		white-space: nowrap;
		width: auto;
		height: auto;
		overflow: hidden;    
		font-family: 'consolas', monospace;  
		letter-spacing: 1px;
		/* color: rgba(0, 0, 0, 0.7); */
		opacity: 0;
		/* transition-delay: 2s; */
	  }
	  
	  /* Animation */
#lineText_1.on{
		opacity: 1;
		/* background-color: hsla(0, 0%, 30%, 0.192); */
		animation: animated-text 1700ms steps(3) forwards;
	  }
	  /* text animation */
	  @keyframes animated-text{
		0%{width: 0;}
		66%{width: 0;}
		100%{width: 90px;}
	  }
	  
	  /* cursor animations */
	  
	  /* @keyframes animated-cursor{
		from{border-right-color: rgba(0,255,0,.75);}
		to{border-right-color: transparent;}
	  } */

	#lineDesc_1{
		position: absolute;
		top: 80px;
		transform: translateY(50px);
		 left: 275px;
		width: 120px;
		height: 90px;   
		opacity: 0;
		transition-property:  opacity, transform;
		transition-duration: 1000ms, 1000ms;
		transition-timing-function: ease-out;
		transition-delay: 0ms;
	}

	#lineDesc_1.on{
		opacity: 1;
		transition-delay: 1900ms;
		transform: translateY(0px);
		
	  }










.lineText_1{
	position: absolute;
	top: -250px;
	right: 0px;
	height: 200px;
	width: 900px;
	color: transparent;
	background-color: rgb(226, 97, 215, .3);
}
.lineText_1 p{
	position: absolute;
	top: 50%;
	left: 50%;
	/* text-transform: uppercase; */
	font-family: consolas;
	/* letter-spacing: 5px; */
	margin: 0;
	padding: 0;
}
.lineText_1 p::before{
	content: attr(data-text);
	position: absolute;
	color: rgb(17, 17, 17);
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	border-right: 1px solid #000;
	animation: type_1 10s steps(17) infinite;
	white-space: nowrap;
}
@keyframes type_1{
	0%{width:0;}
	50%{width:100%;}
	100%{width:0;}
}



#BTCReviel{
		/* display: inline-flex;
		justify-content: center;
		align-content: center; */
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 700px;
		height: 412px;
		/* opacity: 0;	 */
		/* transition-property:  opacity;
		transition-duration: 1900ms;
		transition-timing-function: ease-in-out;
		transition-delay: 2500ms; */
		transition: opacity 500ms ease-in-out 0s;
		
	}
	
/* #BTCReviel.on {	
	opacity: 1;
	transition: opacity 700ms ease-in-out 500ms;
} */

.textBox1Wrap{
	position: absolute;
	right: 10px;
	top: 50px;
	width: 450px;
	height: 750px;
	/* background-color: #72ee0d4b; */
}

.textBox1{
	position: absolute;
	opacity: 0;
	/* right: 10px;
	top: 175px; */
	transform: translateY(75px);
	width: auto;
	height: auto;
	padding: 10px;
	transition-property: opacity, transform;
	transition-duration: 0ms, 0ms;
	transition-timing-function: ease-out, ease-out;
	transition-delay: 1s;

	/* background-color: #4d4d4d44; */
}

.textBox1 h1{
padding: 10px;
}

.textBox1.on{
	opacity: 1; 
	transform: translateY(0px);
	transition-property: opacity, transform;
	transition-duration: 900ms, 600ms;
	transition-timing-function: ease-out, ease-out;
	transition-delay: 1s;


}

.tBox1_A {
	position: relative;
	top: 0;
	height: auto;
	/* background-color: #a0cc5850; */
	/* float: left; */
	/* background-color: #d30d0d6b; */
}
.tBox1_A h1{
	margin-top: 0;
}
.tBox1_B {
	position:relative;
	/* background-color: #c7b9b950; */
	height: auto;
	bottom: 0px;
	/* top: -150px; */
	transform: translateY(-100px);
	transition: transform 0s ease-in-out 1s;
	/* background-color: #0d5bf58a; */
}


.tBox1_B.on{
	 transform: translateY(-30px);
	 transition: transform 1s ease-in-out 2500ms;
	/* transition-property: opacity, transform;
	transition-duration: 900ms, 200ms;
	transition-timing-function: ease-out, ease-out;
	transition-delay: 500ms, 0s;
	 transition: opacity 700ms ease-in-out 500ms;  */
	 
} 


#keyBox{
	position: relative;
	display: block;
	width: 250px;
	height: auto;
	transform-origin: top;
	transition: all 1s ease-out 2s;
	background-color: #112E6A;
}

#key{
	display: block;
	z-index: 5000;
	position: relative;
	opacity: 0;
	 top: -15px;
	left: 320px;
	width: 160px; 
	transform-origin: left;
	transition-property: opacity, transform;
	transition-duration: 0s, 0s;
	transition-timing-function: ease-out;
	transition-delay: 0s, 0s;
}
#key.on{
	transform-origin: left;
	transition-property: opacity, transform;
	transition-duration: 1s, 1s;
	transition-timing-function: ease-out;
	transition-delay: 3s, 3s;
	transform: translateX(-120px);
	opacity: 1;
}












/* ////////////////////////////////  Pincer etc.. NOT USED  ///////////////////////////////// */



#rando{
	z-index: 1000;
	position: absolute;
	height: 100px;
	width: 100px;
	background-color: rgb(104, 87, 87);
	bottom: 0px;
	left: 45%;
	opacity: 0;
}
#rando.on{
	opacity: 1;
}


.pincerBox{
	position: absolute;
	top: 75px; left: 60px;
	z-index: 50;
	width: 500px;
	height: 400px;
	/* background-color: green;	 */
}

.pincer{
 	position: absolute;
	/* top: 75px; left: 60px;*/
	z-index: 50;
	width: 500px;
	height: 400px; 
	/* transition: 0.5s; */
	/* background-color: green; */
	opacity: 0;
	animation: float 3s ease-in-out infinite;
	}
	@keyframes float {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0px);
	}
	}
.pincer.on{
	opacity: 1;
}

.pincer_img{
	z-index: 25;
	width: 500px;
	height: 400px;
	/* background: url(/images/Circuit-Board.gif); */
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 1;
	transition: transform 1500ms ease-in-out 0ms;
}

.pincer_img.on{      /* computer board drops */
	transform: translate(0, 450px);
	transition: transform 1500ms ease-in-out 0ms;
}
.pincer_img_Wrap{
	opacity: 0;
	transition: opacity 500ms ease-in-out 0ms;
}
.pincer_img_Wrap.vsbl{
	opacity: 1;
	transition: opacity 300ms ease-in-out 1500ms;
}

.pincer.on{
	opacity: 1;
}
.pincer.lineOn::before{                         
	content: "";
	position: absolute;
	height: 100%;
	right: 0rem;
	width: 900px;
	border-top: 10px solid #000;
	border-bottom: 10px solid #000;
	transform: scaleX(0);
	z-index: -1;
	transform-origin: left;
  	animation: theLine 1500ms ease-out 500ms;
  	opacity: 1;
	}
@keyframes theLine {
  0%{
    transform: scaleX(0);
  }
  40% {
    transform: scaleX(1);
  }  
    80% {
    transform: scaleX(1);
  }  
  100% {
    transform: scaleX(0);
  }
}
.pincer.lineOn::after{
	content: "";
	position: absolute;
	top: 7%;
	left: 0;
	width: 100%;
	height: 90%;
	transform: scaleY(0);
	opacity: 1;
	transform-origin: bottom;
	z-index: 20;
	background: #000;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
  transition-delay: 1300ms;
   animation: theCover 1.5s ease-out 1100ms;
}
@keyframes theCover {
0%{
    transform-origin:bottom; transform: scaleY(0);
  }
  
30% {
    transform-origin:bottom; transform: scaleY(1);
  }

31%{
    transform-origin:top; transform: scaleY(1);
  } 
60%{
    transform-origin:top; transform: scaleY(1);
  }
100% {
   transform-origin:top; transform: scaleY(0);
  }
}