body {
  background: url("../images/bg.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Abel", sans-serif;
}
.jumbotron {
  background: url("../images/logo.png") bottom;
  font-family: "Ultra", serif;
  color: white;
}
.sidebar {
  font-family: "Alfa Slab One", cursive;
  color: white;
  font-size: 30px;
}
.slide {
  position: absolute;
  opacity: 0.9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: slide-left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.btn {
  font-family: "Abel", sans-serif;
  margin: 20px;
  width: 20%;
  padding: 20px;
}

.btn:active {
  position: relative;
  top: 1px;
}
.timeline-image {
  float: left;
  width: 200px;
  margin: 25px;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(150px);
    transform: translateX(150px);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }
}

.modal-title {
  color: blue;
  font-size: 30px;
}
#about {
  text-align: justify;
  padding: 20px;
}
#roster {
  text-align: justify;
  padding: 20px;
}
#schedule {
  text-align: justify;
  padding: 20px;
}

@media screen and (max-width: 980px){
  .btn {
    font-family: "Abel", sans-serif;
    margin: 20px;
    width: 20%;
    padding: 20px;
  }
}
   
@media screen and (max-width: 768px){


  .btn {
    font-family: "Abel", sans-serif;
    margin: 17px;
    width: 20%;
    padding: 18px;
  } 
}

@media screen and (max-width: 640px){
  .btn {
    font-family: "Abel", sans-serif;
    margin: 14px;
    width: 20%;
    padding: 10px;
  }
}