/* ANIMATIONS */
.fadeTop { top: -50px; opacity: 0; position: relative; }

.fadeBottom { bottom: -50px; opacity: 0; position: relative; }

.fadeLeft { left: -80px; opacity: 0; position: relative; }

.fadeRight { right: -80px; opacity: 0; position: relative; }

.fadeIn { opacity: 0; position: relative; }




/* STORY */
#story { background: url(images/story-bg.jpg); }

#devices-section { background: url(images/devices-bg.jpg); }


/* STORY */
.story { position: relative; padding: 50px 0px; }

.timeline { position: absolute; width: 1px; left: 49.95%; border-right: 2px solid #d9d9d9; height: 100%; z-index: 5; top: 0px; }
.timeline::before, .timeline::after { content: ""; left: -5px; width: 12px; height: 12px; background: #d9d9d9; position: absolute; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; }
.timeline::before { top: 0px; }
.timeline::after { bottom: 0px; }

.story-item-content { width: 50%; position: relative; }

.story-item-wrap { background: #fff; padding: 15px 20px 20px; }
.section-diff .story-item-wrap { background: white; }

.si-date, .si-header { font: 14px arial, verdana, sans-serif; text-transform: uppercase; float: left; font-weight: bold;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, 0.73);}

.si-header { padding-left: 4px; }

.si-header, .si-year { color: #191919; color: rgb(90, 90, 90);
    font-weight: bold;
    letter-spacing: 1px;}

.si-year { font: 16px arial, verdana, sans-serif; position: absolute; top: 37%; }
.si-year::after { content: ""; width: 12px; height: 12px; background: #F57F20; position: absolute; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; z-index: 6; top: 15%; }

.line-arrow::before { content: ""; height: 100%; position: absolute; border-right: 2px solid #cccccc; top: 0; }
.line-arrow::after { position: absolute; top: 35%; color: #cccccc; }

.si-desc { border-top: 1px dashed #cccccc; padding: 15px; margin: 10px -15px -15px; font-weight: bold;
    letter-spacing: 1px;
    color: rgba(76, 76, 76, 0.78); }
.section-diff .si-desc { border-top: 1px dashed #d9d9d9; }

.story-item { width: 100%; margin-bottom: 10px; position: relative; z-index: 10; *zoom: 1; }
.story-item:after { content: ""; display: table; clear: both; }
.story-item:nth-child(even) .story-item-content { float: right; padding-left: 30px; }
.story-item:nth-child(even) .story-item-content .si-date::after { content: "\0020\2014\0020"; }
.story-item:nth-child(even) .story-item-content .si-year { left: -60px; }
.story-item:nth-child(even) .story-item-content .si-year::after { left: 54px; }
.story-item:nth-child(even) .story-item-content .line-arrow::before { left: 30px; }
.story-item:nth-child(even) .story-item-content .line-arrow::after { left: 22px; }
.story-item:nth-child(odd) .story-item-content { float: left; padding-right: 30px; text-align: right; }
.story-item:nth-child(odd) .story-item-content .si-date { float: right; }
.story-item:nth-child(odd) .story-item-content .si-date::before { content: "\0020\2014\0020"; }
.story-item:nth-child(odd) .story-item-content .si-header { float: right; padding-right: 4px; }
.story-item:nth-child(odd) .story-item-content .si-year { right: -242px; }
.story-item:nth-child(odd) .story-item-content .si-year::after { right: 236px; }
.story-item:nth-child(odd) .story-item-content .line-arrow::before { right: 30px; }
.story-item:nth-child(odd) .story-item-content .line-arrow::after {  right: 22px; }
.story-item:last-child { margin: 0; }