/* --------------------------------------------------------------
Rotating Text- the html is in the page 'make an impact'
-------------------------------------------------------------- */

/* not using, but had the flex working here - <div flex><p flex-1><p flex-1><span><span>*/
.rotating-text {
    font-size: 50px;
    color: gray;
}
.rotating-text-complete {
    position: relative;
}
.rotating-adj {
    font-size: 50px;
    position: absolute;
    color: var(--wp--preset--color--blue);
    opacity: 0;

}
.rotating-adj:nth-of-type(1) {
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
}

.rotating-adj:nth-of-type(2) {
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-delay: 1.75s;
}

.rotating-adj:nth-of-type(3) {
    animation-name: rotate-last;
    animation-duration: 1.5s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
}

@keyframes rotate {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }

    20%, 80% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -25px, 0);
    }
}

@keyframes rotate-last {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }

    50%, 100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 992px) {
    .rotating-container {
        display: block;
    }
}

/* other */
/*Sentence*/
.sentence{
    color: var(--wp--preset--color--black);
    font-size: 50px;
    text-align: left;
}
/*Wrapper*/
.rotating-wrapper{
    margin: 100px auto;
    padding: 40px 40px;
    position: relative;
    width: 70%;
}

/*Vertical Sliding*/
.slidingVertical{
    display: inline;
    text-indent: 8px;
}
.slidingVertical span{
    animation: topToBottom 12.5s linear infinite 0s;
    -ms-animation: topToBottom 12.5s linear infinite 0s;
    -webkit-animation: topToBottom 12.5s linear infinite 0s;
    color: var(--wp--preset--color--blue);
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.slidingVertical span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}
/*topToBottom Animation*/
@-moz-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: translateY(-50px); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateY(-50px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: translateY(-50px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}


/* html
<div class="rotating-wrapper has-white-background-color">
<h2 class="sentence has-black-color">How will you
<div class="slidingVertical">
<span>make an impact.</span>
<span>search for truth.</span>
<span>learn great things.</span>
<span>do good.</span>
<span>love Philadelphia.</span>
</div>
</h2>
</div>
*/

/* html 2
<div class="rotating-container has-white-background-color tw-flex has-xxl-font-size">
<p class="has-black-color tw-flex-1 tw-text-right">How will you </p>
<p class="slidingVertical tw-flex-1">
<span>make an impact.</span>
<span>search for truth.</span>
<span>learn great things.</span>
<span>do good.</span>
<span>love Philadelphia.</span>
</p>
</div>*/