﻿@font-face {
    font-family: "Lato";
    src: url("fonts/lato-v23-latin-regular.woff2") format("woff2"), url("fonts/lato-v23-latin-regular.woff") format("woff");
} 

* {
    box-sizing: border-box;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}


html {
    -webkit-backface-visibility: hidden;
}

a {
    text-decoration: none;
}

body {
    background-color: rgb(17 24 39);
    font-family: "Source Sans Pro", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    align-items: center;
    margin: 0 auto;
}
.topbar {
    max-width: 1500px;
    margin: 0 auto;
    background-color: rgb(17 24 39);
    display: flex;
}

.topmenuitems {
    margin-left: 50px;
}

.contentcontainer {
    max-width: 1500px;
    margin: 0 auto;
    display: grid; 
}

.rightcontainer {
    max-width: 1500px;
    margin: 0 auto;
}

@keyframes einblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes einblenden { /* Für Firefox */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes einblenden { /* Für Safari und Chrome */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes einblenden { /* Für Opera */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.loader {
    position: absolute;
    top: 140px;
    height: 20px;
    width: 250px;
    margin: auto;
    margin: 20px 20px 20px 20px;
    display: none;
}

.loader--dot {
    animation-name: loader;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: black;
    position: absolute;
    border: 2px solid white;
}

    .loader--dot:first-child {
        background-color: #8cc759;
        animation-delay: 0.5s;
    }

    .loader--dot:nth-child(2) {
        background-color: #8c6daf;
        animation-delay: 0.4s;
    }

    .loader--dot:nth-child(3) {
        background-color: #ef5d74;
        animation-delay: 0.3s;
    }

    .loader--dot:nth-child(4) {
        background-color: #f9a74b;
        animation-delay: 0.2s;
    }

    .loader--dot:nth-child(5) {
        background-color: #60beeb;
        animation-delay: 0.1s;
    }

    .loader--dot:nth-child(6) {
        background-color: #fbef5a;
        animation-delay: 0s;
    }

.loader--text {
    position: absolute;
    top: 15px;
    width: 4rem;
    margin: auto;
}

    .loader--text:after {
        content: "Artikelsuche";
        animation-name: loading-text;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }

@keyframes loader {
    15% {
        transform: translateX(0);
    }

    45% {
        transform: translateX(230px);
    }

    65% {
        transform: translateX(230px);
    }

    95% {
        transform: translateX(0);
    }
}

@keyframes loading-text {
    0% {
        content: "Artikelsuche";
    }

    25% {
        content: "Artikelsuche.";
    }

    50% {
        content: "Artikelsuche..";
    }

    75% {
        content: "Artikelsuche...";
    }
}

.logocontainer {
    background: rgb(17 24 39);
    justify-content: center;
    align-items: center;
}

    .logocontainer .box {
        width: 250px;
        position: relative;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

        .logocontainer .box .title {
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            height: 50px;
        }

            .logocontainer .box .title .block {
                width: 0%;
                height: inherit;
                background: #ee7464;
                position: absolute;
                animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
                display: flex;
            }

            .logocontainer .box .title h1 {
                font-family: "Lato";
                color: #fff;
                font-size: 28px;
                font-weight: 400;
                -webkit-animation: mainFadeIn 2s forwards;
                -o-animation: mainFadeIn 2s forwards;
                animation: mainFadeIn 2s forwards;
                animation-delay: 1.6s;
                opacity: 0;
                display: flex;
                align-items: baseline;
                position: relative;
            }

                .logocontainer .box .title h1 span {
                    width: 0px;
                    height: 0px;
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                    border-radius: 50%;
                    background: #ee7464;
                    -webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
                    animation: popIn 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
                    animation-delay: 2s;
                    margin-left: 5px;
                    margin-top: -10px;
                    position: absolute;
                    bottom: 13px;
                    right: -12px;
                }

        .logocontainer .box .role {
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            height: 30px;
            margin-top: -10px;
        }

            .logocontainer .box .role .block {
                width: 0%;
                height: inherit;
                background: #e91e63;
                position: absolute;
                animation: secBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
                animation-delay: 2s;
                display: flex;
            }

            .logocontainer .box .role p {
                animation: secFadeIn 2s forwards;
                animation-delay: 3.2s;
                opacity: 0;
                font-weight: 400;
                font-family: "Lato";
                color: #ffffff;
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 5px;
            }

@keyframes mainBlock {
    0% {
        width: 0%;
        left: 0;
    }

    50% {
        width: 100%;
        left: 0;
    }

    100% {
        width: 0;
        left: 100%;
    }
}

@keyframes secBlock {
    0% {
        width: 0%;
        left: 0;
    }

    50% {
        width: 100%;
        left: 0;
    }

    100% {
        width: 0;
        left: 100%;
    }
}

@keyframes mainFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes popIn {
    0% {
        width: 0px;
        height: 0px;
        background: #e9d856;
        border: 0px solid #ddd;
        opacity: 0;
    }

    50% {
        width: 10px;
        height: 10px;
        background: #e9d856;
        opacity: 1;
        bottom: 45px;
    }

    65% {
        width: 7px;
        height: 7px;
        bottom: 0px;
        width: 15px;
    }

    80% {
        width: 10px;
        height: 10px;
        bottom: 20px;
    }

    100% {
        width: 7px;
        height: 7px;
        background: #e9d856;
        border: 0px solid #222;
        bottom: 13px;
    }
}

@keyframes secFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.5;
    }
}

.wavy {
    position: relative;
    -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
}

    .wavy span {
        position: relative;
        display: inline-block;
        color: #fff;
        font-size: 1.0em;
        text-transform: uppercase;
        animation: animate 2.5s ease-in-out infinite;
        animation-delay: calc(.1s * var(--i))
    }

@keyframes animate {
    0%, 100% {
        transform: translateY(0px);
    }

    20% {
        transform: translateY(-5px);
    }

    40% {
        transform: translateY(0px);
    }
}

#iwayslogo {
    -moz-animation: einblenden 3.5s; /* Für Firefox */
    -webkit-animation: einblenden 3.5s; /* Für Safari und Chrome */
    -o-animation: einblenden 3.5s; /* Für Opera */
}

.animated-text {
    font-size: 16px;
    word-wrap: break-word;
    white-space: nowrap;
    animation: typing 4s steps(100) forwards;
    color: white;
}

.animated-text2 {
    overflow-x: hidden;
    font-size: 14px;
    word-wrap: break-word;
    white-space: nowrap;
    animation: typing 4s steps(100) forwards;
    color: white;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 197ch;
    }
}