@media only screen and (min-width: 981px) and (max-width:1100px) {
 .header {
 width:98%!important;
 padding:0px 1%;
 margin:0px auto;
}
 .right_top {
 float: right;
 margin: 25px auto;
}
 .banner_inner h3 {
 margin: 11% auto!important;
}
 #project_gallery ul {
 display: block;
 text-align: center;
 margin: 0 auto;
}
 #project_gallery ul li {
 width: 28.888%;
 float: none;
 display: inline-block;
 margin: 1%;
}
 .container, .footer, .copyright {
 width:98%!important;
 padding:0%;
 margin:0px auto;
}
 .box1_left {
 width: 47%;
 float:  left;
}
 .boxs li {
 list-style-type:disc;
 padding: 2% 6% 2% 6%;
 border-bottom:1px solid #eee;
 width: 78%;
 float:left;
 margin: 0px 6% 0px;
 color:#616161;
 font-size:15px;
}
 .boxs li:hover a {
 color:#1581b9;
 display:block;
}
 .boxs li:hover {
 background:    no-repeat 10px 15px #eee;
}
.reals li {
 list-style-type: disc;
 background-repeat: no-repeat;
 background-position: 10px 15px;
 padding: 1% 3% 1% 3%;
 border-bottom: 1px solid #eee;
width: 38%;
 float: left;
 margin: 0px 3% 0px;
color: #616161;
 font-size: 15px;
}
.reals li:hover {
 background: #eee no-repeat 10px 15px;
}
}
 @media only screen and (min-width: 768px) and (max-width: 981px) {
 .header {
 width:100%!important;
 margin:0px auto;
}
 .right_top {
 float: none!important;
 margin: 2% auto 0!important;
 border-top: 1px solid #fff;
 padding: 2% 0 1%;
}
 .banner_inner h3 {
 margin: 14% auto 0!important;
}
 #project_gallery ul {
 display: block;
 text-align: center;
 margin: 0 auto;
}
 #project_gallery ul li {
 width: 28.888%;
 float: none;
 display: inline-block;
 margin: 1%;
}
 .logo {
 float: none!important;
 display: block;
 text-align: center;
}
 .col_2 {
 float: right;
 width: 40%!important;
}
 .col_1 {
 float: left;
 width: 50%!important;
}
 .real li {
 margin: 0% auto;
 width: 93%;
}
 .real li {
 margin: 1% auto;
 width: 94%;
 background-position: 0px 10px;
 padding: 1% 3% 1% 3%;
 font-size: 16px;
 font-weight: 500;
}
 .real li:hover {
 background: url(images/bullet.png) no-repeat 0px 10px #eee;
}
 .blog_main h2 {
 margin: 0 0 3%;
}
 .container, .footer, .copyright {
 width:98%!important;
 padding:0%;
 margin:0px auto;
}
 .box1_left, .box2_right {
 width:73%;
 float:  left;
}
 .contracting {
 margin: 18px 1% 5%;
}
 .boxs li {
 list-style-type: disc;
 background-repeat: no-repeat;
 background-position: 10px 15px;
 padding: 2% 6% 2% 3%;
 border-bottom:1px solid #eee;
 width: 100%;
 float:left;
 margin: 0px 5% 0px;
 color:#616161;
 font-size:15px;
}
 .boxs li:hover a {
 color:#1581b9;
 display:block;
}
 .boxs li:hover {
 background:  10px 15px #eee;
}
.reals li {
 list-style-type: disc;
 background-repeat: no-repeat;
 background-position: 10px 15px;
 padding: 1% 3% 1% 3%;
 border-bottom: 1px solid #eee;
 width: 63%;
 float: left;
 margin: 0px 4% 0px;
 color: #616161;
 font-size: 15px;
}
.reals li:hover {
 background: #eee no-repeat 10px 15px;
}
}
 @media only screen and (min-width: 640px) and (max-width: 768px) {
 .header {
 width:100%!important;
 margin:0px auto;
}
 .right_top {
 float: none!important;
 margin: 2% auto 0!important;
 border-top: 1px solid #fff;
 padding: 2% 0 1%;
}
 .banner_inner h3 {
 font-size: 28px!important;
 margin: 18% auto 0 !important;
}
 #project_gallery ul {
 display: block;
 text-align: center;
 margin: 0 auto;
}
 #project_gallery ul li {
 width: 28.888%;
 float: none;
 display: inline-block;
 margin: 1%;
}
 .logo {
 float: none!important;
 display: block;
 text-align: center;
}
 .col_2 {
 float: right;
 width: 40%!important;
}
 .col_1 {
 float: left;
 width: 50%!important;
}
 .real li {
 margin: 1% auto;
 width: 94%;
 background-position: 0px 10px;
 padding: 1% 3% 1% 3%;
 font-size: 16px;
 font-weight: 500;
}
 .real li:hover {
 background: url(images/bullet.png) no-repeat 0px 10px #eee;
}
 .blog_main h2 {
 margin: 0 0 3%;
}
 .container, .footer, .copyright {
 width:98%!important;
 padding:0%;
 margin:0px auto;
}
 .box1_left, .box2_right {
 width:73%;
 float:  left;
}
 .contracting {
 margin: 18px 1% 5%;
}
 .boxs li {
 list-style-type: disc;
 background-repeat: no-repeat;
 background-position: 10px 15px;
 padding: 2% 6% 2% 4%;
 border-bottom:1px solid #eee;
 width: 100%;
 float:left;
 margin: 0px 4% 0px;
 color:#616161;
 font-size:15px;
}
 .boxs li:hover a {
 color:#1581b9;
 display:block;
}
 .boxs li:hover {
 background:  10px 15px #eee;
}
.reals li {
 list-style-type: disc;
 background-repeat: no-repeat;
 background-position: 10px 15px;
 padding: 1% 3% 1% 3%;
 border-bottom: 1px solid #eee;
 width:90%;
 float: left;
 margin: 0px 5% 0px;
 color: #616161;
 font-size: 15px;
}
.reals li:hover {
 background: #eee no-repeat 10px 15px;
}
}
 @media only screen and (min-width: 480px) and (max-width: 640px) {
 .header {
 width:100%!important;
 margin:0px auto;
}
 .right_top {
 float: none!important;
 margin: 2% auto 0!important;
 border-top: 1px solid #fff;
 padding: 0% 0 0%;
}
 .banner_inner h3 {
 font-size: 28px!important;
 margin: 23% auto 0 !important;
}
 #project_gallery ul {
 display: block;
 text-align: center;
 margin: 0 auto;
}
 #project_gallery ul li {
 width: 28.888%;
 float: none;
 display: inline-block;
 margin: 1%;
}
 .logo {
 float: none!important;
 display: block;
 text-align: center;
}
 .col_2 {
 float: right;
 width: 100%!important;
}
 .col_1 {
 float: left;
 width: 100%!important;
}
 .real li {
 margin: 0% auto;
 width: 93%;
}
 .real li {
 margin: 1% auto;
 width: 94%;
 background-position: 0px 8px;
 padding: 1% 3% 1% 5%;
 font-size: 15px;
 font-weight: 500;
}
 .real li:hover {
 background: url(images/bullet.png) no-repeat 0px 8px #eee;
}
 .blog_main h2 {
 margin: 0 0 0%;
 font-size: 28px;
}
 .container, .footer, .copyright {
 width:90%!important;
 padding:0%;
 margin:0px auto;
}
 .header_bg {
 padding: 10px 0px 0;
}
 .blog_main li {
 width: 89%;
 margin: 5% auto;
 float: none;
 padding: 5%;
}
 .social_media_icons li {
 margin: 3% auto;
 display: block;
 width: 50%;
 min-height: 29px;
}
 .banner_inner .container {
 width: 100%!important;
}
 #project ul li {
 width: 90%;
}
 #project_gallery ul li {
 width: 90%!important;
 margin: 4% auto!important;
 padding: 5%!important;
}
 #sign-in-container, #not-a-member {
 float: left;
 margin: 2% auto;
 width: 100%;
 padding: 0;
}
 .box1_left, .box2_right {
 width: 98%;
 float:  left;
}
 .contracting {
 margin: 18px 1% 5%;
}
 .boxs li {
 padding: 4% 6% 2% 4%;
 border-bottom: 1px solid #eee;
 width: 76%;
}
 .boxs li:hover a {
 color:#1581b9;
 display:block;
}
 .boxs li:hover {
 background:   no-repeat 10px 15px #eee;
}
.reals li {
 list-style-type: disc;
 background-repeat: no-repeat;
 background-position: 10px 15px;
 padding: 1% 3% 1% 3%;
 border-bottom: 1px solid #eee;
 width:90%;
 float: left;
 margin: 1px 5% 0px;
 color: #616161;
 font-size: 15px;
}
.reals li:hover {
 background: #eee no-repeat 10px 15px;
}
}
 @media only screen and (min-width: 220px) and (max-width: 480px) {
 .header {
 width:100%!important;
 margin:0px auto;
}
 .right_top {
 float: none!important;
 margin: 2% auto 0!important;
 border-top: 1px solid #fff;
 padding: 0% 0 0%;
}
 .banner_inner h3 {
 font-size: 19px!important;
 margin: 23% auto 0 !important;
 line-height: 33px;
}
 #project_gallery ul {
 display: block;
 text-align: center;
 margin: 0 auto;
}
 #project_gallery ul li {
 width: 28.888%;
 float: none;
 display: inline-block;
 margin: 1%;
}
 .logo {
 float: none!important;
 display: block;
 text-align: center;
}
 .col_2 {
 float: right;
 width: 100%!important;
}
 .col_1 {
 float: left;
 width: 100%!important;
}
 .real li {
 margin: 0% auto;
 width: 93%;
}
 .real li {
 margin: 4% auto;
 width: 94%;
 background-position: 0px 7px;
 padding: 2% 3% 2% 9%;
 font-size: 14px;
 font-weight: 500;
}
 .real li:hover {
 background: url(images/bullet.png) no-repeat 0px 7px #eee;
}
 .blog_main h2 {
 margin: 0 0 0%;
 font-size: 28px;
}
 .container, .footer, .copyright {
 width:90%!important;
 padding:0%;
 margin:0px auto;
}
 .header_bg {
 padding: 10px 0px 0;
}
 .blog_main li {
 width: 89%;
 margin: 5% auto;
 float: none;
 padding: 5%;
}
 .social_media_icons li {
 margin: 3% auto;
 display: block;
 width: 50%;
 min-height: 29px;
}
 .banner_inner .container {
 width: 100%!important;
}
 #project ul li {
 width: 90%;
}
 #project_gallery ul li {
 width: 90%!important;
 margin: 4% auto!important;
 padding: 5%!important;
}
 #sign-in-container, #not-a-member {
 float: left;
 margin: 2% auto;
 width: 100%;
 padding: 0;
}
 .banner_inner img {
 height: 160px;
}
 #sign_form .input {
 width: 98%;
}
 #not-a-member h3 {
 font-size: 16px;
}
 .logo img {
 width: 90%;
}
 .box1_left, .box2_right {
 width: 100%;
 float:  left;
}
 .contracting {
 margin: 18px 1% 5%;
}
 .boxs li {
 padding: 5% 6% 2% 6%;
 border-bottom:1px solid #eee;
 margin: 0 10px;
width: 79%;
}
 .boxs li:hover a {
 color:#1581b9;
 display:block;
}
 .boxs li:hover {
 background:  10px 15px #eee;
}
.reals li {
 list-style-type: disc;
 background-repeat: no-repeat;
 background-position: 10px 15px;
 padding: 1% 3% 1% 3%;
 border-bottom: 1px solid #eee;
 width:90%;
 float: left;
 margin: 1px 5% 0px;
 color: #616161;
 font-size: 15px;
}
.reals li:hover {
 background: #eee no-repeat 10px 15px;
}
}