/*//////////////////////////////////////////////////////*/
/*LAZY LOAD*/
/*//////////////////////////////////////////////////////*/

#closing_Map.lazy-loaded {background-image: url(../images/COTM-Map-1.jpg);}
#closing_Map-Jobs-Lost.lazy-loaded {background-image: url(../images/COTM-Map-2.jpg);}
#gatesImage.lazy-loaded {background-image: url(../images/COTM_Unemployment-Gates.jpg);}
#gatesImageTwo.lazy-loaded {background-image: url(../images/bg-gates-closed.jpg);}
#tapesImage.lazy-loaded {background-image: url(../images/COTM-object_Kodak-Tapes_wide.jpg);}
#tapesImageSplit.lazy-loaded {background-image: url(../images/COTM-object_Kodak-Tapes_CU.jpg);}
/*#tapesImageCU.lazy-loaded {background-image: url(../images/bg-vhs-tapes-CU.jpg);}*/
#wesImageQuote.lazy-loaded {background-image: url(../images/COTM-bg_wes-quote.jpg);}
#COTM_migrants.lazy-loaded {background-image: url(../images/COTM-bg_steel-workers.jpg);mix-blend-mode: multiply;opacity:1;}
#COTM_cauldron.lazy-loaded {background-image: url(../images/COTM-bg_cauldron-workers_v4.jpg);mix-blend-mode: color-burn;opacity:1;}
#COTM_hardships.lazy-loaded {background-image: url(../images/COTM-bg_hardships_v2.jpg);mix-blend-mode:multiply;opacity:1;}
/*#COTM_ramos.lazy-loaded {background-image: url(../images/COTM-bg_hot-steel-1.jpg);mix-blend-mode: color-burn;}
#COTM_shirt.lazy-loaded {background-image: url(../images/COTM-bg_hot-steel-2.jpg);mix-blend-mode: overlay;}*/
#COTM_unemployment-office.lazy-loaded {background-image: url(../images/COTM-bg_unemployment-office.jpg);}
#COTM_unemployment-office-second.lazy-loaded {background-image: url(../images/COTM-bg_unemployment-office.jpg);}
/*#COTM_unemployment-office-wide.lazy-loaded {background-image: url(../images/COTM-bg_unemployment-office-wide.jpg);}*/
#COTM_edged-out.lazy-loaded {background-image: url(../images/COTM-bg_workers-decades.jpg);}
#COTM_edged-out-second.lazy-loaded {background-image: url(../images/COTM-bg_workers-decades.jpg);}
#COTM_edged-out-third.lazy-loaded {background-image: url(../images/COTM-bg_workers-decades.jpg);}
#COTM_women-at-table.lazy-loaded {background-image: url(../images/COTM-bg_women-at-table.jpg);}
#COTM_rosaDorineImageQuote.lazy-loaded {background-image: url(../images/COTM-bg_Dorine-Rose_Video01_Image-still.jpg);}
#COTM_overcome.lazy-loaded {background-image: url(../images/COTM-bg_Solidarity-Day.jpg);}
#COTM_had-their-back.lazy-loaded {background-image: url(../images/COTM-bg_Solidarity-Day_We-Are-One.jpg);}
#COTM_map-each-story.lazy-loaded {background-image: url(../images/COTM-Map-3.jpg);}
#COTM_rosa-dorine-2.lazy-loaded {background-image: url(../images/COTM-bg_Dorine-Rose_Video02_Image-still.jpg);}
#COTM_wisconsin-entrance.lazy-loaded {background-image: url(../images/COTM-bg_Wisconsin-Steel_Bubble-Letters.jpg);}
#COTM_wisconsin-entrance-second.lazy-loaded {background-image: url(../images/COTM-bg_Wisconsin-Steel_Bubble-Letters.jpg);}
#COTM_return-tapes.lazy-loaded {background-image: url(../images/COTM-bg_Kodak-Tapes_wide_punch-in.jpg);}
#COTM_gallery-1.lazy-loaded {background-image: url(../images/COTM-bg_Gallery-Inside-Mill_01.jpg);}
#COTM_gallery-2.lazy-loaded {background-image: url(../images/COTM-bg_Gallery-Inside-Mill_02.jpg);}
#COTM_gallery-3.lazy-loaded {background-image: url(../images/COTM-bg_Gallery-Inside-Mill_03.jpg);}
#COTM_gallery-4.lazy-loaded {background-image: url(../images/COTM-bg_Gallery-Inside-Mill_04.jpg);}
#COTM_next-gen.lazy-loaded {background-image: url(../images/COTM-bg_dorine-steel-org.jpg);}
#COTM_dorine-teach.lazy-loaded {background-image: url(../images/COTM-bg_dorine-steel-org.jpg);}
#COTM_steven.lazy-loaded {background-image: url(../images/COTM-bg_steven.jpg);}
#COTM_steven-second.lazy-loaded {background-image: url(../images/COTM-bg_steven.jpg);}
#COTM_local-gilbert.lazy-loaded {background-image: url(../images/COTM-bg_local-65-manuel-garcia.jpg);}
#COTM_national-map.lazy-loaded {background-image: url(../images/COTM-bg_map-placeholder.jpg);}
#COTM_national-map-second.lazy-loaded {background-image: url(../images/COTM-national-map-still.jpg);}
#COTM_letters-placeholder.lazy-loaded {background-image: url(../images/COTM-bg_letters-placeholder.jpg);}
#COTM_wes-wall-placeholder.lazy-loaded {background-image: url(../images/COTM-bg_wes-wall-placeholder.jpg);}
#COTM_women-contact-sheets.lazy-loaded {background-image: url(../images/COTM_bg-contact-sheets.jpg);}




/*////////////////////////////
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;
}


/*//////////////////////////////////////////////////////*/
/*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;
}

/*//////////////////////////////////////////////////////*/
/*LETTER EXCERPTS*/
/*//////////////////////////////////////////////////////*/

#viewLettersParent {
    position:fixed;
    width:auto;
    height:auto;
    top:60%;
    left:50%;
    transform:translateX(-50%);
    transition: opacity 1s ease;
    opacity:0;
    z-index:9997;/*one below black load-cover*/
    margin-top:3em;
    margin-top:3rem;
    transition: opacity 2s ease;
}

#viewLetters {
    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, background-color .5s ease-in-out, color .5s ease-in-out;
    opacity:1;
    z-index:9998;/*one below black load cover*/
}

#viewLetters:hover {
    background-color: #fff;
    color:#000;
    cursor: pointer;
}

#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;
}


/*//////////////////////////////////////////////////////*/
/*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;
}

.textSplitScreen {
    position:fixed;
    width:30%;
    height:auto;
    opacity:0;
    top:50%;
    display:inline-block;
    /*transform:translateY(-50%);*/
    right:10%;
    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;
}

.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;
}

.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;
}

.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;
}

.hideTextSplit {
    opacity:0;
    transition: opacity 1s, transform 1s;
    transition-delay: 0s;
    transform:translate(0%,-45%);
}

.delayAndMoveTextSplit {
    opacity:1;
    transition: opacity 2s, transform 2s;
    transition-delay: .5s;
    transform:translate(0%,-50%);
}

.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;
}

.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;
}


/*//////////////////////////////////////////////////////*/
/*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: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;
 }

.lowerThirds {
    position:fixed;
    width:auto;
    height:auto;
    /*bottom:12%;*/
    right:30px;
    bottom:60px;
    z-index:40;
    opacity: 1;
    transition: opacity 1s;
    pointer-events:none;
}

.lowerThirds span {
    position:relative;
    width:auto;
    height:auto;
    font-family: freight-sans-pro, sans-serif;
    font-size: 1em;
    font-size: 1rem;
    padding:.25em .75em .25em .75em;
    padding:.25rem .75rem .25rem .75rem;
    /*margin-bottom:.25rem;*/
    margin:0;
    font-weight:300;
    background-color:rgba(6,15,20,.75);
    float:right;
    text-align:right;
    color:#fff;
    opacity: 1;
    display:inline-block;
}

.lowerThirdsLeft {
    position:fixed;
    width:auto;
    height:auto;
    /*bottom:12%;*/
    left:30px;
    bottom:60px;
    z-index:40;
    opacity: 1;
    transition: opacity 1s;
    pointer-events:none;
}

.lowerThirdsLeft span {
    position:relative;
    width:auto;
    height:auto;
    font-family: freight-sans-pro, sans-serif;
    font-size: 1em;
    font-size: 1rem;
    padding:.25em .75em .25em .75em;
    padding:.25rem .75rem .25rem .75rem;
    /*margin-bottom:.25rem;*/
    margin:0;
    font-weight:300;
    background-color:rgba(6,15,20,.75);
    float:left;
    text-align:left;
    color:#fff;
    opacity: 1;
    display:inline-block;
}

.lowerThirdsLeftFootnote {
    position:fixed;
    left:20px;
    bottom:60px;
    z-index:40;
    width:25%;
    height:auto;
    font-family: freight-sans-pro, sans-serif;
    font-size: .75em;
    font-size: .75rem;
    padding:.5em .875em .675em .875em;
    padding:.5rem .875rem .675rem .875rem;
    /*margin-bottom:.25rem;*/
    margin:0;
    font-weight:300;
    background-color:rgba(6,15,20,.66);
    float:left;
    text-align:left;
    color:#fff;
    opacity: 1;
    display:inline-block;
}

.lowerThirdsLeftFootnote_standalone {
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:40;
    width:25%;
    height:auto;
    font-family: freight-sans-pro, sans-serif;
    font-size: .75em;
    font-size: .75rem;
    padding:.5em .875em .675em .875em;
    padding:.5rem .875rem .675rem .875rem;
    /*margin-bottom:.25rem;*/
    margin:0;
    font-weight:300;
    background-color:rgba(6,15,20,.66);
    float:left;
    text-align:left;
    color:#fff;
    opacity: 1;
    display:inline-block;
}

.lowerThirdsLeftGallery {
    position:fixed;
    width:auto;
    height:auto;
    /*bottom:12%;*/
    left:120px;
    bottom:60px;
    z-index:9999;
    opacity: 1;
    transition: opacity 1s;
    pointer-events:none;
}

.lowerThirdsLeftGallery span {
    position:relative;
    width:auto;
    height:auto;
    font-family: freight-sans-pro, sans-serif;
    font-size: 1.25em;
    font-size: 1.25rem;
    padding:.5em .875em .675em .875em;
    padding:.5rem .875rem .675rem .875rem;
    /*margin-bottom:.25rem;*/
    margin:0;
    font-weight:300;
    background-color:rgba(6,15,20,.66);
    float:left;
    text-align:left;
    color:#fff;
    opacity: 1;
    display:inline-block;
}

#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;
}

#playButtonParent {
    position:fixed;
    left:0%;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.6);
    opacity:1;
    display:none;
    z-index:43;/*one below closed captions... but may need to change*/
}

.playBtn {
    position:fixed;
    left:50%;
    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:34;/*one under embedded video?*/
    opacity:1;
    /*transition: opacity .5s;*/
}

.playBtn:hover {
    background-color: rgba(230,106,92,1);
    cursor: pointer;
}

.playBtn i {
    color:#fff;
    font-size:3em;
    font-size:3rem;
    color: #FFF;
    text-align:center;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    padding-left:3.75em;
    padding-left:3.75rem;
    padding-top:3.313em;
    padding-top:3.313rem;
}


/*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;
}

/*
.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;
}*/


/*////////////////////////////
VIDEO PLAYER
////////////////////////////*/

/*#orangeParent, .orangeParent {
	position: absolute;
	top:0;
	left: 30px;
    height:100%;
    width:calc(100% - 30px);
    z-index:1;
}

#video-orange-scrub {
	position: relative;
	top:0;
	left: 0;
    height:100%;
    width:0%;
    z-index:1;
    background:rgba(237,125,79,.8);
    -webkit-transition: background .3s;
   -moz-transition: background .3s;
   -o-transition: background .3s;
   -ms-transition: background .3s;
   transition: background .3s;
}


.mediaplayer {
    position:fixed;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    opacity:0;
    transition: opacity .5s;
}

        
.mediacontrols, .mediacontrolsBase {
    position:absolute;
    bottom:0px;
    z-index:99999;
    width:100%;
}
        
.scrubber {
    position:relative;
    top:0px;
    width:100%;
    display: inline-block;
    opacity: 0;
   -webkit-transition: opacity .3s;
   -moz-transition: opacity .3s;
   -o-transition: opacity .3s;
   -ms-transition: opacity .3s;
   transition: opacity .3s;
    background:rgba(51,51,51,.7);
}

.mediaplayer:hover .scrubber {
   opacity: .9;
}

.scrubber:hover #video-orange-scrub{
    background:rgba(200,75,39,1);
}

.seekbar {
    position:relative;
    right:0;
    height:20px;
    float:right;
    width:calc(100% - 30px);
    z-index:2;
    opacity:0;
    display:inline-block;
}

#play-pause {
    position:relative;
    font-size:12px;
    text-align:center;
    top:0px;  
    height:20px;
    width:30px;
	background: rgba(0,0,0,.5);
	border: 0;
	color:#999;
    display:inline-block;
    outline: none;
}

#play-pause:hover {
    background: rgba(0,0,0,.8);
    color:#fff;
	cursor: pointer;
}

.timecode {
    color:#fff;
    position:absolute;
    left: 36px;
    z-index: 2;
    top: 3px;
    font-family: "hindlight", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

video::cue {
    background:rgba(0,0,0,1);
}
*/


/*////////////////////////////
MAPS
////////////////////////////*/

#mapImage {
    position:absolute;
    top:0;
    height: 100%;
    width: 100%;
    /*background: url('../images/cotm-map-test-map.jpg');*/
    background: url('../images/COTM-bg-map-mills.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  /*.hotspot {
    position: absolute;
    z-index: 1;
    background: url('../images/COTM-hotspot-inland.svg');
    background-size: 100% 100%;*/
    /*background-blend-mode:exclusion;*/
    /*opacity:0;
    transition: opacity .25s;
  }*/
  
  #Layer_1 {
      position:absolute;
      z-index: 1;
      height:243px;
      width:295px;
  }
  
  /*
  .hotspot:hover {
      opacity:1;
      cursor:pointer;
  }
  */
  
  .hotspots {
    position:absolute;
    z-index: 1;
    opacity:1;
    mix-blend-mode:multiply;
    pointer-events: none;
  }

  .hotspots3 {
    position:absolute;
    z-index: 1;
    opacity:1;
    mix-blend-mode:multiply;
    pointer-events: none;
  }
  
  .paths {
    pointer-events: auto;
    transition: fill .75s;
  }
  
  .hotspots path:hover {
    fill: #ef7365;
    pointer-events: auto;
    outline: 1px solid #fff;
  }
  
  .label {
      position: absolute;
      right:30%;
      top:50%;
      background-color: rgba(0,0,0,.7);
      width:auto;
      display:inline-block;
      font-family: freight-sans-pro, sans-serif;
      font-weight:400;
      font-size: 18px;
      text-align: center;
      color: #fff;
      padding: .75rem;
  }
  
  #hotspot_acme {
      z-index:2;
  }
  
  .tags, .jobs, .jobsParent {
    position:absolute;
    z-index: 2;
    opacity:1;
    pointer-events: auto;
  }
  
  #tooltip {
    width:260px;
    height:260px;
    top: -500px;
    left:-500px;
    background-color: #ef7365;
    position:fixed;
    display:none;
    color:white;
    z-index:9998;
  }
  
  #tooltip span {
    font-family: freight-sans-pro, sans-serif;
    font-weight:400;
    font-size: 21px;
    text-align: center;
    margin-top:12px;
    margin-left:15px;
    display:inline-block;
  }

 #tooltipNames,  #tooltipNames-2 {
    width:auto;
    height:auto;
    top: -500px;
    left:-500px;
    background-color: rgba(0,0,0,.8);
    position:fixed;
    display:none;
    color:white;
    z-index:9998;
  }

#tooltipNames-3 {
    width:775px;
    height:auto;
    top: -500px;
    left:-500px;
    background-color: rgba(0,0,0,.8);
    position:fixed;
    display:none;
    color:white;
    z-index:9998;
  }
  
  #tooltipNames span, #tooltipNames-2 span, #tooltipNames-3 span {
    font-family: freight-sans-pro, sans-serif;
    font-weight:400;
    font-size: .875em;
    font-size: .875rem;
    text-align: left;
    margin:12px;
    display:inline-block;
  }

  #tooltipNames-span-3 span {
    font-family: freight-sans-pro, sans-serif;
    font-weight:400;
    font-size: .7em;
    font-size: .7rem;
    color: rgba(255,255,255,.75);
    display:inline-block;
    white-space: pre-line;
  }
  
  .theMills {
    position:absolute;
    width:240px;
    height:200px;
    bottom:10px;
    left:10px;
    background:cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  
  #millImage {
    background-color: black;
  }
  
  #southworksImage {
    background-image:url(../images/COTM-map-image_southworks.jpg);
  }
  
  #wisconsinImage {
    background-image:url(../images/COTM-map-image_wisconsin.jpg);
  }
  
  #inlandImage {
    background-image:url(../images/COTM-map-image_inland.jpg);
  }
  
  #youngstownImage {
    background-image:url(../images/COTM-map-image_youngstown.jpg);
  }
  
  #republicImage {
    background-image:url(../images/COTM-map-image_republic.jpg);
  }
  
  #iroquoisImage {
    background-image:url(../images/COTM-map-image_iroquois.jpg);
  }
  
  #garyImage {
    background-image:url(../images/COTM-map-image_gary.jpg);
  }
  
  #acmeImage {
    background-image:url(../images/COTM-map-image_acme.jpg);
  }
  
  .jobsParent {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 90%;
    color:white;
  }


.upperThirdsTextMap {
    position:fixed;
    width:auto;
    height:auto;
    /*bottom:12%;*/
    right:10%;
    top:12%;
    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;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE 10+ */
    user-select: none;         /* Standard syntax */
}

.upperThirdsTextMap_standalone {
    position:fixed;
    width:40%;
    height:auto;
    /*bottom:12%;*/
    right:5%;
    top:15%;
    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;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE 10+ */
    user-select: none;         /* Standard syntax */
}

.upperTextLargeMap_standalone {
    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;
}

.upperThirdsTextMap3 {
    position:fixed;
    width:auto;
    height:auto;
    /*bottom:12%;*/
    right:10%;
    top:18%;
    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;
}

.upperTextLargeMap {
    position: relative;
    text-align: center;
    font-family: kopius, serif;
    font-weight: 400;
    font-style: normal;
    color:#fff;
    font-size: 3.75em;
    font-size: 3.75rem;
    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;
}

.upperTextRegularMap2 {
    position: relative;
    top:90px;
    width:480px;
    text-align: left;
    font-family: kopius, serif;
    font-weight: 400;
    font-style: normal;
    color:#fff;
    font-size: 1.5em;
    font-size: 1.5rem;
    margin-bottom:0;
    margin-top:0;
    line-height: 1.5rem;
    line-height: 1.5em;
}

.upperTextRegularMap3 {
    position: relative;
    width:480px;
    text-align: center;
    font-family: kopius, serif;
    font-weight: 400;
    font-style: normal;
    color:#fff;
    font-size: 1.875em;
    font-size: 1.875rem;
    margin-bottom:0;
    margin-top:0;
    line-height: 1.5rem;
    line-height: 1.5em;
}

.upperTextSmallMap {
    position: relative;
    width:500px;
    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;
}
  
  .turnRed, .stayYellow {
      transition: fill .5s, opacity .5s;
  }

  /*/////////////////////////*/
  /*Second Jobs Lost Map*/
  /*/////////////////////////*/
  #mapImage-2 {
    position:absolute;
    top:0;
    height: 100%;
    width: 100%;
    /*background: url('images/cotm-map-test-map.jpg');*/
    background: url('../images/COTM-bg-map-mills.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  #Layer_1-2 {
      position:absolute;
      z-index: 1;
      height:243px;
      width:295px;
  }
  
  #hotspot_acme-2 {
      z-index:2;
  }
  
  #tag_acme-red-2 {
    transition: opacity .75s;
  }
  
  #tag_youngstown-red-2 {
    transition: opacity 2s;
  }
  
  #tag_republic-red-2 {
    transition: opacity 1.5s;
  }
  
  #tag_wisconsin-red-2 {
    transition: opacity 1s;
  }
  
  #tag_iroquois-red-2 {
    transition: opacity .5s;
  }
  
  #tag_southworks-red-2 {
    transition: opacity 4.25s;
  }
  
  #tooltip-2 {
    width:260px;
    height:260px;
    background-color: #ef7365;
    position:fixed;
    top: -500px;
    left:-500px;
    display:none;
    color:white;
    z-index:99;
  }
  
  #tooltip-2 span {
    font-family: freight-sans-pro, sans-serif;
    font-weight:400;
    font-size: 21px;
    text-align: center;
    margin-top:12px;
    margin-left:15px;
    display:inline-block;
  }
  
  #millImage-2 {
    background-color: black;
  }
  
  #southworksImage-2 {
    background-image:url(../images/COTM-map-image_southworks.jpg);
  }
  
  #wisconsinImage-2 {
    background-image:url(../images/COTM-map-image_wisconsin.jpg);
  }
  
  #inlandImage-2 {
    background-image:url(../images/COTM-map-image_inland.jpg);
  }
  
  #youngstownImage-2 {
    background-image:url(../images/COTM-map-image_youngstown.jpg);
  }
  
  #republicImage-2 {
    background-image:url(../images/COTM-map-image_republic.jpg);
  }
  
  #iroquoisImage-2 {
    background-image:url(../images/COTM-map-image_iroquois.jpg);
  }
  
  #garyImage-2 {
    background-image:url(../images/COTM-map-image_gary.jpg);
  }
  
  #acmeImage-2 {
    background-image:url(../images/COTM-map-image_acme.jpg);
  }

  /*/////////////////////////*/
  /*Third Mill Map*/
  /*/////////////////////////*/
  #mapImage-3 {
    position:absolute;
    top:0;
    height: 100%;
    width: 100%;
    background: url('../images/COTM-bg-map-mills.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  

  /*National Map*/

  .mapLegend {
    position: absolute;
    left:40px;
    bottom:80px;
    width:50%;
    height:auto;
    z-index: 5;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    font-weight:400;
    font-size: 14px;
    text-align: left;
  }

  .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: #f4d269;
  }

  .orangeKey {
    background-color: #e7ac4b;
  }

  .darkorangeKey {
    background-color: #a45926;
  }

  .redKey {
    background-color: #640f0a;
  }

  #hiddenImages {
    position:absolute;
    top:-1000px;
    z-index:-99
  }


/*////////////////////////////
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;
}

.gridItem-LeftBottom, .gridItem-RightBottom, .gridItem-LeftTop, .gridItem-RightTop {
    position:relative;
    /*border: 1px solid black;*/
    background:cover;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity:.85;
    background-color: #f18e1a;
    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-helmet {
    background-image:url("../images/COTM-objects-grid_helmet.jpg");
}

#grid-beam {
    background-image:url("../images/COTM-objects-grid_beam.jpg");
}

#grid-bar {
    background-image:url("../images/COTM-objects-grid_bar.jpg");
}

#grid-button {
    background-image:url("../images/COTM-objects-grid_button.jpg");
}

#grid-offrenda {
    background-image:url("../images/COTM-objects-grid_offrenda.jpg");
}

#grid-threeguys {
    background-image:url("../images/COTM-objects-grid_three-guys.jpg");
}

#grid-newsstand {
    background-image:url("../images/COTM-objects-grid_newsstand.jpg");
}

#grid-pulpit {
    background-image:url("../images/COTM-objects-grid_pulpit.jpg");
}

#grid-badge {
    background-image:url("../images/COTM-objects-grid_badge.jpg");
}

#grid-wisconsin {
    background-image:url("../images/COTM-objects-grid_wisconsin.jpg");
}

#grid-alice {
    background-image:url("../images/COTM-objects-grid_alice.jpg");
}

.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;
    /*border:5px solid #e46c60;*/
}


/*////////////////////////////
OVERLAYS
////////////////////////////*/

#overlay-1 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,.5);
    z-index:24;/*just below page-slides*/
    opacity:0;
    transition: opacity 1s;
}

.generalOverlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,.5);
    z-index:1;
    opacity:1;
    pointer-events: none;
    transition: opacity 1s;
}

.generalOverlayLighter {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,.25);
    z-index:1;
    opacity:1;
    pointer-events: none;
    transition: opacity 1s;
}

.generalOverlaySlightlyDarker {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,.6);
    z-index:1;
    opacity:1;
    pointer-events: none;
    transition: opacity 1s;
}

.generalOverlayDarker {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,.75);
    z-index:1;
    opacity:1;
    pointer-events: none;
    transition: opacity 1s;
}

.generalOverlayBehind {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,.5);
    z-index:1;
    opacity:1;
    pointer-events: none;
    transition: opacity 1s;
}

#overlay-2 {
    position:fixed;
    top:0;
    width:100%;
    height:100%;
    left:100%;
    background-color: rgba(0,0,0,.33);
    z-index:28;
    opacity:0;
    transition: opacity 1s;
}

#overlay-image {
    position:fixed;
    top:0;
    left:100%;
    width:100%;
    height:100%;
    background: url(../images/img-barge-overlay.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index:36;/*one aboev highest level video player*/
    opacity:0;
    pointer-events: none;
    transition: opacity 1s;
}

#overlay-stroke {
    position:fixed;
    top:0;
    left:100%;
    width:100%;
    height:100%;
    background: url(../images/img-barge-overlay.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index:35;/*one below overlay-image*/
    opacity:0;
    transition: opacity 1s;
}


/*////////////////////////////
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:0;
    left:0;
    /*transform:translate(-50%,-50%);*/
    /*border: 10px solid #fff;*/
    width: 100%;
    height: 100%;
    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.firstGalleryImage {
    background-image: url(../images/mdm-photo-gallery-1.png); 
}

.jcarousel li.secondGalleryImage {
    background-image: url(../images/mdm-photo-gallery-2.png); 
}

.jcarousel li.thirdGalleryImage {
    background-image: url(../images/mdm-photo-gallery-3.png); 
}

.jcarousel li.fourthGalleryImage {
    background-image: url(../images/mdm-photo-gallery-4.png); 
}

.jcarousel li.fifthGalleryImage {
    background-image: url(../images/mdm-photo-gallery-5.png); 
}

.jcarousel li.sixthGalleryImage {
    background-image: url(../images/mdm-photo-gallery-6.png); 
}

.jcarousel li.seventhGalleryImage {
    background-image: url(../images/mdm-photo-gallery-7.png); 
}

.jcarousel li.eigthGalleryImage {
    background-image: url(../images/mdm-photo-gallery-8.png); 
}

.jcarousel li.ninthGalleryImage {
    background-image: url(../images/mdm-photo-gallery-9.png); 
}

.jcarousel li.COTM_firstGalleryImage {
    background-image: url(../images/COTM-bg_Gallery-Inside-Mill_01.jpg); 
}

.jcarousel li.COTM_secondGalleryImage {
    background-image: url(../images/COTM-bg_Gallery-Inside-Mill_02.jpg); 
}

.jcarousel li.COTM_thirdGalleryImage {
    background-image: url(../images/COTM-bg_Gallery-Inside-Mill_03.jpg); 
}

.jcarousel li.COTM_fourthGalleryImage {
    background-image: url(../images/COTM-bg_Gallery-Inside-Mill_04.jpg); 
}

.jcarousel li.COTM_fifthGalleryImage {
    background-image: url(../images/COTM-bg_Gallery-Inside-Mill_05.jpg); 
}

.jcarousel li.COTM_sixthGalleryImage {
    background-image: url(../images/COTM-bg_Gallery-Inside-Mill_06.jpg); 
}

.jcarousel li.COTM_seventhGalleryImage {
    background-image: url(../images/COTM-bg_Gallery-Inside-Mill_07.jpg); 
}

.jcarousel li.COTM_eigthGalleryImage {
    background-image: url(../images/COTM-bg_Gallery-Inside-Mill_08.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);
    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: rgba(255,255,255,1);
    color:black;
    cursor:pointer;
}

.jcarousel-control-prev {
    left: 140px;
    padding-top: 10px;
    padding-right: 3px;
}

.jcarousel-control-next {
    right: 140px;
    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);
}


/*////////////////////////////
BACKGROUND IMAGES
////////////////////////////*/

.bgCover {
    position:fixed;
    width:100%;
    height:calc(100% - 39px);
    top:39px;
    left:0;
    background-size: cover;
    background-position:center;
    z-index:-7;
    opacity:1;
    transition: opacity 1s;
}

.bgCoverOverVideo {
    position:fixed;
    width:100%;
    height:calc(100% - 39px);
    top:39px;
    left:0;
    background-size: cover;
    background-position:center;
    z-index:2;
    opacity:1;
    transition: opacity 1s;
}

.myBackgroundImages {
    pointer-events: none;
}

.halfOpacity {
    opacity:.5;
}

#bgFeaturedItemCU {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:20;
    opacity:0;
    transition: opacity 3s ease;
    background: url(../images/object-display-ECU.jpg); 
    /*background: url(../images/CU-object-mex-amer.jpg) no-repeat center center fixed; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#bgfeaturedItemImageSplit {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:22;
    opacity:0;
    transition: opacity 1s;
    background: url(../images/object-image-split.jpg) no-repeat center center fixed; 
    /*background: url(../images/CU-object-mex-amer.jpg) no-repeat center center fixed; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#bgfeaturedItemBlackSplit {
    position:fixed;
    top:0;
    right:0;
    width:40%;
    height:100%;
    z-index:23;
    opacity:0;
    transition: opacity 1s;
    background-color: #000;
}

.splitScreenText {
    position:absolute;
    left:50%;
    top:50%;
    width:60%;
    height:auto;
    font-family: freight-sans-pro, sans-serif;
    color: rgba(255,255,255,1);
    font-size: 1.25em;
    font-size: 1.25rem;
    font-weight: 100;
    line-height:1.75em;
    line-height:1.75rem;
    transform: translate(-50%, -50%);
}

#contentWrapper {
    position:relative;
    width:100%;
    height:auto;
    top:0;
    left:0;
    overflow-y: auto;
}

#bgFeaturedItem {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:21;
    opacity:0;
    transition: opacity 1s;
    background: url(../images/object-mex-amer.jpg);
    /*background: url(../images/scrapbook-wide.jpg);*/
    /*background: url(../images/object-mex-amer.jpg) no-repeat center center fixed; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position:center;
}

#mdm-bgFeaturedItem {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:21;
    opacity:0;
    transition: opacity 1s;
    background: url(../images/mdm-scrapbook-pages-9-10.jpg);
    /*background: url(../images/scrapbook-wide.jpg);*/
    /*background: url(../images/object-mex-amer.jpg) no-repeat center center fixed; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position:center;
}

#mdm-bgFeaturedItem2 {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:21;
    opacity:0;
    transition: opacity 1s;
    background: url(../images/scrapbook-wide.jpg);
    /*background: url(../images/scrapbook-wide.jpg);*/
    /*background: url(../images/object-mex-amer.jpg) no-repeat center center fixed; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*////////////////////////////
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;
}

#bestHeadphones {
    /*position:fixed;
    left:50%;
    bottom:60px;
    transform:translateX(-50%);
    background-image: url("../images/best-with-headphones-white-2x.png");
    background-size: 120px 56px;
    width: 120px;
    height: 56px;
    z-index:9998;
    opacity:.75;
    transition: opacity 1s;*/
    position:fixed;
    bottom:30px;
    width:180px;
    height:62px;
    left:50%;
    transform:translateX(-50%);
    z-index:9999;/*one above black load cover*/
    opacity: 1;
    transition: opacity 1s;
    background-image: url(../images/has-sound-white-2x.png);
    background-repeat: no-repeat;
    background-size: 180px 62px;
    background-position: center;
}



/*//////////////////////////////////////////////////////*/
/*PAGE & CONTROLS*/
/*//////////////////////////////////////////////////////*/

#pageWrapper {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    /*overflow-x:hidden;*/
    /*overflow-y:scroll;*/
}

.page-slide {
    position:relative;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:25;
    /*overflow-x:hidden;*/
    overflow-y:visible;
    pointer-events: auto;
    /*outline: #fff solid 1px;*/
}

.markerWP {
    position:absolute;
    top:1px;
    height:0;
    width:100%;
    margin:0;
    padding:0;
    z-index:0;
}

.blueBar1 {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*border-right: 5px solid #ef7365;*/
    border-right: 1px solid rgba(255,255,255,0);
}

.blueBar2 {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*border-right: 5px solid #df3624;*/
    border-right: 1px solid rgba(255,255,255,0);
}

.blueBar3 {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*border-right: 5px solid #bc1301;*/
    border-right: 1px solid rgba(255,255,255,0);
}

.sideBar {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*border-right: 5px solid #bc1301;*/
    border-right: 1px solid rgba(255,255,255,0);
}

.tickMark {
    position:absolute;
    top:-6px;
    right:0;
    width: 12px;
    height: 2px;
    border-top: 6px solid transparent;
    border-right: 12px solid #fff;
    border-bottom: 6px solid transparent;
    /*background-color:#fff;*/
    overflow:visible;
    z-index:999;
    opacity:0;
}

.tickMarkStatic {
    position:fixed;
    top:calc(50% - 24px);
    right:0;
    width: 12px;
    height: 1px;
    /*border-top: 6px solid transparent;
    border-right: 12px solid #fff;
    border-bottom: 6px solid transparent;*/
    background-color:#fff;
    z-index:999;
    opacity:1;
}

.tickMarkYears {
    position: absolute;
    top: 9px;
    right: 47px;
    width: 5px;
    height: 1px;
    background-color: #fff;
    opacity: 1;
}

/*.first-one {
    top:100%;
}*/

.page-arrow {
    position:fixed;
    background: #fff;
    width:20px;
    height:20px;
    bottom:30px;
    left:50%;
    transform: translateY(-50%);
    z-index:1005;
}

/*//////////////////////////////////////////////////////*/
/*INLINE IMAGE*/
/*//////////////////////////////////////////////////////*/

.inline-image {
    position:relative;
    text-align:center;
    width: auto;
    height: auto;
}

#imgCartoon {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#imgOperaHouseClipping {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*////////////////////////////
AUDIO AND CLOSED CAPTION CONTROL
////////////////////////////*/

/* #audioControl {
    position:fixed;
    left:0px;
    bottom:0px;
    transform: translateY(40px);
    height:40px;
    width:40px;
    background-color: rgba(6,15,20,1);
    transition: transform .5s;
    transition-timing-function: ease-in-out;
    z-index:9998;
    opacity:1;
    color:#fff;
}

#audioControl i {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:18px;
    height:18px;
    font-size:16px;
    color:#fff;
    opacity:.75;
}

#audioControl:hover {
    cursor:pointer;
}

#audioControl:hover i {
    opacity:1;
}

#ccControl {
    position:fixed;
    left:40px;
    bottom:0px;
    transform: translateY(40px);
    height:40px;
    width:40px;
    background-color: rgba(6,15,20,1);
    transition: transform .5s;
    transition-timing-function: ease-in-out;
    z-index:9998;
    opacity:1;
    color:#fff;
}

#ccControl i {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:18px;
    height:18px;
    font-size:16px;
    color:#fff;
    opacity:.75;
}

#ccControl:hover {
    cursor:pointer;
}

#ccControl:hover i {
    opacity:1;
}

#closedCaptionText {
    position:fixed;
    left:50%;
    bottom:0px;
    transform:translate(-50%, -50%);
    font-family: freight-sans-pro, sans-serif;
    font-size:1.125em;
    font-size:1.125rem;
    font-weight: 400;
    font-style: normal;
    color:#fff;
    z-index:44;
    opacity:0;
    transition: 1s;
    background-color:rgba(0,0,0,.75);
    padding:.25em;
    padding:.25rem;
} */
 

/*////////////////////////////
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;
}

#archiveBox {
    position: absolute;
    top:50%;
    left:50%;
    height: 38px;
    width: 34px;
    transform: translate(-53.5%,-57.5%);
    background-image: url(../images/sprites-archive-box-v3@2x.png);
    background-size: 408px 38px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    overflow: hidden;
}

#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
////////////////////////////*/

#videoParallax-1 {
    height: auto;
    width:350px;
    position: fixed;
    top:150%;
    left:20%;
    -webkit-transform: translate(-50%,-60%);
    transform: translate(-50%,-60%);    
    z-index: 5;
    transition: 1.6s ease;
}

#videoParallax-2 {
    height: auto;
    width: 400px;
    position: fixed;
    top:150%;
    right:0%;
    -webkit-transform: translate(-50%,-15%);
    transform: translate(-50%,-15%);  
    z-index: 4;
    transition: 1.2s ease;
}

#COM_parallaxFore-3 {
    height: 586px;
    width: 900px;
    position: fixed;
    top:150%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);   
    background-image: url(../images/COM_parallax-newspaper.png);
    background-size: 900px 586px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    /*overflow: hidden;*/
    z-index: 3;
    transition: 1.6s ease;
}

#COM_parallaxFore-4 {
    height: 227px;
    width: 400px;
    position: fixed;
    top:200%;
    left:20%;
    -webkit-transform: translate(-50%,-175%);
    transform: translate(-50%,-175%);   
    background-image: url(../images/COTM-parallax_article-snippet.jpg);
    background-size: 400px 227px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    /*overflow: hidden;*/
    z-index: 3;
    transition: 1.4s 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;
}

.byLineAbout {
    font-size: .875em;
    font-size: .875rem;
    margin-top: .5em;
    margin-top: .5rem;
    margin:0;
    padding:0;
    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;
}
*/

#sojVidParent, #gerryVidParent {
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:99;
}

#soj-vid {
    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;
}

#gerry-vid {
    position:relative;transform:translateX(-50%);left:50%;width:550px;height:412px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#soj-vid:focus, #gerry-vid:focus {
    outline: none;
}

#sojButtonImage {
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:99;
}

/*////////////////////////////
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%;
}


/*////////////////////////////
VIDEO PLAYER
////////////////////////////*/

#orangeParent, .orangeParent {
	position: absolute;
	top:0;
	left: 40px;
    height:100%;
    width:calc(100% - 40px);
    z-index:1;
}

#video-orange-scrub {
	position: relative;
	top:0;
	left: 0;
    height:100%;
    width:0%;
    z-index:1;
    /*background:rgba(200,75,39,.8);*/
    /*background:rgba(237,125,79,.8);*/
    background:rgba(194,75,62,.8);
    -webkit-transition: background .3s;
   -moz-transition: background .3s;
   -o-transition: background .3s;
   -ms-transition: background .3s;
   transition: background .3s;
}

.mediaplayer {
    position:fixed;
    top:47px; /*height of top header bar*/
    left:100%;
    width: 100%;
    height:calc(100% - 47px);
    z-index:45;/*high up to access controls... used to be 35, but I want to hide scrollTip*/
    opacity:0;
    /*transition: opacity 1s;*/
}

.mediaplayerPreview {
    position:fixed;
    top:47px; /*height of top header bar*/
    left:0;
    width: 100%;
    height:calc(100% - 47px);
    z-index:5;/*no need for controls so lower*/
    opacity:0;
    transition: opacity 1s;
}

.mediaplayerBackground {
    position:fixed;
    top:47px; /*height of top header bar*/
    left:0; /*I changed this from 100% for the fullpage.js test*/
    width: 100%;
    height:calc(100% - 47px);
    z-index:0;/*no need for controls so lower*/
    opacity:1; /*I changed this from 0 for the fullpage.js test*/
    transition: opacity 1s;
    z-index:-1; /*I changed this from nothing to this for the fullpage.js test*/
}

.mediaplayerInFrame {
    position:fixed;
    top:47px; /*height of top header bar*/
    left:100%;
    width: 100%;
    height:calc(100% - 47px);
    z-index:2;
    opacity:0;
    /*transition: opacity 1s;*/
}
        
.mediacontrols, .mediacontrolsBase {
    position:absolute;
    bottom:0px;
    left:80px;
    z-index:99999;
    width:calc(100% - 80px);
}

.closeBtn, #closeBtnAsides {
    position: fixed;
    right: 30px;
    top:110px;
    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;
    z-index:1001;
}

.closeBtn:hover, #closeBtnAsides {
    cursor: pointer;
}
        
.scrubber {
    position:relative;
    top:0px;
    width:100%;
    /*width: calc(100% - 40px);*/
    display: inline-block;
    opacity: 0;
   -webkit-transition: opacity .3s;
   -moz-transition: opacity .3s;
   -o-transition: opacity .3s;
   -ms-transition: opacity .3s;
   transition: opacity .3s;
    background:rgba(51,51,51,.7);
}

.mediaplayer:hover .scrubber {
   opacity: .9;
}

.scrubber:hover #video-orange-scrub{
    /*background:rgba(200,75,39,1);*/
    background:rgba(194,75,62,1);
    
}

.seekbar {
    position:relative;
    right:0;
    height:40px;
    float:right;
    width:calc(100% - 40px);
    z-index:2;
    opacity:0;
    display:inline-block;
}

#play-pause {
    position:relative;
    font-size:12px;
    text-align:center;
    /*vertical-align: middle;*/
    top:0px;  
    height:40px;
    width:40px;
	background: rgba(0,0,0,.5);
	border: 0;
	color:#999;
    display:inline-block;
	/*-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;*/
    outline: none;
}

#play-pause:hover {
    background: rgba(0,0,0,.8);
    color:#fff;
	cursor: pointer;
}

.timecode {
    color:#fff;
    position:absolute;
    left: 50px;
    z-index: 2;
    top: 8px;
    font-family: "hindlight", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

/*video::cue {
    font-family: freight-sans-pro, sans-serif;
    color: rgba(255,255,255,1);
    font-size: 2em;
    font-size: 2rem;
    font-weight: 400;
}*/


/*////////////////////////////
ASIDES
////////////////////////////*/

#asideParent {
    position:fixed;
    top:calc(10% + 24px);
    left:-200%;
    width:80%;
    height:80%;
    background-color:rgba(194,76,62,.95);
    z-index:9998;/*above tool tip, below black-cover*/
}

/*#asideParent img {
    width: 70%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 50px;
}*/

#asideScrollTip {
    position:absolute;
    bottom:32px;
    width:100%;
    text-align: center;
    font-family: "Kopius", sans-serif;
    color: rgba(255,255,255,1);
    font-size: .875em;
    font-size: .875rem;
    font-weight: 100;
}

/*#asideParent img.leftImage {
    float:left;
}

#asideParent img.rightImage {
    float:right;
}*/

.closeBtnBoxAside {
    position: absolute;
    right: 30px;
    top: 30px;
    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;
    opacity:1;
    z-index:1;
}

.closeBtnBoxAside:hover {
    cursor: pointer;
}

#asideTextTitle {
    position:absolute;
    left:80px;
    width:auto;
    top:80px;
    height:auto;
    font-family: "Kopius", sans-serif;
    color: rgba(255,255,255,1);
    font-size: 3.5em;
    font-size: 3.5rem;
    font-weight: 100;
    line-height:1.5em;
    line-height:1.5rem;
}

#asideTextBlock {
    position:absolute;
    left:80px;
    right:80px;
    top:150px;
    bottom:80px;
    padding-top:0;
    overflow-y: scroll;
    /*scroll-snap-type: y mandatory;
    scroll-padding: 50px 0 0 0;*/
    transform: translateZ(0px);
    /*scroll-behavior: smooth !important;*/
    /*overflow-x: hidden;*/
    /* scroll-behavior: smooth; */
}

/* #asideTextBlockContent {
    position:relative;
    width:100%;
    height:auto;
} */

/* #asideTextBlock p {
    scroll-snap-type: y mandatory;
    scroll-snap-speed: 2000ms;
} */

#asideTextBlockMAJ {
    position:absolute;
    left:80px;
    right:80px;
    top:150px;
    bottom:80px;
    padding-top:0;
    overflow-y: scroll;
    overflow-x: hidden;
}

#asidePhoto {
    position:absolute;
    left:80px;
    width:30%;
    top:175px;
    height:275px;
    background-image: url(../images/mdm-aside-pic-george.jpg);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    background-color: #000;
    overflow:hidden;
}

#asideTextBlock .asideText, #asideTextBlockMAJ .asideText {
    font-family: freight-sans-pro, sans-serif;
    color: rgba(255,255,255,1);
    font-size: 1.25em;
    font-size: 1.25rem;
    font-weight: 100;
    line-height:1.5em;
    line-height:1.5rem;
    padding:0em 3em .25em .25em;
    padding:0rem 3rem .25rem .25rem;
    padding-top:0px;
}

#asideTextBlock .footnote {
    font-family: freight-sans-pro, sans-serif;
    color: rgba(255,255,255,1);
    font-size: .875em;
    font-size: .875rem;
    font-weight: 100;
}

#asideTextBlockMAJ {
    position:absolute;
    left:80px;
    right:80px;
    top:150px;
    bottom:80px;
    padding-top:0;
    overflow-y: scroll;
    overflow-x: hidden;
}

.asideImageCenter {
    position:relative;
    left:50%;
    transform: translateX(-50%);
}

.asideImageLeftWrap {
    position:relative;
    float:left;
    margin-right:20px;
    margin-bottom:10px;
}

.asideImageRightWrap {
    position:relative;
    float:right;
    margin-left:10px;
    margin-bottom:10px;
}

.asideImageTall {
    width:20%;
}

.asideImageWide {
    width:38%;
}

.asideImageLeftWrapBigger {
    position:relative;
    float:left;
    margin-right:1%;
    margin-bottom:20px;
}

.asideImageRightWrapBigger {
    position:relative;
    float:right;
    margin-left:1%;
    margin-bottom:20px;
}

.asideImageTallBigger {
    width:37%;
}

.asideImageWideBigger {
    width:57%;
}

.asideImageMediumBigger {
    width:48%;
}

/*////////////////////////////
AUDIO
////////////////////////////*/

#audioSerna {
    position:relative;
    height:0;
    width:0;
    z-index:999;
    left:50%;
    transform:translateX(-50%);
}

#audioPark {
    position:relative;
    z-index:999;
    left:50%;
    transform:translateX(-50%);
}

#AudioContainer {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
    z-index:999;
    text-align: center;
}

#AudioContainer2 {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
    z-index:999;
    text-align: center;
}


p.track {
	color: #fff;
	font-family: "Kopius", sans-serif;
    font-weight:300;
    font-size: 2em;
    font-size: 2rem;
    text-align:center;
    line-height:2.625em;
    line-height:2.625rem;
    margin:0;
    padding:0;
}

p.track span {
	color: #fff;
	font-family: "Kopius", sans-serif;
    font-weight:300;
    font-size: 1em;
    font-size: 1rem;
    display: inline-block;
    margin:.5em;
    margin:.5rem;
    text-align:center;
    line-height:1.5em;
    line-height:1.5rem;
}

button {
	background-color: rgba(255, 255, 255, 0);
	color: #fff;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	transition: all 0.2s ease 0;
}

.largeBtn {
    background-color: rgba(255, 255, 255, 0);
	border: 1px solid #fff;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	transition: all 0.2s ease 0;
    width: 60px;
    height: 60px;
    margin: 0 5px;
    opacity: 1;
    font-size: 25px;
}

.largeBtn:hover {
    opacity:.7;
    cursor:pointer;
}

#btn-rewind1:hover {
    opacity:.7;
    cursor:pointer;
}

#btn-rewind2:hover {
    opacity:.7;
    cursor:pointer;
}

#btn-forward1:hover {
    opacity:.7;
    cursor:pointer;
}

#btn-forward2:hover {
    opacity:.7;
    cursor:pointer;
}

.smallBtn {
    width: 40px;
    height: 40px;
    font-size: 14px;
    opacity: 1;
}

#btn-rewind1, #btn-rewind2 {
    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;
    opacity: 1;
}

#btn-forward1, #btn-forward2 {
    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;
    opacity: 1;
}

#btn-play-pause1 {
    position:relative;
    border: 2px solid #fff;
}

#btn-play-pause2 {
    position:relative;
    border: 2px solid #fff;
}

#btn-play-pause1 i {
    position:absolute;
    top:calc(50% + 1px);
    left:calc(50% + 2px);
    transform:translate(-50%,-50%);
}

#btn-play-pause2 i {
    position:absolute;
    top:calc(50% + 1px);
    left:calc(50% + 2px);
    transform:translate(-50%,-50%);
}

.smallBtn:hover {
    opacity: .7;
}

.smallBtn:focus, .largeBtn:focus {
    outline: none;
}

#progress-bar {
	width: 100%;
	background-color: #ffe7e4;
	height: 5px;
	position: relative;
	margin: 1em 0;
}

#progress {
		background-color: #cb4839;
		height: 5px;
		position: absolute;
		left: 0;
		transition: width 2.5s linear 0;
}

#progress-bar2 {
	width: 100%;
	background-color: #ffe7e4;
	height: 5px;
	position: relative;
	margin: 1em 0;
}

#progress2 {
		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;
}*/

.textTranscriptIcon {
    position:relative;
    width:150px;
    left:0;
    font-family: freight-sans-pro, sans-serif;
    color: rgba(255,255,255,1);
    font-size: 1em;
    font-size: 1rem;
    font-weight: 100;
    text-align:left;
    opacity:1;
}

.textTranscriptIcon:before {
    content: "";
    position:relative;
    top:7px;
    margin-right:3px;
    height:25px;
    width:25px;
    background-size: 25px 25px;
    background-image: url(../images/document-icon.svg);
    background-repeat: no-repeat;
    display:inline-block;
}

.textTranscriptIcon:hover {
    opacity:.75;
    cursor:pointer;
}


/*////////////////////////////
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;
}


/*//////////////////////////////////////////////////////*/
/*LOADING*/
/*//////////////////////////////////////////////////////*/

#loading-icon {
    position:absolute;
    width:100px;
    height:100px;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    transition: opacity 1s;
    /*opacity:1;*/
    display:none;
}

#black-load-cover {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,1);
    z-index:9999;
}

.black-mobile-cover {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: #000;
    margin:0;
    padding:0;
    display:none;
    z-index:9999;
}

.black-mobile-cover p {
    position:absolute;
    top:50%;
    left:50%;
    width:75%;
    transform:translate(-50%, -50%);
    font-family: freight-sans-pro, sans-serif;
    font-size:18px;
    color: #fff;
    margin:0;
    padding:0;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}