@charset "utf-8";

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

* {
    box-sizing: border-box;
}

body   {
    margin: auto;
    background-color: #000;
    background-image: url("../images/tile_body_back.3.jpg");
   
    margin-top: 0px;
    min-width:300px;

}
body a:hover {color:#fff;transition: 0.3s;text-decoration: none}

      
/*--------body divs--------------------*/

#bodycontainer {
    background-color: rgba(0,0,0,0.75);
    border:2px solid #1a1a1a;
    padding:1em 3em;
    margin: 25px 6% 0 6%;
    z-index: -1;
} 
#gallbody {border:2px solid #350000;
    background-color: #080808;padding:4em
}
    
    
.body-section {   
    margin:auto;
    width:100%;
    background-color:transparent;
    margin-bottom:100px; 
    text-align: center;}


#biosection {background-color: #080808;
            padding: 1em ;}
 .row {
    width:100%;
    background-color:transparent;
    text-align: center;
    padding: 1em;
    border:2px solid #350000;
}

.row-padding{padding: 0.75em 0.5em; }
.row:after,.row:before,.row-padding:after,.row-padding:before, .container:after {content:"";display:table;clear:both}

.section-half{float:left;width:49.99999%;height:auto}

.container{padding:0 0 0 0}
.gallery-fourrow {background-color: #000; border:1px solid #101010;padding:0 0 0 0}

.section-quarter{float:left;width:25%; padding:0 0 0.25em 0.25em;background-color: transparent}
.section-quarter img {width:100%;cursor:pointer;padding: 0.5em 0.25em 0 0; opacity: 0.65; background-color:transparent}
.section-quarter img:hover{/*box-shadow: 0px 1px 20px 1px rgba(220, 0, 1, 0.35);*/opacity: 1; transition: 0.5s}  


.galtit, #biotit {padding: 1em 0; background-color: transparent}

.biosection-quarter{float:left;width:25%;padding: 2em 1em;}
.section-third{float:left;width:33.33333%}
.section-twothird{float:left;width:66.66666%}
.section-threequarter{float:left;width:75%;padding: 0}
.biosection-quarter img {width:100%;cursor:none; border:2px solid #555;} 
.anchor {height:80px;width:auto}    

 

#hero {margin-top: 15px;  height: auto; width: 100%;}
#hero img {z-index: -2;}
.heroSlides {position: relative}
.heroSlides img {width:100%;max-height:auto}
.slidefades {animation:fading 5s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}  

    
/*-----------------------endbodydivs-------------------------------*/
    

    
/*text and pic elements*/ 


h1, h2, h3 {
    
    font-family:"Arial, Helvetica, sans-serif" ;
    font-family:"Montserrat" ;
    text-align: center;
    color:#d4d4d4;
    letter-spacing: 0.4em;
    font-size: 1.25em;
    word-wrap: break-word;
}
    
h2 {
   
    color:#c5c5c5;
    letter-spacing: 0.3em;
    font-size: 1em;
    
}

h2:hover {color: #fff}

h3 {
   
    color:#770000;
    letter-spacing: 2px;
    font-size: 0.85em;
}


.galtit h2 {letter-spacing: 0.5em;font-size: 1.2em;color:#c5c5c5}
.biotit h2 {letter-spacing: 0.25em;font-size: 1em;color:#b2b2b2;}
#biosection h2 {letter-spacing: 1px;font-size: 0.9em;color:#d4d4d4;text-align:left}



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

            h1, h2, h3 {letter-spacing: 0.35em}
            h1 {font-size:1.2em}
            h2 {font-size:0.9em}
        }


    
    
p { text-align:left;
    font-family:"Arial, Helvetica, sans-serif";
    font-family:"Open Sans";
    font-size: 1em;
    word-wrap: break-word;
    
}
    

    
figcaption {
    font-family:"Arimo";
    color: lightgray;
    letter-spacing: 8px;
    font-size: 0.6em;
}
    
.bio { 
    text-align:left;
    letter-spacing: 2px;
    text-indent: 10px;
    font-size: 1em; color:#fff;
}


.coninfo {
    display:inline;
    font-size: 0.8em; 
    color:#555;
    padding: 1em;
    
}    
 

    

/* Create three equal columns that floats next to each other 
.column {
    float: left;
    width: 33.3333%;
    padding: 10px;
}

.column img {
    margin-top: 20px;
    width: 100%;
    border: 2px solid #333333;
    
    object-fit: fill;
}

/* Clear floats after the columns 
.row:after {
    content: "";
    display: table;
    clear: both;
}
    
*/
/*---------------------------------------------*/
    
    
    .floater {display: inline-block; float: left; padding:0 1.5em;}
    .floaterr {display: inline-block; float: right; padding:0 1.5em;}
    .bioicons a {font-size: 1.5em; padding: 0 1em 0 0;color:#777}
i {color: #d9d9d9}
i:hover {color:#fff}


footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #222;
   color: #fff;
    display:inline;
   
}

.foottit h2{ font-family: "Open Sans";font-size: 1em;text-align: left; letter-spacing: 2px;color:#777}
#footer { border-top: 3px solid #350000;}

/*navs*/




#navcontainer {
    margin: auto;
	top: 0;
  	position: fixed;
  	background-color:#000; 
  	width: 100%;
    height: auto;
    z-index: 2;border-bottom: 3px solid #350000;
    box-shadow: 0px 1px 200px 1px rgba(250, 0, 1, 0.5);
    display: inline
    
}

.navitem {
    
    padding: 0.5em 0.5em 0.5em 1em;
    float:left;
    text-decoration: none;
    cursor: pointer
}

.navitem h2 {    
    font-family:"Arial";
    font-family:"Montserrat";
    font-size: 1em;    
    letter-spacing: 0.4em;
    color: #666;}
 
.navitem a {text-decoration: none; 
}
.navitem h2:hover {color:#fff;transition: 0.5s}

#galnav {width:30%;}

#smallscrnav {display:none;}

#name {
    font-family: "Cormorant Garamond"; 
    width:70%;
    font-size: 1.75em;
    letter-spacing:9px;
    float:right;
    color:#c3c3c3;
    text-align: right

}


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


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

.sidenav a {
    font-family:"Book Antiqua";
    font-family:"Montserrat";    
    text-decoration: none;
    font-size: 1em;
    letter-spacing: 0.4em;
    color: #777;
    padding: 2em 1em 1em 1em;
    display: block;
    transition: 0.75s;
}

.sidenav a:hover {
    color: #fff;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    left: 25px;
    font-size: 36px;
    margin-left: 0px;
}
/*------------------------------*/

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

.overlay-content {
    position: relative;
    top: 15%;
    width: 100%;
    text-align: center;
    margin-top: 2em;
}

.overlay a {
    font-family:"Book Antiqua";
    font-family:"Montserrat";
    font-size: 1.2em;
    letter-spacing: 0.4em; 
    color: #999;
    text-decoration: none;
    display: block;
    transition: 0.5s;
    padding: 1em;
   
}

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

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}    



/* Responsive 1200*/


@media screen and (max-width: 1300px) {
    
#gallbody {padding:2em}
.body-section {margin-bottom:3em; } 


    

   
    }
    
/*900*/
/*800*/  

@media screen and (max-width: 900px) {
    
    
#smallscrnav {display:inline;
    margin: auto;
	top: 0;
  	position: fixed;
  	background-color:#333; 
  	width: 100%;
    height: auto;
    z-index: 2;border-bottom: 3px solid #350000;
    padding: 0.5em;
    }
    
#respname {font-family: "Crimson Text"; width:100%;
        font-size: 1.2em;
        letter-spacing:5px;
        float:left;
        color:#c3c3c3;text-align: left}
    
#resptit {font-family: "Crimson Text"; 
        font-size: 1.2em;
        letter-spacing:5px;}
    
.menuitem {letter-spacing: 0.3em;padding: 0.25em 0.5em;}
#navcontainer {display:none;}
#gallbody {padding:1.5em}
    
span { font-family: "Crimson Text"; color:#c3c3c3; 
        font-size: 1.5em;
        letter-spacing:10px;
    cursor:pointer;}
span:hover {color:#fff}
    
.row-padding{padding: 0.75em 0.5em; }
.container{padding:0 0}

.gallery-fourrow{padding: 0}
.section-quarter{width:100%}

.biosection-quarter{width:100%; padding:2em;}
.section-threequarter{width:100%}


}

/*650*/ 

@media screen and (max-width: 650px) {
    #gallbody {padding:1em}
    #bodycontainer {margin: 25px 2% 0 2%;
    padding:0.5em;}

span {font-size:1.3em; letter-spacing:8px;}
    
.foottit h2{ font-family: "Open Sans";font-size: .8em;}
.floaterr {display: inline-block; float: left; padding:0 1.25em;}
  

}


@media screen and (max-height: 450px) {
    
    
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}


  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;}
}

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

    #hero {margin-bottom:0}
    #bodycontainer {margin-top:-100px}

    .bioicons a {font-size: 1.25em; padding: 0 1.5em 0 0;}

    .biosection-quarter{padding: 1em 1em;}
        .section-quarter{padding:0 0.5em}
    .section-quarter img {padding:0.5em} 

   .bio {text-align:center;text-indent: 0px;}
    #respname {letter-spacing:2px;}
    
    #smallscrnav {
    padding: 0.5em 0.5em 0.5em 0.25em;
    }
    
span {font-size:1.2em;letter-spacing: 4px}

}