Here I the section, I was playing with the setting, but still does not work. What I am doing wrong?

@media (max-width: 767px) {
.hero h1 {
        font-size: 0.75rem !important;
        line-height: 15px !important;
    }
.hero h2 {
        font-size: 0.75rem !important;
        line-height: 10px !important;
    }

h2.bigtitle,
h2.bigtitle_dark {
font-size: 3.486rem !important;
}
h2.smalltitle,
h2.smalltitle_dark {
font-size: 1.871rem !important;
}
.site-title {
max-width: 75%;
}
.navbar-brand {
padding-left: 15px;
}
.navbar-default {
height: auto;
min-height: 56px;
}
.navbar-default .navbar-nav {
padding-top: 0;
}
.navbar-default .navbar-nav > li {
margin-left: 0;
}
.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav li.current-menu-parent a,
.navbar-default .navbar-nav li.current_page_parent a {
border-bottom: none;
}
.navbar-default .navbar-nav > li > a {
padding: 0 15px 0 15px;
line-height: 32px;
border-bottom: 0;
}
.navbar-default .navbar-nav li.menu-item-has-children a {
margin-bottom: 0;
}
.navbar-default li a:hover,
.navbar-default .navbar-nav > li > a:hover {
border-bottom: 0;
}
.navbar-default .navbar-nav {
padding-top: 0 !important;
}
.h1,
.h2,
.h3,
h1,
h2,
h3,
h4 {
word-wrap: break-word;
}
.hero,
.testimonials,
.calltoaction,
.newsletter {
background-attachment: scroll !important;
background-size: cover !important;
background-position: center top !important;
}
.hero .text-left,
.hero .text-right {
float: none;
text-align: center;
margin-bottom: 10px;
}
.calltoaction,
.newsletter,
.testimonials {
padding-top: 50px;
padding-bottom: 50px;
}
.tweets .fa {
padding-bottom: 20px;
}
.calltoaction .text-left,
.calltoaction .text-right {
float: none;
text-align: center;
margin-bottom: 10px;
}
.calltoaction2 p {
margin-bottom: 25px;
}
.calltoaction2 .cta-button,
.calltoaction2,
.tweets,
.tweets .tweets-list-container {
text-align: center !important;
}
.clients img,
.brands img,
.stats .row > div {
padding: 20px;
}
.pt {
margin-bottom: 20px;
margin-right: 0px;
}
.content {
padding: 20px 0 0px 0;
}
.sidebar {
margin: 0px 0 20px 0;
padding-left: 0;
border-left: none;
}
.contact form {
margin-top: 30px;
}
}
@media (max-width: 480px) {
.hero h1 {
        font-size: .75rem !important;
        line-height: 15px !important;
    }
.hero h2 {
        font-size: 0.75rem !important;
        line-height: 10px !important;
    }
h2.bigtitle,
h2.bigtitle_dark {
font-size: 2.286rem !important;
}
h2.smalltitle,
h2.smalltitle_dark {
font-size: 1.471rem !important;
}
.testimonials blockquote {
padding: 10px 20px;
position: relative;
border: 0;
}
.testimonials blockquote:after {
content: none;
}
.testimonials blockquote:before {
content: none;
}
}