@import url("normalize.css");
@import url("grid.css");
@import url("animation.css");

/* ====== Fonts ====== */

@font-face {
    font-family: "Akzidenz";
    src:         url("../fonts/AkzidenzGrotesk-Regular.otf");
}

@font-face {
    font-family: "Akzidenz-BoldCond";
    src:         url("../fonts/AkzidenzGrotesk-BoldCond.otf");
}

@font-face {
    font-family: "Akzidenz-LightCond";
    src:         url("../fonts/AkzidenzGrotesk-LightCond.otf");
}

/* ====== Resets ====== */

img,
iframe {
    width:          100%;
    vertical-align: middle;
    border:         none;
}

button {
    outline: none;
}

figure {
    margin: 0;
}

h1 {
    margin: 0;
}

a {
    text-decoration: none;
}

nav ul {
    list-style: none;
}

/* ====== Global Styles ====== */

html,
body {
    min-height: 100%;
    height:     100%;
}

body {
    font-size:   16px;
    line-height: 1.8;
    background:  #FFF;
    font-family: "Akzidenz";
}

main {
    height: 100%;
}

.text-only {
    width:      50%;
    margin:     0 auto;
    padding:    120px 60px;
    background: #de1624;
    color:      #FFF;
}

.text-only h2 {
    font-size:     72px;
    color:         #FFF;
    margin-bottom: 30px;
}

.text-only a {
    color: #FFF;
}

hr {
    border:     none;
    height:     2px;
    background: #EEE;
    margin:     60px 0;
}

/* === Only Mobile === */

.mobile {
    display: none;
}

.start_mobile {
    display: none;
}

.landscape {
    display: none;
}

.portrait {
    display: none;
}

/* === Headlines === */

h1,
h2,
h3,
h5 {
    font-family:    "Akzidenz-BoldCond";
    text-transform: uppercase;
}

/* === Colors === */

.bg-red {
    background: #de1624;
}

/* === Call to Action === */

.checkin,
.cta {
    display:        block;
    height:         60px;
    line-height:    60px;
    max-width:      270px;
    width:          100%;
    text-align:     center;
    font-family:    "Akzidenz-BoldCond";
    font-size:      24px;
    text-transform: uppercase;
    color:          #FFF;
    border:         2px solid #FFF;
    margin-top:     30px;
}

.checkin {
    background: #de1624;
}

.text-only ul {
    margin-left: 20px;
}

/* ====== Main Styles ====== */

/* === Logo === */

#logo {
    position: fixed;
    top:      60px;
    left:     10%;
    z-index:  9999;
}

#logo a {
    display: block;
    width:   240px;
}

/* === Burger === */

#burger {
    width:    30px;
    height:   25px;
    position: fixed;
    top:      60px;
    right:    5%;
    cursor:   pointer;
    z-index:  9993;
}

#burger span {
    display:    block;
    height:     5px;
    background: #000;
    position:   absolute;
    left:       0;
}

.line-1 {
    top: 0;
}

.line-2 {
    top: 10px;
}

.line-3 {
    top: 20px;
}

/* === Navigation === */

#menu {
    width:           100%;
    height:          100%;
    background:      url("../img/form_menu.svg") no-repeat top;
    background-size: cover;
    position:        fixed;
    z-index:         99999999;
    bottom:          -100%;
    transition:      ease-out .3s;
}

#menu ul {
    width:    240px;
    height:   auto;
    right:    80px;
    bottom:   30px;
    position: absolute;
}

#menu ul li {
}

#menu ul li:nth-child(5) a,
#menu ul li:nth-child(6) a,
#menu ul li:nth-child(7) a {
    color: rgba(255, 255, 255, .15);
}

#menu ul li:nth-child(1) {
    top: 90px;
}

#menu ul li:nth-child(2) {
    top: 170px;
}

#menu ul li:nth-child(3) {
    top: 250px;
}

#menu ul li:nth-child(4) {
    top: 330px;
}

#menu ul li:nth-child(5) {
    top: 410px;
}

#menu ul li:nth-child(6) {
    top: 490px;
}


#menu a {
    font-family:    "Akzidenz-BoldCond";
    text-transform: uppercase;
    color:          #FFF;
    font-size:      48px;
}

/* ====== Pagination ====== */

#pagination {
    position: fixed;
    left:     5%;
    top:      200px;
    z-index:  9996;
}

#pagination ul {
    list-style: none;
}

#pagination a {
    display:       block;
    width:         10px;
    height:        10px;
    background:    rgba(0, 0, 0, .15);
    border-radius: 50%;
    color:         transparent;
    margin-top:    20px;
    position:      relative;
    cursor:        pointer;
}

#pagination a:hover {
    background: #000;
}

#pagination .active {
    background: #000;
}

#pagination .active:after {
    content:       "";
    display:       block;
    width:         24px;
    height:        24px;
    border-radius: 50%;
    border:        1px solid rgba(0, 0, 0, .15);
    position:      absolute;
    top:           -7px;
    left:          -7px;
}

/* ====== Wrapper ====== */

.wrapper {
    width:         100%;
    height:        100%;
    padding-left:  5%;
    padding-right: 8%;
    position:      relative;
}

/* ====== Check ====== */

.not {
    max-width:   700px;
    width:       100%;
    margin:      0 auto;
    padding-top: 20%;
}

.not a {
    display: block;
    width:   calc(33.333% - 30px);
    margin:  0 15px;
    float:   left;
}

.check-bg {
    background:      url("../img/check-bg.jpg") no-repeat center bottom #de1624 fixed;
    background-size: contain;
    min-height:      100vh;
    position:        relative;
    z-index:         9998;
}

.check-bg-datenschutz {
    position:   relative;
    z-index:    9998;
    background: #FFF;
}

.check-text {
    margin:         0 auto;
    padding-top:    10%;
    text-align:     center;
    color:          #FFF;
    font-size:      14px;
    color:          #FFF;
    position:       relative;
    z-index:        9999;
    text-transform: uppercase;
}

.check {
    width:      100%;
    text-align: center;
}

.check h3 {
    font-size: 48px;
    color:     #FFF;
    margin:    30px 0;
}

.check p {
    display: inline;

}

.check a, .check button {
    display:        inline-block;
    height:         60px;
    line-height:    60px;
    max-width:      150px;
    width:          100%;
    text-align:     center;
    font-family:    "Akzidenz-BoldCond";
    font-size:      24px;
    text-transform: uppercase;
    color:          #FFF;
    border:         2px solid #FFF;
    position:       relative;
    z-index:        10;
    overflow:       hidden;
    transition:     ease-out .3s;
    margin:         0 15px;
    cursor:         pointer;
}

.check a:after, .check button:after {
    content:    "";
    display:    block;
    width:      100%;
    height:     0;
    background: #FFF;
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%) rotate(45deg);
    transition: ease-out .35s;
    z-index:    -1;
}

.check a:hover:after, check button:hover:after {
    height: 220px;
}

.check a:hover, .check button:hover {
    color: #de1624;
}

.copyright {
    text-transform: uppercase;
    text-align:     center;
    margin-top:     30px;
    font-size:      12px;
    color:          #FFF;
    padding:        0 15px;
}

.copyright a {
    color:           #FFF;
    text-decoration: underline;
}

/* ====== Home / Product Teaser ====== */

#product-teaser {
    position: fixed;
}

/* === Form === */

.form {
    width:         100%;
    padding-right: 30%;
    position:      fixed;
    bottom:        0;
}

/* === Packshot === */

.packshot,
.packshots {
    width:    100%;
    position: fixed;
    bottom:   0;
    z-index:  1;
}

.packshot {
    left:      15%;
    max-width: 550px;
}

.packshots {
    left:      7.5%;
    max-width: 990px;
}

/* === Teaser Text === */

.teaser-text,
.teaser-text_packshots {
    max-width: 380px;
    width:     100%;
    color:     #FFF;
    position:  absolute;
    left:      25%;
    z-index:   2;
}

.teaser-text {
    top: 50%;
}

.teaser-text_packshots {
    top: 65%;
}


.teaser-text h1,
.teaser-text h2,
.teaser-text_packshots h1,
.teaser-text_packshots h2 {
    font-size:   72px;
    line-height: 72px;
}

/* === Teaser Image === */

.teaser-img {
    width:        70%;
    padding-left: 5%;
}

/* === Word Style === */

.word-style {
    position: absolute;
    color:    #f2f2f2;
}

.word-style h5 {
    font-size:   450px;
    line-height: 320px;
}

#word-1 {
    top: 30px;
}

#word-2 {
    top:               55%;
    -webkit-transform: translateY(-45%);
    transform:         translateY(-45%);
}

#word-3 {
    bottom:  -90px;
    z-index: 1;
}

/* === Direction === */

.direction {
    width:             20px;
    position:          absolute;
    top:               50%;
    -webkit-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index:           9997;
}

#prev {
    right:      7.5%;
    transition: ease-out .3s;
    opacity:    0;
}

#next {
    right:      5%;
    transition: ease-out .3s;
    opacity:    0;
}

#prev:hover,
#next:hover {
    opacity: .15;
}

/* ====== Product Details ====== */

.content {
    margin-top: 530px;
}

/* === Scroll Top === */

.scrolltop {
    max-width:    120px;
    float:        right !important;
    margin-right: 20%;
    margin-top:   -10%;
    cursor:       pointer;
}

/* === Scroll Down === */

.scroll-down {
    width:             300px;
    height:            0;
    position:          absolute;
    top:               50%;
    left:              35%;
    -webkit-transform: translateY(-50%);
    transform:         translateY(-50%);
    z-index:           10;
    cursor:            pointer;
}

.arrow-stroke {
    width:             3px;
    height:            100%;
    background:        #FFF;
    position:          absolute;
    left:              15px;
    bottom:            3px;
    -webkit-transform: translateX(-50%);
    transform:         translateX(-50%);
}

.scroll-down img {
    position: absolute;
    width:    30px;
    bottom:   0;
}

.more {
    display:        block;
    position:       absolute;
    color:          #FFF;
    top:            35%;
    font-size:      13px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family:    "Akzidenz-BoldCond";
}

#product-details .word-style {
    z-index: 10;
}

/* Text Box */

.text-box {
    width:      40%;
    min-height: 500px;
    color:      #FFF;
    margin:     0 auto 150px auto;
    padding:    90px 120px;
    position:   relative;
}

.text-box h2 {
    font-size:     48px;
    line-height:   48px;
    margin-bottom: 60px;
}

.box-red {
    background: #de1624;
    position:   absolute;
    top:        0;
    right:      0;
    bottom:     0;
    left:       0;
    z-index:    -2;
}

.box-darkgrey {
    background: #333;
    position:   absolute;
    top:        0;
    right:      0;
    bottom:     0;
    left:       0;
    z-index:    -1;
}

/* === Form === */

.form-2_red {
    width:      70%;
    height:     0;
    left:       5%;
    position:   absolute;
    top:        0;
    background: #de1624;
    transition: ease-in .9s;
}

.form-2_darkgrey {
    width:      70%;
    height:     0;
    left:       5%;
    position:   absolute;
    top:        0;
    background: #333333;
    transition: ease-in .9s;
}

.form-2 {
    width:      70%;
    position:   absolute;
    top:        -1px;
    left:       5%;
    transition: ease-in .9s;
}

/* Packshot Text */

.packshot_text {
    max-width: 540px;
    width:     100%;
    position:  absolute;
    bottom:    0;
    left:      -60px;
    z-index:   -1;
}

/* === Slider === */

#slider {
    width:         40%;
    position:      relative;
    left:          20%;
    margin-bottom: 120px;
}

#slider:after {
    content:         "";
    display:         block;
    width:           101%;
    height:          470px;
    background:      url("../img/form-2_white.svg") no-repeat;
    background-size: cover;
    position:        absolute;
    bottom:          -1px;
}

#slider .slick-arrow {
    width:             60px;
    height:            60px;
    position:          absolute;
    top:               35%;
    -webkit-transform: translateY(-65%);
    transform:         translateY(-65%);
    z-index:           1;
    color:             transparent;
    border:            none;
    background-size:   15px;
    cursor:            pointer;
}

.slick-prev {
    right:      -195px;
    background: url("../img/slick-prev.svg") #de1624 no-repeat center center;
}

.slick-next {
    right:           -285px;
    background:      url("../img/slick-next.svg") #de1624 no-repeat center center;
    background-size: 15px;
}

.slick-dots {
    display: none !important;
}

/* ====== Contact ====== */

#contact {
    width:      50%;
    margin:     0 auto;
    padding:    120px 60px;
    background: #333333;
    color:      #FFF;
}

#contact .fieldrow {
    margin-bottom: 30px;
}

#contact label {
    display: block;
}

#contact input,
#contact select {
    width:         100%;
    height:        40px;
    border:        none;
    border-radius: 3px;
}

#contact textarea {
    width:      100%;
    min-height: 100%;
}

#contact h2 {
    font-size: 72px;
}

#contact .datenschutz input {
    width:          auto;
    display:        inline-block;
    vertical-align: top;
    height:         auto;
}

#contact .datenschutz label {
    width:        96%;
    display:      inline-block;
    font-size:    10px;
    text-align:   justify;
    padding-left: 15px;
}

#contact .datenschutz label a {
    font-weight:    bold;
    color:          #de1624;
    letter-spacing: 1px;
}

.submit,
.submit button {
    max-width:  300px;
    width:      100%;
    height:     45px;
    margin:     0 auto;
    cursor:     pointer;
    border:     1px solid #FFF;
    background: transparent;
    color:      #FFF;
}

.mobile-img {
    display: none;
}

.readmore-button {
    display: none;
}

.buyNowBtn {
    padding:          12px;
    background-color: black;
    color:            white;
    position:         absolute;
    right:            10px;
    bottom:           55px;
}

.buyNow {
    top: 73%;
}

.teaser-text.buyNowMobile {
    bottom:  7%;
    left:    initial;
    z-index: 9999999;
    right:   30px;
    border:  2px solid #333;
}

.buyNowMobile p a {
    color:      #333;
    margin-top: 0;
}

/* ====== Responsive ====== */

#altersabfrage.hidden {
    display: none;
}

#altersabfrage {
    width:                      100%;
    height:                     100%;
    display:                    block;
    position:                   fixed;
    background:                 #fff;
    top:                        0;
    left:                       0;
    z-index:                    99999999;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling:         touch;
    overflow-y:                 scroll;
}

.slick-previous {
    background:      url(../img/slick-prev.svg) #de1624 no-repeat center center;
    background-size: 15px;
}

.readmore-button {
    cursor: pointer;
}


#pp_content {
    width:            100%;
    background-color: rgb(242, 242, 242);
}

#pp_navigation img.open {
    background-color: rgb(242, 242, 242);
}

#pp_navigation, #pp_content, #pp_navigation img, #pp_content span {
    margin: 0;
}

#pp_content #pp_confirmation span {
    width: 50%;
}

#pp_content a:hover:before {
    background-color: #de2923!important;
}

#pp_confirmation {
    border: solid 2px #de2923!important;
}

#pp_confirmation span:hover {
    background-color: #de2923 !important;
}

#pp_used_cookies input:checked + .pp_slider {
    background-color: #de2923!important;
}

#datenschutz_analytics input:checked + .pp_slider{
    background-color: #5f1412!important;
}


#pp_content #pp_used_cookies h2, #pp_content #pp_handling_cookies h2, #pp_content #pp_used_cookies h3, #pp_content #pp_used_cookies h4 {
    font-family: "Akzidenz";
}

#datenschutz_analytics {
    width: 50%;
    margin: -100px auto 0 auto;
    padding: 5px 60px;
    background: #de1624;
    color: #FFF;
}


@media screen and (max-width: 1700px) {

    /* === Form === */
    .form {
        padding-right: 15%;
    }

    /* === Teaser Text === */
    .teaser-text {
        top:               60%;
        left:              30%;
        -webkit-transform: translateY(-40%);
        transform:         translateY(-40%);
    }

    /* === BuyNow Btn === */
    .buyNow {
        top:       70%;
        left:      28%;
        width:     90%;
        max-width: 200px;
    }

    .buyNowFlavors {
        top:  76%;
        left: 27%;

    }
}

@media screen and (max-width: 1366px ) {

    /* === Word Style === */
    .word-style h5 {
        font-size:   350px;
        line-height: 250px;
    }

    #word-3 {
        bottom: -60px;
    }

    /* === Slogan === */
    #stroke-line_onload {
        width:    90px;
        height:   90px;
        position: fixed;
        top:      150px;
        right:    5%;
        z-index:  3;
    }

    #stroke-line_onload h4 {
        font-size: 16px;
    }

    /* === Form === */
    .form {
        padding-right: 30%;
    }

    /* === Packshot === */
    .packshot {
        max-width: 390px;
    }

    /* === Teaser Text === */
    .teaser-text {
        max-width: 230px;
        left:      25%;
    }

    .teaser-text_packshots h1, .teaser-text_packshots h2,
    .teaser-text h1, .teaser-text h2 {
        font-size:   60px;
        line-height: 60px;
    }

    /* === BuyNow Btn === */
    .buyNow {
        max-width: 150px;
        left:      25%;
    }

}

@media screen and (max-width: 1200px) {

    #logo a {
        display: block;
        width:   150px;
    }

    .wrapper {
        padding: 0;
    }

    .desktop {

    }

    .mobile {
        display: block;
    }

    .form-mobile {
        background-position: center bottom !important;
        height:              100%;
    }

    .buyNowFlavors {
        max-width: 170px;
    }

    .buyNowFlavors p a {
        height:      45px;
        line-height: 45px;
    }

}

@media screen and (max-width: 1024px) {

    .desktop {
        display: none;
    }

    #logo {
        position: absolute;
        top:      30px;
        left:     30px;
    }

    #burger {
        position: absolute;
        top:      30px;
        right:    30px;
    }

    #menu {
        height: 90%;
    }

    #menu ul {
        width:  150px;
        bottom: 60px;
    }

    #menu a {
        font-size: 30px;
    }

    #pagination {
        top:   210px;
        right: 40px;
        left:  auto;
    }

    .text-box {
        width:         calc(100% - 60px);
        min-height:    500px;
        margin:        0 auto;
        margin-bottom: 60px;
        padding:       60px 60px 60px 120px;
    }

    #contact,
    .text-only {
        width:     calc(100% - 180px);
        word-wrap: break-word;
    }

    .packshot_text {
        max-width: 400px;
        left:      20px;
    }

    #slider {
        width:  calc(100% - 60px);
        margin: 0 auto;
        left:   auto;
    }

    .teaser-text {
        top:               auto;
        left:              35%;
        bottom:            150px;
        -webkit-transform: translateY(40%);
        transform:         translateY(40%);
    }

    .number-box_left {
        left: 30px;
    }

    .number-box_right {
        right: 30px;
    }

    .stroke-line_onscroll h4 {
        left: 15px;
    }

    #slider .slick-arrow {
        display: none !important;
    }

    .portrait,
    .landscape {
        margin-top: 60px;
        position:   relative;
    }

    .scrolltop {
        margin: 0 30px 30px 0;
    }
}

@media only screen
and (max-width: 1024px)
and (orientation: portrait) {

    #menu ul {
        height: 50%;
    }

    .buyNowBtn {
        top:              90px;
        bottom:           auto;
        background-color: white;
        color:            black;
        font-weight:      bold;
    }

    .portrait {
        display: block;
    }

    .content {
        margin-top: 120px;
    }

}

@media only screen
and (max-width: 1024px)
and (orientation: landscape) {

    .landscape {
        display: block;
    }

    .teaser-text {
        left: 25%;
    }

    .content {
        margin-top: 250px;
    }

    #menu ul {
        height: 82%;
    }

    .teaser-text.buyNowMobile {
        bottom: -4%;
    }
}

@media screen and (max-width: 695px) {
    .buyNowBtn {
        padding:          10px;
        top:              auto;
        bottom:           35px;
        background-color: black;
        color:            white;
        font-weight:      bold;
    }
}

@media screen and (max-width: 768px) {

    .check-text {
        width:     100%;
        font-size: 14px;
    }

    .check a {
        max-width: 300px;
        font-size: 18px;
    }

    #logo {
        top:  15px;
        left: 15px;
    }

    #logo a {
        max-width: 120px;
    }

    #burger {
        top:   15px;
        right: 15px;
    }

    #menu {
        height: 95%;

    }


    .readmore-button {
        display: block;
    }

    #menu ul {
        width: 130px;
        right: 0;
    }

    #menu a {
        font-size: 20px;
    }

    #pagination {
        display: none;
    }

    .start_mobile {
        display:  block;
        position: relative;
    }

    .start-01 {
        margin-top: 120px;
    }

    .start-1 {
        margin-top: -1px;
    }

    .start-2 {
        margin-top: -1px;
    }

    .start-3 {
        margin-top: -1px;
    }

    .teaser-text_mobile {
        position: absolute;
        color:    #FFF;
        left:     32%;
        z-index:  1;
    }

    .teaser-text_mobile h1,
    .teaser-text_mobile h2 {
        font-size:   30px;
        line-height: 30px;
    }

    .teaser-1_mobile {
        top:               40%;
        -webkit-transform: translateY(-60%);
        transform:         translateY(-60%);
    }

    .teaser-3_mobile {
        top: 60px;
    }

    .teaser-text_mobile .cta {
        width:       180px;
        height:      45px;
        line-height: 45px;
        max-width:   150px;
        font-size:   16px;
    }

    #contact,
    .text-only {
        width:   calc(100% - 60px);
        padding: 60px 30px;
    }

    #contact h2,
    .text-only h2 {
        font-size: 36px;
    }

    .readmore {
        display: none;
    }

    .readmore-button {
        width:       120px;
        height:      30px;
        line-height: 30px;
        margin-top:  30px;
        text-align:  center;
        border:      1px solid #FFF;
    }

    .text-box {
        min-height: 0;
    }

    #slider:after {
        height: 355px;
    }
}

@media screen and (max-width: 767px) {

    .not {
        padding-top: 120px;
    }

    .not a {
        display: block;
        width:   calc(50% - 30px);
        margin:  5px auto;
        float:   none;
    }

    .big-1 h6, .big-3 h6, .big-5 h6, .big-2 h6, .big-4 h6, .packshot_text.animate {
        display: none;
    }

    .packshot_text img {
        display: none !important;
    }

    .mobile-img {
        display: block;
        margin:  0 30px 60px 30px;
    }

    .check-text {
        padding-top: 30%;
    }

}

@media screen and (max-width: 568px) {

    .text-box {
        padding: 30px;
    }

    .teaser-text.buyNowMobile {
        bottom: 5%;
    }

    .teaser-text.buyNowMobile p a {
        font-size:   18px;
        height:      40px;
        line-height: 37px;
    }
}

@media screen and (max-width: 400px) {

    .teaser-text.buyNowMobile {
        max-width: 100px;
    }

    .teaser-text.buyNowMobile p a {
        font-size:   14px;
        height:      31px;
        line-height: 31px;
        width:       100%;
        max-width:   100px;
    }
}