styles.css

:root{
    --base-blue:#314152;
    --base-yellow: #FDCE4B;
    --base-black:#333;
    --white:#FFF;
}

body{
    font-family:Lato, sans-serif;
}

nav{
    background-color: var(--base-black);
}

.brand-logo{
    margin-left: 5px;
    outline: none;
}

#HeroImage{
    margin-top: 0;
    height: 500px;
}

.HeroImage__image{
    /* background-position: center center !important; */
    background-repeat: no-repeat !important;
    background-size: 100%, cover !important;
    position: relative;
    animation: animateHeroimage 1s;
    width: 100%;
    height: 100%;
    margin: auto;
}

@keyframes animateHeroimage {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
  }


.HeroImage__description{
    color: var(--white);
    /* max-width: 60%; */
    padding: 20px;
    position: relative;
    top: 63%;
    max-height: 50%;
}

#loadMoreBtn{
    width: 100%;
    margin-bottom: 20px;
}

.card .card-image img{
    min-height: 213px;
    max-height: 254px;
}

@media only screen and (max-width: 600px) {
    .card .card-image img{
        min-height: 213px;
        max-height: 278px;
    }
    
    .HeroImage__image{
        background-position: center center !important;
    }

  }

.card{
    min-height: 446px;
    max-height: 516px;
    max-width: 200px;
}

.card-content p {
    max-height: 85px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.mov-details{
    cursor: pointer;
}

#movieSection__details{
    display: none;
    margin-top: 10px;
}

h3 {
    margin-top: 0;
}

blockquote{
    font-style: italic;
}

#movieSection__details .card-panel .responsive-img{
    max-height: 156px;
}

nav .brand-logo i{
    float: right !important;
    margin-left: 10px;
}

nav .brand-logo {
    display: inline-flex;
    cursor: pointer;
}

i.material-icons.left{
    padding-left: 20px;
    visibility: hidden;
    cursor: pointer;
}

#movieSection__details .card-panel{
    max-height: 370px;
    min-height: 320px;
}

.MovieDisplayGrid__container .card-content{
    min-height: 138px;
}

.actor-card{
    cursor: pointer;
}

.dots-after-text {
    overflow: hidden;
    position: relative;
    max-height: 6.2em;
    text-align: justify;
    margin-right: -1em;
    padding-right: 1em !important;
}

    /* .dots-after-text:before {
        content: '...';
        position: absolute;
        right: -1px;
        bottom: 2px;
    }

    .dots-after-text:after {
        content: '';
        position: absolute;
        right: 0;
        width: 1em;
        height: 50px;
        margin-top: 0.2em;
        background: #FFF;
    } */


    #searchBar .btn-floating{
        float: right;
        top: -44px;
        width: 25px;
        height: 25px;
        line-height: 39px;
        visibility: hidden;
    }

    #searchBar .btn-floating i{
      line-height: 0;
    }