* {
  padding: 0;
  margin: 0 auto;
}

body {
  background: #160f0b;
  color: white;
}

.dispnon {
  display: none;
}
.hover:hover {
  opacity: .7;
}

.wide {
  width: 100%;
  margin: 0;
}

/* !modal */
.modal {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 20vh;
  background: aliceblue;
  opacity: 0.5;
}

/*!randoms */
.top {
  padding-top: 3em;
}

.bottom {
  padding-bottom: 3em;
}

.padd {
  padding: 0 3em;
}

.botPad {
  padding-bottom: 5em;
}

.success {
  color: lawngreen;
  font-weight: 900;
  padding-top: 10px;
}

.error {
  color: red;
  font-weight: 900;
  padding-top: 10px;
}

.skinny {
  width: 95%;
  margin: 0 auto;
  text-align: center;
}

.form-control::-ms-input-placeholder, .form-control::placeholder {
  color: #6495ed;
  text-align: center;
}

hr {
  background: white;
  color: white;
  height: 1px;
  width: 80%;
  margin-top: 0;
}

a, .announcment a {
  text-decoration: none;
  color: white;
}

a a:hover, a .announcment a:hover {
  text-decoration: none;
  color: #989898;
}

.announcment a a:hover, .announcment a .announcment a:hover {
  text-decoration: none;
  color: #989898;
}

h4 {
  text-align: center;
}

/* !main !navigation */
.navbar {
  display: none;
  position: fixed;
  width: 100%;
  z-index: 1;
}

.navbar a {
  color: black;
}

.navbar a.navbar-brand img {
  width: 140px;
}

.active {
  background: #cbc5ca;
}

.active a {
  color: white;
}

.img-fluid:hover {
  opacity: 0.4;
}

/*!main !logo */
.logo {
  min-height: 100vh;
  background-image: url(../img/IMG_0776-3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-position: center;
}

/* !Announcement */
.announcment {
  background: #dc3545;
  padding: .25em 0;
  width: 100%;
  position: fixed;
  top: 0;
  white-space: nowrap;
  display: none;
  z-index: 1;
  animation: scroll-left 10s linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform: translateX(100%);
  font-size: 20px;
}

/* !animation for scroller */
@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

.paused {
  -webkit-animation-play-state: paused !important;
  -moz-animation-play-state: paused !important;
  -o-animation-play-state: paused !important;
  animation-play-state: paused !important;
}

.img-fade {
  height: 281px;
  width: 100%;
  margin: 0 auto;
  top: 45px;
  left: 25px;
}

.img-fade img {
  width: 20%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.img-fade img.imgBottom:hover {
  opacity: 0;
}

.header {
  width: 100%;
}

.header h1 {
  text-align: center;
}

/* !social !media */
.social {
  width: 100%;
  padding: 3em 0;
  /* changes for choppy logo */
  position: absolute;
  bottom: 0;
}

.social ul {
  list-style-type: none;
  text-align: center;
}

.social ul li {
  display: inline-block;
  padding: 0 2em;
}

.social ul li a {
  color: white;
  text-decoration: none;
}

.social ul li a:hover {
  color: #878787;
  transition: 650ms ease-in-out;
  -webkit-transition: 650ms ease-in-out;
}

/* !featured !music section */
.music {
  padding-top: 25vh;
  min-height: 100vh;
  background-image: url(../img/mus.jpg);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.music .musicGroup {
  width: 100%;
  top: 50%;
  padding: 3em 0;
}

.music .musicGroup:first-of-type {
  padding-top: 2em;
}

.music h1 {
  text-align: center;
}

.outer {
  padding: 7em 0;
  width: 70%;
  text-align: center;
  position: relative;
}

.musBg {
  background: black;
  opacity: 0.4;
  border-radius: 2em;
  border: 0.1px solid rgba(52, 52, 52, 0.5);
  position: absolute;
  min-height: 80%;
  width: 100%;
}

.progressBar {
  width: 80%;
  height: 6px;
  text-align: left;
}

progress {
  width: 0;
  height: 4px;
  background: #0069d9;
  border: 0;
}

#pause {
  display: none;
}

.musControl {
  padding: 0 .5em;
}

.mus-links a {
  color: white;
}

/* Mailing List */

.form-row {
  background-color: #be3b48;
}

.contact {
  padding-top: 2em;
  /* padding-bottom: 2em; */
}

.email {
  text-align: center;
  padding: 30% 0;
  background: cornflowerblue;
  height: 100%;
}

#mailInput, .mailButton {
  border: 0;
  border-radius: 0;
  height: 2em;
}

#mailInput {
  padding: 0 1.2em;
  color: #dc3545;
  font-weight: 900;
}

.mailButton {
  background: #dc3545;
  color: cornsilk;
  font-weight: 300;
  padding: 0 1em;
}

/* !bio area */
.bio {
  padding-top: 25vh;
  min-height: 100vh;
}

.member {
  padding: 2em 0 2em 0;
  min-height: 40vh;
  border-top: 1.5px solid #160f0b;
}

.member h1 {
  text-align: center;
}

.member p {
  padding-top: 2em;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 100px;
  cursor: pointer;
}

.tog {
  padding: 2em 0 2em 0;
  min-height: 40vh;
  border-top: 1.5px solid #160f0b;
}

.tog h1 {
  text-align: center;
}

.tog p {
  padding-top: 2em;
  overflow: visible;
  height: auto;
}

.wes {
  background-image: url(../img/wes_bio-3.png);
  background-repeat: no-repeat;
  background-clip: border-box;
  background-size: cover;
}

.yan {
  background-image: url(../img/yann_bio-2.jpg);
  background-repeat: no-repeat;
  background-clip: border-box;
  background-size: cover;
  background-position: center;
}

.derek {
  background-image: url(../img/d_bio.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-clip: border-box;
  background-size: cover;
}

.nelson {
  background-image: url(../img/nelson_bio.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-clip: border-box;
  background-size: cover;
}

.more {
  cursor: pointer;
}

.bioSocial {
  display: none;
}

/* !events section */
.projects {
  /* height: 100vh; */
  position: relative;
  padding-top: 6em;
}

.projects .row {
  margin: 0 auto;
}

img.projectOne {
  width: 70%;
}

.backy {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  position: absolute;
  z-index: -1;
}

.backy img {
  width: 50%;
  opacity: 0.3;
  padding-top: 2em;
}

.events {
  padding-top: 10px;
}

.events h3 {
  text-align: center;
  width: 100%;
}

.event {
  display: none;
}

.event p > a {
  text-decoration: none;
}

.bioImg {
  width: 50%;
}

.scroll {
  width: 75%;
  text-align: center;
}

/* Advertisment */
.full-width, .main-cont {
  width: 96%;
  margin: 0 auto;
}

.mad {
  margin: .5em auto;
  /* width: 200px; */
  width: 100%;
}

.small-padding {
  padding-top: 3em;
}

/* !footer area */
footer {
  width: 100%;
  color: white !important;
}

footer p {
  color: white;
  font-size: .8em;
  text-align: center;
}

footer p a {
  color: #0069d9;
}

footer .fa-cogs {
  color: white !important;
  font-size: .8em;
}

.vested {
  text-align: center;
}

.vested img {
  width: 50%;
}

@media (max-width: 550px) {
  .img-fade {
    width: 100%;
    text-align: center;
  }
  .img-fade img {
    width: 40%;
  }
  .logo {
    min-height: 100vh;
    padding-top: 4em;
  }
  .announcment {
    background: #f8f9fa;
    color: red;
    animation: scroll-left 10s linear infinite;
    font-size: 15px;
  }
  .music {
    padding-top: 0;
  }
  .outer {
    width: 92%;
  }
  .outer h4 {
    font-size: 1.25em;
  }
  #mailInput {
    width: 55%;
  }
  .scroll {
    padding: 3em 0;
  }
  .skinny {
    width: 90%;
  }
  .social ul > li {
    padding: 0 .6em;
  }
  .time {
    display: none;
  }
  .col-md-1 {
    width: 33.3%;
  }
  .member p {
    padding: 0;
  }
  .marginTop {
    margin-top: 3em;
  }
  .backy img {
    padding: 28em 0;
    width: 80%;
  }
  img.projectOne {
    width: 98%;
  }
  .adverisment {
    padding-top: 12em;
  }
  .small-padding {
    padding-top: 1em;
  }
  .sidebar-right > .adverisment:nth-of-type(1) {
    padding-top: 40px;
  }
  .events {
    padding-top: 25px;
  }
  footer .vested {
    text-align: center;
  }
}

@media (min-width: 551px) and (max-width: 900px) {
  .img-fade {
    width: 80%;
  }
  .time {
    display: none;
  }
  .outer {
    width: 92%;
    min-height: 10em;
    padding: 0;
  }
  .outer .musicGroup {
    padding: 0;
  }
  .music h1 {
    padding-top: 2em;
  }
  .music h1 h4 {
    font-size: 1.25em;
  }
  .adverisment > img {
    max-width: 100%;
  }
}

@media (min-width: 901px) and (max-width: 1350px) {
  .adverisment > img {
    max-width: 150px;
  }
}