body{
  background:#000;
  font:18px "Century Gothic", Helvetica, sans-serif; 
  color:#000; 
  line-height:25px;
}
p {padding-left:5px;padding-right:5px; max-width:700px;}
h1{padding:10px; font:26px "Century Gothic", Helvetica, sans-serif; z-index:100; background:black; width:100%; box-shadow: 0px 0px 7px #111; -moz-box-shadow: 0px 0px  7px #111; -webkit-box-shadow: 0px 0px 7px #111;}

.wrapper{
  width:100%;
  height:auto;
  overflow:hidden;
}

.colLeft{padding:10px; min-width:200px; float:left; width:48%}
.colRight{padding:10px; min-width:200px; float:left; width:48%}

#silhouette1{width:200px; bottom:0; right:-200px; position:fixed;}
#silhouette2{width:200px; bottom:0; right:-200px; position:fixed;}
#silContainer{width:200px; bottom:0; right:0; position:fixed; height:0; overflow:hidden; z-index:10}

#title0{opacity:0; position:fixed; width:100%; bottom:0; left:45px; padding:2px !important;bottom:0 !important; color:white!important; background:black;z-index:30}
#iAm{position:absolute; color:white; opacity:1;  text-wrap:none; top:0px; left:0px;background:black; width:100%}
.title1{-webkit-transition:all 1s ease 1s; transition:all 1s ease 1s; color:orange; left:75px;}
.title2{-webkit-transition:all 1s ease 2s; transition:all 1s ease 2s; color:yellow; left:330px;}
.title3{-webkit-transition:all 1s ease 3s; transition:all 1s ease 3s; color:lime; left:465px;}
.title4{-webkit-transition:all 1s ease 4s; transition:all 1s ease 4s; color:cyan; left:585px;}
.title1, .title2, .title3, .title4{position:absolute; opacity:0; text-wrap:none; top:10px;
-webkit-transform:translate3D(0,-50px,0);
transform:translate3D(0,-50px,0);}
#titleContact{color:white; padding:10px; position:absolute; z-index:10; text-wrap:none;}

.imgBlur{height:100%; position:absolute; z-index:-10; opacity:.6; -webkit-filter: blur(10px);}
#introP{color:black; padding:60px 10px 10px 10px; left:100%; text-indent:2em;}

#skillbtn{cursor:default; color:black; background:white; margin:5px 0 5px 5px; width:110px; -webkit-transition:all .3s ease; transition:all .3s ease;}
#skillbtn:hover{color:#FFF; background:black;}

#skillset{width:125px; height:0; background:none; overflow:hidden}
#skillset > p{color:black; background:white; margin:5px 0 5px 5px;}

#s1{width:140px}
#s2{width:165px}
#s3{width:190px}
#s4{width:215px}
#s5{width:240px}

#navbar{
	z-index: 20; 
	position:fixed; 
	height:100%;
	min-width:45px;
	overflow:visible;
	background:black;
	left:0;
	top:0;
	-webkit-transition:all .5s ease;
	transition:all .5s ease;
	-webkit-transform: translate(0,-100%);
	transform: translate(0,-100%);
}
nav{ 
  -webkit-backface-visibility: hidden;
  z-index: 21; 
  position: fixed; 
  width: 20px;
  top:0;
  right:0;
  left:0;
  transition: all 0.3s ease; 
  -webkit-transition: all 0.3s ease;
  transform:translateY(-480px);
  -webkit-transform:translateY(-480px);
}

nav li{ 
  height: 20px;
  margin: 20px 0px 0px -40px;
  list-style: none;
}

nav a{ 
  display: block; 
  width: 20px; 
  height: 20px;
  border: 3px solid white; 
  text-indent: -9999px;
  background-color: #000; 
  transition: all 0.3s ease; 
  -webkit-transition: all 0.3s ease; 
  position: relative;
  left: 10px;
  top: 0px;
}
nav a:hover, nav a.active{ background-color: #fff;}

#menuIcon{
	display:none;
	position:fixed; 
	z-index:30; 
	top: -50px; 
	left:13px;
	-webkit-transition:all .5s ease;
	transition:all .5s ease;
	}

.tag{
	display:block;
	opacity:0;
	height:26px;
	width:125px;
	background:black;
	position:absolute;
	margin-top:-29px;
	left:-193px;
	z-index:-1;
	transition:all .5s;
	-webkit-transition:all .5s;
	text-indent:2em;
	color:white;
}
.tag > p{position:fixed; margin-top:0px;}


.red { background-color: hsl(0,80%,70%); }
.orange { background-color: hsl(30,50%,70%); }
.yellow { background-color: hsl(60,50%,70%); }
.leaf { background-color: hsl(80,100%,70%); }
.lime { background-color: hsl(90,50%,70%); }
.swamp { background-color: hsl(120,50%,70%); }
.green { background-color: hsl(150,50%,70%); }
.cyan { background-color: hsl(180,50%,70%); }
.delmar{ background-color: hsl(200,100%,70%); }
.royal { background-color: hsl(210,100%,55%); }
.blue { background-color: hsl(210,50%,70%); }
.lavender { background-color: hsl(240,50%,70%); }
.hotpink { background-color: hsl(300,90%,70%); }
.black { background-color: #000; }
.gray { background-color: #666; }
.white { background-color: #FFF; }

section{height: auto; overflow:hidden; opacity:0; margin-left:45px;
-webkit-transition:all .5s ease;
transition:all .5s ease;
-webkit-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);}

/* ============================= forms ============================= */

#ContactForm{ padding-top:5px; position: relative; padding-bottom:5px}
#ContactForm .wrapper{ overflow:inherit; min-height:43px;}
#ContactForm .success{ display:none; position:relative; z-index:2; background:none; color:#FFF; top:10px; left:0; right:0; color:#000}
#ContactForm label{ position:relative;min-height:37px; display: inline-block; z-index:1}
#ContactForm .message{ height:100px;}
#ContactForm  span{ display:block}
#ContactForm .error, #ContactForm .empty{ font-size:10px; color:#fff; line-height:14px; display:none; width:100%}
#ContactForm a{ float:right;}
#ContactForm .input { margin:0;width:240px; height:15px; background: white; padding:10px 8px;color:#666; font:16px "Century Gothic", Helvetica, sans-serif;}
#ContactForm textarea { overflow: auto; margin:0;width:240px; height:75px; background: white; padding:10px 8px;color:#666; font:16px "Century Gothic", Helvetica, sans-serif;}

#bg{ background:#000; position:fixed; width:100%; height:100%; z-index:100;}

.button1{ display:inline-block; position:absolute; top:200px; float:left; box-shadow: 1px 1px 4px #111; -moz-box-shadow: 1px 1px 4px #111; -webkit-box-shadow: 1px 1px 4px #111; transition:all .5s; -webkit-transition:all .5s; -moz-transition:all .5s;}
.button1 span{
	display: block;
	border: 1px solid #FFF;
	position: relative;
	background: #000;
	line-height: 35px;
	color: #fff;
	text-transform: uppercase;
}
.button1 strong{
	font-weight: normal;
/*	background: url(../images/marker_1.gif) right 14px no-repeat; */
	display: block;
	padding-right: 10px;
	padding-left: 10px;
}
.button1 .active{ background:#333; border:2px solid #FFF; color:#fff; position:absolute; margin-left:-1px; margin-top:-38px}
.button1 .active strong{}

/* ===================================== LOADING SCREEN =================================== */
.spinner {
  left:50%;
  top:50%;
  margin-left:-19px;
  margin-top:-38px;
  position: absolute;
  width: 38px;
  height: 38px;
  opacity: 0;
  -webkit-transform: rotate(180deg);
  -moz-animation: orbit 5s infinite;
  -webkit-animation: orbit 5s infinite;
  -ms-animation: orbit 5s infinite;
  -o-animation: orbit 5s infinite;
  animation: orbit 5s infinite;
  border: solid 1px red;
}
@keyframes orbit {
  0% {opacity: 1;z-index:99;transform: rotate(180deg);border-color: red;}
 17% {opacity: 1;transform: rotate(360deg);origin:0%;border-color: magenta;}
 34% {opacity: 1;transform: rotate(540deg);origin:7%;border-color: blue;}
 51% {opacity: 1;transform: rotate(720deg);origin:30%;border-color: green;}
 68% {opacity: 1;transform: rotate(900deg);origin:39%;border-color: yellow;}
 85% {opacity: 1;transform: rotate(1080deg);border-color: orange;}
100% {opacity: 1;z-index:99;transform: rotate(1260deg);border-color: red;}
}
@-webkit-keyframes orbit {
  0% {opacity: 1;z-index:99;-webkit-transform: rotate(180deg);border-color: red;}
 17% {opacity: 1;-webkit-transform: rotate(360deg);-webkit-origin:0%;border-color: magenta;}
 34% {opacity: 1;-webkit-transform: rotate(540deg);-webkit-origin:7%;border-color: blue;}
 51% {opacity: 1;-webkit-transform: rotate(720deg);-webkit-origin:30%;border-color: green;}
 68% {opacity: 1;-webkit-transform: rotate(900deg);-webkit-origin:39%;border-color: yellow;}
 85% {opacity: 1;-webkit-transform: rotate(1080deg);border-color: orange;}
100% {opacity: 1;z-index:99;-webkit-transform: rotate(1260deg);border-color: red;}
}
@-moz-keyframes orbit {
  0% {opacity: 1;z-index:99;-moz-transform: rotate(180deg);border-color: red;}
 17% {opacity: 1;-moz-transform: rotate(360deg);-moz-origin:0%;border-color: magenta;}
 34% {opacity: 1;-moz-transform: rotate(540deg);-moz-origin:7%;border-color: blue;}
 51% {opacity: 1;-moz-transform: rotate(720deg);-moz-origin:30%;border-color: green;}
 68% {opacity: 1;-moz-transform: rotate(900deg);-moz-origin:39%;border-color: yellow;}
 85% {opacity: 1;-moz-transform: rotate(1080deg);border-color: orange;}
100% {opacity: 1;z-index:99;-moz-transform: rotate(1260deg);border-color: red;}
}