body, html {
  height: 100%;
  width: 100%;
}

body{
  background-color: black;
  color: lightgray;
  font-family: 'Raleway', serif;
}

.navbar {
  background-color: rgba(0,0,0,1);
}

#bottom-nav {
  display: none;
}

.main-section, 
.parallax {
  display: none;
}
.main-section {
  width: 100%;
  margin: 0;
  padding: 4rem 1rem;
  box-sizing: border-box;
}

.section-title {
  height: 4.8rem;
}

.parallax {
  position: relative;
  height: 100%;
  background-attachment: scroll;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

#welcome {
  background-image: url(../../images/press/shelton-koncertkirken-crop.jpg);
}

article:nth-of-type(even) {
  background-color: #c7c5b6;
  color: #424f58;
}

#footer {
  background-image: url(../../images/press/shelton-holding.jpg);
}


/* Typography */

a {
  color: #fff;
}

a:hover {
  color: #fff;
}

.download-link {
    
    font-size: .9rem;
    text-align: right;
}

#social-nav {
  padding: 2rem 0;
  box-sizing: border-box;
}

#social-nav a {
  color: #c7c5b6;
  margin: .5rem;
  line-height: 3.2rem;
}

#social-nav a:hover {
  color: #fff;
}

.fa {
  font-size: 2rem;
}

#contact form {
  padding: 2rem 0;
}

/* Buttons */

.btn-primary {
  color: #fff;
  background-color: #c7c5b6;
  border-color: #c7c5b6; 
}

.btn-primary:hover {
  background-color:#c7c5b6;
  border-color: #c7c5b6;
  filter: brightness(95%);
}

.center-message {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: black;
}

.center-message p {
  margin: 1rem 0;
}

.message-box {
  padding: 1rem;
  box-sizing: border-box;
  background-color: rgba(0,0,0,1);
}

.img-main {
  width: 100%;
  height: auto;
}


.soundcloud-player {
  height: 600px;
}

.soundcloud-player iframe {
    width: 100%;
    height: 100%;
}

/* Albums */

#more-albums {
  display: none;
}

#more-albums-title {
  margin-top: 2rem;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity .3s;
}

#more-albums-title:hover {
  opacity: 1;
}

.album {
  padding: .5rem;
  color: black;
  font-weight: 400;
}

.album-image {
  filter: brightness(90%);
  transition: filter .2s;
}

.album-image:hover {
  cursor: pointer;
  filter: brightness(100%);
}

/* Outer Div */
.albumInfo{
  padding: 1%;
  max-width: 100%;
}

/* Inner Div */

.albumDescription {
  position: absolute;
  display:none;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 2rem;
}

.albumDark {
  opacity: 0.3;
  filter: blur(10px);
}

.albumDescription p, 
.albumDescription h3, 
.albumDescription h4 {
  text-align: center;
}

.albumDescription p {
  font-size: .95rem;
}

.albumDescription h3 {
  font-size: 1.2rem;
  font-weight: 400;
}

.albumDescription h4 {
  font-size: 1.2rem;
}


/* Videos */

#videos {
  position: relative;
  min-height: 100vh;
}

.videoDiv {
  position: relative;
  cursor: pointer;
}

.videoDiv div {
  transition: filter .5s;
  z-index: -1;
  filter:blur(5px) grayscale(100%);
  margin-bottom: 2rem;
}

.videoDiv h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}

.videoDiv:hover {
  color: white;
}

.gray-blur {
  filter:blur(5px) grayscale(100%) brightness(80%);
/*  filter:grayscale(100%);*/
  z-index:-1;
}

.hidden {
  visibility: hidden;
}

/*
  ========================================
  Calendar Table
  ========================================
*/

th {
  width: 20%;
  min-width: 4rem;
  font-weight: 300;
  border: none;
}

.table th,
.table td {
  border: none;
}

td:first-of-type {
  width: 40%;
  padding-right: 1em;
}

td:last-of-type {
  width: 30%;
}

/*
  ========================================
  Media sizing - mobile first
  ========================================
*/


@media all and (min-width: 992px) {
  .navbar {
    height: 6vh;
  }
  #bottom-nav {
    display: flex;
    background-color: rgba(0,0,0,0.8);
  }
  .nav-hide {
    display: none;
  }
  .main-section {
    min-height: 100%;
    padding: 5rem 10% 5rem 10%;
  }
  .section-title,
  .center-text {
    text-align: center;
  }
  .center-text {
    
  }
  .parallax {
    /* Create the parallax scrolling effect for wide displays*/
    background-attachment: fixed;
    background-position: center center;
  }
  #welcome {
    background-image: url(../../images/press/shelton-koncertkirken.jpg);
  }
  
  #about, 
  #contact, 
  #sounds, 
  #tonalmasher {
   height: 100vh;
  }
  
  #tonalmasher {
    background: url(../../images/press/tonal-starline.jpg) no-repeat 80% 65%;
    background-size: 80%;
  }
  #tonalmasher img {
    display: none;
  }
  table {
    margin: 10px 0;
  }
  .img-main {
    height: 90%;
    width: auto;
  }
  #social-nav a {
    margin: 0 2rem;
  }
}