@charset "utf-8";
.container {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.center {
  position:fixed;
  left: 50%;
  top: 30%;
  height: 298px;
  width: 706px;
  margin:-150px 0 0 -350px;
  text-align:center;
}

.image {
  position:relative;
  display: inline-block;
  font-family: Consolas, monospace;
  font-size:24px;
}


.bottom {
  position: relative;
  display: inline-block;
  font-family: Consolas, monospace;
  font-size:24px;
}

@keyframes opactiyJob{
    from{ opacity:1 }
    to {  opacity:0 }
}

@keyframes opactiyProject {
  from{ opacity:1 }
  to {  opacity:0 }
}


@-moz-keyframes typing1 /* Firefox */
{
  from  { width:  0px }
  to  { opacity: 1; border: none; width:  630px }
}

@-webkit-keyframes typing1 /* Safari and Chrome */
{
  from  { width:  0px }
  to  { opacity: 1; border: none; width:  630px }
}
@-o-keyframes typing1 /* Opera */
{
  from  { width:  0px }
  to  { opacity: 1; border: none; width:  630px }
}

@keyframes typing1 {
  from  { width:  0px }
  to  { opacity: 1; border: none; width:  630px }
}

@-moz-keyframes typing2 /* Firefox */
{
  from  { opacity: 1; width:  0px }
  to  { opacity: 1; width:  357px }
}

@-webkit-keyframes typing2 /* Safari and Chrome */
{
  from  { opacity: 1; width:  0px }
  to  { opacity: 1; width:  357px }
}
@-o-keyframes typing2 /* Opera */
{
  from  { opacity: 1; width:  0px }
  to  {opacity: 1;  width:  357px }
}

@keyframes typing2 {
  from  { opacity: 1; width:  0px }
  to  { opacity: 1; width:  357px }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black }
}


@-moz-keyframes  blink-caret /* Firefox */
{
 from, to { border-color: transparent }
  50% { border-color: black }
}

@-webkit-keyframes  blink-caret /* Safari and Chrome */
{
 from, to { border-color: transparent }
  50% { border-color: black }
}
@-o-keyframes  blink-caret /* Opera */
{
 from, to { border-color: transparent }
  50% { border-color: black }
}



@keyframes slideColis {
    from { -webkit-transform: translateX(0%); }
    to { -webkit-transform: translateX(-100%); }
}


.bottom p#one {
	white-space: nowrap;
	overflow: hidden;
	border-right: .1em solid black;
	animation: typing1 3s steps(45, end);
	-moz-animation: typing1 3s steps(45, end);
	-webkit-animation: typing1 3s steps(45, end);
	-o-animation: typing1 3s steps(45, end);
	position: inherit;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.bottom p#two {
	white-space: nowrap;
	overflow: hidden;
	border-right: .1em solid black;
	animation: typing2 3s steps(45, end),  blink-caret 1s step-end infinite;
	-moz-animation: typing2 3s steps(45, end),  blink-caret 1s step-end infinite;
	-webkit-animation: typing2 3s steps(45, end),  blink-caret 1s step-end infinite;
	-o-animation: typing2 3s steps(45, end),  blink-caret 1s step-end infinite;
	position: inherit;
	opacity: 0;
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
   text-align: center;
   padding-left: 120px;
}

.footer {
	position: absolute;
	 left: 45%;
 	 top: 90%;
}

#fb {
	 left: 50%;
 	 top: 80%;
}


.aboutBtn:hover ~ .center  .bottom {
 	transform: translate(-300%,0);
    -webkit-transform: translate(-300%,0); /** Chrome & Safari **/
    -o-transform: translate(-300%,0); /** Opera **/
    -moz-transform: translate(-300%,0); /** Firefox **/
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/


}



.aboutBtn ~ .center  .bottom {
 	transform: translate(0%,0);
    -webkit-transform: translate(0%,0); /** Chrome & Safari **/
    -o-transform: translate(0%,0); /** Opera **/
    -moz-transform: translate(0%,0); /** Firefox **/
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/

}

.aboutBtn:hover ~ .center .about {
 	transform: translate(-90%,0);
    -webkit-transform: translate(-90%,0); /** Chrome & Safari **/
    -o-transform: translate(-90%,0); /** Opera **/
    -moz-transform: translate(-90%,0); /** Firefox **/
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/

}

.aboutBtn ~ .center .about {
 	transform: translate(110%,0);
    -webkit-transform: translate(110%,0); /** Chrome & Safari **/
    -o-transform: translate(110%,0); /** Opera **/
    -moz-transform: translate(110%,0); /** Firefox **/
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/

	transition-delay: 3s;
    -webkit-transition-delay: 3s; /** Chrome & Safari **/
    -moz-transition-delay: 3s; /** Firefox **/
    -o-transition-delay: 3s; /** Opera **/
}

.about {
	font-family: Consolas, monospace;
    font-size:18px;
	text-align:left;
	position: relative;
	overflow: hidden;
	bottom: 50%;
	left: 110%;
	height:380px;
	width: 800px;
	line-height:98%;
    /*
	display: inline-block;
    */
}

.projectBtn:hover ~ .center .project {
 	transform: translate(-90%,0);
    -webkit-transform: translate(-90%,0); /** Chrome & Safari **/
    -o-transform: translate(-90%,0); /** Opera **/
    -moz-transform: translate(-90%,0); /** Firefox **/
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/

}

.projectBtn ~ .center .project {
 	transform: translate(110%,0);
    -webkit-transform: translate(110%,0); /** Chrome & Safari **/
    -o-transform: translate(110%,0); /** Opera **/
    -moz-transform: translate(110%,0); /** Firefox **/
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/

	transition-delay: 3s;
    -webkit-transition-delay: 3s; /** Chrome & Safari **/
    -moz-transition-delay: 3s; /** Firefox **/
    -o-transition-delay: 3s; /** Opera **/

}

.projectBtn:hover ~ .center .bottom {
 	transform: translate(-300%,0);
    -webkit-transform: translate(-300%,0); /** Chrome & Safari **/
    -o-transform: translate(-300%,0); /** Opera **/
    -moz-transform: translate(-300%,0); /** Firefox **/
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/

}



.projectBtn ~ .center .bottom {
 	transform: translate(0%,0);
    -webkit-transform: translate(0%,0); /** Chrome & Safari **/
    -o-transform: translate(0%,0); /** Opera **/
    -moz-transform: translate(0%,0); /** Firefox **/
    transition: all 5s ease-in-out;
    -webkit-transition: all 5s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 5s ease-in-out; /** Firefox **/
    -o-transition: all 5s ease-in-out; /** Opera **/

}

.job {
    font-family: Consolas, monospace;
    font-size:20px;
    text-align:center;
    position: relative;
    overflow: hidden;
    bottom: 190%;
    left: 110%;
    height:180px;
    width: 800px;
}
.jobBtn {
    z-index:1;
    position: absolute;
    font-size: 2.1em;
    bottom: 80px;
    right: 10px;
    font-family: sans-serif, "Helvetica Neue", Helvetica, Arial;
    font-weight: 100;
    line-height: 2.1;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);

    opacity: 0.3;
    transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -webkit-transition: opacity 3s ease-in-out;

}

.project {
	font-family: Consolas, monospace;
    font-size:20px;
	text-align:left;
	position: relative;
	overflow: hidden;
	bottom: 140%;
	left: 110%;
	height:180px;
	width: 800px;
}

.projectBtn {
	top: 10px;
	left: 0;
	position: absolute;
	white-space: nowrap;
	width:10%;
    height:10%;
	//border-radius: 50px;
//-moz-border-radius: 50px;
//-webkit-border-radius: 50px;
//border: 1px solid #000000;
text-align:center;
  font-family: Consolas, monospace;
  font-size:24px;

    opacity: 0.3;
   transition: opacity 3s ease-in-out;
   -moz-transition: opacity 3s ease-in-out;
   -webkit-transition: opacity 3s ease-in-out;

}


.aboutBtn {
	float:left;
	top: 10;
	right: 0;
	position: absolute;
	white-space: nowrap;
	width: 10%;
    height: 10%;
//border-radius: 50px;
//-moz-border-radius: 50px;
//-webkit-border-radius: 50px;
//border: 1px solid #000000;
text-align:center;
  font-family: Consolas, monospace;
  font-size:24px;

  opacity: 0.3;
   transition: opacity 3s ease-in-out;
   -moz-transition: opacity 3s ease-in-out;
   -webkit-transition: opacity 3s ease-in-out;



}

.aboutBtn:hover {
	//background:#999;
	opacity: 1;
}

.projectBtn:hover {
	//background:#999;
	opacity: 1;
}

.jobBtn:hover {
    opacity: 1;
}


.jobBtn:hover ~ .center .job {
    transform: translate(-100%,0);
    -webkit-transform: translate(-100%,0); /** Chrome & Safari **/
    -o-transform: translate(-100%,0); /** Opera **/
    -moz-transform: translate(-100%,0); /** Firefox **/
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/

}

.jobBtn ~ .center .job {
    transform: translate(110%,0);
    -webkit-transform: translate(110%,0); /** Chrome & Safari **/
    -o-transform: translate(110%,0); /** Opera **/
    -moz-transform: translate(110%,0); /** Firefox **/
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/

    transition-delay: 3s;
    -webkit-transition-delay: 3s; /** Chrome & Safari **/
    -moz-transition-delay: 3s; /** Firefox **/
    -o-transition-delay: 3s; /** Opera **/

}


.corner-triangle:hover ~ .center .job {
    transform: translate(-100%,0);
    -webkit-transform: translate(-100%,0); /** Chrome & Safari **/
    -o-transform: translate(-100%,0); /** Opera **/
    -moz-transform: translate(-100%,0); /** Firefox **/
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/

}

.corner-triangle ~ .center .job {
    transform: translate(110%,0);
    -webkit-transform: translate(110%,0); /** Chrome & Safari **/
    -o-transform: translate(110%,0); /** Opera **/
    -moz-transform: translate(110%,0); /** Firefox **/
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/

    transition-delay: 3s;
    -webkit-transition-delay: 3s; /** Chrome & Safari **/
    -moz-transition-delay: 3s; /** Firefox **/
    -o-transition-delay: 3s; /** Opera **/

}

body {
  overflow: hidden;
}

#corner-triangle {
    display: block;
    width: 100px;
    height: 100px;
    border-style: solid;
    border-width: 0 0 200px 200px;
    border-color: transparent transparent #da0039 transparent;
    position: absolute;
    bottom: 0;
    right: -100px;
    z-index: 0;
    color: white;
    text-shadow: 0 0 25px 9px #fff;
    -webkit-filter: drop-shadow(0 1px 9px #000000);
    filter: drop-shadow(0 1px 9px #000000);
}