body{
  font-family: 'Josefin Sans', sans-serif;
  background-color: rgba(255, 255, 255, 1);
  background: white;
  margin-top: 3%;
  margin-left: 2%;
  margin-right: 2%;
}

/* Basic font appears */
p {
  font-size: 1.1em;
  line-height: 1.4em;
  text-align: justify;
  opacity: 1;
}

/* Banner on big screen layout */
.banner {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  color: black;
  margin 0 auto;
  font-size: 4vw;  /*vw = viewport width*/
  font-weight: bold;
  letter-spacing: .2em;
  text-shadow: 2px 2px 1px #969696;
  font-weight: normal;
  font-style: normal;
  text-align: center;
}

/* Global Optimism logo on big layout*/
.banner img {
  height:6vw;
  padding-left: 4vw;
	margin-bottom: 3vh;
}

/* Banner on small screen layout */
.banner.left {
  float: left;
  font-size: 3.5vw;  /*vw = viewport width*/
  text-shadow: 1px 1px 1px #969696;
  padding-left: 0;
  padding-right: 0;
}

/* Global Optimism logo on small screen layout*/
.banner.left img {
  height: 6vw;
  margin-top: 1.1vw;
  padding-left: 2vw;
}

/* Banner-as-a-link styling */
.banner a {
  background: transparent;
  font-style: normal;
  text-decoration: none;
  color: black;
  transition: .5s;
  cursor: auto;
}
.banner a:link,
.banner a:visited,
.banner a:hover,
.banner a:active {
  text-decoration: none;
}

/* Nice clean white background where views get injected */
.container-fluid {
  background-color: white;
}

/* Menu styling */
#cf-navbar.navbar-default {
  background-color: rgba(255, 255, 255, 1);
  background-image: none;
  border-style: none;
  box-shadow: none;
  padding-top: 1%;
	margin-bottom: 0px;
}

#cf-navbar.navbar-default .icon-bar {
  width: 33px;
}

#cf-navbar.navbar .navbar-nav {
  display: inline-block;
  float: none;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 1);;
  border-style: none;
  box-shadow: none;
}

/* Menu-as-a-link styling */
#cf-navbar.navbar .navbar-nav .a,
#cf-navbar.navbar .navbar-nav .a:hover,
#cf-navbar.navbar .navbar-nav .a:focus
{
  display: inline-block;
  float: none;
  font-family: 'Oswald', sans-serif;
  border-style: none;
  box-shadow: none;
}

#cf-navbar.navbar .navbar-nav .active {
  font-family: 'Oswald', sans-serif;
  box-shadow: rgba(255, 255, 255, 1);
}

#cf-navbar.navbar .navbar-collapse {
  text-align: center;
}

#cf-navbar.navbar .navbar-toggle {
  margin-top: 0px;
  margin-right: 0px;
  border-style: none;
}

/* Size the carousel of photos */
.carousel-inner > .item > img {
  margin: 0 auto;
  height: 55vh;
  padding-bottom: 20px;
}

/* Photo captions */
.carousel-caption p {
  text-align: center;
}

/* Make the timeline higher than the default */
.twitter-timeline {
  height:800px !important;
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
  .carousel-inner > .item > img {
    margin: 0 auto;
    height: 50vh;
  	padding-bottom: 20px;
  }
}

/* Resize the carousel for landscape phones and portrait tablets */
@media(max-width:767px) {
  .carousel-inner > .item > img {
    margin: 0 auto;
    height: 45vh;
  	padding-bottom: 20px;
  }
}

/* Resize the carousel for extra small devices */
@media(max-width:480px) {
  .carousel-inner > .item > img {
    margin: 0 auto;
    height: 35vh;
  	padding-bottom: 20px;
  }
}

/* Remove the gray outer panels of the carousel, color the controls gray */
.carousel-control.left {
  background-image: none;
  color: rgb(119, 119, 119);
  text-shadow: none;
}
.carousel-control.right {
  background-image: none;
  color: rgb(119, 119, 119);
  text-shadow: none;
}

.lower-content {
  padding-top: 20px;
}

.lower-content.pic {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0;
}

.lower-content h4 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  text-align:left;
}

.lower-content.right h4 {
  text-align:right;
}

/* Style side-by-side content only on screens bigger than extra small devices */
@media(min-width:768px) {
  .lower-content.left {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgb(222, 222, 222);
  padding-right: 2%;
  }
}
.reference-link {
  color: rgb(40,40,40);
}

.reference-link a:link,
.reference-link a:visited,
.reference-link a:active {
  color: rgb(0, 51, 180);
}

.direction-link {
  padding-top: 20px;
  text-align: center;
}

/* Page footer */
.footer {
  width: 100%;
  overflow: hidden;
}

.footer .copyright {
  padding-top: 20px;
}

.footer .copyright p {
  border-top: 1px solid red;
  clear: both;
  text-align: center;
  padding-top: 10px;
  font-size: 0.8em;
}