@keyframes slide_oneA{

from{
opacity: 0.2;
top: 100%;
}
to{
opacity: 1;
top: 30%;
}

}

@keyframes slide_oneA-sm{

from{
opacity: 0.2;
top: 100%;
}
to{
opacity: 1;
top: 25%;
}

}

@keyframes slide_oneB{

from{
opacity: 0.2;
top: 120%;

}
to{
opacity: 1;
top:45%;

}

}

@keyframes slide_oneB-sm{

from{
opacity: 0.2;
top: 120%;

}
to{
opacity: 1;
top: 35%;

}

}

@keyframes fadeIn{

from{
opacity: 0;

}
to{
opacity: 1;

}

}

@keyframes upDown{

0%{
top: 30%;
}
50%{
top: 10%;
}
100%{
top: 30%;
}

}

@keyframes upDown-sm{

0%{
top: 25%;
}
50%{
top: 5%;
}
100%{
top: 25%;
}

}

@keyframes downUp{

0%{
top: 45%;

}
50%{
top:45%;
}
75%{
top:62%;
}
100%{
top:45%;
}

}

@keyframes downUp-sm{

0%{
top: 40%;

}
50%{
top:40%;
}
75%{
top:65%;
}
100%{
top:40%;
}

}


.slide-1 h3{
animation: slide_oneA 3s ease;


}
.slide-1 .slide-p{
animation: slide_oneB 5s ease;

}

.slide-2 h3{
animation: fadeIn 1s ease-in;


}
.slide-2 .slide-p{
animation: fadeIn 3s ease-out;

}

.slide-3 h3{
animation: upDown 1s ease-in;


}
.slide-3 .slide-p{
animation: downUp 2s ease-out;

}

@media(max-width: 770px){

.slide-1 h3{
animation: slide_oneA-sm 3s ease;


}
.slide-1 .slide-p{
animation: slide_oneB-sm 5s ease;

}

.slide-3 h3{
animation: upDown-sm 1s ease-in;


}
.slide-3 .slide-p{
animation: downUp-sm 2s ease-out;

}

}
