body {
  color: #000;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  background-color: #444;
}
h1, h2, h3, h4 {
  font-family: 'PT Serif', sans-serif;
  font-weight: 400;
}
ol.spacing {
  margin: 20px 0;
}
ol.spacing li {
  margin-bottom: 10px;
}
.summary {
  font-family: 'PT Serif', serif;
  font-size: 30px;
}
.inset {
  padding: 0 45px 0 45px;
}
.jumbotron.main,
.jumbotron.footer {
  color: #aaa;
  padding-top: 10px;
}
.jumbotron.footer a {
  color: #ddd;
}
.jumbotron.footer {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 12px;
}
.jumbotron.features {
  padding: 30px 0 30px 0;
  background-color: #fff;
}
.jumbotron.navigation {
  background-color: #f0f0f0;
  padding-top: 20px;
  padding-bottom: 20px;
}
.logo, .tagline {
  display: block;
}
.tagline {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 300;
}
.foamtree-container {
  position: relative;
  width: 100%;
  height: 450px;
  border-radius: 3px 3px 0 0;
  background-color: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  padding: 27px 27px 0 27px;
}
.navigation .row > div,
.features .row > div {
  margin-bottom: 30px;
}
.features .fa {
  font-size: 28px;
  vertical-align: -13%;
  margin-right: 5px;
}
.social {
  padding-top: 10px;
}
.shadow-clip {
  position: relative;
  z-index: 1;
}
#foamtree {
  position: relative;
  height: 100%;
}
.navbar {
  margin-bottom: 10px;
}
.navbar-brand {
  padding-left: 0;
}
.navbar-collapse {
  padding-top: 15px;
}
.navbar, .navbar a, .navbar-toggle {
  color: white;
}
.navbar .nav a:hover {
  color: black;
}
.navbar-toggle {
  border-color: white;
}
.logo {
  width: 240px;
  height: 41px;
}
.demo-control {
  z-index: 2;
  width: 150px;
  height: 10px;
  position: absolute;
  right: 30px;
  bottom: -15px;
}
.pause-play {
  display: inline-block;
  padding: 10px 20px;
  color: #ccc;
  position: absolute;
  top: -10px;
  left: -20px;
  font-size: 14px;
  line-height: 10px;
}
.pause-play:hover {
  color: #999;
  text-decoration: none;
}
.progress {
  margin: 0 0 0 20px;
  height: 10px;
  border-radius: 2px;
  background-color: #eee;
  position: relative;
}
.progress > div {
  border-radius: 2px;
  height: 100%;
  background-color: #59B359;
  transition: width 0.5s, background-color 0.5s, opacity 0.5s;
}

#loading {
  color: #888;
  height: 50px;
  line-height: 50px;
  margin-top: -25px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}
#loading.fadeout {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.35s, opacity 0.35s linear;
  -webkit-transition: visibility 0s linear 0.35s, opacity 0.35s linear;
}

#loading > i {
  font-size: 50px;
}

a.demo {
  text-decoration: none;
}
a.demo p {
  color: black;
}
a.demo:hover h4 {
  text-decoration: underline;
}
a.demo > div {
  height: 140px;
}

@media (max-width: 1199px) {
  .summary {
    font-size: 24px;
  }
}

@media (max-width: 991px) {
}

@media (max-width: 767px) {
  .foamtree-container {
    padding: 12px 12px 0 12px;
  }
  .inset {
    padding: 0 30px 0 30px;
  }
  .logo {
    width: 120px;
    height: 20px;
  }
  .summary {
    font-size: 20px;
  }
  .navbar-toggle {
    padding: 5px 8px;
  }
  .jumbotron.main {
    padding: 0;
  }
  .navbar {
    margin-bottom: 0;
  }
}