body { color: #768390; background: #FFF; font-family: sans-serif; padding: 0; -webkit-font-smoothing: antialiased; margin: 0; } h1, h2, h3, h4, h5, h6 { color: #3D4351; margin-top: 0; } a { color: #FF6B6B; } a:hover { color: #ff9a9a; text-decoration: none; } h1 { text-align: center; margin: 0; padding: 1.5em 0; font-weight: 400; } /*================================== TIMELINE ==================================*/ /*-- GENERAL STYLES ------------------------------*/ .timeline { line-height: 1.4em; list-style: none; margin: 0; padding: 0; width: 100%; } .timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 { line-height: inherit; } /*----- TIMELINE ITEM -----*/ .timeline-item { padding-left: 40px; position: relative; } .timeline-item:last-child { padding-bottom: 0; } /*----- TIMELINE INFO -----*/ .timeline-info { font-size: 12px; font-weight: 700; letter-spacing: 3px; margin: 0 0 .5em 0; text-transform: uppercase; white-space: nowrap; } /*----- TIMELINE MARKER -----*/ .timeline-marker { position: absolute; top: 0; bottom: 0; left: 0; width: 15px; } .timeline-marker:before { content: "đŸ”Ĩ"; display: block; height: 15px; position: absolute; top: 2px; left: -2px; font-size: 19px; } .timeline-marker.false-alarm:before { content: "đŸšĢ"; } .timeline-marker.vehicle-fire:before { content: "🚙"; } .timeline-marker.vehicle-fire-large:before { content: "🚚"; } .timeline-marker.locked-in:before { content: "🔑"; } .timeline-marker.small-animal:before { content: "🐾"; } .timeline-marker.aircraft:before { content: "đŸ›Šī¸"; } .timeline-marker.hazmat:before { content: "â˜Ŗ"; } .timeline-marker:after { content: ""; width: 3px; background: #CCD5DB; display: block; position: absolute; top: 24px; bottom: 0; left: 6px; } .timeline-item:last-child .timeline-marker:after { content: none; } /*----- TIMELINE CONTENT -----*/ .timeline-content { padding-bottom: 40px; } .timeline-content p:last-child { margin-bottom: 0; } /*----- TIMELINE PERIOD -----*/ .period { padding: 0; } .period .timeline-info { display: none; } .period .timeline-marker:before { background: transparent; content: ""; width: 15px; height: auto; border: none; border-radius: 0; top: 0; bottom: 30px; position: absolute; border-top: 3px solid #CCD5DB; border-bottom: 3px solid #CCD5DB; } .period .timeline-marker:after { content: ""; height: 32px; top: auto; } .period .timeline-content { padding: 40px 0 70px; } .period .timeline-title { margin: 0; } /*---------------------------------------------- MOD: TIMELINE SPLIT ----------------------------------------------*/ @media (min-width: 768px) { .timeline-split .timeline, .timeline-centered .timeline { display: table; } .timeline-split .timeline-item, .timeline-centered .timeline-item { display: table-row; padding: 0; } .timeline-split .timeline-info, .timeline-centered .timeline-info, .timeline-split .timeline-marker, .timeline-centered .timeline-marker, .timeline-split .timeline-content, .timeline-centered .timeline-content, .timeline-split .period .timeline-info, .timeline-centered .period .timeline-info { display: table-cell; vertical-align: top; } .timeline-split .timeline-marker, .timeline-centered .timeline-marker { position: relative; } .timeline-split .timeline-content, .timeline-centered .timeline-content { padding-left: 30px; } .timeline-split .timeline-info, .timeline-centered .timeline-info { padding-right: 30px; } .timeline-split .period .timeline-title, .timeline-centered .period .timeline-title { position: relative; left: -45px; } } /*---------------------------------------------- MOD: TIMELINE CENTERED ----------------------------------------------*/ @media (min-width: 992px) { .timeline-centered, .timeline-centered .timeline-item, .timeline-centered .timeline-info, .timeline-centered .timeline-marker, .timeline-centered .timeline-content { display: block; margin: 0; padding: 0; } .timeline-centered .timeline-item { padding-bottom: 40px; overflow: hidden; } .timeline-centered .timeline-marker { position: absolute; left: 50%; margin-left: -7.5px; } .timeline-centered .timeline-info, .timeline-centered .timeline-content { width: 50%; } .timeline-centered > .timeline-item:nth-child(odd) .timeline-info { float: left; text-align: right; padding-right: 30px; } .timeline-centered > .timeline-item:nth-child(odd) .timeline-content { float: right; text-align: left; padding-left: 30px; } .timeline-centered > .timeline-item:nth-child(even) .timeline-info { float: right; text-align: left; padding-left: 30px; } .timeline-centered > .timeline-item:nth-child(even) .timeline-content { float: left; text-align: right; padding-right: 30px; } .timeline-centered > .timeline-item.period .timeline-content { float: none; padding: 0; width: 100%; text-align: center; } .timeline-centered .timeline-item.period { padding: 50px 0 90px; } .timeline-centered .period .timeline-marker:after { height: 30px; bottom: 0; top: auto; } .timeline-centered .period .timeline-title { left: auto; } } /*---------------------------------------------- MOD: MARKER OUTLINE ----------------------------------------------*/ .marker-outline .timeline-marker:before { background: transparent; border-color: #FF6B6B; } .marker-outline .timeline-item:hover .timeline-marker:before { background: #FF6B6B; } .spinner { margin: 0 auto 35px; width: 50px; height: 40px; text-align: center; font-size: 10px; opacity: 0.3; visibility: hidden; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }