.header,
.footer {
    background-color:#643b8b;
    
}

.logo {
    background-color:#643b8b;
    height: 4.0rem;
}

#app{
    background-color:#454345;
    background-image: url(/assets/img/bw.png);
}

.menu {
    background-color:#643b8b;
    height: 4.0rem;
}


.title {
    background-color:#575557;
    height: 2.0rem;
    margin-top: 1.0rem;
}

.movie_poster {
    /* background-color:#454345; */
    height: 28.0rem;
    
}

.movie_info {
    /* background-color:#454345; */
    height: 9.0rem;
    color: #FFF;

}

.movie_trailer {
    /* background-color:#454345; */
    color: #FFF;

}

.cast {
    background-color:#454345;
    color: #FFF;

}

.cast .callout {
    height: 8.0rem;
}

.photo {
    /* background-color:#454345; */
    height: 12.0rem;
}



.photo .callout {
    height: 4.0rem;
    
}

.movie {
    /* background-color: rgb(80, 80, 80); */
    height: 24.0rem;
    
}

.movie .callout {
    height: 23.0rem;
    text-align: center;
    color: #FFF;
}

.did_you_know {
    height: 4.0rem;
}

.did_you_know .callout {
    height: 3.0rem;
}


.copyright {
    background-color:#643b8b;
    height: 2.0rem;
}

.contact {
    background-color:#454345;
    height: 2.0rem;
    text-align: right;
    
}



.photo_slider div {
    height: 10.0rem;
    
}

.slick-dots {
    bottom: 1.0rem;
}

.slick-dots li button::before {
    color: white;
    opacity: 0.75;
    font-size: 12px;
}

.slick-dots li.slick-active button::before {
    color: yellow;

}


.slick-prev {
    left: 1.0rem;
    z-index: 1000;
}

.slick-next {
    right: 1.0rem;
    z-index: 1000;
}

.slick-prev::before,
.slick-next::before {
    opacity: 1.0;
}


.callout {
    border: none;
    background-color: #575557;
}

.hideAll {
    display: none;
}

.splash {
    display: block;
}

#logo{
    position: absolute;
    top:-18%;
    left: 1%;
}

#menu{
    position: absolute;
    right:1%;
}

.card-divider{
    background: #454345;
}

.cast{
    border: 1px solid #575557;
    
}

#poster{
    height: 430px;
}

.movieFooter{
    background-color:#643b8b;
    padding-top: 20px;
    
}

#popular{
    color: #FFF;
    text-align: center;
}

#actorInfo{
    text-align: center;
    color: #FFF;
}

#appearTitle{
    text-align: center;
    color: #FFF; 
}

#photoTitle{
    text-align: center;
    color: #FFF; 
}


#movie1,#movie2,#movie3{
    text-align: center;
    color: #FFF; 
}

img{
    padding: 5%;
}


/* nav */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: -webkit-sticky;
      position: sticky;
      top: 0;
      padding-left: 70%;
  }
  
  li {
    float: right;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover:not(.active) {
    background-color: purple;
    color: white;
  }