@charset "utf-8";

/*==========================================================*/
/* 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; }
figure { position:relative; display:inline-block; }
h1, h2, h3, h4, h5, h6 { font-weight:400; }
b, strong, .bold { font-weight:900; }
del { text-decoration:line-through; }
small { font-size:86%; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; 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; }
canvas { width: 100%; }
  
/*==========================================================*/
/* Global
/*==========================================================*/

html { position:relative; }
body { position:relative; font-family:"lato",sans-serif; } 
h1, h2, h3, h4, h5, p, ul, ol, dt, dd, figure, .toggle, label, input[type=submit] { letter-spacing:1px; line-height:21px; }
h1, h2, h3, #quick-nav li, .nav ul li, footer li { font-size:29px; font-weight:900; }
h2 { line-height:32px; }
h4, label { font-size:19px; line-height:25px; font-weight:900; }
h5 { font-weight:900; }
p, ul, ol, dt, dd, figure, .toggle, input[type=submit], table { font-size:13px; font-weight:400; }
small { font-weight:300; }
.mystery { font-family:"Mystery Quest",cursive; }
.genuine { font-family:'Genuine_Sweet',cursive; }
.sans { font-family:"lato",sans-serif; }
.serif { font-family:georgia,"noto serif",serif; }
.fontbigger { font-size: 1.2em; }
.normal {font-weight:normal}
.block {display:block}
.lsz, .lsz p { letter-spacing:0; }
.lhh { display:block; line-height:1.3em; }
a, a:visited, a:link, a:hover, a:active { text-decoration:none; }
  a.underline, a.underline:visited { border-bottom:1px solid #fff; padding-bottom:2px; transition:all 0.2s ease-in-out; }
  a.underline:hover { padding-bottom:4px; }
  #outline p sup a, .info sup a, .text sup a { padding-bottom:0; border-bottom:0; }

.left { float:left; left:0; }
.right { float:right; right:0; }
.middle { position:relative; margin:0 auto;  }
.nohzsr { overflow-x:hidden; }
.wsnw { white-space: nowrap; }
.mobileonly { display:none !important; }
 @media all and (max-width: 540px) { .mobileoff { display:none !important; } .mobileonly { display:block !important; } }
.light { background-color:#eee; }
.lightblue { background-color:#859db5; }
.lightbeige { background-color:#d5d0b6; }
.beige { background-color:#88846A; }
.medium { background-color:#f5f5f5; }
.mediumblue { background-color:#758fa8; }
.mediumdarkblue { background-color:#64819d; }
.dark { background-color:#03091A; }
.darkblue { background-color:#070838; }
.shadow { box-shadow: 0px 0px 15px rgba(0, 0, 0, .2); }
.seventy { opacity:.7; }
.fifty { opacity:.5; }
.white, a.white:visited, a.white:active, a.white:link { color:#fff; }
.grey { color:#dae1e9; }
.black, a.black:visited, a.black:active, a.black:link { color:#000; }
  a.black { border-bottom:1px solid #000; }
.tal { text-align:left !important; }
.tac { text-align:center !important; }
.tar { text-align:right !important; }
.bpc {background-position:center center; }
.bpl {background-position:left center; }
.bpr {background-position:right center; }
.mtns { margin-top:-17px; } .mtnm { margin-top:-21px; } .mtnl { margin-top:-42px; } .mtnll { margin-top:-63px; } .mts { margin-top:17px; } .mtm { margin-top:21px; } .mtl { margin-top:42px; } .mtll { margin-top:63px; } .mtlll { margin-top:84px; } .mtxl { margin-top: 126px; }
.mbs { margin-bottom:17px; } .mbm { margin-bottom:21px; } .mbl { margin-bottom:42px; } .mbll { margin-bottom:63px; } .mblll { margin-bottom:84px; } .mbxl { margin-bottom: 126px; } 
.mrs { margin-right:15px; } .mrm { margin-right:30px; } .mrl { margin-right:60px; } .mrll { margin-right:90px; }
.mlns { margin-left:-15px; } .mls { margin-left:15px; } .mlm { margin-left:30px; } .mll { margin-left:60px; } .mlll { margin-left:90px; }
.pts { padding-top:17px; } .ptm { padding-top:21px; } .ptl { padding-top:42px; } .ptll { padding-top:63px; } .ptxl { padding-top:84px; }
.pbs { padding-bottom:17px; } .pbm { padding-bottom:21px; } .pbl { padding-bottom:42px; } .pbll { padding-bottom:63px; }
.prs { padding-right:15px; } .prm { padding-right:30px; } .prl { padding-right:60px; } .prll { padding-right:90px; }
.pls { padding-left:15px; } .plm { padding-left:30px; } .pll { padding-left:60px; } .plll { padding-left:90px; }
.stitch { border-top: 1px dashed #dae1e9; }

/*==========================================================*/
/* Preloader
/*==========================================================*/

  #preloader { position:fixed; top:0; left:0; right:0; bottom:0; z-index:1013; }
    #spinner { position:absolute; width:310px; height:310px; left:50%; top:50%; background-image: url('/me/archive/img/png/spinner.gif'); background-repeat:no-repeat; background-position:center center; margin:-155px 0 0 -155px; }

/*==========================================================*/
/* Homepage
/*==========================================================*/

  .aah { width:100%; position:fixed; z-index:0; background-repeat:no-repeat; background-position:center;-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; top:0; transition: all 0.4s ease-in-out; }
    .main { position:absolute; width:100%; display:block; z-index:10; }
    .main a { position:relative; height:100%; display:block; }
  
  /* Responsive calls for serving appropriately sized images */
  
    @media all and (min-width: 990px)                         { #home .aah { background-image: url('/me/archive/img/homepage/faith.desktop.jpg'); } }
    @media all and (min-width: 476px) and (max-width: 989px)  { #home .aah { background-image: url('/me/archive/img/homepage/faith.tablet.jpg'); } }
    @media all and (max-width: 475px)                         { #home .aah { background-image: url('/me/archive/img/homepage/faith.phone.jpg'); } }

  /* Responsive calls for setting .aah height - addresses iOS bug for height:100% */
  
    @media all and (min-height: 2001px) { .aah { height: 2001px; } #homepage { margin-top: 2001px; } .main { height:2001px; top:-2001px; } }
    @media all and (max-height: 2050px) { .aah { height: 2050px; } #homepage { margin-top: 2050px; } .main { height:2050px; top:-2050px; } }
    @media all and (max-height: 2000px) { .aah { height: 2000px; } #homepage { margin-top: 2000px; } .main { height:2000px; top:-2000px; } }
    @media all and (max-height: 1950px) { .aah { height: 1950px; } #homepage { margin-top: 1950px; } .main { height:1950px; top:-1950px; } }
    @media all and (max-height: 1900px) { .aah { height: 1900px; } #homepage { margin-top: 1900px; } .main { height:1900px; top:-1900px; } }
    @media all and (max-height: 1850px) { .aah { height: 1850px; } #homepage { margin-top: 1850px; } .main { height:1850px; top:-1850px; } }
    @media all and (max-height: 1800px) { .aah { height: 1800px; } #homepage { margin-top: 1800px; } .main { height:1800px; top:-1800px; } }
    @media all and (max-height: 1750px) { .aah { height: 1750px; } #homepage { margin-top: 1750px; } .main { height:1750px; top:-1750px; } }
    @media all and (max-height: 1700px) { .aah { height: 1700px; } #homepage { margin-top: 1700px; } .main { height:1700px; top:-1700px; } }
    @media all and (max-height: 1650px) { .aah { height: 1650px; } #homepage { margin-top: 1650px; } .main { height:1650px; top:-1650px; } }
    @media all and (max-height: 1600px) { .aah { height: 1600px; } #homepage { margin-top: 1600px; } .main { height:1600px; top:-1600px; } }
    @media all and (max-height: 1550px) { .aah { height: 1550px; } #homepage { margin-top: 1550px; } .main { height:1550px; top:-1550px; } }
    @media all and (max-height: 1500px) { .aah { height: 1500px; } #homepage { margin-top: 1500px; } .main { height:1500px; top:-1500px; } }
    @media all and (max-height: 1450px) { .aah { height: 1450px; } #homepage { margin-top: 1450px; } .main { height:1450px; top:-1450px; } }
    @media all and (max-height: 1400px) { .aah { height: 1400px; } #homepage { margin-top: 1400px; } .main { height:1400px; top:-1400px; } }
    @media all and (max-height: 1350px) { .aah { height: 1350px; } #homepage { margin-top: 1350px; } .main { height:1350px; top:-1350px; } }
    @media all and (max-height: 1300px) { .aah { height: 1300px; } #homepage { margin-top: 1300px; } .main { height:1300px; top:-1300px; } }
    @media all and (max-height: 1280px) { .aah { height: 1280px; } #homepage { margin-top: 1280px; } .main { height:1280px; top:-1280px; } }
    @media all and (max-height: 1260px) { .aah { height: 1260px; } #homepage { margin-top: 1260px; } .main { height:1240px; top:-1260px; } }
    @media all and (max-height: 1240px) { .aah { height: 1240px; } #homepage { margin-top: 1240px; } .main { height:1240px; top:-1240px; } }
    @media all and (max-height: 1220px) { .aah { height: 1220px; } #homepage { margin-top: 1220px; } .main { height:1220px; top:-1220px; } }
    @media all and (max-height: 1200px) { .aah { height: 1200px; } #homepage { margin-top: 1200px; } .main { height:1200px; top:-1200px; } }
    @media all and (max-height: 1180px) { .aah { height: 1180px; } #homepage { margin-top: 1180px; } .main { height:1180px; top:-1180px; } }
    @media all and (max-height: 1160px) { .aah { height: 1160px; } #homepage { margin-top: 1160px; } .main { height:1160px; top:-1160px; } }
    @media all and (max-height: 1140px) { .aah { height: 1140px; } #homepage { margin-top: 1140px; } .main { height:1140px; top:-1140px; } }
    @media all and (max-height: 1120px) { .aah { height: 1120px; } #homepage { margin-top: 1120px; } .main { height:1120px; top:-1120px; } }
    @media all and (max-height: 1100px) { .aah { height: 1100px; } #homepage { margin-top: 1100px; } .main { height:1100px; top:-1100px; } }
    @media all and (max-height: 1080px) { .aah { height: 1080px; } #homepage { margin-top: 1080px; } .main { height:1080px; top:-1080px; } }
    @media all and (max-height: 1060px) { .aah { height: 1060px; } #homepage { margin-top: 1060px; } .main { height:1060px; top:-1060px; } }
    @media all and (max-height: 1040px) { .aah { height: 1040px; } #homepage { margin-top: 1040px; } .main { height:1040px; top:-1040px; } }
    @media all and (max-height: 1020px) { .aah { height: 1020px; } #homepage { margin-top: 1020px; } .main { height:1020px; top:-1020px; } }
    @media all and (max-height: 1000px) { .aah { height: 1000px; } #homepage { margin-top: 1000px; } .main { height:1000px; top:-1000px; } }
    @media all and (max-height:  980px) { .aah { height:  980px; } #homepage { margin-top:  980px; } .main { height: 980px; top: -980px; } }
    @media all and (max-height:  960px) { .aah { height:  960px; } #homepage { margin-top:  960px; } .main { height: 960px; top: -960px; } }
    @media all and (max-height:  940px) { .aah { height:  940px; } #homepage { margin-top:  940px; } .main { height: 940px; top: -940px; } }
    @media all and (max-height:  920px) { .aah { height:  920px; } #homepage { margin-top:  920px; } .main { height: 920px; top: -920px; } }
    @media all and (max-height:  900px) { .aah { height:  900px; } #homepage { margin-top:  900px; } .main { height: 900px; top: -900px; } }
    @media all and (max-height:  860px) { .aah { height:  860px; } #homepage { margin-top:  860px; } .main { height: 800px; top: -860px; } }
    @media all and (max-height:  840px) { .aah { height:  840px; } #homepage { margin-top:  840px; } .main { height: 800px; top: -840px; } }
    @media all and (max-height:  800px) { .aah { height:  800px; } #homepage { margin-top:  800px; } .main { height: 800px; top: -800px; } }
    @media all and (max-height:  780px) { .aah { height:  780px; } #homepage { margin-top:  780px; } .main { height: 780px; top: -780px; } }
    @media all and (max-height:  760px) { .aah { height:  760px; } #homepage { margin-top:  760px; } .main { height: 760px; top: -760px; } }
    @media all and (max-height:  740px) { .aah { height:  740px; } #homepage { margin-top:  740px; } .main { height: 740px; top: -740px; } }
    @media all and (max-height:  720px) { .aah { height:  720px; } #homepage { margin-top:  720px; } .main { height: 720px; top: -720px; } }
    @media all and (max-height:  700px) { .aah { height:  700px; } #homepage { margin-top:  700px; } .main { height: 700px; top: -700px; } }
    @media all and (max-height:  680px) { .aah { height:  680px; } #homepage { margin-top:  680px; } .main { height: 680px; top: -680px; } }
    @media all and (max-height:  660px) { .aah { height:  660px; } #homepage { margin-top:  660px; } .main { height: 660px; top: -660px; } }
    @media all and (max-height:  640px) { .aah { height:  640px; } #homepage { margin-top:  640px; } .main { height: 640px; top: -640px; } }
    @media all and (max-height:  620px) { .aah { height:  620px; } #homepage { margin-top:  620px; } .main { height: 620px; top: -620px; } }
    @media all and (max-height:  600px) { .aah { height:  600px; } #homepage { margin-top:  600px; } .main { height: 600px; top: -600px; } }
    @media all and (max-height:  580px) { .aah { height:  580px; } #homepage { margin-top:  580px; } .main { height: 580px; top: -580px; } }
    @media all and (max-height:  560px) { .aah { height:  560px; } #homepage { margin-top:  560px; } .main { height: 560px; top: -560px; } }
    @media all and (max-height:  540px) { .aah { height:  540px; } #homepage { margin-top:  540px; } .main { height: 540px; top: -540px; } }
    @media all and (max-height:  520px) { .aah { height:  520px; } #homepage { margin-top:  520px; } .main { height: 500px; top: -520px; } }
    @media all and (max-height:  500px) { .aah { height:  500px; } #homepage { margin-top:  500px; } .main { height: 500px; top: -500px; } }
    @media all and (max-height:  480px) { .aah { height:  480px; } #homepage { margin-top:  480px; } .main { height: 400px; top: -480px; } }
    @media all and (max-height:  460px) { .aah { height:  460px; } #homepage { margin-top:  460px; } .main { height: 400px; top: -460px; } }
    @media all and (max-height:  440px) { .aah { height:  440px; } #homepage { margin-top:  440px; } .main { height: 440px; top: -440px; } }
    @media all and (max-height:  420px) { .aah { height:  420px; } #homepage { margin-top:  420px; } .main { height: 420px; top: -420px; } }
    @media all and (max-height:  400px) { .aah { height:  400px; } #homepage { margin-top:  400px; } .main { height: 400px; top: -400px; } }            

  #home header { position:fixed; left:5%; text-align:left; top:8%; width:90%; z-index:1009; }
    #home header h1 { font-size:102px; font-weight:500; letter-spacing:-3px; line-height:1em; margin:0; padding:0 0 10px; }
    #home header .enter { margin-top:120px; text-transform:uppercase; padding:10px; border:1px solid #eee; max-width:100px; z-index:100; letter-spacing:3px; border-radius:3px; }
    
    @media all and (max-width: 770px) {
      #home header { top:10%; }
      #home header h1 { font-size:65px; }
      #home header .enter { margin-top:60px; }
    }
    @media all and (max-width: 568px) {
      #home header { width: 80%; top: 15%; }
      #home header h1 { font-size:50px; padding-bottom: 10px; }
      #home header .enter { margin-top:10px; }
    }
  
  #slideshow {display:block; width:100% !important; position:relative; opacity:.7; }
    #slideshow .slide {display:block; width:100% !important; position:relative;  }
    #slideshow .slide h4 { font-size:33px; font-weight:400; }
  
    @media all and (max-width: 770px) {
      #slideshow .slide h4 { font-size:28px; }
    }
    @media all and (max-width: 640px) {
      #slideshow {display:none;}
    }
  
  .seo { position:absolute; top:-5000px; }

/*==========================================================*/
/* Overlay
/*==========================================================*/

  #overlay { opacity:0; transition: all 0.5s ease-in-out; position:fixed; margin-top:0px; top:0; left:0; right:0; bottom:0; /* background-image: url('/me/archive/img/png/alpha/blue70.png'); */ z-index:1; }

/*==========================================================*/
/* Homepage Below the Hero
/*==========================================================*/

  #homepage { transition: all 0.5s ease-in-out; padding:50px 0 130px 0; }
  #_ { max-width: 1500px; }

/*==========================================================*/
/* Navigation
/*==========================================================*/

  #nav { width:100%; height:50px; opacity:0; bottom:-1px; position:fixed; z-index:1010; transition: all 0.3s ease-in-out; }
    #nav.hide { height:100px; }
  
  #nav-left { position:relative; text-align:center; display:inline-block; height:50px; width:40%; float:left; }
    #nav-left p { margin-top:-20px; transition:all 0.3s ease-in-out; width:410px; }
    #nav.hide #nav-left p { margin-top:25px;  }
    #nav-left a { display:inline-block; padding:14px 0 0 0; font-weight:400; height:50px; cursor:pointer; font-size:5em; color:#fff; letter-spacing:0; transition:all 0.2s ease-in-out; }
      #book #nav-left a { text-shadow: 0px 0px 10px rgba(0, 0, 0, .3); }
      #nav-left a span { display:block; }   
    #nav-left a:hover, #nav-left a:active, #nav-left a:visited { font-size:5.05em; text-shadow: 0px 0px 10px rgba(0, 0, 0, .3);  }
  
  #nav-right { position:relative; text-align:right; display:inline-block; height:50px; width:60%; float:right; }
    #nav-right ul { position:relative; right:60px; }
    #nav-right li { display:inline-block;  margin:0; height:50px; }
    #nav-right li a { display:block; font-size:0.9em; padding:14px 25px 0 25px; height:100%; font-weight:400; height:32px; text-align:center; letter-spacing:3px; }
      #nav-right li a span { padding-bottom:3px; color:#eee; transition: all 0.3s ease-in-out; }
      #nav-right li a:hover span, #nav-right li a:active span { transition: all 0.8s ease-in-out; border-bottom:1px solid #859db5; color:#fff; }
  
  #nav-button { background:transparent url("/me/archive/img/svg/white/menu-icon.svg") no-repeat 0px 0px; background-position:center center; background-size:24px 17px;
    right:0; min-height:50px; position:absolute; text-align:center; top:0; width:50px; z-index:1011; transition: all 0.3s ease-in-out; }
    #nav-button:hover { cursor:pointer; }
  
  #outline { height:500px; padding-top:115px; text-align:center; }
    #outline ol, #outline p { max-width:80%; margin:0 auto; white-space:nowrap; }
      #outline ol li { font-size:1em; line-height:3em; text-transform:uppercase; }
      #outline ul li { font-size:0.8em; line-height:2.2em; opacity:.7; text-transform:none; }
      #outline ul li.rights { margin-top:10px; }
  
    #outline a, #outline a:link { display:block; color:#fff; padding:3px; border:0; font-weight:900; border-radius:3px; }
      #outline a:hover, #outline a:active { background-color:#859db5; transition:all 0.3s ease-in-out; }
      .beige #outline a:hover, .beige #outline a:active { background-color:#9F9B81; }
  
  @media all and (max-width: 990px) {
    #nav-right li.secondary { display:none; }
  }
  @media all and (max-width: 750px) {
    #nav-right { display:none; }
        #nav-right li { opacity:0; }
  }
  @media all and (max-width: 580px) {
    #nav-left { width:100%; }
      #nav-left p { width:310px; }
      #nav-left a { font-size:3.5em; }
        #nav-left a:hover, #nav-left a:active, #nav-left a:visited { font-size:3.6em;   }
  }
  @media all and (max-width: 350px) {
    #nav-left p { margin-left:-15px; }
  }

/*==========================================================*/
/* Photo Album - Vertical and Horizontal Scroll
/*==========================================================*/

  /* Global container for both vertical and horizontal */
  
  .album { background-color:#d5d0b6; background-image:url('/me/archive/img/png/album.jpg'); background-position:right top;}
  .photo p { position:relative; padding:0; }
    p.arrow { background:transparent; font-size:4em; color:#070838; opacity:.5; margin-left:42px; }
    p.arrow span { position:relative; font-size:.2em; opacity:.7; font-weight:400; font-style:italic; display:block; margin:0 0 -10px -10px; }
  .photo img { box-shadow: 0px 0px 10px rgba(0, 0, 0, .1); }

  /* Corner decorations and caption */
  
  .corners img { position:absolute; height:40px !important; width:40px !important; box-shadow:none !important; }
  .corners img:nth-of-type(1) { top:-5px; left:-5px; }
  .corners img:nth-of-type(2) { top:-5px; right:-5px; }
  .corners img:nth-of-type(3) { bottom:-5px; left:-5px; }
  .corners img:nth-of-type(4) { bottom:-5px; right:-5px; }
  .caption { display:block; width:100%; position:absolute; text-align:center; opacity:.5; bottom:-25px; }
  
  .more { display:block; z-index:4; position:absolute; top:0; opacity:0; transition:all 0.3s ease-in-out; font-style:italic; white-space:normal; text-align:center; }
    .horz .more { line-height:.5em; }
    .squr .more { line-height:.7em; }
    .more:hover, .more:active, .more:focus { opacity:.95; }
    
  .bubble { display:table-cell; z-index:5; background:#f5f5f5; vertical-align:middle; border-radius:100px; transition:all 0.3s ease-in-out; }
    .bubble a { display:block; margin-top:10px; border-bottom:0; font-size:1.3em; }
    
    .pntdwn:before { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none;
     -moz-border-top-colors:none; border-color:transparent #f5f5f5; border-image:none; border-style:solid; border-width:0 30px 40px 0; content:"";
     display:block; position:absolute; width:0; }
    
    .pntlft:before { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none;
    -moz-border-top-colors:none; border-color:transparent #f5f5f5; border-image:none; border-style:solid; border-width:15px 0 15px 50px; content:"";
    display:block; position:absolute; width:0; }

  /* Horizontal scroll happens when viewport larger than 800px wide */
  
  @media all and (min-width: 801px) {
    #gallery body { overflow-x:auto; overflow-y:hidden; height:100vh; }
    .photo { position:absolute; width:auto; white-space:nowrap; top:50vh; margin-top:-305px; }
      .photo p { display:inline-block; vertical-align:middle; }
    .horz, .vert, .squr { margin:0 60px; }
  }
  
  /* Bio Paragraph */
  .bio { text-align:center; font-size:1.5em; line-height:1.4em; font-style:italic; opacity:.7; white-space:normal; }
  .blurb { display:block; margin-top:7%; }
  
  /* Vertical scroll happens when viewport smaller than 800px wide */
  
  @media all and (max-width: 800px) {
    .photo { position:relative; width:100%; padding-bottom:80px; }
      .photo p { display:block; text-align:center; margin-left:auto; margin-right:auto; }
        p.arrow { display:none; }
    .horz, .vert, .squr { margin:60px 0; }
    .blurb { padding-top:7%; margin-top:0; }
  }
  @media all and (max-width: 500px) {
    .horz .more { line-height:.7em; }
    .squr .more { line-height:.9em; }
    .corners img { position:absolute; height:25px !important; width:25px !important; }
  }
  
  /* 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 (first line below) =  72.361% of actual image size, or conversely 138.196% uprezzed */
  
  @media all and (min-width:  651px)  {                                 .horz, .horz .more, .horz img { width:610px; height:377px; } .vert, .vert .more, .vert img { width:377px; height:610px; } .squr, .squr .more, .squr img { width:480px; height:480px; } .bubble { width:190px; height:160px; } .pntdwn:before { left:100px;}  .pntlft:before { top:67px; left:185px;} .horz .pntdwn:before { bottom:180px;} .squr .pntdwn:before { bottom:285px;} }
  @media all and (max-width:  650px)  { .photo { margin-top:0; }        .horz, .horz .more, .horz img { width:521px; height:322px; } .vert, .vert .more, .vert img { width:322px; height:521px; } .squr, .squr .more, .squr img { width:410px; height:410px; } .bubble { width:170px; height:140px; } .pntdwn:before { left: 80px;}  .pntlft:before { top:57px; left:165px;} .horz .pntdwn:before { bottom:150px;} .squr .pntdwn:before { bottom:235px;} }
  @media all and (max-height: 650px)  { .photo { margin-top:-265px; }   .horz, .horz .more, .horz img { width:521px; height:322px; } .vert, .vert .more, .vert img { width:322px; height:521px; } .squr, .squr .more, .squr img { width:410px; height:410px; } .bubble { width:170px; height:140px; } .pntdwn:before { left: 80px;}  .pntlft:before { top:57px; left:165px;} .horz .pntdwn:before { bottom:150px;} .squr .pntdwn:before { bottom:235px;} }  
  @media all and (max-width:  550px)  { .photo { margin-top:0; }        .horz, .horz .more, .horz img { width:445px; height:275px; } .vert, .vert .more, .vert img { width:275px; height:445px; } .squr, .squr .more, .squr img { width:350px; height:350px; } .bubble { width:155px; height:125px; } .pntdwn:before { left: 70px;}  .pntlft:before { top:50px; left:145px;} .horz .pntdwn:before { bottom:125px;} .squr .pntdwn:before { bottom:195px;} }
  @media all and (max-height: 550px)  { .photo { margin-top:-230px; }   .horz, .horz .more, .horz img { width:445px; height:275px; } .vert, .vert .more, .vert img { width:275px; height:445px; } .squr, .squr .more, .squr img { width:350px; height:350px; } .bubble { width:155px; height:125px; } .pntdwn:before { left: 70px;}  .pntlft:before { top:50px; left:145px;} .horz .pntdwn:before { bottom:125px;} .squr .pntdwn:before { bottom:195px;} }  
  @media all and (max-width:  460px)  { .photo { margin-top:0; }        .horz, .horz .more, .horz img { width:380px; height:235px; } .vert, .vert .more, .vert img { width:235px; height:380px; } .squr, .squr .more, .squr img { width:299px; height:299px; } .bubble { width:140px; height:110px; } .pntdwn:before { left: 60px;}  .pntlft:before { top:42px; left:130px;} .horz .pntdwn:before { bottom:100px;} .squr .pntdwn:before { bottom:165px;} }
  @media all and (max-height: 460px)  { .photo { margin-top:-195px; }   .horz, .horz .more, .horz img { width:380px; height:235px; } .vert, .vert .more, .vert img { width:235px; height:380px; } .squr, .squr .more, .squr img { width:299px; height:299px; } .bubble { width:140px; height:110px; } .pntdwn:before { left: 60px;}  .pntlft:before { top:42px; left:130px;} .horz .pntdwn:before { bottom:100px;} .squr .pntdwn:before { bottom:165px;} }
  @media all and (max-width:  400px)  { .photo { margin-top:0; }        .horz, .horz .more, .horz img { width:300px; height:186px; } .vert, .vert .more, .vert img { width:186px; height:300px; } .squr, .squr .more, .squr img { width:255px; height:255px; } .bubble { width:130px; height:100px; } .pntdwn:before { left: 60px;}  .pntlft:before { top:37px; left:120px;} .horz .pntdwn:before { bottom: 60px;} .squr .pntdwn:before { bottom:125px;} .bio { width:299px !important; height:299px !important; } .first, .first img { width:235px; height:380px; } }
  @media all and (max-height: 400px)  { .photo { margin-top:-150px; }   .horz, .horz .more, .horz img { width:300px; height:186px; } .vert, .vert .more, .vert img { width:186px; height:300px; } .squr, .squr .more, .squr img { width:255px; height:255px; } .bubble { width:130px; height:100px; } .pntdwn:before { left: 60px;}  .pntlft:before { top:37px; left:120px;} .horz .pntdwn:before { bottom: 60px;} .squr .pntdwn:before { bottom:125px;} }


/*==========================================================*/
/* Trigger Pages
/*==========================================================*/

  #trigger { position:fixed; top:0; left:0; right:0; bottom:0; text-align:center; }
    #trigger h1 { position:absolute; width:200px; height:200px; left:50%; top:50%; margin:-100px 0 0 -100px; font-size:4em; line-height:200px; text-align:center; }
    #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; } }
    #trigger p { position:relative; width:90%; height:60px; top:50%; margin:-30px auto 0 auto; display:block; }
    #trigger h1 a, #trigger p a { color:#000; }
    #trigger p a { display:block; font-size:1.8em; padding-bottom:15px; font-weight:900; line-height:1.3em; }


/*==========================================================*/
/* Studio 
/*==========================================================*/

  hr.fullspread { width:83%; max-width:1420px; margin-left:auto; margin-right:auto; }
  
  .studio { position:relative; margin-left:auto; margin-right:auto; width:95%; z-index:2; transition: all 0.5s ease-in-out; }
  .studio p { position:relative; width:300px; height:480px; display:inline-block; vertical-align:middle; margin:20px; text-align:center; font-weight:900; border-radius:3px; }
    .tinylibrarytour .studio p { height:360px; }
    .studio p a { display:block; color:#fcfcfc; }
    .studio p span { display:block; width:300px; height:430px; margin-bottom:15px; }
      .tinylibrarytour .studio p span { height:300px; }
    .studio p span img { box-shadow: 0px 0px 10px rgba(0, 0, 0, .1); width:300px; height:430px; border-radius:3px; }
       .tinylibrarytour .studio p span img { height:300px; }
  
  .novels { text-align:left; padding-top:20px; }
    .tinylibrarytour .novels { text-align:center; }
  .novels span img { box-shadow: 0px 0px 35px rgba(0, 0, 0, .4); }
  
  @media all and (max-width: 800px) {
    .novels { text-align:center; }
  }
  
  @media all and (max-width: 568px) {
    .studio { width:100%; }
    .studio p { margin:20px 0; }
  }
  @media all and (max-width: 380px) {
    .studio p { width:280px; height:448px; }
      .tinylibrarytour .studio p { height:340px; }
    .studio p span { width:280px; height:401px; }
      .tinylibrarytour .studio p span { height:280px; }
    .studio p span img { width:280px; height:401px; }
      .tinylibrarytour .studio p span img { height:280px; }
  }
  @media all and (max-width: 355px) {
    .studio p { width:260px; height:416px; }
      .tinylibrarytour .studio p { height:320px; }
    .studio p span { width:260px; height:373px; }
      .tinylibrarytour .studio p span { height:260px; }
    .studio p span img { width:260px; height:373px; }
      .tinylibrarytour .studio p span img { height:260px; }
  }

/* =========================================================*/
/* Text
/*==========================================================*/

  /* Global */
  
  .text h1 { font-size:4em; font-weight:400; }
  .text h2 { font-size:2em; font-weight:400; opacity:.5; transition: all 0.3s ease-in-out; }
  .text h3 { font-size:2em; font-weight:400; font-style:italic; line-height:28px; }
  .text h4 { text-transform:uppercase; letter-spacing:1px; line-height:1.25em; font-weight:900; }
  .text h5 { opacity:.7; }
  .text p, .text dt { margin-bottom:21px; }
  .text ul li { margin-bottom:17px; list-style-type:none; text-indent:-17px; }
    .text ul li:before { content:'\2022 '; color:#777; padding-right:10px; }
      
  /* Vegas Column */
  .column { width:100%; text-align:center; padding:80px 0; overflow:hidden; }
  
  /* Two Columns */
  .split { width:100%; }
  .split td { display:table-cell; width:50%; padding:80px; }
    
  /* Appearances */
    .calendar .date { font-weight:bold; margin-top:15px; }
    .calendar .description { font-size:1.1em; opacity:.8; }
  
  /* Thanks */
  .thanks div { margin-left:20px; margin-right:20px; }
  .unstoppable { font-size:.9em; letter-spacing:1px; line-height:1.25em; font-weight:900;  }
  .unstoppable span { display:block; opacity:.7; margin:5px 0 8px 0; }
  .unstoppable strong { font-size:1.2em; }
  .unstoppable a { font-size:1.4em; }
    .rights .unstoppable strong { font-size:1em; }
  
  /* Quote */
  .quote { display:block; width:85%; margin-left:auto; margin-right:auto; text-align:center; font-size:1.5em; line-height:1.4em; font-style:italic; opacity:.7;  }
    .dropcap { font-size:1.6em; }

  /* Thumbnail Images */
  a.tmb { border-bottom:none !important; }
    a.tmb span { position:absolute; margin-top:-42px; right:0; margin-right:65px; width:65px; height:65px; background:#edf0F5; }
      a.tmb span img { width:65px; height:65px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .1); border-radius:5px; }
    
  /* Fontello */
  .link { width:40px; height:40px; cursor:pointer; margin:0 auto; }
  .link a { color:#fff; font-size:2em; line-height:40px;  }
  
  /* Credits */
  .copyright p, .privacy p { font-size:1.2em; line-height:1.5em; }
  .copyright p { opacity:.9; }
  
  /* Floatbox */
  .floatbox {display:block; width:50%; position:absolute; top:0; right:0; padding:60px; }


  @media all and (max-width: 1250px) {
   
  }
  @media all and (max-width: 950px) {
    .split td { display:block; width:auto; padding:80px; }
  }
  @media all and (max-width: 800px) {
    .split td { padding:80px 50px; }
  }
  @media all and (max-width: 700px) {
  
  }
  @media all and (max-width: 540px) {
    .split h1, .column h1 { font-size:3.3em; }
    .split td { padding:80px 30px 40px 30px; }
    .split td.previous { padding:60px 0; }
    .split td.previous .quote { }
    .floatbox {width:100%; }
  }

/*==========================================================*/
/* Photo Grid
/*==========================================================*/

  .grid { }
  .grid p { position:relative; width:150px; height:120px; display:inline-block; vertical-align:middle; margin:15px 5px; text-align:center; }
  .grid p a { display:block; }
  .grid p span { width:130px; height:87px; background:#758fa8; padding:10px; display:block; margin-bottom:5px; border-radius:3px; }
  .grid p img { width:130px; height:87px; box-shadow: 0px 0px 10px rgba(0, 0, 0, .1); }

/*==========================================================*/
/* Button
/*==========================================================*/

  p.btn { border-radius:3px; text-align:center; cursor:pointer; margin-bottom:0; }
  p.btn a { color:#fff; display:block; padding:15px; }
  
  .chicklet { position:relative; display:inline-block; border-radius:12px; text-transform:uppercase; font-style:normal; font-weight:900; cursor:pointer; }
    .chicklet a { display:block; border-bottom:0; padding:13px 15px; }
    .chicklet i { display:block; font-size:32px; margin-bottom:-5px; }

/*==========================================================*/
/* Hover Effects
/*==========================================================*/

  @-webkit-keyframes ripple { 100% { top:-16px; right:-16px; bottom:-16px; left:-16px; opacity: 0; border:#fff solid 8px; border-radius:3px; }}
  @keyframes ripple { 100% { top:-16px; right:-16px; bottom:-16px; left:-16px; opacity:0; border:#fff solid 8px; }}
  .ripple { display:inline-block; 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:3px; top:0; right:0; bottom:0; left:0; -webkit-animation-duration:1s; animation-duration:1s; }
  .ripple:hover:before, .ripple:focus:before, .ripple:active:before { -webkit-animation-name:ripple; animation-name:ripple; }

  @-webkit-keyframes ripple-o { 100% { top:-16px; right:-16px; bottom:-16px; left:-16px; opacity: 0; border:#fff solid 8px; border-radius:30px; }}
  @keyframes ripple-o { 100% { top:-16px; right:-16px; bottom:-16px; left:-16px; opacity:0; border:#fff solid 8px; }}
  .ripple-o { display:inline-block; 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-o:before { content:''; position:absolute; border:#859db5 solid 0; border-radius:15px; top:0; right:0; bottom:0; left:0; -webkit-animation-duration:1s; animation-duration:1s; }
  .ripple-o:hover:before, .ripple-o:focus:before, .ripple-o:active:before { -webkit-animation-name:ripple-o; animation-name:ripple-o; }

/*==========================================================*/
/* Contact
/*==========================================================*/
  
  .contact #trigger p { font-size:.7em }
  
  .error { position:relative; z-index:2; background-color:#333; border-radius:3px; color:#fff; font-size:15px; padding:5px; }
  #contact_form { display:table; margin:0 auto; width:100%; text-align:left; }
    #contact_form label { display:block; margin-bottom:5px; }
    textarea { position:relative; z-index:1; color:#262B30; background-color:#fff; border:medium none; font-size:18px; padding:15px; width:95%; -webkit-appearance:none; font-family:"lato",sans-serif;
                margin: 0; border:none; border-radius:3px; opacity:0.5; transition:all 0.3s ease-in-out; outline:none; }
      textarea:focus, textarea:hover { opacity:1.0; -webkit-appearance:none; border:none; outline:none; }
    input[type=text] { position:relative; z-index:1; color:#262B30; background-color:#fff; border:medium none; font-size:18px; padding:15px; width:95%; -webkit-appearance:none;
                        margin:0; border:none; border-radius:3px; opacity:0.5; transition:all 0.3s ease-in-out; outline:none; }
      input[type=text]:focus, input[type=text]:hover { opacity:1.0; -webkit-appearance:none; border:none; }
    input[type=email] { position:relative; z-index:1; position:relative; z-index:1; color:#262B30; background-color:#fff; border:medium none; font-size:18px; padding:15px; width:95%; -webkit-appearance: none;
                        margin:0; border:none; border-radius:3px; opacity:0.5; transition:all 0.3s ease-in-out; outline:none; }
      input[type=email]:focus, input[type=email]:hover { opacity:1.0; -webkit-appearance:none; border:none; } 
    input[type=submit] { font-family: "lato",sans-serif; position:relative; z-index:1012; border:0; display:block; border-radius:3px; 
                          padding:15px; text-align:center; transition:opacity 0.2s ease-in-out 0s; text-transform:uppercase; 
                          opacity:0.7; text-decoration:none; cursor:pointer; width:100%; font-size:1.8em; line-height:1.3em; font-weight:900; }
      input[type=submit]:hover { opacity: 1; }
      input:focus { outline:none; -webkit-appearance:none; border:none; }
  p.success { position:relative; padding:24px 0 10px 0; font-size:2.2em; z-index:2; }
  .email-hide { text-align:right; }
  .email-hide a { color:#fff; }
  .hideit { display:none; }
  
  .social .square { font-size:4em; padding:10px; }
  @media all and (max-width: 540px) {
    .social { text-align:center;}
    .social .square { margin:20px; }
  }

/*==========================================================*/
/* Book Pages
/*==========================================================*/

  .intro { position:relative; display:block; padding-bottom:80px; overflow-x:hidden; }
  .intro .synopsis { position:relative; display:block; margin:80px 80px 80px 55%; max-width:600px; }
  .intro .synopsis p { display:block; width:100%; font-size:1.2em; line-height:1.3em;  }
  
  .reviews { margin:0; }
  .reviews blockquote:before { color: rgba(255, 255, 255, 0.4); content: "\201C"; display: inline-block; font-family: georgia,"noto serif",serif; font-size:8em;
    font-weight:900; position:relative; vertical-align:top; width:12%; top:-6px; text-align:left;}
  .reviews blockquote { border:0 none; display:block; margin:3.5em auto; width:60%; max-width:750px; padding:0; text-align:left; }
  .reviews blockquote p { display:inline-block; font-size:2.6em; font-weight:900; line-height:1.3em; margin:0; width:86%; }
    .reviews p.signature { margin:-60px auto 0 auto; text-align:right; width:80%; max-width:550px; }

  .kids { position:relative; text-align:center; }
  .kids h2 {line-height:1.3em; margin-left:20px; margin-right:20px; }
  .kids h2 small { display:block; line-height:1.1em;   margin-top:10px; }
    .kidreview { display:inline-block; width:400px; padding: 0.5em 0 1em 0; margin:20px; }
    .kidreview .quo { float: left; max-width: 40px; font-size:6em; font-weight:900; color: rgba(255, 255, 255, 0.4); } /* border-radius: 50%; */
    .kidreview .says { position:relative; margin-left:70px; padding:1em 1.6em 1.6em 1.6em; border-left: 2px solid #fcfcfc; border-radius:3px; text-align:left; }
    .kidreview .says:before { content:""; position:absolute; top:2em; right:100%; width: 0; height: 0; border-top: 12px solid #fcfcfc; border-left:16px solid transparent; }
    .kidreview .says h6 { line-height:1.4em; }
    .kidreview .says p { font-size:.9em; margin: .6em 0 0.2em 0;  }
    
  .banner { position:relative; display:block; height:350px; background-image:url('/me/archive/img/background/sass-banner.jpg'); background-position:40% 90%;
  background-repeat:no-repeat; background-attachment:fixed; background-size:cover; }
    .banner .notebook { position:relative; display:block; width:584px; margin:0 auto;} 
    .banner .q { position:relative; font-size:2.3em; font-weight:900; line-height:1.1em; width:290px; top:60px; left:0; text-shadow: 0px 0px 15px rgba(0, 0, 0, .8);  }
    .banner .a { position:absolute; width:292px; height:384px; -o-transform:rotate(5deg); -ms-transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); transform: rotate(5deg); box-shadow: 0px 0px 35px rgba(0, 0, 0, .4); top:-20px; left:50%; border-radius:10px;  }
 
  .excerpt { padding-left:60px; padding-right:60px; }
  .excerpt div { max-width:750px; margin:0 auto; }  
  .excerpt p { font-size:1.2em; line-height:1.7em; text-align:justify; text-indent:2em; margin-bottom:0; letter-spacing:0; }
    .excerpt p:first-child { text-indent:0; text-transform:uppercase; font-weight:900; opacity:.2; }
    
  .retailers .owl-carousel .owl-item { margin:0; padding:0; }
  .retailers img { width:140px; }
  
  .available { position:relative; width:200px; height:380px; display:block; font-weight:900; border-radius:3px; margin-left:auto; margin-right:auto; margin-bottom:-160px; letter-spacing:1px; text-transform:uppercase; }
    .available a { display:block; color:#fcfcfc; }
    .available span { display:block; width:200px; height:287px; margin-bottom:15px; }
    .available span img { box-shadow: 0px 0px 35px rgba(0, 0, 0, .4); width:200px; height:287px; border-radius:3px; }
  
  @media all and (max-width: 1150px) {
    .intro .synopsis { margin-left:45%; }
    .reviews blockquote { width:70%;}
  }
  @media all and (max-width: 900px) {
    .intro .synopsis { margin-left:35%; }
    .reviews blockquote:before { text-align:center; }
    .reviews blockquote { width:80% }
    .reviews blockquote p { font-size:2em; }
    .owl-carousel {width:90%}
  }
  @media all and (max-width: 800px) {
    .reviews blockquote:before { font-size:6em;}
  }
  @media all and (max-width: 700px) {
    .intro .synopsis h1 { font-size:3em; }
    .intro .synopsis { margin:80px 40px 80px 25%; }
    .kids h2 small { margin-top:20px; }
    .reviews blockquote { width:90% }
    .owl-carousel {width:80%}
  }
  @media all and (max-width: 600px) {
    .banner { height:700px; }
    .banner .notebook { display:block; width:100%; }
      .banner .q { width:70%; top:60px; text-align:center; font-size:2em; margin:0 auto; }
      .banner .a { position:relative; top:100px; left:0; margin:0 auto; }
  }
  @media all and (max-width: 540px) {
    .intro .synopsis h1 { font-size:2.4em; }
    .intro .synopsis { margin:60px 30px; }
    .intro .synopsis p {font-size:1em; line-height:1.5em; }
    .kids h2 {font-size:21px; }
    .reviews { overflow-x:hidden; }
    .reviews blockquote { width:95% }
    .reviews  blockquote p { font-size:1.6em; width:70%; }
    .reviews  blockquote:before { width:20%; top:-11px; }
      .reviews p.signature {margin-top:-40px; }
      .kidreview { width:100%; padding: 0.5em 0 1em 0; margin:20px; }
      .kidreview .says { width:50%;}
    .excerpt { position:relative; padding-left:30px; padding-right:30px; }
      .excerpt p { font-size:1.1em; line-height:1.6em; text-indent:1.5em; }
  }

/*==========================================================*/
/* Tooltip
/*==========================================================*/

#tip { text-align:left; color:#000; background:#edf0f5; position:absolute; z-index:3; padding:15px; line-height:25px; border-radius:3px; }
  #tip:after /* triangle decoration */ { width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #edf0f5; content: ''; position:absolute; left:50%; bottom:-10px; margin-left:-10px; }
  #tip.top:after { border-top-color: transparent; border-bottom: 10px solid #edf0f5; top: -20px; bottom: auto; }
  #tip.left:after { left: 10px; margin: 0; }
  #tip.right:after { right: 10px; left: auto; margin: 0; }