/***JMC jan 2016***/
/**updated july 2019 to bootstrap 4**/

*{    box-sizing: border-box;
}

body {
  position: relative; /*need for spyscroll*/
  margin:0;
  padding:0;
  color:#fbfcfc;
  background: #121212;
  -webkit-font-smoothing: antialiased;
  margin-bottom:50px;
}

a {
  color: #D98880;
  text-decoration:none;
  font-family: 'Anonymous Pro';
}
.anchor{
  padding-top:100px;
}
a:hover{
  color:red;
}

#current{
  text-decoration:underline;
}

p{
  font-family:'Anonymous Pro';
  font-size:18px;
  color:#fbfcfc;
  line-height:1.7em;
}
h1{
  margin:0;
  padding:0;
  font-family:'Anonymous Pro';
  font-size:20px;
  font-weight:600;
}

img{
  padding:5px;
}

#bold{
  font-weight:800;
  text-transform:uppercase;
}

#content{
  margin: 0 auto;
  margin-top:100px;
  z-index:1;
}
@media only screen and (max-width: 766px) {
  #content{
    margin-top:150px;
  }
}
@media only screen and (max-width: 1230px) {
  #content{
    margin-top:130px;
  }
}
  @media only screen and (max-width: 990px) {
  #content{
    margin-top:140px;
  }
}
#content a{
  color:#D98880;
}
.main {
  position: fixed;
  top: 0px;
  max-height: 40px;
  z-index: 999;
  width: 100%;
  padding-top: 10px;
  background-color:#121212;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding-bottom: 6px;
  opacity: 1;
  margin-top:5px;
  margin-bottom:5px;
  border-top: 1px dashed #2E4053;
  border-bottom: 1px dashed #2E4053;
}

.main a{
  color:#D98880;
}

.main a:hover{
  color:#555;
}
/**three menus: main, years, projects...all pics load per year...project links are anchors    **/
.proj{
  z-index: 998;
  top: 35px;
  background-color:#121212;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 1;
  margin-top:10px;
  border-bottom: 1px dashed #2E4053;
  text-align:center;
  font-size:14px;

}

.proj ul{
    list-style: none;
    padding:0;
    margin:0;
}

.proj ul li{
  padding:0;
  margin:0;
}

#end-a-proj{
  position:static;
  height:35px;
  border-bottom:5px dashed #2E4053;
  margin-bottom:35px;
  width:100%;
}

.open-nav {
  max-height: 150px !important;
}
/*height of mobile menu for years. need to adjust everytime you add a year. i need to fix this eventually*/
.open-nav-years{
  max-height:575px !important;
}

#bold_menu{
  font-weight:600;
}
.my_name {
  font-size: 16px;
  font-weight:600;
  color: #C0392B;
  float: left;
  display: block;
  margin-top: 0;
  line-height: 1;
  margin-bottom: 10px;
  padding-left:5%;
  padding-top:3px;
}

/*mobile menu stuff. was 766. need to make this better because right now
the windows are folding when the years don't fit in the menu. that seems dumb*/

@media only screen and (max-width: 822px) {
  .my_name {
    float: none;
  }
}

nav {
  float: right;
  padding-right:5%;
}
@media only screen and (max-width: 822px) {
  nav {
    width: 100%;
  }
}
nav ul {
  list-style: none;
  overflow: hidden;
  text-align: right;
  float: right;
  padding:0;
  margin:0;
  margin-bottom:10px;

}
@media only screen and (max-width: 822px) {
  nav ul {
    padding-top: 10px;
    margin-bottom: 22px;
    float: right;
    text-align: center;
    width: 80%;
  }
}
nav ul li {
  display: inline-block;
  margin-left: 15px;
  line-height: 1.5;
}
@media only screen and (max-width: 822px) {
  nav ul li {
    width: 100%;
    padding: 7px 0;
    margin: 0;
    margin-top:5px;
    border:1px dashed #2E4053;
  }
}
nav ul a {
  color: #D98880;
  font-size: 16px;
}

.mobile-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 22px;
  top: 0;
  width: 30px;
  padding-top:10px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}
@media only screen and (max-width: 822px) {
  .mobile-toggle {
    display: block;
  }
}
.mobile-toggle span {
  width: 30px;
  height:2px;
  margin-bottom: 6px;
  border-radius:100px;
  background: red;
  display: block;
}

#text-box{
  border: 1px dashed #2E4053;
  padding:5px;
  margin:5px;
}

#cv{
  border:2px dashed #2E4053;
  padding-top:15px;
  margin-top:-40px;
}

#cv h1{
  border-bottom:1px dashed #2E4053;
  font-weight:600;
  margin-bottom:5px;
}

span{
  font-size:12px;
}

/**style bootstrap navtabs for project scrolling**/
.nav-tabs{
  background-color:#121212;
  width:100%;
  margin:0px;
  padding:0px;
  border:none;
}
.tab-content{
    background-color:#121212;
    color:#D98880;
    padding:0px;
    margin:0px;
}
.nav-tabs > li > a{
    background-color: #303136 !important;
    color:#C0392B;
}
.nav-tabs > li > a:hover{
    background-color: #303136 !important;
    color:#fff;
}
.nav-link.active{
    background-color: #993366 !important;
    color:#fff !important;
}
/**end navtab styles**/

.indent{
  padding-left:15px;
}

#smaller_font{
font-size:14px;
}

.archives{
  text-align:right;
}

@media only screen and (max-width: 822px) {
  .archives {
    text-align:left;
  }
  #smaller_font{
  font-size:12px;
  }
}

@media only screen and (max-width: 375px) {
  #smaller_font{
  font-size:11px;
  }
}