/*
    BASIC STYLES AND WRAPPERS/CONTAINERS
*/
body { /*font-family: HelveticaNeueW02-Thin,sans-serif;*/ /*font-family: HelveticaNeueW02-45Ligh,sans-serif;*/ background-color: white; margin: 0px; box-sizing: border-box; }
a { cursor: pointer; text-decoration: none; color: white; }

#timeline-container { max-width: 1240px; width: 100%; margin-left: auto; margin-right: auto; position: relative; height: 90px; overflow: hidden; }

/*
    TIMELINE MENU
*/
#timeline-menu-container { background-color: rgb(30,32,117); height: 90px; position: relative; max-width: 100%; z-index: 200; top: 0px; margin-left: auto; margin-right: auto; left: 0; right: 0; overflow: hidden; }
#timeline-menu-container.timeline-fixed-menu { position: fixed; top: 71px; }
#timeline-spacer { height: 0; width: 100%; }
#timeline-spacer.timeline-fixed-menu { height: 90px; }

nav#timeline { width: 1804px; height: 90px; max-width: none !important; margin-left: 100%; -webkit-transition: margin-left 500ms ease-in; -moz-transition: margin-left 500ms ease-in; -o-transition: margin-left 500ms ease-in; -ms-transition: margin-left 500ms ease-in; transition: margin-left 500ms ease-in; }
#timeline .dot { z-index: 20; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; width: 60px; height: 30px; border-radius: 30px; position: relative; margin: 28px 50px; text-align: center; cursor: pointer; float: left; background-color: rgb(30,32,117); overflow: hidden; border: 2px solid #fff; }
nav#timeline .dot.nav-active { background-color: #fff; -webkit-transition: background-color 400ms ease; -moz-transition: background-color 400ms ease; -o-transition: background-color 400ms ease; -ms-transition: background-color 400ms ease; transition: background-color 400ms ease; }
#timeline .dot a span { font-family: HelveticaNeueW02-45Ligh,sans-serif; display: inline-block; line-height: 30px; background-color: transparent; position: relative; color: #fff; font-weight: bold; }
nav#timeline .dot.nav-active a span { color: #000256; -webkit-transition: color 400ms ease; -moz-transition: color 400ms ease; -o-transition: color 400ms ease; -ms-transition: color 400ms ease; transition: color 400ms ease; }

.timeline-line { z-index: 19; position: absolute; height: 2px; background-color: #fff; width: 100%; margin-top: 44px; left: 0; }

.timeline-shadow { background: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/timelineshadow.png"); width: 144px; height: 90px; position: absolute; right: 0; margin-right: 180px; z-index: 26; pointer-events: none; }

.timeline-line-hider { display: inline-block; background-color: rgb(30,32,117); z-index: 25; position: absolute; height: 90px; width: 100%; margin-left: 620px; left: 50%; }

.arrows-container { z-index: 25; position: absolute; height: 90px; width: 180px; background-color: rgb(30,32,117); right: 0px; color: white; }
.arrows { cursor: pointer; position: absolute; top: 0; background: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/arrows.png"); cursor: pointer; font-size: 40px; text-align: center; width: 90px; height: 90px; background-repeat: no-repeat; }
    .arrows:hover { background-color: #000256; }
    .arrows p { font-family: HelveticaNeueW02-45Ligh,sans-serif; font-size: 12px; padding: 0px; margin: 0px; position: absolute; bottom: 0; left: 0; width: 90px; padding-bottom: 10px; color: #fff; }
#prev-arrow { background-position: 35px; left: 0; }
#next-arrow { background-position: -48px; right: 0; }


/*
    TIMELINE
*/
article { background-size: cover; background-position: center center; min-height: 960px; padding: 30px 30px 120px; position: relative; }
    article > .image-links { position: absolute; bottom: 0; right: 0; padding: 15px; font-size: 12px; color: white; }
        article > .image-links a, article > .image-links a:hover, article > .image-links a:link { color: white; }

    section .article-image-tall { height: 202px; }

.bolt { position: absolute; top: 50%; margin-top: -13px; }
.left-bolt { left: 30px; }
.right-bolt { right: 30px; margin-right: -9px !important; }

.info-holder { color: white; position: absolute; top: 0; bottom: 0; right: 0; height: 100%; margin: auto; }

.year { padding-bottom: 60px; z-index: 20; height: 65px; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }
    .year h2 { padding: 10px 20px !important; float: right; border: 2px solid white; background-color: rgb(140,127,112); font-size: 35px; border-radius: 200px; color: #fff; }

.heading-wrapper { margin-top: 0px; position: relative; top: 10%; }

.box-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; min-height: 700px; position: relative;     overflow: auto; }
    .box-container .mh-container { float: left; }
    .box-container .al-container {  right: 0; position: relative; vertical-align: middle !important; float: right; height: 100%; margin: auto; box-sizing: border-box; }

.info-content { padding: 15px 83px; min-height: 90px; margin-top: 0px; position: relative; text-align: center; background-color: rgb(30,32,117); border-radius: 200px; margin-bottom: 30px; max-width: 600px; box-sizing: border-box; }
    .info-content h3 { margin: 0px; color: #fff; padding: .4em 0 0 !important; }
    .info-content p { color: #fff; line-height: 1.4; }

/* entire container, keeps perspective */
.flip-container { cursor: pointer; padding-bottom: 30px; }
    /* flip the pane when hovered */
    /*.flip-container:hover .flipper, .flip-container.hover .flipper {*/
    .flip-container.clicked .flipper { 
        /* transform: rotateY(180deg); */
        -moz-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    .flip-container .front, .flip-container .back{
        /*
        transition-property: opacity;
        -webkit-transition-delay: 0.25s;
        transition-delay: 0.25s;
        transition-timing-function: steps(1, end);
        */
        
        -webkit-transition: opacity 0.25s steps(1, end);
        -moz-transition: opacity 0.25s steps(1, end);
        -ms-transition: opacity 0.25s steps(1, end);
        -o-transition: opacity 0.25s steps(1, end);
        transition: opacity 0.25s steps(1, end);
    }
    .flip-container .front { opacity: 1; }
    .flip-container .back { opacity: 0; }
    .flip-container.clicked .front { opacity: 0; }
    .flip-container.clicked .back { opacity: 1; }
    .flip-container .image-links { text-align: center; font-size: 12px; padding-top: 0; color: white; }
        .flip-container .image-links a, .flip-container .image-links a:hover, .flip-container .image-links a:link { color: white; }

.flip-container, .front, .back { width: 300px; min-height: 300px; }

/* flip speed goes here */
.flipper { 
    /*
    transition: 0.6s; 
    transform-style: preserve-3d; */
    
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    position: relative; 
    height: 100%; 
}

/* hide back of pane during swap */
.front, .back { backface-visibility: hidden; position: absolute; box-sizing: border-box; padding: 20px; }
.front.full-height, .back.full-height { height: 100%; }

/* front pane, placed above back */
article .front { 
    /* transform: rotateY(0deg); */
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    background-size: cover; 
    background-position: center center; 
    border: 2px solid #fff; 
}

.flip-front-container { width: 100%; border: 2px solid #fff; border-radius: 100px; background-color: #8c7f70; color: #fff; padding: 0 8px; line-height: 30px; box-sizing: border-box; font-family: HelveticaNeueW02-45Ligh,sans-serif; }
    .flip-front-container img { margin-top: 6px; float: right; }

/* back, initially hidden pane */
.flip-back-container { margin-top: -2px; }
    .flip-back-container div { border-radius: 100px; padding: 0 8px; line-height: 20px; margin-top: 8px; }
.flip-back-button { float: right; }
    .flip-back-button img { margin-bottom: -2px; }

.back { 
    backface-visibility: visible;
    background-color: rgb(140,127,112); 
    border: 2px solid white; 
    /* transform: rotateY(180deg); */
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    
    color: white; 
    text-align: center; 
    font-size: 16px; 
}
    .back p { color: white; line-height: 1.4; }

.back-year { font-family: HelveticaNeueW02-45Ligh,sans-serif; font-size: 24px; }

article[data-timeline-position="1"]  .front[data-timeline-front="1"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1893.png"); }
article[data-timeline-position="1"]  .front[data-timeline-front="2"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1903.png"); }
article[data-timeline-position="2"]  .front[data-timeline-front="1"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1912.png"); }
article[data-timeline-position="2"]  .front[data-timeline-front="2"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1929.png"); }
article[data-timeline-position="3"]  .front[data-timeline-front="1"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1932.png"); }
article[data-timeline-position="3"]  .front[data-timeline-front="2"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1939-1945.png"); }
article[data-timeline-position="4"]  .front[data-timeline-front="1"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1955.png"); }
article[data-timeline-position="4"]  .front[data-timeline-front="2"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1959.png"); }
article[data-timeline-position="5"]  .front[data-timeline-front="1"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1960.png"); }
article[data-timeline-position="6"]  .front[data-timeline-front="1"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1973.png"); }
article[data-timeline-position="6"]  .front[data-timeline-front="2"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1973-74.png"); }
article[data-timeline-position="7"]  .front[data-timeline-front="1"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1983.png"); }
article[data-timeline-position="7"]  .front[data-timeline-front="2"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1986.png"); }
article[data-timeline-position="7"]  .front[data-timeline-front="3"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1989.png"); }
article[data-timeline-position="8"]  .front[data-timeline-front="1"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1992.png"); }
article[data-timeline-position="8"]  .front[data-timeline-front="2"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1995.png"); }
article[data-timeline-position="9"]  .front[data-timeline-front="1"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/2003.png"); }
article[data-timeline-position="9"]  .front[data-timeline-front="2"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/2004.png"); }
article[data-timeline-position="9"]  .front[data-timeline-front="3"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/2005.png"); }
article[data-timeline-position="10"]  .front[data-timeline-front="1"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/2014.png"); }
article[data-timeline-position="10"]  .front[data-timeline-front="2"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/2016.png"); }
article[data-timeline-position="10"]  .front[data-timeline-front="3"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/2017.png"); }

article[data-timeline-position="1"]  { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1870-1909s.png"); }
article[data-timeline-position="2"]  { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1910s.png"); }
article[data-timeline-position="3"]  { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1930-1949.png"); }
article[data-timeline-position="4"]  { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1950s.png"); }
article[data-timeline-position="5"]  { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1960s.png"); }
article[data-timeline-position="6"]  { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1970s.png"); }
article[data-timeline-position="7"]  { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1980s.png"); }
article[data-timeline-position="8"]  { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/1990s.png"); }
article[data-timeline-position="9"]  { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/2000s.png"); }
article[data-timeline-position="10"] { background-image: url("/globalassets/images/industries/marine-and-transportation/marine/anniversary/2010s.png"); }

/* MOBILE */
.mobile #timeline-menu-container.timeline-fixed-menu { top: 0px; }
.mobile .timeline-shadow { width: 72px; }
.mobile .wysiwyg .arrows p { font-size: 12px;line-height: 1.7; }
.mobile article { padding: 15px 15px 60px; }
.mobile .wysiwyg img.bolt { top: 0;margin-top: 24px; }
.mobile .year { padding-bottom: 30px; }
.mobile .info-content { padding: 15px; border-radius: 12px;  }
/*
.mobile .hide-in-mobile, 

.mobile .area-left div, 
.mobile .area-right div div:nth-last-child(n+3) { display: none; }
*/

.mobile .st1 { display: none; }

.mobile .area-left, 
.mobile .area-left-wide, 
.mobile .area-left-wide .block-100, 
.mobile .area-left-wide .block-100 .wysiwyg { margin: 0 }

@media only screen and (max-width: 768px) {
    .mh-container { display: none; }
    .al-container { position: relative; width: 100%; }
        .al-container .info-content { width: 100%; }
    .box-container { min-height: 200px; }
    article { min-height: 200px; }
}