* {
    box-sizing: border-box;
}
body {
    background-color: #000000;
}
h1,
h2,
h3,
h4,
h5 {
    font-family: 'Droid Sans Mono', sans-serif;
}
p {
    font-family: 'Open Sans', sans-serif;
}
a {
    color: #000000;
}
a:hover {
    text-decoration: none;
    color: #444444;
}
hr{
	color:#000000;
	border-style: solid 2px none;
}
.title {
    margin-right: 20%;
    top: 0;
    text-align: right;
}
/*Sections*/
/*hero*/

#hero {
    color: #ffffff;
    background: url(../_images/creepy-tunnel.jpeg) center center no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 100vh;
}
/*about*/

#about {
    color: #ffffff;
    padding: 20% auto;
    min-height: 100vh;
}
.bio-image img {
    width: 100%;
    max-width: 80%;
    margin: 20px;
    border-radius: 50%;
}
.bio {
    padding: 20px;
}
.bio a{
    color:#0000ff;
}
/*portfolio*/

#portfolio {
    padding: 20px 40px;
    background-color: #eeeeee;
    min-height: 120vh;
}
.visiblediv {
    display: block;
}
.hiddendiv {
    display: none;
    margin: 20px;
    text-align: center;
}

/*nav sidebar*/

#page-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#btn {
    position: fixed;
    z-index: 5;
    top: 15px;
    left: 15px;
    cursor: pointer;
    -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#btn div {
    width: 35px;
    height: 2px;
    margin-bottom: 8px;
    background-color: #ffffff;
    -webkit-transition: opacity 500ms, box-shadow 250ms, background-color 500ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    transition: opacity 500ms, box-shadow 250ms, background-color 500ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
    transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#btn:hover > div {
    box-shadow: 0 0 1px #ffffff;
}
#btn.active {
    left: 230px;
}
#btn.active div {
    background-color: #343838;
}
#btn.active:hover > div {
    box-shadow: 0 0 1px #343838;
}
#btn.active #top {
    -webkit-transform: translateY(10px) rotate(-135deg);
    transform: translateY(10px) rotate(-135deg);
}
#btn.active #middle {
    -webkit-transform: scale(0);
    transform: scale(0);
}
#btn.active #bottom {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
}
#box {
    position: fixed;
    z-index: 4;
    overflow: auto;
    top: 0px;
    left: -275px;
    width: 275px;
    opacity: 0;
    padding: 20px 0px;
    height: 100%;
    background-color: #f6f6f6;
    color: #343838;
    -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
    transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#box.active {
    left: 0px;
    opacity: 1;
}
#items {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
#items .item {
    position: relative;
    cursor: pointer;
    font-size: 2em;
    padding: 15px 30px;
    -webkit-transition: all 250ms;
    transition: all 250ms;
}
#items .item:hover {
    padding: 15px 45px;
    background-color: rgba(52, 56, 56, 0.2);
}
/*Contact*/
  
h2,  ul.contact-form{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.contact-container {
    line-height: 1;
}
ul.contact-form {
    list-style: none;
}

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}
 
body.contact-container {
    background: #eaedf1;
}
 
 .contact-container, input, textarea {
    font: 1em/1.5 Arial, Helvetica, sans-serif;
}
 
.container.contact-container {
     max-width: 100%;
    width:25em;
    margin: 2em auto;
     
}
 
.contact-container .title {
    font-size: 1.5em; 
    padding: .5em 0;
    text-align: center; 
    background: #323a45;
    color: white;
    border-radius: 5px 5px 0 0;
}
 

.form ul {
    background: white;
    margin-bottom: 1em;
}
 
.form li {
    border: 1px solid #ccc; 
    border-bottom: 0;
    margin-bottom: 0px; 
    position: relative; 
}
 
.form li:first-child {
    border-top: 0;
}
 
.form li:last-child {
    border-bottom: 1px solid #ccc;
}
label, input, textarea {
    display: block; 
    border: 0;
}
 
input, textarea { 
    width: 100%; 
    height: 100%; 
    padding: 2.25em 1em 1em; 
    outline: 0;
}
 
textarea {
    height: 16em;
    resize: none; 
}
label {
    font-size: .8125em; /* 13/16 */
    position: absolute; 
    top: 1.23em;
    left: 1.23em;
    color: #FFE761;
    opacity: 1;
  -webkit-transition: .333s ease top, .333s ease opacity;
    transition: .333s ease top, .333s ease opacity;
}
input[type="submit"] {
    background: #e3be42;
    margin-bottom: 1em;
    color: white;
    border-radius: 3px;
    padding: .75em;
    -webkit-appearance: none; /* remove default browser <button> styling */
    -webkit-transition: .333s ease -webkit-transform;
    transition: .333s ease transform;
}
input[type="submit"]:hover {
    -webkit-transform: scale(1.025);
    transform: scale(1.025);
    cursor: pointer;
}
input[type="submit"]:active {
    -webkit-transform: scale(.975);
    transform: scale(.975);
}

.js-hide-label label {
    opacity: 0; 
    top: 1.5em
}
.js-unhighlight-label label {
    color: #999
}