@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; font-family:"Gogh","Lucida Grande","Lucida Sans Unicode","Lucida Sans","noto sans",sans-serif; letter-spacing:0; font-feature-settings:"liga","dlig","calt"; }
.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; }
@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; } }
.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; }
/* 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 }
/*==========================================================*/
/* 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 }
/*==========================================================*/
/* text
/*==========================================================*/
/* fonts and weights */
.virgo { font-family:"Virgo","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; }
}
/* 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; }
.bold { font-weight:700; }
.fsn { font-style:normal !important; }
.light .fwn, .dark .fwn, .dark .text .fwn { font-weight:400 !important; font-variation-settings: "wght" 400 !important; }
.lsn1, .lsn1 p { letter-spacing:-1px }
.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 }
/* rotate elements */
.rotate45 { transform: rotate(45deg); }
.rotate90 { transform: rotate(90deg); }
.rotate135 { transform: rotate(135deg); }
.rotate180 { transform: rotate(180deg); }
.rotate270 { transform: rotate(270deg); }
/*==========================================================*/
/* 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 }
/* 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; }
/*==========================================================*/
/* preloader
/*==========================================================*/
#preloader { position:fixed; top:0; left:0; right:0; bottom:0; z-index:1014; }
#progress { position:absolute; width:120px; top:50%; left:50%; margin-top:-50px; margin-left:-60px; margin-right:auto; }
#bar { position:relative; display:block; width:0px; height:3px; }
/*==========================================================*/
/* symbol on nav banner, preloader and download
/*==========================================================*/
#preloader #symbol { font-size:3.2em; }
#menu #symbol { font-size:2.7em; }
#nav #symbol, #download #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; }
#download #symbol .lcir { margin-right:-8px; }
#download #symbol .rcir { margin-left:-17px; }
/*==========================================================*/
/* mainlayers
/*==========================================================*/
#mainlayer1 { width:100%; position:fixed; z-index:0; top:0; transition: all 0.4s ease-in-out; }
#mainlayer2 { position:absolute; top:0; 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'); } } */
/* 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('/_assets/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('/_assets/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('/_assets/img/homepage/consciousness/800.consciousness.jpg'); } }
*/
#mainlayer3 { position:relative; transition: all 0.5s ease-in-out; padding:0; z-index:12; }
/* 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; } #rightcenter #leftpanel { height:2931px; } }
@media all and (max-height: 2900px) { #mainlayer1, #mainlayer2 { height: 2900px; } #mainlayer3 { margin-top: 2900px; } #rightcenter #leftpanel { height:2830px; } }
@media all and (max-height: 2800px) { #mainlayer1, #mainlayer2 { height: 2000px; } #mainlayer3 { margin-top: 2800px; } #rightcenter #leftpanel { height:2730px; } }
@media all and (max-height: 2700px) { #mainlayer1, #mainlayer2 { height: 2700px; } #mainlayer3 { margin-top: 2700px; } #rightcenter #leftpanel { height:2630px; } }
@media all and (max-height: 2600px) { #mainlayer1, #mainlayer2 { height: 2600px; } #mainlayer3 { margin-top: 2600px; } #rightcenter #leftpanel { height:2530px; } }
@media all and (max-height: 2500px) { #mainlayer1, #mainlayer2 { height: 2500px; } #mainlayer3 { margin-top: 2500px; } #rightcenter #leftpanel { height:2430px; } }
@media all and (max-height: 2400px) { #mainlayer1, #mainlayer2 { height: 2400px; } #mainlayer3 { margin-top: 2400px; } #rightcenter #leftpanel { height:2330px; } }
@media all and (max-height: 2300px) { #mainlayer1, #mainlayer2 { height: 2300px; } #mainlayer3 { margin-top: 2300px; } #rightcenter #leftpanel { height:2230px; } }
@media all and (max-height: 2280px) { #mainlayer1, #mainlayer2 { height: 2280px; } #mainlayer3 { margin-top: 2280px; } #rightcenter #leftpanel { height:2210px; } }
@media all and (max-height: 2260px) { #mainlayer1, #mainlayer2 { height: 2260px; } #mainlayer3 { margin-top: 2260px; } #rightcenter #leftpanel { height:2190px; } }
@media all and (max-height: 2240px) { #mainlayer1, #mainlayer2 { height: 2240px; } #mainlayer3 { margin-top: 2240px; } #rightcenter #leftpanel { height:2170px; } }
@media all and (max-height: 2220px) { #mainlayer1, #mainlayer2 { height: 2220px; } #mainlayer3 { margin-top: 2220px; } #rightcenter #leftpanel { height:2150px; } }
@media all and (max-height: 2200px) { #mainlayer1, #mainlayer2 { height: 2200px; } #mainlayer3 { margin-top: 2200px; } #rightcenter #leftpanel { height:2130px; } }
@media all and (max-height: 2180px) { #mainlayer1, #mainlayer2 { height: 2180px; } #mainlayer3 { margin-top: 2180px; } #rightcenter #leftpanel { height:2110px; } }
@media all and (max-height: 2160px) { #mainlayer1, #mainlayer2 { height: 2160px; } #mainlayer3 { margin-top: 2160px; } #rightcenter #leftpanel { height:2090px; } }
@media all and (max-height: 2140px) { #mainlayer1, #mainlayer2 { height: 2140px; } #mainlayer3 { margin-top: 2140px; } #rightcenter #leftpanel { height:2070px; } }
@media all and (max-height: 2120px) { #mainlayer1, #mainlayer2 { height: 2120px; } #mainlayer3 { margin-top: 2120px; } #rightcenter #leftpanel { height:2050px; } }
@media all and (max-height: 2100px) { #mainlayer1, #mainlayer2 { height: 2100px; } #mainlayer3 { margin-top: 2100px; } #rightcenter #leftpanel { height:2030px; } }
@media all and (max-height: 2080px) { #mainlayer1, #mainlayer2 { height: 2080px; } #mainlayer3 { margin-top: 2080px; } #rightcenter #leftpanel { height:2010px; } }
@media all and (max-height: 2060px) { #mainlayer1, #mainlayer2 { height: 2060px; } #mainlayer3 { margin-top: 2060px; } #rightcenter #leftpanel { height:1990px; } }
@media all and (max-height: 2040px) { #mainlayer1, #mainlayer2 { height: 2040px; } #mainlayer3 { margin-top: 2040px; } #rightcenter #leftpanel { height:1970px; } }
@media all and (max-height: 2020px) { #mainlayer1, #mainlayer2 { height: 2020px; } #mainlayer3 { margin-top: 2020px; } #rightcenter #leftpanel { height:1950px; } }
@media all and (max-height: 2000px) { #mainlayer1, #mainlayer2 { height: 2000px; } #mainlayer3 { margin-top: 2000px; } #rightcenter #leftpanel { height:1930px; } }
@media all and (max-height: 1980px) { #mainlayer1, #mainlayer2 { height: 1980px; } #mainlayer3 { margin-top: 1980px; } #rightcenter #leftpanel { height:1910px; } }
@media all and (max-height: 1960px) { #mainlayer1, #mainlayer2 { height: 1960px; } #mainlayer3 { margin-top: 1960px; } #rightcenter #leftpanel { height:1890px; } }
@media all and (max-height: 1940px) { #mainlayer1, #mainlayer2 { height: 1940px; } #mainlayer3 { margin-top: 1940px; } #rightcenter #leftpanel { height:1870px; } }
@media all and (max-height: 1920px) { #mainlayer1, #mainlayer2 { height: 1920px; } #mainlayer3 { margin-top: 1920px; } #rightcenter #leftpanel { height:1850px; } }
@media all and (max-height: 1900px) { #mainlayer1, #mainlayer2 { height: 1900px; } #mainlayer3 { margin-top: 1900px; } #rightcenter #leftpanel { height:1830px; } }
@media all and (max-height: 1880px) { #mainlayer1, #mainlayer2 { height: 1880px; } #mainlayer3 { margin-top: 1880px; } #rightcenter #leftpanel { height:1810px; } }
@media all and (max-height: 1860px) { #mainlayer1, #mainlayer2 { height: 1860px; } #mainlayer3 { margin-top: 1860px; } #rightcenter #leftpanel { height:1790px; } }
@media all and (max-height: 1840px) { #mainlayer1, #mainlayer2 { height: 1840px; } #mainlayer3 { margin-top: 1840px; } #rightcenter #leftpanel { height:1770px; } }
@media all and (max-height: 1820px) { #mainlayer1, #mainlayer2 { height: 1820px; } #mainlayer3 { margin-top: 1820px; } #rightcenter #leftpanel { height:1750px; } }
@media all and (max-height: 1800px) { #mainlayer1, #mainlayer2 { height: 1800px; } #mainlayer3 { margin-top: 1800px; } #rightcenter #leftpanel { height:1730px; } }
@media all and (max-height: 1780px) { #mainlayer1, #mainlayer2 { height: 1780px; } #mainlayer3 { margin-top: 1780px; } #rightcenter #leftpanel { height:1710px; } }
@media all and (max-height: 1760px) { #mainlayer1, #mainlayer2 { height: 1760px; } #mainlayer3 { margin-top: 1760px; } #rightcenter #leftpanel { height:1690px; } }
@media all and (max-height: 1740px) { #mainlayer1, #mainlayer2 { height: 1740px; } #mainlayer3 { margin-top: 1740px; } #rightcenter #leftpanel { height:1670px; } }
@media all and (max-height: 1720px) { #mainlayer1, #mainlayer2 { height: 1720px; } #mainlayer3 { margin-top: 1720px; } #rightcenter #leftpanel { height:1650px; } }
@media all and (max-height: 1700px) { #mainlayer1, #mainlayer2 { height: 1700px; } #mainlayer3 { margin-top: 1700px; } #rightcenter #leftpanel { height:1630px; } }
@media all and (max-height: 1680px) { #mainlayer1, #mainlayer2 { height: 1680px; } #mainlayer3 { margin-top: 1680px; } #rightcenter #leftpanel { height:1610px; } }
@media all and (max-height: 1660px) { #mainlayer1, #mainlayer2 { height: 1660px; } #mainlayer3 { margin-top: 1660px; } #rightcenter #leftpanel { height:1590px; } }
@media all and (max-height: 1640px) { #mainlayer1, #mainlayer2 { height: 1640px; } #mainlayer3 { margin-top: 1640px; } #rightcenter #leftpanel { height:1570px; } }
@media all and (max-height: 1620px) { #mainlayer1, #mainlayer2 { height: 1620px; } #mainlayer3 { margin-top: 1620px; } #rightcenter #leftpanel { height:1550px; } }
@media all and (max-height: 1600px) { #mainlayer1, #mainlayer2 { height: 1600px; } #mainlayer3 { margin-top: 1600px; } #rightcenter #leftpanel { height:1530px; } }
@media all and (max-height: 1580px) { #mainlayer1, #mainlayer2 { height: 1580px; } #mainlayer3 { margin-top: 1580px; } #rightcenter #leftpanel { height:1510px; } }
@media all and (max-height: 1560px) { #mainlayer1, #mainlayer2 { height: 1560px; } #mainlayer3 { margin-top: 1560px; } #rightcenter #leftpanel { height:1490px; } }
@media all and (max-height: 1540px) { #mainlayer1, #mainlayer2 { height: 1540px; } #mainlayer3 { margin-top: 1540px; } #rightcenter #leftpanel { height:1470px; } }
@media all and (max-height: 1520px) { #mainlayer1, #mainlayer2 { height: 1520px; } #mainlayer3 { margin-top: 1520px; } #rightcenter #leftpanel { height:1450px; } }
@media all and (max-height: 1500px) { #mainlayer1, #mainlayer2 { height: 1500px; } #mainlayer3 { margin-top: 1500px; } #rightcenter #leftpanel { height:1430px; } }
@media all and (max-height: 1480px) { #mainlayer1, #mainlayer2 { height: 1480px; } #mainlayer3 { margin-top: 1480px; } #rightcenter #leftpanel { height:1410px; } }
@media all and (max-height: 1460px) { #mainlayer1, #mainlayer2 { height: 1460px; } #mainlayer3 { margin-top: 1460px; } #rightcenter #leftpanel { height:1390px; } }
@media all and (max-height: 1440px) { #mainlayer1, #mainlayer2 { height: 1440px; } #mainlayer3 { margin-top: 1440px; } #rightcenter #leftpanel { height:1370px; } }
@media all and (max-height: 1420px) { #mainlayer1, #mainlayer2 { height: 1420px; } #mainlayer3 { margin-top: 1420px; } #rightcenter #leftpanel { height:1350px; } }
@media all and (max-height: 1400px) { #mainlayer1, #mainlayer2 { height: 1400px; } #mainlayer3 { margin-top: 1400px; } #rightcenter #leftpanel { height:1330px; } }
@media all and (max-height: 1380px) { #mainlayer1, #mainlayer2 { height: 1380px; } #mainlayer3 { margin-top: 1380px; } #rightcenter #leftpanel { height:1310px; } }
@media all and (max-height: 1360px) { #mainlayer1, #mainlayer2 { height: 1360px; } #mainlayer3 { margin-top: 1360px; } #rightcenter #leftpanel { height:1290px; } }
@media all and (max-height: 1340px) { #mainlayer1, #mainlayer2 { height: 1340px; } #mainlayer3 { margin-top: 1340px; } #rightcenter #leftpanel { height:1270px; } }
@media all and (max-height: 1320px) { #mainlayer1, #mainlayer2 { height: 1320px; } #mainlayer3 { margin-top: 1320px; } #rightcenter #leftpanel { height:1250px; } }
@media all and (max-height: 1300px) { #mainlayer1, #mainlayer2 { height: 1300px; } #mainlayer3 { margin-top: 1300px; } #rightcenter #leftpanel { height:1230px; } }
@media all and (max-height: 1280px) { #mainlayer1, #mainlayer2 { height: 1280px; } #mainlayer3 { margin-top: 1280px; } #rightcenter #leftpanel { height:1210px; } }
@media all and (max-height: 1260px) { #mainlayer1, #mainlayer2 { height: 1260px; } #mainlayer3 { margin-top: 1260px; } #rightcenter #leftpanel { height:1190px; } }
@media all and (max-height: 1240px) { #mainlayer1, #mainlayer2 { height: 1240px; } #mainlayer3 { margin-top: 1240px; } #rightcenter #leftpanel { height:1170px; } }
@media all and (max-height: 1220px) { #mainlayer1, #mainlayer2 { height: 1220px; } #mainlayer3 { margin-top: 1220px; } #rightcenter #leftpanel { height:1150px; } }
@media all and (max-height: 1200px) { #mainlayer1, #mainlayer2 { height: 1200px; } #mainlayer3 { margin-top: 1200px; } #rightcenter #leftpanel { height:1130px; } }
@media all and (max-height: 1180px) { #mainlayer1, #mainlayer2 { height: 1180px; } #mainlayer3 { margin-top: 1180px; } #rightcenter #leftpanel { height:1110px; } }
@media all and (max-height: 1160px) { #mainlayer1, #mainlayer2 { height: 1160px; } #mainlayer3 { margin-top: 1160px; } #rightcenter #leftpanel { height:1090px; } }
@media all and (max-height: 1140px) { #mainlayer1, #mainlayer2 { height: 1140px; } #mainlayer3 { margin-top: 1140px; } #rightcenter #leftpanel { height:1070px; } }
@media all and (max-height: 1120px) { #mainlayer1, #mainlayer2 { height: 1120px; } #mainlayer3 { margin-top: 1120px; } #rightcenter #leftpanel { height:1050px; } }
@media all and (max-height: 1100px) { #mainlayer1, #mainlayer2 { height: 1100px; } #mainlayer3 { margin-top: 1100px; } #rightcenter #leftpanel { height:1030px; } }
@media all and (max-height: 1080px) { #mainlayer1, #mainlayer2 { height: 1080px; } #mainlayer3 { margin-top: 1080px; } #rightcenter #leftpanel { height:1010px; } }
@media all and (max-height: 1060px) { #mainlayer1, #mainlayer2 { height: 1060px; } #mainlayer3 { margin-top: 1060px; } #rightcenter #leftpanel { height: 980px; } }
@media all and (max-height: 1040px) { #mainlayer1, #mainlayer2 { height: 1040px; } #mainlayer3 { margin-top: 1040px; } #rightcenter #leftpanel { height: 970px; } }
@media all and (max-height: 1020px) { #mainlayer1, #mainlayer2 { height: 1020px; } #mainlayer3 { margin-top: 1020px; } #rightcenter #leftpanel { height: 950px; } }
@media all and (max-height: 1000px) { #mainlayer1, #mainlayer2 { height: 1000px; } #mainlayer3 { margin-top: 1000px; } #rightcenter #leftpanel { height: 730px; } }
@media all and (max-height: 980px) { #mainlayer1, #mainlayer2 { height: 980px; } #mainlayer3 { margin-top: 980px; } #rightcenter #leftpanel { height: 710px; } }
@media all and (max-height: 960px) { #mainlayer1, #mainlayer2 { height: 960px; } #mainlayer3 { margin-top: 960px; } #rightcenter #leftpanel { height: 890px; } }
@media all and (max-height: 940px) { #mainlayer1, #mainlayer2 { height: 940px; } #mainlayer3 { margin-top: 940px; } #rightcenter #leftpanel { height: 870px; } }
@media all and (max-height: 920px) { #mainlayer1, #mainlayer2 { height: 920px; } #mainlayer3 { margin-top: 920px; } #rightcenter #leftpanel { height: 850px; } }
@media all and (max-height: 900px) { #mainlayer1, #mainlayer2 { height: 900px; } #mainlayer3 { margin-top: 900px; } #rightcenter #leftpanel { height: 830px; } }
@media all and (max-height: 880px) { #mainlayer1, #mainlayer2 { height: 880px; } #mainlayer3 { margin-top: 880px; } #rightcenter #leftpanel { height: 810px; } }
@media all and (max-height: 860px) { #mainlayer1, #mainlayer2 { height: 860px; } #mainlayer3 { margin-top: 860px; } #rightcenter #leftpanel { height: 790px; } }
@media all and (max-height: 840px) { #mainlayer1, #mainlayer2 { height: 840px; } #mainlayer3 { margin-top: 840px; } #rightcenter #leftpanel { height: 770px; } }
@media all and (max-height: 820px) { #mainlayer1, #mainlayer2 { height: 820px; } #mainlayer3 { margin-top: 820px; } #rightcenter #leftpanel { height: 750px; } }
@media all and (max-height: 800px) { #mainlayer1, #mainlayer2 { height: 800px; } #mainlayer3 { margin-top: 800px; } #rightcenter #leftpanel { height: 730px; } }
@media all and (max-height: 780px) { #mainlayer1, #mainlayer2 { height: 780px; } #mainlayer3 { margin-top: 780px; } #rightcenter #leftpanel { height: 710px; } }
@media all and (max-height: 760px) { #mainlayer1, #mainlayer2 { height: 760px; } #mainlayer3 { margin-top: 760px; } #rightcenter #leftpanel { height: 690px; } }
@media all and (max-height: 740px) { #mainlayer1, #mainlayer2 { height: 740px; } #mainlayer3 { margin-top: 740px; } #rightcenter #leftpanel { height: 670px; } }
@media all and (max-height: 720px) { #mainlayer1, #mainlayer2 { height: 720px; } #mainlayer3 { margin-top: 720px; } #rightcenter #leftpanel { height: 650px; } }
@media all and (max-height: 700px) { #mainlayer1, #mainlayer2 { height: 700px; } #mainlayer3 { margin-top: 700px; } #rightcenter #leftpanel { height: 630px; } }
@media all and (max-height: 680px) { #mainlayer1, #mainlayer2 { height: 680px; } #mainlayer3 { margin-top: 680px; } #rightcenter #leftpanel { height: 610px; } }
@media all and (max-height: 660px) { #mainlayer1, #mainlayer2 { height: 660px; } #mainlayer3 { margin-top: 660px; } #rightcenter #leftpanel { height: 590px; } }
@media all and (max-height: 640px) { #mainlayer1, #mainlayer2 { height: 640px; } #mainlayer3 { margin-top: 640px; } #rightcenter #leftpanel { height: 570px; } }
@media all and (max-height: 620px) { #mainlayer1, #mainlayer2 { height: 620px; } #mainlayer3 { margin-top: 620px; } #rightcenter #leftpanel { height: 550px; } }
@media all and (max-height: 600px) { #mainlayer1, #mainlayer2 { height: 600px; } #mainlayer3 { margin-top: 600px; } #rightcenter #leftpanel { height: 530px; } }
@media all and (max-height: 580px) { #mainlayer1, #mainlayer2 { height: 580px; } #mainlayer3 { margin-top: 580px; } #rightcenter #leftpanel { height: 510px; } }
@media all and (max-height: 560px) { #mainlayer1, #mainlayer2 { height: 560px; } #mainlayer3 { margin-top: 560px; } #rightcenter #leftpanel { height: 490px; } }
@media all and (max-height: 540px) { #mainlayer1, #mainlayer2 { height: 540px; } #mainlayer3 { margin-top: 540px; } #rightcenter #leftpanel { height: 470px; } }
@media all and (max-height: 520px) { #mainlayer1, #mainlayer2 { height: 520px; } #mainlayer3 { margin-top: 520px; } #rightcenter #leftpanel { height: 450px; } }
@media all and (max-height: 500px) { #mainlayer1, #mainlayer2 { height: 500px; } #mainlayer3 { margin-top: 500px; } #rightcenter #leftpanel { height: 430px; } }
@media all and (max-height: 480px) { #mainlayer1, #mainlayer2 { height: 480px; } #mainlayer3 { margin-top: 480px; } #rightcenter #leftpanel { height: 410px; } }
@media all and (max-height: 460px) { #mainlayer1, #mainlayer2 { height: 460px; } #mainlayer3 { margin-top: 460px; } #rightcenter #leftpanel { height: 390px; } }
@media all and (max-height: 440px) { #mainlayer1, #mainlayer2 { height: 440px; } #mainlayer3 { margin-top: 440px; } #rightcenter #leftpanel { height: 370px; } }
@media all and (max-height: 420px) { #mainlayer1, #mainlayer2 { height: 420px; } #mainlayer3 { margin-top: 420px; } #rightcenter #leftpanel { height: 350px; } }
@media all and (max-height: 400px) { #mainlayer1, #mainlayer2 { height: 400px; } #mainlayer3 { margin-top: 400px; } #rightcenter #leftpanel { height: 330px; } }
/*==========================================================*/
/* 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 */
/*==========================================================*/
/* header elements
/*==========================================================*/
/* homepage headlines in mainlayer1 */
#hhead { position:relative; display:block; }
#hhead h1 { position:absolute; top:20px; left:30px; }
#hhead h1 span { letter-spacing:-3.5px; }
#hhead h2 { position:fixed; bottom:25px; left:30px; width:60%; font-size:17px; line-height:24.5px; }
/* h2 along nav banner space */
@media all and (max-width: 579px) {
#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; }
#down-arrow a span:hover, #down-arrow a span:active { color:#f9852a; }
#down-arrow a span { position:fixed; display:inline-block; text-align:center; bottom:22px; right:28px; width:35px; height:60px; transition: all 0.3s ease-in-out; }
#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 }
}
/*==========================================================*/
/* split panel pages
/*==========================================================*/
/* 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; }
}
/* hidden text */
.seo { position:absolute; top:-4000px; z-index:-1; }
#w3c a.toggler { position:absolute; color:#000; }
/*==========================================================*/
/* 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 p, main dt { margin-bottom:21px; }
main p br.space { display:block; margin-bottom:15px; }
/*==========================================================*/
/* modals
/*==========================================================*/
/* 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; }
#photobox #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,
#comment-button a, #comment-button span, #comment-button a:visited { 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 { 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:650px; margin-top:-330px; }
#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; }
#download h3 { letter-spacing:-1.5px; }
/* 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:-288px; }
p#close:hover, p#dclose:hover { opacity:1; }
/* adjust comment/download overlays and close button for viewport width */
@media all and (max-width: 899px) {
#download { margin-top:-290px; }
p#dclose { margin-top:-247px; }
}
@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; }
/*==========================================================*/
/* 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 { border-radius:60px; }
.tmb, .tmb a, .tmb a img, .tmb img { width:50px; height:50px; }
.tmb a img, .tmb img { box-shadow: 0px 0px 10px rgba(0, 0, 0, .15); border-radius:50px; }
.biopic .tmb, .biopic a, .biopic a img { width:120px; height:120px; 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; }
.tmb, .tmb a, .tmb a img, .tmb img { width:45px; height:45px; }
.biopic .tmb, .biopic a, .biopic a img { width:120px; height:120px; }
}
@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; }
}
@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, .tmb img { width:40px; height:40px; }
biopic .tmb, .biopic a, .biopic a img { width:120px; height:120px; }
}
@media all and (max-width: 349px) {
.tmb, .tmb a, .tmb a img, .tmb img { width:35px; height:35px; }
biopic .tmb, .biopic a, .biopic a img { width:120px; height:120px; }
}
/* 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; }
}
@media all and (max-width: 579px) {
#homecolumn .blurb .bio p, #homecolumn .blurb .list .head, #homecolumn .blurb .list p { margin-left:auto; }
}
/*==========================================================*/
/* 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; }
/*==========================================================*/
/* 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 }
/*==========================================================*/
/* 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 */
/*==========================================================*/
/* 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 { 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 #symbol { transition: all 0.8s ease-in-out; }
#nav-left .part { position:relative; display:inline-block; height:50px; line-height:50px; bottom:4px; left:4px; font-size:1.7em; letter-spacing:-3.5px; transition: all 1s ease-in-out; }
/* top menu button */
#menu-top { z-index:1010; position:fixed; top:0; right:0; margin-right:20px; margin-top:25px; text-align:center; width:50px; height:50px; transition: all 0.3s ease-in-out; opacity:0.75; }
.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 close button */
#menu-close { z-index:1009; position:fixed; top:0; right:0; margin-right:28px; margin-top:32px; 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; opacity:1; }
/* 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:340px; height:400px; margin-top:-200px; margin-left:-170px; }
.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 (max-width: 1199px) {
#menu-top { margin-right:25px; width:45px; height:45px !important; }
}
@media all and (min-width: 800px) {
#nav-left a:hover { margin-left:-50px; }
#nav-left a:hover .part { letter-spacing:3px; }
#nav-left a:hover #symbol { 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) {
.abridged { width:280px; height:380px; margin-left:-140px; }
#nav-left p { margin-left:20px; }
#nav-left .part { display:none; }
}
@media all and (max-width: 579px) {
#menu-top { margin-right:26px; width:40px; height:40px !important; }
}
@media all and (max-width: 444px) {
#menu-top { margin-top:23px; }
}
@media all and (max-width: 349px) {
#menu-top { margin-right:28px; width:35px; height:35px !important; }
}
/*==========================================================*/
/* 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; color:#f9852a; }
/*==========================================================*/
/* 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; opacity:0; }
.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/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/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; }
h3.cycler .virgo { font-size:1.5em; letter-spacing:-2.5px; }
#comment .parallax { height:200px }
#comment .vegas-slide { overflow-y:scroll; visibility:visible; }
/* 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) {
.cycler { 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/map/topo-dark.png'); background-repeat:no-repeat; background-position: right 40% bottom -70px; background-size:700px; }
#watermark2 { background-image: url('/img/map/topo-090807.50.jpg'); background-repeat:no-repeat; background-position:27% 20%; }
/* background color change */
.audioplayer .bglight { background-color:#e6e3da; }
/*==========================================================*/
/* 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 a.newtab { line-height:30px; font-size:30px; color:#fff; opacity:.7; }
#links .linkbar p a { position:relative; }
#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; transition: all .3s ease-in-out; opacity:0; }
/*==========================================================*/
/* 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,"); /* 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,"); } /* fill:%23f9852a; = orange */
.jp-state-playing .jp-play { opacity:1; background:transparent url("data:image/svg+xml;utf8,"); } /* activated by js */
.jp-state-playing .jp-play:focus { opacity:1; background:transparent url("data:image/svg+xml;utf8,"); } /* activated by js */
.jp-stop {
width:28px;
height:28px;
margin-top:6px;
background:transparent url("data:image/svg+xml;utf8,");
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,"); }
.jp-stop:focus { opacity:1; background:transparent url("data:image/svg+xml;utf8,"); }
/* 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/playlist/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,"); }
.jp-mute:focus { background-repeat:no-repeat; background:transparent url("data:image/svg+xml;utf8,"); }
.jp-state-muted .jp-mute { background-repeat:no-repeat; background:transparent url("data:image/svg+xml;utf8,"); } /* activated by js */
.jp-state-muted .jp-mute:focus { background-repeat:no-repeat; background:transparent url("data:image/svg+xml;utf8,"); } /* activated by js */
.jp-volume-max { left: 80px; }
.jp-volume-max { background-repeat:no-repeat; background:transparent url("data:image/svg+xml;utf8,"); }
.jp-volume-max:focus { background-repeat:no-repeat; background:transparent url("data:image/svg+xml;utf8,"); }
.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,"); }
.jp-close:hover, .jp-close:active { background:transparent url("data:image/svg+xml;utf8,"); }
/* 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 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:162px; font-size:40px; height:40px; opacity:1; color:#fff; transition: all 0.4s ease-in-out; border-radius:20px; }
.jp-playlist .plist-t { position:relative; display:block; margin:23px 0px 0 70px; text-align:left; white-space:nowrap; font-weight:450; }
.jp-playlist .plist-s { position:relative; display:block; text-align:left; white-space:nowrap; font-size:0.7em; line-height:1.8em; letter-spacing:.4px; color:#222; margin-top:30px; transition: all 0.3s ease-in-out; }
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 { color:#f9852a; }
.jp-playlist li:hover .plist-s { color:#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; }
/* 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; }
.jp-playlist .plist-ts { height:66px; }
.jp-playlist .plist-i { top:148px; font-size:36px; height:36px; }
.jp-playlist .plist-t { margin:18px 0px 0 65px; font-size:.9em }
.jp-playlist .plist-s { margin-top:25px; }
}
@media all and (max-width: 1299px) {
.jp-playlist li { height:160px; width:240px; margin:10px 15px; background-size:240px; border-bottom:3px solid #000; }
.jp-playlist li a { height:160px; }
.jp-playlist .plist-ts { height:54px; }
.jp-playlist .plist-i { left:14px; top:118px; font-size:28px; height:28px; }
.jp-playlist .plist-t { margin:12px 0px 0 52px; font-size:.72em }
.jp-playlist .plist-s { font-size:0.6em; line-height:1.3em; margin-top:20px; }
li.jp-playlist-current, .jp-playlist li:hover, .jp-playlist li:active { border-bottom:3px solid #f9852a; }
}
@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; }
}
/*=========================================================*/
/* vegas.css
/*==========================================================*/
.vegas-overlay,.vegas-slide,.vegas-slide-inner,.vegas-timer,.vegas-wrapper{position:absolute;top:0;left:0;bottom:0;right:0;overflow:hidden;border:none;padding:0;margin:0}.vegas-overlay{/*opacity:.5;background:transparent url("overlays/10.png") center center repeat*/}.vegas-timer{top:auto;bottom:0;height:2px}.vegas-timer-progress{width:0;height:100%;background:#fff;-webkit-transition:width ease-out;transition:width ease-out}.vegas-timer-running .vegas-timer-progress{width:100%}.vegas-slide,.vegas-slide-inner{margin:0;padding:0;background:center center no-repeat;-webkit-transform:translateZ(0);transform:translateZ(0)}body .vegas-container{overflow:hidden!important;position:relative}.vegas-video{min-width:100%;min-height:100%;width:auto;height:auto}body.vegas-container{overflow:auto;position:static;z-index:-2}body.vegas-container>.vegas-overlay,body.vegas-container>.vegas-slide,body.vegas-container>.vegas-timer{position:fixed;z-index:-1}:root body.vegas-container>.vegas-overlay,:root body.vegas-container>.vegas-slide,_::full-page-media,_:future{bottom:-76px}.vegas-transition-blur,.vegas-transition-blur2{opacity:0;-webkit-filter:blur(32px);filter:blur(32px)}.vegas-transition-blur-in,.vegas-transition-blur2-in{opacity:1;-webkit-filter:blur(0);filter:blur(0)}.vegas-transition-blur2-out{opacity:0}.vegas-transition-burn,.vegas-transition-burn2{opacity:0;-webkit-filter:contrast(1000%) saturate(1000%);filter:contrast(1000%) saturate(1000%)}.vegas-transition-burn-in,.vegas-transition-burn2-in{opacity:1;-webkit-filter:contrast(100%) saturate(100%);filter:contrast(100%) saturate(100%)}.vegas-transition-burn2-out{opacity:0;-webkit-filter:contrast(1000%) saturate(1000%);filter:contrast(1000%) saturate(1000%)}.vegas-transition-fade,.vegas-transition-fade2{opacity:0}.vegas-transition-fade-in,.vegas-transition-fade2-in{opacity:1}.vegas-transition-fade2-out{opacity:0}.vegas-transition-flash,.vegas-transition-flash2{opacity:0;-webkit-filter:brightness(25);filter:brightness(25)}.vegas-transition-flash-in,.vegas-transition-flash2-in{opacity:1;-webkit-filter:brightness(1);filter:brightness(1)}.vegas-transition-flash2-out{opacity:0;-webkit-filter:brightness(25);filter:brightness(25)}.vegas-transition-negative,.vegas-transition-negative2{opacity:0;-webkit-filter:invert(100%);filter:invert(100%)}.vegas-transition-negative-in,.vegas-transition-negative2-in{opacity:1;-webkit-filter:invert(0);filter:invert(0)}.vegas-transition-negative2-out{opacity:0;-webkit-filter:invert(100%);filter:invert(100%)}.vegas-transition-slideDown,.vegas-transition-slideDown2{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.vegas-transition-slideDown-in,.vegas-transition-slideDown2-in{-webkit-transform:translateY(0);transform:translateY(0)}.vegas-transition-slideDown2-out{-webkit-transform:translateY(100%);transform:translateY(100%)}.vegas-transition-slideLeft,.vegas-transition-slideLeft2{-webkit-transform:translateX(100%);transform:translateX(100%)}.vegas-transition-slideLeft-in,.vegas-transition-slideLeft2-in{-webkit-transform:translateX(0);transform:translateX(0)}.vegas-transition-slideLeft2-out,.vegas-transition-slideRight,.vegas-transition-slideRight2{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.vegas-transition-slideRight-in,.vegas-transition-slideRight2-in{-webkit-transform:translateX(0);transform:translateX(0)}.vegas-transition-slideRight2-out{-webkit-transform:translateX(100%);transform:translateX(100%)}.vegas-transition-slideUp,.vegas-transition-slideUp2{-webkit-transform:translateY(100%);transform:translateY(100%)}.vegas-transition-slideUp-in,.vegas-transition-slideUp2-in{-webkit-transform:translateY(0);transform:translateY(0)}.vegas-transition-slideUp2-out{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.vegas-transition-swirlLeft,.vegas-transition-swirlLeft2{-webkit-transform:scale(2) rotate(35deg);transform:scale(2) rotate(35deg);opacity:0}.vegas-transition-swirlLeft-in,.vegas-transition-swirlLeft2-in{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0);opacity:1}.vegas-transition-swirlLeft2-out,.vegas-transition-swirlRight,.vegas-transition-swirlRight2{-webkit-transform:scale(2) rotate(-35deg);transform:scale(2) rotate(-35deg);opacity:0}.vegas-transition-swirlRight-in,.vegas-transition-swirlRight2-in{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0);opacity:1}.vegas-transition-swirlRight2-out{-webkit-transform:scale(2) rotate(35deg);transform:scale(2) rotate(35deg);opacity:0}.vegas-transition-zoomIn,.vegas-transition-zoomIn2{-webkit-transform:scale(0);transform:scale(0);opacity:0}.vegas-transition-zoomIn-in,.vegas-transition-zoomIn2-in{-webkit-transform:scale(1);transform:scale(1);opacity:1}.vegas-transition-zoomIn2-out,.vegas-transition-zoomOut,.vegas-transition-zoomOut2{-webkit-transform:scale(2);transform:scale(2);opacity:0}.vegas-transition-zoomOut-in,.vegas-transition-zoomOut2-in{-webkit-transform:scale(1);transform:scale(1);opacity:1}.vegas-transition-zoomOut2-out{-webkit-transform:scale(0);transform:scale(0);opacity:0}.vegas-animation-kenburns{-webkit-animation:kenburns ease-out;animation:kenburns ease-out}@-webkit-keyframes kenburns{0%{-webkit-transform:scale(1.5);transform:scale(1.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes kenburns{0%{-webkit-transform:scale(1.5);transform:scale(1.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.vegas-animation-kenburnsDownLeft{-webkit-animation:kenburnsDownLeft ease-out;animation:kenburnsDownLeft ease-out}@-webkit-keyframes kenburnsDownLeft{0%{-webkit-transform:scale(1.5) translate(10%,-10%);transform:scale(1.5) translate(10%,-10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsDownLeft{0%{-webkit-transform:scale(1.5) translate(10%,-10%);transform:scale(1.5) translate(10%,-10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsDownRight{-webkit-animation:kenburnsDownRight ease-out;animation:kenburnsDownRight ease-out}@-webkit-keyframes kenburnsDownRight{0%{-webkit-transform:scale(1.5) translate(-10%,-10%);transform:scale(1.5) translate(-10%,-10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsDownRight{0%{-webkit-transform:scale(1.5) translate(-10%,-10%);transform:scale(1.5) translate(-10%,-10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsDown{-webkit-animation:kenburnsDown ease-out;animation:kenburnsDown ease-out}@-webkit-keyframes kenburnsDown{0%{-webkit-transform:scale(1.5) translate(0,-10%);transform:scale(1.5) translate(0,-10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsDown{0%{-webkit-transform:scale(1.5) translate(0,-10%);transform:scale(1.5) translate(0,-10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsLeft{-webkit-animation:kenburnsLeft ease-out;animation:kenburnsLeft ease-out}@-webkit-keyframes kenburnsLeft{0%{-webkit-transform:scale(1.5) translate(10%,0);transform:scale(1.5) translate(10%,0)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsLeft{0%{-webkit-transform:scale(1.5) translate(10%,0);transform:scale(1.5) translate(10%,0)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsRight{-webkit-animation:kenburnsRight ease-out;animation:kenburnsRight ease-out}@-webkit-keyframes kenburnsRight{0%{-webkit-transform:scale(1.5) translate(-10%,0);transform:scale(1.5) translate(-10%,0)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsRight{0%{-webkit-transform:scale(1.5) translate(-10%,0);transform:scale(1.5) translate(-10%,0)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsUpLeft{-webkit-animation:kenburnsUpLeft ease-out;animation:kenburnsUpLeft ease-out}@-webkit-keyframes kenburnsUpLeft{0%{-webkit-transform:scale(1.5) translate(10%,10%);transform:scale(1.5) translate(10%,10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsUpLeft{0%{-webkit-transform:scale(1.5) translate(10%,10%);transform:scale(1.5) translate(10%,10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsUpRight{-webkit-animation:kenburnsUpRight ease-out;animation:kenburnsUpRight ease-out}@-webkit-keyframes kenburnsUpRight{0%{-webkit-transform:scale(1.5) translate(-10%,10%);transform:scale(1.5) translate(-10%,10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsUpRight{0%{-webkit-transform:scale(1.5) translate(-10%,10%);transform:scale(1.5) translate(-10%,10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}.vegas-animation-kenburnsUp{-webkit-animation:kenburnsUp ease-out;animation:kenburnsUp ease-out}@-webkit-keyframes kenburnsUp{0%{-webkit-transform:scale(1.5) translate(0,10%);transform:scale(1.5) translate(0,10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes kenburnsUp{0%{-webkit-transform:scale(1.5) translate(0,10%);transform:scale(1.5) translate(0,10%)}100%{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}
@media all and (min-width: 476px) { .vegas-animation-kenburns { animation: kenburns ease; } @keyframes kenburns { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } }
@media all and (max-width: 475px) { .vegas-animation-kenburns { animation: kenburns ease; } @keyframes kenburns { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } }