@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Roboto+Slab:400,100,300,700);

body {
  padding-top: 50px;
  font-family: "Roboto Slab", sans-serif;
  font-weight: 300;
  font-size: 1.8em;
  position: relative;
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Cuprum", sans-serif;
  font-weight: 100;
  margin: 0;
}
/*Header*/
#logo {
  max-height: 50px;
  margin-top: -15px;
  margin-left: 15px;
}

.navbar {
  border-radius: 0;
}

/*Smooths transition when changing nabar background*/
header .navbar {
  transition: all .7s ease-out;
}

header .navbar-nav {
  margin-top: 0;
}

header .navbar-brand {
  padding: 15px 0;
}

header .navbar-inverse .navbar-nav li a {
  color: #EEC856;
  padding-left: 4px;
}

header .navbar-inverse .navbar-nav .active a {
  padding-bottom: 11px;
  background-color: rgba(0,0,0, 0.7);
  border-bottom: 4px solid rgba(238,200,86, 0.4);
}

header .navbar-inverse .navbar-toggle .icon-bar {
  background-color: #EEC856;
}

header .container .navbar-header {
  background-color: #222;
}

/*Nav inbody*/
header .inbody {
  background: rgba(0, 0, 0, .8);
}

/*Carousel Caption*/
.carousel-caption {
  display: none;
}

.active .carousel-caption {
  display: block;
  font-family: "Roboto Slab", "Open Sans", sans-serif;
  font-size: 2em;
  font-weight: 400;
  color: #EEC856;
}

.carousel-indicators li {
  border: 2px solid #222222;
}

.carousel-indicators .active {
  background-color: #EEC856;
}

/*Media query to apply class until screen exceeds 768px*/
@media only screen
and (max-width: 768px) {
  header .navbar-inverse {
    background-color: rgba(0,0,0, 0.5);
  }
  .main .page p{
    padding: 0 10%;
  }
}

/*Main*/
@media only screen
and (min-width: 450px)
and (max-width: 768px) {
  .main .page {
    padding: 0 20%;
  }
}

@media only screen
and (max-width: 450px) {
  .main .page {
    padding: 0 20%;
  }
}

.main .page {
  padding: 50px 2%;
}

.main .page p {
  text-align: justify;
}

.main .page li {
  text-align: left;
}

footer .navbar-default {
  border: none;
  background: transparent;
}

.page {
  text-align: center;
  padding: 50px 0;
}

#about a {
  color:inherit;
}
#about a:hover {
  color: red;
  font-weight: 600;
}

/*Carousel Fade*/

.carousel.fade{
  opacity: 1;
}

.carousel.fade .item {
  transition: opacity ease-out .7s;
  left: 0;
  opacity: 0;
  top: 0;
  position: absolute;
  width: 100%;
  display: block;
}

.carousel.fade .item:first-child {
  top: auto;
  opacity: 1;
  position: relative;
}

.carousel.fade .item.active {
  opacity: 1;
}

.carousel-control {
  opacity: 0;
}

#featured .item {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
}

/*Mission*/
#mission {
  background-color: #EEC856;
  background-image: linear-gradient(to bottom, #EEC856, #FFF);
}

/*Infuences*/
.main blockquote {
  border-left: none;
}

#influences {
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(images/stars.jpg);
  background-position: center top;
  background-size: cover;
}

#influences .influence p, #influences .influence .idol{
  color: #FFF;
  font-weight: 500;
  font-size: 1.5em;
}

#influences .influence .more, #influences .influence .idol {
  opacity: 0;
  font-size: 0;
  line-height: 0;
  padding-top: 10px;
}

#influences .influence .intro::after {
  content: '...';
}

#influences .influence:hover .intro::after {
  content: '';
}

#influences .influence:hover .more {
  font-family: "Roboto Slab", "Open Sans", sans-serif;
  font-weight: 500;
  display: block;
  opacity: 1;
  font-size: 1em;
  line-height: 120%;
  padding-top: 0;
}

#influences .influence:hover .idol {
  font-family: "Roboto Slab", "Open Sans", sans-serif;
  font-weight: 500;
  display: block;
  opacity: 1;
  font-size: 1.5em;
  line-height: 120%;
  text-align: right;
}