@charset "utf-8";

@charset "utf-8";

/*=========================================================*/
/* cross-browser reset
/*==========================================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video
  { border:0; margin:0; padding:0; vertical-align:baseline; outline:0; font-size:100%; }
  *{ margin:0; padding:0; }
body { line-height:1 }
article, aside, details, figcaption, footer, header, hgroup, menu, nav, section, ul, ol { display:block }
section { position:relative; z-index:0; }
figure { position:relative; display:inline-block; }
h1, h2, h3, h4, h5, h6, p, li, dt, dd { font-weight:400 }
b, strong { font-weight:400 }
i { font-style:normal; }
del { text-decoration:line-through; }
small { font-size:86% }
hr { display:block; height:1px; margin:1em 0; padding:0; }
pre, code, kbd, samp { font-family:monospace; _font-family:'courier new',monospace; font-size:1em; }
  pre { white-space:pre; white-space:pre-wrap; word-wrap:break-word; }
sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; }
  sup { top:-0.5em }
  sub { bottom:-0.25em }
cite { font-style:italic }
ul, ol { margin:0; padding:0; }
  li { margin-left:30px }
nav ul, nav ol, footer ul { list-style:none; list-style-image:none; }
  nav li { margin-left:0px }
svg:not(:root) { overflow:hidden }
img { border:0; image-rendering:auto !important; }
form { margin:0 }
textarea { overflow:auto; vertical-align:top; resize:vertical; }
input, select { vertical-align:middle }
table { border-collapse:collapse; border-spacing:0; }
  td { vertical-align:top }
iframe { margin-bottom:0 !important; border:none !important; display:block; width:100%; }
canvas { width:100% }

/*==========================================================*/
/* global
/*==========================================================*/

html, body { position:relative; }

.mtz, .mt0, .mv0 { margin-top:0px }
.mbz, .mb0 { margin-bottom:0 !important; }
.mtnxxxs { margin-top:-1px; } .mtnxxs { margin-top:-5px; } .mtnxs { margin-top:-8px; } .mtns { margin-top:-13px; } .mtnm { margin-top:-21px; } .mtnl { margin-top:-34px; } .mtnll { margin-top:-55px; }
.mtxxs { margin-top:5px; }  .mtxs { margin-top:8px; } .mts { margin-top:13px; } .mtm { margin-top:21px; } .mtl { margin-top:34px; } .mtll { margin-top:55px; } .mtlll { margin-top:89px; } .mtxl { margin-top:144px;}
.mbnxxxs { margin-bottom:-1px; } .mbnxxs { margin-bottom:-5px; } .mbnxs { margin-bottom:-8px; } .mbns { margin-bottom:-13px; } .mbnm { margin-bottom:-21px; } .mbnl { margin-bottom:-34px; } .mbnll { margin-bottom:-55px; }
.mbxxs { margin-bottom:5px; } .mbxs { margin-bottom:8px; } .mbs { margin-bottom:13px; } .mbm { margin-bottom:21px; } .mbl { margin-bottom:34px; } .mbll { margin-bottom:55px; } .mblll { margin-bottom:89px; } .mbxl { margin-bottom: 144px; }
.mrnm { margin-right:-21px; } .mrns { margin-right:-15px; } .mrnxs { margin-right:-8px; } .mrnxxs { margin-right:-5px; } .mrxxs { margin-right:5px; } .mrxs { margin-right:8px; } .mrs { margin-right:15px; } .mrm { margin-right:30px; } .mrl { margin-right:60px; } .mrll { margin-right:90px; }
.mlnm { margin-left:-21px; } .mlns { margin-left:-15px; } .mlnxs { margin-left:-8px; } .mlnxxs { margin-left:-5px; } .mlxxs { margin-left:5px; } .mlxs { margin-left:8px; } .mls { margin-left:15px; } .mlm { margin-left:30px; } .mll { margin-left:60px; } .mlll { margin-left:90px; }
.pt0 { padding-top:0 !important; } .pts { padding-top:13px; } .ptm { padding-top:21px; } .ptl { padding-top:42px; } .ptll { padding-top:63px; } .ptlll { padding-top:84px; } 
/* mobile padding to address menu-top - changed to 991 from 767 */
@media all and (max-width: 991px) { .mp10 { padding-top:10px } .mp20 { padding-top:20px } .mp30 { padding-top:30px } .mp40 { padding-top:40px } .mp50 { padding-top:50px } .mp60 { padding-top:60px } .mp70 { padding-top:70px } .mp90 { padding-top:90px } .mp100 { padding-top:100px } .mp110 { padding-top:110px }  } 
.pb0 { padding-bottom:0 !important; } .pbs { padding-bottom:13px; } .pbm { padding-bottom:21px !important; } .pbl { padding-bottom:42px; } .pbll { padding-bottom:63px; }
.prxs { padding-right:8px; } .prs { padding-right:15px; } .prm { padding-right:30px; } .prl { padding-right:60px; } .prll { padding-right:90px; }
.plxs { padding-left:8px; } .pls { padding-left:15px; } .plm { padding-left:30px; } .pll { padding-left:60px; } .plll { padding-left:90px; }
.clear { clear:both !important }
.block { display:block }
.inline { display:inline-block }
.fl { float:left; left:0 }
.fr { float:right; right:0 }
.nohzsr { overflow-x:hidden }
.relative { position:relative }
.absolute { position:absolute }
.cursor { cursor:pointer !important; }
  
.mobileonly { display:none !important; }
 @media all and (max-width: 579px) { .mobileoff { display:none !important; } .mobileonly { display:block !important; } }
 @media all and (max-width: 359px) { .mobile5off { display:none !important; } }
 
.z1 { position:relative; z-index:1 }
.z2 { position:relative; z-index:2 }
.z3 { position:relative; z-index:3 }
.bpc { background-position:center center; }
.bpl { background-position:left center; }
.bpr { background-position:right center; }
.mlauto { margin-left:auto !important; }
.mrauto { margin-right:auto !important; }
.middle { position:relative; margin-left:auto; margin-right:auto; }
.w25 { width:25px; }
.w50 { width:50px; }
.w75 { width:75px; }
.w100 { width:100px; }
.w125 { width:125px; }
.w150 { width:150px; }
.w175 { width:175px; }
.w200 { width:200px; }
.w225 { width:225px; }
.w250 { width:250px; }
.w275 { width:275px; }
.w300 { width:300px; }
.max100 { max-width:100px; }
.max125 { max-width:125px; }
.max150 { max-width:150px; }
.max175 { max-width:175px; }
.max200 { max-width:200px; }
.max225 { max-width:225px; }
.max250 { max-width:250px; }
.max275 { max-width:275px; }
.max300 { max-width:300px; }
.max325 { max-width:325px; }
.max350 { max-width:350px; }
.max375 { max-width:375px; }
.max400 { max-width:400px; }
.max425 { max-width:425px; }
.max450 { max-width:450px; }
.max475 { max-width:475px; }
.max500 { max-width:500px; }
.max550 { max-width:550px; }
.max600 { max-width:600px; }
.max650 { max-width:650px; }
.max700 { max-width:700px; }
.max750 { max-width:750px; }
.max800 { max-width:800px; }
.max850 { max-width:850px; }
.max900 { max-width:900px; }
.max950 { max-width:950px; }
.max1000 { max-width:1000px; }
.max1050 { max-width:1050px; }
.max1100 { max-width:1100px; }
.max1150 { max-width:1150px; }
.max1200 { max-width:1200px; }
.max1250 { max-width:1250px; }

/* hr and borders */

.bbthickest { border-width:0 0 8px 0; }
.bbthicker { border-width:0 0 5px 0; }
.bbthick { border-width:0 0 3px 0; }
.bbthin { border-width:0 0 1px 0; }
.bbsolid { border-bottom-style:solid }
.bbdotted { border-bottom-style:dotted }
.bbdashed { border-bottom-style:dashed }
.bbdouble { border-bottom-style:double }

.bthickest { border-width:8px }
.bthicker { border-width:5px }
.bthick { border-width:3px }
.bthin { border-width:1px }
.bsolid { border-style:solid }
.bdotted { border-style:dotted }
.bdashed { border-style:dashed }
.bdouble { border-style:double }

.br3 { border-radius:3px }
.br5 { border-radius:5px }
.br8 { border-radius:8px }
.br13 { border-radius:13px }
.br21 { border-radius:21px }
.br34 { border-radius:34px }
.br55 { border-radius:55px }
.br89 { border-radius:89px }

/* opacity blending */

.op0 { opacity: 0 }
.op1 { opacity:.1 }
.op2 { opacity:.2 }
.op3 { opacity:.3 }
.op4 { opacity:.4 }
.op5 { opacity:.5 }
.op6 { opacity:.6 }
.op7 { opacity:.7 }
.op8 { opacity:.8 }
.op9 { opacity:.9 }

/* rotate elements */

.rotate45 { transform: rotate(45deg); }
.rotate90 { transform: rotate(90deg); }
.rotate135 { transform: rotate(135deg); }
.rotate180 { transform: rotate(180deg); }
.rotate270 { transform: rotate(270deg); }

/*==========================================================*/
/* color
/*==========================================================*/

.bgred { background-color:#a50021 }
.bgorange { background-color:#f9852a }
.bggreen { background-color:#004e2d }
.bgblack { background-color:#000 }
.bgdarkest { background-color:#090807 }
.bgdarkerer { background-color:#121212 }
.bgdarker { background-color:#1e1b19 }
.bgdark { background-color:#222 }
.bgdarkmed { background-color:#555453 }
.bgmedium { background-color:#888784 }
.bglight { background-color:#bbbab5 }
.bglighter { background-color:#eeece6 }
.bglightest { background-color:#f6f5f2 }
.bgwhite { background-color:#fff }

.txtred { color:#a50021 }
.txtorange { color:#f9852a }
.txtgreen { color:#004e2d }
.txtblack { color:#000 }
.txtdarkest { color:#090807 }
.txtdarker { color:#1e1b19 }
.txtdark { color:#222 }
.txtdarkmed { color:#555453 }
.txtmedium { color:#888784 }
.txtlight  { color:#bbbab5 }
.txtlighter { color:#eeece6 }
.txtlightest { color:#f6f5f2 }
.txtwhite { color:#fff }

.bbred { border-bottom-color:#a50021 }
.bborange { border-bottom-color:#f9852a }
.bbgreen { border-bottom-color:#004e2d }
.bbdarkest { border-bottom-color:#090807 }
.bbdarker { border-bottom-color:#1e1b19 }
.bbdark { border-bottom-color:#222 }
.bbdarkmed { border-bottom-color:#555453 }
.bbmedium { border-bottom-color:#888784 }
.bblight { border-bottom-color:#bbbab5 }
.bblighter { border-bottom-color:#eeece6 }
.bblightest { border-bottom-color:#f6f5f2 }
.bbwhite { border-bottom-color:#fff }

.bred { border-color:#a50021 }
.borange { border-color:#f9852a }
.bgreen { border-color:#004e2d }
.bdarkest { border-color:#090807 }
.bdarker { border-color:#1e1b19 }
.bdark { border-color:#222 }
.bdarkmed { border-color:#555453 }
.bmedium { border-color:#888784 }
.blight { border-color:#bbbab5 }
.blighter { border-color:#eeece6 }
.blightest { border-color:#f6f5f2 }
.bwhite { border-color:#fff }

/*==========================================================*/
/* text
/*==========================================================*/

/* inline variations */

.small { font-size: 0.9em; line-height:0.9em; }
.smaller { font-size: 0.8em; line-height:0.8em; }
.smallest { font-size: 0.7em; line-height:0.7em; }
.tiny { font-size: 0.6em; line-height:0.6em; }
.bigger { font-size: 1.2em; }
.biggest { font-size: 1.45em; }
.uppercase { text-transform:uppercase; }
.italic { font-style:italic; }
.fsn { font-style:normal !important; }
.light .fwn, .dark .fwn, .dark .text .fwn { font-weight:400 !important; font-variation-settings: "wght" 400 !important; }
.lsh { letter-spacing:0.7px; } /* letter spacing "half" - used on tables and serif interstials */
.lsz, .lsz p { letter-spacing:0 }
.ls1, .ls1 p { letter-spacing:1px }
.ls2, .ls2 p { letter-spacing:2px }
.ls3, .ls3 p { letter-spacing:3px }
.ts15, .ts15 p { text-shadow: 0px 0px 15px rgba(0, 0, 0, 1); }
.ts25, .ts25 p { text-shadow: 0px 0px 25px rgba(0, 0, 0, 1); }
.ts35, .ts35 p { text-shadow: 0px 0px 35px rgba(0, 0, 0, 1); }
.lh1 { line-height:1.1em }
.lh2 { line-height:1.2em }
.lh3 { line-height:1.3em }
.lh4 { line-height:1.4em }
.lh5 { line-height:1.5em }
.tal { text-align:left }
.tac { text-align:center }
.tar { text-align:right }
.wsnw { white-space:nowrap }

/*==========================================================*/
/* preloader
/*==========================================================*/

#preloader { position:fixed; top:0; left:0; right:0; bottom:0; z-index:1014; }
  #spinner { position:absolute; width:310px; height:310px; left:50%; top:50%; background-repeat:no-repeat; background-position:center center; margin:-155px 0 0 -155px; opacity:.5; }
  
/*==========================================================*/
/* overlay
/*==========================================================*/

  #overlay, #nav-overlay, #comment-overlay, #download-overlay { opacity:0; transition: all 0.5s ease-in-out; position:fixed; margin-top:0px; top:0; left:0; right:0; bottom:0; }
    #nav-overlay { z-index:-1; }
    #comment-overlay, #download-overlay { z-index:-2; }

  .textload { opacity:0; transition: all 1s ease-in-out; } /* previously 1.3s */

/*==========================================================*/
/* split panel pages (for homepage panels see faith.x.x.css)
/*==========================================================*/

  /* common to all panel variations */
  #leftpanel { float:left; position:fixed; height:100vh; z-index:3; }
     a.panellink { display:block; width:100%; height:100%; }
  #rightpanel { position:relative; float:right; z-index:1; }
    #rightcenter #rightpanel { width:100%; }

  /* panel widths based on viewport sizes */
  @media all and (min-width: 1475px) {
    #leftwide #leftpanel { width:70%; }
    #leftwide #rightpanel { width:30%; }
    #rightcenter #leftpanel { width:15%; }
  }
  @media all and (max-width: 1474px) {
    #leftwide #leftpanel { width:65%; }
    #leftwide #rightpanel { width:35%; }
    #rightcenter #leftpanel { width:15%; }
  }
  @media all and (min-width: 1260px) {
    #half #leftpanel { width:50%; }
      #rightwide #leftpanel { width:30%; }
    #half #rightpanel { width:50%; }
      #rightwide #rightpanel, #rightonly #rightpanel { width:70%; }
    #rightcenter #rightpanel .column { max-width:1000px; }
      #rightcenter #rightpanel .column header { margin-left:150px; }
  }
  @media all and (max-width: 1259px) {
    #half #leftpanel { width:40%; }
      #rightwide #leftpanel { width:30%; }
    #half #rightpanel { width:60%; }
      #rightwide #rightpanel, #rightonly #rightpanel { width:70%; }
    #rightcenter #leftpanel { width:10%; }
    #rightcenter #rightpanel .column { max-width:700px; }
  }
  @media all and (max-width: 1199px) {
    #leftwide #leftpanel { width:58%; }
    #leftwide #rightpanel { width:42%; }
  }
  @media all and (max-width: 1023px) {
    #leftwide #leftpanel { width:55%; }
    #leftwide #rightpanel { width:45%; }
      #rightonly #rightpanel { float:none; width:100%; padding:0; }
        #rightonly #rightpanel .column { max-width:700px; margin-left:auto; margin-right:auto; }
    #rightcenter #leftpanel { display:none; }
  }
  @media all and (max-width: 949px) {
    #half #leftpanel { width:30%; }
      #leftwide #leftpanel { width:45%; }
    #half #rightpanel { width:70%; }
       #leftwide #rightpanel { width:55%; }
  }
  @media all and (max-width: 699px) {
    #half #leftpanel { width:25%; }
      #rightwide #leftpanel, #leftwide #leftpanel { width:20%; }
    #half #rightpanel { width:75%; }
      #rightwide #rightpanel, #leftwide #rightpanel { width:80%; }
  }
  @media all and (max-width: 579px) {
    #rightwide #leftpanel, #leftwide #leftpanel { display:none }
    #rightwide #rightpanel, #leftwide #rightpanel { float:none; width:100%; padding:0; }
  }
  @media all and (max-width: 539px) {
    #half #leftpanel { display:none }
    #half #rightpanel { float:none; width:100%; padding:0; }
  }

  /* title and navigation for leftwide pages */
  #leftwide .titleleft { position:absolute; margin-left:10%; margin-right:10%; width:90%; top:50%; font-size:4em; line-height:1em; }
    #leftwide .titleleft { margin-top:-30px; }
    
  #leftwide .titleright { display:none }
    .navblock { display:inline-grid; width:320px; margin-right:60px; margin-bottom:42px; }
      
    @media all and (max-width: 1499px) {
      #leftwide .titleleft { width:80%; }
    }
    @media all and (max-width: 1365px) {
      .navblock { margin-right:30px; }
    }
    @media all and (max-width: 1299px) {
      .navblock { margin-right:20px; }
    }
    @media all and (max-width: 1220px) {
      .navblock { margin-right:10px; }
    }
    @media all and (max-width: 1185px) {
      .navblock { display:block; width:100%; margin-right:0; }
    }
    @media all and (max-width: 949px) {
      #leftwide .titleleft { font-size:3em; }
    }
    @media all and (max-width: 699px) {
      #leftwide .titleleft { display:none; }
        #leftwide .titleright { display:block; max-width:500px; }
    }
    @media all and (max-width: 579px) {
      .navblock { margin-bottom:55px; }
    }
    
  /* set up fade out on scroll */
  #rightcenter #leftpanel { transition: all 2s ease-in-out; }
  
  /* hidden text  */
  .seo { position:absolute; top:-4000px; z-index:-1; }
  
/*==========================================================*/
/* column
/*==========================================================*/

  /* column structure */
  .column { width:80%; padding:60px; display:block; }
    .columnbox { position:relative; margin-left:-50%; margin-right:-50%; padding:60px; z-index:2; }
    .columnboxpad { position:relative; margin-left:-50%; margin-right:-50%; padding:60px 50%; z-index:2; }
    
  @media all and (max-width: 700px) {
    .column { padding:60px 30px; }
  }
  @media all and (max-width: 579px) {
    .column { width:85%; padding:60px 20px; }
  }
   
  /* main article text */
  main .dropcap { font-size:2.3em; }
  main p.indent { text-indent:34px }
  main p, main dt { margin-bottom:21px; }
  main ul li { margin-bottom:17px; list-style-type:none; text-indent:-17px; }
    main ul li:before { content:'\2022 '; padding-right:10px; } 
  main p br.space { display:block; margin-bottom:15px; }

/*==========================================================*/
/* interstitials
/*==========================================================*/

#trigger { position:fixed; top:0; left:0; right:0; bottom:0; text-align:center; display:block; margin-left:10%; margin-right:10%; }
  #trigger p { position:absolute;  display:block; width:100%; height:80px; top:50%; margin:-40px auto 0 auto; }
    #trigger p a  { display:block; }
        
    @media all and (min-width: 1021px) {
      #trigger p a  { font-size:36px; line-height:43px; }
    }
    @media all and (max-width: 1020px) {
      #trigger p a { font-size:34px; line-height:41px; }
      }
    @media all and (max-width: 580px) {
      #trigger p a { font-size:32.5px; line-height:38.5px; }
    }
    
 /* progress bar */
 #progress, #bar { position:relative; display:block }
    #progress { width:60%; margin-left:auto; margin-right:auto; }
    #bar { width:0px; height:3px; } 

/*==========================================================*/
/* tall columns table
/*==========================================================*/
      
  /* table structure */
  .images, .imagery { width:100%; }
    .images td, .imagery td { padding:0; position:relative; background-size:cover; background-repeat:no-repeat; }
      .dark .images td, .dark .imagery td { border:20px solid #090807; }
      .light .images td, .light .imagery td { border:20px solid #eeece6; }
      
      .images td a, .imagery td a { position:absolute; width:100%; top:0; left:0; right:0; bottom:0; }
      .images td span, .imagery td span { text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); width:100%; }
  
   @media all and (min-width: 1000px) {
    .images, .imagery { height:100vh; }
      #main .images, #main .imagery { height:95vh; } 
      .images td, .imagery td { font-size:44px; display:table-cell; background-position: 50% 20%; }
        .images td { width:33.333%;}
        .imagery td { width:50%; }
          .images td span, .imagery td span { position:absolute; display:block; width:90%; }
            .images td span { bottom:10px; }
              .images td .tal span { padding:0 20px 20px 34px; left:0; }
              .images td .tac span { padding:0 0 20px 0; width:100%; }
              .images td .tar span { padding:0 34px 20px 0; right:0; }
            .imagery td span { top:46px; left:26px; }
              .imagery td .tal span { padding:0 0 30px 30px; left:0; }
              .imagery td .tar span { padding:0 30px 30px 0; right:0; }
   }
   @media all and (max-width: 999px) {
    .images, .imagery { margin:30px 0 80px 0; }
      .images td, .imagery td { display:block; height:340px; font-size:44px; background-position: 50% 36%; }
        .images td span, .imagery td span { position:absolute; bottom:30px; left:26px; }
          .images td .tal span, .images td .tac span, .images td .tar span { text-align:left; left:20px; }
          .imagery td .tal span, .imagery td .tar span { text-align:left; left:20px; }
   }
   @media all and (max-width: 699px) {
    .imagery td span { max-width:200px; }
   }
   @media all and (max-width: 499px) {
    .images td, .imagery td { height:200px; font-size:26px; }
   }

/*==========================================================*/
/* photo gallery - vertical and horizontal scroll
/*==========================================================*/

  /* Global container for both vertical and horizontal */
  
  .photo p { position:relative; padding:0; }
    p.arrow { background:transparent; font-size:5em; margin-left:42px; margin-top:-10px}
      p.arrow span { position:relative; font-size:.3em; margin:0 30px 0 -10px; }
    p.end { background:transparent; width:280px; height:104px; margin:-10px 80px 0 70px; }
      p.end span { font-size:3em; }
  .photo img { box-shadow: 0px 0px 10px rgba(0, 0, 0, .15); }
    
  /* Horizontal scroll happens when viewport larger than 990px wide */
  
  @media all and (min-width: 992px) {
    #gallery body { overflow-y:auto; }
    .photo { position:absolute; width:auto; white-space:nowrap; top:50vh; }
      .photo p { display:inline-block; vertical-align:middle; }
        .photo p a i { position:absolute; bottom:-40px; left:0; color:transparent; font-style:italic; transition: all 0.5s ease-in-out; }
        .light p a:hover i { color:#000; }
        .dark p a:hover i, .light .outline p a:hover i { color:#eeece6; }
    .horz, .vert, .squr { margin:0 60px; }
  }
  
  /* Vertical scroll happens when viewport smaller than 990px wide */
  
  @media all and (max-width: 991px) {
    .photo { position:relative; width:100%;}
      .photo p { display:block; text-align:center; margin-left:auto; margin-right:auto; }
        p.arrow { display:none; }
        p.end { display:none; }
        .photo p a i { visibility:hidden; margin-bottom:20px; }
    .horz, .vert, .squr { margin:60px 0; }
    #menu-grid { display:none; }
  }
  
  /* Resize scroll and images to fit various viewports */
  /* Actual image dimensions:: large:1597x987, medium:843x521, squarelg:1230x1230, squaremd:667x667  */
  /* For retina/HDPD, initial css container from medium sized image:
    (first line below) =  86.120% of actual image size, or conversely 116.115% uprezzed
    (second line below) =  72.361% of actual image size, or conversely 138.196% uprezzed */
    
  @media all and (min-height: 841px)  { .photo { margin-top:-373px; }   .horz, .horz img { width:726px; height:449px; } .vert, .vert img { width:449px; height:726px; } .squr, .squr img { width:557px; height:557px; } }
  @media all and (max-width:  991px)  { .photo { margin-top:0; }        .horz, .horz img { width:726px; height:449px; } .vert, .vert img { width:449px; height:726px; } .squr, .squr img { width:557px; height:557px; } }
  @media all and (max-width:  800px)  { .photo { margin-top:0; }        .horz, .horz img { width:610px; height:377px; } .vert, .vert img { width:377px; height:610px; } .squr, .squr img { width:480px; height:480px; } }
  @media all and (max-height: 840px)  { .photo { margin-top:-315px; }   .horz, .horz img { width:610px; height:377px; } .vert, .vert img { width:377px; height:610px; } .squr, .squr img { width:480px; height:480px; } }  
  @media all and (max-width:  650px)  { .photo { margin-top:0; }        .horz, .horz img { width:521px; height:322px; } .vert, .vert img { width:322px; height:521px; } .squr, .squr img { width:410px; height:410px; } }
  @media all and (max-height: 725px)  { .photo { margin-top:-275px; }   .horz, .horz img { width:521px; height:322px; } .vert, .vert img { width:322px; height:521px; } .squr, .squr img { width:410px; height:410px; } }  
  @media all and (max-width:  550px)  { .photo { margin-top:0; }        .horz, .horz img { width:445px; height:275px; } .vert, .vert img { width:275px; height:445px; } .squr, .squr img { width:350px; height:350px; } }
  @media all and (max-height: 625px)  { .photo { margin-top:-240px; }   .horz, .horz img { width:445px; height:275px; } .vert, .vert img { width:275px; height:445px; } .squr, .squr img { width:350px; height:350px; } }  
  @media all and (max-width:  460px)  { .photo { margin-top:0; }        .horz, .horz img { width:380px; height:235px; } .vert, .vert img { width:235px; height:380px; } .squr, .squr img { width:299px; height:299px; } }
  @media all and (max-height: 550px)  { .photo { margin-top:-205px; }   .horz, .horz img { width:380px; height:235px; } .vert, .vert img { width:235px; height:380px; } .squr, .squr img { width:299px; height:299px; } }
  @media all and (max-width:  400px)  { .photo { margin-top:0; }        .horz, .horz img { width:300px; height:186px; } .vert, .vert img { width:186px; height:300px; } .squr, .squr img { width:255px; height:255px; } }
  @media all and (max-height: 500px)  { .photo { margin-top:-160px; }   .horz, .horz img { width:300px; height:186px; } .vert, .vert img { width:186px; height:300px; } .squr, .squr img { width:255px; height:255px; } }

/*==========================================================*/
/* mosaic cubes
/*==========================================================*/

 #mosaic #preloader { opacity:0 }
 
  .mosaica { position:relative; width:100%; max-width:2000px; margin:0 auto; z-index:2; text-align:center; }
    .cubes { position:relative; display:inline-block; padding:0; margin:0; }
      .cubes td { padding:0; margin:0; }
        .cubes td a { display:block; margin:0; padding:0; background:transparent; }
        .cubes td a img { box-shadow: 0px 0px 10px rgba(0, 0, 0, .15); }
        .textbox td { vertical-align:middle }
        .textbox p { font-size:16px; line-height:24.5px; }
      
  @media all and (min-width: 1921px) {
    .wide, .wide a, .wide a img { width:732px; height:453px; } .sqsm, .sqsm a, .sqsm a img { width:351px; height:351px; }
    .tall, .tall a, .tall a img { width:516px; height:834px; } .sqlg, .sqlg a, .sqlg a img { width:402px; height:402px; }
  }
  @media all and (min-width: 1491px) and (max-width: 1920px) {
    .wide, .wide a, .wide a img { width:610px; height:378px; } .sqsm, .sqsm a, .sqsm a img { width:290px; height:290px; }
    .tall, .tall a, .tall a img { width:432px; height:698px; } .sqlg, .sqlg a, .sqlg a img { width:334px; height:334px; }
  }
  @media all and (min-width: 1491px) {
    .cubes { border:12px solid transparent } .wide { border-bottom:30px solid transparent } .sqsm:nth-of-type(1) { border-right:30px solid transparent } .first .tall { border-right:30px solid transparent } .second .tall { border-left:30px solid transparent } .row .sqlg { border-top:30px solid transparent }
  }
  @media all and (min-width: 1201px) and (max-width: 1490px) {
    .wide, .wide a, .wide a img { width:488px; height:302px; } .sqsm, .sqsm a, .sqsm a img { width:234px; height:234px; }
    .tall, .tall a, .tall a img { width:344px; height:556px; } .sqlg, .sqlg a, .sqlg a img { width:268px; height:268px; }
  }
  @media all and (min-width: 981px) and (max-width: 1200px) {
    .wide, .wide a, .wide a img { width:390px; height:241px; } .sqsm, .sqsm a, .sqsm a img { width:185px; height:185px; }
    .tall, .tall a, .tall a img { width:276px; height:446px; } .sqlg, .sqlg a, .sqlg a img { width:213px; height:213px; }
  }
  @media all and (min-width: 981px) and (max-width: 1490px) { .cubes { border:8px solid transparent } .wide { border-bottom:20px solid transparent } .sqsm:nth-of-type(1) { border-right:20px solid transparent } .first .tall { border-right:20px solid transparent } .second .tall { border-left:20px solid transparent } .row .sqlg { border-top:20px solid transparent } }
  @media all and (min-width: 731px) and (max-width: 980px) {
    .wide, .wide a, .wide a img { width:660px; height:408px; } .sqsm, .sqsm a, .sqsm a img { width:315px; height:315px; }
    .tall, .tall a, .tall a img { width:358px; height:578px; } .sqlg, .sqlg a, .sqlg a img { width:274px; height:274px; }
  }
  @media all and (min-width: 601px) and (max-width: 730px) {
    .wide, .wide a, .wide a img { width:558px; height:345px; } .sqsm, .sqsm a, .sqsm a img { width:264px; height:264px; }
    .tall, .tall a, .tall a img { width:301px; height:486px; } .sqlg, .sqlg a, .sqlg a img { width:228px; height:228px; }      
  }
  @media all and (min-width: 601px) and (max-width: 980px) { .cubes { border:12px solid transparent; margin-bottom:2px } .wide { border-bottom:30px solid transparent } .sqsm:nth-of-type(1) { border-right:30px solid transparent } .first .tall { border-right:30px solid transparent } .second .tall { border-left:30px solid transparent } .row .sqlg { border-top:30px solid transparent } }
  @media all and (max-width: 600px)                        { .cubes { margin:0 auto } .cubes:nth-of-type(1) { margin-top:60px } .cubes, .cubes tbody, .cubes tr, .cubes td { display:block; } .cubes tbody, .cubes td { position:relative; margin: 0 auto 60px auto; } }
  @media all and (min-width: 551px) and (max-width: 600px) { .sqsm, .sqsm a, .sqsm a img, .sqlg, .sqlg a, .sqlg a img { width:410px; height:410px; } .tall, .tall a, .tall a img { width:322px; height:521px; } .wide, .wide a, .wide a img { width:521px; height:322px; } .textbox .tall { width:410px; height:350px; } }
  @media all and (min-width: 461px) and (max-width: 550px) { .sqsm, .sqsm a, .sqsm a img, .sqlg, .sqlg a, .sqlg a img { width:350px; height:350px; } .tall, .tall a, .tall a img { width:275px; height:445px; } .wide, .wide a, .wide a img { width:445px; height:275px; } .textbox .tall { width:350px; height:350px; } }
  @media all and (min-width: 401px) and (max-width: 460px) { .sqsm, .sqsm a, .sqsm a img, .sqlg, .sqlg a, .sqlg a img { width:299px; height:299px; } .tall, .tall a, .tall a img { width:235px; height:380px; } .wide, .wide a, .wide a img { width:380px; height:235px; } .textbox .tall { width:299px; height:345px; } }
  @media all and (max-width: 400px)                        { .sqsm, .sqsm a, .sqsm a img, .sqlg, .sqlg a, .sqlg a img { width:255px; height:255px; } .tall, .tall a, .tall a img { width:186px; height:300px; } .wide, .wide a, .wide a img { width:300px; height:186px; } .textbox .tall { width:255px; height:345px; } }

/*==========================================================*/
/* Juicebox
/*==========================================================*/

.jb-idx-thb-list-page-number { display:none; }
.jb-idx-thumb, .jb-thm-thumb-image, .jb-idx-thb-frame { border-radius:30px; }
.jb-idx-thumbnail-container { z-index:1006; }
.jb-navigation .jbn-right-button { right:-40px; }
.jb-navigation .jbn-left-button { left:-40px; }

/*==========================================================*/
/* Juicebox pages, open modal caption fadein / fadeout
/*==========================================================*/

/* fixed position transparent screen on photobox pages */
#photobox #touch, #photobox #dtouch { position:fixed; display:block; width:80%; height:80vh; z-index:1006; top:0; margin:5% 10%; }

/* navigation icons */ 
#controlbar { font-size:16px; }  
.controls { position:fixed; display:inline; width:40px; bottom:18px; z-index:1006; transition: all 0.3s ease-in-out; }
.controls a, .controls span { transition: all 0.3s ease-in-out; }
  #back-button { font-size:2em; left:35px; }
    #photobox #back-button { font-size:1.7em; bottom:20px; }
    #notes #back-button { font-size:3em; }
  #comment-button { font-size:2.6em; top:25px; left:28px; width:40px; height:40px; }
    #comment-button span { line-height:40px; width:40px; height:40px; }
  #download-button { font-size:1.8em; left:85px; padding-top:2px; }
  #left-button { font-size:1.9em; right:70px;  }
  #right-button { font-size:1.9em; right:25px; }

  #back-button a, #back-button a:visited, #left-button a, #left-button a:visited, #right-button a, #right-button a:visited, #download-button a, #download-button span, #download-button a:visited,
  #comment-button a, #comment-button span, #comment-button a:visited { opacity:.6; cursor:pointer; }
  #back-button a:hover, #back-button a:active, #left-button a:hover, #left-button a:active, #right-button a:hover, #right-button a:active, #comment-button a:hover, #comment-button a:active, 
    #comment-button span:hover, #comment-button span:active, #download-button a:hover, #download-button a:active,  #download-button span:hover, #download-button span:active { opacity:1; } 

/* comment overlay and download overlay */  
#comment, #download { visibility:hidden; opacity:0; position:fixed; background-color:transparent; top:50%; left:50%;
            padding:40px; transition: all .5s ease-in-out; z-index:-3; }
  #comment { height:360px; margin-top:-220px; }
  #download { height:400px; margin-top:-260px; }
    #comment.bringforward2, #download.bringforward2 { z-index:1013; visibility:visible; }
    #comment hr, #download hr { margin-left:0; margin-right:0 }
    #comment p.location { font-style:italic; opacity:.5; }
      #comment .squinch p.verse { position:absolute; bottom:50%; margin-bottom:20px; }
      #comment .squinch p.location { position:absolute; top:50%; margin-top:20px; }
      #comment .unsquinch p.location { margin-top:40px; }
      #comment .long, #download .long { display:none; }
    
/* close button */
#touch:hover, #dtouch:hover, #close:hover, #dclose:hover { cursor:pointer; }
p#close, p#dclose, .blurb p#close, .blurb p#dclose { position:fixed; top:50%; left:50%; z-index:1013; font-size:32px; font-weight:400; opacity:.8; transition: all 0.5s ease-in-out; }
  p#close { margin-top:-205px; }
  p#dclose { margin-top:-245px; }
    p#close:hover, p#dclose:hover { opacity:1; }
  
/* adjust comment/download overlays and close button for viewport width */ 
  @media all and (min-width: 450px) {
    #comment, #download { width:320px; margin-left:-200px; }
    p#close, p#dclose { margin-left:150px; }
  }
  @media all and (max-width: 449px) {
    #comment, #download { width:280px; margin-left:-180px; } 
    p#close, p#dclose { margin-left:130px; }
  }    

/* make controls disappear when overlays happen */
#photobox.controlhide .controls, 
#photobox.controlhide .button-container, 
#photobox.controlhide #menu-top, 
.audioplayer.controlhide #nav, 
.audioplayer.controlhide #links p
{ opacity:0 !important; }
#photobox.controlhide2 .controls, 
#photobox.controlhide2 .button-container, 
.audioplayer.controlhide2 #links p
{ opacity:0 !important; }
      
/* download table */
#download-table { width:300px; }
.download-tab { display:inline-block; width:60px; margin-right:10px; }
  .download-tab a  { display:block; }
    .download-tab a span { display:block; text-transform:uppercase; font-size:.5em; line-height:1.2em; margin-top:5px; }
    
/*==========================================================*/
/* ripple effect
/*==========================================================*/

  @-webkit-keyframes ripple { 100% { top:-16px; right:-16px; bottom:-16px; left:-16px; opacity: 0; border:#000 solid 8px; border-radius:50px; }}
  @keyframes ripple { 100% { top:-16px; right:-16px; bottom:-16px; left:-16px; opacity:0; border:#000 solid 8px; }}
  .ripple { vertical-align:middle; -webkit-transform:translateZ(0); transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-osx-font-smoothing:grayscale; position:relative; }
  .ripple:before { content:''; position:absolute; border:#859db5 solid 0; border-radius:50px; top:0; right:0; bottom:0; left:0; -webkit-animation-duration:1.4s; animation-duration:1.4s; }
  .ripple:hover:before, .ripple:focus:before, .ripple:active:before { -webkit-animation-name:ripple; animation-name:ripple; }
  
@charset "utf-8";

/*==========================================================*/
/* preloader
/*==========================================================*/

.spinlight { background-image: url('/img/png/loader/spinner.gif'); }
.spindark { background-image: url('/img/png/loader/loadinfo.net.120700.1.gif'); }

/* progress bar in preloader*/
#preloader #progress { position:absolute; width:120px; top:50%; left:50%; margin-top:-50px; margin-left:-60px; }

/*==========================================================*/
/* symbol on hav banner and preloader
/*==========================================================*/

#preloader #symbol { font-size:3.2em; }
#menu #symbol { font-size:2.7em; }
#nav #symbol { font-size:2em; }
  #symbol .lcir, #symbol .rcir { display:inline; position:relative; }
    #preloader #symbol .lcir { margin-right:-25px; }
    #preloader #symbol .rcir { margin-left:-25px; }
    #menu #symbol .lcir { margin-right:-22px; }
    #menu #symbol .rcir { margin-left:-22px; }
    #nav #symbol .lcir { margin-right:-17px; }
    #nav #symbol .rcir { margin-left:-17px; }
    

/*==========================================================*/
/* legacy margin top and bottom - overrides core.css
/*==========================================================*/
   
/* margin top uses fibonacci numbers, and is not same px as margin bottom. this works well in main content, but will be uneven when using mtl/mbl to space block/box content. */
/*
.mtnxxs { margin-top:-8px; } .mtnxs { margin-top:-5px; } .mtns { margin-top:-13px; } .mtnm { margin-top:-21px; } .mtnl { margin-top:-34px; } .mtnll { margin-top:-55px; }
.mtxxs { margin-top:5px; }  .mtxs { margin-top:8px; } .mts { margin-top:13px; } .mtm { margin-top:21px; } .mtl { margin-top:34px; } .mtll { margin-top:55px; } .mtlll { margin-top:89px; } .mtxl { margin-top:144px;}
.mbnxxxs { margin-bottom:-1px; } .mbnxxs { margin-bottom:-5px; } .mbnxs { margin-bottom:-8px; } .mbns { margin-bottom:-13px; } .mbnm { margin-bottom:-21px; } .mbnl { margin-bottom:-42px; } .mbnll { margin-bottom:-63px; }
.mbxxs { margin-bottom:5px; } .mbxs { margin-bottom:8px; } .mbs { margin-bottom:17px; } .mbm { margin-bottom:21px; } .mbl { margin-bottom:42px; } .mbll { margin-bottom:63px; } .mblll { margin-bottom:84px; } .mbxl { margin-bottom: 126px; }
*/

/*==========================================================*/
/* text
/*==========================================================*/
    
/* fonts and weights */

.serif { font-family:"Baskerville",georgia,"noto serif",serif; letter-spacing: -.01em; }
/* use .serif on parent tag for normal font lettering. use .serif on actual tag for archaic lettering */
.sans { font-family:"Gogh","Lucida Grande","Lucida Sans Unicode","Lucida Sans","noto sans",sans-serif; letter-spacing:0; font-feature-settings:"liga","dlig","calt"; }

.light .f100, .dark .f100, .light .fw100, .dark .fw100 { font-weight:100; font-variation-settings:"wght" 100; }
.light .f150, .dark .f150, .light .fw150, .dark .fw150 { font-weight:150; font-variation-settings:"wght" 150; }
.light .f200, .dark .f200, .light .fw200, .dark .fw200 { font-weight:200; font-variation-settings:"wght" 200; }
.light .f250, .dark .f250, .light .fw250, .dark .fw250 { font-weight:250; font-variation-settings:"wght" 250; }
.light .f300, .dark .f300, .light .fw300, .dark .fw300 { font-weight:300; font-variation-settings:"wght" 300; }
.light .f350, .dark .f350, .light .fw350, .dark .fw350 { font-weight:350; font-variation-settings:"wght" 350; }
.light .f400, .dark .f400, .light .fw400, .dark .fw400 { font-weight:400; font-variation-settings:"wght" 400; }
.light .f540, .dark .f540, .light .fw540, .dark .fw540 { font-weight:450; font-variation-settings:"wght" 450; }
.light .f500, .dark .f500, .light .fw500, .dark .fw500 { font-weight:500; font-variation-settings:"wght" 500; }
.light .f550, .dark .f550, .light .fw550, .dark .fw550 { font-weight:550; font-variation-settings:"wght" 550; }
.light .f600, .dark .f600, .light .fw600, .dark .fw600 { font-weight:600; font-variation-settings:"wght" 600; }
.light .f650, .dark .f650, .light .fw650, .dark .fw650 { font-weight:650; font-variation-settings:"wght" 650; }
.light .f700, .dark .f700, .light .fw700, .dark .fw700 { font-weight:700; font-variation-settings:"wght" 700; }
.light .f750, .dark .f750, .light .fw750, .dark .fw750 { font-weight:750; font-variation-settings:"wght" 750; }
.light .f800, .dark .f800, .light .fw800, .dark .fw800 { font-weight:800; font-variation-settings:"wght" 800; }
.light .f850, .dark .f850, .light .fw850, .dark .fw850 { font-weight:850; font-variation-settings:"wght" 850; }
.light .f900, .dark .f900, .light .fw900, .dark .fw900 { font-weight:900; font-variation-settings:"wght" 900; }

/* standardize sizes */

h1, h2, h3, h5, p, ul, ol, dt, dd, figcaption, .toggle, .toggler, input[type=submit], table { font-size:21px; }
h1, h2, h3, h4, h5, p, ul, ol, dt, dd, figcaption, .toggle, .toggler, label, input[type=submit] { line-height:30px; }

/* set font weights */

.dark h1 { font-weight:750; font-variation-settings:"wght" 750; }
.dark h2 { font-weight:600; font-variation-settings:"wght" 600; }
.dark h3, .dark .h3p { font-weight:750; font-variation-settings:"wght" 750; }
.dark h4 { font-weight:600; font-variation-settings:"wght" 600; }
.dark h5 { font-weight:700; font-variation-settings:"wght" 700; }
.dark h6, .dark .h6p { font-weight:500; font-variation-settings:"wght" 500; }

.light h1, .dark .text h1 { font-weight:800; font-variation-settings:"wght" 800; }
.light h2, .dark .text h2 { font-weight:700; font-variation-settings:"wght" 700; }
.light h3, .light .h3p, .dark .text h3 { font-weight:800; font-variation-settings:"wght" 800; }
.light h4, .dark .text h4 { font-weight:700; font-variation-settings:"wght" 700; }
.light h5, .dark .text h5 { font-weight:700; font-variation-settings:"wght" 700; }
.light h6, .light .h6p, .dark .text h6 { font-weight:600; font-variation-settings:"wght" 600; }

/* set font sizes */

h1, .h1p { font-size:49px; line-height:53px; }
h2, .h2p { font-size:36px; line-height:43px; }
h3, .h3p { font-size:29px; line-height:36.5px; }
h4, .h4p { font-size:25px; line-height:32.5px; }
h5, .h5p { font-size:23px; line-height:31px; }  
h6, .h6p { font-size:21px; line-height:27.5px; }
main p, main ul, main ol, footer p, main dt, main dd, .audiobox p, main figcaption { line-height:31.5px; }
#breadcrumb { font-size:16px; line-height:28px; }

  @media all and (max-width: 1199px) {
    h1, .h1p { font-size:46.5px; line-height:51px; }
    h2, .h2p { font-size:34px; line-height:41px; }
    h3, .h3p { font-size:27.5px; line-height:35.5px; }
    h4, .h4p { font-size:24px; line-height:32px;  }
    h5, .h5p { font-size:22px; line-height:29.5px; }  
    h6, .h6p { font-size:20px; line-height:30.5px; }
    main p, main ul, main ol, footer p, main dt, main dd, .audiobox p, main figcaption { font-size:20px; line-height:30.5px; }
    #breadcrumb { font-size:15px; line-height:27px; }
  }
  @media all and (max-width: 579px) {
    h1, .h1p { font-size:44px; line-height:47.5px; }
    h2, .h2p { font-size:32.5px; line-height:38.5px; }
    h3, .h3p { font-size:26px; line-height:33px; }
    h4, .h4p { font-size:22.5px; line-height:31px; }
    h5, .h5p { font-size:21px; line-height:28.5px; }  
    h6, .h6p { font-size:19px; line-height:28.5px; }
    main p, main ul, main ol, footer p, main dt, main dd, .audiobox p, main figcaption { font-size:19px; line-height:28.5px; }
    #breadcrumb { font-size:14px; line-height:26px; }
  }
  @media all and (max-width: 444px) {
    h1, .h1p { font-size:38px; line-height:42px; }
      h1.shrink { font-size:35.5px; line-height:39.5px; }
    h2, .h2p { font-size:29px; line-height:36.5px; }
  }
   @media all and (max-width: 349px) {
    h1, .h1p { font-size:33px; line-height:39.5px; }
    h2, .h2p { font-size:24.5px; line-height:33px; }
  }
  
/*==========================================================*/
/* hyperlinks
/*==========================================================*/

a, a:visited, a:link, a:hover, a:active, 
a .icon 
{ text-decoration:none; transition: all 0.3s ease-in-out; border-bottom:2px dotted transparent; }

a.underline, a.underline:visited, 
main a, main a:visited, main a:link,
.link,  
#comment a, 
#breadcrumb a, 
a .icon { padding-bottom:2px; }

.light a.underline:hover, 
.light .branch a:hover, 
.light main a:hover, .light main a:active, 
.light .link:hover, .light .link:active, 
.light #comment a:hover, .light #comment a:active, 
.light #breadcrumb a:hover, 
.light a:hover .icon,  .light a:active .icon
{ border-bottom:2px dotted #757575; transition:all 0.3s ease-in-out; }

.dark a.underline:hover, 
.dark .branch a:hover, 
.dark main a:hover, .dark main a:active, 
.dark .link:hover, .dark .link:active, 
.dark #comment a:hover, .dark #comment a:active,  
.dark #breadcrumb a:hover, 
.dark a:hover .icon,  .dark a:active .icon
{ border-bottom:2px dotted #888784; transition:all 0.3s ease-in-out; }
  
/* no underline */
.dark a.nul:hover, .dark a.nul:active, 
.light a.nul:hover, .light a.nul:active, 
.light a.go:hover, .light a.go:active,
.dark span.nul:hover, .dark span.nul:active, 
.light span.nul:hover, .light span.nul:active
{ border-bottom:2px solid transparent; transition:all 0.3s ease-in-out; }

.bb0, a.toggler, a.toggler:hover, a.toggler:active, .dark a.toggler span.nul:hover, .dark a.toggler span.nul:active,
.dark a.toggler span.nul:hover, .dark a.toggler span.nul:active { border-bottom:0 }

/*==========================================================*/
/* color and text combo elements
/*==========================================================*/

  /* hyperlinks in body copy */
  .dark .link { color:#fff; font-weight:700; font-variation-settings:"wght" 700; }
  .light .link, .dark .text .link { color:#004e2d; font-weight:800; font-variation-settings:"wght" 800; }

  /* tooltips in body copy */
  .dark .lex { cursor:help; border-bottom:2px dotted #888784; }
  .light .lex, .dark .text .lex  { cursor:help; border-bottom:2px dotted #bbbab5; }

  /* hyperlinks for footnotes to reference section */
  .info sup a, main sup a, main sup { padding-bottom:0; border-bottom:0; cursor:pointer;font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","noto sans",sans-serif; font-size:.6em; }
    .dark .info sup a, .dark main sup a, .dark main sup { color:#fff; }
    .light .info sup a, .light main sup a, .light main sup, .dark main .text sup a, .dark main .text sup { color:#004e2d; }

/*==========================================================*/
/* global homepage
/*==========================================================*/

  #mainlayer1 { width:100%; position:fixed; z-index:0; top:0; transition: all 0.4s ease-in-out; }
    
    #mainlayer2 { position:absolute; width:100%; display:block; z-index:10; }
    #mainlayer2 a { position:relative; height:100%; display:block; transition: all 0.3s ease-in-out; }

  /* Responsive calls for serving appropriately sized images when not using vegas*/
  
  /*  @media all and (min-width: 990px)                         { #mainlayer1 { background-image: radial-gradient(circle at center, rgba(0,0,0,0) 0%, #000 90%, #000 100%), url('../img/scrapbook/2000.jpg'); } } */
  /*  @media all and (min-width: 476px) and (max-width: 989px)  { #mainlayer1 { background-image: radial-gradient(circle at center, rgba(0,0,0,0) 0%, #000 90%, #000 100%), url('../img/scrapbook/1280.jpg'); } } */
  /*  @media all and (max-width: 475px)                         { #mainlayer1 { background-image: radial-gradient(circle at center, rgba(0,0,0,0) 0%, #000 90%, #000 100%), url('../img/scrapbook/800.jpg'); } } */
         
/*==========================================================*/
/* global homepage below the hero
/*==========================================================*/

  #mainlayer3 { position:relative; transition: all 0.5s ease-in-out; padding:0; z-index:12; }
  
/*==========================================================*/
/* split panel pages 
/*==========================================================*/

  /* (for homepage panels see faith.x.x.css)

  /* leftpanel image info icon */
  .photoview { position:absolute; left:30px; bottom:30px; width:20px; height:40px; display:block; font-size:35px; line-height:1.65em; z-index:3; color:#fff; opacity:.6; transition: all 0.3s ease-in-out; }
  a:hover .photoview { opacity:1; }
    
/*==========================================================*/
/* bio blurbs / listing entries / and small font paragraphs
/*==========================================================*/

.blurb p, .blurb td, .blurb dt, .blurb dd, .blurb figcaption { font-size:19px; line-height:28.5px; }
.footblurb p { font-size:18px; line-height:26.5px; }
  .blurb .bio p, .blurb .list .head, .blurb .list p { margin-left:140px; }
  .blurb h4 { margin-top:3px; }
  
.tmb { float:left; border-radius:120px; }
  .tmb, .tmb a, .tmb a img { width:120px; height:120px; }
    .tmb a img { box-shadow: 0px 0px 10px rgba(0, 0, 0, .15); border-radius:120px; }
 
  @media all and (max-width: 1199px) {
    .blurb p, .blurb td, .blurb dt, .blurb dd, .blurb figcaption { font-size:18px; line-height:26.5px; }
  }
  @media all and (max-width: 899px) {
    .blurb p, .footblurb p, .blurb td, .blurb dt, .blurb dd, .blurb figcaption { font-size:17px; line-height:25px; }
      .blurb .bio p, .blurb .list .head, .blurb .list p { margin-left:120px; }
    .tmb, .tmb a, .tmb a img { width:100px; height:100px; }
  }
  @media all and (max-width: 579px) {
    .blurb p, .footblurb p, .blurb td, .blurb dt, .blurb dd, .blurb figcaption { font-size:16px; line-height:24.5px; }
      .blurb .bio p, .blurb .list .head, .blurb .list p { margin-left:80px; }
    .tmb, .tmb a, .tmb a img { width:65px; height:65px; }
  }   

  /* dept blocks on homepage and leftwide pages */
  #homecolumn .blurb .bio p, #homecolumn .blurb .list .head, #homecolumn .blurb .list p { margin-left:auto; }
    #homecolumn .tmb { float:none; border-radius:120px; margin-left:auto; margin-right:auto; text-align:center; }
    
  /* sub links in dept blocks */
  .tinythumb a { height:40px; line-height:40px; }   
    .tinythumb img { position:absolute; width:35px; border-radius:20px; margin-top:3px; }
      .tinythumb .icon { margin-left:47px; }
      
  @media all and (max-width: 899px) {
    #homecolumn .blurb p { font-size:17px; line-height:25px; }
      #homecolumn .blurb .bio p, #homecolumn .blurb .list .head, #homecolumn .blurb .list p { margin-left:auto; }
      .biopic, .biopic a, .biopic a img { width:120px; height:120px; }
  }
  @media all and (max-width: 579px) {
    #homecolumn .blurb .bio p, #homecolumn .blurb .list .head, #homecolumn .blurb .list p { margin-left:auto; }
      .biopic .tmb, .biopic a, .biopic a img { width:120px; height:120px; }
  }
  
/*==========================================================*/
/* column
/*==========================================================*/ 
 
  .bold { font-weight:800; }
  
   /* vimeo video iframe */
  .figvideo { width:100%; position:relative; padding:0; }
  .max700 .video iframe { height:405px; }
    
/*==========================================================*/
/* image within column max700 (plus video)
/*==========================================================*/

  /* images and video */
  .max700 .figimg, .max700 .figimg .image, .max700 .figimg .image img, 
  .max700 .figvid, .max700 .figvid iframe                     { position:relative; display:block; padding:0; margin-left:auto; margin-right:auto; }
  
  /* horz images */
  /* class is .hrz instead of .horz from above */
  @media all and (min-width:  870px)                          { .max700 .hrz, .max700 .hrz .image, .max700 .hrz .image img { width:700px; height:433px; } }
  @media all and (min-width:  760px) and (max-width:  869px)  { .max700 .hrz, .max700 .hrz .image, .max700 .hrz .image img { width:610px; height:377px; } }
  @media all and (min-width:  650px) and (max-width:  759px)  { .max700 .hrz, .max700 .hrz .image, .max700 .hrz .image img { width:521px; height:322px; } }
  @media all and (min-width:  560px) and (max-width:  659px)  { .max700 .hrz, .max700 .hrz .image, .max700 .hrz .image img { width:445px; height:275px; } }
  @media all and (min-width:  450px) and (max-width:  559px)  { .max700 .hrz, .max700 .hrz .image, .max700 .hrz .image img { width:380px; height:235px; } }
  @media all and (min-width:  360px) and (max-width:  449px)  { .max700 .hrz, .max700 .hrz .image, .max700 .hrz .image img { width:300px; height:186px; } }
  @media all and (max-width:  359px)                          { .max700 .hrz, .max700 .hrz .image, .max700 .hrz .image img { width:260px; height:161px; } }
 
  /* squr images */
  /* use same code from above for square images, but override margins */
  .max700 .squr { margin:0; margin-left:auto; margin-right:auto; }
   
  /* horz video */
  @media all and (min-width:  870px)                          { .max700 .figvid, .max700 .figvid iframe  { width:700px; height:394px; } }
  @media all and (min-width:  760px) and (max-width:  869px)  { .max700 .figvid, .max700 .figvid iframe  { width:610px; height:343px; } }
  @media all and (min-width:  650px) and (max-width:  759px)  { .max700 .figvid, .max700 .figvid iframe  { width:521px; height:293px; } }
  @media all and (min-width:  560px) and (max-width:  659px)  { .max700 .figvid, .max700 .figvid iframe  { width:445px; height:250px; } }
  @media all and (min-width:  450px) and (max-width:  559px)  { .max700 .figvid, .max700 .figvid iframe  { width:380px; height:214px; } }
  @media all and (min-width:  360px) and (max-width:  449px)  { .max700 .figvid, .max700 .figvid iframe  { width:300px; height:169px; } }
  @media all and (max-width:  359px)                          { .max700 .figvid, .max700 .figvid iframe  { width:260px; height:146px; } }

/*==========================================================*/
/* buttons
/*==========================================================*/

    /* contact form submit button */
    input[type=submit] { position:relative; z-index:1012; border:0; display:inline-block; border-radius:30px; background-color:#004e2d;
                        padding:18px 16px; text-align:center; transition:opacity 0.2s ease-in-out 0s; text-transform:uppercase; color:#fff; margin:10px 0;
                        opacity:0.5; text-decoration:none; cursor:pointer; float:left; width:150px; font-size:.9em; line-height:1.3em; letter-spacing:2px; }
    input[type=submit]:hover, input[type=submit]:active { opacity: 1; } 
    
     /* site buttons */
    .btn1 { position:relative; border:1px solid #004e2d !important; border-radius:30px; padding:15px 30px !important; text-align:center; transition:opacity 0.2s ease-in-out 0s; 
                        background-color:#004e2d; color:#fff;
                        opacity:0.8; text-decoration:none; cursor:pointer; font-size:.9em; line-height:1.3em; }
    .btn1:hover, .btn1:active { opacity: 1; } 
    
    .btn2 { position:relative; border:1px solid #004e2d !important; border-radius:30px; padding:15px 30px !important; text-align:center; transition:opacity 0.2s ease-in-out 0s;
                        opacity: 1; text-decoration:none; cursor:pointer; font-size:.9em; line-height:1.3em; 
                        background-color:#fff; color:#004e2d; }
    .btn2:hover, .btn2:active { background-color:#004e2d; color:#fff; opacity: 0.8; } 
    
@charset "utf-8";
                                                                                                                                                        
/*==========================================================*/
/* preloader
/*==========================================================*/

 .spindark { background-image: url('../img/png/loader/loadinfo.net.120700.1.gif'); }

/* progress bar in preloader*/
#preloader #progress { position:absolute; width:120px; top:50%; left:50%; margin-top:-50px; margin-left:-60px; }

/*==========================================================*/
/* symbol on hav banner and preloader
/*==========================================================*/

#preloader #symbol { font-size:3.2em; }
#menu #symbol { font-size:2.7em; }
#nav #symbol { font-size:2em; }
  #symbol .lcir, #symbol .rcir { display:inline; position:relative; }
    #preloader #symbol .lcir { margin-right:-25px; }
    #preloader #symbol .rcir { margin-left:-25px; }
    #menu #symbol .lcir { margin-right:-22px; }
    #menu #symbol .rcir { margin-left:-22px; }
    #nav #symbol .lcir { margin-right:-17px; }
    #nav #symbol .rcir { margin-left:-17px; }

/*==========================================================*/
/* homepage layers
/*==========================================================*/
 
  /* static hero image - responsive calls for serving appropriately sized image */
  /*
  #mainlayer1 { background-repeat:no-repeat; -webkit-background-size:cover;  -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-position:50% 44%; }
  @media all and (min-width: 990px)                         { #mainlayer1 { background-image: url('/img/homepage/consciousness/2000.consciousness.jpg'); } } // optional: radial-gradient(circle at center, rgba(0,0,0,0) 0%, #000 90%, #000 100%),
  @media all and (min-width: 476px) and (max-width: 989px)  { #mainlayer1 { background-image: url('/img/homepage/consciousness/1280.consciousness.jpg'); } } // optional: radial-gradient(circle at center, rgba(0,0,0,0) 0%, #000 90%, #000 100%),
  @media all and (max-width: 475px)                         { #mainlayer1 { background-image: radial-gradient(circle at center, rgba(0,0,0,0) 30%, #000 90%, #000 100%), url('/img/homepage/consciousness/800.consciousness.jpg'); } } 
  */ 
  
  #mainlayer2 { top:0; }
  
  /* responsive calls for setting #mainlayer1 height - addresses iOS bug for height:100% */
  
    @media all and (min-height: 3001px) { #mainlayer1, #mainlayer2 { height: 3001px; } #mainlayer3 { margin-top: 3001px; } #homepage #leftpanel { height:2931px; } }
    @media all and (max-height: 2900px) { #mainlayer1, #mainlayer2 { height: 2900px; } #mainlayer3 { margin-top: 2900px; } #homepage #leftpanel { height:2830px; } }
    @media all and (max-height: 2800px) { #mainlayer1, #mainlayer2 { height: 2000px; } #mainlayer3 { margin-top: 2800px; } #homepage #leftpanel { height:2730px; } }
    @media all and (max-height: 2700px) { #mainlayer1, #mainlayer2 { height: 2700px; } #mainlayer3 { margin-top: 2700px; } #homepage #leftpanel { height:2630px; } }
    @media all and (max-height: 2600px) { #mainlayer1, #mainlayer2 { height: 2600px; } #mainlayer3 { margin-top: 2600px; } #homepage #leftpanel { height:2530px; } }
    @media all and (max-height: 2500px) { #mainlayer1, #mainlayer2 { height: 2500px; } #mainlayer3 { margin-top: 2500px; } #homepage #leftpanel { height:2430px; } }
    @media all and (max-height: 2400px) { #mainlayer1, #mainlayer2 { height: 2400px; } #mainlayer3 { margin-top: 2400px; } #homepage #leftpanel { height:2330px; } }
    @media all and (max-height: 2300px) { #mainlayer1, #mainlayer2 { height: 2300px; } #mainlayer3 { margin-top: 2300px; } #homepage #leftpanel { height:2230px; } }
    @media all and (max-height: 2280px) { #mainlayer1, #mainlayer2 { height: 2280px; } #mainlayer3 { margin-top: 2280px; } #homepage #leftpanel { height:2210px; } }
    @media all and (max-height: 2260px) { #mainlayer1, #mainlayer2 { height: 2260px; } #mainlayer3 { margin-top: 2260px; } #homepage #leftpanel { height:2190px; } }
    @media all and (max-height: 2240px) { #mainlayer1, #mainlayer2 { height: 2240px; } #mainlayer3 { margin-top: 2240px; } #homepage #leftpanel { height:2170px; } }
    @media all and (max-height: 2220px) { #mainlayer1, #mainlayer2 { height: 2220px; } #mainlayer3 { margin-top: 2220px; } #homepage #leftpanel { height:2150px; } }
    @media all and (max-height: 2200px) { #mainlayer1, #mainlayer2 { height: 2200px; } #mainlayer3 { margin-top: 2200px; } #homepage #leftpanel { height:2130px; } }
    @media all and (max-height: 2180px) { #mainlayer1, #mainlayer2 { height: 2180px; } #mainlayer3 { margin-top: 2180px; } #homepage #leftpanel { height:2110px; } }
    @media all and (max-height: 2160px) { #mainlayer1, #mainlayer2 { height: 2160px; } #mainlayer3 { margin-top: 2160px; } #homepage #leftpanel { height:2090px; } }
    @media all and (max-height: 2140px) { #mainlayer1, #mainlayer2 { height: 2140px; } #mainlayer3 { margin-top: 2140px; } #homepage #leftpanel { height:2070px; } }
    @media all and (max-height: 2120px) { #mainlayer1, #mainlayer2 { height: 2120px; } #mainlayer3 { margin-top: 2120px; } #homepage #leftpanel { height:2050px; } }
    @media all and (max-height: 2100px) { #mainlayer1, #mainlayer2 { height: 2100px; } #mainlayer3 { margin-top: 2100px; } #homepage #leftpanel { height:2030px; } }
    @media all and (max-height: 2080px) { #mainlayer1, #mainlayer2 { height: 2080px; } #mainlayer3 { margin-top: 2080px; } #homepage #leftpanel { height:2010px; } }
    @media all and (max-height: 2060px) { #mainlayer1, #mainlayer2 { height: 2060px; } #mainlayer3 { margin-top: 2060px; } #homepage #leftpanel { height:1990px; } }
    @media all and (max-height: 2040px) { #mainlayer1, #mainlayer2 { height: 2040px; } #mainlayer3 { margin-top: 2040px; } #homepage #leftpanel { height:1970px; } }
    @media all and (max-height: 2020px) { #mainlayer1, #mainlayer2 { height: 2020px; } #mainlayer3 { margin-top: 2020px; } #homepage #leftpanel { height:1950px; } }
    @media all and (max-height: 2000px) { #mainlayer1, #mainlayer2 { height: 2000px; } #mainlayer3 { margin-top: 2000px; } #homepage #leftpanel { height:1930px; } }
    @media all and (max-height: 1980px) { #mainlayer1, #mainlayer2 { height: 1980px; } #mainlayer3 { margin-top: 1980px; } #homepage #leftpanel { height:1910px; } }
    @media all and (max-height: 1960px) { #mainlayer1, #mainlayer2 { height: 1960px; } #mainlayer3 { margin-top: 1960px; } #homepage #leftpanel { height:1890px; } }
    @media all and (max-height: 1940px) { #mainlayer1, #mainlayer2 { height: 1940px; } #mainlayer3 { margin-top: 1940px; } #homepage #leftpanel { height:1870px; } }
    @media all and (max-height: 1920px) { #mainlayer1, #mainlayer2 { height: 1920px; } #mainlayer3 { margin-top: 1920px; } #homepage #leftpanel { height:1850px; } }
    @media all and (max-height: 1900px) { #mainlayer1, #mainlayer2 { height: 1900px; } #mainlayer3 { margin-top: 1900px; } #homepage #leftpanel { height:1830px; } }
    @media all and (max-height: 1880px) { #mainlayer1, #mainlayer2 { height: 1880px; } #mainlayer3 { margin-top: 1880px; } #homepage #leftpanel { height:1810px; } }
    @media all and (max-height: 1860px) { #mainlayer1, #mainlayer2 { height: 1860px; } #mainlayer3 { margin-top: 1860px; } #homepage #leftpanel { height:1790px; } }
    @media all and (max-height: 1840px) { #mainlayer1, #mainlayer2 { height: 1840px; } #mainlayer3 { margin-top: 1840px; } #homepage #leftpanel { height:1770px; } }
    @media all and (max-height: 1820px) { #mainlayer1, #mainlayer2 { height: 1820px; } #mainlayer3 { margin-top: 1820px; } #homepage #leftpanel { height:1750px; } }
    @media all and (max-height: 1800px) { #mainlayer1, #mainlayer2 { height: 1800px; } #mainlayer3 { margin-top: 1800px; } #homepage #leftpanel { height:1730px; } }
    @media all and (max-height: 1780px) { #mainlayer1, #mainlayer2 { height: 1780px; } #mainlayer3 { margin-top: 1780px; } #homepage #leftpanel { height:1710px; } }
    @media all and (max-height: 1760px) { #mainlayer1, #mainlayer2 { height: 1760px; } #mainlayer3 { margin-top: 1760px; } #homepage #leftpanel { height:1690px; } }
    @media all and (max-height: 1740px) { #mainlayer1, #mainlayer2 { height: 1740px; } #mainlayer3 { margin-top: 1740px; } #homepage #leftpanel { height:1670px; } }
    @media all and (max-height: 1720px) { #mainlayer1, #mainlayer2 { height: 1720px; } #mainlayer3 { margin-top: 1720px; } #homepage #leftpanel { height:1650px; } }
    @media all and (max-height: 1700px) { #mainlayer1, #mainlayer2 { height: 1700px; } #mainlayer3 { margin-top: 1700px; } #homepage #leftpanel { height:1630px; } }
    @media all and (max-height: 1680px) { #mainlayer1, #mainlayer2 { height: 1680px; } #mainlayer3 { margin-top: 1680px; } #homepage #leftpanel { height:1610px; } }
    @media all and (max-height: 1660px) { #mainlayer1, #mainlayer2 { height: 1660px; } #mainlayer3 { margin-top: 1660px; } #homepage #leftpanel { height:1590px; } }
    @media all and (max-height: 1640px) { #mainlayer1, #mainlayer2 { height: 1640px; } #mainlayer3 { margin-top: 1640px; } #homepage #leftpanel { height:1570px; } }
    @media all and (max-height: 1620px) { #mainlayer1, #mainlayer2 { height: 1620px; } #mainlayer3 { margin-top: 1620px; } #homepage #leftpanel { height:1550px; } }
    @media all and (max-height: 1600px) { #mainlayer1, #mainlayer2 { height: 1600px; } #mainlayer3 { margin-top: 1600px; } #homepage #leftpanel { height:1530px; } }
    @media all and (max-height: 1580px) { #mainlayer1, #mainlayer2 { height: 1580px; } #mainlayer3 { margin-top: 1580px; } #homepage #leftpanel { height:1510px; } }
    @media all and (max-height: 1560px) { #mainlayer1, #mainlayer2 { height: 1560px; } #mainlayer3 { margin-top: 1560px; } #homepage #leftpanel { height:1490px; } }
    @media all and (max-height: 1540px) { #mainlayer1, #mainlayer2 { height: 1540px; } #mainlayer3 { margin-top: 1540px; } #homepage #leftpanel { height:1470px; } }
    @media all and (max-height: 1520px) { #mainlayer1, #mainlayer2 { height: 1520px; } #mainlayer3 { margin-top: 1520px; } #homepage #leftpanel { height:1450px; } }
    @media all and (max-height: 1500px) { #mainlayer1, #mainlayer2 { height: 1500px; } #mainlayer3 { margin-top: 1500px; } #homepage #leftpanel { height:1430px; } }
    @media all and (max-height: 1480px) { #mainlayer1, #mainlayer2 { height: 1480px; } #mainlayer3 { margin-top: 1480px; } #homepage #leftpanel { height:1410px; } }
    @media all and (max-height: 1460px) { #mainlayer1, #mainlayer2 { height: 1460px; } #mainlayer3 { margin-top: 1460px; } #homepage #leftpanel { height:1390px; } }
    @media all and (max-height: 1440px) { #mainlayer1, #mainlayer2 { height: 1440px; } #mainlayer3 { margin-top: 1440px; } #homepage #leftpanel { height:1370px; } }
    @media all and (max-height: 1420px) { #mainlayer1, #mainlayer2 { height: 1420px; } #mainlayer3 { margin-top: 1420px; } #homepage #leftpanel { height:1350px; } }
    @media all and (max-height: 1400px) { #mainlayer1, #mainlayer2 { height: 1400px; } #mainlayer3 { margin-top: 1400px; } #homepage #leftpanel { height:1330px; } }
    @media all and (max-height: 1380px) { #mainlayer1, #mainlayer2 { height: 1380px; } #mainlayer3 { margin-top: 1380px; } #homepage #leftpanel { height:1310px; } }
    @media all and (max-height: 1360px) { #mainlayer1, #mainlayer2 { height: 1360px; } #mainlayer3 { margin-top: 1360px; } #homepage #leftpanel { height:1290px; } }
    @media all and (max-height: 1340px) { #mainlayer1, #mainlayer2 { height: 1340px; } #mainlayer3 { margin-top: 1340px; } #homepage #leftpanel { height:1270px; } }
    @media all and (max-height: 1320px) { #mainlayer1, #mainlayer2 { height: 1320px; } #mainlayer3 { margin-top: 1320px; } #homepage #leftpanel { height:1250px; } }
    @media all and (max-height: 1300px) { #mainlayer1, #mainlayer2 { height: 1300px; } #mainlayer3 { margin-top: 1300px; } #homepage #leftpanel { height:1230px; } }
    @media all and (max-height: 1280px) { #mainlayer1, #mainlayer2 { height: 1280px; } #mainlayer3 { margin-top: 1280px; } #homepage #leftpanel { height:1210px; } }
    @media all and (max-height: 1260px) { #mainlayer1, #mainlayer2 { height: 1260px; } #mainlayer3 { margin-top: 1260px; } #homepage #leftpanel { height:1190px; } }
    @media all and (max-height: 1240px) { #mainlayer1, #mainlayer2 { height: 1240px; } #mainlayer3 { margin-top: 1240px; } #homepage #leftpanel { height:1170px; } }
    @media all and (max-height: 1220px) { #mainlayer1, #mainlayer2 { height: 1220px; } #mainlayer3 { margin-top: 1220px; } #homepage #leftpanel { height:1150px; } }
    @media all and (max-height: 1200px) { #mainlayer1, #mainlayer2 { height: 1200px; } #mainlayer3 { margin-top: 1200px; } #homepage #leftpanel { height:1130px; } }
    @media all and (max-height: 1180px) { #mainlayer1, #mainlayer2 { height: 1180px; } #mainlayer3 { margin-top: 1180px; } #homepage #leftpanel { height:1110px; } }
    @media all and (max-height: 1160px) { #mainlayer1, #mainlayer2 { height: 1160px; } #mainlayer3 { margin-top: 1160px; } #homepage #leftpanel { height:1090px; } }
    @media all and (max-height: 1140px) { #mainlayer1, #mainlayer2 { height: 1140px; } #mainlayer3 { margin-top: 1140px; } #homepage #leftpanel { height:1070px; } }
    @media all and (max-height: 1120px) { #mainlayer1, #mainlayer2 { height: 1120px; } #mainlayer3 { margin-top: 1120px; } #homepage #leftpanel { height:1050px; } }
    @media all and (max-height: 1100px) { #mainlayer1, #mainlayer2 { height: 1100px; } #mainlayer3 { margin-top: 1100px; } #homepage #leftpanel { height:1030px; } }
    @media all and (max-height: 1080px) { #mainlayer1, #mainlayer2 { height: 1080px; } #mainlayer3 { margin-top: 1080px; } #homepage #leftpanel { height:1010px; } }
    @media all and (max-height: 1060px) { #mainlayer1, #mainlayer2 { height: 1060px; } #mainlayer3 { margin-top: 1060px; } #homepage #leftpanel { height: 980px; } }
    @media all and (max-height: 1040px) { #mainlayer1, #mainlayer2 { height: 1040px; } #mainlayer3 { margin-top: 1040px; } #homepage #leftpanel { height: 970px; } }
    @media all and (max-height: 1020px) { #mainlayer1, #mainlayer2 { height: 1020px; } #mainlayer3 { margin-top: 1020px; } #homepage #leftpanel { height: 950px; } }
    @media all and (max-height: 1000px) { #mainlayer1, #mainlayer2 { height: 1000px; } #mainlayer3 { margin-top: 1000px; } #homepage #leftpanel { height: 730px; } }
    @media all and (max-height:  980px) { #mainlayer1, #mainlayer2 { height:  980px; } #mainlayer3 { margin-top:  980px; } #homepage #leftpanel { height: 710px; } }
    @media all and (max-height:  960px) { #mainlayer1, #mainlayer2 { height:  960px; } #mainlayer3 { margin-top:  960px; } #homepage #leftpanel { height: 890px; } }
    @media all and (max-height:  940px) { #mainlayer1, #mainlayer2 { height:  940px; } #mainlayer3 { margin-top:  940px; } #homepage #leftpanel { height: 870px; } }
    @media all and (max-height:  920px) { #mainlayer1, #mainlayer2 { height:  920px; } #mainlayer3 { margin-top:  920px; } #homepage #leftpanel { height: 850px; } }
    @media all and (max-height:  900px) { #mainlayer1, #mainlayer2 { height:  900px; } #mainlayer3 { margin-top:  900px; } #homepage #leftpanel { height: 830px; } }
    @media all and (max-height:  880px) { #mainlayer1, #mainlayer2 { height:  880px; } #mainlayer3 { margin-top:  880px; } #homepage #leftpanel { height: 810px; } }
    @media all and (max-height:  860px) { #mainlayer1, #mainlayer2 { height:  860px; } #mainlayer3 { margin-top:  860px; } #homepage #leftpanel { height: 790px; } }
    @media all and (max-height:  840px) { #mainlayer1, #mainlayer2 { height:  840px; } #mainlayer3 { margin-top:  840px; } #homepage #leftpanel { height: 770px; } }
    @media all and (max-height:  820px) { #mainlayer1, #mainlayer2 { height:  820px; } #mainlayer3 { margin-top:  820px; } #homepage #leftpanel { height: 750px; } }
    @media all and (max-height:  800px) { #mainlayer1, #mainlayer2 { height:  800px; } #mainlayer3 { margin-top:  800px; } #homepage #leftpanel { height: 730px; } }
    @media all and (max-height:  780px) { #mainlayer1, #mainlayer2 { height:  780px; } #mainlayer3 { margin-top:  780px; } #homepage #leftpanel { height: 710px; } }
    @media all and (max-height:  760px) { #mainlayer1, #mainlayer2 { height:  760px; } #mainlayer3 { margin-top:  760px; } #homepage #leftpanel { height: 690px; } }
    @media all and (max-height:  740px) { #mainlayer1, #mainlayer2 { height:  740px; } #mainlayer3 { margin-top:  740px; } #homepage #leftpanel { height: 670px; } }
    @media all and (max-height:  720px) { #mainlayer1, #mainlayer2 { height:  720px; } #mainlayer3 { margin-top:  720px; } #homepage #leftpanel { height: 650px; } }
    @media all and (max-height:  700px) { #mainlayer1, #mainlayer2 { height:  700px; } #mainlayer3 { margin-top:  700px; } #homepage #leftpanel { height: 630px; } }
    @media all and (max-height:  680px) { #mainlayer1, #mainlayer2 { height:  680px; } #mainlayer3 { margin-top:  680px; } #homepage #leftpanel { height: 610px; } }
    @media all and (max-height:  660px) { #mainlayer1, #mainlayer2 { height:  660px; } #mainlayer3 { margin-top:  660px; } #homepage #leftpanel { height: 590px; } }
    @media all and (max-height:  640px) { #mainlayer1, #mainlayer2 { height:  640px; } #mainlayer3 { margin-top:  640px; } #homepage #leftpanel { height: 570px; } }
    @media all and (max-height:  620px) { #mainlayer1, #mainlayer2 { height:  620px; } #mainlayer3 { margin-top:  620px; } #homepage #leftpanel { height: 550px; } }
    @media all and (max-height:  600px) { #mainlayer1, #mainlayer2 { height:  600px; } #mainlayer3 { margin-top:  600px; } #homepage #leftpanel { height: 530px; } }
    @media all and (max-height:  580px) { #mainlayer1, #mainlayer2 { height:  580px; } #mainlayer3 { margin-top:  580px; } #homepage #leftpanel { height: 510px; } }
    @media all and (max-height:  560px) { #mainlayer1, #mainlayer2 { height:  560px; } #mainlayer3 { margin-top:  560px; } #homepage #leftpanel { height: 490px; } }
    @media all and (max-height:  540px) { #mainlayer1, #mainlayer2 { height:  540px; } #mainlayer3 { margin-top:  540px; } #homepage #leftpanel { height: 470px; } }
    @media all and (max-height:  520px) { #mainlayer1, #mainlayer2 { height:  520px; } #mainlayer3 { margin-top:  520px; } #homepage #leftpanel { height: 450px; } }
    @media all and (max-height:  500px) { #mainlayer1, #mainlayer2 { height:  500px; } #mainlayer3 { margin-top:  500px; } #homepage #leftpanel { height: 430px; } }
    @media all and (max-height:  480px) { #mainlayer1, #mainlayer2 { height:  480px; } #mainlayer3 { margin-top:  480px; } #homepage #leftpanel { height: 410px; } }
    @media all and (max-height:  460px) { #mainlayer1, #mainlayer2 { height:  460px; } #mainlayer3 { margin-top:  460px; } #homepage #leftpanel { height: 390px; } }
    @media all and (max-height:  440px) { #mainlayer1, #mainlayer2 { height:  440px; } #mainlayer3 { margin-top:  440px; } #homepage #leftpanel { height: 370px; } }
    @media all and (max-height:  420px) { #mainlayer1, #mainlayer2 { height:  420px; } #mainlayer3 { margin-top:  420px; } #homepage #leftpanel { height: 350px; } }
    @media all and (max-height:  400px) { #mainlayer1, #mainlayer2 { height:  400px; } #mainlayer3 { margin-top:  400px; } #homepage #leftpanel { height: 330px; } }

/*==========================================================*/
/* homepage panel variations
/*==========================================================*/

  #homepage #mainlayer1 { width:100%; }
  
  /* homepage widths based on viewport sizes */
  
  @media all and (min-width: 1475px) {
    #homepage #leftpanel { width:60%; }
    #homepage #rightpanel { width:40%; }
  }
  @media all and (min-width: 1200px) and (max-width: 1474px) {
    #homepage #leftpanel { width:55%; }
    #homepage #rightpanel { width:45%; }
  }
  @media all and (min-width: 1024px) and (max-width: 1199px) {
    #homepage #leftpanel { width:53%; }
    #homepage #rightpanel { width:47%; }
  }
  @media all and (min-width: 580px) and (max-width: 1023px) {
    #homepage #leftpanel { width:40%; }
    #homepage #rightpanel { width:60%; }
  }
  @media all and (max-width: 579px) {
    #homepage #leftpanel  { width:35%; }
    #homepage #rightpanel { width:65%; }
  }
  @media all and (max-width: 499px) {
    #homepage #leftpanel  { display:none }
    #homepage #rightpanel { float:none; width:100%; margin-left:auto; margin-right:auto; padding:0; }
  }
  
  /* leftpanel caption */
  #homepage #leftpanel a em { position:fixed; top:0; padding-top:20px; padding-bottom:20px; }
  @media all and (min-width: 1475px) {
    #homepage #leftpanel a em { width:50%; }
  }
  @media all and (max-width: 1474px) {
    #homepage #leftpanel a em { width:45%; }
  }
  @media all and (max-width: 1023px) {
    #homepage #leftpanel a em { width:35%; }
  }
  @media all and (max-width: 579px) {
    #homepage #leftpanel a em { width:31%; padding-left:26px; }
  }
  
/*==========================================================*/
/* homepage header elements
/*==========================================================*/

  /* homepage headlines in mainlayer1 */
  #homepage #hhead { position:relative; display:block; }
    #homepage #hhead h1 { position:absolute; top:20px; left:26px; font-size:21px; line-height:29.5px; }
    #homepage #hhead h2 { position:fixed; bottom:25px; left:26px; width:60%; font-size:17px; line-height:24.5px; }
  
  /* h2 "abstractions" along nav banner space */
  @media all and (max-width: 579px) {
   #homepage #hhead h2 { bottom:22px; font-size:16px; line-height:22.5px; }
  }
  
  /* down arrow */
  #down-arrow { position:fixed; top:0; width:100%; height:100%; z-index:1007; }
    #down-arrow a { position:relative; display:inline-block; width:100%; height:100%; font-size:2.5em; color:#fff; opacity:.5; }
      #down-arrow a:hover, #down-arrow a:active { opacity:1; }
      #down-arrow a span { position:fixed; display:inline-block; text-align:center; bottom:12px; right:23px; width:35px; height:60px; }
      #down-arrow a span .block { font-size:10px; text-transform:uppercase; }
  @media all and (max-width: 475px) { 
    #down-arrow, #down-arrow a { width:100%; }
    #down-arrow a { font-size:2.2em; }
    #down-arrow a span .block { font-size:8px; }
    #down-arrow a span { bottom:10px }
  }

/*==========================================================*/
/* homepage cubes below the fold
/*==========================================================*/

.cube { position:relative; margin-left:auto; margin-right:auto; text-align:center; width:100%; z-index:2; transition: all 0.5s ease-in-out; }
.cube p { position:relative; width:400px; height:400px; display:inline-block; vertical-align:middle; margin:50px 20px; }
  .cube p a { display:block; }
  .cube p span { display:block; background:#1a1a1a; width:400px; height:400px; }
  .cube p img { box-shadow: 0px 0px 10px rgba(0, 0, 0, .15); width:400px; height:400px; }
  
  /* text-only in a cube */
    @media all and (min-width: 900px) {
    .cube p#linkbox { margin:50px 20px 0 20px; }
    }
    .cube p#linkbox a { width:100px; display:inline; }

@media all and (max-width: 899px) {
  .cube { width:100%; }
  .cube p { width:300px; height:300px; }
    .cube p#linkbox { margin:50px 20px 60px 20px; }
  .cube p span { width:300px; height:300px; }
  .cube p img { width:300px; height:300px; }
}
@media all and (max-width: 649px) {
  .cube p { width:280px; height:280px; }
  .cube p span { width:280px; height:280px; }
  .cube p img { width:280px; height:280px; }
}
@media all and (max-width: 355px) {
  .cube p { width:260px; height:260px; }
  .cube p span { width:260px; height:260px; }
  .cube p img { width:260px; height:260px; }
}

/*==========================================================*/
/* pre-load cube images for smooth pageload
/*==========================================================*/

  #elements img { width:20px; height:20px; }
  
/*==========================================================*/
/* extra font bits
/*==========================================================*/

  .cinzel { font-family:"Cinzel",serif; }
  .cinzel .serif { font-size:0.45em; margin-top:-35px; }
                
/*==========================================================*/
/* hidden header & SEO
/*==========================================================*/

.gallery header, #web header { position:fixed; top:0; left:0; z-index:1003; }
  .gallery header h1, #web header h1 { margin-top:-150px; }

  #w3c a.toggler { position:absolute; color:#000; }

/*==========================================================*/
/* split panel pages
/*==========================================================*/

  /* leftpanel background color */
  .dark #leftpanel { background-color:#090807; }
  
  /* create little social box */
  @media all and (max-width: 899px) {
  #social .blurb p { font-size:18px; line-height:26.5px; }
    #social .blurb .bio p, #social .blurb .list .head, #social .blurb .list p { margin-left:140px; }
    .biopic, .biopic a, .biopic a img { width:120px; height:120px; }
  }
  @media all and (max-width: 579px) {
  #social #social .blurb p { font-size:18px; line-height:26.5px; }
     #social .blurb .bio p, #social .blurb .list .head, #social .blurb .list p { margin-left:140px; }
    .biopic .tmb, .biopic a, .biopic a img { width:120px; height:120px; }
  } 
    
/*==========================================================*/
/* bio blurbs / listing entries / and small font paragraphs
/*==========================================================*/

.tmb { background-color:#1e1b19; }
    .tmb a img { background-color:#1e1b19; }
 
  /* dept blocks on homepage and leftwide pages */
  #homecolumn .tmb { background-color:#1e1b19; }
    
  /* sub links in dept blocks */
  .tinythumb img, .tinythumb .image { background-color: #1e1b19; }

  /* email link in about blurb */
  .connect a { color:#fff; opacity:.7; }
  .connect a:hover, .connect a:active { opacity:1; } 
  
  /* second link in homepage link block */
  .list .mt2 { margin-top:7px }
  
/*==========================================================*/
/* additional breadcrumb elements
/*==========================================================*/

  /* no image thumbnail in breadbrumb */
  #breadcrumb { width:100%; }

/*==========================================================*/
/* photo pages
/*==========================================================*/

/* background color of unloaded images */
.photo p { background-color:#000 }   

/* remove scrollbar on individual image pages */
.juicebox { overflow-y:hidden !important; }

/*==========================================================*/
/* accumulus
/*==========================================================*/

  /* header */
  .swatches { height:40px; }
  .swatches span, .swatches span img { width:40px; margin-left:5px; margin-right:5px; }
  
  /*global */
  #accumulus { border-collapse:separate; border-spacing: 15px 20px; }
    #accumulus caption, #accumulus #tableheader { display:none }
    #accumulus td { vertical-align:middle; position:relative; }
    #accumulus td.year, #accumulus td.month, #accumulus td.music { font-family:"Gogh","noto sans",sans-serif; letter-spacing:0; font-feature-settings:"liga","dlig","calt"; }
      #accumulus td.year { font-size:1.2em; font-weight:750; font-variation-settings:"wght" 750; }
      #accumulus td.month { text-transform: uppercase; font-size:.8em; opacity:.8; }
      #accumulus td.music { text-transform: uppercase; font-size:.8em; border-top:1px solid #4d4d4d; border-bottom:1px solid #4d4d4d; }
      #accumulus td.event .image { margin-top:-5px; background-color: #eeece6; }
      #accumulus td.event .image, #accumulus td.event .image img { position:absolute; display:block; right:0; height:60px; width:60px; border-radius:30px; }
      #accumulus td.pic { padding-right:70px; } 

  /* desktop */  
  @media all and (min-width: 886px) {
  #accumulus { margin-top:60px }
    #accumulus td.event .image, #accumulus td.event .image img {  }
      #accumulus td.event { padding-left:20px; border-left:1px solid #4d4d4d; }  
      } 
      
  /* mobile */
  @media all and (max-width: 885px) {  
  #accumulus { margin-top:0px }
    #accumulus td { display:block; }    
      #accumulus td.blank { display:none; }
      #accumulus td.year { margin-top:34px; margin-bottom:21px; }
      #accumulus td.month { margin-bottom:13px;}
      #accumulus td.music { max-width:160px; margin-bottom:13px; }
      #accumulus td.event { margin-bottom:8px; }
      }
      
/*==========================================================*/
/* interstitials
/*==========================================================*/

  /* rv america */
  #trigger h2 { position:absolute; width:550px; height:240px; left:50%; top:50%; margin:-170px 0 0 -275px; font-size:4em; line-height:200px; text-align:center; }
    @media all and (max-width: 560px)  { #trigger h2 { width:300px; height:202px; margin:-101px 0 0 -150px; } #trigger h2 img { width:300px; height:202px; } }
   
/*==========================================================*/
/* radial vignettes over images
/*==========================================================*/

.dark .radial { background-image: radial-gradient(circle at center, rgba(0,0,0,0) 0%, #000 90%, #000 100%); } /* used on anodyne home page */
.light .radial { background-image: radial-gradient(circle at center, rgba(0,0,0,0) 50%, #eeece6 100%); } /* used on faith home page */
/* lighter radial gradient = radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%) */

.dark .vignette #leftpanel .vegas-overlay, .dark .vignette #mainlayer1 .vegas-overlay { background-image: radial-gradient(circle at center, rgba(0,0,0,0) 0%, #000 90%, #000 100%); } /* used on dark split panel pages */
.light .vignette #leftpanel .vegas-overlay { background-image: radial-gradient(circle at center, rgba(0,0,0,0) 50%, #eeece6 100%); } /* used on light split panel pages */

/*==========================================================*/
/* contact page
/*==========================================================*/

.social span {display:inline-block; padding:20px 10px;}
.social a { font-size:3em; opacity:.5; }
.social a:hover, .social a:active { opacity:1; border:0; }
.contact p { margin-bottom:21px; }
.contact #trigger p { font-size:.7em }

.error { position:relative; z-index:2; background-color:#a50021; border-radius:20px; color:#fff; font-size:15px; padding:10px 16px; opacity:.8; }
#contact_form { display:table; margin:0 auto; width:100%; text-align:left;  }
  #contact_form label { display:block; margin-bottom:5px; font-style:italic; }
  textarea, input { font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","noto sans",sans-serif; }
  textarea { position:relative; z-index:1; color:#000; background-color:#888784; font-size:18px; padding:15px; width:90%; -webkit-appearance: none; 
              margin: 0; border:1px solid #888784; border-radius:10px; opacity:1; transition:all 0.3s ease-in-out; outline:none; }
    textarea:focus, textarea:hover {  -webkit-appearance:none; background-color:#bbbab5; border:1px solid #bbbab5; outline:none; }
  input[type=text] { position:relative; z-index:1; color:#000; background-color:#888784; font-size:18px; padding:15px; width:90%; -webkit-appearance:none;
                      margin:0; border:1px solid #888784; border-radius:10px; opacity:1; transition:all 0.3s ease-in-out; outline:none; }
    input[type=text]:focus, input[type=text]:hover {  -webkit-appearance:none; background-color:#bbbab5; border:1px solid #bbbab5; }
  input[type=email] { position:relative; z-index:1; color:#000; background-color:#888784; font-size:18px; padding:15px; width:90%; -webkit-appearance: none;
                      margin:0; border:1px solid #888784; border-radius:10px; opacity:1; transition:all 0.3s ease-in-out; outline:none; }
    input[type=email]:focus, input[type=email]:hover {  -webkit-appearance:none; background-color:#bbbab5; border:1px solid #bbbab5; } 
  input[type=submit] { position:relative; font-family:"Gogh","noto sans",sans-serif; font-weight:700; z-index:1012; background:#fff; border:0; display:inline-block; border-radius:30px; 
                        padding:18px 16px; text-align:center; transition:opacity 0.2s ease-in-out 0s; text-transform:uppercase; color:#000; margin:10px 0;
                        opacity:0.5; text-decoration:none; cursor:pointer; float:left; width:150px; font-size:.9em; line-height:1.3em; letter-spacing:2px; }
    input[type=submit]:hover { opacity: 1; }
    input:focus { outline:none; -webkit-appearance:none; border:none; }

.email-hide { text-align:right; }
.email-hide a { color:#bbbab5; }
.hideit { display: none; }
.twitter { display:inline-block; width:62px; height:62px; font-size:35px; line-height:1.65em; margin-top:2px; }
  .twitter a { text-align:center; border:2px solid #222; border-radius:50px; opacity:.8 }
 
/* standard confirmation */
p.success { position:relative; padding:24px 0 10px 0; font-size:1.4em; line-height:1.3em; font-weight:600; z-index:2; color:#bbbab5; }

/* confirmation with button */
  .contact a.button { background:#f9852a; border:5px solid orange; border-radius:30px; padding:10px 20px; text-align:center; }
  .contact a.button:hover, .contact a.button:active { background:#fff; border:5px solid #ddd; }

/*==========================================================*/
/* navigation
/*==========================================================*/

/* nav bar */
#nav, #nav-fixed { width:100%; height:60px; bottom:-100px; position:fixed; transition: all 0.6s ease-in-out; z-index:1010; }
  #nav, #nav-fixed, #nav-overlay { background:#090807; }
    #nav { opacity:0; border-top:8px solid #090807; }
      #main #nav-fixed { background:transparent; border-top:0; margin-left:0; }
    #nav-fixed { border-top:8px solid #090807; margin-left:-35px; }
  .hide { height:100px; }

/* nav left */  
#nav-left { position:relative; text-align:left; display:inline-block; height:60px; width:25%; }
  #nav-left p { margin-left:25px; margin-right:80px; }
    #nav-left a { display:inline-block; transition: all 1s ease-in-out; width:70%; height:50px; line-height:50px; cursor:pointer; white-space:nowrap; }
      #nav-left .sans { transition: all 0.8s ease-in-out; }
      #nav-left .part { position:relative; display:inline-block; height:50px; line-height:50px; bottom:8px; left:4px; letter-spacing:2px; transition: all 1s ease-in-out; }
      
/* top menu button */
#menu-top { z-index:1010; position:fixed; background:transparent url("/img/svg/white/menu-icon.svg") no-repeat 0px 0px; background-position:center center; background-size:25px 21px;
            top:0; right:0; margin-right:10px; margin-top:5px; text-align:center; width:60px; height:60px; transition: all 0.3s ease-in-out; }          
  .light #menu-top {  background:transparent url("../img/svg/menu-icon-medium.svg") no-repeat 0px 0px; background-position:center center; }
  .burgerno #menu-top { opacity:0 !important; }

/* bottom menu button */
#nav-button { background:transparent url("/img/svg/white/menu-icon.svg") no-repeat 0px 0px; background-position:center center; background-size:25px 21px;
              right:0; margin-right:15px; min-height:70px; text-align:center; width:50px; transition: all 0.3s ease-in-out; }
  #nav-button { bottom:0; position:absolute; }
  .nav-trigger.open { opacity:0 !important; }
    #menu-top.nav-trigger.open { transform:rotate(180deg); }

/* menu close button */
#menu-close { z-index:1009; position:fixed; top:0; right:0; margin-right:22px; margin-top:18px; min-height:35px; width:35px; height:35px; text-align:center;  transition: all 0.3s ease-in-out;font-size:35px; line-height:35px; font-weight:400; }

/* add cursor to buttons */
#nav-button:hover,  #menu-top:hover { cursor:pointer; }

/* menu */     
.outline { visibility:hidden; opacity:0; position:fixed; background-color:transparent; top:50%; left:50%; transition: all .3s ease-in-out; z-index:-3; }
  .outline.bringforward { z-index:1009; visibility:visible; }
    .abridged { width:280px; height:456px; margin-top:-236px; margin-left:-140px; }
    .outline .mlll { margin-left:80px; }
    .outline .first { margin-top:3px; margin-bottom:8px; }
    .outline .default, .outline .self, .outline .blank, .outline a { height:34px; }
    
  /* outline links */
  .outline a { opacity:0.75; padding-bottom:4px; }
    .outline a:hover, .outline a:active { opacity:1; }
  .icon-up { transition: all 0.3s ease-in-out; }

@media all and (min-width: 800px) {
  #nav-left a:hover { margin-left:-20px; }
    #nav-left a:hover .part { letter-spacing:3px; }
    #nav-left a:hover .sans { color:#090807; transition: all 0.8s ease-in-out; }
    .outline .default, .outline  .self, .outline .blank, .outline a { font-size:1.06em; }
}
@media all and (max-width: 699px) {
  #nav-left { text-align:left; }
    #main #nav-left, #main #nav-left p, #main #nav-left p a { display:block; }
    .outline .default, .outline  .self, .outline .blank, .outline a { font-size:1.06em; }
}
@media all and (max-width: 619px) {
  #nav-left p { margin-left:15px; }
  #nav-left .part { display:none; }
}

/*==========================================================*/
/* go to top arrow
/*==========================================================*/

#up { position:relative; font-size:2em; float:right; bottom:-5px; margin-right:15px; height:70px; text-align:center; width:50px; transition: all 0.3s ease-in-out; cursor:pointer; }
    #up a  { display:block; opacity:.8; }
    #up a:hover, #up a:active  { opacity:1; }
    
/*==========================================================*/
/* navigation on music page
/*==========================================================*/

/* accomodate target _blank on the music page */
  .outline .default, .outline .self { display:block; }
    .audioplayer .outline .self { display:none; }
  .outline .blank { display:none; }
    .audioplayer .outline .blank { display:block; }
    
/* navalert on music page */
  .navalert-on { display:none; }
  .audioplayer .navalert-off { display:none; }  
  .audioplayer .navalert-on { display:block; }

/*==========================================================*/
/* music page / comment modal
/*==========================================================*/

   /* #comment-button */
    .audioplayer #comment-button { position:fixed; display:inline-block; width:48px; height:48px; top:12px; left:18px; text-align:center; font-size:1em; text-shadow: 0px 0px 10px rgb(0, 0, 0); z-index:13; transition: all 0.5s ease-in-out; }
      .audioplayer #comment-button span { font-size:3em; }
        .audioplayer #comment-button span:hover, .audioplayer #comment-button span:active { opacity:1; } 
          .audioplayer #comment-button span i { display:inline-block; }

    @media all and (max-width: 649px) {
      .audioplayer #comment-button { left:11px; }
    } 
    @media all and (max-width: 359px) {
      .audioplayer #comment-button { left:2px; }
    }
      
  /* download modal */
    @media all and (min-width: 450px) { .audioplayer #download { width:330px; margin-left:-210px; } }

  /* contact button on download modal */
  #download .button { background:#fff; opacity:.5; border:0; border-radius:30px; padding:10px 20px; text-align:center; transition: opacity 0.2s ease-in-out 0s; }
    #download .button:hover, #download .button:active { opacity:1 }
        
  /* overlay */
    /* .audioplayer #comment-overlay { background-image: url("/img/background/overlays/06.png"); } */
    
  /* remove browser scrollbar on html tag when #comment is opened */
    .scrollhide { overflow-y:hidden; }
  
  /* set up comment panel transition when #comment is activated */
    .audioplayer .vegas-slide-inner { transition:all 0.03s ease-in-out; }
    .onscreen { left:-200px !important; }
    
  /* hide certain elements when #comment is activated */
    .scrollhide .jp-playlist, .scrollhide #player, .scrollhide #comment-button, .scrollhide #menu-top { opacity:0; }
    .scrollhide #nav-button, .scrollhide #nav { display:none; }

  /* #comment */
    .audioplayer #comment { top:0; margin-top:0; width:952px; margin-left:-476px; padding:0; overflow-y:scroll; overflow-x:hidden; height:100vh; }

  /* #close button */
    .audioplayer p#close { opacity:1; top:0; margin-top:0; margin-left:-477px; padding-top:25px; font-size:40px; width:52px; height:100vh; background-color:#444; background-image: url("/img/background/overlays/08.png"); }
    .audioplayer p#close span { height:40px; width:40px; line-height:40px; margin-left:4px; }

  /* #comment interior */
    .audioplayer #comment figure img { max-width:300px; }
    .specs { padding-left:15px; border-left:10px solid #444; }
    
  /* comment scrollbar */
    .audioplayer #comment { scrollbar-width:auto; scrollbar-color:#555 #000; } /* Firefox */
    .audioplayer #comment::-webkit-scrollbar { width:auto; } /* Chrome, Edge, and Safari */
    .audioplayer #comment::-webkit-scrollbar-track { background-color:#000; } /* Chrome, Edge, and Safari */
    .audioplayer #comment::-webkit-scrollbar-thumb { background-color:#555; border-radius:20px; } /* Chrome, Edge, and Safari */
    
  /* media queries / desktop = min 1024, mobile = max 1024 */ 
  @media all and (min-width: 1024px) {
  /* fix glitch when html scrollbar is removed, there is a shift of content */
    .scrollhide  { right:9px; } /* then, try to make page stay still */  
    .scrollhide .jp-interface, .scrollhide .jp-title, .scrollhide .linkbar p { position:relative; right:7px; } 
  }
  @media all and (max-width: 1023px) {       
   .audioplayer #comment { width:100%; left:0; margin-left:0; }
   .audioplayer #comment h3, .audioplayer #comment h4, .audioplayer #comment p, .audioplayer #comment figure { margin-left:52px; }
    .audioplayer #comment figcaption { padding-left:52px; }
   .audioplayer p#close { left:0; margin-left:0; }
  } 
  @media all and (max-width: 579px) {     
   .everything { padding-top:15px; }
   .audioplayer #comment figure img { max-width:250px; }
  }
  @media all and (max-width: 359px) {     
   .audioplayer #comment figure img { max-width:225px; }
  }
  /* contents within modals */ 
  .mbnll { margin-bottom:-70px; }
  #watermark1 { background-image: url('/img/png/map/topo-dark.png'); background-repeat:no-repeat; background-position: right 40% bottom -70px; background-size:700px; }
  #watermark2 { background-image: url('/img/png/map/topo-090807.50.jpg'); background-repeat:no-repeat; background-position:27% 20%; }
  
  /* background color change */
  .audioplayer .bglight { background-color:#e6e3da; }
  
  /* fixes missing Safari scrollbar on #comment */
  .vegas-slide { overflow-y:scroll; visibility:visible; } 
            
/*==========================================================*/
/* music page / linkbar icons below fixed music player
/*==========================================================*/ 

/* background and container space created at the player level */ 
#player .linkbar { background:#090807; border-top:5px solid #090807; width:100%; height:60px; }

/* icons within linkbar are then coded below nav and positioned on top of it */
#links { position:fixed; display:block; bottom:13px; width:150px; z-index:1011; left:50%; margin-left:-75px; }
  #links .linkbar { width:100%; }
  #links p { transition: all 0.5s ease-in-out; width:100%; }
    #links .linkbar p #download-button, #links .linkbar p a.newtab { line-height:30px; font-size:30px; color:#fff; opacity:.7; }
      #links .linkbar p a { position:relative; }
      #links .linkbar p #download-button { position:relative; left:0; cursor:pointer; border-bottom:0; padding-bottom:0; }
    #links .linkbar p #download-button:hover, #links .linkbar p a.newtab:hover { opacity:1; }

/*==========================================================*/
/* music temporary nav for desktop and mobile - fixes firefox mobile bug
/*==========================================================*/  

   @media all and (min-width: 720px) {
      #jmobile { display:none }
    }
     @media all and (max-width: 819px) {
      #jdesktop { display:none; }
    }

/*==========================================================*/
/* music player container
/*==========================================================*/ 

.audiobox { position:relative; z-index:1006; }
  @media all and (max-width: 579px) { .audiobox { padding-top:34px; } }
  
#player { position:fixed; left:0; bottom:0; width:100%; z-index:1007; border-top:8px solid #090807; padding-top:21px; } 

/*==========================================================*/
/* music jPlayer code edited
/*==========================================================*/  
  
/* container */
.jp-jplayer audio,
.jp-jplayer {
  width:0px;
  height:0px;
  }
  .jp-jplayer { margin-top:13px; }
  .jp-audio, .jp-audio-stream, .jp-video-270p, .jp-video-360p  {
    width:100%;
    }
    .jp-audio *:focus, .jp-audio-stream *:focus, .jp-video *:focus { outline: none; } /* Disable the browser focus highlighting. */
    .jp-audio button::-moz-focus-inner, .jp-audio-stream button::-moz-focus-inner, .jp-video button::-moz-focus-inner  { border: 0; }  /* Disable the browser CSS3 focus highlighting. */

/* song title */
.jp-details {
  text-align: center;
  display:block !important; 
  height: 18px;
  line-height: 18px;
  }
  .jp-details .jp-title .plist-s, .jp-details .jp-title .plist-i { display:none; }
  .jp-details .jp-title .plist-t { display:block; width:200px; margin-left:auto; margin-right:auto; font-size:.85em; text-shadow: 0px 0px 10px rgb(0, 0, 0); }
    
/* controls box */
.jp-interface {
  position:relative;
  width:430px;
  margin-left: auto;
  margin-right: auto;
  }

.jp-interface .jp-controls {
  margin:0;
  padding:0;
  overflow:hidden;
  margin-left: 16px;
  }
  .jp-audio .jp-controls, .jp-video .jp-controls, .jp-audio-stream .jp-controls {
    width:83px;
    }
      .jp-controls button {
        display:block;
        float:left;
        overflow:hidden;
        text-indent:-9999px;
        border:none;
        cursor:pointer;
        background-repeat:no-repeat;
        background-position:center center;
        }

    /* play / stop */
    .jp-play {
      width:40px;
      height:40px;
      background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path style='fill:white;' transform='scale(0.04) translate(0 150)' d='M0 350q0 207 147 354t353 146 354-146 146-354-146-354-354-146-353 146-147 354z m375-250l375 250-375 250 0-500z'/></svg>"); /* fill:%23f9852a; = orange */
      opacity:.75;
      transition: 0.3s ease-in-out;
      }
      .jp-play:hover, .jp-play:active, .jp-play:focus { opacity:1; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path style='fill:white;' transform='scale(0.04) translate(0 150)' d='M0 350q0 207 147 354t353 146 354-146 146-354-146-354-354-146-353 146-147 354z m375-250l375 250-375 250 0-500z'/></svg>"); } /* fill:%23f9852a; = orange */
      .jp-state-playing .jp-play { opacity:1; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path style='fill:%23f9852a;' transform='scale(0.04) translate(0 150)' d='M0 350q0 207 147 354t353 146 354-146 146-354-146-354-354-146-353 146-147 354z m275-260l153 0 0 520-153 0 0-520z m297 0l153 0 0 520-153 0 0-520z'/></svg>"); }  /* activated by js */
      .jp-state-playing .jp-play:focus { opacity:1; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path style='fill:%23f9852a;' transform='scale(0.04) translate(0 150)' d='M0 350q0 207 147 354t353 146 354-146 146-354-146-354-354-146-353 146-147 354z m275-260l153 0 0 520-153 0 0-520z m297 0l153 0 0 520-153 0 0-520z'/></svg>");  }  /* activated by js */

    .jp-stop {
      width:28px;
      height:28px;
      margin-top:6px; 
      background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path style='fill:white;' transform='scale(0.028) translate(0 150)' d='M0 350q0 207 147 354t353 146 354-146 146-354-146-354-354-146-353 146-147 354z m250-250l500 0 0 500-500 0 0-500z'/></svg>");
      margin-left:15px;
      opacity:0.5;
      transition: 0.3s ease-in-out;
      }
      .jp-stop:hover, .jp-stop:active { opacity:1; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path style='fill:white;' transform='scale(0.028) translate(0 150)' d='M0 350q0 207 147 354t353 146 354-146 146-354-146-354-354-146-353 146-147 354z m250-250l500 0 0 500-500 0 0-500z'/></svg>"); }
      .jp-stop:focus { opacity:1; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path style='fill:white;' transform='scale(0.028) translate(0 150)' d='M0 350q0 207 147 354t353 146 354-146 146-354-146-354-354-146-353 146-147 354z m250-250l500 0 0 500-500 0 0-500z'/></svg>"); }

    /* progress bar */
    .jp-progress {
      overflow:hidden;
      }
    
    .jp-audio .jp-progress {
      position:absolute;
      top:12px;
      height:15px;
      }
      .jp-audio .jp-type-single .jp-progress, .jp-audio .jp-type-playlist .jp-progress, .jp-video .jp-progress {
        left: 114px;
        width: 200px;
        }

    .jp-seek-bar {
      width: 0px;
      height: 100%;
      cursor: pointer; 
      }
    
    .jp-play-bar {
      width: 0px;
      height: 100%; }

    .jp-seeking-bg {
      background: url("/img/png/loader/loadinfo.net.player.gif");
      background-position:bottom left;
      } /* activated by js */

    /* volume controls */
    .jp-state-no-volume .jp-volume-controls { display:none; }
    
    .jp-volume-controls {
      position:absolute;
      top:12px;
      left:330px;
      width:104px;
      }
      .jp-volume-controls button {
        display:block;
        position:absolute;
        overflow:hidden;
        text-indent:-9999px;
        border:none;
        cursor:pointer;
        background-repeat:no-repeat;
        background-position:center center;
        }
    
    .jp-mute, .jp-volume-max {
      width:18px;
      height:18px;
      }
      .jp-mute { background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path style='fill:white;opacity:0.5;' transform='scale(0.018) translate(0 150)' d='M429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z'/></svg>"); }
        .jp-mute:focus { background-repeat:no-repeat; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path style='fill:white;opacity:0.7;' transform='scale(0.018) translate(0 150)' d='M429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z'/></svg>"); }
        .jp-state-muted .jp-mute { background-repeat:no-repeat; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path style='fill:white;opacity:1;' transform='scale(0.018) translate(0 150)' d='M429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z'/></svg>"); }  /* activated by js */
        .jp-state-muted .jp-mute:focus { background-repeat:no-repeat; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path style='fill:white;opacity:1;' transform='scale(0.018) translate(0 150)' d='M429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z'/></svg>"); }  /* activated by js */
      .jp-volume-max { left: 80px; }
        .jp-volume-max { background-repeat:no-repeat; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path style='fill:white;opacity:0.5;' transform='scale(0.018) translate(0 150)' d='M429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 21 6 31-6 32-16 20-19 13-17 13-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z m143 0q0-85-48-158t-125-105q-7-3-14-3-15 0-26 11t-10 25q0 22 21 33 32 16 43 25 41 30 64 75t23 97-23 97-64 75q-11 9-43 25-21 11-21 33 0 14 10 25t25 11q8 0 15-3 78-33 125-105t48-158z m143 0q0-128-71-236t-189-158q-7-3-14-3-15 0-25 11t-11 25q0 20 22 33 4 2 12 6t13 6q25 14 46 28 68 51 107 127t38 161-38 161-107 127q-21 15-46 28-4 3-13 6t-12 6q-22 13-22 33 0 15 11 25t25 11q7 0 14-3 118-51 189-158t71-236z'/></svg>"); }
        .jp-volume-max:focus { background-repeat:no-repeat; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path style='fill:white;opacity:0.7;' transform='scale(0.018) translate(0 150)' d='M429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 21 6 31-6 32-16 20-19 13-17 13-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z m143 0q0-85-48-158t-125-105q-7-3-14-3-15 0-26 11t-10 25q0 22 21 33 32 16 43 25 41 30 64 75t23 97-23 97-64 75q-11 9-43 25-21 11-21 33 0 14 10 25t25 11q8 0 15-3 78-33 125-105t48-158z m143 0q0-128-71-236t-189-158q-7-3-14-3-15 0-25 11t-11 25q0 20 22 33 4 2 12 6t13 6q25 14 46 28 68 51 107 127t38 161-38 161-107 127q-21 15-46 28-4 3-13 6t-12 6q-22 13-22 33 0 15 11 25t25 11q7 0 14-3 118-51 189-158t71-236z'/></svg>"); }
      
    .jp-volume-bar {
      position:absolute;
      overflow:hidden;
      top:5px;
      left:22px;
      width:46px;
      height:5px;
      cursor:pointer;
      }
      .jp-volume-bar-value {
        width:0px;
        height:5px;
        }

      /* time and duration */
      .jp-audio .jp-time-holder, .jp-video .jp-time-holder {
        position:absolute;
        top:30px;
        }
        .jp-audio .jp-type-single .jp-time-holder, .jp-audio .jp-type-playlist .jp-time-holder {
          left: 114px;
          width: 200px;
          }
      
      .jp-current-time, .jp-duration {
        line-height:1.6;
        width:40px;
        font-size:.7em;
        text-shadow: 0px 0px 10px rgb(0, 0, 0);
        }
        .jp-current-time {
          float:left;
          display:inline;
          cursor:default;
          }
        .jp-duration {
          float:right;
          display:inline;
          text-align:right;
          cursor:pointer;
          }
          .jp-video .jp-current-time { }
          .jp-video .jp-duration { }

      /* audio toggles nested inside jp-time-holder */
      .jp-toggles {
        padding:0;
        margin:0 auto;
        overflow:hidden;
        }
      
      .jp-audio .jp-type-single .jp-toggles, .jp-audio .jp-type-playlist .jp-toggles, .jp-video .jp-toggles  { width:18px; }
      
      .jp-toggles button {
        display:block;
        float:left;
        width:18px;
        height:18px;
        text-indent:-9999px;
        line-height:100%;
        margin-top:9px;
        /* need this for IE6 */
        border:none;
        cursor:pointer;
        }
        .jp-close { transition: all 0.3s ease-in-out; background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path style='fill:white;opacity:0.5;' transform='scale(0.018) translate(0 150)' d='M0 350q0 207 147 354t353 146 354-146 146-354-146-354-354-146-353 146-147 354z m219-156l125-125 156 156 156-156 125 125-156 156 156 156-125 125-156-156-156 156-125-125 156-156z'/></svg>"); }
        .jp-close:hover, .jp-close:active { background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><path style='fill:white;opacity:0.9;' transform='scale(0.018) translate(0 150)' d='M0 350q0 207 147 354t353 146 354-146 146-354-146-354-354-146-353 146-147 354z m219-156l125-125 156 156 156-156 125 125-156 156 156 156-125 125-156-156-156 156-125-125 156-156z'/></svg>"); }
    
  /* mobile */
  @media all and (max-width: 479px) {
    /* player controls box */
    .jp-interface { width:302px; }
    .jp-interface .jp-controls { margin-left:0; }
    /* player song title */
    .jp-details .jp-title .plist-t { padding-left:94px; }
    /* player progress bar */
    .jp-audio .jp-type-single .jp-progress, .jp-audio .jp-type-playlist .jp-progress, .jp-video .jp-progress { left:98px; }
     /* player volume controls */
    .jp-volume-controls, .jp-playlist-item .abridge { display:none }
    /* player time and duration */
    .jp-audio .jp-type-single .jp-time-holder, .jp-audio .jp-type-playlist .jp-time-holder { left:98px; }
  }
  @media all and (max-width: 349px) {
    /* player controls box */
    .jp-interface { width:292px; }
    .jp-stop { margin-left:10px; }
    /* player song title */
    .jp-details .jp-title .plist-t { padding-left:87px; }
    /* player progress bar */
    .jp-audio .jp-type-single .jp-progress, .jp-audio .jp-type-playlist .jp-progress, .jp-video .jp-progress { left:91px; }
    /* player time and duration */
    .jp-audio .jp-type-single .jp-time-holder, .jp-audio .jp-type-playlist .jp-time-holder { left:91px; }
  }
  /* flatten the player a bit for phone heights */
  @media all and (max-height: 659px) {
    #enter { bottom:167px; }
    #player { padding-top:13px; } 
    .jp-interface { margin-top:-3px; margin-bottom:-13px; } 
  }
    
/*==========================================================*/
/* music jPlayer playlist
/*==========================================================*/ 

/* accessibility headline */
.audioplayer #paneltext { visibility:hidden; height:1px; line-height:1px; }

  /* playlist */
.jp-playlist { text-align:center; max-width:1500px; min-height:1000px; }

 .jp-playlist li {
    position:relative;
    display:inline-block;
    margin:20px 20px;
    border-bottom:5px solid #000;
    transition: all 0.3s ease-in-out;
    list-style-type: none;
    background-color:#121212;
    background-repeat:no-repeat; 
    background-position: center top; 
    background-size:330px;
    height:220px; 
    width:330px;
    }
    /* hide first <li> that contains a blank file: a blank file prevents heavy initial loadtime on safari, which downloads entire file before play button is pushed */
    .jp-playlist li:first-child { display:none }
    .jp-playlist li a {
      display:block;
      height:220px;
      width:100%;
      color:#eeece6;
      font-size:18px;
      transition: all 0.3s ease-in-out;
      }
      .jp-playlist .plist-ts { position:absolute; left:0; width:100%; height:76px; bottom:0; background-color:#121212; }
      .jp-playlist .plist-i  { position:absolute; left:15px; top:15px; font-size:40px; height:40px; opacity:1; color:#fff; transition: all 0.4s ease-in-out; background:#888784; border-radius:20px; }
      .jp-playlist .plist-t  { position:relative; display:block; margin:12px 0px 0 15px; text-align:left; white-space:nowrap; font-size:.85em }
      .jp-playlist .plist-s  { position:relative; display:block; margin:0 15px; text-align:left; white-space:nowrap; font-size:0.7em; line-height:1.8em; letter-spacing:.4px; color:#999; }
       
      a.jp-playlist-item-free { display:inline; }

      .jp-playlist li:hover, .jp-playlist li:active { border-bottom:5px solid #f9852a; }
      .jp-playlist li:hover .plist-i, .jp-playlist li:active .plist-i {  background:#f9852a; }
      .jp-playlist li.jp-playlist-current:hover .plist-i, .jp-playlist li.jp-playlist-current:active .plist-i { opacity:1;  }
  
  /* current selection */
  li.jp-playlist-current { border-bottom:5px solid #f9852a;  }
  li.jp-playlist-current .plist-i { color:#f9852a; opacity:1; background:#f9852a; }

  /* supplemental paragraphs */
  #homecolumn p { text-shadow: 0px 0px 10px rgb(0, 0, 0); }
  
/*  video full screen */
.jp-video-full {
  /* Rules for IE6 (full-screen) */
  width:480px;
  height:270px;
  /* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
  position:static !important;
  position:relative; 
  }
  .jp-video-full div div {
    z-index:1000; /* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */
  }
  .jp-video-full .jp-jplayer {
    top:0;
    left:0;
    position:fixed !important;
    position:relative;
    /* Rules for IE6 (full-screen) */
    overflow:hidden; 
  }
  .jp-video-full .jp-gui {
    position:fixed !important;
    position:static;
    /* Rules for IE6 (full-screen) */
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1001;
    /* 1 layer above the others. */ 
  }
  .jp-video-full .jp-interface {
    position:absolute !important;
    position:relative;
    /* Rules for IE6 (full-screen) */
    bottom:0;
    left:0; 
  }

  /* mobile */
  @media all and (max-width: 1589px) {
   .jp-playlist { max-width:1200px; }
   .jp-playlist li { height:200px; width:300px; background-size:300px; }
   .jp-playlist li a { height:200px; }
  }
  @media all and (max-width: 1299px) {
  .jp-playlist li { height:160px; width:220px; margin:10px 15px; background-size:220px; }
    .jp-playlist li a { height:160px; }
      .jp-playlist .plist-ts { height:64px; }
      .jp-playlist .plist-i  { left:12px; top:12px; font-size:32px; height:32px; }
      .jp-playlist .plist-t  { margin:8px 0px 0 12px; font-size:.75em }
      .jp-playlist .plist-s  { margin-left:12px; font-size:0.6em; line-height:1.3em; }
  } 
  @media all and (max-width: 1139px) {
    .jp-playlist { max-width:800px; }
  }
  @media all and (max-width: 889px) {
    .jp-playlist { max-width:600px; }
  } 
  @media all and (max-width: 649px) {
    .jp-playlist { max-width:400px; }
  } 
  
/*==========================================================*/
/* music download access page overrides
/*==========================================================*/ 

.access #breadcrumb { height:35px; }
.access .audiobox { margin-bottom:42px; }
.access .jp-playlist ul { display:block } 
.access .jp-playlist .plist-i { left:30px; top:15px; font-size:2em; opacity:.8; }
.access  li.audiolist a:hover .plist-i, .access  li.audiolist a:active .plist-i { opacity:1; }

/*==========================================================*/
/* tooltip
/*==========================================================*/

#tooltip { position:absolute; z-index:3; text-align:left; background:#f6f5f2; padding:21px; color:#000; box-shadow: 0px 0px 30px rgba(0, 0, 0, .15); border-radius:5px; border-bottom:3px #555453 solid;  }
#tooltip p { font-size:19px; line-height:28.5px; }
  #tooltip:after /* triangle decoration */ { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #555453; content: ''; position:absolute; left:50%; bottom:-20px; margin-left:-10px; }
  #tooltip.top:after { border-top-color: transparent; border-bottom: 20px solid #555453; top: -40px; bottom: auto; }
  #tooltip.left:after { left: 10px; margin: 0; }
  #tooltip.right:after { right: 10px; left: auto; margin: 0; }

  @media all and (max-width: 1199px) {
    #tooltip p { font-size:18px; line-height:26.5px; }
  }
  @media all and (max-width: 899px) {
    #tooltip p { font-size:17px; line-height:25px; }
  }
  @media all and (max-width: 579px) {
    #tooltip p { font-size:16px; line-height:21.5px; }
  }