html, body {
  height: 100%; }

hr {
  border: 1px solid #021e4c; }

body {
  background-image: url("/assets/cottoncandy.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #021e4c;
  text-align: justify;
  font-family: "Ubuntu", sans-serif; }

.background {
  min-width: 100%;
  min-height: 100%;
  position: relative;
  display: inline-block;
  background: -moz-linear-gradient(top, white, white 20%, rgba(255, 255, 255, 0));
  /* FF3.6+ */
  background: -webkit-linear-gradient(top, white, white 20%, rgba(255, 255, 255, 0));
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, white, white 20%, rgba(255, 255, 255, 0));
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, white, white 20%, rgba(255, 255, 255, 0));
  /* IE10+ */
  background: linear-gradient(to bottom, white, white 20%, rgba(255, 255, 255, 0));
  /* W3C */
  background-attachment: fixed; }

.top-navigation {
  text-align: center;
  vertical-align: middle; }

.navbar-navigation {
  text-align: center; }

.navbar-nav {
  display: inline-block;
  float: none;
  padding: 10px;
  font-size: 25px; }
  .navbar-nav a {
    font-family: "Shadows Into Light Two", cursive;
    color: #021e4c; }

.top-picture {
  height: 275px;
  width: auto;
  margin: 0 auto; }

.home-picture {
  max-height: 400px;
  width: auto;
  margin: 0 auto; }

.top-picture-container {
  text-align: center;
  margin: 0 auto;
  padding: 40px; }

.nav-header {
  margin: 0 auto;
  text-align: center;
  vertical-align: middle; }

.nav > li > a:focus, .nav > li > a:hover {
  background: #ffd8fd;
  /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(#ffd8fd, rgba(255, 216, 253, 0));
  /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(#ffd8fd, rgba(255, 216, 253, 0));
  /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(#ffd8fd, rgba(255, 216, 253, 0));
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(#ffd8fd, rgba(255, 216, 253, 0));
  /* Standard syntax */ }

.nav > li > a {
  border-radius: 3px; }

.project-image-container {
  max-width: 80%;
  margin: 0 auto;
  -webkit-box-shadow: 3px 3px 5px 0px rgba(214, 251, 255, 0.75);
  -moz-box-shadow: 3px 3px 5px 0px rgba(214, 251, 255, 0.75);
  box-shadow: 3px 3px 5px 0px rgba(214, 251, 255, 0.75);
  margin-top: 10px;
  margin-bottom: 15px; }

.projectimage {
  width: 100%;
  height: auto; }

.project-content {
  max-width: 100%;
  margin: 0 auto; }

.projects-container {
  width: 100%;
  margin: 0 auto; }

.content-container {
  width: 60%;
  min-width: 200px;
  margin: 0 auto; }

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .content-container {
    width: 80%; }

  body {
    text-align: left; } }
.project-heading {
  text-align: center; }

.footer {
  font-family: "Shadows Into Light Two", cursive;
  padding: 10px;
  text-align: center;
  margin: 20px; }

.panel-heading .accordion-toggle:before {
  font-family: 'Glyphicons Halflings';
  /* essential for enabling glyphicon */
  content: "\e113";
  /* adjust as needed, taken from bootstrap.css */
  color: #021e4c;
  float: left; }

.panel-heading .accordion-toggle.collapsed:before {
  /* symbol for "collapsed" panels */
  content: "\e114";
  /* adjust as needed, taken from bootstrap.css */ }

.panel-title {
  text-align: center;
  width: 250px;
  margin: 0 auto; }

.project-panel {
  background-color: transparent;
  box-shadow: none; }

.space {
  height: 15px; }