body {
color: #fff;
background: #111;
}

#compass-background {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.26) 34%, rgba(0, 0, 0, 0.16) 100%),
    url("../img/background/compass-background.png"),
    url("../images/background/1.jpg");
background-position: center 46%;
background-repeat: no-repeat;
background-size: cover;
z-index: -999;
}

#curtains {
background: rgba(0, 0, 0, 0.05);
z-index: -1;
}

#top-shade {
display: block;
visibility: visible;
background: rgba(0, 0, 0, 0.04);
filter: none;
}

.preload-content {
background: #000;
opacity: 0.06;
-moz-opacity: 0.06;
-webkit-opacity: 0.06;
filter: alpha(opacity=6);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=6)";
}

#preload {
background: #000;
}

#preload-status {
background: #000 url(../images/preload.gif) no-repeat center center;
}

.center-container-home {
display: flex;
align-items: center;
justify-content: center;
}

.center-block {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}

.upper-content {
width: 100%;
}

#intro-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}

.borders {
border-color: rgba(0, 0, 0, 0.55);
}

.brand-logo {
display: block;
width: auto;
max-width: 470px;
margin: 0 auto 16px auto;
}

#intro-top-line,
#intro-bottom-line {
display: none;
visibility: hidden;
}

#intro-top,
#intro-title,
.teaser-text-animation .teaser-normal,
#countdown span,
#countdown input {
color: #fff;
}

#intro-top {
font-size: 17px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px #000;
width: 100%;
}

#intro-title {
font-size: 94px;
line-height: 100px;
color: #fff;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.55);
margin-top: 12px;
margin-bottom: 20px;
}

#intro-subtitle {
width: 228px;
color: #fff;
background: rgba(0, 0, 0, 0.76);
border-color: rgba(255, 255, 255, 0.65);
font-size: 12px;
letter-spacing: 1px;
margin: 14px auto 0 auto;
align-self: center;
}

#teaser {
margin-top: 8px;
text-align: center;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.teaser-text-animation {
text-align: center;
}

.teaser-text-animation.active {
display: block;
}

.teaser-text-animation span {
display: inline-block;
float: none;
margin: 0 4px;
}

.teaser-text-animation .teaser-highlight {
color: #ed1c24;
}

#countdown-wrapper {
position: relative;
left: auto;
right: auto;
bottom: auto;
margin: 26px auto 0 auto;
width: 520px;
}

#countdown li {
width: 116px;
}

#countdown span {
display: block;
margin-left: 0;
text-align: center;
text-shadow: 1px 1px 2px #000;
}

#countdown input {
text-shadow: 1px 1px 2px #000;
}

@media only screen and (max-width: 767px) {
#compass-background {
background-image:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.30) 36%, rgba(0, 0, 0, 0.14) 100%),
    url("../img/background/compass-background-mobile.png"),
    url("../img/background/compass-background.png");
background-position: center 42%;
}

.brand-logo {
max-width: 280px;
margin-bottom: 18px;
}

#intro-wrapper {
top: auto;
}

#intro-top {
font-size: 15px;
line-height: 20px;
text-align: center;
}

#intro-title {
font-size: 38px;
line-height: 44px;
}

#intro-subtitle {
display: block;
visibility: visible;
margin: 12px auto 0 auto;
width: 215px;
font-size: 11px;
}

#teaser {
margin-top: 10px;
font-size: 20px;
}

#teaser-text {
height: 58px;
}

#countdown-wrapper {
left: 0;
right: 0;
bottom: auto;
margin: 8px auto 0 auto;
width: 260px;
}

#countdown-wrap {
height: 210px;
}

#countdown {
transform: scale(0.78);
transform-origin: top center;
}

#countdown li {
width: 110px;
}
}