.slogan {
    max-width: 100%;
    background: #FFFFF3;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
    box-shadow: 3px 3px 6px #1695de;
    /* box-shadow: 0 0 45px 0 #243c80; */
}

.slogan p {
    display: block;
    font-weight: 700;
    font-size: 3em;
    position: relative;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.words {
    text-align: left;
    width: 100%;
    height: 40px;
    display: inline-block;
    overflow: hidden;
    animation: changewords 7s infinite;
}

.word {
    color: #DE6449;
    position: absolute;
    top: 0;
    height: 60px;
    width: 340px;
    overflow: hidden;
    animation: changewordfirst 7s infinite;
}

.word:nth-of-type(2) {
    color: #791E94;
    animation: changewordsecond 7s infinite;
}

.word:nth-of-type(3) {
    color: #41D3BD;
    animation: changewordthird 7s infinite;
}

.word:nth-of-type(4) {
    color: #41D3BD;
    animation: changewordfourth 7s infinite;
}

@media(max-width: 680px) {
    /*.slogan p {*/
    /*    font-size: 1.8em;*/
    /*}*/
    /*.word {*/
    /*    padding-top: 9px;*/
    /*    top: unset;*/
    /*}*/
    .slogan {
        display: none;
    }
}

@keyframes changewordfirst {
    0% {
        width: 340px;
    }
    16.5% {
        width: 340px;
    }
    25% {
        width: 0;
    }
    93.75% {
        width: 0;
    }
    100% {
        width: 340px;
    }
}

@keyframes changewordfourth {
    0% {
        width: 340px;
    }
    16.5% {
        width: 340px;
    }
    25% {
        width: 0;
    }
    93.75% {
        width: 0;
    }
    100% {
        width: 340px;
    }
}

@keyframes changewordsecond {
    0% {
        width: 0;
    }
    25% {
        width: 0;
    }
    33% {
        width: 295px;
    }
    50% {
        width: 295px;
    }
    58.25% {
        width: 0;
    }
    100% {
        width: 0;
    }
}

@keyframes changewordthird {
    0% {
        width: 0;
    }
    58.25% {
        width: 0;
    }
    66% {
        width: 310px;
    }
    85% {
        width: 310px;
    }
    93.75% {
        width: 0;
    }
    100% {
        width: 0;
    }
}

@keyframes changewords {
    0% {
        width: 340px;
    }
    16.5% {
        width: 340px;
    }
    25% {
        width: 0;
    }
    33% {
        width: 240px;
    }
    50% {
        width: 240px;
    }
    58.25% {
        width: 0;
    }
    66% {
        width: 310px;
    }
    85% {
        width: 310px;
    }
    93.75% {
        width: 0;
    }
    100% {
        width: 340px;
    }
}


/*# sourceMappingURL=slogan.css.map */