.terminal-container{

}

.terminal *{
	margin: 0;
	padding:0;
	
}

.terminal,
.terminal button{
	font-family:VT323, monospace;
	font-size: 1.1em;
	color:#7cb4fc;
	text-align: left;
}

.terminal{

	position: relative;
	overflow-x: hidden;
	overflow-y: auto;

	-webkit-backface-visibility: hidden;

	padding: 20px 40px;
	border-radius: 0px;

    /* background: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%,rgba(0,19,25,0.8) 80%, rgba(0,0,0,0.8) 100%); */
    /* background: rgba(255,255,255,0.05); */
 
   /*  text-shadow: #77c3dd 0 0 16px; */

}

.terminal.turn-on{
	animation: _turn_on 5s 1;
}

.terminal.turn-off{
	animation: _turn_off 0.35s 1;
}

@keyframes _turn_on {
	0% { transform:matrix(1,0,0,1,0,0);	}
	1% { transform:matrix(1,0,-9,1,0,0);}
	2% { transform:matrix(1,0,-9,1.4,0,0);}
	3% { transform:matrix(1,0,0,1,0,0);	}
	100% { transform:matrix(1,0,0,1,0,0);	}
}

@keyframes _turn_off {
	0% { transform:matrix(1,0,0,1,0,0);	}
	33% { transform:matrix(1,0,0,1,0,0);	}
	66% { transform:matrix(1,0,-9,1.4,0,0);}
	100% { transform:matrix(1,0,0,1,0,0);	}
}



.terminal:before,
.terminal:after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	display: block;

	z-index: 1;
	pointer-events: none;
}
.terminal:before{
	opacity: 0.2;
	background-image:url(../img/space/terminal-background.png), 
					linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,.5) 50%,rgba(255,255,255,0.5) 51%,rgba(255,0,0,0) 100%);
}

.terminal:after{
	opacity: 0.35;

    height : 50px;
	
	background:#7cb4fc;
    opacity : .02;

       top: auto;
       bottom: 0;

	animation: vline 2.5s linear infinite;

}

@keyframes vline {
	0%   { bottom: 0%;}
	100% { bottom: 200%;}
}









.terminal button,
.terminal a{
	background-color: transparent;
	border: none;
}

.terminal button:hover,
.terminal a:hover{
	background-color:#7cb4fc;
	color: #000;
	text-decoration: none;
}

.terminal button:after{
	content:"\25B6";
}