@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%;}

	

}

@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:40px; /*top:70px;*/left:0px; right:0px; margin:0 auto;}

.banner-txt img{ width:100%; height:auto;}

.wssin{ width:96%;}

.wss{ padding:10px 0; background:url(../images/wss.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;}

.contentsection-in{width:96%;}

.contact-in{width:96%;}

.footerin{width:96%;}

.contentsection{width:100%; background:#C1C1C1; padding:35px 0 50px 0; float:left;}



.contactus{width:100%; height:auto; background:#fff url(../images/contentbg.png) no-repeat 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:11px;}

.footer-right{ font-size:11px; width:283px;}

.about-us{ min-height:142px;}

.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 {color:#fff; background-color: #00b2bd; width:100%; text-align:center; line-height:55px;}		

.roll2 span:after {color:#FFF; background:#068681; 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 {color:#fff; background-color:#f0727d; 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 {color:#fff; background-color:#00bc4d; width:100%; text-align:center; line-height:55px;}		

.roll3 span:after {color:#FFF; background:#027631; 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{background:#C1C1C1; 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;

}

}

 



@media screen and (max-width:768px)

{

/*.contactno{    right: 2%;

    top: 5%;}
*/
.contact-right .captcha{width:85%;}

.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: none;margin: 0 auto;

	width:100%; text-align:left;

}

.footer-right {

    float: none;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;}

}



@media screen and (max-width:600px)

{



.contactno {

    font-size:40px;

}

.contactno {
/*
    right: 0;

    top: 5%;
*/
}

.contact-right .captcha{width:80%;} 

.logo{ width:130px; height:auto; top:0px;}

.banner{ height:auto; width:100%;}

#MY_VIDEO_1{width:90% !important; }

.contentsection h2{ font-size:32px;}

.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:35px;}



.contact-left{width:100%;}

.contact-right{width:100%; margin:0; float:left;}

.footer-left{ width:100%; text-align:left;}

.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;}

}



@media screen and (max-width:480px)

{

.contact-right .captcha{width:67%;} 

.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:30px;}

.inner-portfolio li{margin: 30px 0; width:100%; height:auto; border:none;}

.inner-portfolio li img{ float:left; border:1px solid #898989; height:auto; }

}





@media screen and (max-width:320px)

{

.banner-txt{top:19px;}
.contactno{ font-size:20px;}
.footer-left{ text-align:center;}

.footer-right{width:100%; padding:10px 0 0 0;}



#small_img, #small_img_h2 { display:block;}

}