/*CSS Reset*/
*{padding:0;margin:0;box-sizing: content-box;border: none;text-decoration: none;outline:none;}
ul{list-style:none;}
a{text-decoration: none;color:white;}
figure{padding:0;margin:0}
img{width: 100%;}

/*IE FIXES*/

header, nav, article, section, aside, footer, main, noscript, figure, figcaption{ display:block; }

main{padding: 2%;}

/*header and navigation*/

header h1{
    font-family: 'industrial_decapitalistRg', serif;
    font-size:5em;
    display: inline;
    color: #FFD700;
    }

header i{display: none;}

header{
    width:100%;
    padding: 0 0 2% 2%;
    position:fixed;
    z-index: 5;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.5);
      }

noscript{
    position: fixed;
    top:0;
    left:0;
    background-color: black;
    display: block;
    width: 100%;
    text-align: center;
    padding: 2%;
    font-size: 2em;
    z-index: 25;
}

main h3 {
    font-size: 1em;
    text-align: center;
    z-index: 6;
    position: fixed;
    font-weight: 900;
    }

main h3:hover{
    color:#FFD700;
    }

html body main#accordion h3.active{
    color: #FFD700;
}

/*general*/

article{
    font-size: 1em;
    position:relative;
    top: 22vh;
    width: 100%;
}

html {
    font-family: 'Verdana', 'quicksandregular', 'bebasneue', sans-serif;
    color: white;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 0 0;
}

body{
    background: rgba(0,0,0,0.6);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.6) ,  rgba(255,255,255,0));
    background: -o-linear-gradient(top,  rgba(0,0,0,0.6),  rgba(255,255,255,0));
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.6),  rgba(255,255,255,0));
    background: linear-gradient(to top,  rgba(0,0,0,0.6)  rgba(255,255,255,0s));
    min-height: 100vh;

}

a:hover{color:#FFD700 ;}

/*music section starts*/

#music h1{
	margin-bottom: 2em}

#musicLink{
	position: relative;
	display: inline-block;
	width 100vw;}
	
#music #musicLink img{
	position: relative;
	display:inline-block;
	width: 22%;}

/*musicians*/



#musicians .flipped img{
    opacity: 0;
    transition: opacity 1s;}

#musicians .flipped figcaption {
    padding: 4%;
    opacity: 0;
    transition: opacity 1s;
    /*background-color: rgba(0, 0, 0, 0.9);*/
    z-index: 12;
    }

#musicians .flipped figcaption {
    opacity: 1;
    transition: opacity 1s;
}

#musicians figure {
    position: relative;
}

#musicians figcaption {
    opacity: 0;
    transition: opacity 1s;
    text-align: left;
    font-size: 1em;
    position: absolute;
    top: 0;
    left: 0;
}


#musicians img {
    width: 100%;
    opacity: 1;
    transition: opacity 1s;
}

#musicians figure.card {
    float: left;
}

#musicians figcaption {
    font-size: 1em;
}

/*gallery section*/



#gallery article{position: relative;}


#gallery figure{
    width: 100%;
    display:none;
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0.9);
    }

#gallery figure img{
    position:absolute;
    z-index:1;
}

#gallery figure i{
    position:absolute;
    font-size:2em;
    z-index:2;
}

/*video section*/

#videos p{
    margin-top: 4vh;
    width: 100%;
    text-align: center;
    font-size: 4vh;
}

/*gigs*/

#gigs h2,p{margin-bottom: 2vh;}
#gigs p a{text-indent: 0}
#gigs time{margin-right: 3vw}
/*here should be specified width for <time> so that locations are aligned. figure this out one day*/
#gigs h2 span, #gigs h2 a{/*color:#FFD700*/}

#gigs time{font-weight: bolder;}

/*contact*/

#contact section{
    width: 35%;
    float: left;
    margin-left: 10%;
    text-align: center;}

#contact section:first-of-type{margin-right: 5vw;}

#contact a i{
    font-size: 5vw;
    margin: 2vw 0 0 2vw;}

#contact h4{margin-bottom: 5vh}

#contact h4 span{/*color:#FFD700*/}

#contact figure, #contact img{
    width: 100%;
}

form{
    text-align: center;
    position: relative;
    }

input, select, textarea{
    font-family: 'quicksandregular', serif ;
    display:block;
    margin: 1vh 0;
    padding: 2%;
    width: 100%;

}

input[type="submit"]{
    position: relative;
    left: 10vw;
    width: 10vw;}

textarea{height: 100px;}

/*Positioning*/

@media screen and (min-width: 900px){
    html{background-image:url('../images/bg/bgFullBand.jpg');}

    main h3{
        top: 4.75em;
        width: 9vw;
    }

    header h3 span{display: none;}

    header h3{display: none;}

    h3:first-of-type{left:35vw}
    h3:nth-of-type(2){left:44vw;}
    h3:nth-of-type(3){left:53vw;}
    h3:nth-of-type(4){left:62vw;}
    h3:nth-of-type(5){left:71vw;}
    h3:nth-of-type(6){left:79vw;}
    h3:nth-of-type(7){left:88vw;}




   /* #music section:first-of-type{width: 33%;}*/

    /*.inactiveControls {
        display: none;
    }
    */
    #musicians figure.card {
        width: 40%;
        margin:1% 0 1% 7% ;
        }

    #gallery img{
        width: 32%;
        margin:0 1vw 1vw 0;
        float: left;}

    #gallery figure{
        height: 340%;
        }

    #gallery figure img{
        width:60%;
        left:20%;
        top:20%;
       }


    #gallery .fa-times-circle{
        left:82%;
        top:20%;
    }

    #gallery .fa-arrow-circle-left{
        top:25%;
        left:82%;
    }

    #gallery .fa-arrow-circle-right{
        top: 30%;
        left:82%;
    }

    iframe{
        width: 30%;
        height: 21vw;}

    iframe:first-of-type,iframe:nth-of-type(2){margin-right: 3vw;}




}