@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
/*==========================================================*/

#t-interstitial body { height:100vh; }

#trigger { position:fixed; top:0; left:0; right:0; bottom:0; text-align:center; display:block; margin-left:10%; margin-right:10%; }
  #trigger p, #trigger h1 { position:absolute; width:100%; top:50%; display:block; }
    #trigger p a  { display:block; }
        
    @media all and (min-width: 1021px) {
      #trigger p.singleline, #trigger p.doubleline, #trigger p.multiline  { height:120px; margin:-60px auto 0 auto; }
      #trigger h1.singleline, #trigger h1.doubleline, #trigger h1.multiline  { height:80px; margin:-40px auto 0 auto; }
        #trigger p a  { font-size:36px; line-height:43px; }
    }
    @media all and (max-width: 1020px) {
      #trigger p.multiline { height:160px; margin:-80px auto 0 auto; }
      #trigger p.doubleline { height:120px; margin:-60px auto 0 auto; }
      #trigger p.singleline { height:120px; margin:-60px auto 0 auto; }
      #trigger h1.singleline { height:80px; margin:-40px auto 0 auto; }
        #trigger p a { font-size:34px; line-height:41px; }
      }
    @media all and (max-width: 580px) {
      #trigger p.multiline { height:220px; margin:-110px auto 0 auto;  }
      #trigger p.doubleline { height:160px; margin:-80px auto 0 auto; }
        #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 !important; }
.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; }