/*Overall styling*/
body {
	background-color:white;
  font-family:'Lato', sans-serif;
  font-weight:normal;
  margin: 0;
  padding: 0;
}

/*Menu*/
@import "compass/css3";
.navigation {
  position:fixed;
  list-style: none;
  top:-16px;
  background: black;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  padding: 0;
  justify-content: center;
  border:2px solid black;
  height:100%;
  z-index:100;
}
.out {
  right:0px;
  width:150px;
}
.in {
  width:20px;
  right:-10px;
}
.navigation a {
  text-align:center;
  text-decoration: none;
  display: block;
  padding: 3em;
  color: white;
}
.navigation a:hover {
  background-color:white;
  color:black;
}
button {
  width:35px;
  height:60px;
  position:fixed;
  top: 50%;
  background-color:black;
  border: none;
  color:white;
  text-align:middle;
  transform: translateY(-50%);
  border-radius:50%;
  z-index:99;
}
.bout {
  right:134px;
}
.bin {
  right:-7px;
}

/* Social media sidebar */
.social {
    padding:0 5px;
    position:fixed;
    left:0;
    top:0;
    height:100%;
    background-color:black;
    color:white;
    z-index:100;
    text-align:center;
}
#social {
    width:40px;
    display:inline-block;
  margin-top:10px;
  padding:0 10px 0 10;
    
}
.twitter-timeline {
  margin-top:10px;
}
.social div {
    position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.bout2 {
  left:210px;
}
.bin2 {
  left:-5px;
}
.out2 {
  width:220px;
}
.in2 {
  width:220px;
  padding-right:20px;
  left:-230px;
}

/* Footer */
footer {
  width:100%;
    height:90px;
  background-color:black;
  color:white;
  clear:both;
}
footer p {
  text-align:center;
  position: relative;
  width:90%;
  margin:auto;
}
.quote {
    font-style:italic;
    font-size:26px;
    padding-bottom:10px;
    padding-top:10px;
}