/*//////////////////////////////////////////////////////*/ /*GENERAL*/ /*//////////////////////////////////////////////////////*/ @font-face { font-family: Shockwave; src: url(fonts/Shockwave.woff); } html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ overflow-x:hidden; } html::-webkit-scrollbar { /* WebKit */ width: 0; height: 0; } body, html { width:100%; height:100%; margin:0; padding:0; margin:0; padding:0; } body { top:0; background-color:#000; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } /*//////////////////////////////////////////////////////*/ /*HEADER*/ /*//////////////////////////////////////////////////////*/ nav#backHome { position:absolute; font-family: freight-sans-pro, sans-serif; font-size:1rem; opacity:.8; color:white; z-index:999; margin-left:1.5rem; margin-top:1.5rem; } nav#backHome:hover { cursor: pointer; opacity:1; } /*//////////////////////////// ASIDES ////////////////////////////*/ #asideParentBlack { display: none; } /* #callbacks-placeholder{ position:fixed;top:50px;left:50px;color:black;z-index:999; } */ /*//////////////////////////////////////////////////////*/ /*LAZY LOAD*/ /*//////////////////////////////////////////////////////*/ #petcokeImageSplit.lazy-loaded {background-image: url(../images/WtoW/petcoke-jar_darkened0_split.jpg);} #WtoW_tar-sands.lazy-loaded {background-image: url(../images/WtoW/Petcoke-Pile_1920-1080.jpg);} #boatImageSplit.lazy-loaded {background-image: url(../images/WtoW/Petcoke-Transfer_split-screen.jpg);} #WtoW_aerial-map.lazy-loaded {background-image: url(../images/WtoW/petcokemap_overlay.png);} #WtoW_portrait-olga.lazy-loaded {background-image: url(../images/WtoW/Olga-Daughter.jpg);} #WtoW_olga-quote.lazy-loaded {background-image: url(../images/WtoW/Olga_12_2019\ RIVER\ SHOOT\ w_video\ .00_01_59_28.Still001.jpg);} #WtoW_aerial-map-2.lazy-loaded {background-image: url(../images/WtoW/petcokemap_overlay_02.png);} #WtoW_community-balloon.lazy-loaded {background-image: url(../images/WtoW/Petcoke-Balloon_group-photo.png);} /*load right away, don't lazy load*/ #WtoW_wetlands-chapter-1 {background-image: url(../images/WtoW/Neubeiser_Marsh.jpg);} #WtoW_wetlands-chapter-2.lazy-loaded {background-image: url(../images/WtoW/Neubeiser_Marsh.jpg);} #WtoW_audio-swamp.lazy-loaded {background-image: url(../images/WtoW/Mildred-Barnay-Quote.jpg);} #WtoW_emerged.lazy-loaded {background-image: url(../images/WtoW/Hyde-Lake-Marsh.jpg);} #WtoW_native-mural-1.lazy-loaded {background-image: url(../images/WtoW/Native-Painting.jpg);} #WtoW_native-mural-2.lazy-loaded {background-image: url(../images/WtoW/Native-Painting.jpg);} #removalActImageSplit.lazy-loaded {background-image: url(../images/WtoW/Treaty-of-Chicago_split-screen.jpg);} #WtoW_doc-bg-1.lazy-loaded {background-image: url(../images/WtoW/land-deed_shaw-quok-shuk.jpg);} #WtoW_doc-bg-2.lazy-loaded {background-image: url(../images/WtoW/land-deed.jpg);} #WtoW_wetland-tracks.lazy-loaded {background-image: url(../images/WtoW/Hyde-Lake-Marsh.jpg);} #reclaimImageSplit.lazy-loaded {background-image: url(../images/WtoW/Senate-Bill.png);} #WtoW_newcomers.lazy-loaded {background-image: url(../images/WtoW/Mill-Workers.jpg);} #WtoW_boat-postcard.lazy-loaded {background-image: url(../images/WtoW/Postcard-BG_no-border_03.jpg);} #WtoW_artifical-land.lazy-loaded {background-image: url(../images/WtoW/Calumet-filling-in.png);} #WtoW_art-land-bg.lazy-loaded {background-image: url(../images/WtoW/Calumet-filling-in.png);} #WtoW_art-land-bg-2.lazy-loaded {background-image: url(../images/WtoW/Calumet-filling-in.png);} /*load right away, don't lazy load*/ #WtoW_brought-chapter {background-image: url(../images/WtoW/Mulac_127_postcard_IllinoisSteelCo_26June1916_front.jpg);} #WtoW_workers-postcard.lazy-loaded {background-image: url(../images/WtoW/Mulac_127_postcard_IllinoisSteelCo_26June1916_front.jpg);} #GalleryImage-1.lazy-loaded {background-image: url(../images/WtoW/Mulac_095_postcard_OreBridges_IllinoisSteelMills_31June1914_front.jpg);} #GalleryImage-2.lazy-loaded {background-image: url(../images/WtoW/Mulac_126_postcard_CalumetPark_19Dec1910_front.jpg);} #GalleryImage-3.lazy-loaded {background-image: url(../images/WtoW/Mulac_132_postcard_IrondaleElevator_CrescentFlourMills_15May1909_front.jpg);} #GalleryImage-4.lazy-loaded {background-image: url(../images/WtoW/Mulac_099_postcard_IllinoisSteelWorks_front.jpg);} #GalleryImage-5.lazy-loaded {background-image: url(../images/WtoW/Mulac_127_postcard_IllinoisSteelCo_26June1916_front.jpg);} #GalleryImage-6.lazy-loaded {background-image: url(../images/WtoW/Mulac_134_postcard_WisconsinSteelCo_front.jpg);} #GalleryImage-7.lazy-loaded {background-image: url(../images/WtoW/Mulac_106_postcard_SouthChicago_Harbor_13Oct1905_front.jpg);} #GalleryImage-8.lazy-loaded {background-image: url(../images/WtoW/Mulac_084_postcard_Factories_SouthChicago_27Oct1906_front.jpg);} #GalleryImage-9.lazy-loaded {background-image: url(../images/WtoW/Mulac_092_postcard_IroquoisIronWorks_front.jpg);} #GalleryImage-10.lazy-loaded {background-image: url(../images/WtoW/Mulac_094_postcard_SteelMills_GrandCrossingTackCo_28Nov1908_front.jpg);} #GalleryImage-11.lazy-loaded {background-image: url(../images/WtoW/Mulac_088_postcard_IllinoisSteelWorks_23Sept1924_front.jpg);} #GalleryImage-12.lazy-loaded {background-image: url(../images/WtoW/Mulac_082_postcard_IllinoisSteelCo_18Oct1909_front.jpg);} #GalleryImage-13.lazy-loaded {background-image: url(../images/WtoW/Mulac_086_postcard_IllinoisSteelMills_2Sept1907_front.jpg);} #GalleryImage-14.lazy-loaded {background-image: url(../images/WtoW/Mulac_079_postcard_IroquoisSteelMills_18Aug1907_front.jpg);} #GalleryImage-15.lazy-loaded {background-image: url(../images/WtoW/Mulac_078_postcard_Lighthouse_IllinoisSteelWorks_25Sept1910_front.jpg);} #GalleryImage-16.lazy-loaded {background-image: url(../images/WtoW/Mulac_077_postcard_92ndStBridge_front.jpg);} #GalleryImage-17.lazy-loaded {background-image: url(../images/WtoW/Mulac_093_postcard_IllinoisSteelCo_17Jan1918_front.jpg);} #GalleryImage-18.lazy-loaded {background-image: url(../images/WtoW/Mulac_072_postcard_95thStBridge_27Feb1908_front.jpg);} #GalleryImage-19.lazy-loaded {background-image: url(../images/WtoW/Mulac_076_postcard_95thStBridge_front.jpg);} #GalleryImage-20.lazy-loaded {background-image: url(../images/WtoW/Mulac_071_postcard_EastSide_CalumetRiver_front.jpg);} #WtoW_walley-dad.lazy-loaded {background-image: url(../images/WtoW/Walley.png);} #WtoW_walley-dad-2.lazy-loaded {background-image: url(../images/WtoW/Walley.png);} #maskImageSplit.lazy-loaded {background-image: url(../images/WtoW/steel-workers-and-mask.jpg);} #WtoW_men-working.lazy-loaded {background-image: url(../images/WtoW/Early-steel-mills-work.jpg);} #WtoW_smoke-air.lazy-loaded {background-image: url(../images/WtoW/Calumet-smoke-sky.png);} #WtoW_smoke-air-2.lazy-loaded {background-image: url(../images/WtoW/Calumet-smoke-sky.png);} #WtoW_unemployed-workers.lazy-loaded {background-image: url(../images/WtoW/man-fishing.png);} #WtoW_landfill-1.lazy-loaded {background-image: url(../images/WtoW/Wastemanagement-site.png);} #WtoW_landfill-2.lazy-loaded {background-image: url(../images/WtoW/Wastemanagement-site.png);} #landfillsImageSplit.lazy-loaded {background-image: url(../images/WtoW/Map-1973_v2.jpg);} #closurePlanImageSplit.lazy-loaded {background-image: url(../images/WtoW/Wisconsin-Closure-Plan_split.png);} #wmrcImageSplit.lazy-loaded {background-image: url(../images/WtoW/Report-Covers.jpg);} #databookImageSplit.lazy-loaded {background-image: url(../images/WtoW/Calumet-Connect.png);} #WtoW_kcbx-facility.lazy-loaded {background-image: url(../images/WtoW/terry-evans_KCBX.png);} #WtoW_dump-daley.lazy-loaded {background-image: url(../images/WtoW/Dump-Daley.png);} #WtoW_protestors-1.lazy-loaded {background-image: url(../images/WtoW/Hegewisch-airport.png);} #WtoW_protestors-2.lazy-loaded {background-image: url(../images/WtoW/Hegewisch-airport.png);} #greenspaceImageSplit.lazy-loaded {background-image: url(../images/WtoW/Lake-Contemporary.png);} #familyImageSplit.lazy-loaded {background-image: url(../images/WtoW/Martinez-Family.png);} #WtoW_david-goliath-1.lazy-loaded {background-image: url(../images/WtoW/GKCBXTerminals_Petcoke-Pile_grain.png);} #WtoW_david-goliath-2.lazy-loaded {background-image: url(../images/WtoW/GKCBXTerminals_Petcoke-Pile_grain.png);} /* #WtoW_fight-erupted.lazy-loaded {background-image: url(../images/WtoW/GKCBXTerminals_Petcoke-Pile_grain.png);} */ #WtoW_fight-for-green.lazy-loaded {background-image: url(../images/WtoW/Wetlands_Contemporary.png);} #WtoW_article-placeholder.lazy-loaded {background-image: url(../images/WtoW/article-parallax-placeholder.png);} #WtoW_dreamscape.lazy-loaded {background-image: url(../images/WtoW/0_BG.jpg);} #WtoW_parallax-specimens.lazy-loaded {background-image: url(../images/WtoW/parallax-placeholder.jpg);} #WtoW_boat-parallax.lazy-loaded {background-image: url(../images/WtoW/boat-para-placeholder.jpg);} /* #WtoW_fishing.lazy-loaded {background-image: url(../images/WtoW/Hunting-Fishing.jpg);} */ #WtoW_fishing.lazy-loaded {background-image: url(../images/WtoW/kid-with-fish.png);} #WtoW_homes-para.lazy-loaded {background-image: url(../images/WtoW/parallax-homes.jpg);} #WtoW_horse-para.lazy-loaded {background-image: url(../images/WtoW/horse-para.jpg);} #WtoW_swimming-para.lazy-loaded {background-image: url(../images/WtoW/swimming-para.jpg);} #WtoW_sportsmen-para.lazy-loaded {background-image: url(../images/WtoW/sportsmen-para.jpg);} #WtoW_horse-boat.lazy-loaded {background-image: url(../images/WtoW/horse-boat-para.jpg);} #WtoW_fin-swim.lazy-loaded {background-image: url(../images/WtoW/early-life_15.jpg);} #WtoW_ed-quote.lazy-loaded {background-image: url(../images/WtoW/Ed-Sadlowski_video-still.jpg);} #treeImageSplit.lazy-loaded {background-image: url(../images/WtoW/Interlake-Iron-Corp_Graphic_v2.jpg);} #WtoW_bins.lazy-loaded {background-image: url(../images/WtoW/005-enviro-bins-W2W.jpg);} #WtoW_shirt-taskforce.lazy-loaded {background-image: url(../images/WtoW/shirt-para.jpg);} #WtoW_activists-1.lazy-loaded {background-image: url(../images/WtoW/activists-1.png);} #WtoW_activists-2.lazy-loaded {background-image: url(../images/WtoW/activists-2.png);} #WtoW_mags.lazy-loaded {background-image: url(../images/WtoW/mags.png);} #WtoW_family-beach.lazy-loaded {background-image: url(../images/WtoW/annotated-photo.jpg);} #WtoW_frank-quote.lazy-loaded {background-image: url(../images/WtoW/City-Within-a-City_Still.jpg);} #WtoW_craig-quote.lazy-loaded {background-image: url(../images/WtoW/Craig-Colton_still.jpg);} #WtoW_lake-animation-still.lazy-loaded {background-image: url(../images/WtoW/map-evolution_still.jpg);} #WtoW_lake-animation.lazy-loaded {background-image: url(../images/WtoW/map-evolution_modified.gif);} #WtoW_village-settlements-1.lazy-loaded {background-image: url(../images/WtoW/scharf-map.jpg);} #WtoW_village-settlements-2.lazy-loaded {background-image: url(../images/WtoW/scharf-map.jpg);} #WtoW_garbage.lazy-loaded {background-image: url(../images/WtoW/Calumet-Lake_Aerial.jpg);} #WtoW_report.lazy-loaded {background-image: url(../images/WtoW/Calumet-Lake_Aerial.jpg);} #WtoW_splitGinaWolf.lazy-loaded {background-image: url(../images/WtoW/Parallel-Pullout_side-by-side.jpg);} #WtoW_slag-map.lazy-loaded {background-image: url(../images/WtoW/CalumetFillDeposits_modified.jpg);} #WtoW_sunset-postcard.lazy-loaded {background-image: url(../images/WtoW/Postcard-BG_no-border_01.png);} #WtoW_waterways-postcard.lazy-loaded {background-image: url(../images/WtoW/Postcard-BG_no-border_02.png);} #WtoW_fight-erupted-1.lazy-loaded {background-image: url(../images/WtoW/Oscar-01.jpg);} #WtoW_fight-erupted-5.lazy-loaded {background-image: url(../images/WtoW/Oscar-07.jpg);} #WtoW_fight-erupted-6.lazy-loaded {background-image: url(../images/WtoW/Oscar-05.jpg);} #substanceDataImageSplit.lazy-loaded {background-image: url(../images/WtoW/WMRC-Reports.jpg);} #WtoW_health-effects.lazy-loaded {background-image: url(../images/WtoW/bodysteel-bg.jpg);} /*load right away, don't lazy load*/ #WtoW_future-chapter {background-image: url(../images/WtoW/Oscar-02.jpg);} #WtoW_family-settled.lazy-loaded {background-image: url(../images/WtoW/Neubeiser_single-BG.jpg);} #WtoW_family-settled {background-image: url(../images/WtoW/Neubeiser_single-BG.jpg);} /*don't lazy load??*/ #WtoW_Nub-2 {background-image: url(../images/WtoW/Neubeiser_02_photo-corners.jpg);} #WtoW_Nub-3 {background-image: url(../images/WtoW/Neubeiser_03_photo-corners.jpg);} #WtoW_Nub-4 {background-image: url(../images/WtoW/Neubeiser_04_photo-corners.jpg);} #WtoW_Nub-5 {background-image: url(../images/WtoW/Neubeiser_05_photo-corners.jpg);} #WtoW_Nub-6 {background-image: url(../images/WtoW/Neubeiser_06_photo-corners.jpg);} #WtoW_Nub-7 {background-image: url(../images/WtoW/Neubeiser_07_photo-corners.jpg);} #WtoW_Nub-8 {background-image: url(../images/WtoW/Neubeiser_08_photo-corners.jpg);} #WtoW_Nub-9 {background-image: url(../images/WtoW/Neubeiser_09_photo-corners.jpg);} #WtoW_mapLabels-placeholder {background-image: url(../images/WtoW/map-placeholder-1.jpg);} #WtoW_mapLabelsHover-placeholder {background-image: url(../images/WtoW/map-placeholder-2.jpg);} #WtoW_wood-texture.lazy-loaded {background-image: url(../images/WtoW/Plain-wood-BG.jpg);} #WtoW_big-bear {background-image: url(../images/WtoW/Sterling-Big-Bear.jpg);} /*don't lazy load*/ /*////////////////////////////*/ /*ACTIVISM MAP*/ /*////////////////////////////*/ #mapImage { position:absolute; top:0; height: 100%; width: 100%; /*background: url('../images/cotm-map-test-map.jpg');*/ background: url('../images//WtoW/activist-map.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; } .hotspots { position:absolute; z-index:3; opacity:.85; transition: .1s ease; /* outline:0px white solid; */ } /* .hotspotsSpecial9:hover { } */ #hotspot_ten { z-index:4; /*to get above the odd #9*/ } .hotspots:hover { /* outline:2px white solid; */ transform:scale(1.15); opacity:1; cursor:pointer; } .upperThirdsTextMap { position:fixed; width:auto; height:auto; /*bottom:12%;*/ left:120px; top:120px; z-index:2; opacity: 1; /* pointer-events:none; */ /*background-color: rgba(0,0,0,1);*/ padding:1.75rem 2rem 2rem 2rem; padding:1.75em 2rem 2rem 2rem; } .upperTextLargeMap { position: relative; text-align: center; font-family: kopius, serif; font-weight: 400; font-style: normal; color:#fff; font-size: 2.5em; font-size: 2.5rem; margin-bottom:0; margin-top:0; } .upperTextRegularMap { position: relative; text-align: center; font-family: kopius, serif; font-weight: 400; font-style: normal; color:#fff; font-size: 1.4em; font-size: 1.4rem; margin-bottom:0; margin-top:.4rem; margin-top:.4em; } .upperTextSmallMap { position: relative; width:100%; text-align: center; font-family: kopius, serif; font-weight: 400; font-style: normal; color:#fff; font-size: 1em; font-size: 1rem; margin-bottom:0; margin-top:2rem; margin-top:2em; } #tooltip { width:auto; height:45px; top: -500px; left:-500px; background-color: rgba(0,0,0,.7); position:fixed; display:none; color:white; z-index:9998; } #tooltip span { font-family: freight-sans-pro, sans-serif; font-weight:400; font-size: 1em; font-size: 1rem; text-align: center; margin-top:12px; margin-left:15px; padding-right:1em; padding-right:.75rem; display:inline-block; } /*//////////////////////////// BUTTONS ////////////////////////////*/ .button, .button:visited { display: inline-block; padding: .75rem 1.5rem; background-color: #cb4839; color: #fff; border: none; transition: background-color .15s ease-in-out; text-decoration: none } .button:hover, .button:active { background-color: #ef7365 } #btnContinueParent { position:relative; width:auto; height:auto; left:50%; transform:translateX(-50%); opacity:1; z-index:9999; margin-top:3em; margin-top:3rem; } #btnContinue { position:relative; width:auto; height:auto; left:50%; transform:translateX(-50%); display: inline-block; padding: 1.25rem 2.5rem; background-color: #cb4839; color: #fff; border: none; text-decoration: none; font-size: 1.125rem; font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; z-index:9999; } #btnContinue:hover { background-color: #ef7365; cursor: pointer; } /*#textEnd { display:none; }*/ #btnEndParent { position: relative; top:0; left:0; width:auto; height:auto; left:50%; transform:translateX(-50%); display:inline-block; } .btnEnd { position: relative; top:0; left:0; display: inline-block; padding: .5rem 2.5rem; margin-right:2em; margin-right:2rem; margin-top:1em; margin-top:1rem; background-color: #cb4839; color: #fff; border: none; /*transition: background-color .15s ease-in-out;*/ text-decoration: none; font-size: 1.125rem; font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; transition: opacity 1s; opacity:1; } .btnEnd:hover { background-color: #ef7365; color:#fff; cursor: pointer; } .btnEnd a { color:#fff; text-decoration: none; } .nextStoryline { position: fixed; bottom: 90px; right: 90px; width: 400px; height: 90px; opacity: 1; transition: opacity 1s; } .nextStoryline:hover { cursor:pointer; } .nextStoryline:hover > .nextStorylineImage { opacity:.7; } .nextStoryline:hover > p { opacity:.7; } .nextStorylineImage { position: relative; width: 150px; height: 90px; display: inline-block; } .nextStoryline p { position: absolute; top: 50%; transform: translateY(-50%); font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; font-size: 1em; font-size: 1rem; color: #fff; display: inline-block; margin: 0; margin-left: 20px; opacity:1; } .nextStorylineIntroParent { position: relative; display: flex; flex-wrap: wrap; top:0; width: 100%; /*max-width: fit-content;*/ height: auto; opacity: 1; margin:0; } .nextStorylineIntroLeft { position: relative; flex: 0 0 380px; /* do not grow, do not shrink, start at 380px */ /*flex-wrap: wrap;*/ top:0; width: 380px; height: 210px; opacity: 1; margin:0; } .nextStorylineIntroRightParent { position: relative; top:calc(50% - 5px); transform: translateY(-50%); } .nextStorylineIntroRight { position: relative; flex: 1; /* grow */ /*flex-wrap: wrap;*/ /*top: 100px; transform: translateY(-50%);*/ min-width: 300px; /*display: inline-block;*/ height:210px; overflow:auto; opacity: 1; margin:0; } .nextStorylineImageIntro { position: relative; top:0; width: 350px; height: 210px; left:0; top:0; display: inline-block; } .nextStorylineIntroText { position: relative; min-width: 300px; overflow: hidden; font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; font-size: 1.625em; font-size: 1.625rem; color: #fff; display: inline-block; margin: 0; opacity:1; } .nextStorylineIntroTextDesc { position: relative; line-height:1.5em; line-height:1.5rem; width:auto; } .nextStorylineIntroRight a { position:relative; font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; font-size: 1em; font-size: 1rem; color: #fff !important; background-color: #cb4839; padding: .25em 1em .25em 1em; padding: .25rem 1rem .25rem 1rem; text-decoration: none; display: inline-block; margin: 0; margin-left: 0px; opacity:1; } .nextStorylineIntroRight a:hover, .nextStorylineIntroRight a:active { background-color: #ef7365; cursor:pointer; text-decoration: none; } .returnCenter { position:relative; width:auto; height:auto; top:0; left:50%; transform:translateX(-50%); display: inline-block; padding: .75rem 1.5rem; background-color: rgba(0,0,0,.5); color: #fff; border: 1px solid #fff; /*transition: background-color .15s ease-in-out;*/ text-decoration: none; font-size: 1.125rem; font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; transition: opacity .25s ease, background-color .25s ease-in-out, color .25s ease-in-out; opacity:1; z-index:9998;/*one below black load cover*/ } .returnCenter p { margin:0; } .returnCenter:hover { background-color: rgba(255,255,255, 1); color:#000; cursor: pointer; } /*//////////////////////////////////////////////////////*/ /*THE GALLERY*/ /*//////////////////////////////////////////////////////*/ #viewGalleryParent { position:fixed; width:auto; height:auto; top:60%; left:50%; transform:translateX(-50%); transition: opacity 1s ease; opacity:1; z-index:9997;/*one below black load-cover*/ margin-top:3em; margin-top:3rem; } #viewGallery { position:relative; width:auto; height:auto; top:0; left:50%; transform:translateX(-50%); display: inline-block; padding: .5rem 2.5rem; background-color: rgba(0,0,0,0); color: #fff; border: 1px solid #fff; /*transition: background-color .15s ease-in-out;*/ text-decoration: none; font-size: 1.125rem; font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; transition: opacity 1s ease; opacity:1; z-index:9998;/*one below black load cover*/ } #viewGallery:hover { background-color: #fff; color:#000; cursor: pointer; } #galleryHoverTip { position: fixed; top:50%; left:50%; transform: translate(-50%,-50%); width:390px; height:auto; text-align: center; font-family: freight-sans-pro,sans-serif; font-size: 1.25em; font-size: 1.25rem; padding: 1.25em; padding: 1.25rem; color:white; background-color: rgba(0,0,0,.8); z-index:99; display:block; } /*//////////////////////////////////////////////////////*/ /*OVERVIEW BUTTON*/ /*//////////////////////////////////////////////////////*/ #viewOverviewParent { position:relative; width:auto; height:auto; left:50%; transform:translateX(-50%); transition: opacity 1s ease; opacity:1; z-index:9997;/*one below black load-cover*/ margin-top:1.75em; margin-top:1.75rem; transition: opacity .25s ease; } #viewOverview { position:relative; width:auto; height:auto; top:0; left:50%; transform:translateX(-50%); display: inline-block; padding: .75rem 1.5rem; background-color: rgba(0,0,0,.5); color: #fff; border: 1px solid #fff; /*transition: background-color .15s ease-in-out;*/ text-decoration: none; font-size: 1.125rem; font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; transition: opacity .25s ease, background-color .25s ease-in-out, color .25s ease-in-out; opacity:1; z-index:9998;/*one below black load cover*/ } #viewOverview p { margin:0; } #viewOverview:hover { background-color: rgba(255,255,255, 1); color:#000; cursor: pointer; } .viewSources { position:fixed; width:auto; height:auto; bottom:5vh; right:120px; transform:translateX(-50%); display: inline-block; padding: .5rem .75rem; background-color: rgba(0,0,0,1); color: #fff; /* border: 1px solid #fff; */ /*transition: background-color .15s ease-in-out;*/ text-decoration: none; font-size: 1rem; font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; /* transition: opacity .25s ease, background-color .25s ease-in-out, color .25s ease-in-out; */ opacity:1; z-index:9998;/*one below black load cover*/ } #viewSourcesBtnConflicts { position:fixed; width:auto; height:auto; bottom:5vh; right:120px; transform:translateX(-50%); display: inline-block; padding: 0rem .75rem; background-color: rgba(0,0,0,1); color: #fff; /* border: 1px solid #fff; */ /*transition: background-color .15s ease-in-out;*/ text-decoration: none; font-size: 1rem; font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; /* transition: opacity .25s ease, background-color .25s ease-in-out, color .25s ease-in-out; */ opacity:1; z-index:9997; } #viewSourcesBtnConflicts:hover { background-color: rgba(255,255,255, 1); color:#000; cursor: pointer; } .viewSources p { margin:0; font-size: .75rem; } .viewSources:hover { background-color: rgba(255,255,255, 1); color:#000; cursor: pointer; } #viewSourcesBtnSteelDiagram { position:fixed; width:auto; height:auto; bottom:3vh; left:2vw; display: inline-block; padding: 0rem .75rem; background-color: rgba(0,0,0,1); color: #fff; text-decoration: none; font-size: .75rem; font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; opacity:1; z-index:9998;/*one below black load cover*/ } #viewSourcesBtnSteelDiagram:hover { background-color: rgba(255,255,255, 1); color:#000; cursor: pointer; } /*//////////////////////////////////////////////////////*/ /*//QUOTES*/ /*//////////////////////////////////////////////////////*/ #quoteBox { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 900px; height: 500px; z-index: 99; opacity:1; /*transition: opacity 1s;*/ display:none; } #quoteBoxPrev:hover, #quoteBoxNext:hover { cursor:pointer; } #quoteCanvas { position:relative; z-index:0 } #quoteBox img { position:relative; top:50%; left:50%; transform: translate(-50%,-50%); width:80%; height: auto; z-index: 2; } #quoteBoxBG { position:absolute; top:0; left:0; width:100%; height:100%; background-color: black; opacity: .8; z-index:1; } #blackOverlay { position:absolute; top:0; left:0; width:100vw; height:100vh; z-index: 1; background-color: black; opacity:.5; } .quoteImage { position:absolute; left:200%; } #quoteBoxPrev { position: absolute; width: 60px; height: 60px; bottom: -20px; left: 40%; background-color: black; z-index: 99; color: white; font-size: 5rem; background-color: black; border: 1px solid white; } #quoteBoxNext { position: absolute; width: 60px; height: 60px; bottom: -20px; right: 40%; background-color: black; z-index: 99; color: white; font-size: 5rem; background-color: black; border: 1px solid white; } #leftArrow { position: relative; top: -25px; left: 12px; } #rightArrow { position: relative; top: -25px; left: 16px; } #wordSphereIframe { pointer-events:none; border:none; } /*//////////////////////////////////////////////////////*/ /*HORIZONTAL SLIDES*/ /*//////////////////////////////////////////////////////*/ .fp-prev { left:120px !important; } .fp-next { right:120px !important; } .slide { text-align:center; color:#fff; } /*//////////////////////////////////////////////////////*/ /*BODY STEEL CUSTOM*/ /*//////////////////////////////////////////////////////*/ #tooltipDiagramBox { width:600px; height:auto; min-height:350px; top: -500px; left:-500px; background-color: rgba(0,0,0,.9); position:fixed; display:none; color:white; z-index:9998; } #tooltipDiagramBox-span { font-family: freight-sans-pro, sans-serif; font-weight:400; font-size: .875em; font-size: .875rem; text-align: left; margin:2em; margin:2rem; padding-right:2rem; display:inline-block; z-index:2; width:80%; } #tooltipDiagramBox-title-span { font-family: freight-sans-pro, sans-serif; font-weight:400; font-size: 1.25em; font-size: 1.25rem; text-align: left; margin-top:1.5em; margin-left:2rem; display:inline-block; z-index:2; width:80%; } #bodyImage { position:absolute; width:100%; height:100%; right: 0; top:0; background-image: url("../images/WtoW/03Body-only.png"); background-size: auto 100%; background-position: right; background-repeat: no-repeat; z-index:1; opacity:.75; } /* .cls-9, .cls-10, .cls-12, .cls-15, .cls-31, .cls-38, .cls-20, .cls-16, .cls-13, .cls-33, .cls-23, .cls-5, .cls-26, .cls-27, .cls-21, .cls-44, .cls-17, .cls-18, .cls-7, .cls-25, .cls-35, .cls-19, .cls-49, .cls-4, .cls-22, .cls-39, .noClick { pointer-events: none; } */ path, polyline, g { pointer-events:none; } #white_square_BGs { pointer-events:none; } rect.cls-42, rect.cls-54 { pointer-events:auto; } /* .cls-41, #blastFurnace, #blastFurnaceParent { pointer-events:auto; } */ #steelDiagram { position:relative; top:140px; /* left:175px; */ left:50%; transform:translateX(-50%); width:75vw;/*this is changed on the fly with JS*/ /* height:100vh; */ } #steelDiagramTitle { position: absolute; top: 70px; width:100%; height:auto; font-family: Kopius, sans-serif; font-weight:400; font-size: 2.2em; font-size: 2.2rem; text-align: center; margin-top: 0; margin-bottom: 0; } #steelDiagramTitle p { margin:.5rem; padding:0; } #steelTipText { font-weight: 400; font-size: 1em; font-size: 1rem; text-align: center; margin-top: 0; } /*//////////////////////////////////////////////////////*/ /*DREAMSCAPE*/ /*//////////////////////////////////////////////////////*/ /* #parallaxNature { } */ .specimenLink { position:absolute; color:black; /* color:tan; */ outline: 1px black solid; /* background-color: #000; */ font-family: Kopius, sans-serif; font-style:italic; font-size: .875rem; font-weight: 600; padding:.5rem; /*transition: opacity 1s;*/ -webkit-font-smoothing: antialiased; font-smoothing: antialiased; z-index:999; text-decoration: none; } .specimenLink:hover { background-color: #000; color:tan; cursor:pointer; } /*plant on right edge*/ #dream1 { position: absolute; width:auto; height: 100vh; top:70vh; right:-70px; transform:translate(0,0); } /*plant on left edge*/ #dream2 { position: absolute; width:auto; height: 100vh; top:110vh; left:-20px; transform:translate(0,0); } /*long curvy plant*/ #dream3 { position: absolute; width:60vw; height: auto; top:240vh; right:0; transform:translate(0,0); } /*tall plant*/ #dream4 { position: absolute; width:20vw; height: auto; top:220vh; left:0; transform:translate(0,0); } /*bird open mouth*/ #dream5 { position: absolute; width:auto; height:100vh; top:180vh; right:0vw; transform:translate(0,0); } /*bird at top*/ #dream6 { position: absolute; width:auto; height:50vh; top:80vh; left:15%; transform:translate(0,0); } /*white bird*/ #dream7 { position: absolute; width:auto; height:70vh; top:200vh; left:15%; transform:translate(0,0); } /*frog*/ #dream8 { position: absolute; width:auto; height:30vh; top:200vh; left:20%; transform:translate(0,0); } /*snake*/ #dream9 { position:absolute; width:auto; height:40vh; top:300vh; right:25%; transform:translate(0,0); } /*stone axe*/ #dream10 { position: absolute; width:auto; height:50vh; top:180vh; right:40%; transform:translate(0,0); } /*arrowhead*/ #dream11 { position: absolute; width:auto; height:30vh; top:124vh; left:45%; transform:translate(-50%,0); } /*fish*/ #dream12 { position: absolute; width:30vw; height:auto; top:430vh; left:60%; transform:translate(-50%,0); } /*turtle*/ #dream13 { position: absolute; width:30vw; height:auto; top:360vh; left:20%; transform:translate(-50%,0); } #dream1 img, #dream2 img, #dream5 img, #dream6 img, #dream7 img, #dream8 img, #dream9 img, #dream12 img, #dream13 img { width:auto; height:100%; } #dream3 img, #dream4 img, #dream12 img, #dream13 img { width:100%; height:auto; } #dream1 a { top:70%; left:30px; } #dream2 a { top:70%; right:0; } #dream3 a { top:60%; left:30%; } #dream4 a { top:70%; right:-50px; } #dream5 a { top:45%; right:20%; } #dream6 a { top:70%; left:10%; } #dream7 a { top:10%; right:25%; } #dream8 a { top:50%; right:-40%; } #dream9 a { top:80%; right:0; } #dream12 a { top:40%; right:0; } #dream13 a { top:90%; left:0; } /*plant on right edge*/ /* #dream1 { position: absolute; width:auto; height: 100vh; top:70vh; right:-70px; transform:translate(0,0); } */ /*plant on left edge*/ /* #dream2 { position: absolute; width:auto; height: 100vh; top:110vh; left:-20px; transform:translate(0,0); } */ /*long curvy plant*/ /* #dream3 { position: absolute; width:60vw; height: auto; top:240vh; right:0; transform:translate(0,0); } */ /*tall plant*/ /* #dream4 { position: absolute; width:20vw; height: auto; top:220vh; left:0; transform:translate(0,0); } */ /*bird open mouth*/ /* #dream5 { position: absolute; width:auto; height:100vh; top:180vh; right:0vw; transform:translate(0,0); } */ /*bird at top*/ /* #dream6 { position: absolute; width:auto; height:50vh; top:80vh; left:15%; transform:translate(0,0); } */ /*white bird*/ /* #dream7 { position: absolute; width:auto; height:70vh; top:200vh; left:15%; transform:translate(0,0); } */ /*frog*/ /* #dream8 { position: absolute; width:auto; height:30vh; top:200vh; left:20%; transform:translate(0,0); } */ /*snake*/ /* #dream9 { position:absolute; width:auto; height:40vh; top:300vh; right:25%; transform:translate(0,0); } */ /*stone axe*/ /* #dream10 { position: absolute; width:auto; height:50vh; top:180vh; right:40%; transform:translate(0,0); } */ /*arrowhead*/ /* #dream11 { position: absolute; width:auto; height:30vh; top:124vh; left:45%; transform:translate(-50%,0); } */ /*fish*/ /* #dream12 { position: absolute; width:30vw; height:auto; top:430vh; left:60%; transform:translate(-50%,0); } */ /*turtle*/ /* #dream13 { position: absolute; width:30vw; height:auto; top:360vh; left:20%; transform:translate(-50%,0); } */ /*//////////////////////////////////////////////////////*/ /*THE WALL*/ /*//////////////////////////////////////////////////////*/ #refreshWallParent { position:fixed; width:auto; height:auto; top:65%; left:50%; transform:translate(-50%, 0); transition: all 1s ease 2s; opacity:0; z-index:9997;/*one below black load-cover*/ margin-top:3em; margin-top:3rem; } #refreshWall { position:relative; width:auto; height:auto; top:0; left:50%; transform:translateX(-50%); display: inline-block; padding: .5rem 2.5rem; background-color: #cb4839; color: #fff; /*border: 1px solid #fff;*/ /*transition: background-color .15s ease-in-out;*/ text-decoration: none; font-size: 1.125rem; font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; transition: opacity 1s ease; opacity:1; z-index:9998;/*one below black load cover*/ } #refreshWall:hover { /*background-color: #fff;*/ background-color: #ef7365; color:#fff; cursor: pointer; } #wallTextBox { position:absolute; height:auto; max-height:500px; /*overflow-y:scroll;*/ width:70%; z-index:99; left:50%; top:45%; transform: translate(-50%,-50%); color:rgba(255,255,255,1); background-color:rgba(0,0,0,.75); padding:1rem 3rem 1rem 3rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity:0; transition: opacity 2s; transition-delay: 2s; } #wallTextQuote { position:relative; top:0; left:0; width:100%; height:auto; font-family: freight-sans-pro, sans-serif; font-size:1.25rem; line-height: 1.5rem; /*padding:3.5rem;*/ } #wallTextAuthor { position:relative; top:0; left:0; right:0; text-align:right; font-family: 'Reenie Beanie', cursive; font-size:2.5rem; line-height: 1rem; } /*//////////////////////////// /*TEXT*/ /*////////////////////////////*/ .bodyCopy { position:relative; top:100%; padding: 1% 17% 10%; line-height: 26px; font-family: freight-sans-pro, sans-serif; max-width:100%; color: rgba(255,255,255,1); font-size: 1.5em; font-size: 1.5rem; font-weight: 100; line-height:2.125em; line-height:2.125rem; /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased;*/ z-index:101; } .bodyCopy p { margin-bottom: 0; } .boldMe { font-weight: 500; } .centerMe { text-align:center; } .scrollingText { position:relative; font-family: freight-sans-pro, sans-serif; width:70%; top:50%; left: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,1); font-size: 1.625em; font-size: 1.625rem; font-weight: 100; line-height:2.125em; line-height:2.125rem; /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased;*/ z-index:1; margin:0; padding:0; } .scrollingTextLupe { position:fixed; /*font-family: Georgia, 'Times New Roman', Times, serif;*/ font-family: prestige-elite-std, monospace; font-weight: 100; font-style: normal; width: 55%; height:auto; top:50%; left: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,1); font-size: 1.25em; font-size: 1.25rem; line-height:1.75em; line-height:1.75rem; /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased;*/ z-index:99; margin:0; padding:0; opacity:0; transition: opacity 1s; } .scrollingTextLupeCite { position:fixed; font-family: prestige-elite-std, monospace; font-weight: 100; font-style: normal; width: 55%; height:auto; top:50%; left: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,1); font-size: 1.25em; font-size: 1.25rem; line-height:1.75em; line-height:1.75rem; z-index:99; margin:0; padding:0; opacity:0; transition: opacity 1s; } /*#mdm-transcript-archie-aside { position:fixed; top:calc(10% + 47px); left:10%; width:80%; height:calc(80% - 47px); background-color:rgba(194,76,62, .8); display:none; }*/ .scrollingTextArchie { position:absolute; font-family: prestige-elite-std, monospace; font-weight: 400; font-style: normal; width:55%; height:50%; top:50%; left: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,1); font-size: 1.125em; font-size: 1.125rem; line-height:1.75em; line-height:1.75rem; /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased;*/ z-index:99; margin:0; padding:0 2em 2em 2em; padding:0 2rem 2rem 2rem; overflow-y:scroll; overflow-X:hidden; } .scrollingTextLupe p { height:100%; } .scrollingText p{ margin-top:0; } .staticTextBlock .textBlockEnd { position: fixed; width: 60%; max-width:100%; height:auto; left:50%; top:50%; /*top:calc(50% + 47px);*/ font-family: freight-sans-pro, sans-serif; color: rgba(255,255,255,1); font-size: 1.75em; font-size: 1.75rem; font-weight: 100; line-height:2.25em; line-height:2.25rem; /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased;*/ z-index:24;/*TEMP:trying ot behind the page-slide*/ /*transition: opacity transform 1s;*/ /*pointer-events: none;*/ opacity: 1; transform: translate(-50%, -50%); } .staticTextBlockOverGallery { position:fixed; width:100%; height:100%; opacity:0; z-index:9998; top:0; /*transition: 1s;*/ /*transition-delay: .5s;*/ } .staticTextBlockOverGallery .textBlock { position: fixed; width: 60%; max-width:100%; height:auto; left:50%; top:50%; /*top:calc(50% + 47px);*/ font-family: freight-sans-pro, sans-serif; color: rgba(255,255,255,1); font-size: 1.75em; font-size: 1.75rem; font-weight: 100; line-height:2.25em; line-height:2.25rem; /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased;*/ z-index:24;/*TEMP:trying ot behind the page-slide*/ /*transition: opacity transform 1s;*/ pointer-events: none; } .largerText { font-size: 6em; font-size: 6rem; font-weight: 600; line-height:2.25em; line-height:2.25rem; text-align:center; } .mediumText { font-size: 6em; font-size: 6rem; font-weight: 400; line-height:2.25em; line-height:2.25rem; text-align:center; } .graphTopRightTextBlock { position:fixed; width:30%; height:auto; opacity:0; top:150px; right:10%; z-index:1; } .graphTopRightTextBlock .textBlock { position: absolute; width:100%; /*max-width:100%;*/ height:auto; right:0; top:0; transform:translate(0%,5%); /*top:calc(50% + 47px);*/ font-family: freight-sans-pro, sans-serif; color: rgba(255,255,255,1); font-size: 1.75em; font-size: 1.75rem; font-weight: 100; line-height:2.25em; line-height:2.25rem; /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased;*/ z-index:24;/*TEMP:trying ot behind the page-slide*/ /*transition: opacity transform 1s;*/ pointer-events: none; } .graphBottomLeftTextBlock { position:fixed; width:60%; height:auto; opacity:0; left:10%; bottom:35%; z-index:1; } .graphBottomLeftTextBlock .textBlock { position: absolute; width: 60%; max-width:100%; height:auto; left:0%; top:0%; transform:translate(0%,5%); /*top:calc(50% + 47px);*/ font-family: freight-sans-pro, sans-serif; color: rgba(255,255,255,1); font-size: 1.75em; font-size: 1.75rem; font-weight: 100; line-height:2.25em; line-height:2.25rem; /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased;*/ z-index:24;/*TEMP:trying ot behind the page-slide*/ /*transition: opacity transform 1s;*/ pointer-events: none; } .staticTextBlockShort { position: fixed; width: 70%; max-width:100%; height:auto; left:200%; top:calc(50% + 47px); transform:translate(-50%,-50%); font-family: freight-sans-pro, sans-serif; color: rgba(255,255,255,1); font-size: 1.75em; font-size: 1.75rem; font-weight: 100; line-height:2.125em; line-height:2.125rem; text-align:center; /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased;*/ z-index:30; opacity:0; transition: opacity 1s; } .staticInlineQuote { position: fixed; width: 70%; max-width:100%; height:auto; left:200%; top:calc(50% + 47px); transform:translate(-50%,-50%); font-family: Kopius, sans-serif; font-style:italic; font-size: 2em; font-size: 2rem; font-weight: 300; line-height:2.5em; line-height:2.5rem; margin:0; color: rgba(255,255,255,1); /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased;*/ padding:2.5em; padding:2.5rem; background-color: rgba(0,0,0,.66); z-index:1; opacity:0; transition: opacity 1s; } .staticInlineQuote span { font-size: 1.5em; font-size: 1.5rem; margin-top: 1em; margin-top: 1rem; display: inline-block; font-style:normal; } .inlineQuote { position:fixed; color:#fff; top:50%; left:50%; transform:translate(-50%,-50%); width:66%; height:auto; font-family: Kopius, sans-serif; font-style:italic; font-size: 2em; font-size: 2rem; font-weight: 300; line-height:2.5em; line-height:2.5rem; margin:0; padding:2.5em; padding:2.5rem; background-color: rgba(0,0,0,.75); /*transition: opacity 1s;*/ -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .inlineQuoteOverBG { position:fixed; color:#fff; top:50%; left:50%; transform:translate(-50%,-50%); width:66%; height:auto; font-family: Kopius, sans-serif; font-style:italic; font-size: 2em; font-size: 2rem; font-weight: 300; line-height:2.5em; line-height:2.5rem; margin:0; padding:2.5em; padding:2.5rem; background-color: rgba(0,0,0,.75); transition: opacity 1s; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; z-index:3; } .smaller { font-size: 1.5em; font-size: 1.5rem; } .inlineQuoteSpecial { position:absolute; color:#fff; top:50%; left:50%; transform:translate(-50%,-50%); width:66%; height:auto; font-family: Kopius, sans-serif; font-style:italic; font-size: 2em; font-size: 2rem; font-weight: 300; line-height:2.5em; line-height:2.5rem; margin:0; padding:2.5em; padding:2.5rem; transition: opacity 1s; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; z-index:2; } .inlineQuoteSmaller { position:absolute; color:#fff; top:50%; left:50%; transform:translate(-50%,-50%); width:70%; height:auto; font-family: Kopius, sans-serif; font-style:italic; font-size: 1.5em; font-size: 1.5rem; font-weight: 300; line-height:2em; line-height:2rem; margin:0; padding:2.5em; padding:2.5rem; background-color: rgba(0,0,0,.75); transition: opacity 1s; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .inlineQuote span, .inlineQuoteMDM span.byName { position:relative; top:20px; width:100%; transform:translateY(20%); text-align:right; font-size: 1.875em; font-size: 1.875rem; margin-top: 1em; margin-top: 1rem; margin-bottom:0; display: inline-block; font-style:normal; opacity:0; transition:.75s; transition-delay: .5s; } .inlineQuote span, .inlineQuoteMDM span.byNameStatic { position:relative; top:20px; width:100%; transform:translateY(20%); text-align:right; font-size: 1.875em; font-size: 1.875rem; margin-top: 1em; margin-top: 1rem; margin-bottom:0; display: inline-block; font-style:normal; opacity:1; } span.byNameStatic { position:relative; top:20px; width:70%; float:right; transform:translateY(20%); text-align:right; font-size: 1.875em; font-size: 1.875rem; margin-top: 1em; margin-top: 1rem; margin-bottom:0; display: inline-block; font-style:normal; opacity:1; } .inlineQuoteSmaller span { position:relative; top:18px; font-size: 1.25em; font-size: 1.25rem; font-style:normal; margin-top: 1em; margin-top: 1rem; display: inline-block; } .inlineQuote span.byQuote, .inlineQuoteMDM span.byQuote { position: relative; top:20px; float:right; width:auto; height:auto; transform:translateY(20%); font-size: 1em; font-size: 1rem; margin-top: .5em; margin-top: .5rem; padding-top:0rem; padding-bottom:0rem; padding-left:.75rem; padding-right:.75rem; display: inline-block; font-style:normal; /*background-color: #ef7365;*/ background-color: #000; opacity:0; transition:.75s; transition-delay: .75s; } .inlineQuote br, .inlineQuoteSmaller br { clear:both; } span.byQuoteStatic { position: relative; top:6px; float:right; text-align:right; width:70%; height:auto; transform:translateY(20%); font-size: 1em; font-size: 1rem; margin-top: .5em; margin-top: .5rem; padding: 0em; padding: 0rem; font-style:normal; opacity:1; } .inlineQuote span.noByLine { position: relative; top:0px; font-size: 1.25em; font-size: 1.25rem; font-style:normal; margin-top: 1em; margin-top: 1rem; display: inline-block; } .inlineQuoteSmaller span.byQuote { position: relative; float:right; width:70%; top:7px; font-size: .875em; font-size: .875rem; margin-top: .5em; margin-top: .5rem; margin:0; padding:0; padding-left:.75rem; display: inline-block; font-style:normal; } .inlineQuoteSmaller span.noByLine { position: relative; top:0px; float:right; width:70%; font-size: 1.25em; font-size: 1.25rem; font-style:normal; margin-top: 1em; margin-top: 1rem; display: inline-block; } .inlineQuote span.textOnlyIcon, .inlineQuoteSmaller span.textOnlyIcon { position:relative; float:left; width:30%; left:0; margin-top:0; margin-bottom: 1em; margin-bottom: 1rem; font-family: freight-sans-pro, sans-serif; color: rgba(255,255,255,1); font-size: 1.125em; font-size: 1.125rem; font-weight: 100; text-align:left; } .inlineQuoteOverBG span.textOnlyIcon { position:relative; float:left; width:30%; left:0; margin-top:0; margin-bottom: 1em; margin-bottom: 1rem; font-family: freight-sans-pro, sans-serif; font-style: normal; color: rgba(255,255,255,1); font-size: 1.25em; font-size: 1.25rem; font-weight: 100; text-align:left; } /* .textOnlyIcon:before { content: ""; position:relative; top:9px; left:2px; margin-right:3px; height:30px; width:30px; background-size: 30px 30px; background-image: url(../images/document-icon.svg); background-repeat: no-repeat; display:inline-block; } */ .textOnlyIconAside:before { content: ""; position:relative; top:6px; left:2px; margin-right:3px; height:30px; width:30px; background-size: 30px 30px; background-image: url(../images/document-icon.svg); background-repeat: no-repeat; display:inline-block; } .quoteSpacer { margin:0; } .hideText { opacity:0; transform:translate(-50%,-45%); transition: opacity 1s, transform 1s; transition-delay: 0s; } .hideTextSpecial { opacity:0; transform:translate(-50%,-50%); transition: opacity 1s, transform 1s; transition-delay: 0s; } .delayAndMoveTextSpecial { opacity:1; transform:translate(-50%,-50%); transition: opacity 2.5s, transform 1.5s; transition-delay: 3s; } .delayAndMoveTextSpecialWall { opacity:1; transform:translate(-50%,-50%); transition: opacity 2.5s, transform 1.5s; transition-delay: 2s; } .delayAndShowButton { opacity:1; transform:translate(-50%,-50%); transition: opacity 2.5s, transform 1.5s; transition-delay: 2s; } .delayAndMoveText { opacity:1; transform:translate(-50%,-50%); transition: opacity 1.5s, transform 2s; transition-delay: 1.25s; } .delayAndMoveQuote { opacity:1; transform:translate(-50%,-50%); transition: opacity 1.5s, transform 2s; transition-delay: .75s; } .delayAndMoveTextTopRight { opacity:1; transition: opacity 2s, transform 2s; transition-delay: .5s; transform:translate(0%,0%); } .staticTextBlockException { position:fixed; width:100%; height:100%; display:none; /*transition-delay: .5s;*/ } .staticTextBlockException .textBlockException { position: fixed; width: 60%; max-width:100%; height:auto; left:50%; top:50%; /*top:calc(50% + 47px);*/ transform:translate(-50%,-47%); font-family: freight-sans-pro, sans-serif; color: rgba(255,255,255,1); font-size: 1.75em; font-size: 1.75rem; font-weight: 100; line-height:2.25em; line-height:2.25rem; /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased;*/ z-index:24;/*TEMP:trying ot behind the page-slide*/ opacity:1; } .staticTextBlock .textBlockQuote { position: fixed; width: 66%; max-width:100%; height:auto; left:50%; top:calc(50% + 47px);/*vertically center while accounting for header*/ /*top:calc(50% + 47px);*/ transform:translate(-50%,-47%); font-family: freight-sans-pro, sans-serif; color: rgba(255,255,255,1); z-index:30; opacity:1; transition: 1s; } .staticTextBlock .cameraFont { position: fixed; width: 70%; max-width: 100%; height: auto; left: 50%; top: 50%; /* top: calc(50% + 47px); */ transform: translate(-50%,-47%); font-family: freight-sans-pro, sans-serif; font-weight: 600; font-style: normal; font-size: 1.75rem; line-height: .875rem; text-align: center; color: #000; z-index: 30; text-transform: uppercase; opacity:1; } .centerMe { /*left:50%; transform:translateX(-50%);*/ text-align:center; } .pageCredits { position:relative; width:100%; height:auto; padding:15em; padding:15rem; padding-top:10em; padding-top:10rem; } .pageCredits p { position:relative; font-family: freight-sans-pro, sans-serif; font-weight: 300; font-style: normal; font-size: 1.25rem; line-height: 1.625rem; color:#fff; } .pageCredits p span { font-weight:500; } #creditsScroll { position:absolute; left:50%; bottom:30px; transform: translateX(-50%); font-family: freight-sans-pro, sans-serif; font-weight: 300; font-style: normal; font-size:1.125em; font-size: 1.125rem; line-height: 1.125rem; text-align:center; color:#fff; opacity:1; z-index:999; transition: opacity 1s; } #creditsScroll i { padding-top:10px; } .footageList { color: white; font-family: freight-sans-pro, sans-serif; font-weight: 300; font-style: normal; font-size:1.125em; font-size: 1.125rem; line-height: 1.5rem; } .sourceName { display:inline-block; position:relative; font-weight: 500; clear:both; } .sourceYear { display:inline-block; position:relative; font-weight: 300 !important; width: 75px; float: left; } .sourceInfo { display:inline-block; position:relative; font-weight: 300 !important; width: calc(100% - 100px); float: left; margin-bottom: 1rem; } .tinyYearS { font-size:1.25em;font-size:1.25rem;font-weight:400; } .tinyYearSparallel { font-size:1em;font-size:1rem;font-weight:400; font-style: normal; } .parallelStory { position: relative; width: 100%; height: auto; padding: 15em; padding: 15rem; padding-top: 10em; padding-top: 10rem; font-family: freight-sans-pro, sans-serif; font-weight: 300; font-style: normal; font-size: 1.25rem; line-height: 1.625rem; color: #fff; } /* .parallelStory p { position: relative; } */ .parallelOptionLeft { position:absolute;text-align:center;text-align:center;width:40ch;left:180px;top:50%;transform:translateY(-50%);font-family: Kopius, sans-serif;font-size:1.5em;font-size:1.5rem;font-style:italic;padding:1em;padding:1rem;z-index:3;border:1px solid white; } #parallelOptionLeft:hover, #parallelOptionRight:hover { background-color: white; color: #bd483c; } .parallelOptionRight { position:absolute;text-align:center;text-align:center;width:40ch;right:180px;top:50%;transform:translateY(-50%);font-family: Kopius, sans-serif;font-size:1.5em;font-size:1.5rem;font-style:italic;z-index:3;padding:1em;padding:1rem;border:1px solid white; } .fp-controlArrow.fp-prev:hover, .fp-controlArrow.fp-next:hover { opacity:.8; } /*//////////////////////////////////////////////////////*/ /*ARROWS*/ /*//////////////////////////////////////////////////////*/ .arrow-button { width: 178px; height: 48px; transform:translateY(10%); position: fixed; object-fit: contain; margin-right: 20px; background-color: #e46c60; z-index:999; transition: opacity .25s, transform 1s; opacity:0; } .arrow-button-COTM { width: 230px; height: 60px; transform:translate(-50%,-50%); position: absolute; left:50%; top:50%; object-fit: contain; margin-right: 20px; background-color: #e46c60; z-index:999; transition: opacity .25s, transform 1s; opacity:1; } .arrow-button-COTM-relative { width: 230px; height: 60px; transform:translateX(-50%); position: relative; left:50%; object-fit: contain; margin-right: 20px; background-color: #e46c60; z-index:999; transition: opacity .25s, transform 1s; opacity:1; pointer-events:auto; } /* .arrow-button-tip:hover { background-color: #f3897d; cursor: pointer; } .arrow-button-tip:hover .arrow-plus-left { background-color: #f3897d; cursor: pointer; } */ .arrow-button:hover { background-color: #f3897d; cursor: pointer; } .arrow-button-COTM:hover { background-color: #f3897d; cursor: pointer; } .arrow-button-COTM:hover .arrow-plus-left { background-color: #f3897d; cursor: pointer; } .arrow-button-COTM-relative:hover { background-color: #f3897d; cursor: pointer; } .arrow-button-COTM-relative:hover .arrow-plus-left { background-color: #f3897d; cursor: pointer; } .arrow-button-right:hover:before{ border-left: 13px solid #f3897d; } .arrow-button-right:hover .arrow-plus{ background-color: #f3897d; } .arrow-button-left:hover:before{ border-right: 13px solid #f3897d; } .arrow-button-left:hover .arrow-plus-right, .arrow-button-right:hover .arrow-plus-left { background-color: #f3897d; } .arrow-button-right:before { content:""; position: absolute; left: 100%; top: 12px; width: 0; height: 0; border-top: 13px solid transparent; border-left: 13px solid #e46c60; border-bottom: 13px solid transparent; transition: opacity .25s; } .arrow-button-left:before { content:""; position: absolute; left: -13px; top: 12px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 13px solid #e46c60; border-bottom: 13px solid transparent; transition: opacity .25s; } .arrow-label { position:absolute; left:0%; top:50%; transform:translateY(-50%); font-family: Kopius, sans-serif; font-size: 1.25em; font-size: 1.25rem; font-weight: 300; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; text-align: left; padding-left:1em; padding-left:1rem; color: #ffffff; margin: auto; } .arrow-plus-right { position:absolute; left:100%; background-color: #e46c60; width:48px; height:60px; margin-left:2px; font-family: freight-sans-pro, sans-serif; color: rgba(255,255,255,1); font-size:2em; } .arrow-plus-left { position:absolute; left:calc(0% - 50px); background-color: #e46c60; width:48px; height:60px; margin-left:0px; font-family: freight-sans-pro, sans-serif; color: rgba(255,255,255,1); font-size:2em; } .arrow-plus-right span, .arrow-plus-left span { position:absolute; left:50%; top:calc(50% - 2px); transform:translate(-50%,-50%); font-family: freight-sans-pro, sans-serif; color: rgba(255,255,255,1); font-size:1.25em; font-size:1.25rem; display:inline-block; } .clickAux { background-color: #e46c60; padding:.25em; padding:.25rem; display: inline-block; } .clickRed { background-color: #e46c60; padding:.25em; padding:.25rem; display: inline-block; } .clickAux:hover, .clickRed:hover { cursor: pointer; } #contentWrapper { position:relative; width:100%; height:auto; top:0; left:0; overflow-y: auto; } #mae_olgChurchText { opacity:0; } .upperThirdsText { position:fixed; width:auto; height:auto; /*bottom:12%;*/ right:10%; top:20%; z-index:40; opacity: 1; pointer-events:none; background-color: rgba(0,0,0,1); padding:1.75rem 2rem 2rem 2rem; padding:1.75em 2rem 2rem 2rem; } .upperTextLarge { position: relative; text-align: left; font-family: kopius, serif; font-weight: 400; font-style: normal; color:#fff; font-size: 3.5em; font-size: 3.5rem; margin-bottom:0; margin-top:0; } .upperTextRegular { position: relative; text-align: left; font-family: kopius, serif; font-weight: 400; font-style: normal; color:#fff; font-size: 1.25em; font-size: 1.25rem; margin-bottom:0; } /*//////////////////////////// //VIDEOS ////////////////////////////*/ .bgVideo-noOffset { position: absolute; object-fit: cover; height: 100%; width: 100%; top: 0; left: 0; z-index:1; } #videoBigJoe { left:0; opacity:1; transition: opacity .5s; } #videoPlayer { left:0; opacity:1; transition: opacity .5s; } #videoPlayerPreview { left:0; opacity:1; transition: opacity .5s; } #videoPlayerBackground { left:0; opacity:1; transition: opacity .5s; } #playButtonParallel { position:fixed; left:0%; width:100%; height:100%; background-color:rgba(0,0,0,.6); opacity:1; z-index:43;/*one below closed captions... but may need to change*/ } .inlineVidParentParallel { position:relative;width:636px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);z-index:99; } .inlineVidParallel { position:relative; transform:translateX(-50%); left:50%; width:636px; height:448px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .inline-vid:focus { outline: none; } #waterBlendOverlay { position: absolute; width: 100%; height:100%; background-color:rgba(203,72,73,.75); mix-blend-mode:hard-light; z-index:2; } .bgCoverVidParallel { position:relative; width:100vw; height:auto; top:0; left:0; background-size: cover; background-position:center; z-index:-7; opacity:1; transition: opacity 1s; } /*SPEED SLIDER*/ .slidecontainer { position: fixed; top: 50%; left: -200px; width: 300px; transform: translateX(-50%); /* width: 50%; */ z-index: 999; transition:1s; } .slider { width: 100%; height: 15px; background: rgba(255,255,255,.66); outline: none; opacity: 1; -webkit-transition: .2s; transition: opacity .2s; -webkit-appearance: none; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg) } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; background: rgba(194,76,62,1); cursor: pointer; } .slider::-moz-range-thumb { width: 15px; height: 15px; background: rgba(194,76,62,.1); cursor: pointer; } .speedControlText { position:absolute; width:100%; top: -190px; /*a little more than half width of slider after it flipped 270 degrees*/ color:#fff; text-align:center; font-family: freight-sans-pro, sans-serif; font-size: .875em; font-size: .875rem; } .slideNumbers { position:fixed; height:300px; width:20px; left: -100px; top: calc(50% + 10px); /*not sure why it needs this offset*/ transform: translateY(-50%); z-index:999; transition:1s; } .speedText { color:#fff; text-align:center; font-family: prestige-elite-std, monospace; font-weight: 400; font-style: normal; margin:0; } .oneTimesSpeed { position:absolute; top:0px; } .zeroTimesSpeed { position:absolute; bottom:0px; } /*//////////////////////////// //MAPS ////////////////////////////*/ /*Waste Map*/ .mapLegend { position: absolute; right:180px; top:180px; width:300px; height:auto; z-index: 5; color:#000; font-family: 'Courier New', Courier, monospace; font-weight:600; font-size: .75em; font-size: .75em; text-align: left; background-color: #eeecdf; border:2px solid #000; padding: .75em; padding: .75rem; } .mapLegend p { margin-bottom:10px; margin-top:10px; } #legendText { display: inline-block; } #legendTip { display: inline-block; position:relative; top:-20px; left:20px; background-color: rgba(0, 0, 0, 0.75); color: white; opacity: 0; transition: opacity 1s; padding:.75rem 1rem .75rem 1rem; font-size: .75rem; } #legendText:hover + #legendTip { opacity:1; } .colorKey { position: relative; top:3px; width:15px; height:15px; display:inline-block; margin-right:10px; } .yellowKey { background-color: #e9db12; } .orangeKey { background-color: #de5c13; } .brownKey { background-color: #ab6825; } .blackKey { background-color: #191010; } .greyKey { background-color: #11160f; } .blueKey { background-color: #21387f; } .purpleKey { background-color: #a51d40; } .midgreyKey { background-color: #111111; } /*//////////////////////////// GRID OF OBJECTS ////////////////////////////*/ #tooltip-3 { background-color: #ef7365; position:fixed; top: -500px; left:-500px; display:none; color:white; z-index:99; width:415px; height:135px; /*transition: all .2s ease;*/ } #tooltip-3-header { position:relative; height:auto; width:100%; font-family: kopius, serif; font-weight: 400; font-style: normal; font-size: 1em; font-size: 1rem; text-align: left; color:white; padding:1em; padding:1rem; padding-bottom:0; margin:0; } #tooltip-3-description { position:relative; height:auto; width:100%; font-family: freight-sans-pro, sans-serif; font-weight:400; font-size: .875em; font-size: .875rem; text-align: left; color:white; padding:1em; padding:1rem; padding-top:.5em; padding-top:.5rem; margin:0; } .gridContainer { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; background-color: #000; } .gridContainerSide { position: absolute; top: 0; right: 0; height: 100%; width: 50%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; background-color: #000; } .gridItem-LeftBottom, .gridItem-RightBottom, .gridItem-LeftTop, .gridItem-RightTop { position:relative; /*border: 1px solid black;*/ /* background-size: auto 100%; */ /* background-size: auto 100%; */ background-size: cover; background-position: center; background-repeat: no-repeat; opacity:.85; background-color: #000; border-style: solid; border-width: 0; transition: all .2s; } .gridVideo-LeftBottom, .gridVideo-RightBottom, .gridVideo-LeftTop, .gridVideo-RightTop { position:relative; opacity:.85; background-color: #f18e1a; border-style: solid; border-width: 0; transition: all .5s; /*border: 1px solid black;*/ } .grid-bgVideo-noOffset { position: absolute; object-fit: cover; height: 100%; width: 100%; top: 0; left: 0; z-index:1; } #grid-member-1 { background-image:url("../images/WtoW/Ann-Joseph_500.jpg"); } #grid-member-2 { background-image:url("../images/WtoW/Anthony-Martinez_500.jpg"); } #grid-member-3 { background-image:url("../images/WtoW/Missing-Name01_500.jpg"); } #grid-member-4 { background-image:url("../images/WtoW/Carolyn-Marsh_500.jpg"); } #grid-member-5 { background-image:url("../images/WtoW/Cliff-Joseph_500.jpg"); } #grid-member-6 { background-image:url("../images/WtoW/Jim-Kinney_500.jpg"); } #grid-member-7 { background-image:url("../images/WtoW/Kate-Koval_500.jpg"); } #grid-member-8 { background-image:url("../images/WtoW/Activist-Grid_group-protest_500.jpg"); } #grid-member-9 { background-image:url("../images/WtoW/Missing-Name02_500.jpg"); } #grid-member-10 { background-image:url("../images/WtoW/Arturo-Sentano_500.jpg"); } #grid-member-11 { background-image:url("../images/WtoW/Martin-Morales_500.jpg"); } #grid-member-12 { background-image:url("../images/WtoW/Olga-Bautista_500.jpg"); } #grid-member-13 { background-image:url("../images/WtoW/Martin-Scarlet-Morales_500.jpg"); } #grid-member-14 { background-image:url("../images/WtoW/Sam-Corona_500.jpg"); } #grid-member-15 { background-image:url("../images/WtoW/Peggy-Salazar_500.jpg"); } #grid-blank { background-color:#000; } #gridHover { position:absolute; width:100%; height:100%; opacity:0; /* background-color:rgba(230,106,92,.75); */ background-color:rgba(194,76,62,.85); /* background-color: rgba(194,76,62,1); */ color:white; font-family: freight-sans-pro, sans-serif; font-size:1rem; padding:1.5rem; margin:0; transition: opacity 1s; } #hoverTab { position: absolute; top: 0; left:50%; transform: translateX(-50%); color:white; font-family: freight-sans-pro, sans-serif; text-align:center; font-size:.875rem; padding:.5rem 1rem .5rem 1rem; /* background-color:rgba(0,0,0,.66); */ background-color:rgba(194,76,62,.75); transition: opacity 1s; display:inline-block } #grid-member-8:hover #gridHover { opacity:1; } #grid-member-8:hover #hoverTab { opacity:0; } /* .gridItem-LeftBottom:hover, .gridItem-RightBottom:hover, .gridItem-LeftTop:hover, .gridItem-RightTop:hover, .gridVideo-LeftBottom:hover, .gridVideo-RightBottom:hover, .gridVideo-LeftTop:hover, .gridVideo-RightTop:hover { opacity:1; border:3px solid #f18e1a; } */ /*GRID OF ACTIVISM EVENTS*/ #grid-activism-1 { background-image:url("../images/WtoW/Untitled-4_0000_v2.jpg"); } #grid-activism-2 { background-image:url("../images/WtoW/Untitled-4_0004.jpg"); } #grid-activism-3 { background-image:url("../images/WtoW/Untitled-4_0009.jpg"); } #grid-activism-4 { background-image:url("../images/WtoW/Untitled-4_0003.jpg"); } #grid-activism-5 { background-image:url("../images/WtoW/Untitled-4_0001.jpg"); } #grid-activism-6 { background-image:url("../images/WtoW/Untitled-4_0012_v2.jpg"); } #grid-activism-7 { background-image:url("../images/WtoW/Untitled-4_0011.jpg"); } #grid-activism-8 { background-image:url("../images/WtoW/Untitled-4_0013.jpg"); } #grid-activism-9 { background-image:url("../images/WtoW/Untitled-4_0002.jpg"); } #grid-activism-10 { background-image:url("../images/WtoW/Untitled-4_0005.jpg"); } #grid-activism-11 { background-image:url("../images/WtoW/Untitled-4_0010.jpg"); } #grid-activism-12 { background-image:url("../images/WtoW/Untitled-4_0006.jpg"); } #grid-activism-13 { background-image:url("../images/WtoW/Untitled-4_0008_v2.jpg"); } #grid-activism-14 { background-image:url("../images/WtoW/Untitled-4_0007.jpg"); } #grid-activism-15 { background-image:url("../images/WtoW/Untitled-4_0014_v2.jpg"); } /*//////////////////////////// VIDEOS GENERAL ////////////////////////////*/ .bgVideo-noOffset { position: absolute; object-fit: cover; height: 100%; width: 100%; top: 0; left: 0; z-index:1; } .residentVideo { position: relative; object-fit: cover; height: 100%; width: 100%; top: 0; left: 0; z-index:1; } /*//////////////////////////// OVERLAYS ////////////////////////////*/ .overlay { position:fixed; top:0; width:100%; height:100%; background-color: rgba(0,0,0,.2); z-index:3; opacity:1; transition: opacity 1s; } .overlay-2 { position:fixed; top:0; width:100%; height:100%; background-color: rgba(0,0,0,.5); z-index:3; opacity:0; transition: opacity 1s; } /*//////////////////////////// CAROUSEL ////////////////////////////*/ /*.wrapper { position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999999999; } .jcarousel-wrapper, .jcarousel, .jcarousel ul { width:100% !important; height:100% !important; }*/ .jcarousel-wrapper { position: fixed; top:50%; left:50%; transform:translate(-50%,-50%); /*border: 10px solid #fff;*/ width: 922px; height: 600px; opacity:1; z-index:9996;/*under the item flag*/ transition: opacity 1s; /*-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 2px #999; -moz-box-shadow: 0 0 2px #999; box-shadow: 0 0 2px #999;*/ } .jcarousel-wrapper .photo-credits { position: absolute; right: 15px; bottom: 0; font-size: 13px; color: #fff; text-shadow: 0 0 1px rgba(0, 0, 0, 0.85); opacity: .66; } .jcarousel-wrapper .photo-credits a { color: #fff; } /** Carousel **/ .jcarousel { position: relative; overflow: hidden; height:100%; width:100%; } .jcarousel ul { width:900%; height:100%; position: relative; list-style: none; margin: 0; padding: 0; } .jcarousel li { float: left; width: 11.11%; height:100%; /*background-image: url(../images/mdm-photo-gallery-1.png); */ background-size: cover; background-position:center; } .jcarousel li.GalleryImage-1 { background-image: url(../images/WtoW/Mulac_071_postcard_EastSide_CalumetRiver_front.jpg); } .jcarousel li.GalleryImage-2 { background-image: url(../images/WtoW/Mulac_072_postcard_95thStBridge_27Feb1908_front.jpg); } .jcarousel li.GalleryImage-3 { background-image: url(../images/WtoW/Mulac_076_postcard_95thStBridge_front.jpg); } .jcarousel li.GalleryImage-4 { background-image: url(../images/WtoW/Mulac_077_postcard_92ndStBridge_front.jpg); } .jcarousel li.GalleryImage-5 { background-image: url(../images/WtoW/Mulac_078_postcard_Lighthouse_IllinoisSteelWorks_25Sept1910_front.jpg); } .jcarousel li.GalleryImage-6 { background-image: url(../images/WtoW/Mulac_079_postcard_IroquoisSteelMills_18Aug1907_front.jpg); } .jcarousel li.GalleryImage-7 { background-image: url(../images/WtoW/Mulac_082_postcard_IllinoisSteelCo_18Oct1909_front.jpg); } .jcarousel li.GalleryImage-8 { background-image: url(../images/WtoW/Mulac_084_postcard_Factories_SouthChicago_27Oct1906_front.jpg); } .jcarousel li.GalleryImage-9 { background-image: url(../images/WtoW/Mulac_086_postcard_IllinoisSteelMills_2Sept1907_front.jpg); } .jcarousel li.GalleryImage-10 { background-image: url(../images/WtoW/Mulac_088_postcard_IllinoisSteelWorks_23Sept1924_front.jpg); } .jcarousel li.GalleryImage-11 { background-image: url(../images/WtoW/Mulac_092_postcard_IroquoisIronWorks_front.jpg); } .jcarousel li.GalleryImage-12 { background-image: url(../images/WtoW/Mulac_093_postcard_IllinoisSteelCo_17Jan1918_front.jpg); } .jcarousel li.GalleryImage-13 { background-image: url(../images/WtoW/Mulac_094_postcard_SteelMills_GrandCrossingTackCo_28Nov1908_front.jpg); } .jcarousel li.GalleryImage-14 { background-image: url(../images/WtoW/Mulac_095_postcard_OreBridges_IllinoisSteelMills_31June1914_front.jpg); } .jcarousel li.GalleryImage-15 { background-image: url(../images/WtoW/Mulac_099_postcard_IllinoisSteelWorks_front.jpg); } .jcarousel li.GalleryImage-16 { background-image: url(../images/WtoW/Mulac_106_postcard_SouthChicago_Harbor_13Oct1905_front.jpg); } .jcarousel li.GalleryImage-17 { background-image: url(../images/WtoW/Mulac_126_postcard_CalumetPark_19Dec1910_front.jpg); } .jcarousel li.GalleryImage-18 { background-image: url(../images/WtoW/Mulac_127_postcard_IllinoisSteelCo_26June1916_front.jpg); } .jcarousel li.GalleryImage-19 { background-image: url(../images/WtoW/Mulac_132_postcard_IrondaleElevator_CrescentFlourMills_15May1909_front.jpg); } .jcarousel li.GalleryImage-20 { background-image: url(../images/WtoW/Mulac_134_postcard_WisconsinSteelCo_front.jpg); } /*OBJECT GALLERY*/ .jcarousel li.COTM_firstGalleryObject { background-image: url(../images/COTM-gallery-objects-1.jpg); } .jcarousel li.COTM_secondGalleryObject { background-image: url(../images/COTM-gallery-objects-2.jpg); } .jcarousel li.COTM_thirdGalleryObject { background-image: url(../images/COTM-gallery-objects-3.jpg); } .jcarousel li.COTM_fourthGalleryObject { background-image: url(../images/COTM-gallery-objects-4.jpg); } .jcarousel li.COTM_fifthGalleryObject { background-image: url(../images/COTM-gallery-objects-5.jpg); } .jcarousel li.COTM_sixthGalleryObject { background-image: url(../images/COTM-gallery-objects-6.jpg); } /** Carousel Controls **/ .jcarousel-control-prev, .jcarousel-control-next { position: absolute; top: calc(50% - 24px); width: 50px; height: 50px; text-align: center; /* background: rgba(0,0,0,.8); */ background: #000; color: #fff; /*display:none;*/ text-decoration: none; /*text-shadow: 0 0 1px rgba(0,0,0,.7);*/ font: 24px/27px Arial, sans-serif; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 0 0 2px #000; -moz-box-shadow: 0 0 2px #000; box-shadow: 0 0 2px #000; } .jcarousel-control-prev:hover, .jcarousel-control-next:hover { background: #ef7365; /* background: rgba(255,255,255,1); */ /* color:black; */ cursor:pointer; } .jcarousel-control-prev { left: -100px; padding-top: 10px; padding-right: 3px; } .jcarousel-control-next { right: -100px; padding-top: 10px; padding-left: 3px; } .jcarousel-control-prev:hover span, .jcarousel-control-next:hover span { display: block; } .jcarousel-control-prev.inactive, .jcarousel-control-next.inactive { opacity: .5; cursor: default; } /** Carousel Pagination **/ .jcarousel-pagination { position: absolute; bottom: 0; left: 15px; } .jcarousel-pagination a { text-decoration: none; display: inline-block; font-size: 11px; line-height: 14px; min-width: 14px; background: #fff; color: #4E443C; border-radius: 14px; padding: 3px; text-align: center; margin-right: 2px; opacity: .75; } .jcarousel-pagination a.active { background: #4E443C; color: #fff; opacity: 1; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75); } /*//////////////////////////// INTRO TITLE ////////////////////////////*/ .introStoryTitle { position: fixed; width:80%; top:50%; /*top: calc(50% + 23px);*/ left: 50%; z-index:102; transform: translate(-50%, -50%); display:block; } .introStoryTitleText { font-family: kopius, serif; font-weight: 400; font-style: normal; color:#fff; font-size: 6em; font-size: 6rem; line-height: 6rem; line-height: 6rem; text-align: center; margin-bottom: .75em; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .introSubheadText { position:relative; left:50%; transform: translateX(-50%); top:-20px; width:70%; color: #fff; font-family: freight-sans-pro, sans-serif; font-weight:300; font-size: 24px; text-align: center; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .introScrollTip { border-bottom: 3px solid #ef7365; padding-bottom: .25rem; text-decoration: none; position:fixed; bottom:90px; width:auto; height:auto; left:50%; transform:translateX(-50%); color:#fff; font-family: freight-sans-pro, sans-serif; font-size: 1.125em; font-size: 1.125rem; text-align: center; /*below title at start*/ z-index:999; display:block; } .introScrollTip p { margin-bottom:.25em; margin-bottom:.25rem; } /*.introScrollTip p { position:relative; top:3px; color:#fff; font-family: freight-sans-pro, sans-serif; font-size: 1.125em; font-size: 1.125rem; text-align: center; margin:.25em; margin:.25rem; opacity: 1; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; border-bottom: rgba(188,62,42,1) solid 2px; }*/ .introScroll-arrow { position:relative; top:6px; width:14px; height:8px; left:50%; margin:0; transform:translateX(-50%); background-image: url(../images/arrow-down@2x.png); background-repeat: no-repeat; background-size: 14px 8px; background-position: center; } /*//////////////////////////// TESTIMONY ////////////////////////////*/ #testimonyLupe { position:fixed; width:580px; height:44px; top:120px; left:50%; transform:translateX(-50%); opacity:1; z-index:997; background-image: url(../images/mdm-testimony-lupe.png); background-repeat: no-repeat; background-size: 100% auto; background-position: center; display:none; } #hearingBook { position:fixed; width:250px; height:395px; top:50%; left:50%; transform:translate(-50%,-50%); opacity:1; z-index:997; background-image: url(../images/mdm-hearing-book.png); background-repeat: no-repeat; background-size: 100% auto; background-position: center; display:none; } /*//////////////////////////// DEATH CERTIFICATES ////////////////////////////*/ #deathCerts { position:fixed; top:calc(0% + 45px); left:-100%; width:calc(100% - 20px); height:100%; padding-left:100px; padding-right:120px; padding-bottom:100px; z-index:24;/*below page-slide, so poster can animate over it*/ background-color: #000; opacity:0; transition: opacity 1s; } .certRow { position:relative; padding-top:8%; padding-bottom:0%; width:100%; height:auto; } .certRowBottom { position:relative; padding-bottom:0%; width:100%; height:auto; } .certItem { width:19%; height:100%; /*margin-right: 1%; margin-left:1%;*/ background-color:#e46c60; z-index:1; display:inline-block; opacity:.75; } /*.certItem img { position:absolute; top:0; }*/ .certItem:hover { opacity:1; cursor:pointer; } #certificateLeftText { position:fixed; width:56px; height:600px; z-index:997; left:10px; top:-100%; background-image: url(../images/mdm-certificate-left-text.png); background-repeat: no-repeat; background-size: 100% auto; background-position: left; opacity:0; z-index:998; transition: 1s opacity; } #certificateTopText { position:fixed; width:250px; height:63px; z-index:997; right:50px; top:-100%; background-image: url(../images/mdm-certificate-top-text.png); background-repeat: no-repeat; background-size: 100% auto; background-position: left; opacity:0; z-index:998; transition: 1s opacity; } /*//////////////////////////// STORY TITLE ////////////////////////////*/ .storyTitle { position: fixed; width:80%; top:50%; /*top: calc(50% + 23px);*/ left: 50%; z-index:42; transform: translate(-50%, -50%); opacity: 1; transition: opacity 1s ease; } /* .storyTitle-v2 { position: fixed; width:80%; top: 50%; left: 50%; z-index:-1; transform: translate(-50%, -50%); opacity: 1; transition: opacity 1s; }*/ .storyTitleText { position:relative; top:0; left:50%; transform: translate(-50%, 20%); opacity: 0; transition: 2.5s; font-family: kopius, serif; font-weight: 400; font-style: normal; color:#fff; font-size: 5.5em; font-size: 5.5rem; line-height: 6rem; line-height: 6rem; text-align: center; margin-top:0; /*margin-bottom: 3em;*/ margin-bottom: 2rem; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .storyTitleTextMassacre { position:relative; top:0; left:50%; transform: translate(-50%, 5%); opacity: 0; transition: 2s; font-family: kopius, serif; font-weight: 400; font-style: normal; color:#fff; font-size: 6em; font-size: 6rem; line-height: 6rem; line-height: 6rem; text-align: center; margin-top:0; /*margin-bottom: 3em;*/ margin-bottom: 2rem; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .contentWarning { text-decoration: none; font-size: 1.25em; font-size: 1.25rem; font-family: freight-sans-pro,sans-serif; font-weight: 300; text-align:center; line-height: 1.875rem; } .contentWarning .warningHeader { font-size: 1.375em; font-size: 1.375rem; font-weight: 500; } /*hr { position: relative; top:-40px; left:50%; transform:translate(-50%); border-top: 1px solid rgba(199,75,26,1); background-color: rgba(199,75,26,1); width: 50%; }*/ .subheadText { position:relative; left:50%; transform: translate(-50%, 20%); top:0px; width:70%; color: #fff; font-family: freight-sans-pro, sans-serif; font-weight:300; font-size: 1.375em; font-size: 1.375rem; text-align: center; margin-top:1rem; opacity:0; transition: 2s; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } #tutorialText { position: fixed; top: 170px; left: 26px; display:none; z-index:999; } #triangle-up { position:relative; left:7px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid rgba(0,0,0,.66); margin:0; padding:0; } #tutorialText p { font-family: freight-sans-pro, sans-serif; font-weight: 300; font-size: 1em; font-size: 1rem; line-height: 1.25em; line-height: 1.25rem; text-align: left; background-color: rgba(0,0,0,.66); padding:1em; padding:1rem; margin:0; color: #fff; } #navTip { position:fixed; bottom:90px; width:470px; height:85px; left:50%; transform:translateX(-50%); z-index:9997;/*above photo gallery, below black load cover*/ opacity: 0; transition: opacity 1s; background-image: url(../images/tutorial-icon@2x_v4.png); background-color:rgba(0,0,0,.75); background-repeat: no-repeat; background-size: 450px 85px; background-position: center; pointer-events: none; } #scrollDownTip { position:fixed; bottom:60px; width:250px; height:48px; left:50%; transform:translateX(-50%); z-index:9997;/*above photo gallery, below black load cover*/ font-family: freight-sans-pro, sans-serif; font-size: 1rem; text-align:center; line-height:47px; color:white; opacity: 0; transition: opacity 1s; background-color:rgba(0,0,0,.75); /* background-image: url(../images/scroll-tip_2x.png); background-repeat: no-repeat; background-size: 65px 48px; background-position: center; */ pointer-events: none; } #downArrowKey { position:relative; display: inline-block; margin: 0 3px 0 3px; top:9px; width:30px; height:30px; background-image: url(../images/scroll-down-arrow_2x.png); background-repeat: no-repeat; background-size: 30px 30px; background-position: center; } /*.scrollTip p { position:relative; top:3px; color:#fff; font-family: freight-sans-pro, sans-serif; font-size: 1.125em; font-size: 1.125rem; text-align: center; margin:.25em; margin:.25rem; padding: .5rem 2rem 1rem 2rem; opacity: 1; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; /*border-bottom: rgba(188,62,42,1) solid 2px;*/ .scroll-arrow { position:relative; top:6px; width:14px; height:8px; left:50%; margin:0; transform:translateX(-50%); background-image: url(../images/arrow-down@2x.png); background-repeat: no-repeat; background-size: 14px 8px; background-position: center; } #beginStoryParent { position:relative; width:auto; height:auto; top:0; left:50%; transform:translateX(-50%); transition: opacity 1s ease; opacity:1; z-index:9997;/*one below black load-cover*/ margin-top:3em; margin-top:3rem; /*position:relative; width:150px; left:50%; transform:translateX(-50%); z-index:1001; opacity: 1; transition: opacity 1s, background-color .15s ease-in-out; margin-top:2em; margin-top:2rem;*/ } #beginStory { position:relative; width:auto; height:auto; top:0; left:50%; transform:translateX(-50%); /*left:50%; top:50%; transform:translate(-50%,-50%);*/ display: inline-block; padding: .5rem 2.5rem; background-color: #cb4839; color: #fff; border: none; /*transition: background-color .15s ease-in-out;*/ text-decoration: none; font-size: 1.125rem; font-family: freight-sans-pro,sans-serif; font-weight: 300; font-style: normal; opacity:0; transition: opacity 1s ease, background-color .15s ease-in-out; z-index:9998;/*one below black load cover*/ /*position:relative; width:150px; left:50%; transform:translateX(-50%); z-index:1001; opacity: 1; transition: opacity 1s, background-color .15s ease-in-out; margin-top:2em; margin-top:2rem;*/ } #beginStory p { /*font-family: freight-sans-pro, sans-serif; font-size: 1.125em; font-size: 1.125rem; font-weight:300; text-align: center; padding: .75em 1.5em .75em 1.5em; background-color: #cb4839; color:#fff; opacity: 1;*/ } #beginStory:hover { background-color: #ef7365; color:#fff; cursor: pointer; } /*//////////////////////////////////////////////////////*/ /*INLINE IMAGE*/ /*//////////////////////////////////////////////////////*/ #imgCartoon { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); } #imgOperaHouseClipping { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); } /*//////////////////////////// ARCHIVE TAB ////////////////////////////*/ #archiveTabParent { position:fixed; /*height:calc(100% - 47px);*/ transform: translateX(-87px); height:100%; width:92px; left:0px; top:0px; z-index:9997;/*site-header is 99999, way over*/ transition: transform .5s; transition-timing-function: ease-in-out; } #archiveTab { position: absolute; top:80px; left:0px; transform: translateX(0px); height:80px; width:80px; background-color: rgba(6,15,20,1); transition: transform .5s; transition-timing-function: ease-in-out; } #archiveTab:hover { background-color: rgba(194,76,62,1); cursor: pointer; } .archiveTabText { font-family: freight-sans-pro, sans-serif; font-weight: 400; font-style: normal; color:#fff; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .archiveTabTitle { position:absolute; top:27px; left:88px; width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: freight-sans-pro, sans-serif; font-weight: 400; font-style: normal; color:#fff; font-size: 1.125em; font-size: 1.125rem; text-align: left; margin:0; margin-top: .125rem; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; white-space: nowrap; text-overflow: ellipsis; } .archiveTabID { position:absolute; top:10px; left:88px; font-family: freight-sans-pro, sans-serif; font-weight: 400; font-style: normal; font-size: .75em; font-size: .75rem; margin:0; margin-top: .125rem; text-align: left; color: rgba(255,255,255,.75); -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .viewInArchive { position:absolute; font-size: .875em; font-size: .875rem; left:88px; bottom:9px; /*background-color: rgba(230,106,92,1);*/ color: rgba(255,255,255,1); margin-top: .5em; margin-top: .5rem; /*padding: .25em .5em; padding: .25rem .5rem;*/ text-decoration: underline; display:inline-block; } .viewInArchiveFlag { position:absolute; font-size: .875em; font-size: .875rem; left:-100%; bottom:10px; /*background-color: rgba(230,106,92,1);*/ color: rgba(255,255,255,1); margin-top: .5em; margin-top: .5rem; /*padding: .25em .5em; padding: .25rem .5rem;*/ text-decoration: underline; display:inline-block; } .viewInArchive:hover { /*color: rgba(188,62,42,1); background-color: rgba(255,255,255,1);*/ text-decoration: none; cursor:pointer; } #archiveTabClose { position: absolute; top:50%; left:50%; height: 36px; width: 36px; transform: translate(-50%,-46%); background-image: url(../images/icon-archiveTab-close@2x.png); background-size: 36px 36px; background-position: 0px 0px; background-repeat: no-repeat; overflow: hidden; display:none; } #archiveMenu { position:absolute; left:81px; width:370px; top:0; height: 100%; /*background-color: rgba(188,62,42,.3);*/ background-color: rgba(6,15,20,.9); overflow-y: scroll; overflow-x: hidden; /*scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important; scrollbar-width: thin !important;*/ } #archiveMenuUp { position:fixed; left:88px; top:47px; height:40px; width:450px; background-color: rgba(75,45,45,1); border-bottom: 1px rgba(85,55,55,1) solid; z-index:99; } #archiveMenuUp:hover { background-color: rgba(194,76,62,1); cursor:pointer; } #archiveMenuDown { position:fixed; left:88px; bottom:0px; height:40px; width:450px; background-color: rgba(75,45,45,1); border-top: 1px rgba(85,55,55,1) solid; z-index:99; } #archiveMenuDown:hover { background-color: rgba(194,76,62,1); cursor:pointer; } .upArrow { } .downArrow { } #archiveMenuItems { position:relative; top:0; left:0; width:100%; height:100%; } #archiveMenuItems ul { margin:0; padding-left:0; } .archiveItemContainer { position:relative; width:100%; /*margin-top: 1px;*/ /*margin-bottom:1px;*/ border-bottom: 1px rgba(230,106,92,1) solid; /*padding: .5em; padding: .5rem;*/ background-color: rgba(194,76,62,1); opacity:.25; pointer-events: none; transition: opacity .5s; width: 370px; height: 80px; transition: .5s; transition-timing-function: ease-in-out; overflow:hidden; } .activeItem { /*background-color: rgba(188,62,42,.85);*/ opacity:1; pointer-events: auto; } .activeItem:hover { /*background-color: rgba(202,83,69,1);*/ } .archiveItemThumb { position:absolute; top:6px; left:6px; height: 68px; width: 68px; -webkit-background-size: cover; background-position: center center; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #yellowDot { position: absolute; left: calc(50% - 1px); transform: translateX(-50%); bottom: 20px; height: 4px; width: 4px; border-radius: 50%; background-color: rgba(235,159,34,1); display: inline-block; transform: scale(0); transform-origin : center; } .scaleYellowDot { animation: scaleDot .5s; animation-delay: 0s; animation-fill-mode: forwards; } @keyframes scaleDot { 0% { transform: scale(0); } 75% { transform: scale(1.5); } 100% { transform: scale(1); } } /* .enterArchiveTab { animation: enterFrame .5s; animation-delay: 0s; animation-fill-mode: forwards; } */ /* @keyframes enterFrame { 0% { transform: translateX(0px); } 75% { transform: translateX(105px); } 100% { transform: translateX(100px); } } */ /*//////////////////////////// TIMELINE NAV ////////////////////////////*/ #timelineWrapper { position:fixed; height:100%; width:100px; top:0; right:0; z-index:10000;/*one above black load screen*/ opacity:1; transition: 1s; } #timelineGradient { position:absolute; height:100%; width:0px; top:0; right:0; z-index:1; opacity:1; /*background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.66) 100%);*/ /*background: rgba(194,76,62,1);*/ background: rgba(194,75,62,.8); /*background: #0f4e6a;*/ transition: width .5s ease; } #timelineParent { position:absolute; width:100px; height:450px; top: calc(50% + 23px); transform:translateY(-50%); right: 0px; opacity:1; z-index: 2; } #timeline-nav { position: absolute; width:3px; height:450px; overflow:visible; top: 0px; right: 30px; background-color: rgba(255,255,255,.3); /*outline: 1px #fff solid;*/ opacity:0; transition: 1s; /*margin-top: -40px;*/ } #timeline-nav .yearMarker { position: absolute; width: 100px; left: -50px; right: 0px; text-align: right; margin:0; padding:0; opacity:1; transition:1s; } #timeline-nav h1 { display:none; } /*offset the first Intro marker*/ /*.firstMarker { top:-10px; }*/ /*offset the last END marker*/ /*.lastMarker { bottom:-14px; }*/ /* #jobLikeNoOther { top:0; } #worldTurned { top:222px; } #theFuture { top:379px; } */ .yearMarker a { position: relative; color: #fff; right:37px; font-family: freight-sans-pro, sans-serif; font-weight:300; font-size: .75em; font-size: .75rem; text-align: right; float:right; vertical-align: middle; /*right: 22px; top: -7px;*/ text-decoration: none; padding: 4px 20px 4px 7px; color: rgba(255,255,255,.75); white-space: nowrap; transition:.5s; /*background: transparent url(../img/nav-arrow.png) 100% 50% no-repeat;*/ } .yearMarker a span { font-size: .675em; font-size: .675rem; } #year1940 a { top:-3px; } #year1940-50 a { top:3px; } #year1970-80 a { top:-3px; } #year1980-90 a { top:2px; } #year2000 a { top:3px; } .yearMarker a:hover { /*background-color: #ef7365;*/ cursor:pointer; color: rgba(255,255,255,1); } #progressBar { position: absolute; top:0; right:0; height:0; width:3px; background-color: #fff; transition: height .25s linear; opacity:1; } #progressArrow { position:absolute; /*top:0px; right:0px; width:15px; height:1px; background-color:#fff; z-index:999;*/ top:-3px; right:-6px; width: 0; height: 0; border-top: 3px solid transparent; border-right: 6px solid #fff; border-bottom: 3px solid transparent; overflow:visible; z-index:999; transition: top .25s linear; } /*//////////////////////////// PARALLAX ////////////////////////////*/ .parallaxParent{ position:absolute; top:0; left:0; height: 100%; width: 100%; } /**/ #wtow_parallax_specimens-1 { height: 243px; width: 243px; position: fixed; top:150%; left:15%; -webkit-transform: translate(-50%,-80%); transform: translate(-50%,-80%); background-image: url(../images/parallax-mdm-1.jpg); background-size: 243px 243px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 2; transition: 1.4s ease; } /**/ #wtow_parallax_specimens-2 { height: 250px; width: 346px; position: fixed; top:150%; right:0%; -webkit-transform: translate(-50%,-20%); transform: translate(-50%,-20%); background-image: url(../images/parallax-mdm-3.jpg); background-size: 346px 250px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 2; transition: 1.3s ease; } #wtow_parallax_specimens-3 { height: 220px; width: 271px; position: fixed; top:150%; left:30%; -webkit-transform: translate(-50%,-116%); transform: translate(-50%,-116%); background-image: url(../images/parallax-mdm-4.jpg); background-size: 271px 220px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 3; transition: 1.4s ease; } #wtow_parallax_news-health-1 { height: 588px; width: 300px; position: fixed; top:150%; right:5%; -webkit-transform: translate(0%,0%); transform: translate(0%,0%); background-image: url(../images/WtoW/NBC.jpg); background-size: 300px 588px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 5; transition: 1.3s ease; } #wtow_parallax_news-health-2 { height: 357px; width: 300px; position: fixed; top:150%; left:10%; -webkit-transform: translate(-50%,-20%); transform: translate(-50%,-20%); background-image: url(../images/WtoW/WTTW.png); background-size: 300px 357px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 3; transition: 1.6s ease; } #wtow_parallax_news-health-3 { height: 501px; width: 250px; position: fixed; top:150%; left:5%; -webkit-transform: translate(70%,-70%); transform: translate(70%,-70%); background-image: url(../images/WtoW/Petcoke-Huff-Post.jpg); background-size: 250px 501px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 2; transition: 1s ease; } #wtow_parallax_news-health-4 { height: 597px; width: 600px; position: fixed; top:150%; right:0%; -webkit-transform: translate(0%,-55%); transform: translate(0%,-55%); background-image: url(../images/WtoW/Chicago-Sun-Times.png); background-size: 600px 597px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 4; transition: 1.4s ease; } #wtow_parallax_news-health-5 { height: 392px; width: 900px; position: fixed; top:150%; left:20%; -webkit-transform: translate(-20%,35%); transform: translate(-20%,35%); background-image: url(../images/WtoW/Dumping-Ground.jpg); background-size: 900px 392px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 4; transition: 1.2s ease; } #wtow_parallax_news-protestors-6 { height: 281px; width: 500px; position: fixed; top:150%; right:35%; -webkit-transform: translate(0%,-100%); transform: translate(0%,-100%); background-image: url(../images/WtoW/KCBX-protest.jpg); background-size: 500px 281px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 3; transition: 1.2s ease; } #wtow_parallax_news-tar-7 { height: 333px; width: 500px; position: fixed; top:150%; left:40%; -webkit-transform: translate(0%,25%); transform: translate(0%,25%); background-image: url(../images/WtoW/Petcoke-Piles_Terry-Evans.jpg); background-size: 500px 333px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 4; transition: 1.4s ease; } /*/////*/ #wtow_parallax_industry-1 { height: 440px; width: 700px; position: fixed; top:150%; left:5%; -webkit-transform: translate(15%,-10%); transform: translate(15%,-10%); background-image: url(../images/WtoW/industry_01.png); background-size: 700px 440px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 5; transition: 1.3s ease; } #wtow_parallax_industry-2 { height: 449px; width: 700px; position: fixed; top:150%; left:15%; -webkit-transform: translate(-20%,-80%); transform: translate(-20%,-80%); background-image: url(../images/WtoW/industry_02.png); background-size: 700px 449px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 3; transition: 1.6s ease; } #wtow_parallax_industry-3 { height: 377px; width: 650px; position: fixed; top:150%; right:10%; -webkit-transform: translate(0%,-80%); transform: translate(0%,-80%); background-image: url(../images/WtoW/leonard-leading-sam-by-ship.jpg); background-size: 650px 377px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 2; transition: 1s ease; } #wtow_parallax_industry-4 { height: 356px; width: 600px; position: fixed; top:150%; right:15%; -webkit-transform: translate(0%,0%); transform: translate(0%,0%); background-image: url(../images/WtoW/industry_04.png); background-size: 600px 356px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 2; transition: 1.4s ease; } #wtow_parallax_industry-5 { height: 395px; width: 600px; position: fixed; top:150%; left:25%; -webkit-transform: translate(-30%,0%); transform: translate(-30%,0%); background-image: url(../images/WtoW/industry_05.png); background-size: 600px 395px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 4; transition: 1.2s ease; } /*/////*/ #wtow_parallax_homes-1 { height: 457px; width: 600px; position: fixed; top:150%; left:10%; -webkit-transform: translate(15%,-5%); transform: translate(15%,-5%); background-image: url(../images/WtoW/early-life_09.jpg); background-size: 600px 457px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 3; transition: 1.3s ease; } #wtow_parallax_homes-2 { height: 458px; width: 600px; position: fixed; top:150%; left:15%; -webkit-transform: translate(-20%,-80%); transform: translate(-20%,-80%); background-image: url(../images/WtoW/early-life_12.jpg); background-size: 600px 458px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 3; transition: 1.6s ease; } #wtow_parallax_homes-3 { height: 363px; width: 600px; position: fixed; top:150%; right:10%; -webkit-transform: translate(0%,-90%); transform: translate(0%,-90%); background-image: url(../images/WtoW/early-life_16.jpg); background-size: 600px 363px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 2; transition: 1s ease; } #wtow_parallax_homes-4 { height: 450px; width: 287px; position: fixed; top:150%; right:20%; -webkit-transform: translate(0%,-10%); transform: translate(0%,-10%); background-image: url(../images/WtoW/sam-horse.jpg); background-size: 287px 450px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 2; transition: 1.4s ease; } /*/////*/ #wtow_parallax_lakes-1 { height: 391px; width: 600px; position: fixed; top:150%; left:7%; -webkit-transform: translate(0%,-90%); transform: translate(0%,-90%); background-image: url(../images/WtoW/early-life_01.png); background-size: 600px 391px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 5; transition: 1.3s ease; } #wtow_parallax_lakes-2 { height: 411px; width: 700px; position: fixed; top:150%; left:5%; -webkit-transform: translate(15%,0%); transform: translate(15%,0%); background-image: url(../images/WtoW/early-life_11.jpg); background-size: 700px 411px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 3; transition: 1.6s ease; } #wtow_parallax_lakes-3 { height: 475px; width: 650px; position: fixed; top:150%; right:12%; -webkit-transform: translate(0%,-90%); transform: translate(0%,-90%); background-image: url(../images/WtoW/early-life_13.jpg); background-size: 650px 475px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 2; transition: 1s ease; } #wtow_parallax_lakes-4 { height: 407px; width: 500px; position: fixed; top:150%; right:15%; -webkit-transform: translate(0%,5%); transform: translate(0%,5%); background-image: url(../images/WtoW/early-life_18.jpg); background-size: 500px 407px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 3; transition: 1.4s ease; } /*/////*/ #wtow_parallax_sports-1 { height: 400px; width: 312px; position: fixed; top:150%; right:20%; -webkit-transform: translate(0%,-85%); transform: translate(0%,-85%); background-image: url(../images/WtoW/early-life_03.jpg); background-size: 312px 400px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 5; transition: 1.3s ease; } #wtow_parallax_sports-2 { height: 391px; width: 600px; position: fixed; top:150%; left:15%; -webkit-transform: translate(-20%,-80%); transform: translate(-20%,-80%); background-image: url(../images/WtoW/early-life_04.jpg); background-size: 600px 391px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 3; transition: 1.6s ease; } #wtow_parallax_sports-3 { height: 480px; width: 600px; position: fixed; top:150%; right:10%; -webkit-transform: translate(0%,-10%); transform: translate(0%,-10%); background-image: url(../images/WtoW/early-life_05.png); background-size: 600px 480px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 2; transition: 1s ease; } #wtow_parallax_sports-4 { height: 360px; width: 550px; position: fixed; top:150%; left:20%; -webkit-transform: translate(0%,10%); transform: translate(0%,10%); background-image: url(../images/WtoW/early-life_06.jpg); background-size: 550px 360px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 4; transition: 1.4s ease; } /*/////*/ #wtow_parallax_activism-1 { height: 400px; width: 500px; position: fixed; top:150%; left:5%; -webkit-transform: translate(70%,0%); transform: translate(70%,0%); background-image: url(../images/WtoW/landfill-failure-sign.jpg); background-size: 500px 400px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 5; transition: 1.3s ease; } #wtow_parallax_activism-2 { height: 500px; width: 400px; position: fixed; top:150%; left:15%; -webkit-transform: translate(-20%,-80%); transform: translate(-20%,-80%); background-image: url(../images/WtoW/Anti-Waste-Management-landfill-T-shirt.png); background-size: 400px 500px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 3; transition: 1.6s ease; } #wtow_parallax_activism-3 { height: 500px; width: 400px; position: fixed; top:150%; left:10%; -webkit-transform: translate(150%,-100%); transform: translate(150%,-100%); background-image: url(../images/WtoW/no-dumps-no-deals.png); background-size: 400px 500px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 2; transition: 1s ease; } /*/////*/ #wtow_parallax_protest-1 { height: 405px; width: 720px; position: fixed; top:150%; left:5%; -webkit-transform: translate(50%,0%); transform: translate(50%,0%); background-image: url(../images/WtoW/Contemporary-Activism_Protest_00.png); background-size: 720px 405px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 5; transition: 1.3s ease; } #wtow_parallax_protest-2 { height: 401px; width: 600px; position: fixed; top:150%; left:15%; -webkit-transform: translate(-10%,-90%); transform: translate(-10%,-90%); background-image: url(../images/WtoW/Contemporary-Activism_Protest_01.png); background-size: 600px 401px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 3; transition: 1.6s ease; } #wtow_parallax_protest-3 { height: 367px; width: 550px; position: fixed; top:150%; right:15%; -webkit-transform: translate(0%,-85%); transform: translate(0%,-85%); background-image: url(../images/WtoW/students-high-school.jpg); background-size: 550px 367px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 2; transition: 1s ease; } #wtow_parallax_protest-4 { height: 400px; width: 600px; position: fixed; top:150%; right:15%; -webkit-transform: translate(0%,-10%); transform: translate(0%,-10%); background-image: url(../images/WtoW/Contemporary-Activism_Protest_04.png); background-size: 600px 400px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 2; transition: 1.4s ease; } #wtow_parallax_protest-5 { height: 460px; width: 600px; position: fixed; top:150%; left:25%; -webkit-transform: translate(-40%,-10%); transform: translate(-40%,-10%); background-image: url(../images/WtoW/Contemporary-Activism_Protest_05.png); background-size: 600px 460px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 4; transition: 1.1s ease; } #wtow_parallax_protest-6 { height: 401px; width: 600px; position: fixed; top:150%; left:25%; -webkit-transform: translate(10%,-100%); transform: translate(10%,-100%); background-image: url(../images/WtoW/Contemporary-Activism_Protest_03.png); background-size: 600px 401px; background-position: 0px 0px; background-repeat: no-repeat; /*overflow: hidden;*/ z-index: 4; transition: 1.2s ease; } /*//////////////////////////// TUTORIAL/STORY SETUP ////////////////////////////*/ .tutorialParent { position:fixed; top:0; left:100%; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; z-index:98; background-color: rgba(0,0,0,.66); } .tutorialParent p { position:absolute; top:50%; left:50%; width:70%; transform:translate(-50%,-50%); height:auto; color: #fff; font-family: freight-sans-pro, sans-serif; font-weight:300; font-size: 24px; text-align: left; vertical-align: middle; } /*//////////////////////////// FEATURED STORY ITEM ////////////////////////////*/ .featuredItemParent { position:fixed; top:0; left:100%; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; z-index:98; background-color: rgba(0,0,0,.66); } .featuredItemTextContainer{ position:absolute; width: 100%; height:auto; top:50%; left:100%; transform: translateY(-50%); opacity: 1; z-index:1; } .featuredArchiveItemHeading { position:relative; left:50%; transform: translateX(-50%); width:auto; font-family: kopius, serif; font-weight: 400; font-style: normal; color:#fff; font-size: 1.125em; font-size: 1.125rem; text-align: center; margin-bottom: 2.5em; margin-bottom: 2.5rem; padding-bottom: .01em; padding-bottom: .01rem; border-bottom: 1px #fff solid; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; display:inline-block; } .featuredItemTitle { position:relative; width:100%; font-family: kopius, serif; font-weight: 400; font-style: normal; color:#fff; font-size: 5em; font-size: 5rem; line-height: 6rem; line-height: 6rem; text-align: center; margin:0; margin-bottom:2em; margin-bottom:2rem; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; display:inline-block; } .featuredItemDescription { position:relative; left:50%; width:60%; transform: translateX(-50%); color: #fff; font-family: freight-sans-pro, sans-serif; font-weight:300; font-size: 24px; text-align: center; /*-webkit-font-smoothing: antialiased; font-smoothing: antialiased;*/ margin-bottom: 2em; margin-bottom: 2rem; display:inline-block; } .featuredItemID { position:relative; width:100%; font-family: freight-sans-pro, sans-serif; font-weight: 300; font-style: normal; color:#fff; font-size: 1.25em; font-size: 1.25rem; text-align: center; margin-bottom: .75em; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; display:inline-block; } .featuredItemID span { font-weight: 600; } /*//////////////////////////// ITEM FLAG ////////////////////////////*/ .itemFlag { position:fixed; left:81px; top:80px; transform: translateY(10px); width: 370px; height: 80px; background-color: rgba(194,75,62,.8); z-index:9997; /*extreme, but trying to get it on top*/ opacity:0; transition: .5s; transition-timing-function: ease-in-out; overflow:hidden; } /*#itemFlagHover { position:fixed; right:30px; top:30px; transform: translateY(10px); width: 46px; height: 46px; background-color: rgba(194,75,62,.8); z-index:1000; opacity:1; transition: .5s; transition-timing-function: ease-in-out; } #itemFlagHover:hover { background-color: rgba(194,75,62,1); }*/ /* .itemFlagIconStarred { position:absolute; height: 30px; width: 30px; top:calc(50% + 1px); left:calc(50% + 1px); transform: translate(-50%,-50%); background-image: url(../images/icon-archive-star-v2@2x.png); background-size: 30px 30px; background-position: 0px 0px; background-repeat: no-repeat; overflow: hidden; }*/ /*.itemFlagTitle { position:absolute; top:27px; left:80px; width: 330px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: freight-sans-pro, sans-serif; font-weight: 400; font-style: normal; color:#fff; font-size: 1.25em; font-size: 1.25rem; text-align: left; margin:0; margin-top: .125rem; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; white-space: nowrap; text-overflow: ellipsis; } .itemFlagActive { position:absolute; top:12px; left:80px; font-family: freight-sans-pro, sans-serif; font-weight: 400; font-style: normal; color:#fff; font-size: .875em; font-size: .875rem; margin:0; margin-top: .125rem; text-align: left; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .itemFlagID { position:absolute; top:12px; left:80px; font-family: freight-sans-pro, sans-serif; font-weight: 400; font-style: normal; font-size: .75em; font-size: .75rem; margin:0; margin-top: .125rem; text-align: left; color: rgba(255,255,255,.75); -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }*/ /* .itemDescription { position:relative; top:90px; left:20px; width:90%; height:0; color: rgba(255,255,255,1); font-family: freight-sans-pro, sans-serif; font-weight: 500; font-style: normal; font-size: 1em; font-size: 1rem; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .itemDescription span { font-weight: 400; } .readMore { position:absolute; bottom:8px; right:15px; font-family: freight-sans-pro, sans-serif; font-weight: 400; font-style: normal; font-size: .75em; font-size: .75rem; margin:0; margin-top: .125rem; text-align: left; color: rgba(255,255,255,.75); -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .readMore:hover { cursor: pointer; color: rgba(255,255,255,1); } */ .itemFlagThumb { position:absolute; top:6px; left:6px; height: 68px; width: 68px; -webkit-background-size: cover; background-position: center center; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /*//////////////////////////// VIDEOS & QUOTES ////////////////////////////*/ .quoteParent { position:fixed; width:100%; height:100%; top:0; left:0; margin:0; z-index:33; background-image: url(../images/img-shadow-mary-quote.png); background-size: 100% auto; background-position:bottom; background-repeat: no-repeat; opacity:1; transition: opacity 1s; } .quoteText { position:absolute; width: 60%; bottom:90px; right:120px; font-family: Kopius, sans-serif; font-style:italic; font-size: 3em; font-size: 3rem; font-weight: 400; line-height:3.75em; line-height:3.75rem; margin:0; text-align:right; color:#fff; z-index:1; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .quoteText p { margin-bottom:0; } .byLine { font-size: 1.5em; font-size: 1.5rem; margin-top: 1em; margin-top: 1rem; line-height: 1.75rem; display: inline-block; font-style:normal; } .bgStill { position:absolute; top:0; left:0; width:100%; height:100%;/*To allow for it to stay on screen whe vidoe appears*/ z-index:98;/*one less than video mediaplayer*/ opacity:1; transition: opacity 1s; /*display:none;*/ /*transform: translateZ(-5px) scale(2);*/ overflow:hidden; } .bgStillSmaller { position:relative; top:0%; left:0; width:100%; height:100%; z-index:98;/*one less than video mediaplayer*/ opacity:1; transition: opacity 1s; /*display:none;*/ /*transform: translateZ(-5px) scale(2);*/ } /* #videoPlayer { left:100%; } */ /* .playBtn { position:fixed; left:200%; top:50%; width:150px; height:150px; transform: translate(-50%, -50%); border-radius: 50%; display: inline-block; background-color: rgba(194,76,62,1); z-index:95; opacity:0; transition: opacity .5s; } .playBtn:hover { background-color: rgba(230,106,92,1); cursor: pointer; } .playBtn:before { font-family: 'FontAwesome', sans-serif; content: "\f04b"; font-size:3em; font-size:3rem; color: #FFF; text-align:center; display: inline-block; vertical-align: middle; line-height: normal; padding-left:3.875em; padding-left:3.875rem; padding-top:3.313em; padding-top:3.313rem; } */ /*//////////////////////////// COLLAGE PIECES ////////////////////////////*/ .fullWidthCollage { position:relative; top:0; left:0; width:100%; height:auto; z-index:99; opacity:1; /*display:none;*/ /*transform: translateZ(-5px) scale(2);*/ } /*//////////////////////////// WORD CLOUD ////////////////////////////*/ #tagcloud { z-index:0; overflow:hidden; height:100%; } /*//////////////////////////// AUDIO ////////////////////////////*/ #btn-rewind-swamp, #btn-rewind-huntfish, #btn-rewind-mazon { width: 40px; height: 39px; background-image: url(../images/btn-rewind@2x.png); background-size: 40px 39px; background-repeat: no-repeat; /*background-position:right;*/ /*background-size: contain;*/ color: #fff; text-align: center; display: inline-block; vertical-align: middle; transition: all 0.2s ease 0; } #btn-forward-swamp, #btn-forward-huntfish, #btn-forward-mazon { width: 40px; height: 39px; background-image: url(../images/btn-forward@2x.png); background-size: 40px 39px; background-repeat: no-repeat; /*background-position:right;*/ /*background-size: contain;*/ color: #fff; text-align: center; display: inline-block; vertical-align: middle; transition: all 0.2s ease 0; } #btn-play-pause1, #btn-play-pause2, #btn-pause-swamp, #btn-pause-huntfish, #btn-pause-mazon { position:relative; border: 2px solid #fff; } #btn-play-pause1 i, #btn-play-pause2 i, #btn-play-swamp i, #btn-play-huntfish i, #btn-play-mazon i { position:absolute; top:calc(50% + 1px); left:calc(50% + 2px); transform:translate(-50%,-50%); } #progress-bar, #progress-bar2, #progress-bar-swamp, #progress-bar-huntfish, #progress-bar-mazon { width: 100%; background-color: #ffe7e4; height: 5px; position: relative; margin: 1em 0; } #progress, #progress2, #progress-swamp, #progress-huntfish, #progress-mazon { background-color: #cb4839; height: 5px; position: absolute; left: 0; transition: width 2.5s linear 0; } /*.btn-rewind { position: relative; top: 0%; width: background-image: url(../images/img-farm-woman.jpg); background-repeat: no-repeat; background-position:right; background-size: contain; z-index: 35; transition: 1.5s ease; }*/ /*//////////////////////////// YEARS ////////////////////////////*/ #textYears { position:fixed; left:90px; transform:translateX(-5%); bottom:-5px; width:auto; height:auto; z-index:24; opacity:0; transition: 1s; } #textYears p { font-family:museo-slab,serif; font-weight:300; font-style:normal; font-size:9em; font-size:9rem; color: rgba(255,255,255,.66); display:inline-block; margin:0; padding:0; line-height:0; } #textYearsLarger { position:fixed; left:90px; transform:translateX(-5%); bottom:-5px; width:auto; height:auto; z-index:24; opacity:0; transition: 1s; } #textYearsLarger p { font-family:museo-slab,serif; font-weight:300; font-style:normal; font-size:12em; font-size:12rem; color: rgba(255,255,255,.66); display:inline-block; margin:0; padding:0; line-height:0; } /*////////////////////////////////////////// //////////////////////////////////////////// //VISIONS CAROUSEL CUSTOM //////////////////////////////////////////// //////////////////////////////////////////*/ #visionsText { position: absolute; bottom: 120px; width:auto; max-width:80%; left:50%; transform: translateX(-50%); height:auto; background-color:rgba(194,76,62,.95); font-family: freight-sans-pro, sans-serif; font-weight:400; font-size: 1em; font-size: 1rem; text-align: left; color:white; padding: 2em; padding: 2rem; z-index:1; } div#carouselTwo { perspective: 1200px; background: #100000; /* padding-top: 10%; */ font-size:0; margin-bottom: 3rem; /* overflow: hidden; */ } figure#spinner { transform-style: preserve-3d; height: 550px; transform-origin: 50% 50% -2500px; transition: 1s; } figure#spinner img { width: 50%; max-width: 800px; min-width: 800px; position: absolute; left: calc(50% - 400px); transform-origin: 50% 50% -2500px; outline:1px solid transparent; } /* figure#spinner img:nth-child(1) { transform:rotateY(0deg); } figure#spinner img:nth-child(2) { transform: rotateY(-51.4deg); } figure#spinner img:nth-child(3) { transform: rotateY(-102.8deg); } figure#spinner img:nth-child(4) { transform: rotateY(-154.3deg); } figure#spinner img:nth-child(5){ transform: rotateY(-205.7deg); } figure#spinner img:nth-child(6){ transform: rotateY(-257.1deg); } figure#spinner img:nth-child(7){ transform: rotateY(-308.6deg); } */ figure#spinner img:nth-child(1) { transform:rotateY(0deg); } figure#spinner img:nth-child(2) { transform: rotateY(-45deg); } figure#spinner img:nth-child(3) { transform: rotateY(-90deg); } figure#spinner img:nth-child(4) { transform: rotateY(-135deg); } figure#spinner img:nth-child(5){ transform: rotateY(-180deg); } figure#spinner img:nth-child(6){ transform: rotateY(-225deg); } figure#spinner img:nth-child(7){ transform: rotateY(-270deg); } figure#spinner img:nth-child(8){ transform: rotateY(-315deg); } div#carouselTwo ~ span { color: #fff; margin: 5%; display: inline-block; text-decoration: none; font-size: 2rem; transition: 0.6s color; position: relative; margin-top: -6rem; border-bottom: none; line-height: 0; } div#carouselTwo ~ span:hover { color: #888; cursor: pointer; } .visionsArrow { position: absolute; bottom: 150px; width: 50px; height: 50px; text-align: center; /* background: rgba(0,0,0,.8); */ background: #cb4839; color: #fff; /*display:none;*/ text-decoration: none; /*text-shadow: 0 0 1px rgba(0,0,0,.7);*/ border:none; font: Arial, sans-serif; font-size: 1.25rem; scale:1; transition: .25s; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 0 0 0px rgba(0,0,0,0); -moz-box-shadow: 0 0 0px rgba(0,0,0,0); box-shadow: 0 0 0px rgba(0,0,0,0); } #visionsArrowLeft { float:left;left:150px; /* padding-right:.15rem; */ padding-top:.825rem; } #visionsArrowRight { float:right;right:150px; /* padding-left:.15rem; */ padding-top:.825rem; } .visionsArrow:hover { background: #ef7365; cursor:pointer; scale:1.1; } /*//////////////////////////*/ /*//////////////////////////*/ /*UNUSED CAROUSEL*/ /*//////////////////////////*/ /*//////////////////////////*/ /* .myPanels{ width: 210px; height: 140px; position: relative; perspective: 1000px; margin-left: 400px; margin-top: 50px; } #carousel{ width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; } #carousel .pane{ margin: 0; display: block; position: absolute; width: 100%; height: 100%; left: 10px; top: 10px; border: 2px solid lightgray; font-size: 60px; image-rendering: crisp-edges; } #carousel { transition: transform 1.0s; } .pane{ text-align: center; background-size: cover; background-repeat: no-repeat; } #pane_1 { background-image: url(../images/WtoW/Future-Visions01.jpg); } #pane_2 { background-image: url(../images/WtoW/Future-Visions03.jpg); } #pane_3 { background-image: url(../images/WtoW/Future-Visions02.jpg); } #pane_4 { background-image: url(../images/WtoW/Future-Visions04.jpg); } #pane_5 { background-image: url(../images/WtoW/Future-Visions05.jpg); } #pane_6 { background-image: url(../images/WtoW/Future-Visions06.jpg); } #pane_7 { background-image: url(../images/WtoW/Future-Visions07.jpg); } #pane_8 { background-image: url(../images/WtoW/Future-Visions08.jpg); } .carouselButtons{ position:absolute; left:50%; transform: translateX(-50%); bottom: 125px; margin-top: 60px; color:#fff; padding:1rem; background-color: #000; outline:1px solid #fff; } */