/* HTML5 Boilerplate */

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}


/* John Crane Timeline -------------------------------------- */

/* Colors
Blue #027dbf
Green #bccc32
Gray #58595b
*/

body {
margin:0;
padding:0;
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif!important;
font-size:14px;
line-height:1.4em;
background:#EFEFEF;
color:#58595b;
}

p {
margin:0 0 1em 0;
}

a:link, a:visited {
color:#027dbf; /* Blue */
text-decoration:none;
}

a:hover {
color:#027dbf; /* Blue */
text-decoration:underline;
}

em {
font-style:italic;
}

strong {
font-weight:bold;
}

ol, ul {
margin:0;
padding:0;
}

ol li, ul li {
margin:0;
padding:0;
list-style:none;
}

.events-year ul {
margin-left:20px;
margin-bottom:10px;
}

.events-year ul li {
list-style:disc;
}

#wrapper {
margin:0 auto;
padding:30px 0;
width:760px;
height:600px;
overflow:hidden;
position:relative;
background:#FFF;
}


/* Header -------------------------------------- */

div.century-logo { position:absolute; top:30px; left:30px; width:120px; }
div.century-logo img { max-width:100%; }

div.logo { position:absolute; bottom:40px; right:20px; width:140px; }
div.logo img { max-width:100%; }


/* Footer -------------------------------------- */

div.footer {
position:absolute;
bottom:0;
left:0;
right:0;
height:40px;
margin:0;
background:transparent url(/~/media/J/Johncrane_com/Images/Timeline/footer.png) no-repeat;
background-size:760px 40px;
}

/* Event Categories ------------------- */

.events-categories {
text-align:center;
}

.events-categories li {
display:none;
}

.events-categories li.active {
display:block;
}

.events-categories h1 {
margin:0;
font-size:1.6em;
line-height:1.1em;
font-weight:bold;
letter-spacing:-1px;
color:#58595b; /* Gray */
}

.events-categories p {
margin:0;
}

.instructions {
text-align:center;
max-width:400px;
margin:0 auto 20px auto;
color:#999;
}


/* Timeline -------------------------------------- */

.horizontal-timeline {
margin:0 auto;
padding:0;
position:relative;
opacity:0;
-webkit-transition:opacity 0.2s;
-moz-transition:opacity 0.2s;
transition:opacity 0.2s;
}

.horizontal-timeline.loaded {
opacity:1;
}

.horizontal-timeline .timeline {
position:relative;
height:50px;
width:430px;
max-width:100%!important;
margin:10px auto;
z-index:1;
}

.horizontal-timeline .events-wrapper {
margin:0 25px; /* leave margin for the arrows */
height:100%;
position:relative;
overflow:hidden;
}

/* Timeline Line */
.horizontal-timeline .events {
position:absolute;
z-index:1;
left:0;
top:9px;
height:12px;
background:#bccc32; /* Green */
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.horizontal-timeline .filling-line {
background:#89b540; /* Dark Green */
position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}

/* Left & Right arrows */
.timeline-nav a {
position:absolute;
z-index:1;
top:0;
right:0;
height:30px!important;
width:17px!important;
background:transparent url('/~/media/J/Johncrane_com/Images/Timeline/arrow-right-small.png') no-repeat center center;
overflow: hidden;
color:transparent;
text-indent:100%;
white-space:nowrap;
}

.timeline-nav a.prev {
left:0;
background:transparent url('/~/media/J/Johncrane_com/Images/Timeline/arrow-left-small.png') no-repeat center center;
}

.timeline-nav a.inactive {
opacity:0.1;
cursor:not-allowed;
}

/* Date nodes */
.horizontal-timeline .events a {
position:absolute;
top:-4px;
z-index:2;
color:#a7a9ac; /* Light Gray */
text-align:center;
width:60px;
padding-top:22px;
background:transparent url(/~/media/J/Johncrane_com/Images/Timeline/dot.png) no-repeat center 0;
background-size:20px 20px;
text-decoration:none!important;
box-sizing:border-box;
overflow:hidden;
white-space:nowrap;
}

.horizontal-timeline .events a.selected {
color:#027dbf; /* Blue */
font-weight:bold;
background:transparent url(/~/media/J/Johncrane_com/Images/Timeline/dot-over.png) no-repeat center 0;
background-size:20px 20px;
}


/* Timeline Items ------------------- */

.horizontal-timeline .events-content {
margin:0 auto;
padding:0;
position:absolute;
top:140px;
left:160px;
z-index:2;
pointer-events:none;
}

.horizontal-timeline .events-content li.events-year {
position:absolute;
top:0;
left:0;
padding:0;
width:550px;
height:300px;
opacity:0;
visibility: hidden;
-webkit-transform: none;
-moz-transform:  none;
-ms-transform: none;
-o-transform: none;
transform: none;
-webkit-transition:opacity 0.4s, -webkit-transform 0.6s;
-moz-transition:opacity 0.4s, -moz-transform 0.6s;
transition:opacity 0.4s, transform 0.6s;
z-index:9;
}

.horizontal-timeline .events-content li.events-year.selected {
position:absolute!important;
opacity:1!important;
visibility:visible;
pointer-events:all;
}

.horizontal-timeline .events-content li.events-year .image {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
width:300px;
min-height:297px;
-webkit-transform: translateX(-110%);
-moz-transform: translateX(-110%);
-ms-transform: translateX(-110%);
-o-transform: translateX(-110%);
transform: translateX(-110%);
-webkit-transition:opacity 0.4s, -webkit-transform 0.8s;
-moz-transition:opacity 0.4s, -moz-transform 0.8s;
transition:opacity 0.4s, transform 0.8s;
opacity:0;
}

.horizontal-timeline .events-content li.events-year.selected .image {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity:1;
}

.horizontal-timeline .events-content li.events-year.exit {
-webkit-transform: translateX(-200%);
-moz-transform: translateX(-200%);
-ms-transform: translateX(-200%);
-o-transform: translateX(-200%);
transform: translateX(-200%);
opacity:0;
}

.horizontal-timeline .events-content li.events-year .image.wide {
margin:0 0 0 -130px;
width:430px;
}

.horizontal-timeline .events-content li.events-year .border {
position:absolute;
top:5px;
left:305px;
width:3px;
height:0;
background:#027dbf; /* Blue */
-webkit-transition:height 0.6s;
-moz-transition:height 0.6s;
transition:height 0.6s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.horizontal-timeline .events-content li.events-year.selected .border {
height:95%;
}


.horizontal-timeline .events-content li.events-year .image img {
max-width:100%;
width:100%;
box-shadow:-5px 0px 15px rgba(0,0,0,0.5);
}

.horizontal-timeline .events-content li.events-year .box {
margin:0;
padding:0;
position:absolute;
top:0;
left:320px;
width:240px;
}

.horizontal-timeline .events-content li.events-year h2 {
margin:0 0 5px 0;
padding:0;
font-size:48px;
line-height:50px;
font-weight:bold;
letter-spacing:-2px;
color:#027dbf; /* Blue */
}

.horizontal-timeline .events-content li.events-year p {
margin:0 0 10px 0;
line-height:1.3em;
color:#58595b;
}

.employee-spotlight h3 {
margin:5px 0 0 0;
font-size:12px!important;
line-height:1.1em!important;
text-transform:uppercase;
color:#FF9117!important; /* Orange */
}

.employee-spotlight h2 {
font-size:32px!important;
line-height:1.1em!important;
letter-spacing:-1px!important;
}

.employee-spotlight .border {
background:#FF9117!important; /* Orange */
}

.employee-spotlight p {
margin:0 0 5px 0!important;
}

.employee-spotlight .small {
color:#999!important;
}

/* Gallery ------------------------ */

.gallery div {
display:none;
}

.gallery div.active, .gallery div.active div {
display:block;
}

.gallery-nav {
display:block;
position:absolute;
bottom:10px;
left:315px;
width:90px;
padding:5px 0;
text-align:center;
pointer-events:all;
opacity:0;
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
-webkit-transition:opacity 0.3s, -webkit-transform 0.4s;
-moz-transition:opacity 0.3s, -moz-transform 0.4s;
transition:opacity 0.3s, transform 0.4s;
}

.selected .gallery-nav {
opacity:1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}

.gallery-next, .gallery-prev {
position:absolute;
top:0;
width:30px;
height:30px;
}

.gallery-next {
right:0;
background:transparent url(/~/media/J/Johncrane_com/Images/Timeline/arrow-right-small.png) no-repeat center center;
}

.gallery-next:hover {
background:transparent url(/~/media/J/Johncrane_com/Images/Timeline/arrow-right-small-over.png) no-repeat center center;
}

.gallery-prev {
left:0;
background:transparent url(/~/media/J/Johncrane_com/Images/Timeline/arrow-left-small.png) no-repeat center center;
}

.gallery-prev:hover {
background:transparent url(/~/media/J/Johncrane_com/Images/Timeline/arrow-left-small-over.png) no-repeat center center;
}




/* Useful Classes ---------------- */

.browserupgrade {
margin:0.2em 0;
background:#ccc;
color:#000;
padding:0.2em 0;
}

.clearfix:before,
.clearfix:after {
content:" "; /* 1 */
display:table; /* 2 */
}

.clearfix:after {
clear:both;
}

.hidden {
display:none;
}

.accessibly-hidden {
left:-999em;
position:absolute;
}

.small {
font-size:0.9em;
color:#999;
}

.error {
color:#CC0000;
}

.no-widow {
white-space:nowrap;
}

.red {
color:#CC0000!important;
font-weight:bold;
}


/* Media Queries ---------------------------- */


/* Print styles. Inlined to avoid the additional HTTP request */
@media print {

    .timeline, .events-categories, .footer, .logo, .gallery-nav { display:none; }

    body {
        font-size:12px!important;
        line-height:1.4em!important;
        background:#FFF!important;
    }

    #wrapper {
        margin:20px!important;
        padding:0!important;
        width:auto!important;
        height:auto!important;
        overflow:auto!important;
    }

    div.century-logo {
        position:relative!important;
        top:auto!important;
        left:auto!important;
        width:100px!important;
        margin:0 0 30px 0!important;
    }

    .horizontal-timeline {
        padding:0!important;
        opacity:1!important;
    }

    .horizontal-timeline .events-content {
        position:relative!important;
        top:auto!important;
        left:auto!important;
        width:100%!important;
        height:auto!important;
        -webkit-transform:none!important;
        -moz-transform:none!important;
        -ms-transform:none!important;
        -o-transform:none!important;
        transform:none!important;
    }

    .horizontal-timeline .events-content li.events-year {
        position:relative!important;
        top:auto!important;
        left:auto!important;
        padding-left:110px!important;
        width:auto!important;
        height:auto!important;
        min-height:120px;
        margin:0 0 20px 0!important;
        display:block!important;
        opacity:1!important;
        visibility:visible!important;
        -webkit-transform:none!important;
        -moz-transform:none!important;
        -ms-transform:none!important;
        -o-transform:none!important;
        transform:none!important;
    }

    .horizontal-timeline .events-content li.events-year.selected {
        position:relative!important;
        margin:0 0 20px 0!important;
    }

    .horizontal-timeline .events-content li.events-year .image {
        margin:0!important;
        width:100px!important;
        min-height:1px!important;
        position:absolute!important;
        top:auto!important;
        left:0!important;
        -webkit-transform:none!important;
        -moz-transform:none!important;
        -ms-transform:none!important;
        -o-transform:none!important;
        transform:none!important;
        display:block!important;
        opacity:1!important;
    }

    .horizontal-timeline .events-content li.events-year .image img {
        box-shadow:none!important;
        max-width:100%;
    }

    .horizontal-timeline .events-content li.events-year .box {
        position:relative!important;
        bottom:auto!important;
        left:auto!important;
        top:auto!important;
        width:100%!important;
    }

    .horizontal-timeline .events-content li.events-year .border {
        display:none!important;
    }

    .horizontal-timeline .events-content li.events-year h2 {
        font-size:20px;
        line-height:1.3em;
        letter-spacing:-1px;
    }

    .gallery div { display:block!important; min-height:120px; }

    .employee-spotlight h2, .employee-spotlight h3 {
        margin:0!important;
    }

    .red { color:red!important; }

    ul, ol { list-style:none!important; }

    li { list-style:none!important; }

}