.transition-fade {
	opacity: 1;
	transition: 500ms;
	transform: translateX(0);
	transform:translateY(0);
	transform-origin: top;
	
}



.transition-left{
	opacity: 1;
	transition: 500ms;
	transform: translateX(0);
	transform:translateY(0);
}


.hidden{
	display:none;
}
.transition-right{
	opacity: 1;
	transition: 1000ms;
	transform: translateX(0);
	transform:translateY(0);
}

html.is-animating .transition-fade{
	opacity:0;
	transform: translateY(-100px);
	
}
html.is-animating .transition-right{
	opacity:0;
	transform: translateX(100px);
	
}

html.is-animating .transition-left{
opacity:0;
transform: translateX(-100px);
}

body {
	background-color: black;
	background-image:
	 linear-gradient(0deg, rgba(25,25,25,25.8), rgba(5,0,29,0.69)),
	  url(background.jpeg)  ;

	 background-size:cover;
	background-attachment: fixed;
	margin:0px;

	background-repeat:  no-repeat;
    background-position: center ;              
	
	
}




.navbar .navbar-nav li a{
	color:white;
}

.navbar {
  margin-left: 100px;
  margin-right: 100px;
  font-size: 20px;
}

.navbar .navbar-brand {
	  font-size: 25px;
}

.text{

	text-align: center;
	font-size: 8em;
	font-family: 'Open Sans', sans-serif;
	font-weight: lighter;
	color: lightgrey;
	
	margin-bottom:30px;
	margin-top:50px;

	

	text-shadow: 0px 4px 3px rgba(0,0,0,0.5),
					0px 8px 13px rgba(0,0,0,0.7),
					0px 18px 23px rgba(0,0,0,0.7);
}

.default{
	color:white;
}
				


.subintro {
	text-align: center;
	font-size: 2em;
	font-family: 'Open Sans', sans-serif;
	font-weight: lighter;
	color: lightgrey;
	margin-top:0px;


	text-shadow: 0px 4px 3px rgba(0,0,0,0.5),
					0px 8px 13px rgba(0,0,0,0.7),
					0px 18px 23px rgba(0,0,0,0.7);
	margin-bottom: 55px;
}


.twobuttons {
	text-align:center;
}

.myButton:link{
	background-color:mediumspringgreen;
	border-radius:28px;
	border:2px solid black;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-family: 'Open Sans', sans-serif;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-right: 25px;
	margin-left:25px;

	
}
.myButton:hover {
	background-color:lightgreen;
	color:grey;
	text-decoration: none;
}
.myButton:active {
	color:black;
	position:relative;
	top:1px;
}

.myButton:visited{
	color:black;
}

#engineer{
color:dimgrey;
}


#developer{

	color:darkslategrey;
}

#else{

	color:darkcyan;
}

.aboutme{
	text-align:right;
}


.jumbotron {
	height:500px;
	opacity:0.8;
}

.link{
	text-decoration:none;
	color:inherit;
}



.skillsheaders{
	color:lightseagreen;
	
}



@media (max-width:400px){

.text{

	text-align: center;
	font-size: 3em;
	font-family: 'Open Sans', sans-serif;
	font-weight: lighter;
	color: lightgrey;
	
	margin-bottom:30px;
	margin-top:50px;

	

	text-shadow: 0px 4px 3px rgba(0,0,0,0.5),
					0px 8px 13px rgba(0,0,0,0.7),
					0px 18px 23px rgba(0,0,0,0.7);
}


.myButton:link{
	background-color:mediumspringgreen;
	border-radius:28px;
	border:2px solid black;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-family: 'Open Sans', sans-serif;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	margin-right: 25px;
	margin-left:25px;
	margin-bottom:20px;	
}

.noimage{
	display:none;
}
.jumbotron h1{
	font-size:20px;
	
}

}