@keyframes slidein {
    0% {
      transform: translateX(60%);
      opacity: 0;
      top: -80px;
    }

    50% {
        transform: translateX(20%);
        opacity: 1;
        top: 0;
      }
    100% {
      transform: translateX(60%);
      opacity: 0;
      top: -80px;
    }
}


@keyframes slidein_2 {
    0% {
        top: 60%;
        transform: translateX(-80%);
        opacity: 0;
    }

    50% {
       top: 40%;
        transform: translateX(-60%);
        opacity: 1;
    }
    100% {
        top: 60%;
        transform: translateX(-80%);
        opacity: 0;
    }
}

.hero_text_animation_0{
    animation: fade_0 1.2s linear;
}

.hero_text_animation_1{
    animation: fade_1 1.2s linear;
}

.hero_text_animation_2{
    animation: fade_2 1.2s linear;
}

.hero_text_animation_3{
    animation: fade_3 1.2s linear;
}


@keyframes fade_0{
    0%{
        transform: translateY(-16px);
        opacity: 0;
    }
    10%{
        transform: translateY(-16px);
        opacity: 0;
    }
    100%{
         transform: translateY(0);
         opacity: 1;
    }
}

@keyframes fade_1{
    0%{
        transform: translateY(-24px);
        opacity: 0;
    }
    20%{
        transform: translateY(-24px);
        opacity: 0;
    }
    100%{
         transform: translateY(0);
         opacity: 1;
    }
}

@keyframes fade_2{
    0%{
        transform: translateY(-32px);
        opacity: 0;
    }
    30%{
        transform: translateY(-32px);
        opacity: 0;
    }
    100%{
         transform: translateY(0);
         opacity: 1;
    }
}

@keyframes fade_3{
    0%{
        transform: translateY(-32px);
        opacity: 0;
    }
    40%{
        transform: translateY(-32px);
        opacity: 0;
    }
    100%{
         transform: translateY(0);
         opacity: 1;
    }
}


.card_anim{
    animation: card_1 1.2s linear;
}

@keyframes card_1{
    0%{
        transform: translateY(30%);
        opacity: 0;
    }

    100%{
        transform: translateY(0);
         opacity: 1;
    }
}



@keyframes loading{
    from{
        left: 0;
    }

    to{
        left: 100%;
    }
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)  { 

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px){
    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px){

    
.card_an_1{
    animation: c_1 3s infinite linear;
}

.card_an_2{
    animation: c_2 3s infinite linear;
}

.card_an_3{
    animation: c_3 3s infinite linear;
}

.card_an_4{
    animation: c_4 3s infinite linear;
}

.card_an_5{
    animation: c_5 3s infinite linear;
}

@keyframes c_1 {
    0% {
      transform: translateY(0);
    }

    18% {
        transform: translateY(-16px);
    }

    36% {
        transform: translateY(0);
    }
}

@keyframes c_2 {
    18% {
      transform: translateY(0);
    }

    36% {
        transform: translateY(-16px);
    }

    54% {
        transform: translateY(0);
    }
}

@keyframes c_3 {
    36% {
      transform: translateY(0);
    }

    54% {
        transform: translateY(-16px);
    }

    72% {
        transform: translateY(0);
    }
}

@keyframes c_4 {
    54% {
      transform: translateY(0);
    }

    72% {
        transform: translateY(-16px);
    }

    90% {
        transform: translateY(0);
    }
}

@keyframes c_5 {
    72% {
      transform: translateY(0);
    }

    90% {
        transform: translateY(-16px);
    }

    8% {
        transform: translateY(0);
    }
}
        
    .acc-animation-1{
        animation: acc_anim .6s linear;
    }


    @keyframes acc_anim{
        0%{
            transform: translateY(30%);
        }
        100%{
            transform: translateY(0);
        }
    }

    .acc-text-1{
        animation: t_1 .6s linear;
    }

    @keyframes t_1{
        0%{
            transform: translateX(-10%);
        }
        100%{
            transform: translateX(0);
        }
    }

    .acc-text-2{
        animation: t_2 .6s linear;

    }

    @keyframes t_2{
        0%{
            transform: translateX(-14%);

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

    .acc-text-3{
        animation: t_3 .6s linear;
    }

    @keyframes t_3{
        0%{
            transform: translateX(-16%);

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

    .acc-text-4{
        animation: t_4 .6s linear;
    }

    @keyframes t_4{
        0%{
            transform: translateX(-64%);

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

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px){

    
.card_an_1{
    animation: c_1 3s infinite linear;
}

.card_an_2{
    animation: c_2 3s infinite linear;
}

.card_an_3{
    animation: c_3 3s infinite linear;
}

.card_an_4{
    animation: c_4 3s infinite linear;
}

.card_an_5{
    animation: c_5 3s infinite linear;
}

@keyframes c_1 {
    0% {
      transform: translateY(0);
    }

    18% {
        transform: translateY(-16px);
    }

    36% {
        transform: translateY(0);
    }
}

@keyframes c_2 {
    18% {
      transform: translateY(0);
    }

    36% {
        transform: translateY(-16px);
    }

    54% {
        transform: translateY(0);
    }
}

@keyframes c_3 {
    36% {
      transform: translateY(0);
    }

    54% {
        transform: translateY(-16px);
    }

    72% {
        transform: translateY(0);
    }
}

@keyframes c_4 {
    54% {
      transform: translateY(0);
    }

    72% {
        transform: translateY(-16px);
    }

    90% {
        transform: translateY(0);
    }
}

@keyframes c_5 {
    72% {
      transform: translateY(0);
    }

    90% {
        transform: translateY(-16px);
    }

    8% {
        transform: translateY(0);
    }
}
        
    .acc-animation-1{
        animation: acc_anim .6s linear;
    }


    @keyframes acc_anim{
        0%{
            transform: translateY(30%);
        }
        100%{
            transform: translateY(0);
        }
    }

    .acc-text-1{
        animation: t_1 .6s linear;
    }

    @keyframes t_1{
        0%{
            transform: translateX(-10%);
        }
        100%{
            transform: translateX(0);
        }
    }

    .acc-text-2{
        animation: t_2 .6s linear;

    }

    @keyframes t_2{
        0%{
            transform: translateX(-14%);

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

    .acc-text-3{
        animation: t_3 .6s linear;
    }

    @keyframes t_3{
        0%{
            transform: translateX(-16%);

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

    .acc-text-4{
        animation: t_4 .6s linear;
    }

    @keyframes t_4{
        0%{
            transform: translateX(-64%);

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

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
        
    .acc-animation-1{
        animation: acc_anim .6s linear;
    }


    @keyframes acc_anim{
        0%{
            transform: translateY(30%);
        }
        100%{
            transform: translateY(0);
        }
    }

    .acc-text-1{
        animation: t_1 .6s linear;
    }

    @keyframes t_1{
        0%{
            transform: translateX(-10%);
        }
        100%{
            transform: translateX(0);
        }
    }

    .acc-text-2{
        animation: t_2 .6s linear;

    }

    @keyframes t_2{
        0%{
            transform: translateX(-14%);

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

    .acc-text-3{
        animation: t_3 .6s linear;
    }

    @keyframes t_3{
        0%{
            transform: translateX(-16%);

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

    .acc-text-4{
        animation: t_4 .6s linear;
    }

    @keyframes t_4{
        0%{
            transform: translateX(-64%);

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

    
.card_an_1{
    animation: c_1 3s infinite linear;
}

.card_an_2{
    animation: c_2 3s infinite linear;
}

.card_an_3{
    animation: c_3 3s infinite linear;
}

.card_an_4{
    animation: c_4 3s infinite linear;
}

.card_an_5{
    animation: c_5 3s infinite linear;
}

@keyframes c_1 {
    0% {
      transform: translateY(0);
    }

    18% {
        transform: translateY(-16px);
    }

    36% {
        transform: translateY(0);
    }
}

@keyframes c_2 {
    18% {
      transform: translateY(0);
    }

    36% {
        transform: translateY(-16px);
    }

    54% {
        transform: translateY(0);
    }
}

@keyframes c_3 {
    36% {
      transform: translateY(0);
    }

    54% {
        transform: translateY(-16px);
    }

    72% {
        transform: translateY(0);
    }
}

@keyframes c_4 {
    54% {
      transform: translateY(0);
    }

    72% {
        transform: translateY(-16px);
    }

    90% {
        transform: translateY(0);
    }
}

@keyframes c_5 {
    72% {
      transform: translateY(0);
    }

    90% {
        transform: translateY(-16px);
    }

    8% {
        transform: translateY(0);
    }
}
}