body {
  font-family: 'Rubik', sans-serif;
  padding-bottom:50px;
  font-weight: 300;
}

h1, h2, h3, h4 {
  font-family: "Lato", sans-serif;
}

p {    
  color: #333557;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom:2rem;
}

img {
  max-width: 100%;
}

figure {
  margin:0;
}

a {
  color:#5E50B5;
}

a:visited {
  color:#5E50B5;
}

a:hover {
  color:#F62459;
}

.post ul {
  margin: .8rem 0 1.8rem .8rem;
}

.post ul li {
  margin-top: .7rem;
}

ul li {
  font-size: 1rem; 
}

.navbar a.navbar-brand {
  color:#333;
  font-family: "lato", sans-serif; 
  font-weight: 400;
  font-size: 1.4em;
}

a:visited.navbar-brand {
  color:#333;
}

a:hover.navbar-brand {
  color:#F62459;
}

.hero-header {
  margin-top:100px;
  margin-bottom:15px;
}

.hero-header img{
  margin:0 auto;
  border-radius: 50%;
  max-width:110px;
  margin-bottom:25px;
}

.hero-header h1 {
  text-align: center;
  font-weight: 300;
  font-size:1.6rem;
  line-height: 1.4;
}

.hero-header .divider {
  margin:50px 0;
}

.hero-header h1 strong {
  font-weight: 600;
}


/*MAIN COPY SECTION - ARTICLES & PROJECTS*/

.landing-articles h3 {
  margin-bottom:0;
}

.landing-articles .intro.text {
  margin-bottom:1em;
}

.main-copy h5 {
  font-weight: 300;
  text-transform: uppercase;
  background: #fefad4;
  display: inline-block;
  margin-bottom:30px;
}

.main-copy ul {
  margin-top:0;
  margin-bottom:40px;
}

.tile {
  margin-bottom:15px;
}


/*BLOG POST*/
.post {
    margin-top: 100px;
    margin-bottom: 15px;
}

.post h1 {
  margin-bottom:0;
}

.post .intro {
  margin-bottom: 3rem;
}


/*TABS*/
.tab {
  margin-bottom:3rem;
}

.tab-content{
  display: none;  
}

.tab-content.current{
  display: inherit;
}

/*Some book page design stuff*/

.design-books .chip {
  margin:0;
  margin-bottom:.5em;
  border-radius:0;  
}

body.no-nav{
  padding:1em;
}

/*Book list*/

.year-heading{
  background-color: #FFFFEE;
}

.book-list {
  padding-left:60px;
}

.book-list .panel-title {
  color:#222;
}

.book-list .book-author {
  color:#888;
}

.book-item {
  margin-bottom:2rem;
}



/** MOBILE MENU **/

.mobile-menu {
  display:block;
  float:right;  
  line-height: 1.6em;  
}
/*Strip the ul of padding and list styling*/
.mobile-menu ul {
  list-style-type:none;
  margin: 0;
  padding-left:0;
  text-align:center;
  width:100%;  
  
}

/*Create a horizontal list with spacing*/
.mobile-menu li {
  display:inline-block;
  /*float: left;
  margin-right: 1px;*/
}

/*Style for menu links*/
.mobile-menu li a {
  display:inline-block;    
  color: #2c2e2f;      
  padding: 10px 0; 
  margin:0 8px; 
}

/*Hover state for top level links*/
.mobile-menu li:hover a {
  color: #F62459;
}

/*Hide dropdown links until they are needed*/
.mobile-menu li ul {
  display: none;
}

/*Make dropdown links vertical*/
.mobile-menu li ul li {
  display: block;
  float: none;
}

/*Prevent text wrapping*/
.mobile-menu li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}


/*Style 'show menu' label button and hide it by default*/
.mobile-menu .show-menu {
  text-decoration: none;
  color: #2c2e2f;    
  padding: 10px 15px;
  display: none;
  cursor: pointer;  
}

.mobile-menu .show-menu span{
   padding-left: 35px;
}

/*Hide checkbox*/
.mobile-menu input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
.mobile-menu input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*Responsive Styles*/

@media screen and (max-width : 800px){
  .mobile-menu .lines {
    border-bottom: 10px double #2c2e2f; 
    border-top: 2px solid #fff; 
    content:"";
    height: 12px; 
    width:20px;
    padding-right:15px;
  float: right;
}
  /*Make dropdown links appear inline*/
  .mobile-menu ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  .mobile-menu li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  .mobile-menu ul li, .mobile-menu li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .mobile-menu .show-menu {
    display:block;
  }
}

/*Tech founders*/

.techfounders {
  margin-top:2rem;
}

.techfounders .divider {
  border-top: .05rem solid #dedede
}

.tile-icon {
  align-self: flex-start;
  margin-top:5px;
}

.example-tile-icon {
  max-width: 50px;
  margin-right:.5rem;  
}

.tile.tile-centered .tile-title {
  white-space: normal;
}


@media only screen and (max-width: 1000px) {
  .main-copy {
    padding: 1rem;
  }

  .post .column {
    padding: 1rem;
  }
}

@media only screen and (min-width: 840px) {
  .main-copy .landing-articles {
    padding-right:60px;
  }
}