@charset "utf-8";

/*----------------------------------*/
* {box-sizing: border-box}
body {background-color:#000;max-width:100%; min-width:300px} 
div {box-sizing: border-box;}
/*navs*/
#mainnavbar {position:fixed; display:inline; z-index: 3; width:100%;top:0; 
    background-color: rgba(0,0,0,0); text-align: center;
    /*border-bottom:1px solid #555;padding-bottom:3px;*/
    box-shadow: 0px 15px 15px 10px rgba(20,20,20,1) ;
    box-shadow: 0px 15px 15px 12px rgba(0,0,0,1) ;
}

#topscreennav {display:inline; margin: auto;z-index: 5;}
#sidescreennav {display:none;}


/* top nav*/
.overlay {
    height: 8%;
    width: 100%;
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    background-color: rgba(5,5,5,1);
    overflow-y: hidden;
    transition: 0.75s;
}

.overlay-content {
    position: absolute;
    width: 100%;
    text-align: center;
    margin-top: 1%;
    
}

.overlay a {
    padding: 1.3em;
    text-decoration: none;
   
    color: #929292;
    color: #ff8d29;
    color: #ff7600;

    display: inline;
    transition: .75s;
}

.overlay a:hover, .overlay a:focus {
    color: #ffe4cc;
}

.overlay .closebtn {
    position: relative;
    margin-top: 0px;
    background-color: #000;    
    font-size: 26px;
}

.menutitle {
        font-family: "Syncopate", sans-serif;        
        font-family: "Marcellus";
        font-size: 1em;
         
        letter-spacing: 5px; 
        color:#555; 
        text-decoration: none;
        cursor:pointer; 
       
}

span {font-size:28px;color:#fff;cursor:pointer;}
span:hover {font-size:28px;color:#fb8028;cursor:pointer;transition: 0.5s}

/*sidenav*/

.sideoverlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,1);
    overflow-y: hidden;
    transition: 0.5s;
}

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

    
}

.sideoverlay a {
    padding: 1em;
    text-decoration: none;
   
    color: #818181;
    display: block;
    transition: .75s;
}

.sideoverlay a:hover, .sideoverlay a:focus {
    color: #ff7600;
}

.sideoverlay .sideclosebtn {
    position: relative;
    margin-top: 0px;
    background-color: #000;    
    font-size: 25px;
}

.sidemenutitle {
        font-family: "Marcellus";
        
        font-size: 0.85em;
        letter-spacing: 5px; 
      
        text-decoration: none;
        cursor:pointer; 
    
}
.menutitle:hover,#sesso:hover {color: #fff;transition: 0.7s;}

/*endnavs*/



footer {
   position: fixed;
    height:auto;
  min-width:300px
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #111;
   color: #fff;
   text-align: center;
    padding: 0.15em;
    box-shadow: 0px 15px 10px 15px rgba(10,10,10,1) ;
}




#bodycont{max-width:100%;margin:1080px 0 80px 0;padding:2%}


/*video*/


#fire {background-color:#000;position:fixed;width:100%;z-index:-2;} 

#bgvid2 {display: none;
        }  
   
    video#bgvid, video#bgvid2 { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    max-height: 100%;    
    /*min-height: 100%;*/
    
    padding-top:40px;     
    padding-bottom:50px;     
    /*height: auto;*/
    z-index: -1;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    /*background: url(images/tmp.jpg) no-repeat;*/
    background-size: cover;
}        
        
/*---------------------------------------------------*/
        
        
/*video*/

#fadingvideo{margin:auto; width:100%}


#flameone,#flametwo {margin:auto;background-color:#000;position:fixed;width:100%} 
  
video#flameonevid, video#flameonevidsm, video#flametwovid, video#flametwosm {
    
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    max-height: 100%;    
        
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);      
    z-index: -100;
    background-size: cover;  
    padding-top:40px;     
    padding-bottom:50px;}

.centered {position: fixed;top:38%;left: 50%;transform:translate(-50%, -50%);background:none;z-index:100;cursor: pointer}
.centered img {opacity: 0}  

            /*-----fades----*/
    
div#flameone,div#flameonesm {
  
    animation-name: fadeout;
    animation-duration: 3s;
    animation-fill-mode: both;
    animation-delay: 0s;
    animation-iteration-count: 1; 
    animation-timing-function: linear;
    animation-direction: normal;
         
}

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

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

    
div#flametwo,div#flametwosm {

         
    animation-name: fadeinandstay;
    animation-duration: 3s;
    animation-fill-mode: both; 
    animation-delay: 3s;
    animation-iteration-count: 1; 
    animation-timing-function: linear;
    animation-direction: normal;
         
}

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

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

    }
        
  
/*endvideo*/

#bioanchor,#lyricsanchor, #discoanchor {padding-top:80px}
.anchor {height: 100px;background-color: rgba (0,0,0,0)}
#linksanchor {padding-top:80px;}
#lilanchor, #vinanchor, #lilanchorresp,#vinanchorresp,.albanch {padding-top:40px}
        

.div-op {max-width:100%;margin:0 0 8% 0;padding: 3%; background:rgba(0, 0, 0, 0.8); border:0.5px solid rgba(10, 10, 10, 0.85);}

.whole{width:100%;padding:1em;}   
.modalwhole{width:100%;padding:1em;border: 1px solid #000}   
.center{text-align:center!important}
.half{float:left;width:49.99999%;padding:1%;}   
.discohalf{float:left;width:49.99999%;padding:1em 3em;}   
.modalhalf-right{float:left;width:49.99999%;padding:1em;}   
.modalhalf-left{float:left;width:49.99999%;padding:1em;}   
.quarter{float:left;width:24.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;} 

#biography, #discography, #lyrixcontainer {padding: 1% 3%}
#lyrixcontainer{background-color:rgba(10, 10, 10, 0.75)}

#liliko,#vin{background:rgba(9, 9, 9, 0.35);border:0.5px solid #050505;padding:2% 1% 0 1%;margin:3% 0 5% 0;}
#vinheader,#lilheader {position:relative; padding:0}
#lilfilm,#vinfilm {padding: 2em }
.biotext-content {padding:6em 2em 2em 2em}
.bioheadercontainer {position: relative;}
.largebioheader {width:100%; opacity: 0.65; padding: 0 2.5em }
.largebiofilm {width:100%;padding: 3em 0; opacity: 1}
.smallbioheader {display:none}
.smallbiofilm {display:none;}
#bigscrdiscicons {margin:3em 0}
#bigscrdiscicons img {margin:0.15em 1.5em}

.discopix {margin-bottom:1em;padding:2em }
.discothird {float:left;width:33.33333%;padding:1%;text-align: center; height:100%}
.disco-threethird {float:left;width:33.33333%;padding:0.75em 3em;background:rgba(9, 9, 9, 0.35);text-align: center}
.albumcover {padding:0; width:100%;opacity: 0.8;}
.discothird img {border:1px solid #333}
.halfborder {border:1px solid #ff8d29}
.albumcover:hover{color:none;background:none;opacity: 1} 
.albumcontainer {padding:1% 2%;border: 0.5px solid rgba(10, 10, 10, 0);}

.albuminfo {border:1px solid #070707;background:rgba(10, 10, 10, .5)}

#downloads {max-width:70%;margin:auto; padding:3%; background:rgba(0, 0, 0, 0.7);border:0.5px solid rgba(10, 10, 10, 0.75);}

.downloadlinks {margin:auto;background:rgba(10, 10, 10, .5);padding: 2%;text-align: center}



.notes  {width:35%;padding: 0 0.75em}
#frontbackcover {width: 65%;padding:  0.75em}
/*.iconhalf {width:49.99999%; text-align: center; }*/
.iconhalf {width:100%;padding-bottom: 1em}
.discicons, #visicons, #wallicons, #greyicons {width: 100%;margin: 2em 0;background: rgba(10, 10, 10, 0.5);text-align: center}
.discicons {margin: 2em 0 10% 0}
#visicons img {width:100%; height:auto;padding:0 35%;border: none}




.discopix-three {padding:1em 25% }
.discopix-three img {width:100%}   


.lyricscover {padding:1em; width:100px;text-align: center}
#proto, #featured {padding: 1em;background:rgba(9, 9, 9, 0.5)}
#proto img, #featured img {width:100%;padding:0 ;}  
.coverlinx { width:100%; padding: 2em}
.coverlinx a {font-size: 2em; color:#fff; padding: 0 0.5em;display: inline}
img.op {opacity: 0.8; width:100%;}
#preview {padding: 2em}
#sesso {color:#888;font-weight: 900;}





.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}

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

/* 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; } 
    
.cont-op {background: rgba(96, 96, 96, 0.5);}
    
.sub-content{max-width:800px;background: rgb(16,16,16); }    
    
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.9)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
    
.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}
    


/*text elements*/

h1, .content-title {
        
        font-family: "Marcellus", sans-serif;
        font-size: 1.6em;
        letter-spacing: 6px; 
        color:#d4d4d4;
        text-align: center;
        /*text-align: left;*/
        margin-bottom: 2em 
        }

h2  {    font-family: "Marcellus", sans-serif;            
        font-size: 1.25em;
        letter-spacing: 4px; 
        color:#e00000;
}


h3 {font-family: "Marcellus", sans-serif;
    font-size: 1.1em;
    color:#ff9233;
    letter-spacing: 3px;}

h4 {font-family: "Marcellus", sans-serif;
    font-size: 0.9em;
    color:#ff9233;
    letter-spacing: 2px;}

p, pre {
    font-family: "Open Sans", sans-serif;
    font-family: "Montserrat", sans-serif;
    font-family: "Lato", sans-serif;
    font-family: "Raleway", sans-serif;
    font-size: 1em;
    color: #fafafa;
    letter-spacing: 1.5px; 
         
}
p { text-indent:0.75em;
    text-align:left;
    text-align:center
}
.biotext-content p {letter-spacing: 1px}
.notes p {text-align: left; letter-spacing: 1px}

p a {color:#ff9233;text-decoration: none}
a:hover {color:#999;text-decoration: none}
h3:hover {color:#ff9233;text-decoration: none}
 

.bioheadercontainer h2 {font-size:1.5em}
#preview h2 {color:#ff8d29;}
#preview h2:hover {color:#880000}
#preview a {text-decoration: none}

.other {font-size:1.1em;text-align: center}

.iconhalf a:hover {opacity: 0.5}

.bioicons a {font-size: 1.75em; padding: 0 1em 0 0;float:right}


    button {cursor: pointer;display:inline-block;border-style: none;padding: 0;background-color: transparent}
    button img{border-style: none;padding: 0; width:100%}
    button:hover{color:none;background:none;opacity: 0.5}
#lyrixbutton h1 {color:#ff8d29; font-size: 1em;text-align: center}
#prebutton h1 {color:#ff8d29; font-size: 1em;text-align: center}
#lyrixbutton h1:hover {color:#aa0000}
#prebutton h1:hover {color:#aa0000}
.downloadlinks a {
    display:block;
    text-decoration: none;
    font-family: "Raleway", sans-serif;
    font-size: 1em;
    color:#777;
    letter-spacing: 1.2px;
    padding: 5px
    }
.downloadlinks a:hover {color:#ff9030;text-decoration: none;opacity: 1;transition: 0.5s}
ul {text-align: center}
li {list-style-type: none}
a  {text-decoration: none}
#biography p {text-align: left}
.textcenter {text-align: center}



.quote {font-family: "Marcellus", sans-serif;
    font-size: 1em;
    color:#ff9233;
    letter-spacing: 3px;
    padding:1em 2em;
    text-align: center;
}

.quote a {color:#fafafa;
        text-decoration: none;
        cursor:pointer; 
}

.quote a:hover  {color:#777; 

       
}


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






i {color: #999;}
i:hover, .link:hover {color:#fff}

.link:hover { text-decoration: none; color:#fff}

.boticon-bar {
    width: 100%;
    background-color: #111;
    overflow: auto;
    display: inline;
}

.boticon-bar i, #botcont i{
    float: right;
    text-align: center;
    padding: 0 0.8em;
    transition: all 0.3s ease;
    color: #d4d4d4;
    font-size: 22px;
}
.boticon-bar i:hover, #botcont i:hover{color:#000}


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


.bioicons {
    position: absolute;
    top: 7em;
    right: 2em;
}

/*#topicons {top:0;float:right;width:35%;z-index:2;text-align:right;}*/
.baricon {color:#fff;padding: 0.5em; font-size: 1.2em;transition: 0.5s;}
.botbarcon {color:#222;padding-left: 1em; font-size: 0.75em;transition: 0.5s;}
.barcon:hover {color:#fff;}
.amazbut {width: 120px}

#botcont {float:left;font-size: 0.8em;}
#botcont i {float:left;}

.bottom-icons i {font-size: 1.8em; display: inline; float: left; padding:0 0.5em 0 0;color:#fff;transition: 0.5s}

.bottom-icons i:hover {color:#555;background-color:#000;border-radius: 5px}

.float-left {display: inline; float: left; padding:0 0.5em 0 0;}
.float-right {display: inline; float: right; padding:0 0.5em 0 0;}
.float-right:hover {color:#fff;transition: 0.5s}

.footerimg {width:2em;height: auto;display: inline; float: right; padding:0 0.5em 0 0;}
/*************albuminfo + lyrics***********************/


.block-image {display: none}


#frontbackcover img {width:100%;
    /*border: 0.5px solid #0a0a0a;*/
} 
    
.iconhalf img  {
        width:100px;height:auto;margin: 0.75em
} 
    #wallicons img{width:50px; height:auto;margin: 0.35em}
    #greyicons img{width:50px; height:auto;margin: 0.35em}
    .discicons img{width:50px; height:auto;margin: 0.5em}

.songtitle {margin: 2em 0}



/* accordian*/

.dir-album-title {
    
     background-color: rgba(0,0,0,0.6);
     padding: 1em 0;
     width: 100%;
     text-align: center;
     margin: 0}
    
h2.dir-album-title  {
    color: #515151;
    color: #ff9233
}

.accordian-title {
    background-color: #101010;
    color: #888;
    cursor: pointer;
    padding: 0.8em 0;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-family: "Marcellus", sans-serif;
    font-size: 1em;
    letter-spacing: 3px;
    transition: 0.4s;
}

    button.accordian-title {
        background-color: rgba(0,0,0,0.25);
        color: #888;
        cursor: pointer;
        padding: 0.8em 0;
        width: 100%;
        border: none;
        text-align: center;
        outline: none;
        font-family: "Marcellus", sans-serif;
        font-size: 1em;
        letter-spacing: 3px;
        transition: 0.4s;}

.active, .accordian-title:hover {color: #fff; transition: 0.5s}
button.active {color: #ff9233;background-color: #0c0c0c}
button.accordian-title:hover{color: #ff8d29;opacity: 1; transition: 0.4s}

.accordian-title a{text-decoration: none;color:#666}
.accordian-title a{text-decoration: none;color:#550000}
.accordian-title a:hover {color:#ff8d29;text-decoration: none;opacity: 1;transition: 0.5s}
    
.lyricsPanel {
            display: none;
            max-width:  100%;
            padding:1em 2em;
            background-color:rgba(0,0,0,0.75);
            overflow: hidden;
            text-align: center;
}

.lyricsPanel p{font-size: 0.9em}
.lyricsPanel h3 {color: #777; font-size: 0.9em;line-height: 3} 
.lyricsPanel pre {line-height: 1.75; font-size: 0.9em} 




/*smallscreen accordian*/


/****end albuminfolyrix****/

#authorship {font-family: "Marcellus";font-size: 0.65em;padding: 1em;color: #555 }



 /***************************************************queries* 1250 800 500***************************************************/




@media screen and (max-width:1100px){
    
            #bgvid {display: none;}
        #fire {height: auto} 
        #bgvid2 { display: inline;margin-top:0px;}
        video#bgvid2 {padding-top:20px;}
    
    
            .albumcontainer {padding:2% 3%;padding-top:50px; margin:auto; margin-bottom: 80px}
            #frontbackcover, .notes {width: 100%;padding: 1em}

            h1,.content-title {font-size: 1.15em; letter-spacing:4px;}       

            .lyrixthird{width:100%;}
            #lilfilm,#vinfilm {padding: 2em 0.5em }


}


   
@media screen and (min-width:850px){                
                
        .third {width:33.3333%;}
}



@media screen and (max-width:800px){ 
    
        footer {box-shadow: 0px 10px 10px 10px rgba(20,0,0,0.8) ;}
        #mainnavbar { z-index: 1; width:100%;top:0;box-shadow: 0px 10px 10px 10px rgba(20,20,20,0.7) ;}
        #topscreennav {display:none;}
        #sidescreennav {display:block;z-index: 2; text-align: center; padding: 0; margin-top: 0;background-color: rgba(0,0,0,1);} 
        .anchor {height: 20px;background-color: rgba (0,0,0,0)}

        .third {width:100%;}
        .half{float:none;width:100%;padding:3em;}
        .discothird {width:100%;padding: 2em 2%}
        .discopix-three {padding:1em 10% } 
        .disco-threethird {padding:0 2em}
        .inline-image {display: none}
        .block-image {display: block;padding:5%}
        #vin, #liliko {padding:2em 1.5%; margin:20% 0 5% 0}    
        #discoanchor{padding-bottom:50px}
        #biography, #contact {padding: 1% }
        #bioanchor {padding-top:60px}
        #lilanchor,#discoanchor, #vinanchor,#lilanchorreso, #vinanchorresp {padding-top:0}
        .bioiconsresp {padding:0;position:absolute;top:2em;left:0;}
        .bioheadercontainer h2 {font-size:1.1em}
        .largebioheader {display:none}
        .smallbioheader {display:block;width:100%; opacity: 0.75;padding:2% 12%; }
        .largebiofilm {display:none}
        .smallbiofilm {width:100%;display:block;padding:8%;background-color: #000}                
        #bigscrdiscicons img {margin:0.15em}
        .biotext-content {padding:4em 2em}

        #lyrixcontainer {display:block}
        #biotextcontainer {clear: left;padding:1em;margin-bottom: 20px}

        #visicons, #wallicons, #greyicons {margin: 2em 0 0 0;}
        .notes p {font-size: 1em;line-height: 1.75}
        .floatr {float: left;}
        .discicons {margin:0.2em}
        .quote {padding:0.25%}

        #proto img, #featured img {width:100%;padding:0%;}     
        h1,.content-title {letter-spacing:3px;}       
        h2 {letter-spacing: 4px;}    
        p {text-align: left}
        .boticon-bar a {text-align: right;color: #999;font-size: 20px;}
        .boticon-bar i, #botcont i{padding:  0.3em;}
        .bioicons {font-size: 1em;}
        .bioiconsresp {padding:0;position:relative;top:0;left:0;}
        .top-left {position: absolute;top: 1em;left: 2em;}
        .bioheadercontainer h2 {font-size:0.85em}
        .footerimg { padding: 0.3em ; }


}

    
    
@media screen and (max-height: 500px) {
    
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 16px;}
  .overlay .closebtn {
    font-size: 25px;
    top: 0px;   
    left: 0px;
    font-size: 25px;}
    
  .floater {display: block; float: none;}
  .float-right {display: block; float: none;}

  .overlay-content {text-align: left;}    
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 1em;display: block;}
  .overlay .closebtn {
    font-size: 25px;
    top: 0px;
    left: 0px;}
    
    .disco-threethird {padding:0.5em}
    #visicons img {width:100%; height:auto;padding:0 10%}
    .block-image {padding:0.5em 0}

}

@media screen and (max-height: 350px) {
            .smallbioheader {padding:0 1%}
    

}