/* master */
html {
	-webkit-font-smoothing: antialiased;
}
body { margin:0;padding:0;
height:100%;
background: rgb(0,0,0);
/*
background:url(images/fan1.png) no-repeat 0vw 10vh fixed, rgb(0,0,0);
background-size:cover;
*/
}
a {color:rgba(150,150,150,1)}
h2  {
font:7vh 'Nova Square',san-serif;
margin:0;padding:0;
color:rgba(200,200,200,1);
}
h3 {
font:4vh 'Nova Square',san-serif;
margin:0;padding:0;
}
h1 {
position:fixed;
top:1vh;
left:20vw;
z-index:70;
margin:0 0 0 -7vw;
font:17vh 'Cinzel Decorative',san-serif;
color:rgba(200,200,200,.6);
text-shadow: 0 0 10px #000;
}
#backgroundvideo {
position:fixed;
margin:0;
height:100vh;
top:0;
left:0;
z-index:-20;
opacity:.3;
}
#mask {
position:fixed;
z-index:5;
top:-6vh;
margin:0 auto;
height:29vh;
width:120%;
/* box gradient */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 1%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(1%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
copy
}
p {
font:.9em avant garde, helvetica, aerial, san-serif;
}
/* begin swirly */
#swirlcontainer {
margin:0 0 0 -10vw;padding:0;
width:50vw;height:50vh;
position:fixed;
display:block;
z-index:10;
top:10px;
left:-1vw;
opacity:.2;
}
#cheese {
width:100%;height:100%;
position:absolute;
z-index:20;
top:0;
left:0;
    background:url("images/swirly1test1.png") no-repeat center;
	-webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
      -moz-animation:slidein 21s linear infinite;
      -webkit-animation:slidein 21s linear infinite;
    }
    @-moz-keyframes slidein {
      from {
        margin-left:0%;
      }
     60% {
        margin-left:0%;
       transform:rotate(1440deg);
      }
      75% {
        margin-left:0%;
       transform:rotate(360deg);
      }
      to {
        margin-left:0%;
      }
    }
    @-webkit-keyframes slidein {
      from {
        margin-left:0%;
      }
     60% {
        font-size:300%;
        margin-left:0%;
       transform:rotate(1440deg);
      }
      75% {
        font-size:300%;
        margin-left:0%;
       transform:rotate(360deg);
      }
      to {
        margin-left:0%;
      }
    }

#cheese2 {
width:100%;height:100%;
position:absolute;
z-index:21;
top:0;
left:0;
    background:url("images/swirly1test2.png") no-repeat center center ;
	-webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
      -moz-animation:second 5s infinite;
      -webkit-animation:second 5s infinite;
    }
    @-moz-keyframes second {
      from {
        margin-left:0%;
      }
     40% {
        font-size:300%;
        margin-left:0%;
       transform:rotate(90deg);
      }
      75% {
        font-size:300%;
        margin-left:0%; transform:rotate(-180deg);
      }
      to {
        margin-left:0%;
      }
    }
    @-webkit-keyframes second {
      from {
        margin-left:0%;
      }
     40% {
        font-size:300%;
        margin-left:0%;
       transform:rotate(90deg);
      }
      75% {
        font-size:300%;
        margin-left:0%;
       transform:rotate(-180deg);
      }
      to {
        margin-left:0%;
      }
    }

#cheese3 {
width:100%;height:100%;
position:absolute;
z-index:22;
top:0;
left:0;
    background:url("images/swirly1test3.png") no-repeat center center;  
	-webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
      -moz-animation:third 4s infinite;
      -webkit-animation:third 4s infinite;
    }  
    @-moz-keyframes third {
      from {
        margin-left:0%;
      }
     25% {
        font-size:300%;
        margin-left:0%;
       transform:rotate(-480deg);
      }
      60% {
        font-size:300%;
        margin-left:0%; transform:rotate(90deg);
      }
      to {
        margin-left:0%;
      }
    }
    @-webkit-keyframes third {
      from {
        margin-left:0%;
      }
     25% {
        font-size:300%;
        margin-left:0%;
       transform:rotate(-480deg);
      }
      60% {
        font-size:300%;
        margin-left:0%;
       transform:rotate(90deg);
      }
      to {
        margin-left:0%;
      }
    }
/* end of swirly */
/* begin nav */
#navigation {
	margin:-13vh 1vw 1vh 2vw;
	  height:35px;
	  width:35px; 
	  position:fixed;
	  z-index:80;
}
nav ul li {
	line-height:5vh;
}
nav ul li a{
    font:5vw 'Nova Square',san-serif;
    transition:all 1s ;
    color: rgba(150,150,150,1); 
	text-shadow: 0 0 0px rgba(150,150,150,0);
}
nav ul li:hover a{
    color:rgba(150,150,150,0);
    text-shadow: 0px 0px 2vh rgba(150,150,150,1);
}
nav ul li a{
 text-decoration:none; 
    list-style-type:none;
}
nav ul {
    list-style-type:none;
	position:fixed;
	z-index:50;
	top:20vh;
	left:-1vw;
	}
#line1 {
    position:absolute;
    top:-24vh;
    left:3vw;
    height:70px;
    width:2px;
    transform:rotate(0deg);
    background:rgba(150,150,150,.5);
	transition:all .2s;
}
#bio:hover + .drawline {
height:31vh;
}
#line2 {
    position:absolute;
    top:-24vh;
    left:2.5vw;
    height:80px;
    width:2px;
    transform:rotate(0deg);
    background:rgba(150,150,150,.5);
	transition:all .2s;
}
#resume:hover ~ .drawline {
height:40vh;
}
#line3 {
    position:absolute;
    top:-24vh;
    left:2vw;
    height:90px;
    width:2px;
    transform:rotate(0deg);
    background:rgba(150,150,150,.5);
	transition:all .2s;
}
#portfolio:hover + .drawline {
height:49vh;
}
#address {
color:rgba(150,150,150,1);
text-align:right;
position:fixed;
    font:2.5vh 'Nova Square',san-serif;
	z-index:90;
	top:1vh;
	right:1vw;
}
#address a {
text-decoration:none;
color:rgba(150,150,150,1);
}
#address a:hover {
font-weight:bold;
color:rgba(200,200,200,1);
}
/* end nav */
/* begin parallax */
/*end parallax */
/* begin content */
#container {
display:block;
height:100%;
width:100%;
}
#content {
display:block;
font:.9em helvetica, arial, san-serif;
color: rgba(200,200,200,1);
margin:25vh 1vw 1vh 25vw;
padding:10px;
border:solid 1px rgb(100,100,100);
background:rgba(100,100,100,.2);
}
.exp li {
    padding:1em 0 0 0; 
    }
	#itemlist li {
	box-sizing:border-box;
	display: inline;
	}
	#itemlist li img {
	box-sizing:border-box;
	display: inline;
	padding: 5px 5px 5px 5px;
	}
	#websites li {
	display: inline;
	}
	#websites li img {
	box-sizing:border-box;
	display: inline;
	padding: 5px 5px 5px 5px;
	}
	#ui li {
	display: inline;
	}
	#ui li img {
	box-sizing:border-box;
	display: inline;
	padding: 5px 5px 5px 5px;
	}
#websites {
margin-top: 1em;
}
#iemenu {
display:none;
}

#me {
  width:50px;
  height:20px;
  background:rgba(255,255,255,.3);
  border:solid 1px #fff;
  text-align:center;
  font:normal 15px arial;
  color:#fff;
  float:right;
}
#photocup:hover #photo {
  width:300px;
  height:310px;
  border:solid 1px #fff;
}
#photo {
  border-top:solid 1px #fff;
  background:url(http://twistedream.com/original-twistedream/images/me.jpg) no-repeat;
  width:0px;
  height:0px;
  float:right;
  position:relative;
  top:21px;
  left:52px;
  margin-bottom:20px;
  transition: width .5s, height 1s .4s, border 1s;
}
  
/* end content */
/* @media stuff */
@media screen and (max-width: 640px) {
  #navigation {
	  height:100px;
	  
  }
  
  #menu {
	  height:20px;
	  width:60px;
  text-align:center;
	border:solid 1px #fff;
	background:rgba(255,255,255,.3);
  font:normal 15px arial;
  color:#fff;
  }
  
  #navigation nav ul {
    visibility: hidden;
    transition:all 0s ;
  }
  #navigation:hover nav ul {
    visibility: visible;
	border:solid 1px #fff;
background:rgba(100,100,100,1);
padding:5px 20px 5px 20px;
  }
  #navigation:hover nav ul li a {
    color: rgba(255,255,255,1); 
	text-shadow: 0 0 0px rgba(150,150,150,0);
  }
  #navigation:hover nav ul li:hover a{
    color:rgba(255,255,255,0);
    text-shadow: 0px 0px 2vh rgba(150,150,150,1);
}
  #content {
margin:25vh 1vw 1vh 1vw;
	}
}
/* end @media stuff */
/* start wordpoop */
#wordpoop {
position:fixed;
bottom:0;
text-decoration:none;
font:3vh 'Cinzel Decorative',san-serif;
color:rgba(200,200,200,.6);
text-shadow: 0 0 10px #000;
margin: 0 0 5px 20px;
z-index:70;
}
#bottommenu {

position:fixed;
z-index:72;
bottom:0;
margin:0 auto;
height:8vh;
width:120%;
background: #000;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+100&0+0,1+50 
Ok, cheesy but I really didn't want to code the whole gradient out... thank you colorzilla for helping me be lazy.
*/
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.02) 1%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0.02)), color-stop(50%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.02) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.02) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.02) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.02) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
copy
}
/* end wordpoop */
/* see what i did there? shadows tend to be a bit light. but if you dump a bunch of them on top of each other they become denser. is denser a word? google says it is.

background: #000;
box-shadow: 10vh 0 10vh #000, 10vh 0 10vh #000, 10vh 0 10vh #000, 10vh 0 10vh #000, 10vh 0 10vh #100;
*/
/* edit - ok, that was a dumb idea. I'm going to back to gradients. */
#wordpoop a{
text-decoration:none;
}
#wordpoop a:hover{
color:rgba(255,255,255,.6);
}
/* damn you ie 10 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* ie10+ css */
nav ul li a{
    font:7vh 'Nova Square',san-serif;
    transition:all 1s ;
    color: rgba(150,150,150,1); 
	text-shadow: 0 0 2vh rgba(150,150,150,1);
	zoom:1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=rgba(150,150,150,1),direction=0);
	filter: dropshadow(color=rgba(150,150,150,1), offx=1, offy=1);
}
}
/* end ie 10 */