@import url('https://fonts.googleapis.com/css?family=Overpass&display=swap:,200,700|');

/* background colors */

.bg-main {
    background-color: #000000;
}


.bg-bottom {
    background-color: #656363;
}



/* padding elements */

.music-text-pad {
    padding-top: 25px;
}

.tour-text-pad {
    padding-top: 25px;
}

.carousel-pad {
    padding-right: 0;
    padding-left: 0;

}



/* Navbar */

.bg-dark {
    background-color: #000000!important;
}

.nav-item.active .nav-link.navfont {
    color: #8B0000;
}

.navfont {
    color: #FFFFFF;
}

.collapse ul li a {
    transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.collapse ul li a:hover {
    color: #8B0000!important;

}


/* music page elements */

.discog {
    width: 45%;
    height: 45%;
    margin-left: auto;
    margin-right: auto;
}

.video {
    padding: 0;
}



/* images */

.hero-image {
    background-image: url('../images/hero-image.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 70vh;
}

.bio-image {
    opacity: 0.8;
}


.comp-hero-image {
    background-image: url('../images/comp-image.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 80vh;
}

.bio-image-pos {
    padding-left: 10px;
    padding-right: 10px;
}


/* text colors */

/* eminem text in center screen */

.em-text {
    color: #FFFFFF;

}


/* biograpghy text */

.bio-header {
    color: #FFFFFF;
}

.bio-paragraph {
    color: #FFFFFF;
    font-family: 'Overpass', sans-serif;
}


/* lyrics text */

.lyrics-text {
    color: #FFFFFF;
}

.fade {
    -webkit-animation-name: fadein;
    animation-name: fadein;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;

}

.fade-2 {
    -webkit-animation-name: fadein;
    animation-name: fadein;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;

}


/* music page text */

.music-text {
    color: #FFFFFF;
}

.music-text-2 {
    color: #000000;
    font-family: 'Overpass', sans-serif;
    font-weight: 200;

}


/* competition page text */

.comp-text {
    color: #FFFFFF;
}

.comp-text-2 {
    color: #000000;
    font-family: 'Overpass', sans-serif;
}


.tour-text {
    color: #000000;
    font-family: 'Overpass', sans-serif;
    font-weight: 700;
}

.text-size {
    padding-top: 25px;
    font-size: 20px;
    font-weight: 700;
}


/* keyframes */

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


/* footer */

footer {
    background-color: #000000;
}

.social-links {
    padding-top: 50px;
    padding-left: 280px;
    font-size: 25px;
    letter-spacing: 3px;
}

.social-links li a i {
    padding-left: 10px;
    color: #FFFFFF;
    transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.social-links li a i:hover {
    color: #8B0000;
}


/* media queries */

@media (min-width: 300px) {

    .carousel .image-size {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 11em;
    }

}

@media (min-width: 768px) {

    .carousel .image-size {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 13em;
    }

}

@media (min-width: 992px) {
    .carousel .image-size {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 18em;
    }
}

@media (min-width: 1025px) {
    .carousel .image-size {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 25em;
    }
}