/*
 * Landing page — reproduction of the etracking v1 home (Metronic coming-soon
 * layout). Values transcribed from the original coming-soon.css / default.css.
 * The v1 background slideshow (jQuery backstretch: 1s fade, 10s per image) is
 * reproduced in pure CSS below, so the page ships no JavaScript.
 */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    min-height: 100%;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #ddd;
    font-size: 14px;
    line-height: 1.5;
}

/* ---- Background slideshow ---- */
.bg-slideshow { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    /* 4 slides x 10s: 1s fade in, ~9s hold, 1s cross-fade with the next. */
    animation: bg-fade 40s linear infinite;
}
.bg-slide:nth-child(2) { animation-delay: 10s; }
.bg-slide:nth-child(3) { animation-delay: 20s; }
.bg-slide:nth-child(4) { animation-delay: 30s; }
@keyframes bg-fade {
    0%    { opacity: 0; }
    2.5%  { opacity: 1; }
    25%   { opacity: 1; }
    27.5% { opacity: 0; }
    100%  { opacity: 0; }
}

/* Bootstrap 3 .container breakpoints, reproduced. */
.container { margin: 0 auto; padding: 0 15px; width: 100%; }
@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* ---- Header (v1 .home-header) ---- */
.home-header { padding: 20px 20px 20px 0; margin-top: 80px; }
.home-header img { display: block; max-width: 100%; height: auto; }

/* ---- Content (v1 .coming-soon-content, col-md-6) ---- */
.home-content { padding: 20px; margin-top: 10px; color: #fff; }
.home-content h1 {
    font-size: 42px;
    line-height: 50px;
    margin: 0 0 15px;
    font-weight: 300;
    color: #fff;
}
.home-content p { font-size: 13px; margin: 0 0 10px; }
@media (min-width: 992px) { .home-content { max-width: 50%; } }

/* ---- Footer (v1 .coming-soon-footer) ---- */
.home-footer { padding: 20px; font-size: 12px; color: #fefefe; }
.home-footer a { color: #fff; text-decoration: none; }
.home-footer a:hover { text-decoration: underline; }