*{
    margin: 0px;
    padding:0px;
    box-sizing: border-box;
}
.noScroll{
    overflow: hidden;
}
/* Links inside the navbar */
ul.nav li {
    float: right;
    display: block;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
}
ul.nav-project li {
    float: right;
    display: block;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
}

a{
    text-decoration:none;
}

h2.mainTitle{
    text-align: center;
    padding:10%;
}

ul{
    display: inline-block;
    float:right;
}

.padding-sides-30{
    padding-left:30px;
    padding-right:30px;
}
/* Main content */
div.container {
    margin-top: 50px; /* Add a top margin to avoid content overlay */
}


.black{
    color: pink;
}

nav{
    height: 50px;
    width: 100%;
    background-color: #FAFAFA;
    overflow: hidden;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    box-shadow: 0px 1px 6px #21212168;
    z-index: 900;
}

ul.nav li{
    display: inline-block;
}
ul.nav li a{
    text-decoration: none;
    color:#424242;
}

ul.nav li a:hover{
    color:#757575;
}

a.projectName{
    text-align: center;
    display:inline-block;
    text-decoration: none;
}

div.content{
    margin:auto;
}
div#splash{
    height: 600px;
    background-color: #263238;
}


div#about{
    width:100%;
    padding:60px;
    height:100%;
    background-color: #f5f5f5;
}

div#about h1{
    color: #424242;
}
div#about h2{
    padding-top:6px;
    font-weight:300;
   
}


h4.stack{
    padding-top:6px;
    font-weight:300;
    color:#616161;
}
h4{
    font-weight:300;
    color:#616161;
    display: inline-block;
}
h2.tileTitle{
    font-weight:300;
    color:#616161;
    margin-top:75px;
}
h2.tileTitle3{
    font-weight:300;
    color:#616161;
    margin-top:65px;
}
h4.tileText{
    color:#919191;
}
div#about p{
    color: #424242;
    font-weight:300;
   
}
div.mounting{
    padding:20px;
    height:100%;
    /* padding-left:150px; */
    padding-top:50px;
    margin:auto;
}
div.imgContainer{
    height: auto;
}
div.imgContainer img.pic{
    box-shadow: 0px 1px 6px #21212168;
}

div.aboutContent{
    display: inline-block;
    vertical-align: top;
}
.pageHeader{
    text-align:center;
    font-weight:300;
    color: #424242;
}

div#projects{
    /* background-color: #F5F5F5; */
    background-image: url(../seigaiha1.png);
    padding-top:100px;
}
div#contact{
    padding:50px;
    height: 600px;
    background-color: #4E342E;
}

div#splash h1{
    color: #E0E0E0;
    text-align: center;
    padding-top: 245px;
    font-weight: 200;
    font-size:40px;
    text-shadow: 2px 2px 6px #212121;
}
ul.projects{
    display:table;
    margin:0 auto;
}

ul.projects li div.project{
    height: 200px;
    width: 200px;
    background-color: whitesmoke;
    display: inline-block;
    margin-top:60px;
    box-shadow: 0px 1px 6px #21212168;
    border:5px solid #F5F5F5;
    vertical-align: top;
    
}
ul.projects li div.pcontainer{
    height: 330px;
    width: 242px;
    text-align: center;
}
ul.projects li a{
    margin-top:20px;
    color: #424242;

}
ul.projects li {
    display: inline-block;
    vertical-align: top;
}

div.contactContent{
    margin:auto;
    width:750px;
    height: 500px;
    background-color: whitesmoke;
    box-shadow: 0px 1px 6px #21212168;
    padding:30px;
}

h3.mainSection{
    font-weight: 500;
    text-align: center;
    padding:5%;
}




h3.projectNote{
    margin-bottom:8px;
    font-weight:400;
    color: black;
}
h4.projectNoteSub{
    font-weight:400;
    color: #616161;
}
div.persona div{
    display: inline-block;
    vertical-align: top;
    padding:15px;
    height:300px;
}

hr{
   border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
}

div.persona hr{
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
div.persona ul,p{
    margin-top: 5px;
}
div.persona div.description{
    width:370px;
}
div.persona div.goals{
    width:270px;
}
div.personaimg{
    text-align: center;
    width: 300px;
}

div.personaimg img{
    box-shadow: 0px 1px 6px #21212168;
    border:9px solid white;
}

.subheader{
    font-weight: 500;
    margin-top: 10px;
}

.border{
    box-shadow: 0px 1px 6px #21212168;
    border:9px solid white;
}

html, body {
font-size: 16px;
font-family: Roboto, Helvetica, Arial, sans-serif;
line-height: 150%; }

canvas {
pointer-events: none;
margin-top:40px;
position: absolute;
width: 100%;
height: 630px;
top: 0;
right: 0;
left: 0;
bottom: 0; }

/* light box modal */
.lightbox {
	/** Default lightbox to hidden */
	display: none;
	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}
div.projectDisp{
    background-color: white;
    width:100%;
    height:100%;
    margin: auto;
    margin-top:10px;
    padding:20px;
    padding-bottom:100px;
    
}
div.projectContainer{
    animation: transitionIn 0.75s;
    max-width: 1000px;
    margin:auto;
    padding-top:50px;
    font-weight:300;
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;
	/** Unhide lightbox **/
	display: block;
}

div.nav{
    height: 50px;
    width: 100%;
    background-color: #FAFAFA;
    overflow: hidden;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    box-shadow: 0px 1px 6px #21212168;
    z-index: 900;
}
.button{
    color:white !important;
    display: inline-block;
    height: 30px;
    width:60px;
    font-size: 14px;
    line-height: 1.8;
    background-color: #F4511E;
    border: solid 2px #F4511E;
  }
button.info{
    color:white;
    display: inline-block;
    height: 30px;
    font-size: 14px;
    line-height: 1.8;
    background-color: #F4511E;
    border: solid 2px #F4511E;
}
form.projectLink{
    display:inline-block;
    margin:auto;
}
button.projectLink {
    color:white;
    display: inline-block;
    height: 30px;
    width:200px;
    font-size: 14px;
    line-height: 1.8;
    background-color: #F4511E;
    border: solid 2px #F4511E;
}
button.githubLink{
    margin-top:10px;
    color:#BDBDBD;
    display: inline-block;
    height: 30px;
    width:200px;
    font-size: 14px;
    line-height: 1.8;
    background-color: white;
    border: solid 2px white;
}

button.resumeLink{
    margin-top:10px;
    display: inline-block;
    height: 30px;
    width:200px;
    font-size: 14px;
    line-height: 1.8;
    color:black;
    background-color:Transparent;
    border:none;
}

h1.projectHeader{
    font-weight:400;
    color:#424242;
    height:25px;
    width:auto;
    display:inline-block;
    padding-top:13px;
    opacity:.9;
    font-size:20px;
}

button:hover{
    background-color: #FBE9E7;
    color:#424242;
    border: solid 2px #FBE9E7;
}

ul.requirements li{
    list-style: none;
}
ul.requirements li:before{
    content:"- ";
}

div.reqList{
    display: inline-block;
    margin-right: 74px;
}

div.ctaProject{
    padding-top:40px;
    width:300px;
    margin:auto;
    text-align: center;
}

div.projectTile{
    border-radius: 20px;
    height:400px;
    background-color:white;
    margin-bottom:33px;
    box-shadow: 0px 1px 6px #21212168;
}

div.projectTile:hover{
    box-shadow: 2px 3px 12px #6161616a;
    transform: scale(1.01);
    /* -webkit-filter: grayscale(100%); */
}

div.projectInfo{
    display:inline-block;
    background-color:white;
    height:200px;
    width:100%;
    text-align: center;
}

.navIcon:hover{
    opacity: .8;
}
.padding-20{
    padding:20px;
}
.mb_parallax_container {
    height: 100vh;
    width: 100vw;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .mb_parallax_overlay {
    height: 100%;
    width: 100%;
    margin: auto;
  }

  @keyframes transitionIn {
    from{
        opacity: 0;
        transform: rotateX(-10deg);

    }
    to{
        opacity: 1;
        transform: rotateX(0deg);

    }
    
  }
  
  
  #mb_parallax_one {
    background-image: url(../ChicagoBW.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
  }

  #myTopnav{
    position: fixed;
  }

  .topnav {
    overflow: hidden;
    width:100%;
    background-color: #333;
    z-index: 1;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  .topnav a:not(:first-child){
    float:right;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  @media screen and (max-width: 992px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
      z-index: 1;
    }
  }
  
  @media screen and (max-width: 992px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: fixed;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
    }

    .topnav.responsive a:first-child {
        text-align:left;
        max-width:200px;
      }

  }