@charset "utf-8";

/*----------------------------------*/
* {box-sizing: border-box}
body {background:#000; max-width:100%; min-width:200px; margin:0;padding: 0;font-family: "Libre Baskerville", serif;} 
div {box-sizing: border-box;margin: 0;padding: 0;border-style: none}
/*img {background-color: #000}
@font-face {
    font-family: myTitFont;
    src: url(fonts/Cinzel-Regular.ttf);
}

@font-face {
    font-family: myTextFont;
    src: url(fonts/LibreBaskerville-Regular.ttf);
    
}*/


#backbug-sm {display: none}
#backbug,#backbug-sm {margin:auto;position:fixed;top:0;left:0;right:0;bottom:0;z-index:-20;width: 60%;padding-top: 4em}
#backbug img,#backbug-sm img {width:100%; opacity: 0.75}



/*---------------------------------------------------------*/

/*navs*/

#mainnavbar {position:fixed;display:inline;width:100%;height:70px;z-index:3;top:0;text-align:center;background:#000;padding: 0;border-bottom:1.25px solid rgba(220,150,0,0.2);}

#topscreennav {display:inline; margin:auto;margin-top:0; z-index: 10;}
#sidescreennav {display:none;}

.navicon {position:fixed;top:0;width:70px;height:70px;margin:auto;cursor:pointer;z-index:5;left:0;right:0;padding:0.5em}
.navicon img{width:100%}

.pulsefade {
 
    cursor: pointer;
    animation-name: fadeinandout;
    animation-duration: 2s;
    animation-timing-function: linear;
    /*animation-fill-mode: forwards;*/
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes fadeinandout {
    from {opacity: 0;}
    to {opacity: 1; }
}

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

.introverlay-content a {}

/* ---------------top nav---------------------------------------------------*/
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    background-color:#000;
    background-color:rgba(2,2,2,1);
    border-bottom: 1.25px solid rgba(220,150,0,0.2);    
    overflow-y: hidden;
    
}



.introverlay-content a, .overlay a {
    display: inline;
    font-family: "Cinzel" ;
    /*font-family: myTitFont;*/
    font-size: 0.85em;
    letter-spacing: 3px;
    text-decoration: none;
    color: #f8a517;
    cursor:pointer; 
    padding: 1em .45em;
    z-index: 200;

}

.overlay a:hover, .overlay a:focus {
    color: #73140b;    
    transition: 0.5s;

}

.introverlay a:hover, .introverlay a:focus {
    color: #73140b;    
    transition: 0.5s;

}

.overlay .closebtn {
    position: relative;
    margin-top: 0px;
    background-color: transparent;    
    font-size: 25px;
}


/*sidenav*/

.sideoverlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    background-color:#000;
    overflow-y: hidden;
    transition: 0.75s;
}

.side-overlay-content {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0px;
    transition: 0.75s;

    
}

.sideoverlay a {
    
    display: block;
    font-family: "Cinzel" ;
    /*font-family: myTitFont;*/
    font-size: 1.1em;
    letter-spacing: 5px;
    text-decoration: none;
    color: #f8a517;
    padding: 1.1em 0;
    cursor:pointer; 
    z-index: 200;
}

.sideoverlay a:hover, .sideoverlay a:focus {
    color: #ffe299;
    color: #73140b;
    transition: 0.5s;

}

/*---------------------endnavs------------------------------------------------------------*/


#introbodycont{margin: auto; width:100%}
#bodycont{width:100%;margin-top: 40px;}
#content,#musiccontent {margin:auto;margin-top:0px;max-width:100%;text-align:center;padding: 8%}
#music {margin-bottom: 250px}
.div-op {max-width:95%; margin:auto; margin-bottom: 10%; padding: 1.5em 0.25em; background:rgba(0, 0, 0, 0)}

.row:after,.row:before,.row-padding:after,.row-padding:before,
.cell-row:before,.cell-row:after,.clear:after,.clear:before,.bar:before,.bar:after{content:"";display:table;clear:both}

.archcontainer:after,.archcontainer:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,


/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
    
/* Create two unequal columns that floats next to each other */
.column {float:left;}
    
.top,.w3-bottom{position:fixed;width:100%;z-index:1}.top{top:0}.w3-bottom{bottom:0}    
 .bar{display:inline-block;width:auto}
        
.modal-container,.w3-container,.container {padding:0.01em 16px; } 
    

.whole{width:100%}   
.center{text-align:center!important}
.half{float:left;width:50%}   
.quarter{float:left;width:24.99999%;padding:0;}   
.fifth{float:left;width:19.99999%;padding:0;}   
.sixth{float:left;width:16.666666%;padding:0;}   
.tenth{float:left;width:10%;padding:0;}   
.albumquarter{float:left;width:24.99999%;padding:0;}   
.threequarter{float:left;width:74.99999%;padding:0;}   
.albumthreequarter{float:left;width:74.99999%;padding:0;}   
.third{float:left;width:33.33333%;padding:0;}   
.lyrixthird{float:left;width:33.33333%;padding:0;}   
.twothird{float:left;width:66.66666%;padding:0;}
#hidden {width: 300px;height: 400px;margin-top: 20em;visibility: hidden}
#hidden-a {width: 100%;height:100PX;margin-top: 5em;visibility: hidden}
.discopix {padding:0 3em }   
.discothird {float:left;width:33.33333%;text-align: center; height:100%}
.discoquarter {float:left;width:25%;text-align: center; height:100%;padding: 1em}
.disco-threethird {float:left;width:33.33333%;padding:0.75em 3em;text-align: center}
.albumcover {padding:0em; width:100%;border:1px solid #111;}
.albumcover:hover {opacity: 0.65}
.lyricscover {padding:1em; width:100px;text-align: center}
.lyricscontainer {padding:0 8%;}

#lyrixcontainer{padding:1%;}
.albumcontainer {padding:1% 2%;}
.biotext-content {padding:2em}
.albuminfo {}

.bioheadercontainer {margin:2em 0;padding: 2em}
.bioheadercontainer img {width:100%; opacity:1}
.bioimg {padding: 0.2em}
#poem {padding: 6em}
#poem p {line-height: 1.5}

.semi-op {opacity: 0.85}

img.op {opacity: 0.8; width:100%;}

.essay { margin-bottom: 5em;padding: 1em 2em;text-indent: 1em;text-align:center;text-align:left}
#poem {padding:2em 3em}



/*------------text elements*---------------------------*/

p  {   font-family: "Libre Baskerville", serif;
        /*font-family: myTextFont;*/
        font-size: .95em;
        color: #c2c2c2;color:#f8a517;
        letter-spacing: 1px; 
        line-height: 1.75   
}


.biotext-content p {letter-spacing: 1px}

p a {color:#999;text-decoration: none}
a:hover {color:#ffa857;text-decoration: none}
#emailink a:hover {color:#550000}

h1 {
        font-family: "Cinzel", serif;
        /*font-family: myTitFont;*/
        font-size: 1.3em;
        letter-spacing: 4px;
        background-color:#030303;
        line-height: 1.25;
        color:#f8a517;
        text-align: center;
        margin-bottom:1em; 
        background-color:#030303;    
        background-color:rgba(5,5,5,0.5);
        padding: .25em 0
    }

h2 {   
        letter-spacing: 3px; 
        color:#f8a517;
        font-family: "Cinzel", serif;
        /*font-family: myTitFont;*/

        font-size: 1.2em;} 




h3 {font-family: "Cinzel",serif;
    /*font-family: myTitFont;*/

    font-size: 1.15em;
    color:#f8a517;
    letter-spacing: 2px;}


    a  {text-decoration: none}
    .essay p {line-height: 2.125; letter-spacing: 3}
    .enter,.lyrix,.return {display: inline-block;z-index: 50;font-size: 1.1em;font-family: "Cinzel", sans-serif;/*font-family: myTextFont;*/
        color:#f8a517;letter-spacing: 3px; padding: 1em;}

    .galltit {margin-bottom:0.75em;padding: 0.25em 0}

    .enter a {color: rgb(255,0,0);}
    .enter a:hover {color:#ffb83d;transition:0.5s}

    .lyrix a, .return a {color:#f8a517;}
    .lyrix a:hover, .return a:hover {color:#ff2814;transition:.5s}
    .twothrdsem {font-size: 0.65em}
    .song-title {font-family: "Cinzel";
    /*font-family: myTitFont;*/
    font-size: 1.1em;
    letter-spacing: 2px;
    cursor: default;
    padding: 2em 0;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    background:none;
    color: #ff2814;
}

 
.songlyrics {margin-bottom: 6em}
.songlyrics p {font-family: "Cinzel";font-size 0.95em;line-height:0.75;color: #ffb83d;}
#quote p, h2 {font-size: 1.15em}


 /******************end text elements*/



.w3-animate-fading20{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1; border-bottom:1px solid #4d4d4d;}
.w3-top{top:0}.w3-bottom{bottom:0}
    

.anchor {
    display: block;
    margin-top:-6.25em;
        height:6.5em;
    visibility: hidden;
        /* 
        content: " ";
         
        pointer-events: none;*/
}

.gallanchor {    display: block;
    margin-top:-5em;
        height:5em;
    visibility: hidden;}


.top-left {
    position: absolute;
    top: 0;
    left: 1em;
}




/*************albuminfo + lyrics***********************/


.albumart {padding:0 32%;margin-bottom: 3em}
.albumflip img{width:100% } 


#visage-flip{background:url(../images/visage-bck.jpg);background-size:contain;}


#merain-flip{background:url(../images/music/merain-bck.jpg);background-size:contain;}
#emerald-flip{background:url(../images/music/em-bck.jpg);background-size:contain;}
#lum-flip{background:url(../images/music/lum-bck.jpg);background-size:contain;}
#saints-flip{background:url(../images/music/snt-bck.jpg);background-size:contain;}
#organ-flip{background:url(../images/music/org-bck.jpg);background-size:contain;}
#spirit-flip{background:url(../images/music/spir-bck.jpg);background-size:contain;}
#city-flip{background:url(../images/music/cit-bck.jpg);background-size:contain;}
#merev-flip{background:url(../images/music/merev-bck.jpg);background-size:contain;}
#drone-flip{background:url(../images/music/dron-bck.jpg);background-size:contain;}
#med-flip{background:url(../images/music/med-bck.jpg);background-size:contain;}
#altevo-flip{background:url(../images/music/altevo-bck.jpg);background-size:contain;}
#moto-flip{background:url(../images/music/mot-bck.jpg);background-size:contain;}
#fade-flip{background:url(../images/music/fad-bck.jpg);background-size:contain;}
#detach-flip{background:url(../images/music/det-bck.jpg);background-size:contain;}
#super-flip{background:url(../images/music/super-bck.jpg);background-size:contain;}
#pop-flip{background:url(../images/music/cult-bck.jpg);background-size:contain;}
#sumluv-flip{background:url(../images/music/sumluv-bck.jpg);background-size:contain;}
#sancdom-flip{background:url(../images/music/sancdom-bck.jpg);background-size:contain;}
#oddydrn-flip{background:url(../images/music/oddydrn-bck.jpg);background-size:contain;}
#newlive-flip{background:url(../images/music/newlive-bck.jpg);background-size:contain;}
#tok24-flip{background:url(../images/music/tok24-bck.jpg);background-size:contain;}
#mesc-flip{background:url(../images/music/mesc-bck.jpg);background-size:contain;}
#night-flip{background:url(../images/music/night-bck.jpg);background-size:contain;}
#shin-flip{background:url(../images/music/shin-bck.jpg);background-size:contain;}
#they-flip{background:url(../images/music/they-bck.jpg);background-size:contain;}











.albumflip {
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    border: 1px solid #111;
    margin-bottom: 1em;
    padding: 0
        
}        
.stores {margin: auto; padding: 0}

.stores img {width:70%; padding:}
.left {float: left;width:50%;padding: 0 2em 0 0}
.right {float: right;width:50%;padding: 0 0 0 2em }
.stores a:hover{opacity: 0.5}

.fullalbumcover:hover{color:none;opacity: 0; } 

.buybut {  
    
  margin:auto;
  width: 35%;
  text-align:center;
 

  padding: 0em;
}


/*galleries*/

.gold {background-color: #b37d00}
.mob-img {display: none}    
    
.archsection {}

 /*----modal slideshow galleries--*/


.lite-gall {margin:auto;width: 85%;padding: 0.5em 0.5em 0 0}
.full-width-centered {margin:auto;width:100%}
    
    
.lite-row {    
    display: flex;
    flex-wrap: wrap;   
    flex-direction: row;
    justify-content: center;}

 

.lite-column {

    -ms-flex:16.66666%;
    flex:16.66666%;
    max-width:16.66666%;
    flex-direction: column;
    padding:0 0 0 0.5em ;
    
}

.flex-twelve-six-three{
    
 -ms-flex: 8.33333%;
    flex: 8.33333%;
    max-width: 8.33333%;
    flex-direction: column;
    
}

.flex-ten-five-two{
    
 -ms-flex: 10%;
    flex: 10%;
    max-width: 10%;
    flex-direction: column;
    
}
    
.lite-column img {
    margin: 0 0 0.5em 0;
    opacity: 0.85; 
    width: 100%;
    cursor: pointer;
}

.lite-column img:hover {box-shadow: 0px 1px 10px 1px rgba(220, 150, 1, 0.35);opacity: 1; transition: 0.15s;}

/* The litemodal (background) */
    
.mob-img {display: none}  

.litemodal {
    display: none;
    position: fixed;
    z-index: 300;
    padding-top: 30px;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.9);
 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

/* litemodal Content */
.litemodal-content {
    position: absolute;
    margin: auto;
    padding: 0;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width:1100px;
    min-width: 200px;
    margin-top: 10px
}
    
.litemodal-content img {margin:auto;right:0;left:0;width:100%;height: auto;max-height: 1000px; object-fit: scale-down}
.liteSlides img { }
.paintingSlides img { }
.sculpturelides img { }
.decorativeSlides img {}

      
/* The Close Button */
.close {
    background-color: #000;
    border-bottom: 1.25px solid rgba(220,150,0,0.2);
    color: #f8a517;
    position: fixed;
    top: 5px;
    right: 0;
    left: 0;
    margin-bottom: 5px;
    font-size: 3em;
    font-size: 0.75em;
    font-weight: normal;
    z-index: 50;
}

.close img {width:auto;height: 60px;opacity: 1;padding-bottom: 5px}
.close img:hover {opacity: 0.5;transition: 0.75s}

.close:hover,
.close:focus {
  color: #440000;
  text-decoration: none;
  cursor: pointer;
}

.liteSlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 8px;
  margin-top: -50px;
  color: #f8a517;
  font-weight: bold;
  font-size: 2em;
  opacity: 0.36;    
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
  z-index: 500
}

/* Position the "next button" to the left and right */

.next {right: -80px;}
.prev {left: -80px;}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  /*background-color: rgba(0, 0, 0, 0.8);*/
    opacity: 1;
    color: #f9ad43;
    color: #ffd485
}


/* title text (names) */
.titletext {  
    
  margin:auto;
  width: 100%;
  text-align:center;
  position: relative;/*top*/
  position: absolute;/*bottom*/     
  bottom: -30px;left:0;right:0;
  background:rgba(0, 0, 0, 0.5);    
  color: rgb(250,150,1);
  font-size: 1.2em;
  font-family: "Cinzel";
  padding: 0em;
}

.tmp_op {opacity: 0.25}

/****end galleries****/


 /*********queries*****************/



@media screen and (max-width:1400px){
    
/*12 columns .flex-twelve-six-three {-ms-flex: 8.33333%;flex: 8.33333%;max-width: 8.33333%;padding:0 0 0 0.5em ;}*/

    
.albumart {padding:0 29%}
.next {right: -3px;}
.prev {left: -3px;}
    
}

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

    #content,#musiccontent {padding: 5%}
    
                .flex-twelve-six-three {
                -ms-flex: 16.66666%;
                flex: 16.66666%;
                max-width: 16.66666%;
                padding:0 0 0 0.5em ;}
    
    
}

@media screen and (max-width:1100px) {
    
    #backbug {width: 85%}
    
    .div-op {max-width:96%; margin-bottom: 8%; padding: 1em}
   
    .albumart {padding:0 21%}

    .lite-gall {margin:auto;width: 94%}
    .full-width-centered {margin:auto;width:100%}
}


@media screen and (max-width: 1000px)  {
    
                .flex-ten-five-two {
                -ms-flex: 19.99999%;
                flex: 19.99999%;
                max-width: 19.99999%;
                padding:0 0 0 0.5em ;}

    
    .overlay a {padding: 0.75em .3em;}   

}
   
@media screen and (min-width:850px){   
    
    .third {width:33.3333%;}
    #content,#musiccontent {max-width:100%}

}

@media screen and (max-height:900px) {    
    
    .litemodal-content img {max-height:600px}
}

@media screen and (max-width:850px){ 
    
        #topscreennav {display:none;}
        #sidescreennav {display:block;z-index:10; text-align:center; padding:0em; margin-top:0px;background-color:#000;}
        #backbug {width: 100%;padding-top: 3em}
        .div-op {max-width:98% }
        .third {width:100%;}
        .twothird {width:100%;}
        .bioheadercontainer {margin-bottom:0;padding:0.5em}
        .half{float:none;width:100%} 
        .discoquarter {width:50%;padding: 1.25em}
        .albumpage {padding:}
        .albumflip {margin-bottom: 1em}
        .albumart {padding:0 14%}
        .enter {font-size: 0.8em;margin-bottom: 0.75em}
        .lite-gall {margin:auto;width: 96%}
        .full-width-centered {margin:auto;width:98%}
        /*.flex-twelve-six-three {-ms-flex: 16.66666%;flex: 16.66666%;max-width: 16.66666%;padding:0 0 0 0.5em ;}*/
        .litemodal-content {padding: 0 2em}

}


/*700*/

@media screen and (max-height: 775px) {
    
        .litemodal-content img {max-height:550px}

}

@media screen and (max-width: 700px) {
    
    
    #backbug {width: 100%;padding-top: 4em}
    .anchor {
    display: block;
    margin-top:-5.5em;
    height:5.5em;
    visibility: hidden;
    }

    .essay { margin-bottom: 2em;padding: 0.5em}
    .albumart {padding:0 8%;margin-bottom: 5em}      
    .discoquarter {padding: 0.75em}
    .songlyrics p {
        font-size: 1em;
        line-height:1.25;}
}
    
    
/*625*/

@media screen and (max-width: 625px) {
        
    #content,#musiccontent {padding: 2%}   
    .full-img {display: none}    
    .mob-img {display: block}
    .gallery img {cursor: pointer;width:100%;padding:0em}
    .lite-gall {width: 98%}
    .litemodal-content {padding: 0 2em}
    /*.close img {height:45px}*/
 
}
    
@media screen and (max-height: 650px) {
    
        .litemodal-content img  {max-height:425px}
}    
    

/*550*/
@media screen and (max-width: 550px) {

    #backbug {display: none}
    #backbug-sm {display: block;width: 100%}
    h1 {font-size:1.1em;letter-spacing: 2.5px;margin-bottom:1.5em }               
    .top-left {position: absolute;top: 1em;left: 2em;}
    .albumpage {padding:;margin-top: 2em}
    .albumflip {margin-bottom: 0.5em}
    .bioheadercontainer  
    .bioimg {width:50%}
    .discopix {padding:0  }   
    .discoquarter {width:100%;padding: 1.5em 12%}
    .lite-column {-ms-flex:33.33333%;flex:33.33333%;max-width:33.33333%;padding:0 0 0 0.5em ;}
    .flex-twelve-six-three {-ms-flex: 33.33333%;flex: 33.33333%;max-width: 33.33333%;padding:0 0 0 0.5em ;}
    .flex-ten-five-two {-ms-flex: 49.99999%;flex: 49.99999%;max-width:49.99999%;padding:0 0 0 0.5em ;}    


}

   
@media screen and (max-height: 550px) {
    
    .litemodal-content img {max-height:300px}

}


@media screen and (max-height: 450px) {
    
    .overlay {overflow-y: auto;}
    .overlay a {font-size: 16px;}
    .overlay .closebtn {
        font-size: 25px;
        top: 0px;     
        left: 0px;
        font-size: 25px;
  }
    
    .albumpage {padding: 0 5em}
    

    
}
    
    
/*450*/
@media screen and (max-width: 450px) {
    

    .overlay-content {
        text-align: left;
}    
    .overlay {overflow-y: auto;}
    .overlay a {font-size: 1.1em;display: block;}
    .overlay .closebtn {
        font-size: 25px;
        top: 0px;
        left: 0px;
    }
    
    .disco-threethird {padding:0.5em}
    .lite-gall {width: 100%}

    /*.lite-column {-ms-flex: 50%;flex: 50%;max-width: 50%;padding:0 0 0 0.5em ;}*/

}


/*400*/
@media screen and (max-height: 400px) {
    
    .litemodal-content img {max-height:200px}
    /*.flex-twelve-six-three {-ms-flex: 33.33333%;flex: 33.33333%;max-width: 33.33333%;padding:0 0 0 0.5em ;} */
    .flex-ten-five-two {-ms-flex: 49.99999%;flex: 49.99999%;max-width:49.99999%;padding:0 0 0 0.5em ;} 
}