html {
  background-repeat: no-repeat;
  background-position: left center;
  background-attachment: fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #202020;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
}

body {
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  color: #EEEEEE;
  background: transparent;
}

section:first-child {
padding-top: 5px;
}

section {
text-align: center;
padding-top: 26px;
padding-bottom: 26px;
}

section h1 {
margin-top: 0;
}

footer {
text-align: center;
margin: 10px;
}

#logo {
    max-width: 100%;
    height: auto; /* this gets set via js to max viewport height size */
    max-height: 99vh;
}

#title {
    text-align: center;
    font-size: 50px;
}

/*
#watch iframe {
    max-width: 560px;
    max-height: 315px;
    min-width: 375px;
    min-height: 211px;
}
*/

#socialmedia {
float: right;
margin-top: -36px;
}

#socialmedia img {
    border: none;
    height: 32px;
    width: 32px;
    padding: 5px;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Satisfy', serif;
color: #EEEEEE;
}

h1.error {
    font-size: 10em;
}

.nowrap {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .dropdown-menu {
        border: none;
        box-shadow: none;
        margin-top: -10px !important;
    }
}

hr {
    display: none;
    /*
    border: none;
    height: 54px;
    background-image: url(../images/icons/scissors-left.png), 
                      url(../images/icons/scissors-right.png),
                      url(../images/icons/dotted-line.png);
    background-position: left center, right center, center center;
    background-repeat: no-repeat, no-repeat, repeat;
    margin: 0px auto;
    width: 60%;
    */
}

@media (max-width: 400px) {
  .hidden-xxs {
    display: none !important;
  }
  hr {
    width: 90%;
  }
}

@media (min-width: 401px) {
  .visible-xxs {
    display: none !important;
  }
}

/* footer social icons should be on their own line on smallish screens */
@media (max-width: 600px) {
  #socialmedia {
    float: none !important;
    clear: both !important;
    text-align: center;
    margin-top: 0;
  }
}

/* Styles for large social media icon section */
#social img {
    max-width: 110px;
    padding: 15px;
}


@media (max-width: 368px) {
    #social img {
        max-width: 200px;
        padding: 10px 50px;
    }
}

@media (min-width: 640px) {
    #social img {
        max-width: 200px;
        padding: 30px;
    }
}
/* End styles for large social media icon section*/

/* Styles for member bios */
#members div:nth-child(even) {
    float: left;
    clear: left;
}
#members div:nth-child(odd) {
    float: right;
    clear: right;
}
/* uncomment next part out when there are an odd number of members */
/*
#members div:last-child {
    float: none !important;
    clear: both !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
*/
#members div {
    width: 250px;
    padding: 20px;
}
#members img {
    max-width: 125px;
}
@media (min-width: 800px) {
    #members div:nth-child(even) {
        margin-left: 60px;
    }
    #members div:nth-child(odd) {
        margin-right: 60px;
    }
}
@media (min-width: 992px) {
    #members div:nth-child(even) {
        margin-left: 165px;
    }
    #members div:nth-child(odd) {
        margin-right: 165px;
    }
}
@media (max-width: 799px) {
    #members div:nth-child(even) {
        margin-left: 50px;
    }
    #members div:nth-child(odd) {
        margin-right: 50px;
    }
}
@media (max-width: 700px) {
    #members div:nth-child(even) {
        margin-left: 15px;
    }
    #members div:nth-child(odd) {
        margin-right: 15px;
    }
}
@media (max-width: 600px) {
    #members div:nth-child(even) {
        float: none;
        clear: both;
        margin-left: auto;
        margin-right: auto;
    }
    #members div:nth-child(odd) {
        float: none;
        clear: both;
        margin-left: auto;
        margin-right: auto;
    }
}
/* End styles for member bios */

/* Gallery */
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.0001) 100%);
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.0001) 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80FFFFFF', endColorstr='#00FFFFFF', GradientType=1);
  z-index: 1;
  color: #533221;
}
.carousel-control.right {
  left: auto;
  right: 0;
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.0001) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.0001) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0001) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF', endColorstr='#80FFFFFF', GradientType=1);
  z-index: 1;
  color: #533221;
}
.carousel-control:hover,
.carousel-control:focus {
  outline: 0;
  color: #533221;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.carousel-indicators li {
  box-shadow: 1px 1px 1px #533221;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  width: auto;
  margin: auto;
}