@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Raleway:wght@100&family=Roboto&family=Secular+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Raleway:wght@100&family=Roboto&family=Secular+One&display=swap');

:root{
    --blue:#1CA7EC;
    --blue2:#4ADEDE;
    --orange:#FF8357;
    --black:#354046;
}
/*Sentence*/
.sentence{
    font-family: 'Secular One', sans-serif;
     color: #354046;
     font-size: 34px;
     text-align: center;
}
/*Vertical Sliding*/
.slidingVertical{
    font-family: 'Secular One', sans-serif;
    display: inline;
    text-indent: 8px;
}
.slidingVertical span{
    font-family: 'Secular One', sans-serif;
    animation: topToBottom 12.5s linear infinite 0s;
    -ms-animation: topToBottom 12.5s linear infinite 0s;
    -webkit-animation: topToBottom 12.5s linear infinite 0s;
    opacity: 0;
    color: var(--blue);
    position: absolute;
    right: 75%;
    -moz-background-size: 100% 100%;
}
.slidingVertical span:nth-child(1){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(2){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(3){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(4){
    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; }
}



@media (max-width:1055px){
    .sentence{
        font-size: 28px;
    }
}

/* @media (max-width:794px){

    .sentence{
        font-size: 20px;
    }


}

@media (max-width:768px){

    .sentence{
        font-size: 32px;
    }

}

@media (max-width:554px){

    .sentence{
        font-size: 28px;
    }

}

@media (max-width:490px){

    .sentence{
        font-size: 24px;
    }

}



@media (max-width:426px){

    .sentence{
        font-size: 20px;
    }

}

@media (max-width:360px){

    .sentence{
        font-size: 17px;
    }

} */