/* ------------------ FONTS ------------------ */
	@import url('https://fonts.googleapis.com/css?family=Montserrat|Unna|Special+Gothic+Expanded+One');


    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    html { 
        scroll-behavior: smooth; 
        display: flex;
        justify-content: center;
        align-content: center;
        background-color: white;
        font: 400 11px/17px 'Montserrat', sans-serif; 
    }
    body { width: 100%; display: flex; flex-direction: column;}
    
    .wrapper { width: 80%; max-width: 650px; margin: 30px 0 40px 0; padding:0; align-self: center; }
    
    .header { z-index: 1000;  position: sticky;  top: 0; right: 0; width:100%; text-align: center; padding: 20px 0 0 0; background-color: white; }
  
    h1 {
      font: 800 35px/30px 'Special Gothic Expanded One', sans-serif;
      letter-spacing: normal;
      color: #000;
    }
    
    h2 {
      font: 400 30px/35px 'Unna', sans-serif; 
      letter-spacing: normal;
      color: black;
      padding: 1.5rem 0 0 0;
    }

    img.bio {
        height: 100px; 
        object-fit: cover; 
        border-radius: 15%;  
        vertical-align: -10px;
        float: left;
        margin-right: 20px;
        clear:both;
    }
    .imageSide { 
        margin-left: 0px;
        overflow:auto;
        display:block; 
    }
    
    h3 {
      font: 400 25px/25px 'Unna', sans-serif; 
      letter-spacing: normal;
      color: black;
      padding: 2rem 0 1rem 0;
    }
    
    p {
      letter-spacing: 0.5px;
      word-spacing: 1.75px;
      color: black;
      margin-bottom: 15px;
      display:inline-block;
    }

    p img.logo {
     margin: 12px 0 4px 0;
     width: 80px;
     display: block;
    }
    
    p a {
      color: #4169E1;
      text-decoration: none;
    }
    
    p a:hover { 
       border-bottom: 0.1px solid currentColor; 
    }
    
    .footer { z-index: 999; position: fixed; bottom: 0; left: 0; width:100%; color: #999; font-size: 8px; text-align: center; padding: 5px; background-color: white;}
    

/* ------------------ GALLERIES ------------------ */
	.gallery-container		        	{  }
	.item, .item video 			        { width: 6em; box-shadow: 1px 1px 2px #999; }
	.gallery			                { }
	/* .gallery.vid img			        { filter: brightness(30%); } */
	.playButton				            { display: none; content: ""; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 17px solid rgba(255, 255, 255, 1); position: absolute; left: 10%; top: 10%; z-index: 999; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); }
	.mfp-title, .mfp-counter	        { font: 600 11px/12px 'Montserrat', sans-serif; }
	.mfp-iframe-scaler .mfp-bottom-bar	{ margin-top: 10px; }
	.mfp-iframe-holder .mfp-content   	{ max-width: 800px;}
	
	.grid                               { display: grid; margin: 0; grid-gap: 0; }
    .grid > div                         { padding: 2px; background: none; }
    .auto-fit                           { grid-template-columns: repeat(auto-fit, minmax(8em, auto)); }
    
	
/* ------------------ ACCORDION ------------------ */
    .accordion                                                      {  }
    [id*="open-accordion"], [id*="close-accordion"]                 { line-height: 60px; height: 60px; display: block; margin: 0 ; position: relative; width: 100%;  }
    [id*="close-accordion"]                                         { display: none; }
    .accordion a                                                    { padding-left: 0; text-decoration: none; text-shadow: none; }
    [id*="open-accordion"]:after, [id*="close-accordion"]:after     { content: "+"; font-size: 20px;  top: 0px; color: #333;  position: absolute; right: 10px; z-index: 999; }
    
    .target-fix                                                     { display: block; top: 0; left: 0; position: fixed; }
    .accordion-content                                              { height: 0; margin: 0; padding: 0; position: relative; overflow: hidden; width: 100%; transition: all 0.1s ease; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; border-bottom: .5px solid #999; }
    .accordion span:target ~ .accordion-content                     { display: block; height: auto; padding: 5px 0 25px 0;  }
    .accordion span:target ~ [id*="close-accordion"]                { display: block; }
    .accordion span:target ~ [id*="open-accordion"]                 { display: none; }
    .accordion span:target ~ [id*="close-accordion"]:after          { content: "-";  font-size: 27px; }
     
     
     
    .mfp-arrow {
      width: 44px;
      height: 44px; 
      position: fixed;
      opacity: 0.5;
      margin: 0;
      top: 0;
      right: 0;
      padding: 0;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     
    }
    .mfp-arrow:active {
      margin-top: 0;
    }
    .mfp-arrow:hover, .mfp-arrow:focus {
      opacity: 1;
    }
    .mfp-arrow:before, .mfp-arrow:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      right: 0;
      top: 0;
      margin-top: 10px;
      margin-right: 0;
      border: medium inset transparent;
    }
    .mfp-arrow:after {
      border-top-width: 11px;
      border-bottom-width: 11px;
      bottom: 8px;
    }
    .mfp-arrow:before {
      border-top-width: 19px;
      border-bottom-width: 19px;
      opacity: 0.7;
    }
    
    .mfp-arrow-left {
      left: 20px;
    }
    .mfp-arrow-left:after {
      border-right: 17px solid white;
      margin-right: 0;
    }
    
    .mfp-arrow-right {
      right: 50px;
    }
    .mfp-arrow-right:after {
      border-left: 17px solid white;
      margin-right: 0;
    }   
            


    @media screen and (max-width: 500px) {
        .auto-fit { grid-template-columns: repeat(auto-fit, minmax(6em, auto)); }
        
        img.bio {
            float: none;
        }
        .imageSide { 
            margin-top: 15px;
        }
    
    
    }


    
    #preload {display:block}
    #ajax-loader {display:none}