:root {
    --main-bg-color: brown;
}

section {
    padding-top: 1vh;
    padding-bottom: 50px;
    min-height: 100vh;
    scroll-snap-align: start;
}

.active-tile {
    position: absolute;
    width: 0;
    height: 100%;
    background-color: #dedede;
}

@media screen and (max-width:991px) {
    .timeline-jahr {
    }

    .active-tile {
        height: 40px;
    }

    section {
        scroll-snap-align: none;
    }
}

header {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1;
}

.nummer {
    width: 4rem;
    height: 4rem;
    background-color: #322786;
    z-index: 5;
}

h1 {
    color: #322786;
    padding: 1em;
    font-variant: small-caps;
    font: 700 3.25rem/3.525rem Montserrat, sans-serif;
}

h2 {
    color: #322786;
    text-align: center;
    font-variant: small-caps;
    font: 600 1.5rem/2.125rem Montserrat, sans-serif;
}

a.nav-link {
    color: #322786;
    font: 700 1rem/1.125rem Montserrat, sans-serif;
}

.timeline {
    margin: 0 auto;
    position: relative;
}

.timeline-event {
    position: relative;
    background: -webkit-linear-gradient(83deg, rgba(233, 233, 234, .77) 3.90244%, #e9e9ea 100%, rgba(233, 233, 234, .68) 100%);
    border-radius: 5px;
    padding: 0 1em .5em 2em;
    margin-top: 1em;
}

.timeline-jahr {
    -moz-transition: box-shadow 1.5s ease-in .1s;
    -o-transition: box-shadow 1.5s ease-in .1s;
    -webkit-transition: box-shadow 1.5s ease-in;
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
    transition: box-shadow 1.5s ease-in .1s;
    color: #9d9ab7;
    font-size: 2.25em;
    -moz-box-shadow: inset 40 0 0 0 #14bf98;
    -webkit-box-shadow: inset 0 0 0 0 #14bf98;
    box-shadow: inset 0 0 0 0 #14bf98;
    display: inline-block;
    padding: .25em 1em 0;
    min-width: 70%;
    opacity: .5;
    line-height: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    z-index: -8;
}

.entsorgung {
    background-color: #18a795;
    color: #322786;
    text-align: center;
    padding: 0 0 1px 10px;
    margin: 2rem 0 52px -84px;
    z-index: -1;
}

.ico {
    margin-left: 5rem;
}

div.card-body {
    background: -webkit-radial-gradient(right center, #fff 2%, rgba(238, 238, 238, .55) 99%);
    box-shadow: 2px 2px 8px 2px rgba(169, 166, 194, .77);
}

.standorte {
    fill: #3d4e70;
}

.content-box {
    position: relative;
    width: 100%;
    min-height: 250px;
    background: #ccc;
    margin: 15px 0;
}

.img-box.left {
    position: absolute;
    top: -15px;
    right: -15px;
    bottom: -15px;
    width: calc(50vw - 15px);
}

.img-box.right {
    position: absolute;
    top: -15px;
    left: -15px;
    bottom: -15px;
    width: calc(50vw - 15px);
    background: red;
}

@media only screen and (max-width:768px) {
    .meilensteine {
    }

    .timeline-jahr {
        min-width: 0;
    }

    .img-box.left,
    .img-box.right {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background: red;
    }
}

.card-body {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    min-height: 1px;
    padding: 1rem;
    background-image: url(web/boa-eichhorn.jpg);
    flex-shrink: 11px;
}

.footer {
    background-color: #322786;
    width: 100vw;
    height: auto;
}

.card-title {
    padding-bottom: .5em;
}

#erf1,
#erf2 {
    margin-top: 1em;
    min-height: 95vh;
    padding-top: 1em;
    scroll-snap-type: start;
}

.meilensteine {
    padding: .6em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    margin-left: 0rem;
    background: linear-gradient(to right, rgba(0, 65, 106, 0.2) 0.344828%, rgb(228, 229, 230) 100%);
}

p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1.6em;
}

.card-body>p {
    font-size: 1em;
}

/* -------------------------------- struktur -------------------------------- 
html {
    scroll-snap-points-y: repeat(300px);

    /* body won't work ¯\_(ツ)_/¯ 
    scroll-snap-type: y proximity;
} */
html,
body {
    margin: 0;
    scroll-snap-type: y proximity;
    scroll-snap-stop: always;
    scroll-padding: 100px 0 0 50px;
}
/*
div.footer {
    scroll-snap-align: none;
}

 section {
    scroll-snap-align: start;
   ;; border-top: 7px solid rgb(158, 78, 78);
    scroll-margin-top: 1000px;
    scroll-snap-type: y always;
    scroll-margin-bottom: 50px;
    scroll-padding: 5px 0 0 0px;
} */
section:nth-of-type(even) {
}

/* section:nth-of-type(odd) {
    background: #147c85;
} */
/* .container {
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(300px);
    scroll-snap-type: y mandatory;
} */
/* --------------------------------- contact -------------------------------- */
/* /* ********************* */
/* 16. Contact */
/* ********************* */
/* .form-2 {
    padding-top: 6.625rem;
    padding-bottom: 5.625rem;
    background-color: #fbfbfb;
}
.form-2 .text-container {
    margin-bottom: 3rem;
}
.form-2 .section-title {
    margin-bottom: 0.5rem;
}
.form-2 h2 {
    margin-bottom: 1.375rem;
}
.form-2 .list-unstyled {
    margin-bottom: 2.25rem;
    font-size: 1rem;
    line-height: 1.625rem;
}
.form-2 .list-unstyled .fas,
.form-2 .list-unstyled .fab {
    margin-right: 0.5rem;
    font-size: 0.875rem;
    color: #14bf98;
}
.form-2 .list-unstyled .fa-phone {
    vertical-align: 3%;
}
.form-2 h3 {
    margin-bottom: 1rem;
}
.form-2 .fa-stack {
    margin-right: 0.25rem;
    margin-bottom: 0.75rem;
    margin-left: 0.125rem;
    width: 3.25rem;
    height: 3.25rem;
}
.form-2 .fa-stack .hexagon {
    position: absolute;
    width: 3.25rem;
    height: 3.25rem;
    background: url('../images/hexagon-green.svg') center center no-repeat;
    background-size: 3.25rem 3.25rem;
    transition: all 0.2s ease;
}
.form-2 .fa-stack:hover .hexagon {
    background: url('../images/hexagon-white.svg') center center no-repeat;
    background-size: 3.25rem 3.25rem;
}
.form-2 .fa-stack-1x {
    font-size: 1.5rem;
    line-height: 3.25rem;
    color: #fff;
    transition: all 0.2s ease;
}
.form-2 .fa-stack:hover .fa-stack-1x {
    color: #14bf98;
}

/* ******************** */
/* 17. Footer */
/* ******************** */
/* .footer {
    padding-top: 5rem;
    </h4>: Jean-Burger-Straße 18, 39112 Magdeburg<br> Standort;
    Aachen: Lütticher Straße 32, 52064 Aachen </p> </div> <!-- end of text-container --> </div> <!-- end of col --> <div class="col-md-4"> <div class="text-container"> <h4>Links</h4> <ul class="list-unstyled li-space-lg white"> <li> <a class="white" href="impressum.html">Impressum</a> </li> <li> <a class="white" href="zertifikat.pdf">Zertifikat</a> </li> </ul> </div> <!-- end of text-container --> </div> <!-- end of col --> </div> <!-- end of row --> </div> <!-- end of container --> </div>;
    background-color: #322786;
}
.footer {
    padding-top: 5rem;
    background-color: #322786;
}
322786 .footer .text-container {
    margin-bottom: 2.25rem;
}
.footer h4 {
    margin-bottom: 0.75rem;
    color: #fff;
}
.footer p,
.footer ul {
    font-size: 0.875rem;
    line-height: 1.375rem;
} */
/* --------------------------------- dev-css -------------------------------- */
.form-control-input,
.form-control-select,
.pg-main-cs-13 {
    display: block;
    width: 100%;
    padding-top: 1.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1.3125rem;
    border: 1px solid #dadada;
    border-radius: 0.25rem;
    background-color: #fff;
    color: #787976;
    font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
    transition: all 0.2s;
    -webkit-appearance: none;
}

.label-control,
.pg-main-cs-13 {
    position: absolute;
    top: 0.8125rem;
    left: 1.375rem;
    color: #787976;
    opacity: 1;
    font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
    cursor: text;
    transition: all 0.2s ease;
}

.checkbox,
.pg-main-cs-13 {
    font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
}

.fire {
    margin: 50px auto;
    width: 80%;
    max-width: 1000px;
    height: 200px;
    background-position: center center;
    background-size: 1000px 200px;
    border-radius: 10px;
    font-family: 'Open Sans';
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}

.fire:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.Blazing {
    display: inline-block;
    margin: 0;
    color: #a03b0f;
    font-size: 4em;
    line-height: 2em;
    min-width: 50px;
    outline: none;
    vertical-align: middle;
    text-shadow: 0 3px 20px #0092ff, 0 0 20px red, 0 0 10px #00ff4a, 4px -5px 6px yellow, -4px -10px 10px #00ff96, 0 -10px 30px yellow;
    animation: 2s Blazing infinite alternate linear;
}

@keyframes Blazing {
    0% {
        text-shadow: 0 3px 20px red, 0 0 20px red, 0 0 10px orange, 0 0 0 yellow, 0 0 5px yellow, -2px -5px 5px yellow, 4px -10px 10px yellow;
    }

    25% {
        text-shadow: 0 3px 20px red, 0 0 30px red, 0 0 20px orange, 0 0 5px yellow, -2px -5px 5px yellow, 3px -10px 10px yellow, -4px -15px 20px yellow;
    }

    50% {
        text-shadow: 0 3px 20px red, 0 0 20px red, 0 -5px 10px orange, -2px -5px 5px yellow, 3px -10px 10px yellow, -4px -15px 20px yellow, 2px -20px 30px rgba(255, 255, 0, 0.5);
    }

    75% {
        text-shadow: 0 3px 20px red, 0 0 20px red, 0 -5px 10px orange, 3px -5px 5px yellow, -4px -10px 10px yellow, 2px -20px 30px rgba(255, 255, 0, 0.5), 0px -25px 40px rgba(255, 255, 0, 0);
    }

    100% {
        text-shadow: 0 3px 20px red, 0 0 20px red, 0 0 10px orange, 0 0 0 yellow, 0 0 5px yellow, -2px -5px 5px yellow, 4px -10px 10px yellow;
    }
}

/* --------------------------------- reveal --------------------------------- */
:root {
    --delay: 0;
    --duration: 800ms;
    --iterations: 1;
}

/* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */
.reveal-text,
.reveal-text::after {
    -webkit-animation-delay: var(--animation-delay, 2s);
    animation-delay: var(--animation-delay, 2s);
    -webkit-animation-iteration-count: var(--iterations, 1);
    animation-iteration-count: var(--iterations, 1);
    -webkit-animation-duration: var(--duration, 800ms);
    animation-duration: var(--duration, 800ms);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
    --animation-delay: var(--delay, 0);
    --animation-duration: var(--duration, 800ms);
    --animation-iterations: var(--iterations, 1);
    position: relative;
    font-size: 5vw;
    -webkit-animation-name: clip-text;
    animation-name: clip-text;
    color: #ffffff;
    white-space: nowrap;
    cursor: default;
}

.reveal-text::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f98b;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    -webkit-animation-name: text-revealer;
    animation-name: text-revealer;
}

@-webkit-keyframes clip-text {
    from {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }

    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes clip-text {
    from {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }

    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }
}

@-webkit-keyframes text-revealer {
    0%,
    50% {
        transform-origin: 0 50%;
    }

    60%,
    100% {
        transform-origin: 100% 50%;
    }

    60% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

@keyframes text-revealer {
    0%,
    50% {
        transform-origin: 0 50%;
    }

    60%,
    100% {
        transform-origin: 100% 50%;
    }

    60% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}

.btn-solid-reg {
    display: inline-block;
    padding: 1.1875rem 1.875rem 1.1875rem 1.875rem;
    border: 0.125rem solid #322786;
    border-radius: 0.25rem;
    background-color: #322786;
    color: #fff;
    font: 700 0.75rem/0 "Montserrat", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-solid-reg:hover {
    background-color: transparent;
    color: #14bf98;
    text-decoration: none;
}

.btn-solid-lg {
    display: inline-block;
    padding: 1.375rem 2.125rem 1.375rem 2.125rem;
    border: 0.125rem solid #14bf98;
    border-radius: 0.25rem;
    background-color: #322786;
    color: #fff;
    font: 700 0.75rem/0 "Montserrat", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-solid-lg:hover {
    background-color: transparent;
    color: #322786;
    text-decoration: none;
}

.btn-outline-reg {
    display: inline-block;
    padding: 1.1875rem 1.875rem 1.1875rem 1.875rem;
    border: 0.125rem solid #787976;
    border-radius: 0.25rem;
    background-color: transparent;
    color: #787976;
    font: 700 0.75rem/0 "Montserrat", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-outline-reg:hover {
    background-color: #787976;
    color: #fff;
    text-decoration: none;
}

.btn-outline-lg {
    display: inline-block;
    padding: 1.375rem 2.125rem;
    border: 0.325rem solid #19737c;
    border-radius: 0.25rem;
    color: #ffffff;
    font: 700 1.75rem/0 "Montserrat", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
    margin-top: 2rem;
}

.btn-outline-lg:hover {
    background-color: #787976;
    color: #fff;
    text-decoration: none;
}

.btn-outline-sm {
    display: inline-block;
    padding: 1rem 1.625rem 0.9375rem 1.625rem;
    border: 0.125rem solid #787976;
    border-radius: 0.25rem;
    background-color: transparent;
    color: #787976;
    font: 700 0.75rem/0 "Montserrat", sans-serif;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-outline-sm:hover {
    background-color: #787976;
    color: #fff;
    text-decoration: none;
}

.form-group {
    position: relative;
    margin-bottom: 1.25rem;
}

.form-group.has-error.has-danger {
    margin-bottom: 0.625rem;
}

.form-group.has-error.has-danger .help-block.with-errors ul {
    margin-top: 0.375rem;
}

.label-control {
    position: absolute;
    top: 0.8125rem;
    left: 1.375rem;
    color: #787976;
    opacity: 1;
    font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
    cursor: text;
    transition: all 0.2s ease;
}

/* IE10+ hack to solve lower label text position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .label-control {
        top: 0.9375rem;
    }
}

.form-control-input:focus + .label-control,
.form-control-input.notEmpty + .label-control,
.form-control-textarea:focus + .label-control,
.form-control-textarea.notEmpty + .label-control {
    top: 0.125rem;
    opacity: 1;
    font-size: 0.75rem;
    font-weight: 500;
}

.form-control-input,
.form-control-select {
    display: block;

    /* needed for proper display of the label in Firefox, IE, Edge */
    width: 100%;
    padding-top: 1.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1.3125rem;
    border: 1px solid #dadada;
    border-radius: 0.25rem;
    background-color: #fff;
    color: #787976;
    font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
    transition: all 0.2s;
    -webkit-appearance: none;

    /* removes inner shadow on form inputs on ios safari */
}

.form-control-select {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    height: 3rem;
}

/* IE10+ hack to solve lower label text position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .form-control-input {
        padding-top: 1.25rem;
        padding-bottom: 0.75rem;
        line-height: 1.75rem;
    }

    .form-control-select {
        padding-top: 0.875rem;
        padding-bottom: 0.75rem;
        height: 3.125rem;
        line-height: 2.125rem;
    }
}

titel {
    position: relative;
    font-size: 4rem;
    line-height: 1.2;
    padding: 0px !important;
}

titel {
    font-size: 2em;
}

.titel {
    font-size: 3.5em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

* {
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    html,
    body {
        font-size: 12px;
    }
}

.containerp {
    background-color: #47BDFF;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

.buttonp {
    text-decoration: none;
    font-size: .875rem;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 1.5rem;
    background-color: #fff;
    color: #47BDFF;
    padding: 1rem 2rem;
    margin: 2em;
    font-weight: 900;
}

.popup {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100vw;
    height: 100vh;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2;
    visibility: hidden;
    opacity: 0;

    /* overflow: hidden; */
    transition: .64s ease-in-out;
}

.popup-inner {
    position: relative;
    bottom: -100vw;
    right: -100vh;
    display: grid;
    align-items: center;
    max-width: 800px;
    max-height: 800px;
    width: 90%;
    height: 80%;
    background-color: #fff;
    transform: rotate(32deg);
    transition: .64s ease-in-out;
    overflow: auto;
}

.popupphoto {
    display: none;
    justify-content: flex-end;
    align-items: flex-end;
    width: 40%;
    height: 100%;
    overflow: hidden;
}

.popupphoto img {
    width: auto;
    height: 100%;
}

.popuptext {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%;
    height: 100%;
    padding: 4rem;
}

.popuptext h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    text-transform: uppercase;
    color: #0A0A0A;
}

.popuptext p {
    font-size: .875rem;
    color: #686868;
    line-height: 1.5;
}

.popuptext a {
    text-decoration: none;
    color: #47BDFF;
}

.popup:target {
    visibility: visible;
    opacity: 1;
}

.popup:target .popup-inner {
    bottom: 0;
    right: 0;
    transform: rotate(0);
}

.closepopup {
    position: absolute;
    right: -1rem;
    top: -1rem;
    width: 3rem;
    height: 3rem;
    font-size: .875rem;
    font-weight: 300;
    border-radius: 100%;
    background-color: #47BDFF;
    z-index: 4;
    color: #fff;
    line-height: 3rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}