@charset "utf-8";
body {
	margin: 0px;
	padding: 0px; font-family: 'Source Sans Pro', sans-serif; font-size:12px; font-weight:normal; text-decoration:none; display:block; color:#000;}
	
h1, h2, h3, h4, h5, a, p, span, default, label, checkbox, ol, ul, li, radio, select, input{ margin:0px; padding:0px; outline:none;}


/* Smartphones (portrait and landscape) ----------- */

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

#main{ width:100%; float:left;}

.main-bg{ width:100%; height:520px; float:left; background:url(../images/bg.jpg) center top no-repeat; background-attachment:fixed; position:relative;}

.wrap{ width:95%; margin:0 auto;}

.logo{ width:100%; float:left; z-index:999; margin:20px 0 0 0; text-align:center;}

.ver-navi{ width:90%; float:right; z-index:999; position:absolute; margin:3% 0 0 0;}

.vertex-head{ width:100%; float:left; font-family: 'Lato', sans-serif; font-size:28px; text-align:center; color:#FFF; background:url(../images/vertex-head-line.jpg) bottom center no-repeat; margin:150px 0 0 0; padding:0 0 30px 0; letter-spacing:3px;}


.vertex-head-title{ width:100%; float:left; font-family: 'Lato', sans-serif; font-size:18px; text-align:center; color:#FFF; margin:60px 0 0 0;}


.vtext{ font-size:16px; text-align:justify; margin:40px 0 40px 0; line-height:30px;}

.wedo{ font-size:28px; padding:30px 0 30px 0;}


.wedo-box{ width:98%; float:left; margin:10% 1% 5% 1%;}


.wedo-icon-main{ width:100%; float:left; text-align:center; margin:0 0 5% 0;}

.wedo-icon{ width:100%; float:left;}
.wedo-icon img{ width:30%; height:10%; text-align:center;}

.wedo-icon-main h6{ font-size:18px;}

.wedo-icon-main p{ font-size:14px;}

.learn-more{ width:35%;}
.learn-more a{ font-size:14px; }

.content-b h5 { font-size:22px; padding:50px 0 20px 0;}

.content-b p { font-size:16px;}

.name-input{ width:100%; float:left; margin:0 0 2% 0;}

.name-inp{ width:90%; margin:0 0 2% 0;}

.submit{ width:100%; float:left;}

.submit-btn{ width:90%; margin:0 0 0 0%;}


.footer-link-box{ width:96%; float:left; margin:10px 2% 4% 2%;}

.footer-head{ font-size:16px;}

.footer-child{ font-size:12px;}

.footer-child a{ font-size:12px;}

.footer-link{ width:100%; float:left;}
.footer-link ul{ line-height:20px;}
.footer-link ul li a{ font-size:12px; padding:5px 0 5px 10px;}


/* ************************************ ABOUT PAGE START ************************************ */

/***********************************  DESIGN AND CODING BY MOHD AFZAL  ************************************************/

.inner-mainbg{ width:100%; height:300px; float:left; background:url(../images/aboutbg.jpg) center top no-repeat; margin:60px 0 0 0;}


.inner-main-head{ font-size:32px; padding:40% 0 20px 0;}

.inner-main-head span{ font-size:14px; padding:0px 0 10px 0;}

.vabout-text{ font-size:14px; text-align:justify; margin:20px 0 0px 0; line-height:25px;}


.designers-text{ width:100%; float:left; text-align:right;}

.designers-text h5{ text-align:center; font-size:18px; padding:30px 0 0px 0;}

.designers-text p{ text-align:justify; font-size:14px; line-height:25px; margin:0 2% 2% 2%;}

.designers-image{ width:95%; float:left; margin:0 1% 0 2%;}

.designers-image img{ width:100%; height:50%; float:right;}


.designers-text-right{ width:100%; float:right; text-align:left;}

.designers-text-right h5{ text-align:center; font-size:18px; padding:30px 0 0 0;}

.designers-text-right p{ text-align:justify; font-size:14px; line-height:25px;}

.designers-image-right{ width:100%; float:left;}

.designers-image-right img{ width:100%; height:50%; float:left;}


.testi-main{ width:100%; float:left; background:url(../images/parallax-about.jpg) center top no-repeat;}

.testi-text{ width:100%; float:left; font-family: 'Raleway', sans-serif; text-align:justify; color:#fff; font-size:14px; line-height:25px; padding:50px 0 50px 0;}


.tools-metho{ width:100%; float:left;}

.tools-metho h5{ font-size:20px; text-align:center; padding:0px 0 5px 0; margin:3% 0 0 0;}

.tools-metho p{ font-size:14px; text-align:justify;}

/* ************************************ ABOUT PAGE END ************************************ */


/* ************************************ PORTFOLIO PAGE START ************************************ */

.brand-filter{ width:100%; float:left; margin:5% 0 5% 0;}

/* ************************************ PORTFOLIO PAGE END ************************************ */


/* ************************************ SERVICES PAGE START ************************************ */

.vabout-text h4{ font-size:18px; line-height:30px; margin:0 0 20px 0;}

.design-learn{ width:26%; float:left; margin:-30px 0 10px 0;}
.design-learn a{ font-size:14px;}
.design-learn a:hover{ color:#333c4e;}

.display-main{ width:100%; float:left; background:url(../images/dispaly.jpg) center top no-repeat;}

.dispaly-text{ width:60%; float:left;}

.dispaly-text h5{ font-family: 'Lato', sans-serif; color:#fff; font-size:18px; padding:30px 0 20px 0;}


.dispaly-text p{ font-family: 'Raleway', sans-serif; color:#fff; font-size:14px; line-height:25px; padding:0px 0 20px 0;}


.websitep-main{ width:100%; float:left;}

.websitep{ width:100%; float:left;}

.web-pic{ width:48%; float:left; border: solid 2px #CCCCCC; background-color:#fff; transition: all 1s ease; margin:0 1% 2% 1%; padding:5px;}

.web-pic img{ width:100%; height:100px; float:left;}

.web-pic:hover{ border: solid 2px #655e96; transform: scale(1.0);}

/* ************************************ SERVICES PAGE END ************************************ */


/* ************************************ CONTACT PAGE ************************************ */

.contact-text{ width:100%; text-align:justify;}

.contact-text h3{ font-size:18px; padding:10px 0 0 0;}

.contact-text span{ font-size:16px; padding:10px 0 0 0;}

.contact-text p{ font-size:14px; line-height:25px;}


.contact-form-main{ width:100%; }

.cntname-inp{ width:80%; font-size:12px; margin:1% 3% 3% 10%; outline:none;}

.cntsubmit-btn{ width:80%; float:left; font-size:12px; }




.client-logo{ width:100%; float:left;}

#vertical, #horizontal {
	margin:0px auto;
	width:50%;
}
#vertical div, #horizontal div {
	margin-bottom:8px;
	float:left;
	width:100%;
	height:70px;
	border:1px solid #999;
	position:relative;
	overflow:hidden;
}
#vertical img, #horizontal img {
	position:static;
	width:100%;
	
	
	
}


/* ************************* THANK YOU *************************  */

.thnk-you{ width:80%; float:left; font-family: 'Lato', sans-serif; font-size:18px; color:#333c4e; text-align:center; padding:32px 0 32px 0; margin:0 10% 0 10%;}


.thnk-you p{ width:80%; float:left; font-family: 'Lato', sans-serif; font-size:14px; color:#333c4e; text-align:center; margin:0% 10% 0 10%;}

}



/* iPads (portrait and landscape) ----------- */

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

#main{ width:100%; height:770px; float:left;}

.wrap{ width:95%; margin:0 auto;}

.vertex-head{ font-size:34px; margin:250px 0 0 0; padding:0 0 30px 0;}

.vertex-head-title{ font-size:20px; margin:100px 0 0 0;}

.vtext{ font-size:16px; text-align:justify; margin:350px 0 50px 0; line-height:30px;}

.wedo{ font-size:28px; padding:30px 0 30px 0; margin:8% 0 0 0;}


.wedo-box{ width:98%; float:left; margin:10% 1% 0% 1%;}


.wedo-icon-main{ width:100%; float:left; text-align:center; margin:0 0 0% 0;}

.wedo-icon img{ width:20%; height:10%; text-align:center;}

.wedo-icon-main h6{ font-size:18px;}

.wedo-icon-main p{ font-size:16px;}


.content-b h5 { font-size:22px; padding:50px 0 20px 0;}

.content-b p { font-size:16px;}

.name-input{ width:100%; float:left; margin:0 0 2% 0;}

.name-inp{ width:90%; margin:0 0 2% 0;}

.submit{ width:100%; float:left;}

.submit-btn{ width:90%; margin:0 0 0 0%;}


.footer-link-box{ width:48%; float:left; margin:10px 1% 4% 1%;}

.footer-head{ font-size:16px;}

.footer-child{ font-size:12px; line-height:25px;}

.footer-child a{ font-size:12px;}

.footer-link{ width:100%; float:left;}
.footer-link ul{ line-height:20px;}
.footer-link ul li a{ font-size:12px; padding:5px 0 5px 10px;}


/* ************************************ ABOUT PAGE START ************************************ */


.inner-mainbg{ margin:0px 0 0 0;}


.inner-main-head{ padding:35% 0 20px 0;}

.inner-main-head span{ font-size:14px; padding:0px 0 10px 0;}

.vabout-text{ font-size:14px; text-align:justify; margin:20px 0 0px 0; line-height:22px;}


.designers-text{ width:45%; float:left; text-align:right;}

.designers-text h5{ text-align:right; font-size:18px; padding:45px 0 0px 0;}

.designers-text p{ text-align:justify; font-size:14px; line-height:20px;}

.designers-image{ width:50%; float:right;}

.designers-image img{ width:105%; height:55%; float:right; margin:25% 0 0 0;}


.designers-text-right{ width:45%; float:right; text-align:left;}

.designers-text-right h5{ text-align:left; font-size:18px; padding:0px 0 0 0;}

.designers-text-right p{ text-align:justify; font-size:14px; line-height:20px;}

.designers-image-right{ width:50%; float:left;}

.designers-image-right img{ width:105%; height:50%; float:left;}


.testi-main{ width:100%; float:left; background:url(../images/parallax-about.jpg) center top no-repeat;}

.testi-text{ width:100%; float:left; font-family: 'Raleway', sans-serif; text-align:justify; color:#fff; font-size:14px; line-height:25px; padding:40px 0 40px 0;}


/* ************************************ PORTFOLIO PAGE START ************************************ */

.brand-filter{ width:100%; float:left; margin:5% 0 5% 0;}

/* ************************************ PORTFOLIO PAGE END ************************************ */


/* ************************************ SERVICES PAGE START ************************************ */

.vabout-text h4{ font-size:20px; line-height:30px; margin:0 0 20px 0;}

.design-learn{ width:39%; float:left; margin:-30px 0 10px 0;}
.design-learn a{ font-size:14px;}
.design-learn a:hover{ color:#333c4e;}

.display-main{ width:100%; float:left; background:url(../images/dispaly.jpg) center top no-repeat;}

.dispaly-text{ width:60%; float:left;}

.dispaly-text h5{ font-family: 'Lato', sans-serif; color:#fff; font-size:18px; padding:30px 0 20px 0;}


.dispaly-text p{ font-family: 'Raleway', sans-serif; color:#fff; font-size:14px; line-height:25px; padding:0px 0 20px 0;}

/* ************************************ SERVICES PAGE END ************************************ */



/* ************************************ CONTACT PAGE ************************************ */

.contact-text{ width:100%; text-align:justify;}

.contact-text h3{ font-size:20px; padding:10px 0 0 0;}

.contact-text span{ font-size:18px; padding:10px 0 0 0;}

.contact-text p{ font-size:16px; line-height:25px;}


.contact-form-main{ width:100%; }

.cntname-inp{ width:80%; font-size:12px; margin:1% 3% 3% 10%; outline:none;}

.cntsubmit-btn{ width:80%; float:left; font-size:12px; }




}




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

#main{ width:100%; height:870px; float:left;}

.wrap{ width:95%; margin:0 auto;}

.vertex-head{ font-size:38px; margin:300px 0 0 0; padding:0 0 30px 0;}

.vertex-head-title{ font-size:22px; margin:100px 0 0 0;}

.vtext{ font-size:16px; text-align:justify; margin:400px 0 0px 0; line-height:30px;}

.mouse {
  
  bottom: 187px;
  
}

.wedo{ font-size:28px; padding:30px 0 30px 0; margin:8% 0 0 0;}


.wedo-box{ width:31%; float:left; margin:6% 1% 0% 1%;}


.wedo-icon-main{ width:100%; float:left; text-align:center; margin:0 0 0% 0;}

.wedo-icon img{ width:30%; height:10%; text-align:center;}

.wedo-icon-main h6{ font-size:16px;}

.wedo-icon-main p{ font-size:14px; text-align:center;}

.learn-more{ width:43%; margin:30px 0 0 26%;}
.learn-more a{ font-size:14px; }


.content-b h5 { font-size:26px; padding:50px 0 0px 0;}

.content-b p { font-size:16px;}

.name-input{ width:50%; float:left; margin:0 0 2% 0;}

.name-inp{ width:90%; margin:0 0 2% 0;}

.submit{ width:100%; float:left;}

.submit-btn{ width:90%; margin:0 0 0 0%;}

.fullscreen,
.content-a {
    
    height:40%;
    
}


.footer-link-box{ width:48%; float:left; margin:10px 1% 4% 1%;}

.footer-head{ font-size:16px;}

.footer-child{ font-size:14px; line-height:35px;}

.footer-child a{ font-size:14px;}

.footer-link{ width:90%; float:left;}
.footer-link ul{ line-height:20px;}
.footer-link ul li a{ font-size:14px; padding:5px 0 5px 10px;}


/* ************************************ ABOUT PAGE START ************************************ */


.inner-mainbg{ margin:0px 0 0 0;}


.inner-main-head{ padding:23% 0 20px 0;}

.vabout-text{ font-size:16px; text-align:justify; margin:20px 0 -50px 0; line-height:30px;}


.designers-text{ width:45%; float:left; text-align:right;}

.designers-text h5{ text-align:right; font-size:22px; padding:155px 0 20px 0;}

.designers-text p{ text-align:right; font-size:16px; line-height:25px;}


.designers-text-right{ width:45%; float:right; text-align:left;}

.designers-text-right h5{ text-align:left; font-size:22px; padding:80px 0 20px 0;}

.designers-text-right p{ text-align:left; font-size:16px; line-height:25px;}

.testi-text{ width:100%; float:left; font-family: 'Raleway', sans-serif; text-align:justify; color:#fff; font-size:16px; line-height:25px; padding:40px 0 40px 0;}


/* ************************************ SERVICES PAGE START ************************************ */

.vabout-text h4{ font-size:26px; line-height:30px; margin:0 0 20px 0;}

.design-learn{ width:25%; float:right; margin:-30px 0 10px 0;}
.design-learn a{ font-size:14px;}
.design-learn a:hover{ color:#333c4e;}

.display-main{ width:100%; float:left; background:url(../images/dispaly.jpg) center top no-repeat;}

.dispaly-text{ width:60%; float:left;}

.dispaly-text h5{ font-family: 'Lato', sans-serif; color:#fff; font-size:18px; padding:30px 0 20px 0;}


.dispaly-text p{ font-family: 'Raleway', sans-serif; color:#fff; font-size:14px; line-height:25px; padding:0px 0 20px 0;}

/* ************************************ SERVICES PAGE END ************************************ */


/* ************************************ CONTACT PAGE ************************************ */

.contact-text{ width:45%; text-align:right;}

.contact-text h3{ font-size:20px; padding:10px 0 0 0;}

.contact-text span{ font-size:18px; padding:10px 0 0 0;}

.contact-text p{ font-size:16px; line-height:25px;}


.contact-form-main{ width:50%; }

.cntname-inp{ width:80%; font-size:12px; margin:1% 3% 7% 10%; outline:none;}

.cntsubmit-btn{ width:80%; float:left; font-size:12px; }

}