/*Instead of constantly changing max-height, just set a bottom-margin for each section... EXTENSIBILITY*/

@font-face {
font-family: 'bebas_neueregular';
src: url('fonts/bebas/bebasneueregular-webfont.woff2') format('woff2'),
     url('fonts/bebas/bebasneueregular-webfont.woff') format('woff'),
     url('fonts/bebas/BebasNeueRegular.tff'),
     url('fonts/bebas/BebasNeueRegular.otf');
    font-weight: normal;
    font-style: normal;

}

@font-face {
font-family: 'allura';
src: url('fonts/allura/Allura-Regular.otf');
    font-weight: normal;
    font-style: normal;

}

body {

    font-family: 'bebas_neueregular', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1em;
    text-align:center;
    /* FONT SHADOW???? zoom in */

    background-color:#1B1B1B;
    color:#4c4c4c;

    overflow-x:hidden;


}

button {

    background-color:#fefeff;
    color:black;
    border: 0.2px solid rgba(0, 0, 0, 0.2);
    border-radius:4px;

    font-size:22px;
    letter-spacing: 0.20em;


}

h1 {
    
    font-size: 42px;
    font-weight:180;
    letter-spacing:1px;

}




/* BRAND before collapse*/
@media screen and (min-width:768px){
    .navbar-brand-centered {
        position: absolute;
        left: 50.12%;
        top:-23px;
        display: block;
        width: 170px;
        text-align: center;

    }
    .navbar>.container .navbar-brand-centered, 
    .navbar>.container-fluid .navbar-brand-centered {
        margin-left: -85px;
    }
}

/* BRAND after collapse*/
@media screen and (max-width:767px){
    .navbar-brand-centered {
        position: absolute;
        top:-23px;
        left:-5px;
        display: block;


    }
}

 /* BURGER DROPDOWN*/
.navbar-toggle {

    top:9px;
}


/* Done to vertically size the navbar and vertically center links*/
.navbar-nav > li > a {padding-top:27px !important; padding-bottom:27px !important;}
.navbar {min-height:72px !important}

.navbar-default {

    background-color:#1B1B1B;
    background-image:none;

    border-color:#1B1B1B;


}


ul.nav li a {

    font-family:'Montserrat', sans-serif;

}

a, a:visited {
    color: #fefeff !important;
}

a:hover, a:active {
    color: #774522 !important;
}



@media (min-width: 1200px){
    .navbar li {
        margin-left : 1.5em;
        margin-right : 1.5em;
    }


    .navbar-left {

        position:relative;
        /* GHETTO... FIX THIS! Here because left and right navbars unequally spaced from middle logo*/
        left:-40px;
    }

    .navbar-right {

        position:relative;
        right:-25px;
    }
}


@media (max-width:1199px) {

    .navbar li {
        margin-left : 0.9em;
        margin-right : 0.9em;
    }

    .navbar-left {

        position:relative;
        /* GHETTO... FIX THIS! Here because left and right navbars unequally spaced from middle logo*/
        left:-55px;
    }

    .navbar-right {

        position:relative;
        right:-44px;
    }

}

@media (max-width: 991px) {

    .navbar li {
        margin-left : -0.05em;
        margin-right : -0.05em;
    }

    .navbar-left {

        position:relative;
        /* GHETTO... FIX THIS! Here because left and right navbars unequally spaced from middle logo*/
        left:-64px;
    }

    .navbar-right {

        position:relative;
        right:-53px;
    }

}

@media (max-width: 768px) {

    .navbar-default {

        height:75px;
    }


    ul.nav li a {

        background-color:#1B1B1B;
    }

    .navbar-left, .navbar-right {

        position:static;
        margin:0;
    }

    .navbar-collapse {

    position:relative;
    top:19px;
    min-height:595px;
    background-color:#1B1B1B;
    
    }



}


#picAndTitle {

    background-image:url(../images/WebsiteBanner.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


 /*   https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image
 -webkit-transition:background-image 0.5s;
     Other vendor-prefixed transition properties 
    transition:background-image 0.5s;*/

    position:relative;
    /* To account for 75px navbar overlapping the section*/
    margin-top:75px;
    height:675px;
    z-index:1;


    /* To have image-overlay stretch full container*/
    padding:0;

}


.image-overlay {

    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    /* OVERLAY EFFECT, stolen from bubs*/
    background-color:rgba(16,8,6,0.4);
    z-index:2;

}

#title {
 
    position:relative;
    top:200px;
    z-index:3;

}

#title h1 {

    font-size:100px;
    font-weight:100;
    letter-spacing:9px;
    color:#fefeff;

}

#title h2 {

    position:relative;
    font-family:'bebas_neueregular';
    left:-307px;
    top:35px;
    font-size: 30px;
    font-weight:100;
    color:#fefeff;
}

#title button {

    position:relative;
    top:30px;
    width:170px;
    height:80px;
    letter-spacing:0.25em;
    font-size:26px;

  
}

button:hover, button:active {

    background-color:rgb(254,254,255,0.7);

}

@media (max-width:1200px) and (min-width:992px) {


    #picAndTitle {

        height:800px;
        margin-top:25px;
    }

    #title {

        top:250px;
    }
} 

@media (max-width:992px) and (min-width:768px) {

    #picAndTitle {

        margin-top:60px;


    }


    #title {

        top:200px;
    }
}

@media (max-width:768px) and (min-width:550px)  {

    #picAndTitle {

        height:680px;
        margin-top:60px;

    }


    #title {

        top:201px;
    }

}

@media (max-width:621px) {

    #title {

        top:111px;
    }
    #title h2 {

        font-family:'bebas_neueregular';
        letter-spacing:9px;
        font-size:90px;
        left:-1px;
        top:27px;
    }
}

@media (max-width:550px) {

    #picAndTitle {

        height:375px;

    }

    #title {

        top:33px;


    }

    #title h1 {

        font-size:57px;

    }

    #title h2 {

        font-size:45px;
        left:0px;
        top:18px;
        font-family:'bebas_neueregular';
        letter-spacing:9px;

    }

    #title button {

        top:14px;
    }
}


.oddSection {

    background-color: #FCF3E8;
    color:#4c4c4c;

}

.evenSection {

/*    background-color:#663b1d;*/
    
    background-color: #4E342E;
    /*background-color:#774522;*/

    color:#fff;
}

.section {

    /* How far h1 will be from top of each container*/
    padding-top:42px;
    min-width:350px;
    text-align:center;
}


p {

    font-family:'Montserrat', sans-serif;
    line-height:28px;
    letter-spacing:0;
    text-transform:none;
    font-size:15px;
    margin:0 auto;
    margin-top:30px;
    width:47.7%;

}

@media (max-width:767px) {

    p {

        width:65%;
    }
}

@media (max-width:550px) {

    p {

        width:90%;
    }
}



#about {

    max-height:1640px;
    min-height:500px;

}


#social-media {

    /* Kinda offcenter for some reason*/
    position:relative;
    right:14px;


}


.fa {

    width: 50px;
    padding:35px 45px;
    font-size: 30px;

}

#youtube {

    position:relative;
    display:inline-block;
    height:350px;
    width:700px;
    min-width:310px;
    margin-top:90px;

    border:10px #4c4c4c solid;
    background-color:black;

    opacity:0.5;

}


/* Sizing of video*/


@media (max-width:1300px) {

    #youtube {

        margin-bottom:50px;
    }
}
@media (max-width:795px) {

    #youtube {

        height: 300px;
        width:600px;
        margin-bottom:30px;
    }

}

@media (max-width:685px) {

    #youtube {

        height: 250px;
        width:500px;
    }

}

@media (max-width:610px) {

    #youtube {

        height:225px;
        width:450px;
    }

}

@media (max-width:525px) {

    #youtube {

        height:200px;
        width:300px;
    }

}

/* social media buttons*/

@media (max-width:638px){

    
    .fa {

    padding:35px 25px;

    }
}


#social-media a, #social-media a:visited{

    color:#4c4c4c !important;
    text-decoration: none;
}

#social-media a:hover{

    color:rgb(174, 163, 151, 0.5) !important


}

#schedule {

    min-height:350px;
    max-height:1000px;

}

#respond {
    max-height: 400px;
}

@media (max-width:1300px) {

    #respond {

        margin-bottom:50px;
    }
}
@media (max-width:795px) {

    #respond {

        height: 300px;
        width:600px;
        margin-bottom:30px;
    }

}

@media (max-width:685px) {

    #respond {

        height: 250px;
        width:500px;
    }

}

@media (max-width:610px) {

    #respond {

        height:225px;
        width:450px;
    }

}

@media (max-width:525px) {

    #respond {

        height:200px;
        width:300px;
    }

}

#schedule img {

    margin-top:25px;
    margin-bottom:50px;
    /*border:4px solid #1B1B1B;*/
}



#members {

    min-height:500px;
    max-height:1000px;

    /* So member-slider-wrapper can take full width of container-fluid*/
    padding-right:0;
    padding-left:0;

}

/* MAKE SURE TO MATCH THIS WITH ACTUAL SLIDER*/
/*Make it underlay carousel*/
#member-slider-wrapper {

    display:inline-block;
    width:100%;
    height:202px;
    margin-top:70px;
    background-color:transparent;


}


/* change to 95%? ask leo to add padding*/
.item {

    width:100%;

}

#member-button {

    width:200px;
    height:60px;
    margin-top:45px;
    margin-bottom:35px;

    font-size:21px;

}

#member-button:hover, #member-button:active {

    background-color:rgb(174, 163, 151, 0.3);

}


@media (max-width:750px) {

    #member-button {

        margin-top:25px;
    }
}

#music {

    min-height:640px;
    max-height:1600px;
    padding:0;
    /* For the old-albums to adjust accordingly*/
    position:relative;

}

.old-albums {

    width:160px;
    height:100%;
    position:absolute;
    z-index:5;
    top:0px;
    margin-top:0;


    background-color:rgb(27, 27, 27, 0.6);

}

#old-albums-right {

    right:0px;

}

#music img {

    height:160px;
    width:160px;
}


#music-wrapper {

      margin-top:55px;
      margin-bottom:50px;
}

#spotify-wrapper {

    display:inline-block;
    width:400px;
/*
    background-color:blue;*/
}

#spotify-wrapper iframe {

    position:relative;
    left:25px;
}


#musc-desc-wrapper {

    display:inline-block;
    position:relative;
    right:15px;
    vertical-align:top;
    width:600px;

}


#musc-desc-wrapper p {

    display:inline-block;
    margin-top:15px;
    width:500px;

}

/* NO MUSC LINK BACKGROUND?*/
#musc-link-wrapper {

    display:inline-block;
    width:500px;
    height:70px;
    margin-top:63px;


    background-color: rgb(76, 76, 76, 0.2);
  

}

.social-media2 {

    /* Kinda offcenter for some reason*/
    position:relative;
    right:14px;
    /* need to fix weird padding*/
    top:-14px;


}


.social-media2 a, .social-media2 a:visited{

    color:#fff !important;
    text-decoration: none;

}

.social-media2 a:hover{

    color:rgb(76, 76, 76, 0.9) !important

}

@media (max-width:1200px) {

    .old-albums {

        visibility:hidden;
    }

    #spotify-wrapper iframe {

        position:static;
    }

    #musc-desc-wrapper {

        position:static;
        
    }

    .social-media2 a{ 

        margin:0 20px;
    }

}

@media (max-width:1003px) {

    #musc-desc-wrapper {

        margin-top:25px;
    }
}

@media (max-width:600px) {


    #musc-desc-wrapper {

        width:auto;
    }
    #musc-desc-wrapper p {

        width:90%;
    }
    #musc-link-wrapper {

        width:90%;
    }

}

@media (max-width:550px) {


}



#tour {

    min-height:300px;

}

.tour-wrapper {

    overflow:hidden;
    margin-top:60px;
    margin-bottom:25px;

}



.inner-tour {

   margin-bottom:60px;

   background-color: rgb(76, 76, 76, 0.1);

}




.carouselContainer {

    width:50%;
    display:inline-block;
    vertical-align:top;
    padding:0px;



}

.tour-desc {

    width:45%;
    display:inline-block;
    vertical-align:top;

}

.tour-desc h2 {

    margin-top:50px;
}
.tour-desc p {

    width:500px;
    margin-top:27px;
    margin-bottom:50px;
}

@media (max-width:1150px) {

    /* For reordering of even sections*/
    .inner-tour {

        display:flex;
        flex-flow:column;

    }

    .carouselContainer {

        /* No longer inline*/
        display:block;
        width:70%;
    }

    .carousel-inner {

        margin-top:50px;
    }

    .tour-desc {

        width:80%;
        margin:0 auto;
    }

    .tour-desc p {

        width:85%;
    }

    #a{order:2;}
    #b{order:1;}


}


/* Make pictures fill screen for mobile*/
@media (max-width:680px) {

    .carouselContainer {

        width:90%;
    }

    .carousel-inner {

        margin-top:35px;
    }

}

@media (max-width:550px) {

    .carousel-inner {

        margin-top:25px;
    }

    .tour-desc p {

        width:95%;
    }
}


#auditions {


    min-height:275px;
    max-height:1000px;
}

#auditions button {

    width:300px;
    height:60px;
    padding:0 5px;
    margin-top:45px;
    margin-bottom:58px;

}

#contact {


    position:relative;
    height:400px;

    background-image:url(../images/dan.jpg);
    background-position: 0px -150px;;
    background-repeat: no-repeat;
    background-size: cover;

  
    z-index:1;

    /* To have image overlay2 stretch full container*/
    padding:0;

}


.image-overlay2 {

    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    /* OVERLAY EFFECT, stolen from bubs*/
    background-color:rgba(16,8,6,0.4);
    z-index:2;

}


.contactTitle {

    position:relative;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:3;
    padding:0;
}

.contactTitle button {

    width:150px;
    height:60px;
    margin:40px 0;


}

.contactTitle h5 {

    color:white;
    font-family:'Montserrat', sans-serif;
    text-transform:none;
    font-size:16px;
    line-height:20px;

}





/* Positioning of background photo*/

@media (max-width: 880px) {

    #contact {

        background-size:120%;
        background-position: -30px -70px;
    }
}


@media (max-width: 690px) {

    #contact {

        height:300px;
    }

    .contactTitle button {

        margin: 20px 0;
    }


}

@media (max-width: 550px) {

    #contact {

        background-size:600px;
        background-position: -30px -50px

    }

    .contactTitle h5{

        font-size:12px;
    }
}

@media (max-width: 455px) {

    #contact {

        background-position: -60px -50px

    }

}





#footer {

    background-color:#1B1B1B;
    color:#fefeff;

    min-height:300px;
    overflow:hidden;
}

/* WHERE DID IT GO?? on MOBILE SCREEN!*/
#copyright {

    float:right;
    font-size:16px;
    position:relative;
    top:75px;

}

@media (max-width:765px) {

    #copyright{

        top:-15px;
    }
}



#footer a {

    width: 120px;
    padding:40px 45px;
    font-size: 30px;

}

.social-media3 a:hover{

/*  color:rgb(130, 130, 130, 0.5) !important*/
    /*color:#774522 !important;*/
    
    /*color: #3E2723 !important;*/
    color: #454545 !important;
    
}






/* FOR RESIZING PICTURE: Just change height of picAndTitle, because pic is just a background pic*/
/* see bubs with picture resizing - changing zoom? */
/*css how to make something disappear after scrolling... make little down arrow fixed at bottom then hidden*/


/* Make there only be one "social media" id*/