/* -------------- Font definitions */
@font-face {
    font-family: 'Rasmus';
    font-style: normal;
    font-weight: 400;
    src: local('Rasmus'), url(font/Rasmus-Regular.woff2) format('woff2'), url(font/Rasmus-Regular.woff) format('woff'), url(font/Rasmus-Regular.otf) format('opentype');
}
@font-face {
    font-family: 'Rasmus';
    font-style: normal;
    font-weight: 700;
    src: local('Rasmus Bold'), url(font/Rasmus-Bold.woff2) format('woff2'), url(font/Rasmus-Bold.woff) format('woff'), url(font/Rasmus-Bold.otf) format('opentype');
}


/* -------------- General styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: #fff;
    color: #000; /* blue: #73b9c8, orange: #cf5928 */
    font: 14px 'Rasmus', 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    min-width: 600px;
    -webkit-text-size-adjust:none;
}
@media only screen and (max-width: 760px) {
    body {
        font-size: 18px;
    }
}
a {
    color: inherit;
}
p {
    font-size: 1em;
}
.blue { color: #73b9c8; }
.orange { color: #cf5928; }
.uc {
    text-transform: uppercase;
}
.ls {
    letter-spacing: 3px;
}


/* -------------- Layout and helper styles */
.lt-ie10 #grid { /* safety first, these browsers do not support pointer-events */
    display: none;
}
#grid {
    background: url(img/WHIS_Pattern_2_pattern_fmt.png) no-repeat;
    background-size: cover;
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 999;
}

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    justify-content: space-around;
}
.lt-ie10 .flex > * {
    display: block;
    float: left !important;
    list-style: none;
}
.flex-between {
    justify-content: space-between;
    -webkit-justify-content: space-between;
    -webkit-box-pack: justify;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
}
.flex-center {
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
}


/* -------------- Navigation */
header {
    padding-bottom: 5px;
    height: 80px;
    width: 100%;
}
/* fallback replacement grid */
.lt-ie10 header {
    background: url(img/WHIS_Pattern_2_pattern_fmt.png) no-repeat;
    background-size: cover;
}
header nav {
    margin: 0 auto;
    position: relative;
    min-width: 600px;
    width: 70%;
}
@media only screen and (max-width: 900px) {
    header nav { width: 80%; }
}
@media only screen and (max-width: 760px) {
    header nav { padding-left: 10px; width: calc(100% - 20px); }
}
header nav a {
    color: #73b9c8;
    display: block;
    margin-top: 30px;
    float: right;
    letter-spacing: 6px;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 0 5px #aaa;
}
header nav a:hover, header nav a:focus {
    color: #cf5928;
}
header nav a.logo { /* nth-child is only supported for ie > 8 */
    background: url(img/WHIS_KW32_WortMarke_198_fmt.png) no-repeat center center;
    background-size: 225px 83px;
    padding-top: 80px;
    display: block;
    margin: 0;
    position: absolute;
    left: calc(50% - 112px);
    overflow: hidden;
    height: 0;
    width: 225px;
}
header nav a:first-child {
    float: left;
}


/* -------------- Main Content */
main {
    display: block; /* ie fix */
    text-align: center;
    margin: 0;
    padding: 1px 0 0; /* avoid collapsing margins */
    position: relative;
    min-height: calc(100% - 86px); /* reach minimum viewport height. 80px header + 5px margin + 1px padding */
    min-width: 600px;
    transition: all .3s ease-in-out;
}
.isPast main {
    min-height: 0;
}
main.bottleVisible,
.isPast main.bottleVisible {
    height: 800px; /* bottle must fit into content */
}
@media only screen and (max-width: 760px) {
    main.bottleVisible,
    .isPast main.bottleVisible {
        height: 1050px;
    }
}

main > * {
    position: relative;
    z-index: 2;
}

#background {
    background: no-repeat center center;
    background-size: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
}
.nojs #background {
    background-image: url(img/WHIS_D_1.jpg); /* fallback */
}
#background > div {
    background-position: center center;
    background-size: cover;
    position: absolute;
    opacity: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

#mainText {
    margin-top: 40px;
    text-shadow: 0 0 10px #fff,0 0 5px #fff,0 0 5px #fff;
    transition: all .3s ease-in-out;
}
#mainText p {
    margin: 0;
}

#timeRemaining {
    font-size: 72px;
    font-weight: 700;
    position: relative;
}
#timeRemaining:before, #timeRemaining:after {
    background: url(img/WHIS_KW32_Kranz_fmt.png) no-repeat;
    background-size: 44px 92px;
    content: "";
    display: inline-block;
    position: relative;
    top: 20px;
    height: 92px;
    width: 44px;
}
#timeRemaining:before {
    right: 20px;
}
#timeRemaining:after {
    left: 20px;
    transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.lt-ie9 #timeRemaining:after {
    filter: FlipH;
}

p#timeDescription {
    font-size: 18px;
    margin: -10px 0 30px;
}

/* -------------- Button */
.btn {
	border: 2px solid #000;
	text-align: center;
	padding: .8em;
	margin: 1.5em 0;
	color: #000;
	font-size: .8;
	text-decoration: none;
	display: block;
}

.btn:hover {
	background-color: #000;
	color: #fff;
}

/* -------------- Social Media Buttons */
#facebook {
    background: url("img/WHIS_KW32_Fleck 4_fmt.png") no-repeat;
    background-size: 260px 260px;
    box-sizing: border-box;
    color: #fff;
    font-family: "Roboto Condensed";
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: 2px;
    text-align: left;
    transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg);
    position: absolute;
    padding: 65px 0 0 70px;
    bottom: 20%;
    right: 18%;
    height: 242px; /* rotated width & height */
    width: 231px;
    transition: all .3s ease-in-out;
}
#facebook p {
    margin: 0;
}
#facebook a {
    text-decoration: none;
}
@media only screen and (max-width: 1100px) {
    #facebook { right: 13%; }
}
@media only screen and (max-width: 900px) {
    #facebook { right: 8%; }
}
@media only screen and (max-width: 760px) {
    main { padding-bottom: 15px; } /* avoid rotated facebook note to push white space into viewport */
    #facebook {
        transform: none;
        -ms-transform: none;
        -webkit-transform: none;
        position: relative;
        margin: 0 auto;
        right: auto;
        bottom: auto;
    }
}


/* -------------- "Bottle" content */
.bottle {
    background: url(img/WHIS_Bottle_Loch_Rohling_gross.png) no-repeat;
    background-size: 289px 750px;
    box-sizing: border-box;
    color: #fff;
    pointer-events: none;
    opacity: 0;
    font-size: 11px;
    padding: 255px 17px 0 25px;
    position: absolute;
    left: 10%;
    top: 20px;
    height: 750px;
    width: 289px;
    transition: all .3s ease-in-out;
    z-index: 3;
}
.lt-ie11 .bottle {
    display: none;
}

.bottle-close {
    color: #fff;
    display: none;
    cursor: pointer;
    font: 72px "Roboto Condensed";
    font-weight: bold;
    position: absolute;
    text-shadow: 0 0 5px #aaa;
    text-decoration: none;
    top: 0;
    right: 20px;
}

/* ------ Specific bottle content */
#vorbestellung a {
    text-decoration: none;
}
#preorderForm p {
    font-size: 1.2em;
}
#impressum {
    left: auto !important;
    right: 10%;
}

.target-vorbestellung #vorbestellung,
.target-impressum #impressum,
.target-preorderForm #preorderForm {
    pointer-events: auto;
    opacity: 0.9;
}
.lt-ie11 .target-vorbestellung #vorbestellung,
.lt-ie11 .target-impressum #impressum,
.lt-ie11 .target-preorderForm #preorderForm {
    display: block;
}
.target-impressum #facebook {
    display: none;
}
@media only screen and (max-width: 1150px) {
    .bottle { left: 5%; }
    #impressum { right: 5%; }
}
@media only screen and (max-width: 1000px) {
    .bottle { left: 10px; }
    #impressum { right: 10px; }
}
@media only screen and (max-width: 900px) {
    .bottle {
        left: calc(50% - 135px);
    }
    #impressum {
        right: calc(50% - 135px);
    }
    .bottleVisible #mainText,
    .bottleVisible #facebook {
        opacity: 0.1;
        pointer-events: none;
    }
    .bottleVisible .bottle-close {
        display: block;
    }
}
@media only screen and (max-width: 760px) {
    .bottle {
        background-size: 400px 1000px;
        font-size: 16px;
        left: calc(50% - 200px);
        line-height: 1.4;
        padding: 345px 19px 0 30px;
        height: 1000px;
        width: 400px;
    }
}

label {
    cursor: pointer;
}

/* -------------- Post Time Content */
#postTimeContent {
    margin: 0 auto;
    max-width: 1000px;
    width: 80%;
    transition: all .3s ease-in-out;
}
@media only screen and (max-width: 1000px) {
    #postTimeContent {
        width: 100%;
    }
}
#postTimeContent section {
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 0.8em;
    width: 33%;
}
#postTimeContent p {
    margin: 10px 0;
    text-align: justify;
}
#postTimeContent p img {
    width: 100%;
}
#postTimeContent p img.noFullWidth {
    width: auto;
}