@media screen and (max-width:1024px)
{
.about-us {
    background:url(../images/inner-banner-1.jpg) no-repeat center top inherit !important;
    float: left;
    min-height: 246px;
    width: 100%;
}
.contactus{width:100%; background:#000000  url(../images/contactus.jpg) repeat !important; padding:20px 0 0 0; float:left;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;position:inherit;}	
.wss{ padding:10px 0; background:#AAAAAA url(../images/servicesbg.jpg) repeat top !important; -webkit-background-size:none; -moz-background-size:none; -o-background-size:none; background-size:none; position:inherit;}
}
@media screen and (max-width:1000px)
{
.middle-in{ position:relative;}
.back-btn{position:absolute; right:0; bottom:-56px;}
.headerin{width:96%;}
.banner{ height:auto; width:100%;}
.banner-txt{width:96%; top:50px; left:0px; right:0px; margin:0 auto;}
.banner-txt img{ width:100%; height:auto;}
.wssin{ width:96%;}
.wss{ padding:10px 0; background:#AAAAAA url(../images/servicesbg.jpg) repeat top !important; -webkit-background-size:none; -moz-background-size:none; -o-background-size:none; background-size:none; position:inherit;}
#MY_VIDEO_1{width:90% !important; }
.reslogo{display:block; position:absolute; z-index:9999999!important; left:20px;top:54px;}

.contentsection-in{width:96%;}
.contact-in{width:96%;}
.footerin{width:96%;}
.contentsection{width:100%; background:#97CBEF; padding:35px 0 50px 0; float:left;}

.contactus{width:100%; height:auto; background:#AAAAAA  url(../images/contactus.jpg) repeat fixed center bottom !important; padding:20px 0 0 0; float:left;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.contact-right{ width:40%;} 
.contact-left{ width:50%;}
.contactus h4{ line-height:normal;}
.footer-left{ width:454px; font-size:14px;}
.footer-right{ font-size:14px; width:283px;}
.about-us{ min-height:142px; background:url("../images/inner-banner-1.jpg") repeat fixed right top #000000;}
.banner h2{ padding-top:50px;}
.roll2{display: inline-block; overflow: hidden; vertical-align: middle; -webkit-perspective: 275px;
-moz-perspective: 275px; -ms-perspective: 275px; perspective: 275px; -webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; width:100%;
}
.roll2 span{-webkit-transition: -webkit-transform 0.3s ease; -moz-transition: -moz-transform 0.3s ease; 
transition: transform 0.3s ease; -webkit-transform-origin: 50% 0 0; -moz-transform-origin: 50% 0 0; 
transform-origin: 50% 0 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; 
transform-style: preserve-3d; display: inline-block; padding:0px; position: relative;
}
.roll2:hover span{
-webkit-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
}
.roll2 span:after{
-webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0 0; -moz-transform-origin: 50% 0 0; 
transform-origin: 50% 0 0; content: attr(data-hover); 
height: 100%; left: 0; position: absolute; 
top: 100%; width: 100%;text-align: center;
}
.roll2 span { width:100%; text-align:center; line-height:55px;}		
.roll2 span:after {line-height:55px; text-align:center; width:100%;}
.roll5 span:after{ width:100%; line-height:55px;}
.roll5 span{ width:100%; line-height:55px;}
.roll4 span:after{ width:100%; line-height:55px;}
.roll4 span{ width:100%; line-height:55px;}

.roll1{display: inline-block; overflow: hidden; vertical-align: middle; -webkit-perspective: 275px;
-moz-perspective: 275px; -ms-perspective: 275px; perspective: 275px; -webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%;
}
.roll1 span{-webkit-transition: -webkit-transform 0.3s ease; -moz-transition: -moz-transform 0.3s ease; 
transition: transform 0.3s ease; -webkit-transform-origin: 50% 0 0; -moz-transform-origin: 50% 0 0; 
transform-origin: 50% 0 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; 
transform-style: preserve-3d; display: inline-block; padding:0px; position: relative;
}
.roll1:hover span{
-webkit-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
}
.roll1 span:after{
-webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0 0; -moz-transform-origin: 50% 0 0; 
transform-origin: 50% 0 0; content: attr(data-hover); 
height: 100%; left: 0; position: absolute; line-height:55px;
top: 100%; width: 100%;text-align: center;
}
.roll1 span { width:100%; text-align:center; line-height:55px;}	
.roll3{display: inline-block; overflow: hidden; vertical-align: middle; -webkit-perspective: 275px;
-moz-perspective: 275px; -ms-perspective: 275px; perspective: 275px; -webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%;
}
.roll3 span{-webkit-transition: -webkit-transform 0.3s ease; -moz-transition: -moz-transform 0.3s ease; 
transition: transform 0.3s ease; -webkit-transform-origin: 50% 0 0; -moz-transform-origin: 50% 0 0; 
transform-origin: 50% 0 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; 
transform-style: preserve-3d; display: inline-block; padding:0px; position: relative;
}
.roll3:hover span{
-webkit-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
}
.roll3 span:after{
-webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0 0; -moz-transform-origin: 50% 0 0; 
transform-origin: 50% 0 0; content: attr(data-hover); 
height: 100%; left: 0; position: absolute; 
top: 100%; width: 100%;text-align: center;
}
.roll3 span {width:100%; text-align:center; line-height:55px;}		
.roll3 span:after { line-height:55px; text-align:center; width:100%;}



.webdesign{margin: 0;
    width: 49%;}
.webdesign a{ width:100%; font-size:22px;}	
.graphics {
    float: left;
    margin:0 0 0 2%;
    width: 49%;
}
.graphics a{ width:100%; font-size:22px;}

.webhosting {
    float: left;
    margin: 0;
    width: 49%;
}
.webhosting a{ width:100%; font-size:22px;}

.webdevelopment {
    float: left;
    margin:0 0 0 2%;
    width: 49%;
}
.webdevelopment a{ width:100%; font-size:22px;}

.domain {
    float: left;
    margin: 0 0 10px;
    width:99.7%;
}
.domain a{ width:100%; font-size:22px;}	
.portfolio-in,.middle-in{ width:94%;}
.middle{padding:30px 0;}
.contact-in1{ width:100%;}
.banner h2{ font-size:40px;}
.portfolio-box{ width:92%;}

.portfolio-big{ width:56%; height:450px;}
.portfolio-info{ float:right; width:40%;}
.middle-left {
    float: left;
    width: 47%;
}
.middle-right {
    float: right;
    width: 46%;
}
.left-input{ width:100%;}

.right-input {
    float: left;
    width: 100%;
}
.capcha{ width:80%; float:left;}
.btn{ float:left; margin:20px 0 0 0;}
.btn input[type="submit"]{ float:left;}
.middle-right select{ width:100%;}
.contact-left a{ color:#828282;}
.submit-btn{border-radius:none;-webkit-appearance: none;}
.portfolio-info input[type="button"], .btn input[type="submit"]{border-radius:none;-webkit-appearance: none;}
.portfolio-box li {
    border: 1px solid #7F7F7F;
    float: left;
    height: auto;
    margin: 0 2% 20px;
    width: 29%;
}
.portfolio-box li img{ float:left; height:auto;}
.mainnenu{ display:none!important;}
.navigation-responsive{ display:block!important;}
.mean-bar > span {
    color: #FFFFFF;
    font-size: 18px;
    left: 0;
    position: absolute;
    text-align: center;
    top:15px;
    width: 100%;
}
.header
{
display:none;
}
.Service-container{width:auto;}
.contact-top a{font-size:13px;}
.contact-top{position:relative;float:right;}
}
 

@media screen and (max-width:768px)
{
.banner{ height:auto; width:100%;}
#MY_VIDEO_1{width:90% !important; }
header{ background:#000; display:none;}
.header .below{ width:auto !important; height:auto !important;}
.contact-right, .contact-left{ width:100%;}
.logo{ display:none;}
.footer-left {
    float: left;margin: 0 auto;
	width:auto; text-align:left;
}
.footer-right {
    float: right;margin: 10px auto; width:auto;
}
.footer-right ul li{ margin-right: 20px; margin-left:0;}


.webdesign{margin:0px; width:100%; float:left;}
.webdesign a{position: relative; display: inline-block; color:#fff; line-height:55px; font-size: 22px;}


.graphics{margin:0px; width:100%; float:left; margin:10px 0;}
.graphics a{position: relative; display: inline-block; color:#fff; line-height:55px; font-size:22px; width:100%;} 


.webdevelopment{width:100%; line-height:55px; margin:10px 0 0 0;}
.webdevelopment a{ width:100%; font-size:22px; line-height:55px;}
.domain{ width:100%; margin:10px 0 10px 0; }
.domain a{ font-size:22px; line-height:55px; width:100%;}
	
.webhosting{margin:0px; width:100%; float:left;}
.webhosting a{position: relative; display: inline-block; color:#fff; line-height:55px; font-size:22px; width:100%;} 
.portfolio-box li{height: auto;
    margin: 0 2% 20px;
    width: 45%;}
.portfolio-box{ width:80%;}
.portfolio-big{ float:none; margin:0 auto; height: 500px;
    width: 500px;}
.portfolio-info {
    float: none;
    margin: 0 auto;
    width: 90%;
} 
.middle-left{ width:100%;}
.middle-right{ width:100%; float:right;}
.capcha{ width:54%;}
.btn{ float:right; margin:0;}
.inner-portfolio li{width: 210px; height: 225px;}
.banner-txt .contact{ top:-30px; font-size:16px;}
.comman-rounded-div, .extra-class{width:17%;}
}

@media screen and (max-width:600px)
{
.logo{ width:130px; height:auto; top:0px;}
.banner{ height:auto; width:100%;}
#MY_VIDEO_1{width:90% !important; }
.contentsection h2{ font-size:28px;}
.wssin h1{font-size:45px; color:#fff; text-align:center; line-height:normal; font-weight:normal; text-transform:uppercase; text-shadow: 2px 2px #000; padding-bottom:30px;}
.contactus h3{ font-size:29px;}

.contact-left{width:100%;}
.contact-right{width:100%; margin:0; float:left;}
.footer-left{ width:100%; text-align:right;}
.footer-right ul li{ margin-right: 20px; margin-left:0;}
.footer-right{  text-align: center; width:auto;}
.footer-right ul{padding: 7px 5px 0 0;}
.logo_tiny{ left:18px;}
.wss{ padding:10px 0; /*margin-top:156px;*/}

.portfolio-box li {

    height:auto;
    margin: 0 2% 20px;
    width: 45%;
}
.portfolio-big{height: auto;
    width:100%; float:left;}
	
	.portfolio-big img{ width:100%; height:auto;}
.portfolio-info {
    width:100%; float:left;
	
} 	
.portfolio-big img{ float:left;}
.middle-right{ float:left;}
.inner-portfolio li{width: 210px; height: 225px;}
.back-btn{ position:relative; bottom:0; margin:0 0 10px;}
.banner-txt .contact{ top:-35px; font-size:14px; line-height:20px !important;}
.testimonial-text{font-size:14px;line-height:19px;}
.contentsection h2{font-size:14px;font-weight:bold;}
.contentsection p{font-size:14px;}
.footer-left{font-size:13px;}
.footer-right{font-size:12px;}
.about{width:205px;}
.extra-class{padding-left:23%;}
.comman-rounded-div, .extra-class{padding:0 0 3% 35%!important;}
.comman-rounded-div, .extra-class{width:auto;}
.reslogo{top:50px;}
}


@media screen and (max-width:480px)
{
.back-btn{position:relative;}
.footer-left{ text-align:right;}
.footer-right ul li{ margin-right: 20px; margin-left:0;}
.footer-right{width:auto; padding:0;}
.portfolio-box li {
    height:auto;
    margin: 0 0 20px;
    width: 100%;
}

.address-info a{font-size: 13px;}
.capcha {
    width: 100%;
}

.btn {
    float: right;
    margin: 20px 0 0 !important;
    width: 100%;
}
.btn input[type="submit"]{ width:100%;}
.banner h2{ font-size:21px;}
.inner-portfolio li{margin: 30px 0; width:100%; height:auto; border:none;}
.inner-portfolio li img{ float:left; border:1px solid #898989; height:auto; }
.banner h2.searchh2 {
    font-size: 20px;
}
.banner-txt .contact{ top:-35px; font-size:12px; line-height:16px !important;}
.comman-rounded-div, .extra-class{padding:0 0 3% 35%!important;}
.ngg-gallery-thumbnail-box{width:93% !important;}
.reslogo{top:45px;}
}


@media screen and (max-width:320px)
{
.footer-left{ text-align:center;}
.footer-right{width:100%; padding:10px 0 0 0;}

#small_img, #small_img_h2 { display:block;}
.banner-txt img {
    padding: 0;
}
.wp-pagenavi a, .wp-pagenavi span{ padding:0 5px !important;}
.search-field{ width:90%;}
.search-form input[type="submit"]{ margin:10px 0 0 0;}
.banner-txt .contact{ top:-45px; font-size:9px; line-height:14px !important; right:0;}
.comman-rounded-div, .extra-class{padding:0 0 3% 23%!important;}
.reslogo{top:45px;}
}