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, 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, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } /** * @author Maciej Zasada maciejzsd@gmail.com */ .mobile, .tablet, .desktop, .large, .display-normal, .display-retina { display: none; } @media only screen and (max-width: 640px) { .mobile { display: block; } } @media only screen and (min-width: 641px) and (max-width: 1024px) { .tablet { display: block; } } @media only screen and (min-width: 1025px) { .desktop { display: block; } } @media only screen and (min-width: 1824px) { .large { display: block; } } .display-normal { display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .display-retina { display: block; } .display-normal { display: none; } } /** * @author Maciej Zasada maciejzsd@gmail.com */ /** * @author Maciej Zasada maciejzsd@gmail.com */ .mobile, .tablet, .desktop, .large, .display-normal, .display-retina { display: none; } @media only screen and (max-width: 640px) { .mobile { display: block; } } @media only screen and (min-width: 641px) and (max-width: 1024px) { .tablet { display: block; } } @media only screen and (min-width: 1025px) { .desktop { display: block; } } @media only screen and (min-width: 1824px) { .large { display: block; } } .display-normal { display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .display-retina { display: block; } .display-normal { display: none; } } @media only screen and (max-width: 640px) { .debug .device:after { content: 'mobile'; } } @media only screen and (min-width: 641px) and (max-width: 1024px) { .debug .device:after { content: 'tablet'; } } @media only screen and (min-width: 1025px) { .debug .device:after { content: 'desktop'; } } .debug .screen:after { content: 'normal'; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .debug .screen:after { content: 'retina'; } } /** * Hovers * @example * */ .hover.transition .out, .hover.transition .over { -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .hover .out { position: relative; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .hover .over { position: relative; margin-top: -100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .hover.onoff .over { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .hover:hover .out { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .hover:hover .over { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } /** * OnOff * @example * * * @example * */ .onoff.transition .on, .onoff.transition .off { -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .onoff .on { position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .onoff .off { position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .onoff.hover .on { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .onoff.on .on { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .onoff.on .off { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; opacity: 0 !important; } .onoff.on.hover .off, .onoff.on.hover .over { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .onoff.on.hover:hover .over { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .onoff.on.hover:hover .out { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } @font-face { font-family: 'gotham-bold'; src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bold.eot"); src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bold.eot#iefix") format("embedded-opentype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bold.woff") format("woff"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bold.ttf") format("truetype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bold.svg#brandon_grotesqueblack") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham-bolditalic'; src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bolditalic.eot"); src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bolditalic.eot#iefix") format("embedded-opentype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bolditalic.woff") format("woff"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bolditalic.ttf") format("truetype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bolditalic.svg#brandon_grotesqueblack") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham-book'; src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-book.eot"); src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-book.eot#iefix") format("embedded-opentype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-book.woff") format("woff"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-book.ttf") format("truetype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-book.svg#brandon_grotesqueblack") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham-bookitalic'; src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bookitalic.eot"); src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bookitalic.eot#iefix") format("embedded-opentype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bookitalic.woff") format("woff"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bookitalic.ttf") format("truetype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-bookitalic.svg#brandon_grotesqueblack") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham-light'; src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-light.eot"); src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-light.eot#iefix") format("embedded-opentype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-light.woff") format("woff"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-light.ttf") format("truetype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-light.svg#brandon_grotesqueblack") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham-lightitalic'; src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-lightitalic.eot"); src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-lightitalic.eot#iefix") format("embedded-opentype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-lightitalic.woff") format("woff"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-lightitalic.ttf") format("truetype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-lightitalic.svg#brandon_grotesqueblack") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham-medium'; src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-medium.eot"); src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-medium.eot#iefix") format("embedded-opentype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-medium.woff") format("woff"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-medium.ttf") format("truetype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-medium.svg#brandon_grotesqueblack") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham-mediumitalic'; src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-mediumitalic.eot"); src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-mediumitalic.eot#iefix") format("embedded-opentype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-mediumitalic.woff") format("woff"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-mediumitalic.ttf") format("truetype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/gotham-mediumitalic.svg#brandon_grotesqueblack") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'alternate-gothic'; src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/alternategothicno2bt-regular.eot"); src: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/alternategothicno2bt-regular.eot#iefix") format("embedded-opentype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/alternategothicno2bt-regular.woff") format("woff"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/alternategothicno2bt-regular.ttf") format("truetype"), url("/National_Library/20160521004321oe_/http://wearestillmarching.com/fonts/alternategothicno2bt-regular.svg#brandon_grotesqueblack") format("svg"); font-weight: normal; font-style: normal; } body { background-color: #20252b; overflow: hidden; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } #main, #layout, .content { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; } .content { background-image: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/drain_background_desktop_tablet.jpg"); background-size: 100% 100%; } button { background: none; border: none; cursor: pointer; } *:focus { outline: none; } .not-selectable, .not-selectable * { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .orange_line { width: 100%; height: 2px; background-color: #aa3825; } /***************************** * ELEMENT CENTERING *****************************/ /* The parent, can be of any width and height */ .blocked { text-align: center; /* The ghost, nudged for the parent to maintain perfect centering */ /* The element to be centered, can also be of any width and height */ } .blocked:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.5em; /* Adjusts for spacing */ } .blocked .centered { display: inline-block; vertical-align: middle; } /***************************** * ELEMENT GRID *****************************/ .row { width: auto; max-width: 100%; *zoom: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row:before, .row:after { display: table; line-height: 0; content: ""; } .row:after { clear: both; } .row > [class*="span-"] { float: left; display: block; position: relative; min-height: 1px; width: 100%; margin: 0; padding: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row > .span-12 { width: 100%; } .row > .span-11 { width: 91.66666%; } .row > .span-10 { width: 83.33333%; } .row > .span-9 { width: 75%; } .row > .span-8 { width: 66.66666%; } .row > .span-7 { width: 58.33333%; } .row > .span-6 { width: 50%; } .row > .span-5 { width: 41.66666%; } .row > .span-4 { width: 33.33333%; } .row > .span-3 { width: 25%; } .row > .span-2 { width: 16.66666%; } .row > .span-1 { width: 8.33333%; } .not-visible { display: none !important; } #flashGetUserMedia { position: absolute; top: 0; left: 0; z-index: 99999; } .lowerZ { z-index: 1000 !important; } #index { display: none; width: 100%; height: 100%; overflow: hidden; z-index: 9998; } #index h1 { color: red; } #index #slideshow { width: 100%; height: 100%; overflow: hidden; } #index #slideshow .slide { width: 100%; height: 100%; } #index .hideSlideshow { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } #index .showSlideshow { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } #index #transcript { position: absolute; overflow: visible; white-space: nowrap; bottom: 60px; color: white; font-family: gotham-light; font-size: 28px; height: 20px; width: auto; z-index: 9; background: #262e38; opacity: 0.8; padding-top: 10px; padding-bottom: 10px; height: 80px; } #index #transcript .transcript-controll-buttons { z-index: 13; position: relative; bottom: 68px; left: 10px; } #index #transcript #timeline { position: absolute; left: 0px; z-index: 11; cursor: pointer; bottom: -56px; } #index #transcript button { position: absolute; color: black; font-size: 20px; padding: 0; margin: 0; } #index #transcript button#play { display: none; } #index #transcript button#resume { display: none; } #index #transcript button:hover { color: #11557c; } #index #transcript:hover { cursor: pointer; } #index #transcript .gradient-wrapper { position: fixed; width: auto; height: 80px; left: 100px; right: 0px; z-index: 10; } #index #transcript .gradient { width: auto; height: 100%; z-index: 10; position: absolute; top: 0; overflow: hidden; left: 0px; right: 0px; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #262e38), color-stop(20%, rgba(38, 46, 56, 0)), color-stop(80%, rgba(38, 46, 56, 0)), color-stop(100%, #262e38)); background-image: -webkit-linear-gradient(left, #262e38 0%, rgba(38, 46, 56, 0) 20%, rgba(38, 46, 56, 0) 80%, #262e38 100%); background-image: -moz-linear-gradient(left, #262e38 0%, rgba(38, 46, 56, 0) 20%, rgba(38, 46, 56, 0) 80%, #262e38 100%); background-image: -o-linear-gradient(left, #262e38 0%, rgba(38, 46, 56, 0) 20%, rgba(38, 46, 56, 0) 80%, #262e38 100%); background-image: linear-gradient(left, #262e38 0%, rgba(38, 46, 56, 0) 20%, rgba(38, 46, 56, 0) 80%, #262e38 100%); } #index #transcript #transcript-wrapper { width: 100%; height: 100%; z-index: 9; overflow: hidden; margin-left: 100px; } #index #transcript #transcript-wrapper #copy_to_move { position: relative; left: -300px; overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; top: 30px; } #index #transcript #transcript_dragger { position: absolute; bottom: 0; background-color: red; opacity: 0; width: 100%; height: 100%; z-index: 11; } #index #full-transcript, #index #terms, #index #about, #index #credits, #index #credits_mobile { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; background-image: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/drain_background_desktop_tablet.jpg"); background-size: 100% 100%; color: white; z-index: 99999; display: none; font-family: gotham-light; } #index #full-transcript #transcript-close, #index #terms #transcript-close, #index #about #transcript-close, #index #credits #transcript-close, #index #credits_mobile #transcript-close, #index #full-transcript #terms #terms-close, #index #terms #full-transcript #terms-close, #index #terms #terms-close, #index #about #terms #terms-close, #index #terms #about #terms-close, #index #credits #terms #terms-close, #index #terms #credits #terms-close, #index #credits_mobile #terms #terms-close, #index #terms #credits_mobile #terms-close, #index #full-transcript #about #about-close, #index #about #full-transcript #about-close, #index #terms #about #about-close, #index #about #terms #about-close, #index #about #about-close, #index #credits #about #about-close, #index #about #credits #about-close, #index #credits_mobile #about #about-close, #index #about #credits_mobile #about-close, #index #full-transcript #credits #credits-close, #index #credits #full-transcript #credits-close, #index #terms #credits #credits-close, #index #credits #terms #credits-close, #index #about #credits #credits-close, #index #credits #about #credits-close, #index #credits #credits-close, #index #credits_mobile #credits #credits-close, #index #credits #credits_mobile #credits-close, #index #full-transcript #credits_mobile #credits-close, #index #credits_mobile #full-transcript #credits-close, #index #terms #credits_mobile #credits-close, #index #credits_mobile #terms #credits-close, #index #about #credits_mobile #credits-close, #index #credits_mobile #about #credits-close, #index #credits #credits_mobile #credits-close, #index #credits_mobile #credits #credits-close, #index #credits_mobile #credits-close, #index #full-transcript #credits #credits_mobile #credits-close_mobile, #index #credits #credits_mobile #full-transcript #credits-close_mobile, #index #terms #credits #credits_mobile #credits-close_mobile, #index #credits #credits_mobile #terms #credits-close_mobile, #index #about #credits #credits_mobile #credits-close_mobile, #index #credits #credits_mobile #about #credits-close_mobile, #index #credits #credits_mobile #credits-close_mobile, #index #credits #credits_mobile #credits-close_mobile, #index #full-transcript #credits_mobile #credits #credits-close_mobile, #index #credits_mobile #credits #full-transcript #credits-close_mobile, #index #terms #credits_mobile #credits #credits-close_mobile, #index #credits_mobile #credits #terms #credits-close_mobile, #index #about #credits_mobile #credits #credits-close_mobile, #index #credits_mobile #credits #about #credits-close_mobile, #index #credits_mobile #credits #credits-close_mobile, #index #credits_mobile #credits #credits-close_mobile, #index #full-transcript #credits_mobile #credits-close_mobile, #index #credits_mobile #full-transcript #credits-close_mobile, #index #terms #credits_mobile #credits-close_mobile, #index #credits_mobile #terms #credits-close_mobile, #index #about #credits_mobile #credits-close_mobile, #index #credits_mobile #about #credits-close_mobile, #index #credits #credits_mobile #credits-close_mobile, #index #credits_mobile #credits #credits-close_mobile, #index #credits_mobile #credits-close_mobile { position: fixed; top: 15px; right: 15px; color: black; } #index #full-transcript h2, #index #terms h2, #index #about h2, #index #credits h2, #index #credits_mobile h2 { margin-top: 50px; margin-bottom: 20px; text-align: center; font-size: 54px; text-transform: uppercase; font-family: alternate-gothic; letter-spacing: 4px; } #index #full-transcript h3, #index #terms h3, #index #about h3, #index #credits h3, #index #credits_mobile h3 { text-align: center; font-family: gotham-book; font-size: 14px; text-transform: uppercase; color: #cfcfcf; margin-bottom: 50px; } #index #full-transcript .transcript-wrapper, #index #terms .transcript-wrapper, #index #about .transcript-wrapper, #index #credits .transcript-wrapper, #index #credits_mobile .transcript-wrapper, #index #full-transcript #terms .terms-wrapper, #index #terms #full-transcript .terms-wrapper, #index #terms .terms-wrapper, #index #about #terms .terms-wrapper, #index #terms #about .terms-wrapper, #index #credits #terms .terms-wrapper, #index #terms #credits .terms-wrapper, #index #credits_mobile #terms .terms-wrapper, #index #terms #credits_mobile .terms-wrapper, #index #full-transcript #about .about-wrapper, #index #about #full-transcript .about-wrapper, #index #terms #about .about-wrapper, #index #about #terms .about-wrapper, #index #about .about-wrapper, #index #credits #about .about-wrapper, #index #about #credits .about-wrapper, #index #credits_mobile #about .about-wrapper, #index #about #credits_mobile .about-wrapper { width: 650px; margin: 0 auto 35px; margin-top: 35px; font-family: gotham-book; font-size: 14px; line-height: 22px; color: white; text-align: justify; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #index #full-transcript .transcript-wrapper p, #index #terms .transcript-wrapper p, #index #about .transcript-wrapper p, #index #credits .transcript-wrapper p, #index #credits_mobile .transcript-wrapper p, #index #full-transcript #terms .terms-wrapper p, #index #terms #full-transcript .terms-wrapper p, #index #terms .terms-wrapper p, #index #about #terms .terms-wrapper p, #index #terms #about .terms-wrapper p, #index #credits #terms .terms-wrapper p, #index #terms #credits .terms-wrapper p, #index #credits_mobile #terms .terms-wrapper p, #index #terms #credits_mobile .terms-wrapper p, #index #full-transcript #about .about-wrapper p, #index #about #full-transcript .about-wrapper p, #index #terms #about .about-wrapper p, #index #about #terms .about-wrapper p, #index #about .about-wrapper p, #index #credits #about .about-wrapper p, #index #about #credits .about-wrapper p, #index #credits_mobile #about .about-wrapper p, #index #about #credits_mobile .about-wrapper p { margin-top: 40px; } } @media screen and (device-aspect-ratio: 40 / 71) { #index #full-transcript .transcript-wrapper p, #index #terms .transcript-wrapper p, #index #about .transcript-wrapper p, #index #credits .transcript-wrapper p, #index #credits_mobile .transcript-wrapper p, #index #full-transcript #terms .terms-wrapper p, #index #terms #full-transcript .terms-wrapper p, #index #terms .terms-wrapper p, #index #about #terms .terms-wrapper p, #index #terms #about .terms-wrapper p, #index #credits #terms .terms-wrapper p, #index #terms #credits .terms-wrapper p, #index #credits_mobile #terms .terms-wrapper p, #index #terms #credits_mobile .terms-wrapper p, #index #full-transcript #about .about-wrapper p, #index #about #full-transcript .about-wrapper p, #index #terms #about .about-wrapper p, #index #about #terms .about-wrapper p, #index #about .about-wrapper p, #index #credits #about .about-wrapper p, #index #about #credits .about-wrapper p, #index #credits_mobile #about .about-wrapper p, #index #about #credits_mobile .about-wrapper p { /* iPhone 5 only */ margin-top: 40px; } } #index #full-transcript .transcript-wrapper-shadow, #index #terms .transcript-wrapper-shadow, #index #about .transcript-wrapper-shadow, #index #credits .transcript-wrapper-shadow, #index #credits_mobile .transcript-wrapper-shadow, #index #full-transcript #terms .terms-wrapper-shadow, #index #terms #full-transcript .terms-wrapper-shadow, #index #terms .terms-wrapper-shadow, #index #about #terms .terms-wrapper-shadow, #index #terms #about .terms-wrapper-shadow, #index #credits #terms .terms-wrapper-shadow, #index #terms #credits .terms-wrapper-shadow, #index #credits_mobile #terms .terms-wrapper-shadow, #index #terms #credits_mobile .terms-wrapper-shadow, #index #full-transcript #about .about-wrapper-shadow, #index #about #full-transcript .about-wrapper-shadow, #index #terms #about .about-wrapper-shadow, #index #about #terms .about-wrapper-shadow, #index #about .about-wrapper-shadow, #index #credits #about .about-wrapper-shadow, #index #about #credits .about-wrapper-shadow, #index #credits_mobile #about .about-wrapper-shadow, #index #about #credits_mobile .about-wrapper-shadow, #index #full-transcript #credits .credits-wrapper-shadow, #index #credits #full-transcript .credits-wrapper-shadow, #index #terms #credits .credits-wrapper-shadow, #index #credits #terms .credits-wrapper-shadow, #index #about #credits .credits-wrapper-shadow, #index #credits #about .credits-wrapper-shadow, #index #credits .credits-wrapper-shadow, #index #credits_mobile #credits .credits-wrapper-shadow, #index #credits #credits_mobile .credits-wrapper-shadow, #index #full-transcript #credits_mobile .credits-wrapper-shadow, #index #credits_mobile #full-transcript .credits-wrapper-shadow, #index #terms #credits_mobile .credits-wrapper-shadow, #index #credits_mobile #terms .credits-wrapper-shadow, #index #about #credits_mobile .credits-wrapper-shadow, #index #credits_mobile #about .credits-wrapper-shadow, #index #credits #credits_mobile .credits-wrapper-shadow, #index #credits_mobile #credits .credits-wrapper-shadow, #index #credits_mobile .credits-wrapper-shadow { position: fixed; bottom: 0; left: 0; width: 100%; height: 70px; -webkit-box-shadow: inset 0 -35px 70px -20px #262e38; -moz-box-shadow: inset 0 -35px 70px -20px #262e38; box-shadow: inset 0 -35px 70px -20px #262e38; } #index #full-transcript .short_line, #index #terms .short_line, #index #about .short_line, #index #credits .short_line, #index #credits_mobile .short_line { position: relative; width: 650px; margin: 0 auto; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #index #full-transcript .short_line, #index #terms .short_line, #index #about .short_line, #index #credits .short_line, #index #credits_mobile .short_line { position: absolute !important; width: auto !important; left: 40px; right: 40px; } } @media screen and (device-aspect-ratio: 40 / 71) { #index #full-transcript .short_line, #index #terms .short_line, #index #about .short_line, #index #credits .short_line, #index #credits_mobile .short_line { /* iPhone 5 only */ position: absolute !important; width: auto !important; left: 40px; right: 40px; } } #index #terms h3 { margin-bottom: 0; font-family: gotham-bold; font-size: 18px; text-align: left; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #index #terms h3 { margin-left: 0px !important; } } @media screen and (device-aspect-ratio: 40 / 71) { #index #terms h3 { /* iPhone 5 only */ margin-left: 0px !important; } } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #index #terms p { text-align: left; font-size: 12px; } } @media screen and (device-aspect-ratio: 40 / 71) { #index #terms p { /* iPhone 5 only */ text-align: left; font-size: 12px; } } #index #terms .bold { font-family: gotham-bold; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #index #terms .bold { font-size: 12px; } } @media screen and (device-aspect-ratio: 40 / 71) { #index #terms .bold { /* iPhone 5 only */ font-size: 12px; } } #index #terms .iOSp { font-size: 6px !important; line-height: 11px !important; } #index #credits .credits_content h2, #index #credits_mobile .credits_content h2 { font-family: alternate-gothic; font-size: 54px; color: white; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #index #credits .credits_content h2, #index #credits_mobile .credits_content h2, #index #credits .credits_content #full-transcript h3, #index #full-transcript #credits .credits_content h3, #index #credits_mobile .credits_content #full-transcript h3, #index #full-transcript #credits_mobile .credits_content h3, #index #credits .credits_content #terms h3, #index #terms #credits .credits_content h3, #index #credits_mobile .credits_content #terms h3, #index #terms #credits_mobile .credits_content h3, #index #credits .credits_content #about h3, #index #about #credits .credits_content h3, #index #credits_mobile .credits_content #about h3, #index #about #credits_mobile .credits_content h3, #index #credits .credits_content h3, #index #credits_mobile .credits_content #credits h3, #index #credits #credits_mobile .credits_content h3, #index #credits .credits_content #credits_mobile h3, #index #credits_mobile #credits .credits_content h3, #index #credits_mobile .credits_content h3 { font-size: 35px; } } @media screen and (device-aspect-ratio: 40 / 71) { #index #credits .credits_content h2, #index #credits_mobile .credits_content h2, #index #credits .credits_content #full-transcript h3, #index #full-transcript #credits .credits_content h3, #index #credits_mobile .credits_content #full-transcript h3, #index #full-transcript #credits_mobile .credits_content h3, #index #credits .credits_content #terms h3, #index #terms #credits .credits_content h3, #index #credits_mobile .credits_content #terms h3, #index #terms #credits_mobile .credits_content h3, #index #credits .credits_content #about h3, #index #about #credits .credits_content h3, #index #credits_mobile .credits_content #about h3, #index #about #credits_mobile .credits_content h3, #index #credits .credits_content h3, #index #credits_mobile .credits_content #credits h3, #index #credits #credits_mobile .credits_content h3, #index #credits .credits_content #credits_mobile h3, #index #credits_mobile #credits .credits_content h3, #index #credits_mobile .credits_content h3 { /* iPhone 5 only */ font-size: 35px; } } #index #credits .credits_content h3, #index #credits_mobile .credits_content h3 { font-family: gotham-light; font-size: 18px; border-bottom: 1px solid red; padding-bottom: 30px; color: white; text-transform: none; width: 500px; margin: 0 auto 40px auto; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #index #credits .credits_content h3, #index #credits_mobile .credits_content h3 { font-size: 14px; } } @media screen and (device-aspect-ratio: 40 / 71) { #index #credits .credits_content h3, #index #credits_mobile .credits_content h3 { /* iPhone 5 only */ font-size: 14px; } } #index #credits .credits_content h4, #index #credits_mobile .credits_content h4 { font-family: alternate-gothic; font-size: 25px; text-transform: uppercase; margin-bottom: 25px; text-align: center; letter-spacing: 2.5px; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #index #credits .credits_content h4, #index #credits_mobile .credits_content h4 { font-size: 20px; } } @media screen and (device-aspect-ratio: 40 / 71) { #index #credits .credits_content h4, #index #credits_mobile .credits_content h4 { /* iPhone 5 only */ font-size: 20px; } } #index #credits .credits_content ul li, #index #credits_mobile .credits_content ul li { float: left; margin-left: 40px; margin-bottom: 5px; font-size: 15px; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #index #credits .credits_content ul li, #index #credits_mobile .credits_content ul li { margin-left: 10px; } } @media screen and (device-aspect-ratio: 40 / 71) { #index #credits .credits_content ul li, #index #credits_mobile .credits_content ul li { /* iPhone 5 only */ margin-left: 10px; } } #index #credits .credits_content .company, #index #credits_mobile .credits_content .company { width: 925px; overflow: hidden; margin: 0 auto; font-family: gotham-book !important; } #index #credits .credits_content .company div, #index #credits_mobile .credits_content .company div { float: left; text-align: center; } #index #credits .credits_content .company ul, #index #credits_mobile .credits_content .company ul { float: left; } #index #credits .credits_content #organic, #index #credits_mobile .credits_content #organic, #index #credits .credits_content #unit9, #index #credits_mobile #credits .credits_content #unit9, #index #credits #credits_mobile .credits_content #unit9, #index #credits #credits_mobile .credits_content #unit9, #index #credits_mobile #credits .credits_content #unit9, #index #credits_mobile .credits_content #unit9, #index #credits .credits_content #credits_mobile #unit9_mobile, #index #credits_mobile #credits .credits_content #credits_mobile #unit9_mobile, #index #credits #credits_mobile .credits_content #credits_mobile #unit9_mobile, #index #credits_mobile #credits .credits_content #unit9_mobile, #index #credits_mobile #credits .credits_content #unit9_mobile, #index #credits #credits_mobile .credits_content #unit9_mobile, #index #credits_mobile #credits .credits_content #unit9_mobile, #index #credits_mobile .credits_content #unit9_mobile, #index #credits .credits_content #credits_mobile #organic_mobile, #index #credits_mobile #credits .credits_content #organic_mobile, #index #credits_mobile .credits_content #organic_mobile { width: 990px; } #index #credits .credits_content #organic li, #index #credits_mobile .credits_content #organic li, #index #credits .credits_content #unit9 li, #index #credits_mobile #credits .credits_content #unit9 li, #index #credits #credits_mobile .credits_content #unit9 li, #index #credits #credits_mobile .credits_content #unit9 li, #index #credits_mobile #credits .credits_content #unit9 li, #index #credits_mobile .credits_content #unit9 li, #index #credits .credits_content #credits_mobile #unit9_mobile li, #index #credits_mobile #credits .credits_content #credits_mobile #unit9_mobile li, #index #credits #credits_mobile .credits_content #credits_mobile #unit9_mobile li, #index #credits_mobile #credits .credits_content #unit9_mobile li, #index #credits_mobile #credits .credits_content #unit9_mobile li, #index #credits #credits_mobile .credits_content #unit9_mobile li, #index #credits_mobile #credits .credits_content #unit9_mobile li, #index #credits_mobile .credits_content #unit9_mobile li, #index #credits .credits_content #credits_mobile #organic_mobile li, #index #credits_mobile #credits .credits_content #organic_mobile li, #index #credits_mobile .credits_content #organic_mobile li { float: none; } #index #credits .credits_content #unit9, #index #credits_mobile .credits_content #unit9, #index #credits .credits_content #credits_mobile #unit9_mobile, #index #credits_mobile #credits .credits_content #unit9_mobile, #index #credits_mobile .credits_content #unit9_mobile { width: 920px; } #index #credits .credits_content #national-park, #index #credits_mobile .credits_content #national-park, #index #credits .credits_content #credits_mobile #national-park_mobile, #index #credits_mobile #credits .credits_content #national-park_mobile, #index #credits_mobile .credits_content #national-park_mobile { width: 770px; } #index #credits .credits_content #national-park ul, #index #credits_mobile .credits_content #national-park ul, #index #credits .credits_content #credits_mobile #national-park_mobile ul, #index #credits_mobile #credits .credits_content #national-park_mobile ul, #index #credits_mobile .credits_content #national-park_mobile ul { width: 770px; } #index #credits .credits_content #national-park li, #index #credits_mobile .credits_content #national-park li, #index #credits .credits_content #credits_mobile #national-park_mobile li, #index #credits_mobile #credits .credits_content #national-park_mobile li, #index #credits_mobile .credits_content #national-park_mobile li { float: none !important; } #index #credits .credits_content #nationF1, #index #credits_mobile .credits_content #nationF1 { width: 770px; } #index #credits .credits_content #nationF1 ul, #index #credits_mobile .credits_content #nationF1 ul { width: 732px; } #index #credits .credits_content #nationF, #index #credits_mobile .credits_content #nationF { margin-top: 20px; width: 785px; } #index #credits .credits_content #nationF ul, #index #credits_mobile .credits_content #nationF ul { width: 732px; } #index #credits .credits_content #nationF li, #index #credits_mobile .credits_content #nationF li { float: none !important; } #index #credits .credits_content #google, #index #credits_mobile .credits_content #google, #index #credits .credits_content #credits_mobile #google_mobile, #index #credits_mobile #credits .credits_content #google_mobile, #index #credits_mobile .credits_content #google_mobile { width: 890px; } #index #credits .credits_content #photographers, #index #credits_mobile .credits_content #photographers { width: 650px; } #index #credits .credits_content #content, #index #credits_mobile .credits_content #content { width: 991px; } #index #credits .credits_content #thanks, #index #credits_mobile .credits_content #thanks { width: 770px; } #index #credits .credits_content #thanks ul, #index #credits_mobile .credits_content #thanks ul { text-align: center; width: 732px; } #index #credits .credits_content #thanks ul li, #index #credits_mobile .credits_content #thanks ul li { float: none; } #index #credits .credits_content .separateLine, #index #credits_mobile .credits_content .separateLine, #index #credits .credits_content #credits_mobile .separateLine_mobile, #index #credits_mobile #credits .credits_content .separateLine_mobile, #index #credits_mobile .credits_content .separateLine_mobile { height: 1px; background-color: #9a9ca0; margin: 20px auto; } #index #credits .credits_content .separateLine.line1, #index #credits_mobile .credits_content .separateLine.line1, #index #credits .credits_content #credits_mobile .line1.separateLine_mobile, #index #credits_mobile #credits .credits_content .line1.separateLine_mobile, #index #credits_mobile .credits_content .line1.separateLine_mobile { width: 930px; } #index #credits .credits_content .separateLine.line2, #index #credits_mobile .credits_content .separateLine.line2, #index #credits .credits_content #credits_mobile .line2.separateLine_mobile, #index #credits_mobile #credits .credits_content .line2.separateLine_mobile, #index #credits_mobile .credits_content .line2.separateLine_mobile { width: 570px; } #index #credits .credits_content .separateLine.line3, #index #credits_mobile .credits_content .separateLine.line3, #index #credits .credits_content #credits_mobile .line3.separateLine_mobile, #index #credits_mobile #credits .credits_content .line3.separateLine_mobile, #index #credits_mobile .credits_content .line3.separateLine_mobile { width: 540px; } #index #credits_mobile { -webkit-text-size-adjust: none !important; } #index #credits_mobile li { float: none; } #index #credits_mobile #national-park_mobile { width: 335px !important; } #index #credits_mobile #national-park_mobile ul { width: 315px !important; text-align: center; } #index #credits_mobile #national_park_fun { text-align: center; width: 244px !important; } #index #credits_mobile #national_park_fun ul { text-align: center; width: 225px; } #index #credits_mobile #national_park_fun ul li { float: none !important; } #index #credits_mobile #organic_mobile { width: 445px !important; } #index #credits_mobile #unit9_mobile { width: 500px !important; } #index #credits_mobile #national-park_mobile ul { width: 335px; text-align: center; } #index #credits_mobile #google_mobile { width: 485px !important; } #index #credits_mobile #google_mobile li { float: left !important; } #index #credits_mobile #photographers_mobile { width: 515px !important; } #index #credits_mobile #content_mobile { width: 400px !important; } #index #credits_mobile #thanks_mobile { width: 400px !important; } #index #credits_mobile #thanks_mobile ul { text-align: center; width: 400px !important; } #index #credits_mobile #thanks_mobile li { float: none !important; } #index #credits_mobile .separateLine_mobile.line0 { width: 320px !important; } #index #credits_mobile .separateLine_mobile.line1 { width: 460px !important; } #index #credits_mobile .separateLine_mobile.line2 { width: 460px !important; } #index #credits_mobile .separateLine_mobile.line3 { width: 460px !important; } #index .timer-wrapper { position: absolute; margin-top: 10px; display: block; text-align: center; color: white; text-transform: uppercase; width: 100%; bottom: 130px; z-index: 9; } #index .timer-wrapper #date { font-size: 14px; font-family: gotham-medium; letter-spacing: 3px; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #index #full-transcript h2, #index #terms h2, #index #about h2, #index #credits h2, #index #credits_mobile h2, #index #full-transcript h3, #index #terms #full-transcript h3, #index #full-transcript #terms h3, #index #about #full-transcript h3, #index #full-transcript #about h3, #index #credits #full-transcript h3, #index #full-transcript #credits h3, #index #credits_mobile #full-transcript h3, #index #full-transcript #credits_mobile h3, #index #full-transcript #terms h3, #index #terms #full-transcript h3, #index #terms h3, #index #about #terms h3, #index #terms #about h3, #index #credits #terms h3, #index #terms #credits h3, #index #credits_mobile #terms h3, #index #terms #credits_mobile h3, #index #full-transcript #about h3, #index #about #full-transcript h3, #index #terms #about h3, #index #about #terms h3, #index #about h3, #index #credits #about h3, #index #about #credits h3, #index #credits_mobile #about h3, #index #about #credits_mobile h3, #index #full-transcript #credits h3, #index #credits #full-transcript h3, #index #terms #credits h3, #index #credits #terms h3, #index #about #credits h3, #index #credits #about h3, #index #credits h3, #index #credits_mobile #credits h3, #index #credits #credits_mobile h3, #index #full-transcript #credits_mobile h3, #index #credits_mobile #full-transcript h3, #index #terms #credits_mobile h3, #index #credits_mobile #terms h3, #index #about #credits_mobile h3, #index #credits_mobile #about h3, #index #credits #credits_mobile h3, #index #credits_mobile #credits h3, #index #credits_mobile h3 { margin-left: 35px; margin-right: 35px; margin-bottom: 20px; font-size: 34px; } #index #full-transcript h3, #index #terms h3, #index #about h3, #index #credits h3, #index #credits_mobile h3 { font-size: 10px; margin-bottom: 20px; } #index #full-transcript .transcript-wrapper, #index #terms .transcript-wrapper, #index #about .transcript-wrapper, #index #credits .transcript-wrapper, #index #credits_mobile .transcript-wrapper, #index #full-transcript #terms .terms-wrapper, #index #terms #full-transcript .terms-wrapper, #index #terms .terms-wrapper, #index #about #terms .terms-wrapper, #index #terms #about .terms-wrapper, #index #credits #terms .terms-wrapper, #index #terms #credits .terms-wrapper, #index #credits_mobile #terms .terms-wrapper, #index #terms #credits_mobile .terms-wrapper, #index #full-transcript #about .about-wrapper, #index #about #full-transcript .about-wrapper, #index #terms #about .about-wrapper, #index #about #terms .about-wrapper, #index #about .about-wrapper, #index #credits #about .about-wrapper, #index #about #credits .about-wrapper, #index #credits_mobile #about .about-wrapper, #index #about #credits_mobile .about-wrapper { width: auto; margin: 20px 40px; font-size: 11px; line-height: 16px; } #index .timer-wrapper { bottom: 80px; margin: 0; } #index .timer-wrapper #date, #index .timer-wrapper #time_show { font-size: 10px; letter-spacing: 1px; } #index .transcript-controll-buttons { position: relative; bottom: 0px !important; left: 7px !important; } #index #timeline { left: 0px !important; bottom: 5px !important; } #index #transcript { height: 42px; bottom: 42px; font-size: 16px; } #index #transcript span { top: 19px !important; } #index #transcript button { bottom: 5px; } #index #transcript #transcript-wrapper { margin-left: 50px; } #index #transcript .gradient { background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #262e38), color-stop(10%, rgba(38, 46, 56, 0)), color-stop(90%, rgba(38, 46, 56, 0)), color-stop(100%, #262e38)); background-image: -webkit-linear-gradient(left, #262e38 0%, rgba(38, 46, 56, 0) 10%, rgba(38, 46, 56, 0) 90%, #262e38 100%); background-image: -moz-linear-gradient(left, #262e38 0%, rgba(38, 46, 56, 0) 10%, rgba(38, 46, 56, 0) 90%, #262e38 100%); background-image: -o-linear-gradient(left, #262e38 0%, rgba(38, 46, 56, 0) 10%, rgba(38, 46, 56, 0) 90%, #262e38 100%); background-image: linear-gradient(left, #262e38 0%, rgba(38, 46, 56, 0) 10%, rgba(38, 46, 56, 0) 90%, #262e38 100%); } #index #transcript .gradient-wrapper { left: 50px; height: 42px; } } @media screen and (device-aspect-ratio: 40 / 71) { #index { /* iPhone 5 only */ } #index #full-transcript h2, #index #terms h2, #index #about h2, #index #credits h2, #index #credits_mobile h2, #index #full-transcript h3, #index #terms #full-transcript h3, #index #full-transcript #terms h3, #index #about #full-transcript h3, #index #full-transcript #about h3, #index #credits #full-transcript h3, #index #full-transcript #credits h3, #index #credits_mobile #full-transcript h3, #index #full-transcript #credits_mobile h3, #index #full-transcript #terms h3, #index #terms #full-transcript h3, #index #terms h3, #index #about #terms h3, #index #terms #about h3, #index #credits #terms h3, #index #terms #credits h3, #index #credits_mobile #terms h3, #index #terms #credits_mobile h3, #index #full-transcript #about h3, #index #about #full-transcript h3, #index #terms #about h3, #index #about #terms h3, #index #about h3, #index #credits #about h3, #index #about #credits h3, #index #credits_mobile #about h3, #index #about #credits_mobile h3, #index #full-transcript #credits h3, #index #credits #full-transcript h3, #index #terms #credits h3, #index #credits #terms h3, #index #about #credits h3, #index #credits #about h3, #index #credits h3, #index #credits_mobile #credits h3, #index #credits #credits_mobile h3, #index #full-transcript #credits_mobile h3, #index #credits_mobile #full-transcript h3, #index #terms #credits_mobile h3, #index #credits_mobile #terms h3, #index #about #credits_mobile h3, #index #credits_mobile #about h3, #index #credits #credits_mobile h3, #index #credits_mobile #credits h3, #index #credits_mobile h3 { margin-left: 35px; margin-right: 35px; margin-bottom: 20px; font-size: 34px; } #index #full-transcript h3, #index #terms h3, #index #about h3, #index #credits h3, #index #credits_mobile h3 { font-size: 10px; margin-bottom: 20px; } #index #full-transcript .transcript-wrapper, #index #terms .transcript-wrapper, #index #about .transcript-wrapper, #index #credits .transcript-wrapper, #index #credits_mobile .transcript-wrapper, #index #full-transcript #terms .terms-wrapper, #index #terms #full-transcript .terms-wrapper, #index #terms .terms-wrapper, #index #about #terms .terms-wrapper, #index #terms #about .terms-wrapper, #index #credits #terms .terms-wrapper, #index #terms #credits .terms-wrapper, #index #credits_mobile #terms .terms-wrapper, #index #terms #credits_mobile .terms-wrapper, #index #full-transcript #about .about-wrapper, #index #about #full-transcript .about-wrapper, #index #terms #about .about-wrapper, #index #about #terms .about-wrapper, #index #about .about-wrapper, #index #credits #about .about-wrapper, #index #about #credits .about-wrapper, #index #credits_mobile #about .about-wrapper, #index #about #credits_mobile .about-wrapper { width: auto; margin: 20px 40px; font-size: 11px; line-height: 16px; } #index .timer-wrapper { bottom: 80px; margin: 0; } #index .timer-wrapper #date, #index .timer-wrapper #time_show { font-size: 10px; letter-spacing: 1px; } #index .transcript-controll-buttons { position: relative; bottom: 0px !important; left: 7px !important; } #index #timeline { left: 0px !important; bottom: 5px !important; } #index #transcript { height: 42px; bottom: 42px; font-size: 16px; } #index #transcript span { top: 19px !important; } #index #transcript button { bottom: 5px; } #index #transcript #transcript-wrapper { margin-left: 50px; } #index #transcript .gradient { background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #262e38), color-stop(10%, rgba(38, 46, 56, 0)), color-stop(90%, rgba(38, 46, 56, 0)), color-stop(100%, #262e38)); background-image: -webkit-linear-gradient(left, #262e38 0%, rgba(38, 46, 56, 0) 10%, rgba(38, 46, 56, 0) 90%, #262e38 100%); background-image: -moz-linear-gradient(left, #262e38 0%, rgba(38, 46, 56, 0) 10%, rgba(38, 46, 56, 0) 90%, #262e38 100%); background-image: -o-linear-gradient(left, #262e38 0%, rgba(38, 46, 56, 0) 10%, rgba(38, 46, 56, 0) 90%, #262e38 100%); background-image: linear-gradient(left, #262e38 0%, rgba(38, 46, 56, 0) 10%, rgba(38, 46, 56, 0) 90%, #262e38 100%); } #index #transcript .gradient-wrapper { left: 50px; height: 42px; } } #index .index_overlay { position: absolute; top: 0; left: 0; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; z-index: 9999; width: 100%; height: 100%; cursor: pointer; } #index .transcript-prompt-wrapper { cursor: pointer; } #index .transcript-prompt { margin: 0 auto; margin-top: 25px; color: white; font-size: 18px; font-family: gotham-light; z-index: 9999; width: 500px; position: relative; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #index .transcript-prompt { margin-top: 9px; } } @media screen and (device-aspect-ratio: 40 / 71) { #index .transcript-prompt { /* iPhone 5 only */ margin-top: 9px; } } #index .transcript-prompt .move_transcript { float: left; margin-right: 40px; } #index .transcript-prompt p { float: left; margin-top: 15px; } #index .transcript-prompt span { font-family: gotham-medium; } #index .transcript-prompt-background { position: absolute; bottom: 60px; width: 100%; height: 100px; z-index: 9999; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #index .transcript-prompt-background { bottom: 42px; height: 62px; } } @media screen and (device-aspect-ratio: 40 / 71) { #index .transcript-prompt-background { /* iPhone 5 only */ bottom: 42px; height: 62px; } } #index .transcript-prompt-background .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; background-color: black; } .preloaderSS { width: 70px; height: 70px; position: absolute; top: 50%; left: 50%; margin: -35px 0 0 -35px; opacity: 0; background-image: url(/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/individualLoader.png); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; -webkit-animation: rotating 2s linear infinite; -moz-animation: rotating 2s linear infinite; -ms-animation: rotating 2s linear infinite; -o-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; } .preloaderSS.show { opacity: 1; } @-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-ms-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-o-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } #preloader { position: absolute; width: 100%; height: 100%; background-color: #5dc6b3; color: white; } #preloader h2 { position: relative; font-size: 18px; text-align: center; text-transform: uppercase; padding-bottom: 20px; font-family: gotham-book; } #preloader h1 { position: relative; font-size: 65px; text-align: center; text-transform: uppercase; font-family: alternate-gothic; letter-spacing: 6px; } #preloader #intro { position: relative; left: 50%; margin-left: -200px; margin-top: 20px; width: 400px; text-align: center; } #preloader button { position: relative; display: block; margin: 0 auto; color: white; text-transform: uppercase; font-size: 18px; } #preloader button:hover { color: white; } #preloader #loader_progrees { width: 1%; margin-top: 20px; margin-bottom: 60px; border: none; border-bottom: 2px solid #4d525b; -webkit-transition: width 0.3s ease-in; -moz-transition: width 0.3s ease-in; -o-transition: width 0.3s ease-in; transition: width 0.3s ease-in; } #preloader #loader_overlay, #preloader #background { position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; background: black no-repeat bottom center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #preloader #loader_overlay { opacity: 1; background-image: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/preloader_background_overlay_desktop_tablet.jpg"); -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; -o-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; } #preloader #background { background-image: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/preloader_background_desktop_tablet.jpg"); } #preloader #start { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s ease-in; -webkit-transition-delay: 0.3s; -moz-transition: opacity 0.3s ease-in 0.3s; -o-transition: opacity 0.3s ease-in 0.3s; transition: opacity 0.3s ease-in 0.3s; } #preloader #explore { display: none; width: 200px; font-size: 14px; background-color: #5dc6b3; } #preloader .wrapper { display: block; position: relative; height: 100%; } #preloader .wrapper .centered { margin-bottom: 20%; } #preloader.complete #loader_progrees { width: 100% !important; border-color: #ea3d1d; } #preloader.complete #loader_overlay { opacity: 0 !important; } #preloader.complete #start { opacity: 1; visibility: visible; } @media only screen and (min-width: 641px) and (max-width: 1024px) and (orientation: portrait), only screen and (min-width: 641px) and (max-width: 1024px) and (orientation: landscape) { #preloader h2 { font-size: 16px; } #preloader h1 { font-size: 44px; } #preloader #background { background-image: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/preloader_background_mobile.jpg"); } #preloader #loader_progrees { margin-bottom: 40px; } } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #preloader h2, #preloader #index #full-transcript h3, #index #full-transcript #preloader h3, #preloader #index #terms h3, #index #terms #preloader h3, #preloader #index #about h3, #index #about #preloader h3, #preloader #index #credits h3, #index #credits #preloader h3, #preloader #index #credits_mobile h3, #index #credits_mobile #preloader h3 { font-size: 11px; } #preloader h1 { font-size: 22px; } #preloader #loader_overlay { background-image: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/preloader_background_overlay_mobile.jpg"); } #preloader #loader_progrees { margin-bottom: 20px; } } @media screen and (device-aspect-ratio: 40 / 71) { #preloader { /* iPhone 5 only */ } #preloader h2, #preloader #index #full-transcript h3, #index #full-transcript #preloader h3, #preloader #index #terms h3, #index #terms #preloader h3, #preloader #index #about h3, #index #about #preloader h3, #preloader #index #credits h3, #index #credits #preloader h3, #preloader #index #credits_mobile h3, #index #credits_mobile #preloader h3 { font-size: 11px; } #preloader h1 { font-size: 22px; } #preloader #loader_overlay { background-image: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/preloader_background_overlay_mobile.jpg"); } #preloader #loader_progrees { margin-bottom: 20px; } } #preloader #mute { position: absolute; right: 5px; bottom: 5px; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #preloader #mute { bottom: 5px; } } @media screen and (device-aspect-ratio: 40 / 71) { #preloader #mute { /* iPhone 5 only */ bottom: 5px; } } #preloader #un-mute { position: absolute; right: 5px; bottom: 5px; display: none; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #preloader #un-mute { bottom: 5px; } } @media screen and (device-aspect-ratio: 40 / 71) { #preloader #un-mute { /* iPhone 5 only */ bottom: 5px; } } #preloader #chrome_experiment_icon { position: absolute; left: 20px; bottom: 70px; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #preloader #chrome_experiment_icon { left: 10px; bottom: 40px; } } @media screen and (device-aspect-ratio: 40 / 71) { #preloader #chrome_experiment_icon { /* iPhone 5 only */ left: 10px; bottom: 40px; } } #preloader #chrome_experiment_icon1 { position: absolute; left: 20px; bottom: 160px; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #preloader #chrome_experiment_icon1 { left: 10px; bottom: 80px; } } @media screen and (device-aspect-ratio: 40 / 71) { #preloader #chrome_experiment_icon1 { /* iPhone 5 only */ left: 10px; bottom: 80px; } } #preloader #organicLogo { position: absolute; left: 20px; bottom: 155px; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #preloader #organicLogo { left: 10px; bottom: 85px; } } @media screen and (device-aspect-ratio: 40 / 71) { #preloader #organicLogo { /* iPhone 5 only */ left: 10px; bottom: 85px; } } #preloader #donate { position: absolute; left: 20px; bottom: 20px; cursor: pointer; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #preloader #donate { left: 10px; bottom: 10px; } } @media screen and (device-aspect-ratio: 40 / 71) { #preloader #donate { /* iPhone 5 only */ left: 10px; bottom: 10px; } } #preloader #learn-more { position: absolute; right: 80px; bottom: 20px; cursor: pointer; color: #CFCFCF; text-decoration: none; font-family: gotham-bold; font-size: 11px; line-height: 1.6em; text-align: right; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #preloader #learn-more { right: 50px; bottom: 10px; font-size: 6px; } } @media screen and (device-aspect-ratio: 40 / 71) { #preloader #learn-more { /* iPhone 5 only */ right: 50px; bottom: 10px; font-size: 6px; } } #preloader #learn-more.no-mute { right: 20px; } #ui { position: absolute; top: 0; left: 0; width: 100%; height: 30px; display: none; } #ui #ui_blocker { width: 100%; height: 100%; position: fixed; background-color: black; opacity: 0.2; display: none; z-index: 1000000; } #ui .home_icon_button { float: left; margin: 10px 0 10px 10px; cursor: pointer; } #ui .right-nav, #ui .right-nav-landing, #ui .right-nav-explore, #ui .right-nav-ugc { float: right; margin: 10px 0; margin-right: 10px; } #ui .right-nav button, #ui .right-nav-landing button, #ui .right-nav-explore button, #ui .right-nav-ugc button { float: left; cursor: pointer; display: none; padding: 0 3px; } #ui .right-nav-landing .mic_icon_button { display: block; } #ui .right-nav-landing .ugc_icon_button { display: block; } #ui .right-nav-landing .explore_icon_button { display: block; } #ui .right-nav-explore .mic_icon_button { display: block; } #ui .right-nav-explore .ugc_icon_button { display: block; } #ui .right-nav-explore .search_icon_button { display: block; } #ui .right-nav-ugc .mic_icon_button { display: block; } #ui .right-nav-ugc .explore_icon_button { display: block; } #ui .right-nav-ugc .filter_icon_button { display: block; } #ui .search-bar { position: absolute; top: -5px; width: 100%; padding: 14px 0 10px; border-bottom: 2px solid rgba(234, 61, 29, 0.75); font-family: gotham-medium; font-size: 18px; line-height: 28px; color: #fff; background: rgba(0, 0, 0, 0.75); display: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #ui .search-bar input { width: 100%; margin: 17px 0 15px; padding-left: 54px; border: none; background: transparent; color: white; font-family: gotham-medium; font-size: 18px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #ui .search-bar input::-webkit-input-placeholder { color: #fff; } #ui .search-bar input:hover::-webkit-input-placeholder { color: #ccc; } #ui .search-bar input:focus::-webkit-input-placeholder { color: #ccc; } #ui .search-bar input:-moz-placeholder { color: #fff; } #ui .search-bar .search_icon_red { display: inline-block; vertical-align: middle; } #ui .search-bar .close_search { margin-top: 6px; display: inline-block; cursor: pointer; } #ui .search-bar [class*="search-bar-"] { padding: 0 10px; } #ui .search-bar [class*="search-bar-"]:not(:first-child) { padding-left: 64px; } #ui .search-bar [class*="search-bar-"]:not(:first-child):not(:last-child) { /* margin-top: 10px; */ } #ui .search-bar .search-bar-input { margin-right: 40px; } #ui .search-bar .search-bar-suggestions { display: block; float: left; border-right: 1px solid rgba(255, 255, 255, 0.5); } #ui .search-bar .search-bar-filters { padding-top: 12px; margin: 10px 0 0 0; float: left; } #ui .search-bar .search-bar-filters a.on { font-family: gotham-medium; } #ui .search-bar .search-bar-bottom { text-align: right; line-height: 0; } #ui .search-bar a { text-decoration: none; color: #fff; font-family: gotham-light; } #ui .search-bar a strong { font-family: gotham-medium; } #ui.search-on { height: 100%; overflow-y: auto; } #ui.search-on .right-nav-explore { display: none; } #ui.search-on .search-bar { opacity: 1; visibility: visible; } #ui .closeSearch { position: absolute; right: 10px; margin-top: 12px !important; opacity: 1; display: none; } #ui .submitSearch { position: absolute; top: 18px; z-index: 1; cursor: pointer; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #ui .right-nav, #ui .right-nav-landing, #ui .right-nav-explore, #ui .right-nav-ugc { margin-right: 0px; } #ui .right-nav-landing { margin: 5px 0; } #ui .right-nav-landing .mic_icon_button { display: none; } #ui .right-nav-landing .ugc_icon_button { display: none; } #ui .right-nav-landing button { margin-right: 5px; } #ui .explore_icon_button { display: none !important; } #ui .right-nav-explore .mic_icon_button { display: none; } #ui .right-nav-explore .ugc_icon_button { display: none; } #ui .search-bar input { margin-left: -38px; padding-left: 38px; margin: 8px 0 7px; } #ui .search-bar [class*="search-bar-"]:not(:first-child) { padding-left: 48px; } } @media screen and (device-aspect-ratio: 40 / 71) { #ui { /* iPhone 5 only */ } #ui .right-nav, #ui .right-nav-landing, #ui .right-nav-explore, #ui .right-nav-ugc { margin-right: 0px; } #ui .right-nav-landing { margin: 5px 0; } #ui .right-nav-landing .mic_icon_button { display: none; } #ui .right-nav-landing .ugc_icon_button { display: none; } #ui .right-nav-landing button { margin-right: 5px; } #ui .explore_icon_button { display: none !important; } #ui .right-nav-explore .mic_icon_button { display: none; } #ui .right-nav-explore .ugc_icon_button { display: none; } #ui .search-bar input { margin-left: -38px; padding-left: 38px; margin: 8px 0 7px; } #ui .search-bar [class*="search-bar-"]:not(:first-child) { padding-left: 48px; } } #ui .filters { position: absolute; right: 0; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; width: 180px; height: 140px; color: white; list-style: none; font-size: 16px; padding-top: 5px; padding-left: 15px; border-bottom: 2px solid #aa3825; margin-top: 65px; display: none; font-family: gotham-light; } #ui .filters li { margin-top: 10px; cursor: pointer; } #ui .filters li:hover { font-weight: bold; } #ui .filters li.description { font-weight: normal !important; cursor: auto !important; } .searchBarSpinner { width: 48px; height: 48px; position: absolute; top: 20px; left: 63px; opacity: 0; background-image: url(/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/individualLoader.png); background-size: 48px 48px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-animation: rotating 2s linear infinite; -moz-animation: rotating 2s linear infinite; -ms-animation: rotating 2s linear infinite; -o-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; } .searchBarSpinner.show { opacity: 1; } @-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-ms-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-o-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .footer { position: absolute; bottom: 0; width: 100%; z-index: 9; } .footer #footer { height: 50px; font-family: gotham-medium; font-size: 11px; text-transform: uppercase; color: white; display: none; padding-bottom: 4px; padding-top: 4px; overflow: hidden; letter-spacing: 2px; text-shadow: 0 0 0.5em black, 0 0 0.5em black, 0 0 0.5em black; } .footer #footer #navigation { float: right; } .footer #footer #navigation button { position: absolute; padding: 0; } .footer #footer #navigation .transcript { right: 66px; } .footer #footer #navigation .pageShareButton { right: 125px; } .footer #footer #navigation div { cursor: pointer; } .footer #footer #navigation #sound-on, .footer #footer #navigation #sound-off { right: 10px; } .footer #footer #navigation #sound-off { display: none; } .footer #footer #center { position: relative; left: 50%; margin-left: -180px; color: #cfcfcf; top: 25px; } .footer #footer #center div { cursor: pointer; float: left; margin-right: 40px; } .footer #footer #center div:hover { -webkit-transition: color 0.5s ease-in-out; -webkit-transition-delay: 0; -moz-transition: color 0.5s ease-in-out 0; -o-transition: color 0.5s ease-in-out 0; transition: color 0.5s ease-in-out 0; color: white; } .footer #footer #share { display: none; position: absolute; right: 180px; } .footer #footer #share div { float: left; margin-left: 2px; margin-right: 2px; cursor: pointer; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { .footer { bottom: 0px; } .footer #footer { height: 20px; padding: 5px 0; font-size: 9px; } .footer #footer #navigation button { bottom: 5px; } .footer #footer #navigation #sound { display: none; } .footer #footer #navigation .transcript { right: 5px; } .footer #footer #navigation .pageShareButton { right: 40px; } .footer #footer #navigation #sound-on, .footer #footer #navigation #sound-off { display: none; } .footer #footer #navigation #sound-off { display: none; } .footer #footer #center { top: 0px; } .footer #footer #share { right: 75px; bottom: 5px; } } @media screen and (device-aspect-ratio: 40 / 71) { .footer { /* iPhone 5 only */ bottom: 0px; } .footer #footer { height: 20px; padding: 5px 0; font-size: 9px; } .footer #footer #navigation button { bottom: 5px; } .footer #footer #navigation #sound { display: none; } .footer #footer #navigation .transcript { right: 5px; } .footer #footer #navigation .pageShareButton { right: 40px; } .footer #footer #navigation #sound-on, .footer #footer #navigation #sound-off { display: none; } .footer #footer #navigation #sound-off { display: none; } .footer #footer #center { top: 0px; } .footer #footer #share { right: 75px; bottom: 5px; } } #exploreContent { top: 0; position: absolute; width: 100%; height: 100%; display: none; color: #ffffff; overflow: hidden; } #exploreContent canvas { z-index: 0; position: absolute; } #exploreContent .mic { width: 70px; height: 70px; position: absolute; right: 0; background: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/ui_temp/bgMic.png"); text-align: center; line-height: 70px; z-index: 2; } #exploreContent .mic img { display: block; position: absolute; height: 24px; top: 50%; left: 50%; margin: -25px 0 0 10px; } #exploreContent .searchBar { position: absolute; top: 0; right: -920px; width: 1024px; height: 50px; background: white url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/ui_temp/bgSearchBar.png") no-repeat; z-index: 1; } #exploreContent .searchBar img { display: block; float: left; height: 22px; margin: 13px 20px 0 20px; } #exploreContent .searchBar input { display: block; float: left; border: none; font-size: 16px; color: #aeaeae; margin: 5px 0 0 0; width: 900px; padding: 10px; } #exploreContent .explore_overlay { position: absolute; top: 0; left: 0; background-color: black; z-index: 10; width: 100%; height: 100%; opacity: 0; z-index: 10000; display: none; } #exploreContent .first_time_user { position: absolute; width: 540px; height: 325px; font-family: gotham-book; padding: 0 60px 0 60px; z-index: 99990; top: 50%; left: 50%; margin-left: -330px; margin-top: -162.5px; font-size: 18px; line-height: 25px; opacity: 0; display: none; } #exploreContent .first_time_user .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } #exploreContent .first_time_user .wrapper { position: relative; } #exploreContent .first_time_user .top, #exploreContent .first_time_user .bottom { padding-top: 50px; height: 110px; } #exploreContent .first_time_user .top div, #exploreContent .first_time_user .bottom div { float: left; margin-right: 20px; display: none; } #exploreContent .first_time_user .top p, #exploreContent .first_time_user .bottom p { margin-top: 8px; } #exploreContent .first_time_user .bottom { padding-top: 40px; } #exploreContent .first_time_user .close_individual_description { position: absolute; right: 5px; top: 5px; cursor: pointer; } #exploreContent .first_time_user .close_tap_area { position: absolute; right: 0px; top: 0px; width: 45px; height: 45px; background-color: transparent; cursor: pointer; } #exploreContent .first_time_user .scroll_ver_icon { margin-left: 20px; margin-right: 37px !important; } .individualLoader { display: block; position: absolute; width: 32px; height: 32px; z-index: 1; opacity: 1; } #exploreContentMobile { position: absolute; width: 100%; height: 100%; display: none; color: #fff; } #exploreContentMobile .background { position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; background: black url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/preloader_background_overlay_mobile.jpg") no-repeat bottom center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #exploreContentMobile .images { display: block; position: relative; height: 100%; overflow-y: auto; text-align: center; } #exploreContentMobile .images li { margin: 10px 12px; } #exploreContentMobile .images li:first-child { margin-top: 52px; } #exploreContentMobile .images img { width: 100%; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.9); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.9); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.9); background-color: #333; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } #exploreContentMobile .images img.loaded, #exploreContentMobile .images img.error { min-height: auto; opacity: 1; } #exploreContentMobile #explore_bottom { width: 100%; font-family: gotham-book; font-size: 14px; padding: 5px 0 5px 0; text-align: center; } #exploreContentMobile .loader { position: absolute; bottom: -6px; z-index: 9999; width: 100%; padding: 5px 0 0; border-top: 2px solid rgba(234, 61, 29, 0.75); font-family: gotham-book; font-size: 14px; line-height: 24px; text-align: center; background: rgba(0, 0, 0, 0.9); opacity: 0; visibility: hidden; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } #exploreContentMobile.loading .loader { bottom: 0; opacity: 1; visibility: visible; } #not-support { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; color: white; } #not-support .background { position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; background: black url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/drain_background_desktop_tablet.jpg") no-repeat bottom center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #not-support h1 { font-size: 54px; font-family: alternate-gothic; letter-spacing: 8px; text-transform: uppercase; } #not-support hr { margin: 20px 0; border: none; border-bottom: 2px solid #ea3d1d; } #not-support p { font-size: 18px; font-family: gotham-book; line-height: 25px; } #not-support p a { color: white; } #not-support .wrapper { display: block; position: relative; height: 100%; } #not-support .wrapper.blocked > .centered { max-width: 680px; margin: 0 40px; } #not-support .wrapper.blocked > .centered .asset { margin: 0 auto; } #not-support .wrapper.blocked > .centered .blocked { height: 67px; text-align: left; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #not-support h1 { font-size: 40px; } #not-support p { font-size: 12px; line-height: 18px; } } @media screen and (device-aspect-ratio: 40 / 71) { #not-support { /* iPhone 5 only */ } #not-support h1 { font-size: 40px; } #not-support p { font-size: 12px; line-height: 18px; } } .messages { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000000; } .messages #messages { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .messages #messages .iPadTurnDevice, .messages #messages .mobileExploreInstructions { position: absolute; display: none; width: 100%; height: 100%; background-color: black; color: white; } .messages #messages .iPadTurnDevice { background-color: none; background: black url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/drain_background_desktop_tablet.jpg") no-repeat bottom center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .messages #messages .iPadTurnDevice .rotate_device { position: absolute; top: 50%; left: 50%; margin-top: -55.5; margin-left: -98px; } .messages #messages .iPadTurnDevice h2 { position: relative; text-align: center; font-size: 54px; font-family: alternate-gothic; margin-bottom: 30px; text-transform: uppercase; } .messages #messages .mobileExploreInstructions { font-size: 11px; font-family: gotham-book; line-height: 18px; } .messages #messages .mobileExploreInstructions hr { margin: 20px 0; border: none; border-bottom: 2px solid #ea3d1d; } .messages #messages .mobileExploreInstructions button { margin-top: 20px; padding: 12px 48px; background-color: #ea3d1d; color: #fff; font-size: 12px; -webkit-box-shadow: inset 0 0 2px 0 rgba(100, 100, 100, 0.9); -moz-box-shadow: inset 0 0 2px 0 rgba(100, 100, 100, 0.9); box-shadow: inset 0 0 2px 0 rgba(100, 100, 100, 0.9); } .messages #messages .mobileExploreInstructions strong { font-family: gotham-medium; } .messages #messages .mobileExploreInstructions .background { position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; background: black url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/preloader_background_overlay_mobile.jpg") no-repeat bottom center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .messages #messages .mobileExploreInstructions .wrapper { display: block; position: relative; height: 100%; } .messages #messages .mobileExploreInstructions .wrapper.blocked > .centered { max-width: 380px; margin: 0 20px; } .messages #messages .mobileExploreInstructions .wrapper.blocked > .centered .asset { margin: 0 auto; } .messages #messages .mobileExploreInstructions .wrapper.blocked > .centered .blocked { height: 67px; text-align: left; } .messages .desktop_only, .messages .no_search, .messages .login_box, .messages .thankYou { position: absolute; width: 540px; height: 325px; font-family: gotham-book; padding: 0 60px 0 60px; z-index: 10; top: 50%; left: 50%; margin-left: -330px; margin-top: -162.5px; font-size: 18px; line-height: 25px; color: white; display: none; } .messages .desktop_only .background, .messages .no_search .background, .messages .login_box .background, .messages .thankYou .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } .messages .desktop_only .wrapper, .messages .no_search .wrapper, .messages .login_box .wrapper, .messages .thankYou .wrapper { position: relative; } .messages .desktop_only h2, .messages .no_search h2, .messages .login_box h2, .messages .thankYou h2 { font-family: alternate-gothic; font-size: 54px; margin-top: 65px; text-align: center; margin-bottom: 30px; } .messages .desktop_only p, .messages .no_search p, .messages .login_box p, .messages .thankYou p { margin-top: 25px; text-align: center; } .messages .desktop_only .close_individual_description, .messages .no_search .close_individual_description, .messages .login_box .close_individual_description, .messages .thankYou .close_individual_description { position: absolute; right: 5px; top: 5px; cursor: pointer; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { .messages .no_search { z-index: 99999; width: 100%; margin-left: 0px; left: 0; padding: 0; } } @media screen and (device-aspect-ratio: 40 / 71) { .messages .no_search { /* iPhone 5 only */ z-index: 99999; width: 100%; margin-left: 0px; left: 0; padding: 0; } } .messages .messages_overlay { position: absolute; top: 0; left: 0; background-color: black; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; z-index: 10; width: 100%; height: 100%; display: none; } .messages .text-wrapper { position: relative; top: 50%; margin-top: -170px; padding: 0 50px; } .messages .text-wrapper .rotate-description { position: relative; font-size: 18px; color: white; text-align: center; font-family: gotham-book; } .messages .login_box h2 { font-family: gotham-light; font-size: 18px; } .messages .login_box .bigGoogle-icon2 { margin-top: 50px; cursor: pointer; float: left; margin-top: 50px; margin-left: 110px; margin-right: 65px; } .messages .login_box .bigFacebook-icon2 { float: left; margin-top: 50px; cursor: pointer; } .messages .login_box .loginMe { display: none; } .messages .login_box .loginCircle { display: none; } .messages .login_box .loginBoxCopy { display: none; } .messages .googleToCenter { margin-left: 205px !important; } .allowPrompt { position: absolute; top: 0; right: 0; background-color: red; z-index: 100002; display: none; margin-top: 8px; margin-right: 8px; padding-right: 30px; } .allowPrompt p { padding: 10px 10px 10px 10px; color: white; font-family: gotham-book; font-size: 20px; float: left; margin: 0; } .allowPrompt div { float: left; margin-top: 8px; } #individual { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999; -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -ms-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear; } #individual .individual-content { background-size: cover; position: absolute; display: block; width: 100%; height: 100%; } #individual .individual_content_img { background-size: cover; margin: 0 auto; display: block; width: 100%; height: 100%; -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -ms-transition: all 0.35s linear; -o-transition: all 0.35s linear; transition: all 0.35s linear; } #individual .close_area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #individual .top_ornament { position: absolute; top: 0; right: -50px; background-color: #ea3d1d; height: 10px; width: 50px; z-index: 9; margin-right: 0; } #individual aside { position: absolute; width: 510px; height: 100%; background: #f7f6f7; right: 0; top: 10px; margin-right: -510px; z-index: 9; } #individual aside .arrow_left, #individual aside .arrow_right, #individual aside .arrow_right_hideContent { position: absolute; margin-left: 10px; bottom: 50%; } #individual aside .arrow_left:hover, #individual aside .arrow_right:hover, #individual aside .arrow_right_hideContent:hover { cursor: pointer; } #individual aside .arrow_right { display: none; bottom: 20px; right: 12px; } #individual aside .arrow_right_hideContent { bottom: 26px; top: auto; } #individual aside .close_individual_description2 { position: absolute; margin-top: 1px; cursor: pointer; right: 10px; } #individual aside .toRight { float: right; right: 3px; left: auto; } #individual aside .content_title { margin-top: 50px; background-color: #ea3d1d; font-size: 40px; color: white; text-transform: uppercase; padding: 10px 0px 10px 85px; font-family: alternate-gothic; letter-spacing: 2px; padding-left: 78px; } #individual aside .text_content { color: #545454; width: 352px; font-size: 18px; text-align: justify; margin: 0 auto; margin-top: 20px; font-family: gotham-book; } #individual aside .text_content .content_date, #individual aside .text_content .individual_credits { font-size: 12px; text-transform: uppercase; width: 100%; display: block; } #individual aside .text_content .content_description { margin-top: 12px; margin-bottom: 12px; } #individual aside .text_content .individual_credits { text-align: left; line-height: 16px; } #individual aside .text_content .individual_credits b { font-family: gotham-bold; } #individual footer { position: absolute; bottom: 12px; } #individual footer button { display: inline-block; margin-bottom: 10px; cursor: pointer; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #individual footer button { padding: 0 !important; } } @media screen and (device-aspect-ratio: 40 / 71) { #individual footer button { /* iPhone 5 only */ padding: 0 !important; } } #individual footer .shareMenu { position: relative; display: none; margin-left: 7px; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #individual footer .shareMenu { margin-left: 2px !important; } } @media screen and (device-aspect-ratio: 40 / 71) { #individual footer .shareMenu { /* iPhone 5 only */ margin-left: 2px !important; } } #individual footer .shareMenu div { float: left; margin-right: 20px; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #individual footer .shareMenu div { margin-right: 7px !important; } } @media screen and (device-aspect-ratio: 40 / 71) { #individual footer .shareMenu div { /* iPhone 5 only */ margin-right: 7px !important; } } #individual .close { width: 70px; height: 70px; left: 0; background: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/ui_temp/bgClose.png"); text-align: center; line-height: 70px; z-index: 2; cursor: pointer; position: relative; } #individual .idividual-maps { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; z-index: 9999; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #individual { overflow-y: auto; overflow-x: hidden; } #individual .top_ornament { right: -9%; height: 48px; width: 9%; background-color: #f7f6f7; border-top: 8px solid #ea3d1d; -webkit-transition: all 0.5s ease-in-out; -webkit-transition-delay: 0.5s; -moz-transition: all 0.5s ease-in-out 0.5s; -o-transition: all 0.5s ease-in-out 0.5s; transition: all 0.5s ease-in-out 0.5s; } #individual .individual-content { background: black no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out; transition: left 0.5s ease-in-out; } #individual aside { top: 0; left: 100%; width: 95%; margin-right: 0; padding: 0; } #individual aside .close_individual_description2 { display: block; opacity: 1; visibility: visible; margin-top: 9px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } #individual aside .arrow_left, #individual aside .arrow_right, #individual aside .arrow_right_hideContent { display: block; top: 21px; left: 0; margin: 0; bottom: auto; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -webkit-transition-delay: 0.9s; -moz-transition: all 0.3s ease 0.9s; -o-transition: all 0.3s ease 0.9s; transition: all 0.3s ease 0.9s; } #individual aside .arrow_right { left: auto; right: -6%; } #individual aside .content_title { margin-top: 42px; margin-left: 0; margin-right: 0; padding: 8px 8px 5px 13%; font-family: alternate-gothic; font-size: 28px; letter-spacing: 2px; -webkit-transition: all 0.3s ease-in-out; -webkit-transition-delay: 0.3s; -moz-transition: all 0.3s ease-in-out 0.3s; -o-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s; } #individual aside .text_content { width: 100%; margin-top: 15px; padding: 0 6%; font-family: gotham-book; font-size: 12px; line-height: 18px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #individual aside .text_content .content_date, #individual aside .text_content .individual_credits, #individual aside .text_content .content_author { font-size: 10px; } #individual aside .text_content .content_author { text-align: left; } #individual aside .text_content .content_description { margin: 30px 0 20px; } #individual.trigger-on .top_ornament { right: 0; } #individual.trigger-on aside .arrow_left, #individual.trigger-on aside .arrow_right, #individual.trigger-on aside .arrow_right_hideContent { left: -7%; opacity: 1; visibility: visible; } #individual.trigger-on aside .arrow_right { opacity: 0; visibility: hidden; } #individual.content-on .top_ornament { right: -9%; -webkit-transition: all 0.2s ease-out; -webkit-transition-delay: 0s; -moz-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } #individual.content-on .individual-content { left: -94%; } #individual.content-on aside .close_individual_description2 { right: 10px; left: auto; -webkit-transition: all 0.2s ease-out; -webkit-transition-delay: 0s; -moz-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } #individual.content-on aside #hideExtraContent { top: 10px; left: 10px; opacity: 1; visibility: visible; -webkit-transition: all 0.2s ease-out; -webkit-transition-delay: 0s; -moz-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } #individual.content-on aside .arrow_left, #individual.content-on aside .arrow_right, #individual.content-on aside .arrow_right_hideContent { left: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-out; -webkit-transition-delay: 0s; -moz-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } #individual.content-on aside .content_title { margin-left: -7%; } } @media only screen and (max-width: 640px) and (orientation: portrait) and (width: 320px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) and (width: 320px) and (orientation: portrait) { #individual aside .text_content .content_description { margin: 10px 0 20px; font-size: 0.9em; line-height: 1.4em; } #individual aside .text_content footer { bottom: 0px; } } @media screen and (device-aspect-ratio: 40 / 71) { #individual { /* iPhone 5 only */ overflow-y: auto; overflow-x: hidden; } #individual .top_ornament { right: -9%; height: 48px; width: 9%; background-color: #f7f6f7; border-top: 8px solid #ea3d1d; -webkit-transition: all 0.5s ease-in-out; -webkit-transition-delay: 0.5s; -moz-transition: all 0.5s ease-in-out 0.5s; -o-transition: all 0.5s ease-in-out 0.5s; transition: all 0.5s ease-in-out 0.5s; } #individual .individual-content { background: black no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out; transition: left 0.5s ease-in-out; } #individual aside { top: 0; left: 100%; width: 95%; margin-right: 0; padding: 0; } #individual aside .close_individual_description2 { display: block; opacity: 1; visibility: visible; margin-top: 9px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } #individual aside .arrow_left, #individual aside .arrow_right, #individual aside .arrow_right_hideContent { display: block; top: 21px; left: 0; margin: 0; bottom: auto; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -webkit-transition-delay: 0.9s; -moz-transition: all 0.3s ease 0.9s; -o-transition: all 0.3s ease 0.9s; transition: all 0.3s ease 0.9s; } #individual aside .arrow_right { left: auto; right: -6%; } #individual aside .content_title { margin-top: 42px; margin-left: 0; margin-right: 0; padding: 8px 8px 5px 13%; font-family: alternate-gothic; font-size: 28px; letter-spacing: 2px; -webkit-transition: all 0.3s ease-in-out; -webkit-transition-delay: 0.3s; -moz-transition: all 0.3s ease-in-out 0.3s; -o-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s; } #individual aside .text_content { width: 100%; margin-top: 15px; padding: 0 6%; font-family: gotham-book; font-size: 12px; line-height: 18px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #individual aside .text_content .content_date, #individual aside .text_content .individual_credits, #individual aside .text_content .content_author { font-size: 10px; } #individual aside .text_content .content_author { text-align: left; } #individual aside .text_content .content_description { margin: 30px 0 20px; } #individual.trigger-on .top_ornament { right: 0; } #individual.trigger-on aside .arrow_left, #individual.trigger-on aside .arrow_right, #individual.trigger-on aside .arrow_right_hideContent { left: -7%; opacity: 1; visibility: visible; } #individual.trigger-on aside .arrow_right { opacity: 0; visibility: hidden; } #individual.content-on .top_ornament { right: -9%; -webkit-transition: all 0.2s ease-out; -webkit-transition-delay: 0s; -moz-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } #individual.content-on .individual-content { left: -94%; } #individual.content-on aside .close_individual_description2 { right: 10px; left: auto; -webkit-transition: all 0.2s ease-out; -webkit-transition-delay: 0s; -moz-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } #individual.content-on aside #hideExtraContent { top: 10px; left: 10px; opacity: 1; visibility: visible; -webkit-transition: all 0.2s ease-out; -webkit-transition-delay: 0s; -moz-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } #individual.content-on aside .arrow_left, #individual.content-on aside .arrow_right, #individual.content-on aside .arrow_right_hideContent { left: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-out; -webkit-transition-delay: 0s; -moz-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } #individual.content-on aside .content_title { margin-left: -7%; } } @media only screen and (device-aspect-ratio: 40 / 71) and (width: 320px) and (orientation: portrait) { #individual aside .text_content .content_description { margin: 10px 0 20px; font-size: 0.9em; line-height: 1.4em; } #individual aside .text_content footer { bottom: 0px; } } #individual .thenNowImg { position: absolute; width: 100%; height: 100%; background: no-repeat center; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; left: 100%; z-index: 0; } .individualAndroid h1 { font-size: 35px !important; } .individualAndroid .text_content { font-size: 12px !important; } .individualAndroid .text_content .content_date, .individualAndroid #individual aside .text_content .individual_credits, #individual aside .individualAndroid .text_content .individual_credits { font-size: 10px !important; } .individualAndroid .text_content .individual_credits { font-size: 10px !important; } .individualAndroid footer button { margin-top: 10px !important; } #video { display: none; position: absolute; width: 100%; height: 100%; background-color: black; top: 0; left: 0; z-index: 999999; } #video video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #video .close_btn { position: absolute; top: 20px; right: 15px; cursor: pointer; } #video .controllers { position: absolute; width: 510px; height: 50px; background-color: #000000; left: 50%; margin-left: -255px; bottom: 40px; margin-top: 10px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } #video .controllers div { float: left; } #video .controllers .video_pause_icon { margin: 17px 10px 0 15px; cursor: pointer; display: none; } #video .controllers .video_play_icon { margin: 15px 10px 0 15px; cursor: pointer; } #video .controllers .time { float: left; color: white; font-size: 10px; font-family: gotham-book; margin-top: 21px; margin-right: 10px; width: 70px; } #video .controllers .progress-bar { position: static; width: 340px; height: 1px; background-color: white; margin-top: 24px; } #video .controllers .progress-bar .progress { width: 0; height: 1px; background-color: #ea3d1d; } #video .controllers #video_mute { float: right; margin-top: 12px; margin-right: 10px; } @media only screen and (max-width: 640px) and (orientation: portrait), only screen and (max-width: 640px) and (orientation: landscape) { #video .controllers { display: none !important; } } @media screen and (device-aspect-ratio: 40 / 71) { #video .controllers { /* iPhone 5 only */ display: none !important; } } #ugcContent { position: absolute; top: 0; width: 100%; height: 100%; display: none; background-color: black; } #ugcContent .small-share-wrapper { position: absolute; background-color: black; z-index: 10; } #ugcContent .small-share-wrapper div { float: left; margin-right: 3px; margin-left: 3px; color: white; cursor: pointer; } #audioRecord { position: absolute; bottom: -650px; width: 815px; height: 620px; background-color: #f8f8f8; border-top: #ea3d1d 2px solid; left: 50%; margin-left: -407.5px; display: block; z-index: 100001; } #audioRecord #recording { display: block; } #audioRecord #recording h2 { margin-top: 60px; display: block; text-align: center; font-size: 24px; color: #545454; margin-bottom: 20px; padding-bottom: 0; font-family: gotham-medium; } #audioRecord #recording .speech-wrapper { position: relative; width: 740px; height: 345px; overflow: hidden; text-align: justify; margin-left: 60px; font-family: gotham-book; } #audioRecord #recording .slideSpan { color: #545454; font-size: 24px; display: none; margin-bottom: 110px; } #audioRecord #recording .speech-wrapper #slide0 { display: block; } #audioRecord #recording .shadow { position: absolute; background-image: url("/National_Library/20160521004321oe_/http://wearestillmarching.com/img/withoutSASS/record-shadow.png"); width: 814px; height: 41px; bottom: 140px; left: -10px; } #audioRecord #recording .section { margin-top: 20px; margin-bottom: 20px; color: #545454; font-size: 18px; margin-right: 15px; cursor: pointer; } #audioRecord #recording .slider { width: 10px; position: relative; float: left; margin: 0; z-index: 200; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; background: #cfcfcf; } #audioRecord #recording .slider.blue { background: #caa712; } #audioRecord #recording .slider-handle { position: absolute; width: 10px; height: 50px; background: #919191; cursor: pointer; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; } #audioRecord #recording .slide-area { position: relative; top: 0px; float: left; } #audioRecord footer div { position: absolute; bottom: 45px; float: left; color: #a0a0a0; font-size: 13px; cursor: pointer; } #audioRecord footer p { font-family: gotham-medium; position: absolute; float: left; bottom: 20px; color: #a0a0a0; font-size: 13px; } #audioRecord footer .pOriginal { left: 301px; } #audioRecord footer .pauseOriginal { left: 296px; bottom: 46px; } #audioRecord footer .pRecord { left: 452px; } #audioRecord footer .original { margin-left: 295px; } #audioRecord footer .record { margin-left: 445px; } #audioRecord footer .record_active { margin-left: 445px; } #audioRecord footer .again { margin-left: 445px; } #audioRecord footer .opacityFull { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } #audioRecord footer .opacityWaiting { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } #audioRecord .processing { opacity: 0; } #audioRecord .chosen { background-color: #d7d7d7 !important; } #audioRecord .finished { position: relative; width: 160px; height: 43px; border: none; background-color: #444444; color: white; font-size: 16px; text-align: center; top: 10px; left: 50%; margin-left: -80px; cursor: pointer; } #audioRecord .finished:hover { background-color: #ea3d1d; } #audioRecord .finished-section { position: absolute; display: none; left: 50%; margin-left: -135px; top: 50px; z-index: 10; font-family: gotham-book; } #audioRecord .finished-section .finishedH { display: block; text-align: center; font-size: 24px; color: #545454; margin-bottom: 50px; padding-bottom: 20px; margin-left: -187px; border-bottom: 2px solid #ea3d1d; } #audioRecord .finished-section .finishedHSI { display: none; margin-left: -270px; border-bottom: 2px solid #ea3d1d; } #audioRecord .finished-section button { text-transform: uppercase; width: 250px; height: 45px; border: none; color: white; display: block; margin-bottom: 15px; cursor: pointer; font-size: 15px; } #audioRecord .finished-section h3 { display: block; text-align: center; font-size: 24px; color: #545454; margin-bottom: 50px; padding-bottom: 0; margin-left: -7px; } #audioRecord .finished-section button { text-transform: uppercase; width: 250px; height: 45px; border: none; color: white; display: block; margin-bottom: 15px; cursor: pointer; } #audioRecord .finished-section p { font-size: 14px; color: #545454; font-family: gotham-book; margin-left: -130px; margin-top: 36px; width: 500px; text-align: center; } #audioRecord .finished-section .save, #audioRecord .finished-section .listen-yours, #audioRecord .finished-section .record-again, #audioRecord .finished-section .re-record { background-color: #444444; } #audioRecord .finished-section .save:hover, #audioRecord .finished-section .listen-yours:hover, #audioRecord .finished-section .record-again:hover, #audioRecord .finished-section .re-record:hover { background-color: #ea3d1d; } #audioRecord .moveLeftTimer { margin-left: -22px; } #audioRecord .submitting-section { position: absolute; display: none; left: 50%; margin-left: -135px; top: 50px; z-index: 10; } #audioRecord .submitting-section h3 { display: block; text-align: center; font-size: 24px; color: #545454; margin-bottom: 50px; padding-bottom: 0; margin-left: -30px; font-family: gotham-medium; } #audioRecord .submitting-section button { text-transform: uppercase; width: 250px; height: 45px; border: none; color: white; display: block; margin-bottom: 15px; cursor: pointer; background-color: #444444; } #audioRecord .progress-bar { position: absolute; width: 330px; height: 2px; background-color: white; top: 50px; left: -33px; } #audioRecord .progress { width: 0px; height: 2px; background-color: #ea3d1d; } #audioRecord .close_btn { position: absolute; top: 10px; right: 5px; cursor: pointer; } #audioRecord #speechProgress { position: absolute; bottom: 31px; left: 430px; z-index: 99999; cursor: pointer; } #audioRecord #shareSpeech { display: none; } #audioRecord #shareSpeech h2 { font-family: alternate-gothic; font-size: 54px; color: #444444; text-align: center; margin-top: 100px; margin-bottom: 30px; } #audioRecord #shareSpeech p { font-family: gotham-book; font-size: 18px; color: #545454; text-align: center; } #audioRecord #shareSpeech .share-wrapper { position: absolute; width: 155px; height: 105px; left: 50%; margin-left: -77.5px; margin-top: 45px; } #audioRecord #shareSpeech .share-wrapper div { position: absolute; cursor: pointer; } #audioRecord #shareSpeech .share-wrapper .facebookShare { left: 52px; } #audioRecord #shareSpeech .share-wrapper .twitterShare { top: 27px; } #audioRecord #shareSpeech .share-wrapper .googlePlusShare { top: 27px; right: 0; } #audioRecord #shareSpeech .share-wrapper .shareSymbol { bottom: 0; left: 52px; display: none; } #audioRecord .thankYou-section { display: none; margin-top: -40px; } #audioRecord .thankYou-section h3 { font-family: alternate-gothic; font-size: 54px; text-align: center; margin: 0; color: #444444; } #audioRecord .thankYou-section h4 { font-family: gotham-book; font-size: 18px; border-top: 2px solid #ea3d1d; padding-top: 20px; text-align: center; margin: 15px 127px; color: #444444; margin-bottom: 70px; } #audioRecord .thankYou-section button { position: relative; text-transform: uppercase; width: 250px; height: 45px; border: none; color: white; display: block; margin-bottom: 15px; cursor: pointer; background-color: #444444; color: white; font-family: gotham-light; font-size: 14px; left: 50%; margin-left: -125px; } #audioRecord .thankYou-section button:hover { background-color: #ea3d1d; } #audioRecord .thankYou-section .share-area { position: absolute; width: 155px; height: 105px; left: 50%; margin-left: -77.5px; margin-top: 85px; } #audioRecord .thankYou-section .share-buttons { display: none; } #audioRecord .thankYou-section .share-buttons div { position: absolute; cursor: pointer; } #audioRecord .thankYou-section .share-buttons .thankYouFacebook { top: 0; left: 50%; margin-left: -24px; } #audioRecord .thankYou-section .share-buttons .thankYouTwitter { top: 24px; right: 0; } #audioRecord .thankYou-section .share-buttons .thankYouGoogle { top: 24px; left: 0; } #audioRecord .thankYou-section .shareMenuButton { cursor: pointer; position: absolute; bottom: 0; left: 50%; margin-left: -24px; } #audioRecord .popup { position: absolute; width: 540px; height: 325px; font-family: gotham-book; background-color: black; padding: 0 60px 0 60px; opacity: 0.9; z-index: 10; top: 50%; left: 50%; margin-left: -330px; margin-top: -162.5px; font-size: 18px; line-height: 25px; color: white; display: none; z-index: 9999; } #audioRecord .popup h2 { font-family: gotham-light; font-size: 20px; margin-top: 50px; text-align: center; margin-bottom: 30px; line-height: 25px; border-bottom: 1px solid red; color: white; padding-bottom: 15px; } #audioRecord .popup button { margin-top: 20px; padding: 5px 30px; background-color: #ea3d1d; color: #fff; font-size: 16px; border: none; cursor: pointer; } #audioRecord .popup .yes { margin-left: 178px; } #audioRecord .popup p { font-size: 12px; color: red; margin-top: 55px; line-height: 15px; } .processing { opacity: 0; } .chosen { background-color: #d7d7d7 !important; } .fullSectionShow { display: none; color: #545454; font-size: 22px; padding: 0 70px; margin-top: -45px; } .moveLeftTimer { margin-left: -22px; } .progress-bar { position: absolute; width: 330px; height: 2px; background-color: white; top: 77px; left: -33px; } #flashGetUserMedia { position: absolute; top: 0; left: 0; z-index: 999999; } .recorded { display: none; font-family: gotham-light; color: red; margin-bottom: -18px; }