easy slider text responsive

Hi.

I would like to make an custom CSS with media query, but it is not working for me. It seem like !important tag is overriding as it should not.

I want to make adjustments to slider text and button in different screen sizes (mobile, tablets, notebook, desktop)

Here is the code and its just the first part of it, that works, the other screen sizes does not, no matter what I change.

@media (max-width: 400px) {

.responsive #top .slideshow_caption {
left: 0;
width: 50%;
padding: 100;
top: 6px;
}

.responsive #top .slideshow_caption {
left: 0px;
width: 100%;
padding: 0;
}

.avia-caption-content p {
font-size: 9px;
margin: 0px 0;
max-width: 85%;
display: inline-flex;
}

.responsive #top .slideshow_caption h2 {
font-size: 12px !important;
max-width: 75%;
display: inline-flex;
}

.responsive #top .slideshow_caption .avia-caption-content {
font-size: 9px;
width: 50%;
margin-left: 50%;
}

#top .avia-slideshow-button {
text-transform: uppercase;
padding: 2px;
display: inline-block;
margin-top: 5px;
text-decoration: none;
font-weight: bold;
font-size: 7px;
}

.responsive #top #wrap_all .container {
width: 95%;
max-width: 95%;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
float: none;
}

@media (min-width: 400px) and (max-width: 480px) {
/* same CSS but different values */
}

@media (min-width: 481px) and (max-width: 680px) {
/* same CSS but different values */
}

@media (min-width: 681px) and (max-width: 1200px) {
/* same CSS but different values */
}

etc. …

Please help.

Thank you.