@charset "utf-8";

/*----------------------------------*/
* {box-sizing: border-box}
body {background:#000; max-width:100%; min-width:200px; margin:0;padding: 0; 
    font-family: 'Source Sans Pro', sans-serif;
    font-family: 'Montserrat', sans-serif;
        font-family: 'Lato', sans-serif;
        font-family: 'Roboto', sans-serif;


} 
div {box-sizing: border-box;margin:auto;border-style: none}
img {width: 100%}

#body{margin-left:12%}
#menu {background-color:#000;width:12%}


.sidebar{height:100%;position:fixed!important;z-index:1;overflow:auto}
.bar-block .w3-dropdown-hover,.bar-block .w3-dropdown-click{width:100%}
.bar-block .w3-dropdown-hover .w3-dropdown-content,.bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
.bar-block .w3-dropdown-hover .w3-button,.bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
 .bar-item{padding:8px 6px;float:left;width:auto;border:none;display:block;outline:0}

.bar-block .bar-item{width:100%;display:block;padding:8px 6px;text-align:left;border:none;float:none;outline:0}
.bar-block .bar-item{text-align:center}.w3-block{display:block;width:100%}



.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; } 
    
.div-op {max-width:100%;margin:0 2% 12% 0; background:rgba(25, 25, 25, 1); border:0.75px solid rgba(50, 50, 50, 1);padding: 1%}

.whole{width:100%}   
.center{text-align:center!important}
.half{float:left;width:49.99999%;text-align:center;height:100%;padding:0.75em}


.catthird {float:left;width:33.33333%;text-align:center;height:100%;padding:0.5em;}
.catsixth{float:left;width:16.666666%;padding:0;text-align: center; height:100%;padding:0.25em}   

.gridquarter {float:left;width:23.99999%;text-align:center;height:100%;padding:1em;border:0.5px solid rgb(50, 50, 50);margin: 0.49999%;}
.catquarter {float:left;width:24.99999%;text-align:center;height:100%;padding:0.25em}
.fifth{float:left;width:19.99999%;text-align:center;height:100%;padding:0.25;}   

.catlinkimg {padding:0.5em; width:100%;border:0.5px solid rgba(90, 90, 90, 1);opacity: 0.75}
.catlinkimg:hover {opacity: 1}

.bordermale {border:0.75px solid #66b3ff}
.borderfemale {border:0.75px solid rgba(255, 179, 255)}

.catimg {width:100%; opacity:1;padding: .05em}
.bioheadercontainer {margin:1em 0;padding: 2em}

.essay { margin-bottom: ;padding: 0.5em 2.5em;text-indent: 1em;text-align:center;text-align:left}

.border {border:0.5px solid rgba(0, 0, 0, 1)}

.semi-op {opacity: 0.85}

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





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

p  {   
        font-size: 1em;
        color:#eee;
        letter-spacing: 1.3px; 
        line-height: 1.5   
}


a {color:#fff; text-decoration: none}
a:hover {color:#ddd;text-decoration: none}

#menu a {color:#ccc;font-size: 0.9em; text-decoration: none;letter-spacing: 1px;}
#menu a:hover {color:#fff;text-decoration: none}


h1 {
        font-size: 1.25em;
        letter-spacing: 3px;
        background-color:#030303;
        line-height: 1.25;
        color:#bbb;
        text-align: center;
        margin-bottom:1em; 
        background-color:rgba(5,5,5,0.5);
        padding: .25em 0
    }


h2 {
    font-size: 1.15em;
    text-align: center;
    color:#ddd;
    letter-spacing: 2.25px;}

h3 {
    font-size: 1.05em;
    text-align: center;
    color:#b2b2b2;
    letter-spacing: 1px;}

li {
    display: block; text-align:center;padding-bottom: 0.5em;}


.red {color:#ff1a1a}
.bold {font-weight: bold;color:#fff;font-style: oblique;}
.male {color:#66b3ff}
.female {color:#ffb3ff}

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




.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;*/
}



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


@media screen and (max-width:1050px) {
    
    .half {width:100%}
    .div-op {padding: 1em; margin-bottom:18%}
    .gridquarter {width:48.99999%;padding: 0.5em; margin-bottom: 10%}
    .catquarter {width:49.99999%;padding: 0.8em}
    .bioheadercontainer {margin-bottom:0;padding:0.5em}

}



@media screen and (max-width: 600px) {
        
    #body{margin-left:19%}
    #menu {width:19%}
    .div-op {padding: 0.1em; margin-bottom:25%}
    .catquarter {padding: 0.5em}
    /*.gridquarter {width:100%;padding: 0.5em; margin: 0; margin-bottom: 20%}*/
    .essay { margin-bottom: 2em;padding: 1.5em}
    h1 {letter-spacing: 2.15px;margin-bottom:1.5em }               
    h2 {font-size: 1em }               
   #menu a {color:#ccc;font-size: 0.75em; text-decoration:none;letter-spacing: 0.8px;}


}