@import url('https://fonts.googleapis.com/css?family=Monoton:100,200,300,400,500,600,700|Poiret:100,200,300,400,500|Limelight:100,200,300,400,500|Poiret+One:100,200,300,400,500,600,700,800,900');

/*-------------------------------------------------------Colors------------------------------------------------*/

.color-brand {
    background-color: #a25d5d
}

.color-navbar {
    background-color: #b57d7d;
}

.color-footer {
    background-color: #a25d5d
}

.section-content-homepage {
    background-color: #E49E9E;
}

.section-content-tour {
    background-color: #BDEFCF;
}

.section-albums {
    background-color: #BDEFCF;
}

.section-content-members {
    background-color: #F4E99E;
}

.section-content-former-members {
    background-color: #E49E9E;
}

.hits-side {
    background-color: #F4E99E;
}

.hits-centre {
    background-color: #E49E9E;
}

.privacy {
    background-color: #F4E99E;
}

.contact {
    background-color: #E49E9E;
}

.form-control {
    background-color: #ffffff;
}

/*-------------------------------------------------------Header------------------------------------------------*/

.audio {
    padding-bottom: 25px;
}

header {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.header-bar {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

.header {
    display: block;
    width: 100%;
    min-height: 100px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#nav {
    padding: 20px 20px 0px 20px;
    margin: 0;
}

.brand {
    font-family: "Monoton";
    font-weight: 400;
    font-size: 48px;
    text-align: center;
    color: #ffffff;
    min-height: 100px;
    padding-top: 15px;
}

.nav {
    display: table;
    min-height: 100px;
    margin: 0 0 0 0;
    padding-left: 0px;
    padding-right: 0px;
}

.navitem a {
    width: 100%;
    padding: 30px 30px 30px 30px;
    text-decoration: none;
    color: #ffffff;
}

.navitem span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: "Limelight";
    color: #ffffff;
}

/*-------------------------------------------------------Homepage Section------------------------------------------------*/

.image-banner {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

.band-images {
    margin: 0;
    padding: 0 0 0 0;
}

.band-image-item {
    margin: 0 0 0 0;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
    display: inline-block;
}

.band-image {
    overflow: hidden;
    background-position: center;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    margin: 0 0 0 0;
    padding-left: 0px;
    padding-right: 0px;
}

.section-content-homepage {
    padding-bottom: 30px;
    min-height: 500px;
}

.intro-text p {
    padding-top: 20px;
    font-family: "Poiret One";
    font-size: 18px;
    color: #ffffff;
    text-align: left;
}

.intro-text h3 {
    padding-top: 20px;
    text-align: center;
    font-family: "Limelight";
    color: #ffffff;
}

/*-------------------------------------------------------Members Section--------------------------------------------------------*/

.members-header {
    padding-top: 30px;
    font-family: "Limelight";
    font-weight: 400;
    font-size: 28px;
    text-align: center;
    color: #a25d5d;
}

.supreme-members {
    margin: 50px 100px 50px 100px;
    display: flex;
}

.image-member {
    height: 200px;
    width: 200px;
    border-radius: 50%;
}

.member-info {
    font-size: 18px;
    font-family: "Limelight";
    padding-left: 50px;
    color: #a25d5d;
}

.member-info p {
    font-size: 18px;
    font-family: "Poiret One"
}

/*-------------------------------------------------------Albums Section--------------------------------------------------------*/

.albums {
    padding: 50px 50px 50px 50px;
    margin: auto;
    display: flex;
    max-width: 1000px;
}

.section-content-album {
    text-align: center;
    width: 100%;
    margin: 0px;
}

.album-cover {
    display: block;
    position: relative;
    padding-bottom: 50px;
}

.album-cover:hover:after {
    white-space: pre;
    width: 400px;
    height: 400px;
    background: rgb(128, 128, 128);
    background: rgba(0, 0, 0, .5);
    border: 2px #a25d5d;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
    color: white;
    padding: 12px 12px 0px 12px;
    font-size: 16px;
    margin-left: 15px;
}

.meet-the-supremes:hover:after {
    content: "Side one \A 1. Your Heart Belongs to Me \A 2. Who's Lovin' You \A 3. Baby Don't Go \A 4. Buttered Popcorn \A 5. I Want a Guy \A \A Side two \A 1. Let Me Go the Right Way \A 2. You Bring Back Memories \A 3. Time Changes Things \A 4. Play a Sad Song \A 5. Never Again \A 6. (He's) Seventeen";
}

.supremes-a-go-go:hover:after {
    content: "Side one \A 1. Love Is Like an Itching in My Heart \A 2. This Old Heart of Mine (Is Weak for You) \A 3. You Can't Hurry Love \A 4. Shake Me, Wake Me (When It's Over) \A 5. Baby I Need Your Loving \A 6. These Boots Are Made for Walkin' \A \A Side two \A 1. I Can't Help Myself (Sugar Pie Honey Bunch) \A 2. Get Ready \A 3. Put Yourself in My Place \A 4. Money (That's What I Want) \A 5. Come and Get These Memories \A 6. Hang On Sloopy";
}

.the-supremes-sing-holland:hover:after {
    content: "Side one \A 1. You Keep Me Hangin' On \A 2. You're Gone, But Always in My Heart \A 3. Love Is Here and Now You're Gone \A 4. Mother You, Smother You \A 5. I Guess I'll Always Love You \A 6. I'll Turn to Stone \A \A Side two \A 1. It's the Same Old Song \A 2. Going Down for the Third Time \A 3. Love is in Our Hearts \A 4. Remove This Doubt \A 5. There's No Stopping Us Now \A 6. (Love Is Like a) Heat Wave";
}

.we-remember-sam-cooke:hover:after {
    content: "Side One \A 1. You Send Me \A 2. Nothing Can Change This Love \A 3. Cupid \A 4. Chain Gang \A 5. Bring It on Home to Me \A 6. Only Sixteen \A \A Side Two \A 1. Havin' a Party \A 2. Shake \A 3. Wonderful World \A 4. A Change Is Gonna Come \A 5. (Ain't That) Good News";
}

/*-------------------------------------------------------Hits--------------------------------------------------------*/

.video {
    text-align: center;
    width: 560px;
    height: 315px;
    max-width: 100%;
}

.hits {
    position: relative;
    display: block;
    padding: 0px;
}

#hits {
    display: flex;
    padding: 0px;
    margin: 0px;
}

.section-content-hits {
    padding-bottom: 30px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0 0 0 0;
    min-height: 500px;
    display: inline-block;
    position: relative;
}

.hits-column {
    display: inline-block;
    position: relative;
    padding: 0px;
}

.hits-side {
    font-family: "Limelight";
    font-size: 24px;
    color: #a25d5d;
    padding-left: 20px;
    padding-right: 20px;
}

.hits-side p {
    transform: rotate(-15deg);
    padding-left: 20px;
    padding-right: 10px;
}

.hits-left p {
    padding-top: 150px;
    padding-bottom: 200px;
}

.hits-right p {
    padding-top: 200px;
    padding-bottom: 150px;
}

.hits-centre {
    font-family: "Poiret One";
    font-size: 18px;
    color: #ffffff;
    padding: 30px 25px 100px 25px;
    position: relative;
    text-align: center;
}

.hits-left {
    position: relative;
}

.hits-right {
    position: relative;
}

.hits-centre span {
    font-size: 28px;
    display: block;
    font-family: "Limelight";
    color: #ffffff;
    padding-top: 30px;
}

/*-------------------------------------------------------Tours--------------------------------------------------------*/

.on-tour {
    width: 100%;
    padding-top: 30px;
    font-family: "Monoton";
    font-size: 36px;
    text-align: center;
    display: block;
    color: #a25d5d;
}

.on-tour p {
    padding-top: 20px;
    font-size: 24px;
}

.section-content-tour {
    min-height: 400px;
}

.table-tour-dates {
    margin: 0;
    padding: 0;
}

.table {
    margin-top: 50px;
    margin-bottom: 100px;
}

table {
    font-size: 18px;
    font-family: "Poiret One";
    color: #a25d5d;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

th {
    font-weight: bolder;
}

a {
    text-decoration: none;
    color: #ffffff;
}

.button {
    padding: 8px 8px;
    background-color: #b57d7d;
    border-radius: 15px;
}

.button:hover {
    background-color: #a25d5d;
    text-decoration: none;
    color: #ffffff;
}

th,
td {
    padding: 15px;
    border-bottom: solid 1.5px;
    border-color: #a25d5d;
}

/*-------------------------------------------------------Contact------------------------------------------------*/

.section-content-contact {
    min-height: 550px;
    margin-top: 50px;
    padding-left: 100px;
    padding-right: 100px;
}

label {
    color: #ffffff;
    font-family: "Limelight";
    font-size: 18px;
}

input #textarea {
    min-height: 200px;
}

.marketing {
    font-family: "Poiret One";
    font-size: 16px;
    color: #ffffff;
}

.btn {
    font-family: "Limelight";
    background-color: #a25d5d;
    border-color: inherit;
    color: #ffffff;
    width: 100px;
}

.fans {
    text-align: center;
    font-size: 24px;
    font-family: "Limelight";
    color: #ffffff;
    padding-top: 20px;
}

/*-------------------------------------------------------Privacy------------------------------------------------*/

.section-content-privacy {
    margin: 0 0 0 0;
    padding-top: 100px;
    padding-bottom: 100px;
}

.section-content-privacy span {
    font-family: "Limelight";
    font-size: 24px;
    color: #a25d5d;
}

.section-content-privacy ol {
    padding-top: 20px;
}

.section-content-privacy li {
    font-family: "Poiret One";
    font-size: 16px;
    color: #a25d5d;
    padding-bottom: 20px;
}

.privacy {
    display: block;
    position: relative;
    overflow-x: hidden;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.privacy-policy {
    padding-top: 20px;
    text-align: center;
    font-family: "Limelight";
    color: #a25d5d;
}

/*-------------------------------------------------------Footer------------------------------------------------*/

.footer {
    min-height: 150px;
}

.footer-item {
    display: inline-block;
    text-align: center;
    padding-top: 30px;
}

.footer-item p {
    text-decoration: none;
    color: #ffffff;
    font-family: "Poiret One";
}

.footer-item a {
    text-decoration: none;
    color: #ffffff;
    font-family: "Poiret One";
}

.social-links {
    font-family: "Limelight";
    font-weight: 400;
    font-size: 28px;
    text-decoration: none;
    text-align: center;
    color: #ffffff;
    padding-top: 20px;
    padding-bottom: 0;
}

.social-links li a i {
    color: #ffffff;
    padding-top: 0;
}

footer .subtitle {
    font-size: 18px;
    font-family: "Limelight";
    color: #ffffff;
    text-align: center;
}

/*-------------------------------------------------------Media Queries------------------------------------------------*/

@media only screen and (max-width: 767px) {
    .navitem {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/*-------------Homepage-----------*/

@media only screen and (max-width: 767px) {
    .intro-text {
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
    }
}

@media only screen and (min-width: 768px) {
    .intro-text {
        padding-left: 120px;
        padding-right: 120px;
        padding-bottom: 25px;
    }
}

/*-------------Members-----------*/

@media only screen and (max-width: 767px) {
    .supreme-members {
        display: block;
        width: 80%;
        text-align: center;
        margin: auto;
        padding: 0px;


    }
}

@media (max-width: 767px) {
    .member-info {
        display: block;
        margin: auto;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 30px;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .members-header {
        padding-bottom: 20px;
    }
}

@media (max-width: 1200px) {
    .supreme-members {
        margin: 30px;
    }
}

/*-------------Hits-----------*/

@media only screen and (min-device-width: 0px) and (max-device-width: 575px) {
    .video {
        height: 210px;
        width: 280px;
    }
}

@media only screen and (min-device-width: 0px) and (max-device-width: 767px) {
    .hits-centre {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media (max-width: 991px) {
    .hits-centre {
        padding-left: 50px;
        padding-right: 50px;
    }
}

/*-----Contact---------*/

@media only screen and (min-device-width: 0px) and (max-device-width: 576px) {
    .section-content-contact {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/*-----Albums---------*/

@media only screen and (min-device-width: 0px) and (max-device-width: 568px) {
    .albums {
        max-width: 400px;
        padding: 0px;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 991px) {
    .albums {
        max-width: 600px;
        padding-left: 35px;
        padding-right: 35px;
    }
}

@media only screen and (min-device-width: 0px) and (max-device-width: 568px) {
    .section-content-album {
        text-align: center;
        margin: auto;
        padding-top: 20px;
    }
}

@media only screen and (min-device-width: 569px) and (max-device-width: 991px) {
    .section-content-album {
        text-align: center;
    }
}

@media only screen and (min-device-width: 569px) and (max-device-width: 991px) {
    .album-cover {
        padding-bottom: 50px;
    }
}

@media only screen and (min-device-width: 0px) and (max-device-width: 568px) {
    .album-cover {
        max-width: 280px;
        max-height: 280px;
        margin: 0px;
        padding-bottom: 20px;
    }
}

@media only screen and (min-device-width: 0px) and (max-device-width: 568px) {
    .album-image {
        max-width: 280px;
        max-height: 280px;
        padding-bottom: 20px;
    }
}

/*-------------Tour-----------*/

@media only screen and (min-device-width: 0px) and (max-device-width: 568px) {
    table {
        font-size: 12px;
    }
}